feat: enhance App.jsx with file attachment and PDF/text parsing

- Added support for attaching .txt and .pdf files in the chat interface
- Implemented PDF parsing using pdfjs-dist for extracting text content
- Updated UI to show attached file name and restrict file types
- Improved input resizing and message handling logic
- Updated dependencies in package.json for new features

.gitignore

@@ -0,0 +1 @@
+node_modules

package.json

@@ -13,6 +13,7 @@
     "@huggingface/transformers": "3.7.5",
     "dompurify": "^3.1.2",
     "marked": "^12.0.2",
+    "pdfjs-dist": "^5.4.296",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

src/App.jsx

@@ -32,12 +32,39 @@ function App() {
   const [messages, setMessages] = useState([]);
   const [tps, setTps] = useState(null);
   const [numTokens, setNumTokens] = useState(null);
-
-  function onEnter(message) {
-    setMessages((prev) => [...prev, { role: "user", content: message }]);
+  const [attachedFile, setAttachedFile] = useState(null);
+
+  async function onEnter(message) {
+    let fileText = "";
+    if (attachedFile) {
+      if (attachedFile.name.endsWith(".txt")) {
+        fileText = await attachedFile.text();
+      } else if (attachedFile.name.endsWith(".pdf")) {
+        // Dynamically import pdfjs-dist
+        const pdfjsLib = await import("pdfjs-dist/build/pdf");
+        const workerSrc = (await import("pdfjs-dist/build/pdf.worker?url")).default;
+        pdfjsLib.GlobalWorkerOptions.workerSrc = workerSrc;
+        const arrayBuffer = await attachedFile.arrayBuffer();
+        const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
+        let pdfText = "";
+        for (let i = 1; i <= pdf.numPages; i++) {
+          const page = await pdf.getPage(i);
+          const content = await page.getTextContent();
+          pdfText += content.items.map(item => item.str).join(" ") + "\n";
+        }
+        fileText = pdfText;
+      }
+    }
+    let fullPrompt = message;
+    if (fileText) {
+      fullPrompt += "\n\n--- File Content ---\n" + fileText;
+    }
+    let userMsg = { role: "user", content: fullPrompt };
+    setMessages((prev) => [...prev, userMsg]);
     setTps(null);
     setIsRunning(true);
     setInput("");
+    setAttachedFile(null);
   }
 
   function onInterrupt() {
@@ -326,10 +353,10 @@ function App() {
         </div>
       )}
 
-      <div className="mt-2 border dark:bg-gray-700 rounded-lg w-[600px] max-w-[80%] max-h-[200px] mx-auto relative mb-3 flex">
+      <div className="mt-2 border dark:bg-gray-700 rounded-lg w-[600px] max-w-[80%] max-h-[200px] mx-auto relative mb-3 flex items-center gap-2">
         <textarea
           ref={textareaRef}
-          className="scrollbar-thin w-[550px] dark:bg-gray-700 px-3 py-4 rounded-lg bg-transparent border-none outline-none text-gray-800 disabled:text-gray-400 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 disabled:placeholder-gray-200 resize-none disabled:cursor-not-allowed"
+          className="scrollbar-thin w-[420px] dark:bg-gray-700 px-3 py-4 rounded-lg bg-transparent border-none outline-none text-gray-800 disabled:text-gray-400 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 disabled:placeholder-gray-200 resize-none disabled:cursor-not-allowed"
           placeholder="Type your message..."
           type="text"
           rows={1}
@@ -349,11 +376,29 @@ function App() {
           }}
           onInput={(e) => setInput(e.target.value)}
         />
+        <label className="flex items-center px-2 py-2 bg-blue-100 text-blue-700 rounded cursor-pointer hover:bg-blue-200">
+          📎 Attach
+          <input
+            type="file"
+            accept=".txt,.pdf"
+            className="hidden"
+            onChange={e => {
+              const file = e.target.files[0];
+              if (file && ![".txt", ".pdf"].some(ext => file.name.toLowerCase().endsWith(ext))) {
+                alert("Only .txt and .pdf files are allowed.");
+                e.target.value = "";
+                return;
+              }
+              setAttachedFile(file);
+            }}
+            disabled={status !== "ready"}
+          />
+        </label>
         {isRunning ? (
           <div className="cursor-pointer" onClick={onInterrupt}>
             <StopIcon className="h-8 w-8 p-1 rounded-md text-gray-800 dark:text-gray-100 absolute right-3 bottom-3" />
           </div>
-        ) : input.length > 0 ? (
+        ) : input.length > 0 || attachedFile ? (
           <div className="cursor-pointer" onClick={() => onEnter(input)}>
             <ArrowRightIcon
               className={`h-8 w-8 p-1 bg-gray-800 dark:bg-gray-100 text-white dark:text-black rounded-md absolute right-3 bottom-3`}
@@ -366,6 +411,9 @@ function App() {
             />
           </div>
         )}
+        {attachedFile && (
+          <span className="ml-2 text-xs text-gray-600">{attachedFile.name}</span>
+        )}
       </div>
 
       <p className="text-xs text-gray-400 text-center mb-3">