UX

src/components/ChatWindow.jsx

@@ -26,10 +26,14 @@ function ChatWindow({
 
   const isReady = loadingStatus.progress === 1;
 
-  const handleClear = () => {
+  const handleClearChat = () => {
     deleteMessages();
   }
 
+  const handleClearFile = () => {
+    setFileText(null);
+  }
+
   const handleSubmit = useCallback(async () => {
     if (isGenerating || !isReady) {
       return;
@@ -153,7 +157,7 @@ function ChatWindow({
                   </Button>
                   
                   <FileLoader setFileText={setFileText} />
-                  <Button onClick={handleClear}>Clear</Button>
+                  <Button onClick={handleClearChat}>Clear Chat</Button>
                   </div>
                   
                   <div

src/components/FileEmbedder.tsx

@@ -42,9 +42,9 @@ export const FileEmbedder: React.FC<FileEmbedderProps> = ({ handleEmbed }) => {
       >
         <input {...getInputProps()} />
         {isDragActive ? (
-          <p>Drop the files here...</p>
+          <p>Drop the file here...</p>
         ) : (
-          <p><u>Click or drag and drop files here (PDF, MD, TXT)</u></p>
+          <p style={{ cursor: 'pointer' }}>Click here or drag and drop file here (PDF, MD, TXT), then press Embed</p>
         )}
       </div>
       <aside>

src/components/Loader.jsx

@@ -29,7 +29,8 @@ const Loader = () => {
             flexDirection: "column",
             gap: "10px",
             fontSize: "24px",
-            textAlign: "center"
+            textAlign: "center",
+            fontFamily: "\"Comic Sans MS\", cursive, sans-serif;"
           }}
         >
           <div className="lg:hidden">
@@ -55,7 +56,7 @@ const Loader = () => {
           </div>
           <div>
             This will download the model (~4GB) and may take a few minutes. After the
-            first time, it will be cached. It can be deleted in Dev Tools Cache Storage (tvmjs).
+            first time, it will be cached.
           </div> 
 
           <button