From a42556e222bcd3bc6e01807dc200cad910d18719 Mon Sep 17 00:00:00 2001
From: Anirudh Ramchandran <aramchandran@tenstorrent.com>
Date: Wed, 29 Jan 2025 15:49:36 -0500
Subject: [PATCH 01/29] fix ts bug

---
 app/frontend/src/components/NavBar.tsx | 39 +++++++++++++++-----------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/app/frontend/src/components/NavBar.tsx b/app/frontend/src/components/NavBar.tsx
index 7a8b9eff..5e38ad3e 100644
--- a/app/frontend/src/components/NavBar.tsx
+++ b/app/frontend/src/components/NavBar.tsx
@@ -2,7 +2,7 @@
 // SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
 "use client";
 
-import { useMemo, useRef, useEffect } from "react";
+import React, { useMemo, useRef, useEffect } from "react";
 import { NavLink, useLocation, useNavigate } from "react-router-dom";
 import { motion } from "framer-motion";
 import {
@@ -45,19 +45,21 @@ interface AnimatedIconProps {
   className?: string;
 }
 
-const AnimatedIcon: React.FC<AnimatedIconProps> = ({
-  icon: Icon,
-  ...props
-}) => (
-  <motion.div
-    whileHover={{ scale: 1.2 }}
-    whileTap={{ scale: 0.9 }}
-    transition={{ type: "spring", stiffness: 400, damping: 17 }}
-  >
-    <Icon {...props} />
-  </motion.div>
+const AnimatedIcon = React.forwardRef<HTMLDivElement, AnimatedIconProps>(
+  ({ icon: Icon, ...props }, ref) => (
+    <motion.div
+      ref={ref}
+      whileHover={{ scale: 1.2 }}
+      whileTap={{ scale: 0.9 }}
+      transition={{ type: "spring", stiffness: 400, damping: 17 }}
+    >
+      <Icon {...props} />
+    </motion.div>
+  )
 );
 
+AnimatedIcon.displayName = "AnimatedIcon";
+
 export default function NavBar() {
   const location = useLocation();
   const navigate = useNavigate();
@@ -298,7 +300,8 @@ export default function NavBar() {
                   {isChatUI ? (
                     <Tooltip>
                       <TooltipTrigger asChild>
-                        <FileText
+                        <AnimatedIcon
+                          icon={FileText}
                           className={`mr-2 ${iconColor} transition-colors duration-300 ease-in-out hover:text-TT-purple`}
                         />
                       </TooltipTrigger>
@@ -308,7 +311,8 @@ export default function NavBar() {
                     </Tooltip>
                   ) : (
                     <>
-                      <FileText
+                      <AnimatedIcon
+                        icon={FileText}
                         className={`mr-2 ${iconColor} transition-colors duration-300 ease-in-out hover:text-TT-purple`}
                       />
                       <span>Logs</span>
@@ -333,7 +337,8 @@ export default function NavBar() {
                         models.length > 0 ? "" : "opacity-50 cursor-not-allowed"
                       }`}
                     >
-                      <BotMessageSquare
+                      <AnimatedIcon
+                        icon={BotMessageSquare}
                         className={`mr-2 ${iconColor} transition-colors duration-300 ease-in-out hover:text-TT-purple`}
                       />
                       {!isChatUI && <span>Chat UI</span>}
@@ -363,7 +368,8 @@ export default function NavBar() {
                         models.length > 0 ? "" : "opacity-50 cursor-not-allowed"
                       }`}
                     >
-                      <Eye
+                      <AnimatedIcon
+                        icon={Eye}
                         className={`mr-2 ${iconColor} transition-colors duration-300 ease-in-out hover:text-TT-purple`}
                       />
                       {!isChatUI && <span>Object Detection</span>}
@@ -478,4 +484,3 @@ export default function NavBar() {
     </TooltipProvider>
   );
 }
-

From 8eef00fcd727eed7f7415585858b81534d5415b7 Mon Sep 17 00:00:00 2001
From: Anirudh Ramchandran <aramchandran@tenstorrent.com>
Date: Thu, 30 Jan 2025 08:50:45 -0500
Subject: [PATCH 02/29] add console log

---
 app/frontend/src/components/chatui/runInference.ts | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/app/frontend/src/components/chatui/runInference.ts b/app/frontend/src/components/chatui/runInference.ts
index 3b61f4c7..e0073e5c 100644
--- a/app/frontend/src/components/chatui/runInference.ts
+++ b/app/frontend/src/components/chatui/runInference.ts
@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: Apache-2.0
 // SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
 
-import {
+import type {
   InferenceRequest,
   RagDataSource,
   ChatMessage,
@@ -23,6 +23,8 @@ export const runInference = async (
   try {
     setIsStreaming(true);
 
+    console.log("Uploaded files:", request.files);
+
     let ragContext: { documents: string[] } | null = null;
 
     if (ragDatasource) {
@@ -34,7 +36,7 @@ export const runInference = async (
     console.log("RAG context being passed to generatePrompt:", ragContext);
     const messages = generatePrompt(
       chatHistory.map((msg) => ({ sender: msg.sender, text: msg.text })),
-      ragContext,
+      ragContext
     );
 
     console.log("Generated messages:", messages);
@@ -84,7 +86,7 @@ export const runInference = async (
  
     console.log(
       "Sending request to model:",
-      JSON.stringify(requestBody, null, 2),
+      JSON.stringify(requestBody, null, 2)
     );
 
     const response = await fetch(API_URL, {
@@ -151,7 +153,7 @@ export const runInference = async (
                   user_tpot: jsonData.tpot,
                   tokens_decoded: jsonData.tokens_decoded,
                   tokens_prefilled: jsonData.tokens_prefilled,
-                  context_length: jsonData.context_length
+                  context_length: jsonData.context_length,
                 };
                 console.log("Final Inference Stats received:", inferenceStats);
                 continue; // Skip processing this chunk as part of the generated text
@@ -186,7 +188,7 @@ export const runInference = async (
     if (inferenceStats) {
       console.log(
         "Updating chat history with inference stats:",
-        inferenceStats,
+        inferenceStats
       );
       setChatHistory((prevHistory) => {
         const updatedHistory = [...prevHistory];

From 9f108640b28398394de60d84655a32035202dee9 Mon Sep 17 00:00:00 2001
From: Anirudh Ramchandran <aramchandran@tenstorrent.com>
Date: Thu, 30 Jan 2025 09:01:16 -0500
Subject: [PATCH 03/29] adds support to input area to allow for file upload

---
 .../src/components/chatui/InputArea.tsx       | 170 ++++++++++++++++--
 .../src/components/chatui/fileUtils.tsx       |  81 +++++++++
 2 files changed, 236 insertions(+), 15 deletions(-)
 create mode 100644 app/frontend/src/components/chatui/fileUtils.tsx

diff --git a/app/frontend/src/components/chatui/InputArea.tsx b/app/frontend/src/components/chatui/InputArea.tsx
index 00e9df32..b55cd9ad 100644
--- a/app/frontend/src/components/chatui/InputArea.tsx
+++ b/app/frontend/src/components/chatui/InputArea.tsx
@@ -1,17 +1,32 @@
 // SPDX-License-Identifier: Apache-2.0
-// SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
-import React, { useEffect, useRef } from "react";
+// SPDX-FileCopyrightText: © 2025 Tenstorrent AI ULC
+import type React from "react";
+import { useEffect, useRef, useState } from "react";
 import { Button } from "../ui/button";
-import { Paperclip, Send } from "lucide-react";
+import { Paperclip, Send, X, File } from "lucide-react";
 import { VoiceInput } from "./VoiceInput";
+import { FileUpload } from "../ui/file-upload";
+import { encodeFileToBase64, isImageFile, validateFile } from "./fileUtils";
+import { cn } from "../../lib/utils";
+
+interface FileData {
+  type: "text" | "image_url";
+  text?: string;
+  image_url?: {
+    url: string;
+  };
+  name: string;
+}
 
 interface InputAreaProps {
   textInput: string;
   setTextInput: React.Dispatch<React.SetStateAction<string>>;
-  handleInference: (input: string) => void;
+  handleInference: (input: string, files: FileData[]) => void;
   isStreaming: boolean;
   isListening: boolean;
   setIsListening: (isListening: boolean) => void;
+  files: FileData[];
+  setFiles: React.Dispatch<React.SetStateAction<FileData[]>>;
 }
 
 export default function InputArea({
@@ -21,15 +36,21 @@ export default function InputArea({
   isStreaming,
   isListening,
   setIsListening,
+  files,
+  setFiles,
 }: InputAreaProps) {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const [isFileUploadOpen, setIsFileUploadOpen] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
 
+  // Preserved original focus logic
   useEffect(() => {
-    if (textareaRef.current) {
+    if (textareaRef.current && !isStreaming) {
       textareaRef.current.focus();
     }
   }, [isStreaming]);
 
+  // Maintained textarea height adjustment
   useEffect(() => {
     if (textareaRef.current) {
       adjustTextareaHeight();
@@ -47,20 +68,126 @@ export default function InputArea({
     setTextInput(e.target.value);
   };
 
+  // Preserved original key press handling
   const handleKeyPress = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === "Enter" && !e.shiftKey) {
+    if (e.key === "Enter" && !e.shiftKey && !isStreaming) {
       e.preventDefault();
-      handleInference(textInput);
+      handleInference(textInput, files);
     }
   };
 
+  // Maintained voice input with space addition
   const handleVoiceInput = (transcript: string) => {
-    setTextInput((prevInput) => prevInput + " " + transcript);
+    setTextInput((prevText) => prevText + (prevText ? " " : "") + transcript);
+  };
+
+  const handleFileUpload = async (uploadedFiles: File[]) => {
+    try {
+      const encodedFiles = await Promise.all(
+        uploadedFiles.map(async (file) => {
+          const validation = validateFile(file);
+          if (!validation.valid) {
+            throw new Error(validation.error);
+          }
+
+          const base64 = await encodeFileToBase64(file);
+          if (isImageFile(file)) {
+            return {
+              type: "image_url" as const,
+              image_url: { url: `data:${file.type};base64,${base64}` },
+              name: file.name,
+            };
+          }
+          return {
+            type: "text" as const,
+            text: base64,
+            name: file.name,
+          };
+        })
+      );
+      setFiles((prevFiles) => [...prevFiles, ...encodedFiles]);
+    } catch (error) {
+      console.error("File upload error:", error);
+      // Consider adding toast/alert here
+    }
+    setIsFileUploadOpen(false);
+  };
+
+  const removeFile = (index: number) => {
+    setFiles((prevFiles) => prevFiles.filter((_, i) => i !== index));
+  };
+
+  // Drag and drop handlers
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = () => setIsDragging(false);
+
+  const handleDrop = async (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setIsDragging(false);
+    const files = e.dataTransfer?.files;
+    if (files) handleFileUpload(Array.from(files));
   };
 
   return (
-    <div className="flex-shrink-0 w-full">
+    <div
+      className={cn(
+        "relative flex-shrink-0 w-full",
+        isDragging && "bg-gray-200 dark:bg-gray-700"
+      )}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+    >
+      {isDragging && (
+        <div className="absolute inset-0 flex items-center justify-center bg-black/50 text-white text-lg font-semibold z-50">
+          Drop files to upload
+        </div>
+      )}
+
       <div className="relative w-full bg-white dark:bg-[#2A2A2A] rounded-lg p-4 shadow-lg dark:shadow-2xl border border-gray-200 dark:border-[#7C68FA]/20 overflow-hidden">
+        {/* File preview section */}
+        {files.length > 0 && (
+          <>
+            <div className="flex flex-wrap gap-2 mb-2">
+              {files.map((file, index) => (
+                <div
+                  key={index}
+                  className="flex items-center space-x-2 bg-gray-100 dark:bg-gray-800 p-2 rounded-md shadow-sm"
+                >
+                  <div className="flex-shrink-0">
+                    {file.type === "image_url" ? (
+                      <img
+                        src={file.image_url?.url || "/placeholder.svg"}
+                        alt={file.name}
+                        className="w-6 h-6 object-cover rounded"
+                      />
+                    ) : (
+                      <File className="w-6 h-6 text-gray-500 dark:text-gray-400" />
+                    )}
+                  </div>
+                  <span className="text-sm truncate max-w-[150px]">
+                    {file.name}
+                  </span>
+                  <button
+                    type="button"
+                    className="text-red-500 hover:text-red-700"
+                    onClick={() => removeFile(index)}
+                    aria-label="Remove file"
+                  >
+                    <X className="h-4 w-4" />
+                  </button>
+                </div>
+              ))}
+            </div>
+            <div className="border-t border-gray-200 dark:border-gray-700 mb-2" />
+          </>
+        )}
+
+        {/* Main text input area */}
         <textarea
           ref={textareaRef}
           value={textInput}
@@ -70,17 +197,19 @@ export default function InputArea({
           className="w-full bg-transparent text-gray-800 dark:text-white placeholder-gray-400 dark:placeholder-white/70 border-none focus:outline-none resize-none font-rmMono text-base overflow-y-auto"
           disabled={isStreaming}
           rows={1}
-          style={{
-            minHeight: "24px",
-            maxHeight: "200px",
-          }}
+          style={{ minHeight: "24px", maxHeight: "200px" }}
+          aria-label="Chat input"
         />
+
+        {/* Control buttons */}
         <div className="flex justify-between items-center mt-2">
           <div className="flex gap-2 items-center">
             <Button
               type="button"
               variant="ghost"
               className="text-gray-600 dark:text-white/70 hover:text-gray-800 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-[#7C68FA]/20 p-2 rounded-full flex items-center justify-center transition-colors duration-300"
+              onClick={() => setIsFileUploadOpen(true)}
+              aria-label="Attach files"
             >
               <Paperclip className="h-5 w-5" />
             </Button>
@@ -91,20 +220,31 @@ export default function InputArea({
             />
           </div>
           <Button
-            onClick={() => handleInference(textInput)}
-            disabled={isStreaming || !textInput.trim()}
+            onClick={() => handleInference(textInput, files)}
+            disabled={isStreaming || (!textInput.trim() && files.length === 0)}
             className="bg-[#7C68FA] hover:bg-[#7C68FA]/80 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition-colors duration-300"
+            aria-label="Send message"
           >
             Generate
             <Send className="h-4 w-4" />
           </Button>
         </div>
+
+        {/* Preserved streaming indicator */}
         {isStreaming && (
           <div className="absolute inset-0 pointer-events-none overflow-hidden">
             <div className="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-[#7C68FA] to-[#7C68FA] animate-pulse-ripple-x" />
           </div>
         )}
       </div>
+
+      {/* File upload modal */}
+      {isFileUploadOpen && (
+        <FileUpload
+          onChange={handleFileUpload}
+          onClose={() => setIsFileUploadOpen(false)}
+        />
+      )}
     </div>
   );
 }
diff --git a/app/frontend/src/components/chatui/fileUtils.tsx b/app/frontend/src/components/chatui/fileUtils.tsx
new file mode 100644
index 00000000..906faced
--- /dev/null
+++ b/app/frontend/src/components/chatui/fileUtils.tsx
@@ -0,0 +1,81 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: © 2025 Tenstorrent AI ULC
+
+export const encodeFileToBase64 = (file: File): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    if (!file) {
+      reject(new Error("No file provided"));
+      return;
+    }
+
+    const reader = new FileReader();
+
+    reader.onload = () => {
+      const result = reader.result as string;
+      // Include both prefix and data for compatibility with Python reference implementation
+      const base64Data = result.split(",")[1];
+      resolve(base64Data);
+    };
+
+    reader.onerror = (error) => {
+      console.error("File reading error:", error);
+      reject(new Error("Failed to read file"));
+    };
+
+    reader.onabort = () => {
+      reject(new Error("File reading aborted"));
+    };
+
+    try {
+      // Read as Data URL to get proper formatting
+      reader.readAsDataURL(file);
+    } catch (error) {
+      reject(
+        new Error(
+          `Failed to read file: ${error instanceof Error ? error.message : "Unknown error"}`
+        )
+      );
+    }
+  });
+};
+
+// Strict validation for supported image types (matches Python reference requirements)
+export const isImageFile = (file: File): boolean => {
+  const supportedMimeTypes = [
+    "image/png", // Primary supported type
+    "image/jpeg", // Add if server supports JPEG
+    "image/webp", // Add if server supports WebP
+  ];
+
+  return supportedMimeTypes.includes(file.type);
+};
+
+// Enhanced validation with server requirements
+export const validateFile = (
+  file: File,
+  maxSizeMB = 10
+): { valid: boolean; error?: string } => {
+  if (!file) return { valid: false, error: "No file provided" };
+
+  // Size validation (matches Python reference limits)
+  const maxSizeBytes = maxSizeMB * 1024 * 1024;
+  if (file.size > maxSizeBytes) {
+    return {
+      valid: false,
+      error: `File size exceeds ${maxSizeMB}MB limit (${(file.size / 1024 / 1024).toFixed(2)}MB)`,
+    };
+  }
+
+  // Strict type validation
+  if (!isImageFile(file)) {
+    return {
+      valid: false,
+      error: `Unsupported file type. Only ${supportedMimeTypes.join(", ")} are allowed`,
+    };
+  }
+
+  return { valid: true };
+};
+
+// List of supported MIME types for error messages
+const supportedMimeTypes = ["PNG", "JPEG", "WebP"];

From 80f55b879edaf4dd4fdc733553aa28e91d0e6dcd Mon Sep 17 00:00:00 2001
From: Anirudh Ramchandran <aramchandran@tenstorrent.com>
Date: Thu, 30 Jan 2025 09:36:30 -0500
Subject: [PATCH 04/29] adds flow to send over base64 files to model

---
 .../src/components/chatui/ChatComponent.tsx   | 46 +++++++++++--------
 .../src/components/chatui/InputArea.tsx       | 11 +----
 .../src/components/chatui/runInference.ts     | 31 +++++++++++--
 app/frontend/src/components/chatui/types.ts   | 27 +++++++++++
 .../src/components/ui/file-upload.tsx         |  1 +
 5 files changed, 82 insertions(+), 34 deletions(-)

diff --git a/app/frontend/src/components/chatui/ChatComponent.tsx b/app/frontend/src/components/chatui/ChatComponent.tsx
index 32ecabd8..97230028 100644
--- a/app/frontend/src/components/chatui/ChatComponent.tsx
+++ b/app/frontend/src/components/chatui/ChatComponent.tsx
@@ -12,12 +12,13 @@ import Header from "./Header";
 import ChatHistory from "./ChatHistory";
 import InputArea from "./InputArea";
 import { HistoryPanel } from "./HistoryPanel";
-import {
+import type {
   InferenceRequest,
   RagDataSource,
   ChatMessage,
   Model,
   InferenceStats,
+  FileData,
 } from "./types";
 import { runInference } from "./runInference";
 import { v4 as uuidv4 } from "uuid";
@@ -25,6 +26,7 @@ import { usePersistentState } from "./usePersistentState";
 import { threadId } from "worker_threads";
 
 export default function ChatComponent() {
+  const [files, setFiles] = useState<FileData[]>([]);
   const location = useLocation();
   const [textInput, setTextInput] = useState<string>("");
   const [ragDatasource, setRagDatasource] = useState<
@@ -36,7 +38,7 @@ export default function ChatComponent() {
   });
   const [chatThreads, setChatThreads] = usePersistentState<ChatMessage[][]>(
     "chat_threads",
-    [[]],
+    [[]]
   );
   const [currentThreadIndex, setCurrentThreadIndex] =
     usePersistentState<number>("current_thread_index", 0);
@@ -91,7 +93,7 @@ export default function ChatComponent() {
 
   const handleInference = useCallback(
     (continuationMessageId: string | null = null) => {
-      if (textInput.trim() === "" || !modelID) return;
+      if ((textInput.trim() === "" && files.length === 0) || !modelID) return;
 
       // Ensure the current thread exists
       if (!chatThreads[currentThreadIndex]) {
@@ -108,13 +110,14 @@ export default function ChatComponent() {
         updatedChatHistory = chatThreads[currentThreadIndex].map((msg) =>
           msg.id === continuationMessageId
             ? { ...msg, text: msg.text + " [Continuing...] " }
-            : msg,
+            : msg
         );
       } else {
         const userMessage: ChatMessage = {
           id: uuidv4(),
           sender: "user",
           text: textInput,
+          files: files,
         };
         updatedChatHistory = [
           ...(chatThreads[currentThreadIndex] || []),
@@ -131,6 +134,7 @@ export default function ChatComponent() {
       const inferenceRequest: InferenceRequest = {
         deploy_id: modelID,
         text: continuationMessageId ? `Continue: ${textInput}` : textInput,
+        files: files,
       };
 
       setIsStreaming(true);
@@ -169,6 +173,7 @@ export default function ChatComponent() {
 
       setTextInput("");
       setReRenderingMessageId(null);
+      setFiles([]);
     },
     [
       chatThreads,
@@ -176,14 +181,15 @@ export default function ChatComponent() {
       modelID,
       ragDatasource,
       textInput,
+      files,
       setChatThreads,
-    ],
+    ]
   );
 
   const handleReRender = useCallback(
     async (messageId: string) => {
       const messageToReRender = chatThreads[currentThreadIndex]?.find(
-        (msg) => msg.id === messageId,
+        (msg) => msg.id === messageId
       );
       if (
         !messageToReRender ||
@@ -196,7 +202,7 @@ export default function ChatComponent() {
         (msg) =>
           msg.sender === "user" &&
           chatThreads[currentThreadIndex].indexOf(msg) <
-            chatThreads[currentThreadIndex].indexOf(messageToReRender),
+            chatThreads[currentThreadIndex].indexOf(messageToReRender)
       );
       if (!userMessage) return;
 
@@ -206,6 +212,7 @@ export default function ChatComponent() {
       const inferenceRequest: InferenceRequest = {
         deploy_id: modelID,
         text: userMessage.text,
+        files: userMessage.files,
       };
 
       await runInference(
@@ -224,7 +231,7 @@ export default function ChatComponent() {
                   currentHistory[currentHistory.length - 1];
                 console.log(
                   "Inference stats received:",
-                  updatedMessage.inferenceStats,
+                  updatedMessage.inferenceStats
                 );
                 return {
                   ...msg,
@@ -245,28 +252,27 @@ export default function ChatComponent() {
 
       setReRenderingMessageId(null);
     },
-    [chatThreads, currentThreadIndex, modelID, ragDatasource, setChatThreads],
+    [chatThreads, currentThreadIndex, modelID, ragDatasource, setChatThreads]
   );
 
   const handleContinue = useCallback(
     (messageId: string) => {
       const messageToContinue = chatThreads[currentThreadIndex]?.find(
-        (msg) => msg.id === messageId,
+        (msg) => msg.id === messageId
       );
       if (!messageToContinue || messageToContinue.sender !== "assistant")
         return;
 
       setTextInput(`Continue from: "${messageToContinue.text}"`);
     },
-    [chatThreads, currentThreadIndex],
+    [chatThreads, currentThreadIndex]
   );
 
   const handleSelectConversation = useCallback(
     (id: string) => {
-      setCurrentThreadIndex(parseInt(id));
-      setRagDatasource(undefined);
+      setCurrentThreadIndex(Number.parseInt(id));
     },
-    [setCurrentThreadIndex, setRagDatasource],
+    [setCurrentThreadIndex]
   );
 
   useEffect(() => {
@@ -309,9 +315,9 @@ export default function ChatComponent() {
                   setRagDatasource(undefined);
                 }}
                 onDeleteConversation={(id) => {
-                  const index = parseInt(id);
+                  const index = Number.parseInt(id);
                   setChatThreads((prevThreads) =>
-                    prevThreads.filter((_, i) => i !== index),
+                    prevThreads.filter((_, i) => i !== index)
                   );
                   if (currentThreadIndex === index) {
                     setCurrentThreadIndex(0);
@@ -319,7 +325,7 @@ export default function ChatComponent() {
                   }
                 }}
                 onEditConversationTitle={(id, newTitle) => {
-                  const index = parseInt(id);
+                  const index = Number.parseInt(id);
                   setChatThreads((prevThreads) =>
                     prevThreads.map((thread, i) =>
                       i === index
@@ -327,8 +333,8 @@ export default function ChatComponent() {
                             { ...thread[0], title: newTitle },
                             ...thread.slice(1),
                           ]
-                        : thread,
-                    ),
+                        : thread
+                    )
                   );
                 }}
               />
@@ -365,6 +371,8 @@ export default function ChatComponent() {
             isStreaming={isStreaming}
             isListening={isListening}
             setIsListening={setIsListening}
+            files={files}
+            setFiles={setFiles}
           />
         </div>
       </Card>
diff --git a/app/frontend/src/components/chatui/InputArea.tsx b/app/frontend/src/components/chatui/InputArea.tsx
index b55cd9ad..c6b308dc 100644
--- a/app/frontend/src/components/chatui/InputArea.tsx
+++ b/app/frontend/src/components/chatui/InputArea.tsx
@@ -8,16 +8,7 @@ import { VoiceInput } from "./VoiceInput";
 import { FileUpload } from "../ui/file-upload";
 import { encodeFileToBase64, isImageFile, validateFile } from "./fileUtils";
 import { cn } from "../../lib/utils";
-
-interface FileData {
-  type: "text" | "image_url";
-  text?: string;
-  image_url?: {
-    url: string;
-  };
-  name: string;
-}
-
+import type { FileData } from "./types";
 interface InputAreaProps {
   textInput: string;
   setTextInput: React.Dispatch<React.SetStateAction<string>>;
diff --git a/app/frontend/src/components/chatui/runInference.ts b/app/frontend/src/components/chatui/runInference.ts
index e0073e5c..9d1c55f1 100644
--- a/app/frontend/src/components/chatui/runInference.ts
+++ b/app/frontend/src/components/chatui/runInference.ts
@@ -10,6 +10,7 @@ import type {
 import { getRagContext } from "./getRagContext";
 import { generatePrompt } from "./templateRenderer";
 import { v4 as uuidv4 } from "uuid";
+import type React from "react";
 
 export const runInference = async (
   request: InferenceRequest,
@@ -33,11 +34,31 @@ export const runInference = async (
       console.log("RAG context fetched:", ragContext);
     }
 
-    console.log("RAG context being passed to generatePrompt:", ragContext);
-    const messages = generatePrompt(
-      chatHistory.map((msg) => ({ sender: msg.sender, text: msg.text })),
-      ragContext
-    );
+    let messages;
+    if (request.files && request.files.length > 0) {
+      // If files are uploaded, use the new message structure
+      messages = [
+        {
+          role: "user",
+          content: [
+            { type: "text", text: "What's in this image?" },
+            {
+              type: "image_url",
+              image_url: {
+                url: request.files[0],
+              },
+            },
+          ],
+        },
+      ];
+    } else {
+      // If no files, use the original generatePrompt function
+      console.log("RAG context being passed to generatePrompt:", ragContext);
+      messages = generatePrompt(
+        chatHistory.map((msg) => ({ sender: msg.sender, text: msg.text })),
+        ragContext
+      );
+    }
 
     console.log("Generated messages:", messages);
     console.log("Thread ID: ", threadId); 
diff --git a/app/frontend/src/components/chatui/types.ts b/app/frontend/src/components/chatui/types.ts
index b337ab79..cf4275e1 100644
--- a/app/frontend/src/components/chatui/types.ts
+++ b/app/frontend/src/components/chatui/types.ts
@@ -1,10 +1,37 @@
 // SPDX-License-Identifier: Apache-2.0
 // SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
 
+export interface ChatMessage {
+  id: string;
+  sender: "user" | "assistant";
+  text: string;
+  files?: FileData[];
+  inferenceStats?: InferenceStats;
+}
+export interface FileData {
+  type: "text" | "image_url";
+  text?: string;
+  image_url?: {
+    url: string;
+  };
+  name: string;
+}
+
 export interface InferenceRequest {
   deploy_id: string;
   text: string;
   rag_context?: { documents: string[] };
+  files?: FileData[];
+}
+
+export interface FileData {
+  type: "text" | "image_url";
+  text?: string;
+  image_url?: {
+    url: string;
+  };
+  name: string;
+  blob?: Blob;
 }
 
 export interface RagDataSource {
diff --git a/app/frontend/src/components/ui/file-upload.tsx b/app/frontend/src/components/ui/file-upload.tsx
index 74e2b717..bfd23dd2 100644
--- a/app/frontend/src/components/ui/file-upload.tsx
+++ b/app/frontend/src/components/ui/file-upload.tsx
@@ -41,6 +41,7 @@ export const FileUpload = ({
   onChange,
 }: {
   onChange?: (files: File[]) => void;
+  onClose?: () => void;
 }) => {
   const [files, setFiles] = useState<File[]>([]);
   const fileInputRef = useRef<HTMLInputElement>(null);

From eca4b6ea30fced105cff0f64155affa29453efdf Mon Sep 17 00:00:00 2001
From: Anirudh Ramchandran <aramchandran@tenstorrent.com>
Date: Fri, 31 Jan 2025 11:12:05 -0500
Subject: [PATCH 05/29] add support to show model names in rag management table

---
 app/api/vector_db_control/views.py            |   9 +-
 .../src/components/rag/RagManagement.tsx      | 110 ++++++++----------
 2 files changed, 53 insertions(+), 66 deletions(-)

diff --git a/app/api/vector_db_control/views.py b/app/api/vector_db_control/views.py
index 53d1168d..4534ab4a 100644
--- a/app/api/vector_db_control/views.py
+++ b/app/api/vector_db_control/views.py
@@ -1,6 +1,6 @@
 # SPDX-License-Identifier: Apache-2.0
 #
-# SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
+# SPDX-FileCopyrightText: © 2025 Tenstorrent AI ULC
 
 import uuid
 from typing import List
@@ -71,8 +71,9 @@ def insert_document(self, request, pk=None):
         file = request.FILES["file"]
         loaded_document = pypdf.PdfReader(stream=file)
         chunks = chunk_pdf_document(loaded_document)
-        ids = [str(uuid.uuid4()) for i in range(0, len(chunks))]
+        ids = [str(uuid.uuid4()) for _ in range(len(chunks))]
         documents = [chunk.page_content for chunk in chunks]
+
         insert_to_chroma_collection(
             collection_name=pk,
             documents=documents,
@@ -80,6 +81,10 @@ def insert_document(self, request, pk=None):
             metadatas=[],
             embedding_func_name=self.EMBED_MODEL,
         )
+        collection = get_collection(collection_name=pk, embedding_func_name=self.EMBED_MODEL)
+        metadata = collection.metadata or {}
+        metadata.update({"last_uploaded_document": file.name})
+        collection.modify(metadata={k: v for k, v in metadata.items() if k != "hnsw:space"})
 
         return Response(status=200)
 
diff --git a/app/frontend/src/components/rag/RagManagement.tsx b/app/frontend/src/components/rag/RagManagement.tsx
index 606f1bb5..11809e43 100644
--- a/app/frontend/src/components/rag/RagManagement.tsx
+++ b/app/frontend/src/components/rag/RagManagement.tsx
@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: Apache-2.0
-// SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
+// SPDX-FileCopyrightText: © 2025 Tenstorrent AI ULC
 import { Button } from "@/src/components/ui/button";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 import { Card } from "@/src/components/ui/card";
@@ -35,7 +35,7 @@ interface RagDataSource {
 
 const TableWrapper = ({ children }: { children: React.ReactNode }) => {
   return (
-    <div className=" h-screen flex-1 w-full dark:bg-black bg-white dark:bg-dot-white/[0.2] bg-dot-black/[0.2] relative flex items-center justify-center ">
+    <div className="h-screen flex-1 w-full dark:bg-black bg-white dark:bg-dot-white/[0.2] bg-dot-black/[0.2] relative flex items-center justify-center">
       <div
         className="absolute pointer-events-none inset-0 flex items-center justify-center dark:bg-black bg-white"
         style={{
@@ -54,39 +54,36 @@ export default function RagManagement() {
   const inputFile = useRef<HTMLInputElement>(null);
   const queryClient = useQueryClient();
 
-  // Used to associate the hidden file input w/ the target collection
   const [targetCollection, setTargetCollection] = useState<
     RagDataSource | undefined
   >(undefined);
 
-  // Track which collections are being uploaded to
   const [collectionsUploading, setCollectionsUploading] = useState<string[]>(
-    [],
+    []
   );
 
   const { theme } = useTheme();
 
   // Fetch collections
-  const {
-    data: ragDataSources,
-    // error,
-    // isLoading,
-  } = useQuery("collectionsList", {
+  // TODO add, errors is loading etc
+  const { data: ragDataSources } = useQuery("collectionsList", {
     queryFn: fetchCollections,
     onError: () => customToast.error("Failed to fetch collections"),
     initialData: [],
   });
 
-  // Delete mutation
+  // Delete collection mutation
   const deleteCollectionMutation = useMutation({
     mutationFn: deleteCollection,
     onError(error: Error, variables: { collectionName: string }) {
-      const { collectionName } = variables;
-      customToast.error(`Error deleting ${collectionName}: ${error}`);
+      customToast.error(
+        `Error deleting ${variables.collectionName}: ${error.message}`
+      );
     },
     onSuccess: (_data, variables: { collectionName: string }) => {
-      customToast.success(`Deleted collection ${variables.collectionName}`);
       queryClient.invalidateQueries(["collectionsList"]);
+      customToast.success("Collection deleted successfully");
+      customToast.success(`Deleted collection ${variables.collectionName}`);
     },
   });
 
@@ -95,31 +92,28 @@ export default function RagManagement() {
     mutationFn: createCollection,
     onSuccess: (_data, variables) => {
       customToast.success(
-        `Created new collection: ${variables.collectionName}`,
+        `Created new collection: ${variables.collectionName}`
       );
       queryClient.invalidateQueries(["collectionsList"]);
     },
   });
 
-  // Upload to collection
-  const { mutate: uploadDocumentMutate } = useMutation({
+  // Upload document mutation
+  const uploadDocumentMutation = useMutation({
     mutationFn: uploadDocument,
     onMutate: ({ collectionName }) => {
       setCollectionsUploading([...collectionsUploading, collectionName]);
-      customToast.success("Uploading document");
+      customToast.success("Uploading document...");
     },
     onError: (_error, { file, collectionName }) => {
-      customToast.error(
-        `Error uploading document ${file.name} to ${collectionName}`,
-      );
+      customToast.error(`Error uploading ${file.name} to ${collectionName}`);
     },
     onSuccess: (_data, { file, collectionName }) => {
       setCollectionsUploading(
-        collectionsUploading.filter((e) => e !== collectionName),
-      );
-      customToast.success(
-        `Uploaded document ${file.name} to ${collectionName}`,
+        collectionsUploading.filter((e) => e !== collectionName)
       );
+      customToast.success(`Uploaded ${file.name} to ${collectionName}`);
+      queryClient.invalidateQueries(["collectionsList"]); // Refresh to update file name
     },
     onSettled: () => {
       setTargetCollection(undefined);
@@ -136,27 +130,26 @@ export default function RagManagement() {
   //  return <div>Errors: {JSON.stringify(error)}</div>;
   // }
 
+  // Handle file selection for upload
   const onFileSelected = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (!e.target.files || !targetCollection) {
-      return;
-    }
+    if (!e.target.files || !targetCollection) return;
+
     const file = e.target.files[0];
-    uploadDocumentMutate({
+    uploadDocumentMutation.mutate({
       file,
       collectionName: targetCollection.name,
     });
   };
 
+  // Render table row with file name column
   const renderRow = ({
-    // theme,
     item,
     isUploading,
     onDelete,
     onUploadClick,
   }: {
-    theme: string;
-    isUploading?: boolean;
     item: RagDataSource;
+    isUploading?: boolean;
     onDelete: (rds: RagDataSource) => void;
     onUploadClick: (rds: RagDataSource) => void;
   }) => (
@@ -167,17 +160,19 @@ export default function RagManagement() {
       <TableCell className="text-left">
         <CopyableText text={item.id} />
       </TableCell>
-
+      <TableCell className="text-left">
+        {item.metadata?.last_uploaded_document ? (
+          <CopyableText text={item.metadata.last_uploaded_document} />
+        ) : (
+          "No file uploaded"
+        )}
+      </TableCell>
       <TableCell className="text-left">
         <div className="flex gap-1">
           <ConfirmDialog
-            dialogDescription={
-              "This action cannot be undone. This will permanently delete the Datasource"
-            }
-            dialogTitle={"Delete Datasource"}
-            onConfirm={() => {
-              onDelete(item);
-            }}
+            dialogDescription="This action cannot be undone. This will permanently delete the datasource."
+            dialogTitle="Delete Datasource"
+            onConfirm={() => onDelete(item)}
             alertTrigger={
               <Button
                 disabled={isUploading}
@@ -186,7 +181,7 @@ export default function RagManagement() {
                 Delete
               </Button>
             }
-          ></ConfirmDialog>
+          />
           <Button
             disabled={isUploading}
             className="bg-blue-500 dark:bg-blue-700 hover:bg-blue-600 dark:hover:bg-blue-600 text-white rounded-lg"
@@ -194,9 +189,8 @@ export default function RagManagement() {
           >
             Upload Document
           </Button>
-
           <div className={`my-auto ${!isUploading && "invisible"}`}>
-            <Spinner></Spinner>
+            <Spinner />
           </div>
         </div>
       </TableCell>
@@ -206,7 +200,7 @@ export default function RagManagement() {
   return (
     <>
       <TableWrapper>
-        {/* All rows share a single file input control */}
+        {/* Hidden file input for uploads */}
         <input
           type="file"
           onChange={onFileSelected}
@@ -216,14 +210,7 @@ export default function RagManagement() {
           style={{ display: "none" }}
         />
         <Card
-          className={
-            "" +
-            `${
-              theme === "dark"
-                ? " bg-zinc-900 text-zinc-200 rounded-lg border-2 border-red"
-                : " bg-white text-black border-gray-500 border-2 rounded-lg border-red"
-            }`
-          }
+          className={`${theme === "dark" ? "bg-zinc-900 text-zinc-200" : "bg-white text-black border-gray-500"} border-2 rounded-lg`}
         >
           <ScrollArea className="whitespace-nowrap rounded-md border">
             <CustomToaster />
@@ -240,13 +227,9 @@ export default function RagManagement() {
               </TableCaption>
               <TableHeader>
                 <TableRow
-                  className={`${
-                    theme === "dark"
-                      ? "bg-zinc-900 rounded-lg"
-                      : "bg-zinc-200 rounded-lg"
-                  }`}
+                  className={theme === "dark" ? "bg-zinc-900" : "bg-zinc-200"}
                 >
-                  {["Name", "ID", "Manage"].map((f: string) => (
+                  {["Name", "ID", "File Name", "Manage"].map((f) => (
                     <TableHead key={f} className="text-left">
                       {f}
                     </TableHead>
@@ -257,17 +240,16 @@ export default function RagManagement() {
                 {ragDataSources.map((rds: RagDataSource) =>
                   renderRow({
                     item: rds,
-                    theme: theme,
-                    isUploading: collectionsUploading.indexOf(rds.name) !== -1,
-                    onUploadClick: (rds) => {
+                    isUploading: collectionsUploading.includes(rds.name),
+                    onUploadClick: (rds: RagDataSource) => {
                       setTargetCollection(rds);
-                      inputFile?.current?.click();
+                      inputFile.current?.click();
                     },
-                    onDelete: (rds) =>
+                    onDelete: (rds: RagDataSource) =>
                       deleteCollectionMutation.mutate({
                         collectionName: rds.name,
                       }),
-                  }),
+                  })
                 )}
               </TableBody>
             </Table>

From 61ffd38926cbe819d688466240d6c0d7a7223217 Mon Sep 17 00:00:00 2001
From: Anirudh Ramchandran <aramchandran@tenstorrent.com>
Date: Fri, 31 Jan 2025 12:13:24 -0500
Subject: [PATCH 06/29] add icon + have it look similar to models deployed
 table

---
 .../src/components/rag/RagManagement.tsx      | 52 +++++++++++++++----
 1 file changed, 42 insertions(+), 10 deletions(-)

diff --git a/app/frontend/src/components/rag/RagManagement.tsx b/app/frontend/src/components/rag/RagManagement.tsx
index 11809e43..75f8e570 100644
--- a/app/frontend/src/components/rag/RagManagement.tsx
+++ b/app/frontend/src/components/rag/RagManagement.tsx
@@ -26,6 +26,14 @@ import {
   createCollection,
   uploadDocument,
 } from "@/src/components/rag";
+import {
+  FileText,
+  Trash2,
+  Upload,
+  Fingerprint,
+  User,
+  Settings,
+} from "lucide-react";
 
 interface RagDataSource {
   id: string;
@@ -155,14 +163,17 @@ export default function RagManagement() {
   }) => (
     <TableRow key={item.id}>
       <TableCell className="text-left">
-        <CopyableText text={item.name} />
+        <CopyableText text={item.id} />
       </TableCell>
       <TableCell className="text-left">
-        <CopyableText text={item.id} />
+        <CopyableText text={item.name} />
       </TableCell>
       <TableCell className="text-left">
         {item.metadata?.last_uploaded_document ? (
-          <CopyableText text={item.metadata.last_uploaded_document} />
+          <div className="flex items-center gap-2">
+            <FileText className="w-4 h-4" />
+            <CopyableText text={item.metadata.last_uploaded_document} />
+          </div>
         ) : (
           "No file uploaded"
         )}
@@ -176,17 +187,19 @@ export default function RagManagement() {
             alertTrigger={
               <Button
                 disabled={isUploading}
-                className="bg-red-700 dark:bg-red-600 hover:bg-red-500 dark:hover:bg-red-500 text-white rounded-lg"
+                className="bg-red-700 dark:bg-red-600 hover:bg-red-500 dark:hover:bg-red-500 text-white rounded-lg flex items-center gap-2"
               >
+                <Trash2 className="w-4 h-4" />
                 Delete
               </Button>
             }
           />
           <Button
             disabled={isUploading}
-            className="bg-blue-500 dark:bg-blue-700 hover:bg-blue-600 dark:hover:bg-blue-600 text-white rounded-lg"
+            className="bg-blue-500 dark:bg-blue-700 hover:bg-blue-600 dark:hover:bg-blue-600 text-white rounded-lg flex items-center gap-2"
             onClick={() => onUploadClick(item)}
           >
+            <Upload className="w-4 h-4" />
             Upload Document
           </Button>
           <div className={`my-auto ${!isUploading && "invisible"}`}>
@@ -229,11 +242,30 @@ export default function RagManagement() {
                 <TableRow
                   className={theme === "dark" ? "bg-zinc-900" : "bg-zinc-200"}
                 >
-                  {["Name", "ID", "File Name", "Manage"].map((f) => (
-                    <TableHead key={f} className="text-left">
-                      {f}
-                    </TableHead>
-                  ))}
+                  <TableHead className="text-left">
+                    <div className="flex items-center gap-2">
+                      <Fingerprint className="w-4 h-4" />
+                      ID
+                    </div>
+                  </TableHead>
+                  <TableHead className="text-left">
+                    <div className="flex items-center gap-2">
+                      <User className="w-4 h-4" />
+                      Name
+                    </div>
+                  </TableHead>
+                  <TableHead className="text-left">
+                    <div className="flex items-center gap-2">
+                      <FileText className="w-4 h-4" />
+                      File Name
+                    </div>
+                  </TableHead>
+                  <TableHead className="text-left">
+                    <div className="flex items-center gap-2">
+                      <Settings className="w-4 h-4" />
+                      Manage
+                    </div>
+                  </TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>

From ab6a52b69d30d554dc6e0cf3618fa951d922ad63 Mon Sep 17 00:00:00 2001
From: anirudTT <aramchandran@tenstorrent.com>
Date: Tue, 4 Feb 2025 14:07:38 +0000
Subject: [PATCH 07/29] add updates to handle uploading image file

---
 .../src/components/chatui/InputArea.tsx       | 27 +++++++------------
 1 file changed, 9 insertions(+), 18 deletions(-)

diff --git a/app/frontend/src/components/chatui/InputArea.tsx b/app/frontend/src/components/chatui/InputArea.tsx
index c6b308dc..bb29c0c2 100644
--- a/app/frontend/src/components/chatui/InputArea.tsx
+++ b/app/frontend/src/components/chatui/InputArea.tsx
@@ -6,19 +6,10 @@ import { Button } from "../ui/button";
 import { Paperclip, Send, X, File } from "lucide-react";
 import { VoiceInput } from "./VoiceInput";
 import { FileUpload } from "../ui/file-upload";
-import { encodeFileToBase64, isImageFile, validateFile } from "./fileUtils";
+import { isImageFile, validateFile, encodeFile } from "./fileUtils";
 import { cn } from "../../lib/utils";
-import type { FileData } from "./types";
-interface InputAreaProps {
-  textInput: string;
-  setTextInput: React.Dispatch<React.SetStateAction<string>>;
-  handleInference: (input: string, files: FileData[]) => void;
-  isStreaming: boolean;
-  isListening: boolean;
-  setIsListening: (isListening: boolean) => void;
-  files: FileData[];
-  setFiles: React.Dispatch<React.SetStateAction<FileData[]>>;
-}
+import type { FileData, InputAreaProps } from "./types";
+import { customToast } from "../CustomToaster";
 
 export default function InputArea({
   textInput,
@@ -34,14 +25,12 @@ export default function InputArea({
   const [isFileUploadOpen, setIsFileUploadOpen] = useState(false);
   const [isDragging, setIsDragging] = useState(false);
 
-  // Preserved original focus logic
   useEffect(() => {
     if (textareaRef.current && !isStreaming) {
       textareaRef.current.focus();
     }
   }, [isStreaming]);
 
-  // Maintained textarea height adjustment
   useEffect(() => {
     if (textareaRef.current) {
       adjustTextareaHeight();
@@ -59,7 +48,6 @@ export default function InputArea({
     setTextInput(e.target.value);
   };
 
-  // Preserved original key press handling
   const handleKeyPress = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key === "Enter" && !e.shiftKey && !isStreaming) {
       e.preventDefault();
@@ -67,7 +55,6 @@ export default function InputArea({
     }
   };
 
-  // Maintained voice input with space addition
   const handleVoiceInput = (transcript: string) => {
     setTextInput((prevText) => prevText + (prevText ? " " : "") + transcript);
   };
@@ -81,7 +68,7 @@ export default function InputArea({
             throw new Error(validation.error);
           }
 
-          const base64 = await encodeFileToBase64(file);
+          const base64 = await encodeFile(file, true);
           if (isImageFile(file)) {
             return {
               type: "image_url" as const,
@@ -89,6 +76,7 @@ export default function InputArea({
               name: file.name,
             };
           }
+          console.log("Encoded file:", base64);
           return {
             type: "text" as const,
             text: base64,
@@ -96,7 +84,9 @@ export default function InputArea({
           };
         })
       );
-      setFiles((prevFiles) => [...prevFiles, ...encodedFiles]);
+      setFiles(
+        (prevFiles: FileData[]) => [...prevFiles, ...encodedFiles] as FileData[]
+      );
     } catch (error) {
       console.error("File upload error:", error);
       // Consider adding toast/alert here
@@ -106,6 +96,7 @@ export default function InputArea({
 
   const removeFile = (index: number) => {
     setFiles((prevFiles) => prevFiles.filter((_, i) => i !== index));
+    customToast.success("File removed successfully!");
   };
 
   // Drag and drop handlers

From dcdc61bc09c53555b4890e062a001c6d7a89d0a1 Mon Sep 17 00:00:00 2001
From: anirudTT <aramchandran@tenstorrent.com>
Date: Tue, 4 Feb 2025 14:08:10 +0000
Subject: [PATCH 08/29] adds new file data + url ts props

---
 app/frontend/src/components/chatui/types.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/app/frontend/src/components/chatui/types.ts b/app/frontend/src/components/chatui/types.ts
index cf4275e1..df73343b 100644
--- a/app/frontend/src/components/chatui/types.ts
+++ b/app/frontend/src/components/chatui/types.ts
@@ -1,6 +1,17 @@
 // SPDX-License-Identifier: Apache-2.0
 // SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
 
+
+export interface InputAreaProps {
+  textInput: string
+  setTextInput: React.Dispatch<React.SetStateAction<string>>
+  handleInference: (input: string, files: FileData[]) => void
+  isStreaming: boolean
+  isListening: boolean
+  setIsListening: (isListening: boolean) => void
+  files: FileData[]
+  setFiles: React.Dispatch<React.SetStateAction<FileData[]>>
+}
 export interface ChatMessage {
   id: string;
   sender: "user" | "assistant";
@@ -9,12 +20,14 @@ export interface ChatMessage {
   inferenceStats?: InferenceStats;
 }
 export interface FileData {
+  url: any;
   type: "text" | "image_url";
   text?: string;
   image_url?: {
     url: string;
   };
   name: string;
+  blob?: Blob;
 }
 
 export interface InferenceRequest {

From 320f3fb48537a3e847cc6d031affc2c6c448b259 Mon Sep 17 00:00:00 2001
From: anirudTT <aramchandran@tenstorrent.com>
Date: Tue, 4 Feb 2025 14:08:38 +0000
Subject: [PATCH 09/29] add utility file to handle upload and encode images to
 base64

---
 .../src/components/chatui/fileUtils.tsx       | 110 ++++++++++--------
 1 file changed, 63 insertions(+), 47 deletions(-)

diff --git a/app/frontend/src/components/chatui/fileUtils.tsx b/app/frontend/src/components/chatui/fileUtils.tsx
index 906faced..affeb1b9 100644
--- a/app/frontend/src/components/chatui/fileUtils.tsx
+++ b/app/frontend/src/components/chatui/fileUtils.tsx
@@ -1,81 +1,97 @@
 // SPDX-License-Identifier: Apache-2.0
 // SPDX-FileCopyrightText: © 2025 Tenstorrent AI ULC
+import { customToast } from "../CustomToaster"
 
-export const encodeFileToBase64 = (file: File): Promise<string> => {
+export const encodeFile = (file: File, base64Encoded = true): Promise<string> => {
   return new Promise((resolve, reject) => {
+    console.log("Starting file encoding process...")
+    console.log(`File name: ${file.name}, Size: ${file.size} bytes, Type: ${file.type}`)
+    console.log(`Encoding mode: ${base64Encoded ? "Base64" : "Raw binary"}`)
+
     if (!file) {
-      reject(new Error("No file provided"));
-      return;
+      console.error("No file provided")
+      reject(new Error("No file provided"))
+      return
     }
 
-    const reader = new FileReader();
+    const reader = new FileReader()
 
     reader.onload = () => {
-      const result = reader.result as string;
-      // Include both prefix and data for compatibility with Python reference implementation
-      const base64Data = result.split(",")[1];
-      resolve(base64Data);
-    };
+      console.log("File read successfully")
+      const result = reader.result as string
+
+      if (base64Encoded) {
+        // Extract only the base64 data without the data URI prefix
+        const base64Data = result.split(",")[1]
+        console.log(`Base64 encoded data (first 50 chars): ${base64Data.substring(0, 50)}...`)
+        resolve(base64Data)
+        customToast.success(`File name: ${file.name}, uploaded sucessfully!🎉`)
+      } else {
+        // Return raw binary data
+        console.log(`Raw binary data length: ${result.length} bytes`)
+        resolve(result)
+      }
+    }
 
     reader.onerror = (error) => {
-      console.error("File reading error:", error);
-      reject(new Error("Failed to read file"));
-    };
+      customToast.error(`Error uploading file: ${file.name} only supports PNG, JPEG, and WebP images.`)
+      console.error("File reading error:", error)
+      reject(new Error("Failed to read file"))
+    }
 
     reader.onabort = () => {
-      reject(new Error("File reading aborted"));
-    };
+      console.warn("File reading aborted")
+      reject(new Error("File reading aborted"))
+    }
 
     try {
-      // Read as Data URL to get proper formatting
-      reader.readAsDataURL(file);
+      if (base64Encoded) {
+        console.log("Reading file as Data URL...")
+        reader.readAsDataURL(file)
+      } else {
+        console.log("Reading file as ArrayBuffer...")
+        reader.readAsArrayBuffer(file)
+      }
     } catch (error) {
-      reject(
-        new Error(
-          `Failed to read file: ${error instanceof Error ? error.message : "Unknown error"}`
-        )
-      );
+      console.error("Error during file reading:", error)
+      reject(new Error(`Failed to read file: ${error instanceof Error ? error.message : "Unknown error"}`))
     }
-  });
-};
+  })
+}
 
-// Strict validation for supported image types (matches Python reference requirements)
 export const isImageFile = (file: File): boolean => {
-  const supportedMimeTypes = [
-    "image/png", // Primary supported type
-    "image/jpeg", // Add if server supports JPEG
-    "image/webp", // Add if server supports WebP
-  ];
+  const supportedMimeTypes = ["image/png", "image/jpeg", "image/webp"]
+  const result = supportedMimeTypes.includes(file.type)
+  console.log(`File type check: ${file.type} - Is supported image: ${result}`)
+  return result
+}
 
-  return supportedMimeTypes.includes(file.type);
-};
+export const validateFile = (file: File, maxSizeMB = 10): { valid: boolean; error?: string } => {
+  console.log(`Validating file: ${file.name}`)
 
-// Enhanced validation with server requirements
-export const validateFile = (
-  file: File,
-  maxSizeMB = 10
-): { valid: boolean; error?: string } => {
-  if (!file) return { valid: false, error: "No file provided" };
+  if (!file) {
+    console.error("No file provided for validation")
+    return { valid: false, error: "No file provided" }
+  }
 
-  // Size validation (matches Python reference limits)
-  const maxSizeBytes = maxSizeMB * 1024 * 1024;
+  const maxSizeBytes = maxSizeMB * 1024 * 1024
   if (file.size > maxSizeBytes) {
+    console.warn(`File size (${file.size} bytes) exceeds limit of ${maxSizeBytes} bytes`)
     return {
       valid: false,
       error: `File size exceeds ${maxSizeMB}MB limit (${(file.size / 1024 / 1024).toFixed(2)}MB)`,
-    };
+    }
   }
 
-  // Strict type validation
   if (!isImageFile(file)) {
+    console.warn(`Unsupported file type: ${file.type}`)
     return {
       valid: false,
-      error: `Unsupported file type. Only ${supportedMimeTypes.join(", ")} are allowed`,
-    };
+      error: `Unsupported file type. Only PNG, JPEG,and WebP images are allowed.`,
+    }
   }
 
-  return { valid: true };
-};
+  console.log("File validation passed")
+  return { valid: true }
+}
 
-// List of supported MIME types for error messages
-const supportedMimeTypes = ["PNG", "JPEG", "WebP"];

From a305ee75aba5750e3a506e20e86d8e56b39ba474 Mon Sep 17 00:00:00 2001
From: anirudTT <aramchandran@tenstorrent.com>
Date: Tue, 4 Feb 2025 14:09:09 +0000
Subject: [PATCH 10/29] modify to support showing images

---
 .../src/components/chatui/ChatHistory.tsx     | 33 ++++++++++++++++---
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/app/frontend/src/components/chatui/ChatHistory.tsx b/app/frontend/src/components/chatui/ChatHistory.tsx
index 6e0f2a95..ef8f4048 100644
--- a/app/frontend/src/components/chatui/ChatHistory.tsx
+++ b/app/frontend/src/components/chatui/ChatHistory.tsx
@@ -7,7 +7,7 @@ import { Button } from "../ui/button";
 import ChatExamples from "./ChatExamples";
 import StreamingMessage from "./StreamingMessage";
 import MessageActions from "./MessageActions";
-import { ChatMessage } from "./types";
+import { ChatMessage, FileData } from "./types";
 
 interface ChatHistoryProps {
   chatHistory: ChatMessage[];
@@ -19,6 +19,10 @@ interface ChatHistoryProps {
   reRenderingMessageId: string | null;
 }
 
+const isImageFile = (
+  file: FileData
+): file is FileData & { type: "image_url" } => file.type === "image_url";
+
 const ChatHistory: React.FC<ChatHistoryProps> = ({
   chatHistory = [],
   logo,
@@ -136,11 +140,30 @@ const ChatHistory: React.FC<ChatHistoryProps> = ({
                         />
                       </>
                     )}
-                    {message.sender === "user" && <p>{message.text}</p>}
+                    {message.sender === "user" && (
+                      <div className="flex flex-col gap-2">
+                        {message.text && <p>{message.text}</p>}
+                        {message.files?.map(
+                          (file, index) =>
+                            isImageFile(file) && (
+                              <div
+                                key={index}
+                                className="max-w-[300px] rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700"
+                              >
+                                <img
+                                  src={file.image_url?.url}
+                                  alt={file.name}
+                                  className="object-contain max-h-[200px] w-auto"
+                                />
+                                <div className="p-1 bg-gray-100 dark:bg-gray-800 text-xs text-gray-500 dark:text-gray-400 truncate">
+                                  {file.name}
+                                </div>
+                              </div>
+                            )
+                        )}
+                      </div>
+                    )}
                   </div>
-                  {/* {message.sender === "assistant" && message.inferenceStats && (
-                    <InferenceStats stats={message.inferenceStats} />
-                  )} */}
                   {message.sender === "assistant" && (
                     <MessageActions
                       messageId={message.id}

From eb6c15c4d0a3c3075ed90c66fcd5c23bb41d8393 Mon Sep 17 00:00:00 2001
From: anirudTT <aramchandran@tenstorrent.com>
Date: Tue, 4 Feb 2025 14:09:28 +0000
Subject: [PATCH 11/29] fix upload open / close in input area

---
 app/frontend/src/components/chatui/InputArea.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/frontend/src/components/chatui/InputArea.tsx b/app/frontend/src/components/chatui/InputArea.tsx
index bb29c0c2..0c265e44 100644
--- a/app/frontend/src/components/chatui/InputArea.tsx
+++ b/app/frontend/src/components/chatui/InputArea.tsx
@@ -190,7 +190,7 @@ export default function InputArea({
               type="button"
               variant="ghost"
               className="text-gray-600 dark:text-white/70 hover:text-gray-800 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-[#7C68FA]/20 p-2 rounded-full flex items-center justify-center transition-colors duration-300"
-              onClick={() => setIsFileUploadOpen(true)}
+              onClick={() => setIsFileUploadOpen((prev) => !prev)}
               aria-label="Attach files"
             >
               <Paperclip className="h-5 w-5" />

From a7f664d2ddc6c03bf9a9e4fffcf4578a0b5b5601 Mon Sep 17 00:00:00 2001
From: anirudTT <aramchandran@tenstorrent.com>
Date: Tue, 4 Feb 2025 14:10:18 +0000
Subject: [PATCH 12/29] modify to: If files are uploaded or url are sent, to
 use new message structure

---
 app/frontend/src/components/chatui/runInference.ts | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/app/frontend/src/components/chatui/runInference.ts b/app/frontend/src/components/chatui/runInference.ts
index 9d1c55f1..b6fe47ea 100644
--- a/app/frontend/src/components/chatui/runInference.ts
+++ b/app/frontend/src/components/chatui/runInference.ts
@@ -36,7 +36,11 @@ export const runInference = async (
 
     let messages;
     if (request.files && request.files.length > 0) {
-      // If files are uploaded, use the new message structure
+      //  new structure
+      console.log(
+        "Files detected, using image_url message structure",
+        request.files[0].image_url?.url
+      );
       messages = [
         {
           role: "user",
@@ -45,14 +49,13 @@ export const runInference = async (
             {
               type: "image_url",
               image_url: {
-                url: request.files[0],
+                url: request.files[0].image_url?.url || request.files[0],
               },
             },
           ],
         },
       ];
     } else {
-      // If no files, use the original generatePrompt function
       console.log("RAG context being passed to generatePrompt:", ragContext);
       messages = generatePrompt(
         chatHistory.map((msg) => ({ sender: msg.sender, text: msg.text })),

From c055bb2c323c4f1b16d9fd3aff5bdb56e9837e21 Mon Sep 17 00:00:00 2001
From: anirudTT <aramchandran@tenstorrent.com>
Date: Tue, 4 Feb 2025 14:10:51 +0000
Subject: [PATCH 13/29] update 11b vision to new image tag from
 tt-inference-server

---
 app/api/shared_config/model_config.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/api/shared_config/model_config.py b/app/api/shared_config/model_config.py
index e33c3a33..1b592c65 100644
--- a/app/api/shared_config/model_config.py
+++ b/app/api/shared_config/model_config.py
@@ -292,7 +292,7 @@ def base_docker_config():
     ModelImpl(
         hf_model_id="meta-llama/Llama-3.2-11B-Vision-Instruct",
         image_name="ghcr.io/tenstorrent/tt-inference-server/vllm-llama3-src-dev-ubuntu-20.04-amd64",
-        image_tag="v0.0.1-47fb1a2fb6e0-2f33504bad49",
+        image_tag="v0.0.1-70206b9cf111-b9564bf364e9",
         device_configurations={DeviceConfigurations.N300x4},
         docker_config=base_docker_config(),
         service_route="/v1/chat/completions",

From 339e7d7cb99bb666b3664db7a20788ea36960f82 Mon Sep 17 00:00:00 2001
From: anirudTT <aramchandran@tenstorrent.com>
Date: Tue, 4 Feb 2025 15:05:44 +0000
Subject: [PATCH 14/29] add image linking component

---
 .../src/components/chatui/ImagePreview.tsx    | 53 +++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 app/frontend/src/components/chatui/ImagePreview.tsx

diff --git a/app/frontend/src/components/chatui/ImagePreview.tsx b/app/frontend/src/components/chatui/ImagePreview.tsx
new file mode 100644
index 00000000..b4e9e622
--- /dev/null
+++ b/app/frontend/src/components/chatui/ImagePreview.tsx
@@ -0,0 +1,53 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
+
+import { useState } from "react";
+import { ImageIcon } from "lucide-react";
+
+interface ImagePreviewProps {
+  url: string;
+}
+
+export function ImagePreview({ url }: ImagePreviewProps) {
+  const [showPreview, setShowPreview] = useState(false);
+
+  // Only show preview for image URLs
+  const isImageUrl = url.match(/\.(jpg|jpeg|png|gif|webp)$/i);
+
+  if (!isImageUrl)
+    return (
+      <a
+        href={url}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-yellow-300 hover:text-yellow-400 underline"
+      >
+        {url}
+      </a>
+    );
+
+  return (
+    <div className="relative inline-block">
+      <a
+        href={url}
+        target="_blank"
+        rel="noopener noreferrer"
+        onMouseEnter={() => setShowPreview(true)}
+        onMouseLeave={() => setShowPreview(false)}
+        className="group flex items-center gap-1 text-yellow-300 hover:text-yellow-400"
+      >
+        <span className="underline underline-offset-2">{url}</span>
+        <ImageIcon className="h-4 w-4 opacity-80 group-hover:opacity-100 transition-opacity" />
+      </a>
+      {showPreview && (
+        <div className="absolute z-50 left-0 mt-2 p-2 bg-gray-800 rounded-lg shadow-xl border border-gray-700">
+          <img
+            src={url || "/placeholder.svg"}
+            alt="Preview"
+            className="max-w-[300px] max-h-[200px] object-contain rounded"
+          />
+        </div>
+      )}
+    </div>
+  );
+}

From 5790e90b378b117a7a880e19492859088c57820d Mon Sep 17 00:00:00 2001
From: anirudTT <aramchandran@tenstorrent.com>
Date: Tue, 4 Feb 2025 15:06:48 +0000
Subject: [PATCH 15/29] show image as a link preview in chat thread

---
 .../src/components/chatui/ChatHistory.tsx     | 24 +++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/app/frontend/src/components/chatui/ChatHistory.tsx b/app/frontend/src/components/chatui/ChatHistory.tsx
index ef8f4048..c0badddf 100644
--- a/app/frontend/src/components/chatui/ChatHistory.tsx
+++ b/app/frontend/src/components/chatui/ChatHistory.tsx
@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: Apache-2.0
-// SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
+// SPDX-FileCopyrightText: © 2025 Tenstorrent AI ULC
 import React, { useRef, useEffect, useState, useCallback } from "react";
 import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { User, ChevronDown, Bot } from "lucide-react";
@@ -7,7 +7,8 @@ import { Button } from "../ui/button";
 import ChatExamples from "./ChatExamples";
 import StreamingMessage from "./StreamingMessage";
 import MessageActions from "./MessageActions";
-import { ChatMessage, FileData } from "./types";
+import type { ChatMessage, FileData } from "./types";
+import { ImagePreview } from "./ImagePreview";
 
 interface ChatHistoryProps {
   chatHistory: ChatMessage[];
@@ -142,7 +143,20 @@ const ChatHistory: React.FC<ChatHistoryProps> = ({
                     )}
                     {message.sender === "user" && (
                       <div className="flex flex-col gap-2">
-                        {message.text && <p>{message.text}</p>}
+                        {message.text && (
+                          <p>
+                            {message.text.split(" ").map((word, i) => {
+                              const isUrl = word.startsWith("http");
+                              return isUrl ? (
+                                <span key={i}>
+                                  <ImagePreview url={word} />{" "}
+                                </span>
+                              ) : (
+                                <span key={i}>{word} </span>
+                              );
+                            })}
+                          </p>
+                        )}
                         {message.files?.map(
                           (file, index) =>
                             isImageFile(file) && (
@@ -151,7 +165,9 @@ const ChatHistory: React.FC<ChatHistoryProps> = ({
                                 className="max-w-[300px] rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700"
                               >
                                 <img
-                                  src={file.image_url?.url}
+                                  src={
+                                    file.image_url?.url || "/placeholder.svg"
+                                  }
                                   alt={file.name}
                                   className="object-contain max-h-[200px] w-auto"
                                 />

From ff95335f4cfa7436583e4c65b07d345a6403813f Mon Sep 17 00:00:00 2001
From: anirudTT <aramchandran@tenstorrent.com>
Date: Tue, 4 Feb 2025 15:07:01 +0000
Subject: [PATCH 16/29] adds some improvements

---
 .../src/components/chatui/ImagePreview.tsx     | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/app/frontend/src/components/chatui/ImagePreview.tsx b/app/frontend/src/components/chatui/ImagePreview.tsx
index b4e9e622..4aae0f17 100644
--- a/app/frontend/src/components/chatui/ImagePreview.tsx
+++ b/app/frontend/src/components/chatui/ImagePreview.tsx
@@ -1,8 +1,8 @@
 // SPDX-License-Identifier: Apache-2.0
-// SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
+// SPDX-FileCopyrightText: © 2025 Tenstorrent AI ULC
 
 import { useState } from "react";
-import { ImageIcon } from "lucide-react";
+import { ImageIcon, ExternalLink } from "lucide-react";
 
 interface ImagePreviewProps {
   url: string;
@@ -20,14 +20,15 @@ export function ImagePreview({ url }: ImagePreviewProps) {
         href={url}
         target="_blank"
         rel="noopener noreferrer"
-        className="text-yellow-300 hover:text-yellow-400 underline"
+        className="text-yellow-300 hover:text-yellow-400 underline flex items-center gap-1"
       >
-        {url}
+        <span>{url}</span>
+        <ExternalLink className="h-4 w-4" />
       </a>
     );
 
   return (
-    <div className="relative inline-block">
+    <span className="relative inline-block">
       <a
         href={url}
         target="_blank"
@@ -38,16 +39,17 @@ export function ImagePreview({ url }: ImagePreviewProps) {
       >
         <span className="underline underline-offset-2">{url}</span>
         <ImageIcon className="h-4 w-4 opacity-80 group-hover:opacity-100 transition-opacity" />
+        <ExternalLink className="h-4 w-4 opacity-80 group-hover:opacity-100 transition-opacity" />
       </a>
       {showPreview && (
-        <div className="absolute z-50 left-0 mt-2 p-2 bg-gray-800 rounded-lg shadow-xl border border-gray-700">
+        <span className="absolute z-50 left-0 mt-2 p-2 bg-gray-800 rounded-lg shadow-xl border border-gray-700 inline-block">
           <img
             src={url || "/placeholder.svg"}
             alt="Preview"
             className="max-w-[300px] max-h-[200px] object-contain rounded"
           />
-        </div>
+        </span>
       )}
-    </div>
+    </span>
   );
 }

From 5db7227620aac842310004bf76a05ae0f726e51c Mon Sep 17 00:00:00 2001
From: anirudTT <aramchandran@tenstorrent.com>
Date: Tue, 4 Feb 2025 15:37:12 +0000
Subject: [PATCH 17/29] allow url / links to be passed in correct post
 structure

---
 .../src/components/chatui/runInference.ts     | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/app/frontend/src/components/chatui/runInference.ts b/app/frontend/src/components/chatui/runInference.ts
index b6fe47ea..ddb00183 100644
--- a/app/frontend/src/components/chatui/runInference.ts
+++ b/app/frontend/src/components/chatui/runInference.ts
@@ -40,6 +40,8 @@ export const runInference = async (
       console.log(
         "Files detected, using image_url message structure",
         request.files[0].image_url?.url
+        // TODO check if this is correct
+        // request.files[0].image_url?.url || request.files[0]
       );
       messages = [
         {
@@ -55,6 +57,26 @@ export const runInference = async (
           ],
         },
       ];
+    } else if (
+      request.text &&
+      request.text.includes("https://") &&
+      request.text.match(/\.(jpeg|jpg|gif|png)$/)
+    ) {
+      console.log("Image URL detected in the message");
+      messages = [
+        {
+          role: "user",
+          content: [
+            { type: "text", text: "What's in this image?" },
+            {
+              type: "image_url",
+              image_url: {
+                url: request.text,
+              },
+            },
+          ],
+        },
+      ];
     } else {
       console.log("RAG context being passed to generatePrompt:", ragContext);
       messages = generatePrompt(

From b9ba0aef6ad1135079e2ccea10831e874554c39d Mon Sep 17 00:00:00 2001
From: Anirudh Ramchandran <aramchandran@tenstorrent.com>
Date: Wed, 5 Feb 2025 17:00:02 -0500
Subject: [PATCH 18/29] add better user feedback to input upload area

---
 .../src/components/chatui/InputArea.tsx       | 96 ++++++++++++-------
 1 file changed, 59 insertions(+), 37 deletions(-)

diff --git a/app/frontend/src/components/chatui/InputArea.tsx b/app/frontend/src/components/chatui/InputArea.tsx
index 0c265e44..cd8d8d6e 100644
--- a/app/frontend/src/components/chatui/InputArea.tsx
+++ b/app/frontend/src/components/chatui/InputArea.tsx
@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: Apache-2.0
 // SPDX-FileCopyrightText: © 2025 Tenstorrent AI ULC
 import type React from "react";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, useCallback } from "react";
 import { Button } from "../ui/button";
 import { Paperclip, Send, X, File } from "lucide-react";
 import { VoiceInput } from "./VoiceInput";
@@ -24,6 +24,7 @@ export default function InputArea({
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const [isFileUploadOpen, setIsFileUploadOpen] = useState(false);
   const [isDragging, setIsDragging] = useState(false);
+  const [showProgressBar, setShowProgressBar] = useState(false);
 
   useEffect(() => {
     if (textareaRef.current && !isStreaming) {
@@ -59,40 +60,54 @@ export default function InputArea({
     setTextInput((prevText) => prevText + (prevText ? " " : "") + transcript);
   };
 
-  const handleFileUpload = async (uploadedFiles: File[]) => {
-    try {
-      const encodedFiles = await Promise.all(
-        uploadedFiles.map(async (file) => {
-          const validation = validateFile(file);
-          if (!validation.valid) {
-            throw new Error(validation.error);
-          }
-
-          const base64 = await encodeFile(file, true);
-          if (isImageFile(file)) {
+  const handleFileUpload = useCallback(
+    async (uploadedFiles: File[]) => {
+      try {
+        setIsDragging(true);
+        setShowProgressBar(true);
+
+        const encodedFiles = await Promise.all(
+          uploadedFiles.map(async (file) => {
+            const validation = validateFile(file);
+            if (!validation.valid) {
+              throw new Error(validation.error);
+            }
+
+            const base64 = await encodeFile(file, true);
+            if (isImageFile(file)) {
+              return {
+                type: "image_url" as const,
+                image_url: { url: `data:${file.type};base64,${base64}` },
+                name: file.name,
+              };
+            }
+            console.log("Encoded file:", base64);
             return {
-              type: "image_url" as const,
-              image_url: { url: `data:${file.type};base64,${base64}` },
+              type: "text" as const,
+              text: base64,
               name: file.name,
             };
-          }
-          console.log("Encoded file:", base64);
-          return {
-            type: "text" as const,
-            text: base64,
-            name: file.name,
-          };
-        })
-      );
-      setFiles(
-        (prevFiles: FileData[]) => [...prevFiles, ...encodedFiles] as FileData[]
-      );
-    } catch (error) {
-      console.error("File upload error:", error);
-      // Consider adding toast/alert here
-    }
-    setIsFileUploadOpen(false);
-  };
+          })
+        );
+        setFiles(
+          (prevFiles: FileData[]) =>
+            [...prevFiles, ...encodedFiles] as FileData[]
+        );
+        customToast.success(
+          `Successfully uploaded ${uploadedFiles.length} file(s)!`
+        );
+      } catch (error) {
+        console.error("File upload error:", error);
+        customToast.error("Failed to upload file(s). Please try again.");
+      } finally {
+        setIsDragging(false);
+        setIsFileUploadOpen(false);
+        // Hide progress bar after a delay
+        setTimeout(() => setShowProgressBar(false), 1000);
+      }
+    },
+    [setFiles]
+  );
 
   const removeFile = (index: number) => {
     setFiles((prevFiles) => prevFiles.filter((_, i) => i !== index));
@@ -105,7 +120,9 @@ export default function InputArea({
     setIsDragging(true);
   };
 
-  const handleDragLeave = () => setIsDragging(false);
+  const handleDragLeave = (_e: React.DragEvent<HTMLDivElement>) => {
+    setIsDragging(false);
+  };
 
   const handleDrop = async (e: React.DragEvent<HTMLDivElement>) => {
     e.preventDefault();
@@ -117,8 +134,8 @@ export default function InputArea({
   return (
     <div
       className={cn(
-        "relative flex-shrink-0 w-full",
-        isDragging && "bg-gray-200 dark:bg-gray-700"
+        "relative flex-shrink-0 w-full transition-all duration-200",
+        isDragging && "bg-gray-200 dark:bg-gray-700 scale-[0.99]"
       )}
       onDragOver={handleDragOver}
       onDragLeave={handleDragLeave}
@@ -126,7 +143,10 @@ export default function InputArea({
     >
       {isDragging && (
         <div className="absolute inset-0 flex items-center justify-center bg-black/50 text-white text-lg font-semibold z-50">
-          Drop files to upload
+          <div className="bg-white/20 rounded-lg p-8 flex flex-col items-center transition-all duration-300 ease-in-out">
+            <Paperclip className="h-12 w-12 mb-4 animate-bounce" />
+            <span className="text-2xl animate-pulse">Drop files to upload</span>
+          </div>
         </div>
       )}
 
@@ -220,7 +240,9 @@ export default function InputArea({
         )}
       </div>
 
-      {/* File upload modal */}
+      {showProgressBar && (
+        <div className="absolute bottom-0 left-0 w-full h-1 bg-green-500 animate-progress" />
+      )}
       {isFileUploadOpen && (
         <FileUpload
           onChange={handleFileUpload}

From adce8959432ca5876310052f625386e71d522de8 Mon Sep 17 00:00:00 2001
From: Anirudh Ramchandran <aramchandran@tenstorrent.com>
Date: Wed, 5 Feb 2025 17:00:49 -0500
Subject: [PATCH 19/29] add tooltips to upload icon to help convey to the user

---
 .../src/components/chatui/InputArea.tsx       | 59 ++++++++++++++-----
 1 file changed, 44 insertions(+), 15 deletions(-)

diff --git a/app/frontend/src/components/chatui/InputArea.tsx b/app/frontend/src/components/chatui/InputArea.tsx
index cd8d8d6e..fd337c69 100644
--- a/app/frontend/src/components/chatui/InputArea.tsx
+++ b/app/frontend/src/components/chatui/InputArea.tsx
@@ -10,6 +10,12 @@ import { isImageFile, validateFile, encodeFile } from "./fileUtils";
 import { cn } from "../../lib/utils";
 import type { FileData, InputAreaProps } from "./types";
 import { customToast } from "../CustomToaster";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../ui/tooltip";
 
 export default function InputArea({
   textInput,
@@ -36,7 +42,7 @@ export default function InputArea({
     if (textareaRef.current) {
       adjustTextareaHeight();
     }
-  }, [textInput]);
+  }, [textareaRef]);
 
   const adjustTextareaHeight = () => {
     if (textareaRef.current) {
@@ -146,6 +152,7 @@ export default function InputArea({
           <div className="bg-white/20 rounded-lg p-8 flex flex-col items-center transition-all duration-300 ease-in-out">
             <Paperclip className="h-12 w-12 mb-4 animate-bounce" />
             <span className="text-2xl animate-pulse">Drop files to upload</span>
+            <span className="text-sm mt-2">Release to add files</span>
           </div>
         </div>
       )}
@@ -206,20 +213,42 @@ export default function InputArea({
         {/* Control buttons */}
         <div className="flex justify-between items-center mt-2">
           <div className="flex gap-2 items-center">
-            <Button
-              type="button"
-              variant="ghost"
-              className="text-gray-600 dark:text-white/70 hover:text-gray-800 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-[#7C68FA]/20 p-2 rounded-full flex items-center justify-center transition-colors duration-300"
-              onClick={() => setIsFileUploadOpen((prev) => !prev)}
-              aria-label="Attach files"
-            >
-              <Paperclip className="h-5 w-5" />
-            </Button>
-            <VoiceInput
-              onTranscript={handleVoiceInput}
-              isListening={isListening}
-              setIsListening={setIsListening}
-            />
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    className="text-gray-600 dark:text-white/70 hover:text-gray-800 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-[#7C68FA]/20 p-2 rounded-full flex items-center justify-center transition-colors duration-300"
+                    onClick={() => setIsFileUploadOpen((prev) => !prev)}
+                    aria-label="Attach files"
+                  >
+                    <Paperclip className="h-5 w-5" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>Attach files or drag and drop</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div>
+                    {" "}
+                    {/* Wrap VoiceInput in a div for tooltip positioning */}
+                    <VoiceInput
+                      onTranscript={handleVoiceInput}
+                      isListening={isListening}
+                      setIsListening={setIsListening}
+                    />
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>Voice input</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
           </div>
           <Button
             onClick={() => handleInference(textInput, files)}

From c2cfe1f5687c1879af3dd5a5e285bbb4ba526d3b Mon Sep 17 00:00:00 2001
From: Anirudh Ramchandran <aramchandran@tenstorrent.com>
Date: Wed, 5 Feb 2025 17:25:03 -0500
Subject: [PATCH 20/29] add better error feedback on uploads

---
 app/frontend/src/components/chatui/InputArea.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/frontend/src/components/chatui/InputArea.tsx b/app/frontend/src/components/chatui/InputArea.tsx
index fd337c69..f5f759ee 100644
--- a/app/frontend/src/components/chatui/InputArea.tsx
+++ b/app/frontend/src/components/chatui/InputArea.tsx
@@ -31,6 +31,7 @@ export default function InputArea({
   const [isFileUploadOpen, setIsFileUploadOpen] = useState(false);
   const [isDragging, setIsDragging] = useState(false);
   const [showProgressBar, setShowProgressBar] = useState(false);
+  const [showErrorIndicator, setShowErrorIndicator] = useState(false);
 
   useEffect(() => {
     if (textareaRef.current && !isStreaming) {
@@ -105,10 +106,11 @@ export default function InputArea({
       } catch (error) {
         console.error("File upload error:", error);
         customToast.error("Failed to upload file(s). Please try again.");
+        setShowErrorIndicator(true);
+        setTimeout(() => setShowErrorIndicator(false), 3000);
       } finally {
         setIsDragging(false);
         setIsFileUploadOpen(false);
-        // Hide progress bar after a delay
         setTimeout(() => setShowProgressBar(false), 1000);
       }
     },
@@ -272,6 +274,9 @@ export default function InputArea({
       {showProgressBar && (
         <div className="absolute bottom-0 left-0 w-full h-1 bg-green-500 animate-progress" />
       )}
+      {showErrorIndicator && (
+        <div className="absolute bottom-0 left-0 w-full h-1 bg-red-500 animate-pulse" />
+      )}
       {isFileUploadOpen && (
         <FileUpload
           onChange={handleFileUpload}

From 9b41c415e68b7a83bd3e45aa77971696541b6fcd Mon Sep 17 00:00:00 2001
From: anirudTT <aramchandran@tenstorrent.com>
Date: Wed, 19 Feb 2025 15:31:14 +0000
Subject: [PATCH 21/29] adds features for the image sent via user: - to be
 minimized or maximized - opened via a dialog box

---
 .../src/components/chatui/ChatHistory.tsx     | 159 ++++++++++++++----
 1 file changed, 124 insertions(+), 35 deletions(-)

diff --git a/app/frontend/src/components/chatui/ChatHistory.tsx b/app/frontend/src/components/chatui/ChatHistory.tsx
index c0badddf..283ebf85 100644
--- a/app/frontend/src/components/chatui/ChatHistory.tsx
+++ b/app/frontend/src/components/chatui/ChatHistory.tsx
@@ -1,14 +1,16 @@
 // SPDX-License-Identifier: Apache-2.0
 // SPDX-FileCopyrightText: © 2025 Tenstorrent AI ULC
+
 import React, { useRef, useEffect, useState, useCallback } from "react";
 import * as ScrollArea from "@radix-ui/react-scroll-area";
-import { User, ChevronDown, Bot } from "lucide-react";
+import { User, ChevronDown, Bot, X } from "lucide-react";
+import { Minimize2, Maximize2 } from "lucide-react";
 import { Button } from "../ui/button";
 import ChatExamples from "./ChatExamples";
 import StreamingMessage from "./StreamingMessage";
 import MessageActions from "./MessageActions";
 import type { ChatMessage, FileData } from "./types";
-import { ImagePreview } from "./ImagePreview";
+import * as Dialog from "@radix-ui/react-dialog";
 
 interface ChatHistoryProps {
   chatHistory: ChatMessage[];
@@ -36,6 +38,10 @@ const ChatHistory: React.FC<ChatHistoryProps> = ({
   const viewportRef = useRef<HTMLDivElement>(null);
   const [isScrollButtonVisible, setIsScrollButtonVisible] = useState(false);
   const lastMessageRef = useRef<HTMLDivElement>(null);
+  const [enlargedImage, setEnlargedImage] = useState<string | null>(null);
+  const [minimizedImages, setMinimizedImages] = useState<Set<string>>(
+    new Set()
+  );
 
   const scrollToBottom = useCallback(() => {
     if (viewportRef.current) {
@@ -74,7 +80,19 @@ const ChatHistory: React.FC<ChatHistoryProps> = ({
         setIsScrollButtonVisible(!isAtBottom);
       }
     }
-  }, [chatHistory, isStreaming, scrollToBottom]);
+  }, [isStreaming, scrollToBottom]);
+
+  const toggleMinimizeImage = useCallback((imageUrl: string) => {
+    setMinimizedImages((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(imageUrl)) {
+        newSet.delete(imageUrl);
+      } else {
+        newSet.add(imageUrl);
+      }
+      return newSet;
+    });
+  }, []);
 
   return (
     <div className="flex flex-col w-full flex-grow p-8 font-rmMono relative overflow-hidden">
@@ -142,40 +160,91 @@ const ChatHistory: React.FC<ChatHistoryProps> = ({
                       </>
                     )}
                     {message.sender === "user" && (
-                      <div className="flex flex-col gap-2">
+                      <div className="flex flex-col gap-4">
                         {message.text && (
-                          <p>
-                            {message.text.split(" ").map((word, i) => {
-                              const isUrl = word.startsWith("http");
-                              return isUrl ? (
-                                <span key={i}>
-                                  <ImagePreview url={word} />{" "}
-                                </span>
-                              ) : (
-                                <span key={i}>{word} </span>
-                              );
-                            })}
-                          </p>
+                          <div className="bg-TT-green-accent/20 p-2 rounded">
+                            <p className="text-white">
+                              {message.text.split(" ").map((word, i) => {
+                                const isUrl = word.startsWith("http");
+                                return isUrl ? (
+                                  <span
+                                    key={i}
+                                    className="text-blue-300 underline"
+                                  >
+                                    <a
+                                      href={word}
+                                      target="_blank"
+                                      rel="noopener noreferrer"
+                                    >
+                                      {word}
+                                    </a>{" "}
+                                  </span>
+                                ) : (
+                                  <span key={i}>{word} </span>
+                                );
+                              })}
+                            </p>
+                          </div>
                         )}
-                        {message.files?.map(
-                          (file, index) =>
-                            isImageFile(file) && (
-                              <div
-                                key={index}
-                                className="max-w-[300px] rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700"
-                              >
-                                <img
-                                  src={
-                                    file.image_url?.url || "/placeholder.svg"
-                                  }
-                                  alt={file.name}
-                                  className="object-contain max-h-[200px] w-auto"
-                                />
-                                <div className="p-1 bg-gray-100 dark:bg-gray-800 text-xs text-gray-500 dark:text-gray-400 truncate">
-                                  {file.name}
-                                </div>
-                              </div>
-                            )
+                        {message.files && message.files.length > 0 && (
+                          <div className="bg-gray-800 p-2 rounded">
+                            <p className="text-white mb-2 font-semibold">
+                              Attached Images:
+                            </p>
+                            <div className="flex flex-wrap gap-2">
+                              {message.files.map(
+                                (file, index) =>
+                                  isImageFile(file) && (
+                                    <div
+                                      key={index}
+                                      className="relative group max-w-[150px] rounded-lg overflow-hidden border border-gray-700 transition-all duration-300 hover:shadow-lg"
+                                    >
+                                      {!minimizedImages.has(
+                                        file.image_url?.url || ""
+                                      ) ? (
+                                        <img
+                                          src={
+                                            file.image_url?.url ||
+                                            "/placeholder.svg"
+                                          }
+                                          alt={file.name}
+                                          className="object-cover w-full h-[100px]"
+                                          onClick={() =>
+                                            setEnlargedImage(
+                                              file.image_url?.url ||
+                                                "/placeholder.svg"
+                                            )
+                                          }
+                                        />
+                                      ) : (
+                                        <div className="w-full h-[30px] bg-gray-700"></div>
+                                      )}
+                                      <div className="p-1 bg-gray-700 text-xs text-gray-300 truncate flex justify-between items-center">
+                                        <span className="truncate flex-grow">
+                                          {file.name}
+                                        </span>
+                                        <button
+                                          onClick={() =>
+                                            toggleMinimizeImage(
+                                              file.image_url?.url || ""
+                                            )
+                                          }
+                                          className="ml-2 text-gray-300 hover:text-white flex-shrink-0"
+                                        >
+                                          {minimizedImages.has(
+                                            file.image_url?.url || ""
+                                          ) ? (
+                                            <Maximize2 size={14} />
+                                          ) : (
+                                            <Minimize2 size={14} />
+                                          )}
+                                        </button>
+                                      </div>
+                                    </div>
+                                  )
+                              )}
+                            </div>
+                          </div>
                         )}
                       </div>
                     )}
@@ -213,6 +282,26 @@ const ChatHistory: React.FC<ChatHistoryProps> = ({
           <ChevronDown className="h-6 w-6 animate-bounce" />
         </Button>
       )}
+      <Dialog.Root
+        open={!!enlargedImage}
+        onOpenChange={() => setEnlargedImage(null)}
+      >
+        <Dialog.Portal>
+          <Dialog.Overlay className="fixed inset-0 bg-black/50" />
+          <Dialog.Content className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg p-4 max-w-3xl max-h-[90vh] w-[90vw] overflow-auto">
+            <img
+              src={enlargedImage || ""}
+              alt="Enlarged view"
+              className="w-full h-auto"
+            />
+            <Dialog.Close asChild>
+              <button className="absolute top-2 right-2 text-gray-500 hover:text-gray-700">
+                <X className="h-6 w-6" />
+              </button>
+            </Dialog.Close>
+          </Dialog.Content>
+        </Dialog.Portal>
+      </Dialog.Root>
     </div>
   );
 };

From d0ebba448d5fa9ca1315be4ae4e44cd4dcf1bdb3 Mon Sep 17 00:00:00 2001
From: anirudTT <aramchandran@tenstorrent.com>
Date: Wed, 19 Feb 2025 15:32:07 +0000
Subject: [PATCH 22/29] - adds border bettwen image and text in chat thread -
 also add background blur when image is open in max view - adds z index for
 the image dialog box

---
 app/frontend/src/components/chatui/ChatHistory.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/frontend/src/components/chatui/ChatHistory.tsx b/app/frontend/src/components/chatui/ChatHistory.tsx
index 283ebf85..f4dbf86c 100644
--- a/app/frontend/src/components/chatui/ChatHistory.tsx
+++ b/app/frontend/src/components/chatui/ChatHistory.tsx
@@ -186,6 +186,11 @@ const ChatHistory: React.FC<ChatHistoryProps> = ({
                             </p>
                           </div>
                         )}
+                        {message.text &&
+                          message.files &&
+                          message.files.length > 0 && (
+                            <hr className="my-2 border-t border-gray-700" />
+                          )}
                         {message.files && message.files.length > 0 && (
                           <div className="bg-gray-800 p-2 rounded">
                             <p className="text-white mb-2 font-semibold">
@@ -287,8 +292,8 @@ const ChatHistory: React.FC<ChatHistoryProps> = ({
         onOpenChange={() => setEnlargedImage(null)}
       >
         <Dialog.Portal>
-          <Dialog.Overlay className="fixed inset-0 bg-black/50" />
-          <Dialog.Content className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg p-4 max-w-3xl max-h-[90vh] w-[90vw] overflow-auto">
+          <Dialog.Overlay className="fixed inset-0 bg-black/50 backdrop-blur-sm" />
+          <Dialog.Content className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg p-4 max-w-3xl max-h-[90vh] w-[90vw] overflow-auto z-50">
             <img
               src={enlargedImage || ""}
               alt="Enlarged view"

From 3afb319278c19dd17b28ab0250d90e273ef51823 Mon Sep 17 00:00:00 2001
From: anirudTT <aramchandran@tenstorrent.com>
Date: Wed, 19 Feb 2025 15:40:13 +0000
Subject: [PATCH 23/29] change default prompt to allow user prompt + image to
 be passed to model

---
 .../src/components/chatui/runInference.ts     | 47 ++++++++++++-------
 1 file changed, 29 insertions(+), 18 deletions(-)

diff --git a/app/frontend/src/components/chatui/runInference.ts b/app/frontend/src/components/chatui/runInference.ts
index ddb00183..8d1fdd8c 100644
--- a/app/frontend/src/components/chatui/runInference.ts
+++ b/app/frontend/src/components/chatui/runInference.ts
@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: Apache-2.0
-// SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
+// SPDX-FileCopyrightText: © 2025 Tenstorrent AI ULC
 
 import type {
   InferenceRequest,
@@ -36,18 +36,15 @@ export const runInference = async (
 
     let messages;
     if (request.files && request.files.length > 0) {
-      //  new structure
       console.log(
         "Files detected, using image_url message structure",
         request.files[0].image_url?.url
-        // TODO check if this is correct
-        // request.files[0].image_url?.url || request.files[0]
       );
       messages = [
         {
           role: "user",
           content: [
-            { type: "text", text: "What's in this image?" },
+            { type: "text", text: request.text || "What's in this image?" },
             {
               type: "image_url",
               image_url: {
@@ -63,20 +60,34 @@ export const runInference = async (
       request.text.match(/\.(jpeg|jpg|gif|png)$/)
     ) {
       console.log("Image URL detected in the message");
-      messages = [
-        {
-          role: "user",
-          content: [
-            { type: "text", text: "What's in this image?" },
-            {
-              type: "image_url",
-              image_url: {
-                url: request.text,
+      const match = request.text.match(/(https:\/\/.*\.(jpeg|jpg|gif|png))/);
+      if (match) {
+        const imageUrl = match[0];
+        const userText = request.text.replace(imageUrl, "").trim();
+        messages = [
+          {
+            role: "user",
+            content: [
+              { type: "text", text: userText || "What's in this image?" },
+              {
+                type: "image_url",
+                image_url: {
+                  url: imageUrl,
+                },
               },
-            },
-          ],
-        },
-      ];
+            ],
+          },
+        ];
+      } else {
+        // Handle the case where no valid image URL is found
+        console.error("No valid image URL found in the text");
+        messages = [
+          {
+            role: "user",
+            content: [{ type: "text", text: request.text }],
+          },
+        ];
+      }
     } else {
       console.log("RAG context being passed to generatePrompt:", ragContext);
       messages = generatePrompt(

From 7ab1147bfe8b660950782fc193352ec9ed947d2e Mon Sep 17 00:00:00 2001
From: anirudTT <aramchandran@tenstorrent.com>
Date: Wed, 19 Feb 2025 16:50:00 +0000
Subject: [PATCH 24/29] add loading and error states to rag view

---
 .../src/components/rag/RagManagement.tsx      | 49 +++++++++++++------
 1 file changed, 34 insertions(+), 15 deletions(-)

diff --git a/app/frontend/src/components/rag/RagManagement.tsx b/app/frontend/src/components/rag/RagManagement.tsx
index 75f8e570..700edab3 100644
--- a/app/frontend/src/components/rag/RagManagement.tsx
+++ b/app/frontend/src/components/rag/RagManagement.tsx
@@ -27,7 +27,7 @@ import {
   uploadDocument,
 } from "@/src/components/rag";
 import {
-  FileText,
+  FileType,
   Trash2,
   Upload,
   Fingerprint,
@@ -73,8 +73,11 @@ export default function RagManagement() {
   const { theme } = useTheme();
 
   // Fetch collections
-  // TODO add, errors is loading etc
-  const { data: ragDataSources } = useQuery("collectionsList", {
+  const {
+    data: ragDataSources,
+    isLoading,
+    error,
+  } = useQuery("collectionsList", {
     queryFn: fetchCollections,
     onError: () => customToast.error("Failed to fetch collections"),
     initialData: [],
@@ -128,15 +131,31 @@ export default function RagManagement() {
     },
   });
 
-  // TODO Add loading screen
-  // if (isLoading) {
-  //  return <div>Loading</div>;
-  // }
+  if (isLoading) {
+    return (
+      <TableWrapper>
+        <Card
+          className={`${theme === "dark" ? "bg-zinc-900 text-zinc-200" : "bg-white text-black border-gray-500"} border-2 rounded-lg flex justify-center items-center h-96`}
+        >
+          <Spinner />
+        </Card>
+      </TableWrapper>
+    );
+  }
 
-  // TODO Add error component
-  // if (error) {
-  //  return <div>Errors: {JSON.stringify(error)}</div>;
-  // }
+  if (error) {
+    return (
+      <TableWrapper>
+        <Card
+          className={`${theme === "dark" ? "bg-zinc-900 text-zinc-200" : "bg-white text-black border-gray-500"} border-2 rounded-lg p-8`}
+        >
+          <div className="text-red-600 dark:text-red-400">
+            Error loading collections: {(error as Error).message}
+          </div>
+        </Card>
+      </TableWrapper>
+    );
+  }
 
   // Handle file selection for upload
   const onFileSelected = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -171,7 +190,7 @@ export default function RagManagement() {
       <TableCell className="text-left">
         {item.metadata?.last_uploaded_document ? (
           <div className="flex items-center gap-2">
-            <FileText className="w-4 h-4" />
+            <FileType color="red" className="w-4 h-4" />
             <CopyableText text={item.metadata.last_uploaded_document} />
           </div>
         ) : (
@@ -228,8 +247,8 @@ export default function RagManagement() {
           <ScrollArea className="whitespace-nowrap rounded-md border">
             <CustomToaster />
             <RagDataSourceForm
-              onSubmit={(d) =>
-                createCollectionMutation.mutate({
+              onSubmit={async (d) =>
+                await createCollectionMutation.mutate({
                   collectionName: d.collectionName,
                 })
               }
@@ -256,7 +275,7 @@ export default function RagManagement() {
                   </TableHead>
                   <TableHead className="text-left">
                     <div className="flex items-center gap-2">
-                      <FileText className="w-4 h-4" />
+                      <FileType className="w-4 h-4" />
                       File Name
                     </div>
                   </TableHead>

From 82d1711ac49aa16870851edcf0e21e73fa7b207a Mon Sep 17 00:00:00 2001
From: anirudTT <aramchandran@tenstorrent.com>
Date: Wed, 19 Feb 2025 16:50:25 +0000
Subject: [PATCH 25/29] updates rag form error handling and toast

---
 .../src/components/rag/RagDataSourceForm.tsx  | 76 ++++++++++++++-----
 1 file changed, 55 insertions(+), 21 deletions(-)

diff --git a/app/frontend/src/components/rag/RagDataSourceForm.tsx b/app/frontend/src/components/rag/RagDataSourceForm.tsx
index e405f1dc..350aaab3 100644
--- a/app/frontend/src/components/rag/RagDataSourceForm.tsx
+++ b/app/frontend/src/components/rag/RagDataSourceForm.tsx
@@ -1,15 +1,17 @@
 // SPDX-License-Identifier: Apache-2.0
-// SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
+// SPDX-FileCopyrightText: © 2025 Tenstorrent AI ULC
 import { Button } from "@/src/components/ui/button";
 import { Input } from "@/src/components/ui/input";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Plus, AlertCircle } from "lucide-react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
+import { customToast } from "../CustomToaster";
 
 const RagDataSourceForm = ({
   onSubmit,
 }: {
-  onSubmit: ({ collectionName }: { collectionName: string }) => void;
+  onSubmit: ({ collectionName }: { collectionName: string }) => Promise<void>;
 }) => {
   const formSchema = z.object({
     name: z
@@ -18,39 +20,71 @@ const RagDataSourceForm = ({
         message: "Collection name must be at least 2 characters.",
       })
       .regex(new RegExp(/^\S+$/), {
-        message: "Collection name can not contain spaces",
+        message: "Collection name cannot contain spaces",
       }),
   });
 
   const {
     register,
     handleSubmit,
-    formState: { errors },
+    formState: { errors, isSubmitting },
     reset,
   } = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: { name: "" },
   });
 
+  const onSubmitForm = async (data: z.infer<typeof formSchema>) => {
+    try {
+      await onSubmit({ collectionName: data.name });
+      reset();
+      customToast.success("RAG Datasource created successfully.");
+    } catch (error) {
+      console.error("Error creating RAG Datasource:", error);
+      customToast.error("Failed to create RAG Datasource. Please try again.");
+    }
+  };
+
+  const handleFormSubmit = handleSubmit((data) => {
+    if (Object.keys(errors).length > 0) {
+      // Show toast for validation errors
+      Object.values(errors).forEach((error) => {
+        if (error?.message) {
+          customToast.error(error.message);
+        }
+      });
+    } else {
+      onSubmitForm(data);
+    }
+  });
+
   return (
-    <div className="flex flex-col items-center my-4">
-      <form
-        className="flex  space-x-4 items-center"
-        onSubmit={handleSubmit((d) => {
-          onSubmit({ collectionName: d.name });
-          reset();
-        })}
-      >
-        <Input type="text" autoComplete="off" {...register("name")} />
-        <Button type="submit"> Create New RAG Datasource</Button>
+    <div className="w-full max-w-4xl mx-auto my-4">
+      <form className="flex space-x-4 items-center" onSubmit={handleFormSubmit}>
+        <div className="flex-grow relative">
+          <Input
+            type="text"
+            autoComplete="off"
+            placeholder="Enter collection name"
+            className={`w-full ${errors.name ? "border-red-500" : ""}`}
+            {...register("name")}
+          />
+          {errors.name && (
+            <div className="absolute right-3 top-1/2 transform -translate-y-1/2 text-red-500">
+              <AlertCircle size={18} />
+            </div>
+          )}
+        </div>
+        <Button type="submit" disabled={isSubmitting}>
+          <Plus className="mr-2 h-4 w-4" />
+          {isSubmitting ? "Creating..." : "Create New RAG Datasource"}
+        </Button>
       </form>
-      <div className="p-2">
-        {errors.name?.message && (
-          <p className="text-red-600 dark:text-red-400 text-sm font-medium">
-            {errors.name?.message}
-          </p>
-        )}
-      </div>
+      {errors.name && (
+        <p className="text-red-600 dark:text-red-400 text-sm font-medium mt-2">
+          {errors.name.message}
+        </p>
+      )}
     </div>
   );
 };

From 60ad6d6fc95f61d77aa9f3ddcd4b491ac879452a Mon Sep 17 00:00:00 2001
From: anirudTT <aramchandran@tenstorrent.com>
Date: Thu, 20 Feb 2025 23:36:43 +0000
Subject: [PATCH 26/29] Adds better control when user tries to replace upload
 rag document

---
 .../src/components/rag/RagManagement.tsx      | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/app/frontend/src/components/rag/RagManagement.tsx b/app/frontend/src/components/rag/RagManagement.tsx
index 700edab3..54f4a4d7 100644
--- a/app/frontend/src/components/rag/RagManagement.tsx
+++ b/app/frontend/src/components/rag/RagManagement.tsx
@@ -213,14 +213,20 @@ export default function RagManagement() {
               </Button>
             }
           />
-          <Button
-            disabled={isUploading}
-            className="bg-blue-500 dark:bg-blue-700 hover:bg-blue-600 dark:hover:bg-blue-600 text-white rounded-lg flex items-center gap-2"
-            onClick={() => onUploadClick(item)}
-          >
-            <Upload className="w-4 h-4" />
-            Upload Document
-          </Button>
+          <ConfirmDialog
+            dialogDescription="This will replace the existing PDF with the new uploaded PDF. Are you sure you want to continue?"
+            dialogTitle="Replace existing PDF?"
+            onConfirm={() => onUploadClick(item)}
+            alertTrigger={
+              <Button
+                disabled={isUploading}
+                className="bg-blue-500 dark:bg-blue-700 hover:bg-blue-600 dark:hover:bg-blue-600 text-white rounded-lg flex items-center gap-2"
+              >
+                <Upload className="w-4 h-4" />
+                Upload Document
+              </Button>
+            }
+          />
           <div className={`my-auto ${!isUploading && "invisible"}`}>
             <Spinner />
           </div>

From f8314c94bc8a0c0745648f7197ff6f8f70a0d84f Mon Sep 17 00:00:00 2001
From: Anirudh Ramchandran <aramchandran@tenstorrent.com>
Date: Tue, 25 Feb 2025 14:21:54 -0500
Subject: [PATCH 27/29] Anirud/add rag context to chat thread (#199)

* copy run agent container + helper func

* copied in updated docker views

* copied in model utils to stream agent response

* copy in model views

* added agent view

* copy in all frontend components

* add search api key to docker compose yml

* copy in updated model urls

* added requirements for dockerfile

* rename hf_model_id

* remove commetned code intepretor tool

* added fix so agent works with other llama models

* fix requirements in dockerfile

* add thread id to match stateful chat

* add readme

* add agent workflow diagram

* Update README.md

* Delete app/api/agent_control/Agent.png

* Add files via upload

* Delete app/api/agent_control/Agent.png

* Add files via upload

* Update README.md

* Delete app/api/agent_control/Agent.png

* Add files via upload

* Delete app/api/agent_control/Agent.png

* Add files via upload

* Update README.md

* fix link href (#180)

* refactor(chat history component): improve file handling and add RAG support

- Add RAG datasource integration with metadata display
- Create reusable FileDisplay component for file management
- Implement FileViewerDialog for improved file preview experience
- Support both image and non-image file types with download option
- Clean up file handling logic and separate from image-specific code
- Add visual indicator for RAG-enabled messages

* Show RAG pill based on the message's stored RAG context

* feat(add support in chat component):
- Use the RAG datasource from the message if available

* move image display to its own component

* include rag source name when selected

* refactor(types): clean up and organize type definitions
- Remove redundant and commented-out interfaces
- Group related interfaces together (chat, inference, file, voice)
- Add proper JSDoc comments for better documentation
- Consolidate duplicate type definitions
- Add explicit typing for RAG-related interfaces

* add pdfjs-dist to test

* feat: improve file display
- show images in better aspect ratio

* display file display for images ,code files and other file types

* add icons for file display in chat thread

* extend types

* extend to add
- File extensions mapping for code files and other file types

* extend to allow for files to be passed as text

* fix alignment

* limit upload to a single image file

* set focused state in input area

* feat: add ability to process multiple code and or text file types and send to model

* re add resizing input are

* fix copy button logic

* Anirud/update vllm setup steps (#189)

* update readme to reflect new flow

* fix readme issues

* add Supported models tab:
pointing to tt-inference-server readme

* docs: Update main readme
- add better quick start guide
- add better notes for running in development mode

* docs: re add Mock model steps

* docs: fix links

* docs: fix vllm

* Update HowToRun_vLLM_Models.md


* Update HowToRun_vLLM_Models.md
---
 app/frontend/package-lock.json                | 195 ++++++++
 app/frontend/package.json                     |   1 +
 .../src/components/chatui/ChatComponent.tsx   |  31 +-
 .../src/components/chatui/ChatHistory.tsx     | 233 +++++----
 .../src/components/chatui/FileDisplay.tsx     | 244 +++++++++
 app/frontend/src/components/chatui/Header.tsx |  13 +-
 .../src/components/chatui/InputArea.tsx       | 472 +++++++++++-------
 .../src/components/chatui/MessageActions.tsx  |  33 +-
 .../src/components/chatui/fileUtils.tsx       | 229 +++++++--
 .../chatui/processUploadedFiles.tsx           |  42 ++
 .../src/components/chatui/runInference.ts     |  73 ++-
 app/frontend/src/components/chatui/types.ts   | 167 ++++---
 12 files changed, 1321 insertions(+), 412 deletions(-)
 create mode 100644 app/frontend/src/components/chatui/FileDisplay.tsx
 create mode 100644 app/frontend/src/components/chatui/processUploadedFiles.tsx

diff --git a/app/frontend/package-lock.json b/app/frontend/package-lock.json
index 722d6af7..1b4ddc36 100644
--- a/app/frontend/package-lock.json
+++ b/app/frontend/package-lock.json
@@ -40,6 +40,7 @@
         "html-react-parser": "^5.1.18",
         "lucide-react": "^0.460.0",
         "mini-svg-data-uri": "^1.4.4",
+        "pdfjs-dist": "^4.10.38",
         "re-resizable": "^6.10.3",
         "react": "^18.3.1",
         "react-code-blocks": "^0.1.6",
@@ -997,6 +998,188 @@
         "@llm-ui/react": "0.13.3"
       }
     },
+    "node_modules/@napi-rs/canvas": {
+      "version": "0.1.67",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas/-/canvas-0.1.67.tgz",
+      "integrity": "sha512-VA4Khm/5Kg2bQGx3jXotTC4MloOG8b1Ung80exafUK0k5u6yJmIz3Q2iXeeWZs5weV+LQOEB+CPKsYwEYaGAjw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@napi-rs/canvas-android-arm64": "0.1.67",
+        "@napi-rs/canvas-darwin-arm64": "0.1.67",
+        "@napi-rs/canvas-darwin-x64": "0.1.67",
+        "@napi-rs/canvas-linux-arm-gnueabihf": "0.1.67",
+        "@napi-rs/canvas-linux-arm64-gnu": "0.1.67",
+        "@napi-rs/canvas-linux-arm64-musl": "0.1.67",
+        "@napi-rs/canvas-linux-riscv64-gnu": "0.1.67",
+        "@napi-rs/canvas-linux-x64-gnu": "0.1.67",
+        "@napi-rs/canvas-linux-x64-musl": "0.1.67",
+        "@napi-rs/canvas-win32-x64-msvc": "0.1.67"
+      }
+    },
+    "node_modules/@napi-rs/canvas-android-arm64": {
+      "version": "0.1.67",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-android-arm64/-/canvas-android-arm64-0.1.67.tgz",
+      "integrity": "sha512-W+3DFG5h0WU8Vqqb3W5fNmm5/TPH5ECZRinQDK4CAKFSUkc4iZcDwrmyFG9sB4KdHazf1mFVHCpEeVMO6Mk6Zg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-darwin-arm64": {
+      "version": "0.1.67",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-arm64/-/canvas-darwin-arm64-0.1.67.tgz",
+      "integrity": "sha512-xzrv7QboI47yhIHR5P5u/9KGswokuOKLiKSukr1Ku03RRJxP6lGuVtrAZAgdRg7F9FsuF2REf2yK53YVb6pMlA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-darwin-x64": {
+      "version": "0.1.67",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-x64/-/canvas-darwin-x64-0.1.67.tgz",
+      "integrity": "sha512-SNk9lYBr84N0gW8MZ2IrjygFtbFBILr3SEqMdHzHHuph20SQmssFvJGPZwSSCMEyKAvyqhogbmlew0te5Z4w9Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm-gnueabihf": {
+      "version": "0.1.67",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm-gnueabihf/-/canvas-linux-arm-gnueabihf-0.1.67.tgz",
+      "integrity": "sha512-qmBlSvUpl567bzH8tNXi82u5FrL4d0qINqd6K9O7GWGGGFmKMJdrgi2/SW3wwCTxqHBasIDdVWc4KSJfwyaoDQ==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm64-gnu": {
+      "version": "0.1.67",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-gnu/-/canvas-linux-arm64-gnu-0.1.67.tgz",
+      "integrity": "sha512-k3nAPQefkMeFuJ65Rqdnx92KX1JXQhEKjjWeKsCJB+7sIBgQUWtHo9c3etfVLv5pkWJJDFi/Zc2soNkH3E8dRA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm64-musl": {
+      "version": "0.1.67",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-musl/-/canvas-linux-arm64-musl-0.1.67.tgz",
+      "integrity": "sha512-lZwHWR1cCP408l86n3Qbs3X1oFeAYMjJIQvQl1VMZh6wo5PfI+jaZSKBUOd8x44TnVllX9yhLY9unNRztk/sUQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-riscv64-gnu": {
+      "version": "0.1.67",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-riscv64-gnu/-/canvas-linux-riscv64-gnu-0.1.67.tgz",
+      "integrity": "sha512-PdBC9p6bLHA1W3OdA0vTHj701SB/kioGQ1uCFBRMs5KBCaMLb/H4aNi8uaIUIEvBWnxeAjoNcLU7//q0FxEosw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-x64-gnu": {
+      "version": "0.1.67",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-gnu/-/canvas-linux-x64-gnu-0.1.67.tgz",
+      "integrity": "sha512-kJJX6eWzjipL/LdKOWCJctc88e5yzuXri8+s0V/lN06OwuLGW62TWS3lvi8qlUrGMOfRGabSWWlB4omhASSB8w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-x64-musl": {
+      "version": "0.1.67",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-musl/-/canvas-linux-x64-musl-0.1.67.tgz",
+      "integrity": "sha512-jLKiPWGeN6ZzhnaLG7ex7eexsiHJ1mdtPK1qKvETIcu45dApMXyUIHvdL6XWB5gFFtj5ScHzLUxv1vkfPZsoxA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-win32-x64-msvc": {
+      "version": "0.1.67",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-win32-x64-msvc/-/canvas-win32-x64-msvc-0.1.67.tgz",
+      "integrity": "sha512-K/JmkOFbc4iRZYUqJhj0jwqfHA/wNQEmTiGNsgZ6d59yF/IBNp5T0D5eg3B8ghjI8GxDYCiSJ6DNX8mC3Oh2EQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -8256,6 +8439,18 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/pdfjs-dist": {
+      "version": "4.10.38",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-4.10.38.tgz",
+      "integrity": "sha512-/Y3fcFrXEAsMjJXeL9J8+ZG9U01LbuWaYypvDW2ycW1jL269L3js3DVBjDJ0Up9Np1uqDXsDrRihHANhZOlwdQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=20"
+      },
+      "optionalDependencies": {
+        "@napi-rs/canvas": "^0.1.65"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
diff --git a/app/frontend/package.json b/app/frontend/package.json
index 8b4c2a36..cef1c51c 100644
--- a/app/frontend/package.json
+++ b/app/frontend/package.json
@@ -44,6 +44,7 @@
     "html-react-parser": "^5.1.18",
     "lucide-react": "^0.460.0",
     "mini-svg-data-uri": "^1.4.4",
+    "pdfjs-dist": "^4.10.38",
     "re-resizable": "^6.10.3",
     "react": "^18.3.1",
     "react-code-blocks": "^0.1.6",
diff --git a/app/frontend/src/components/chatui/ChatComponent.tsx b/app/frontend/src/components/chatui/ChatComponent.tsx
index 97230028..93bb4330 100644
--- a/app/frontend/src/components/chatui/ChatComponent.tsx
+++ b/app/frontend/src/components/chatui/ChatComponent.tsx
@@ -71,6 +71,24 @@ export default function ChatComponent() {
     loadModels();
   }, [location.state]);
 
+  useEffect(() => {
+    const currentThread = chatThreads[currentThreadIndex];
+    if (currentThread && currentThread.length > 0) {
+      const messagesWithRag = currentThread
+        .filter((msg) => msg.sender === "user" && msg.ragDatasource)
+        .reverse();
+
+      if (messagesWithRag.length > 0) {
+        const mostRecentRag = messagesWithRag[0].ragDatasource;
+        setRagDatasource(mostRecentRag);
+      } else {
+        setRagDatasource(undefined);
+      }
+    } else {
+      setRagDatasource(undefined);
+    }
+  }, [currentThreadIndex, chatThreads]);
+
   useEffect(() => {
     const handleResize = () => {
       if (window.innerWidth < 768) {
@@ -113,11 +131,13 @@ export default function ChatComponent() {
             : msg
         );
       } else {
+        // Store ragDatasource in the user message
         const userMessage: ChatMessage = {
           id: uuidv4(),
           sender: "user",
           text: textInput,
           files: files,
+          ragDatasource: ragDatasource, // Store the RAG datasource with the message
         };
         updatedChatHistory = [
           ...(chatThreads[currentThreadIndex] || []),
@@ -206,6 +226,9 @@ export default function ChatComponent() {
       );
       if (!userMessage) return;
 
+      // Get the RAG datasource from the user message if available
+      const messageRagDatasource = userMessage.ragDatasource || ragDatasource;
+
       setReRenderingMessageId(messageId);
       setIsStreaming(true);
 
@@ -217,7 +240,7 @@ export default function ChatComponent() {
 
       await runInference(
         inferenceRequest,
-        ragDatasource,
+        messageRagDatasource,
         chatThreads[currentThreadIndex] || [],
         (newHistory) => {
           setChatThreads((prevThreads) => {
@@ -344,7 +367,10 @@ export default function ChatComponent() {
         <div className={`flex flex-col flex-grow min-w-0 w-0 p-4`}>
           <Header
             modelName={modelName}
-            modelsDeployed={modelsDeployed}
+            modelsDeployed={modelsDeployed.map((model) => ({
+              id: model.containerID || "",
+              name: model.modelName || "",
+            }))}
             setModelID={setModelID}
             setModelName={setModelName}
             ragDataSources={ragDataSources}
@@ -363,6 +389,7 @@ export default function ChatComponent() {
             onReRender={handleReRender}
             onContinue={handleContinue}
             reRenderingMessageId={reRenderingMessageId}
+            ragDatasource={ragDatasource}
           />
           <InputArea
             textInput={textInput}
diff --git a/app/frontend/src/components/chatui/ChatHistory.tsx b/app/frontend/src/components/chatui/ChatHistory.tsx
index f4dbf86c..664dd91b 100644
--- a/app/frontend/src/components/chatui/ChatHistory.tsx
+++ b/app/frontend/src/components/chatui/ChatHistory.tsx
@@ -3,13 +3,13 @@
 
 import React, { useRef, useEffect, useState, useCallback } from "react";
 import * as ScrollArea from "@radix-ui/react-scroll-area";
-import { User, ChevronDown, Bot, X } from "lucide-react";
-import { Minimize2, Maximize2 } from "lucide-react";
+import { User, ChevronDown, Bot, X, Database, File } from "lucide-react";
 import { Button } from "../ui/button";
 import ChatExamples from "./ChatExamples";
 import StreamingMessage from "./StreamingMessage";
 import MessageActions from "./MessageActions";
-import type { ChatMessage, FileData } from "./types";
+import FileDisplay from "./FileDisplay";
+import type { ChatMessage } from "./types";
 import * as Dialog from "@radix-ui/react-dialog";
 
 interface ChatHistoryProps {
@@ -20,11 +20,94 @@ interface ChatHistoryProps {
   onReRender: (messageId: string) => void;
   onContinue: (messageId: string) => void;
   reRenderingMessageId: string | null;
+  ragDatasource:
+    | {
+        id: string;
+        name: string;
+        metadata?: {
+          created_at?: string;
+          embedding_func_name?: string;
+          last_uploaded_document?: string;
+        };
+      }
+    | undefined;
 }
 
-const isImageFile = (
-  file: FileData
-): file is FileData & { type: "image_url" } => file.type === "image_url";
+const RagPill: React.FC<{
+  ragDatasource: {
+    id: string;
+    name: string;
+    metadata?: {
+      created_at?: string;
+      embedding_func_name?: string;
+      last_uploaded_document?: string;
+    };
+  };
+}> = ({ ragDatasource }) => (
+  <div className="inline-flex items-center gap-1.5 px-2 py-1 rounded-full bg-TT-slate/30 text-xs text-gray-300 mb-2">
+    <Database size={12} />
+    <span>{ragDatasource.name}</span>
+    {ragDatasource.metadata?.last_uploaded_document && (
+      <span className="text-gray-400">
+        · {ragDatasource.metadata.last_uploaded_document}
+      </span>
+    )}
+  </div>
+);
+
+interface FileViewerDialogProps {
+  file: { url: string; name: string; isImage: boolean } | null;
+  onClose: () => void;
+}
+
+const FileViewerDialog: React.FC<FileViewerDialogProps> = ({
+  file,
+  onClose,
+}) => {
+  if (!file) return null;
+
+  return (
+    <Dialog.Root open={!!file} onOpenChange={onClose}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 bg-black/50 backdrop-blur-sm" />
+        <Dialog.Content className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-gray-900 rounded-lg p-4 max-w-3xl max-h-[90vh] w-[90vw] overflow-auto z-50">
+          <div className="flex justify-between items-center mb-4">
+            <h3 className="text-lg font-medium text-white truncate max-w-[80%]">
+              {file.name}
+            </h3>
+            <Dialog.Close asChild>
+              <button className="text-gray-400 hover:text-white">
+                <X className="h-6 w-6" />
+              </button>
+            </Dialog.Close>
+          </div>
+
+          {file.isImage ? (
+            <img
+              src={file.url}
+              alt={file.name}
+              className="w-full h-auto max-h-[70vh] object-contain"
+            />
+          ) : (
+            <div className="flex flex-col items-center justify-center h-64 bg-gray-800 rounded-lg">
+              <File className="h-16 w-16 text-gray-400 mb-4" />
+              <p className="text-gray-300">Preview not available</p>
+              <a
+                href={file.url}
+                download={file.name}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
+              >
+                Download File
+              </a>
+            </div>
+          )}
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+};
 
 const ChatHistory: React.FC<ChatHistoryProps> = ({
   chatHistory = [],
@@ -34,14 +117,19 @@ const ChatHistory: React.FC<ChatHistoryProps> = ({
   onReRender,
   onContinue,
   reRenderingMessageId,
+  ragDatasource,
 }) => {
+  console.log("ChatHistory component rendered", ragDatasource);
   const viewportRef = useRef<HTMLDivElement>(null);
   const [isScrollButtonVisible, setIsScrollButtonVisible] = useState(false);
   const lastMessageRef = useRef<HTMLDivElement>(null);
-  const [enlargedImage, setEnlargedImage] = useState<string | null>(null);
-  const [minimizedImages, setMinimizedImages] = useState<Set<string>>(
-    new Set()
-  );
+
+  const [minimizedFiles, setMinimizedFiles] = useState<Set<string>>(new Set());
+  const [selectedFile, setSelectedFile] = useState<{
+    url: string;
+    name: string;
+    isImage: boolean;
+  } | null>(null);
 
   const scrollToBottom = useCallback(() => {
     if (viewportRef.current) {
@@ -82,18 +170,31 @@ const ChatHistory: React.FC<ChatHistoryProps> = ({
     }
   }, [isStreaming, scrollToBottom]);
 
-  const toggleMinimizeImage = useCallback((imageUrl: string) => {
-    setMinimizedImages((prev) => {
+  const toggleMinimizeFile = useCallback((fileId: string) => {
+    setMinimizedFiles((prev) => {
       const newSet = new Set(prev);
-      if (newSet.has(imageUrl)) {
-        newSet.delete(imageUrl);
+      if (newSet.has(fileId)) {
+        newSet.delete(fileId);
       } else {
-        newSet.add(imageUrl);
+        newSet.add(fileId);
       }
       return newSet;
     });
   }, []);
 
+  const handleFileClick = useCallback((fileUrl: string, fileName: string) => {
+    const imageExtensions = ["jpg", "jpeg", "png", "gif", "webp", "svg"];
+    const extension = fileName.split(".").pop()?.toLowerCase() || "";
+    const isImage =
+      imageExtensions.includes(extension) || fileUrl.startsWith("data:image/");
+
+    setSelectedFile({
+      url: fileUrl,
+      name: fileName,
+      isImage,
+    });
+  }, []);
+
   return (
     <div className="flex flex-col w-full flex-grow p-8 font-rmMono relative overflow-hidden">
       {chatHistory.length === 0 ? (
@@ -186,71 +287,6 @@ const ChatHistory: React.FC<ChatHistoryProps> = ({
                             </p>
                           </div>
                         )}
-                        {message.text &&
-                          message.files &&
-                          message.files.length > 0 && (
-                            <hr className="my-2 border-t border-gray-700" />
-                          )}
-                        {message.files && message.files.length > 0 && (
-                          <div className="bg-gray-800 p-2 rounded">
-                            <p className="text-white mb-2 font-semibold">
-                              Attached Images:
-                            </p>
-                            <div className="flex flex-wrap gap-2">
-                              {message.files.map(
-                                (file, index) =>
-                                  isImageFile(file) && (
-                                    <div
-                                      key={index}
-                                      className="relative group max-w-[150px] rounded-lg overflow-hidden border border-gray-700 transition-all duration-300 hover:shadow-lg"
-                                    >
-                                      {!minimizedImages.has(
-                                        file.image_url?.url || ""
-                                      ) ? (
-                                        <img
-                                          src={
-                                            file.image_url?.url ||
-                                            "/placeholder.svg"
-                                          }
-                                          alt={file.name}
-                                          className="object-cover w-full h-[100px]"
-                                          onClick={() =>
-                                            setEnlargedImage(
-                                              file.image_url?.url ||
-                                                "/placeholder.svg"
-                                            )
-                                          }
-                                        />
-                                      ) : (
-                                        <div className="w-full h-[30px] bg-gray-700"></div>
-                                      )}
-                                      <div className="p-1 bg-gray-700 text-xs text-gray-300 truncate flex justify-between items-center">
-                                        <span className="truncate flex-grow">
-                                          {file.name}
-                                        </span>
-                                        <button
-                                          onClick={() =>
-                                            toggleMinimizeImage(
-                                              file.image_url?.url || ""
-                                            )
-                                          }
-                                          className="ml-2 text-gray-300 hover:text-white flex-shrink-0"
-                                        >
-                                          {minimizedImages.has(
-                                            file.image_url?.url || ""
-                                          ) ? (
-                                            <Maximize2 size={14} />
-                                          ) : (
-                                            <Minimize2 size={14} />
-                                          )}
-                                        </button>
-                                      </div>
-                                    </div>
-                                  )
-                              )}
-                            </div>
-                          </div>
-                        )}
                       </div>
                     )}
                   </div>
@@ -262,6 +298,18 @@ const ChatHistory: React.FC<ChatHistoryProps> = ({
                       isReRendering={reRenderingMessageId === message.id}
                       isStreaming={isStreaming}
                       inferenceStats={message.inferenceStats}
+                      messageContent={message.text}
+                    />
+                  )}
+                  {message.ragDatasource && (
+                    <RagPill ragDatasource={message.ragDatasource} />
+                  )}
+                  {message.files && message.files.length > 0 && (
+                    <FileDisplay
+                      files={message.files}
+                      minimizedFiles={minimizedFiles}
+                      toggleMinimizeFile={toggleMinimizeFile}
+                      onFileClick={handleFileClick}
                     />
                   )}
                 </div>
@@ -287,26 +335,11 @@ const ChatHistory: React.FC<ChatHistoryProps> = ({
           <ChevronDown className="h-6 w-6 animate-bounce" />
         </Button>
       )}
-      <Dialog.Root
-        open={!!enlargedImage}
-        onOpenChange={() => setEnlargedImage(null)}
-      >
-        <Dialog.Portal>
-          <Dialog.Overlay className="fixed inset-0 bg-black/50 backdrop-blur-sm" />
-          <Dialog.Content className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg p-4 max-w-3xl max-h-[90vh] w-[90vw] overflow-auto z-50">
-            <img
-              src={enlargedImage || ""}
-              alt="Enlarged view"
-              className="w-full h-auto"
-            />
-            <Dialog.Close asChild>
-              <button className="absolute top-2 right-2 text-gray-500 hover:text-gray-700">
-                <X className="h-6 w-6" />
-              </button>
-            </Dialog.Close>
-          </Dialog.Content>
-        </Dialog.Portal>
-      </Dialog.Root>
+
+      <FileViewerDialog
+        file={selectedFile}
+        onClose={() => setSelectedFile(null)}
+      />
     </div>
   );
 };
diff --git a/app/frontend/src/components/chatui/FileDisplay.tsx b/app/frontend/src/components/chatui/FileDisplay.tsx
new file mode 100644
index 00000000..da61df61
--- /dev/null
+++ b/app/frontend/src/components/chatui/FileDisplay.tsx
@@ -0,0 +1,244 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: © 2025 Tenstorrent AI ULC
+
+import type React from "react";
+import type { FileData } from "./types";
+import {
+  FileText,
+  Image,
+  File,
+  Maximize2,
+  Minimize2,
+  FileCode2,
+  FileIcon as FilePdf,
+  FileJson,
+  FileType2,
+  FileSpreadsheet,
+  FileArchive,
+  FileVideo,
+  FileAudio,
+  FileImage,
+} from "lucide-react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../ui/tooltip";
+
+interface FileDisplayProps {
+  files: FileData[];
+  minimizedFiles: Set<string>;
+  toggleMinimizeFile: (fileId: string) => void;
+  onFileClick: (fileUrl: string, fileName: string) => void;
+}
+
+const isImageFile = (
+  file: FileData
+): file is FileData & { type: "image_url" } => file.type === "image_url";
+
+const getFileExtension = (filename: string): string => {
+  const parts = filename.split(".");
+  return parts.length > 1 ? parts[parts.length - 1].toLowerCase() : "";
+};
+
+const getFileIcon = (file: FileData) => {
+  if (isImageFile(file))
+    return <FileImage className="h-5 w-5 text-purple-400" />;
+
+  const extension = getFileExtension(file.name);
+  switch (extension) {
+    // Documents
+    case "pdf":
+      return <FilePdf className="h-5 w-5 text-red-400" />;
+    case "doc":
+    case "docx":
+      return <FileText className="h-5 w-5 text-blue-400" />;
+    case "xls":
+    case "xlsx":
+    case "csv":
+      return <FileSpreadsheet className="h-5 w-5 text-green-400" />;
+
+    // Code files
+    case "js":
+    case "jsx":
+    case "ts":
+    case "tsx":
+      return <FileCode2 className="h-5 w-5 text-yellow-400" />;
+    case "py":
+      return <FileCode2 className="h-5 w-5 text-blue-400" />;
+    case "java":
+      return <FileCode2 className="h-5 w-5 text-orange-400" />;
+    case "cpp":
+    case "c":
+    case "h":
+      return <FileCode2 className="h-5 w-5 text-pink-400" />;
+    case "rs":
+      return <FileCode2 className="h-5 w-5 text-orange-600" />;
+
+    // Data files
+    case "json":
+      return <FileJson className="h-5 w-5 text-yellow-300" />;
+    case "xml":
+      return <FileType2 className="h-5 w-5 text-blue-300" />;
+    case "yaml":
+    case "yml":
+      return <FileType2 className="h-5 w-5 text-green-300" />;
+
+    // Archives
+    case "zip":
+    case "rar":
+    case "7z":
+    case "tar":
+    case "gz":
+      return <FileArchive className="h-5 w-5 text-gray-400" />;
+
+    // Media
+    case "mp4":
+    case "mov":
+    case "avi":
+      return <FileVideo className="h-5 w-5 text-purple-500" />;
+    case "mp3":
+    case "wav":
+    case "ogg":
+      return <FileAudio className="h-5 w-5 text-green-500" />;
+
+    // Text
+    case "txt":
+    case "md":
+    case "log":
+      return <FileText className="h-5 w-5 text-gray-400" />;
+
+    default:
+      return <File className="h-5 w-5 text-gray-400" />;
+  }
+};
+
+const FileDisplay: React.FC<FileDisplayProps> = ({
+  files,
+  minimizedFiles,
+  toggleMinimizeFile,
+  onFileClick,
+}) => {
+  if (!files || files.length === 0) return null;
+
+  console.log("Files:", files);
+  const imageFiles = files.filter(isImageFile);
+  const otherFiles = files.filter((file) => !isImageFile(file));
+  const allFiles = [...imageFiles, ...otherFiles];
+
+  return (
+    <TooltipProvider>
+      <div className="flex flex-col gap-4 -mr-3">
+        <div className="flex flex-wrap gap-4 justify-end w-fit ml-auto">
+          {allFiles.map((file, index) => {
+            const fileId = isImageFile(file)
+              ? file.image_url?.url || file.id || index.toString()
+              : file.url || file.id || index.toString();
+            const isMinimized = isImageFile(file)
+              ? minimizedFiles.has(fileId)
+              : true; // Files always start minimized
+
+            if (isImageFile(file)) {
+              return (
+                <div key={`file-${index}`} className="relative group">
+                  {!isMinimized ? (
+                    <div className="relative">
+                      <img
+                        src={file.image_url?.url || "/placeholder.svg"}
+                        alt={file.name}
+                        className="w-[200px] h-[200px] object-contain cursor-pointer rounded-lg"
+                        onClick={() =>
+                          onFileClick(file.image_url?.url || "", file.name)
+                        }
+                      />
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <button
+                            onClick={() => toggleMinimizeFile(fileId)}
+                            className="absolute top-2 right-2 p-1 rounded-full bg-black/40 hover:bg-black/60 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+                          >
+                            <Minimize2 size={14} />
+                          </button>
+                        </TooltipTrigger>
+                        <TooltipContent side="left">
+                          <p>Minimize image</p>
+                        </TooltipContent>
+                      </Tooltip>
+                    </div>
+                  ) : (
+                    <div className="flex items-center gap-2 p-2 rounded-lg bg-gray-700/50 border border-gray-600">
+                      <div
+                        className="w-[40px] h-[40px] rounded-lg bg-gray-700 flex items-center justify-center cursor-pointer relative group"
+                        onClick={() => toggleMinimizeFile(fileId)}
+                      >
+                        <Image className="h-5 w-5 text-gray-400" />
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <button className="absolute inset-0 w-full h-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+                              <Maximize2 size={14} className="text-gray-300" />
+                            </button>
+                          </TooltipTrigger>
+                          <TooltipContent side="left">
+                            <p>Maximize image</p>
+                          </TooltipContent>
+                        </Tooltip>
+                      </div>
+                      <span className="text-sm text-gray-300 truncate max-w-[150px]">
+                        {file.name}
+                      </span>
+                    </div>
+                  )}
+                </div>
+              );
+            }
+
+            return (
+              <div
+                key={`file-${index}`}
+                className="flex items-center gap-2 p-2 rounded-lg bg-gray-700/50 border border-gray-600"
+              >
+                <div
+                  className="w-[40px] h-[40px] rounded-lg bg-gray-700 flex items-center justify-center cursor-pointer relative group"
+                  onClick={() => onFileClick(file.url || "", file.name)}
+                >
+                  {getFileIcon(file)}
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+                        {file.size && (
+                          <span className="sr-only">
+                            {formatFileSize(file.size)}
+                          </span>
+                        )}
+                      </div>
+                    </TooltipTrigger>
+                    <TooltipContent side="left">
+                      {file.size && (
+                        <p className="text-xs text-gray-400">
+                          {formatFileSize(file.size)}
+                        </p>
+                      )}
+                    </TooltipContent>
+                  </Tooltip>
+                </div>
+                <span className="text-sm text-gray-300 truncate max-w-[150px]">
+                  {file.name}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </TooltipProvider>
+  );
+};
+
+// Utility function to format file size
+const formatFileSize = (bytes: number): string => {
+  if (bytes < 1024) return bytes + " B";
+  else if (bytes < 1048576) return (bytes / 1024).toFixed(1) + " KB";
+  else return (bytes / 1048576).toFixed(1) + " MB";
+};
+
+export default FileDisplay;
diff --git a/app/frontend/src/components/chatui/Header.tsx b/app/frontend/src/components/chatui/Header.tsx
index e35745b4..03df4570 100644
--- a/app/frontend/src/components/chatui/Header.tsx
+++ b/app/frontend/src/components/chatui/Header.tsx
@@ -2,6 +2,7 @@
 // SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
 import React from "react";
 import { useState } from "react";
+import { useState } from "react";
 import {
   Breadcrumb,
   BreadcrumbEllipsis,
@@ -37,7 +38,7 @@ interface HeaderProps {
   modelName: string | null;
   modelsDeployed: { id: string; name: string }[];
   setModelID: (id: string) => void;
-  setModelName: (name: string) => void;
+  setModelName: (name: string | null) => void;
   ragDataSources: RagDataSource[];
   ragDatasource: RagDataSource | undefined;
   setRagDatasource: (datasource: RagDataSource | undefined) => void;
@@ -47,13 +48,15 @@ interface HeaderProps {
   setIsAgentSelected: (value: boolean) => void;
 
 }
-
 interface RagDataSource {
   id: string;
   name: string;
-  metadata: Record<string, string>;
+  metadata?: {
+    created_at?: string;
+    embedding_func_name?: string;
+    last_uploaded_document?: string;
+  };
 }
-
 const ModelSelector = React.forwardRef<
   HTMLButtonElement,
   {
@@ -226,7 +229,7 @@ export default function Header({
                     setRagDatasource(undefined);
                   } else {
                     const dataSource = ragDataSources.find(
-                      (rds) => rds.name === v,
+                      (rds) => rds.name === v
                     );
                     if (dataSource) {
                       setRagDatasource(dataSource);
diff --git a/app/frontend/src/components/chatui/InputArea.tsx b/app/frontend/src/components/chatui/InputArea.tsx
index f5f759ee..9bf81c70 100644
--- a/app/frontend/src/components/chatui/InputArea.tsx
+++ b/app/frontend/src/components/chatui/InputArea.tsx
@@ -6,10 +6,20 @@ import { Button } from "../ui/button";
 import { Paperclip, Send, X, File } from "lucide-react";
 import { VoiceInput } from "./VoiceInput";
 import { FileUpload } from "../ui/file-upload";
-import { isImageFile, validateFile, encodeFile } from "./fileUtils";
+import { isImageFile, validateFile, encodeFile, isTextFile } from "./fileUtils";
 import { cn } from "../../lib/utils";
-import type { FileData, InputAreaProps } from "./types";
+import type { InputAreaProps } from "./types";
 import { customToast } from "../CustomToaster";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "../ui/alert-dialog";
 import {
   Tooltip,
   TooltipContent,
@@ -32,6 +42,9 @@ export default function InputArea({
   const [isDragging, setIsDragging] = useState(false);
   const [showProgressBar, setShowProgressBar] = useState(false);
   const [showErrorIndicator, setShowErrorIndicator] = useState(false);
+  const [showReplaceDialog, setShowReplaceDialog] = useState(false);
+  const [pendingImageFile, setPendingImageFile] = useState<File | null>(null);
+  const [isFocused, setIsFocused] = useState(false);
 
   useEffect(() => {
     if (textareaRef.current && !isStreaming) {
@@ -43,7 +56,7 @@ export default function InputArea({
     if (textareaRef.current) {
       adjustTextareaHeight();
     }
-  }, [textareaRef]);
+  }, []);
 
   const adjustTextareaHeight = () => {
     if (textareaRef.current) {
@@ -54,6 +67,7 @@ export default function InputArea({
 
   const handleTextAreaInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setTextInput(e.target.value);
+    adjustTextareaHeight();
   };
 
   const handleKeyPress = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
@@ -67,56 +81,129 @@ export default function InputArea({
     setTextInput((prevText) => prevText + (prevText ? " " : "") + transcript);
   };
 
+  const processFile = useCallback(async (file: File) => {
+    try {
+      setShowProgressBar(true);
+
+      const validation = validateFile(file);
+      if (!validation.valid) {
+        throw new Error(validation.error);
+      }
+
+      const base64 = await encodeFile(file, true);
+      if (isImageFile(file)) {
+        return {
+          type: "image_url" as const,
+          image_url: { url: `data:${file.type};base64,${base64}` },
+          name: file.name,
+        };
+      }
+
+      return {
+        type: "text" as const,
+        text: base64,
+        name: file.name,
+      };
+    } catch (error) {
+      console.error("File processing error:", error);
+      throw error;
+    }
+  }, []);
+
   const handleFileUpload = useCallback(
     async (uploadedFiles: File[]) => {
       try {
-        setIsDragging(true);
+        setIsDragging(false);
         setShowProgressBar(true);
 
-        const encodedFiles = await Promise.all(
-          uploadedFiles.map(async (file) => {
-            const validation = validateFile(file);
-            if (!validation.valid) {
-              throw new Error(validation.error);
-            }
+        const imageFiles = uploadedFiles.filter(isImageFile);
+        const textFiles = uploadedFiles.filter(isTextFile);
+
+        // Handle image files
+        if (imageFiles.length > 0) {
+          const existingImages = files.filter((f) => f.type === "image_url");
+          if (existingImages.length > 0) {
+            setPendingImageFile(imageFiles[0]);
+            setShowReplaceDialog(true);
 
-            const base64 = await encodeFile(file, true);
-            if (isImageFile(file)) {
-              return {
-                type: "image_url" as const,
-                image_url: { url: `data:${file.type};base64,${base64}` },
-                name: file.name,
-              };
+            // Process text files if any
+            if (textFiles.length > 0) {
+              const encodedTextFiles = await Promise.all(
+                textFiles.map(processFile)
+              );
+              setFiles((prevFiles) => [...prevFiles, ...encodedTextFiles]);
+              customToast.success(
+                `Successfully uploaded ${textFiles.length} text file(s)!`
+              );
             }
-            console.log("Encoded file:", base64);
-            return {
-              type: "text" as const,
-              text: base64,
-              name: file.name,
-            };
-          })
-        );
-        setFiles(
-          (prevFiles: FileData[]) =>
-            [...prevFiles, ...encodedFiles] as FileData[]
-        );
-        customToast.success(
-          `Successfully uploaded ${uploadedFiles.length} file(s)!`
-        );
+            return;
+          }
+          // No existing image, process the first image file
+          const encodedImage = await processFile(imageFiles[0]);
+          const encodedTextFiles = await Promise.all(
+            textFiles.map(processFile)
+          );
+
+          setFiles((prevFiles) => [
+            ...prevFiles,
+            encodedImage,
+            ...encodedTextFiles,
+          ]);
+          customToast.success(
+            `Successfully uploaded ${imageFiles.length > 1 ? "1 image (extras ignored)" : "1 image"}${
+              textFiles.length > 0
+                ? ` and ${textFiles.length} text file(s)`
+                : ""
+            }!`
+          );
+        } else if (textFiles.length > 0) {
+          // Only text files
+          const encodedFiles = await Promise.all(textFiles.map(processFile));
+          setFiles((prevFiles) => [...prevFiles, ...encodedFiles]);
+          customToast.success(
+            `Successfully uploaded ${textFiles.length} text file(s)!`
+          );
+        }
       } catch (error) {
         console.error("File upload error:", error);
-        customToast.error("Failed to upload file(s). Please try again.");
+        customToast.error(
+          error instanceof Error
+            ? error.message
+            : "Failed to upload file(s). Please try again."
+        );
         setShowErrorIndicator(true);
         setTimeout(() => setShowErrorIndicator(false), 3000);
       } finally {
-        setIsDragging(false);
+        setShowProgressBar(false);
         setIsFileUploadOpen(false);
-        setTimeout(() => setShowProgressBar(false), 1000);
       }
     },
-    [setFiles]
+    [files, processFile, setFiles]
   );
 
+  const handleReplaceConfirm = async () => {
+    if (pendingImageFile) {
+      try {
+        const encodedImage = await processFile(pendingImageFile);
+        setFiles((prevFiles) => [
+          ...prevFiles.filter((f) => f.type !== "image_url"),
+          encodedImage,
+        ]);
+        customToast.success("Image replaced successfully!");
+      } catch (error) {
+        console.error("Error replacing image:", error);
+        customToast.error("Failed to replace image. Please try again.");
+      }
+      setPendingImageFile(null);
+    }
+    setShowReplaceDialog(false);
+  };
+
+  const handleReplaceCancel = () => {
+    setPendingImageFile(null);
+    setShowReplaceDialog(false);
+  };
+
   const removeFile = (index: number) => {
     setFiles((prevFiles) => prevFiles.filter((_, i) => i !== index));
     customToast.success("File removed successfully!");
@@ -139,150 +226,197 @@ export default function InputArea({
     if (files) handleFileUpload(Array.from(files));
   };
 
-  return (
-    <div
-      className={cn(
-        "relative flex-shrink-0 w-full transition-all duration-200",
-        isDragging && "bg-gray-200 dark:bg-gray-700 scale-[0.99]"
-      )}
-      onDragOver={handleDragOver}
-      onDragLeave={handleDragLeave}
-      onDrop={handleDrop}
-    >
-      {isDragging && (
-        <div className="absolute inset-0 flex items-center justify-center bg-black/50 text-white text-lg font-semibold z-50">
-          <div className="bg-white/20 rounded-lg p-8 flex flex-col items-center transition-all duration-300 ease-in-out">
-            <Paperclip className="h-12 w-12 mb-4 animate-bounce" />
-            <span className="text-2xl animate-pulse">Drop files to upload</span>
-            <span className="text-sm mt-2">Release to add files</span>
-          </div>
-        </div>
-      )}
+  useEffect(() => {
+    adjustTextareaHeight();
+    window.addEventListener("resize", adjustTextareaHeight);
+    return () => window.removeEventListener("resize", adjustTextareaHeight);
+  }, [textInput]);
 
-      <div className="relative w-full bg-white dark:bg-[#2A2A2A] rounded-lg p-4 shadow-lg dark:shadow-2xl border border-gray-200 dark:border-[#7C68FA]/20 overflow-hidden">
-        {/* File preview section */}
-        {files.length > 0 && (
-          <>
-            <div className="flex flex-wrap gap-2 mb-2">
-              {files.map((file, index) => (
-                <div
-                  key={index}
-                  className="flex items-center space-x-2 bg-gray-100 dark:bg-gray-800 p-2 rounded-md shadow-sm"
-                >
-                  <div className="flex-shrink-0">
-                    {file.type === "image_url" ? (
-                      <img
-                        src={file.image_url?.url || "/placeholder.svg"}
-                        alt={file.name}
-                        className="w-6 h-6 object-cover rounded"
-                      />
-                    ) : (
-                      <File className="w-6 h-6 text-gray-500 dark:text-gray-400" />
-                    )}
-                  </div>
-                  <span className="text-sm truncate max-w-[150px]">
-                    {file.name}
-                  </span>
-                  <button
-                    type="button"
-                    className="text-red-500 hover:text-red-700"
-                    onClick={() => removeFile(index)}
-                    aria-label="Remove file"
-                  >
-                    <X className="h-4 w-4" />
-                  </button>
+  return (
+    <>
+      <AlertDialog open={showReplaceDialog} onOpenChange={setShowReplaceDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Replace Existing Image?</AlertDialogTitle>
+            <AlertDialogDescription>
+              You can only have one image at a time. Do you want to replace the
+              existing image with the new one?
+              {pendingImageFile && (
+                <div className="mt-2 text-sm">
+                  New image: {pendingImageFile.name}
                 </div>
-              ))}
+              )}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={handleReplaceCancel}>
+              Cancel
+            </AlertDialogCancel>
+            <AlertDialogAction onClick={handleReplaceConfirm}>
+              Replace
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      <div
+        className={cn(
+          "relative flex-shrink-0 w-full transition-all duration-200",
+          isDragging && "bg-gray-200 dark:bg-gray-700 scale-[0.99]"
+        )}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+      >
+        {isDragging && (
+          <div className="absolute inset-0 flex items-center justify-center bg-black/50 text-white text-lg font-semibold z-50">
+            <div className="bg-white/20 rounded-lg p-8 flex flex-col items-center transition-all duration-300 ease-in-out">
+              <Paperclip className="h-12 w-12 mb-4 animate-bounce" />
+              <span className="text-2xl animate-pulse">
+                Drop files to upload
+              </span>
+              <span className="text-sm mt-2">
+                Limited to one image, multiple text files allowed
+              </span>
             </div>
-            <div className="border-t border-gray-200 dark:border-gray-700 mb-2" />
-          </>
+          </div>
         )}
 
-        {/* Main text input area */}
-        <textarea
-          ref={textareaRef}
-          value={textInput}
-          onChange={handleTextAreaInput}
-          onKeyDown={handleKeyPress}
-          placeholder="Enter your prompt"
-          className="w-full bg-transparent text-gray-800 dark:text-white placeholder-gray-400 dark:placeholder-white/70 border-none focus:outline-none resize-none font-rmMono text-base overflow-y-auto"
-          disabled={isStreaming}
-          rows={1}
-          style={{ minHeight: "24px", maxHeight: "200px" }}
-          aria-label="Chat input"
-        />
-
-        {/* Control buttons */}
-        <div className="flex justify-between items-center mt-2">
-          <div className="flex gap-2 items-center">
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    className="text-gray-600 dark:text-white/70 hover:text-gray-800 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-[#7C68FA]/20 p-2 rounded-full flex items-center justify-center transition-colors duration-300"
-                    onClick={() => setIsFileUploadOpen((prev) => !prev)}
-                    aria-label="Attach files"
+        <div
+          className={cn(
+            "relative w-full bg-white dark:bg-[#2A2A2A] rounded-lg p-4 shadow-lg dark:shadow-2xl border transition-all duration-200",
+            isFocused
+              ? "border-gray-400/50 dark:border-white/20"
+              : "border-gray-200 dark:border-[#7C68FA]/20",
+            "overflow-hidden"
+          )}
+        >
+          {/* File preview section */}
+          {files.length > 0 && (
+            <>
+              <div className="flex flex-wrap gap-2 mb-2">
+                {files.map((file, index) => (
+                  <div
+                    key={index}
+                    className="flex items-center space-x-2 bg-gray-100 dark:bg-gray-800 p-2 rounded-md shadow-sm"
                   >
-                    <Paperclip className="h-5 w-5" />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <p>Attach files or drag and drop</p>
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <div>
-                    {" "}
-                    {/* Wrap VoiceInput in a div for tooltip positioning */}
-                    <VoiceInput
-                      onTranscript={handleVoiceInput}
-                      isListening={isListening}
-                      setIsListening={setIsListening}
-                    />
+                    <div className="flex-shrink-0">
+                      {file.type === "image_url" ? (
+                        <img
+                          src={file.image_url?.url || "/placeholder.svg"}
+                          alt={file.name}
+                          className="w-6 h-6 object-cover rounded"
+                        />
+                      ) : (
+                        <File className="w-6 h-6 text-gray-500 dark:text-gray-400" />
+                      )}
+                    </div>
+                    <span className="text-sm truncate max-w-[150px]">
+                      {file.name}
+                    </span>
+                    <button
+                      type="button"
+                      className="text-red-500 hover:text-red-700"
+                      onClick={() => removeFile(index)}
+                      aria-label="Remove file"
+                    >
+                      <X className="h-4 w-4" />
+                    </button>
                   </div>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <p>Voice input</p>
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
+                ))}
+              </div>
+              <div className="border-t border-gray-200 dark:border-gray-700 mb-2" />
+            </>
+          )}
+
+          {/* Main text input area */}
+          <textarea
+            ref={textareaRef}
+            value={textInput}
+            onChange={handleTextAreaInput}
+            onKeyDown={handleKeyPress}
+            placeholder="Enter your prompt"
+            className="w-full bg-transparent text-gray-800 dark:text-white placeholder-gray-400 dark:placeholder-white/70 border-none focus:outline-none resize-none font-rmMono text-base overflow-y-auto"
+            disabled={isStreaming}
+            rows={1}
+            style={{ minHeight: "24px", maxHeight: "200px" }}
+            aria-label="Chat input"
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+          />
+
+          {/* Control buttons */}
+          <div className="flex justify-between items-center mt-2">
+            <div className="flex gap-2 items-center">
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      className="text-gray-600 dark:text-white/70 hover:text-gray-800 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-[#7C68FA]/20 p-2 rounded-full flex items-center justify-center transition-colors duration-300"
+                      onClick={() => setIsFileUploadOpen((prev) => !prev)}
+                      aria-label="Attach files"
+                    >
+                      <Paperclip className="h-5 w-5" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>Attach files (1 image max)</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <div>
+                      <VoiceInput
+                        onTranscript={handleVoiceInput}
+                        isListening={isListening}
+                        setIsListening={setIsListening}
+                      />
+                    </div>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>Voice input</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </div>
+            <Button
+              onClick={() => handleInference(textInput, files)}
+              disabled={
+                isStreaming || (!textInput.trim() && files.length === 0)
+              }
+              className="bg-[#7C68FA] hover:bg-[#7C68FA]/80 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition-colors duration-300"
+              aria-label="Send message"
+            >
+              Generate
+              <Send className="h-4 w-4" />
+            </Button>
           </div>
-          <Button
-            onClick={() => handleInference(textInput, files)}
-            disabled={isStreaming || (!textInput.trim() && files.length === 0)}
-            className="bg-[#7C68FA] hover:bg-[#7C68FA]/80 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition-colors duration-300"
-            aria-label="Send message"
-          >
-            Generate
-            <Send className="h-4 w-4" />
-          </Button>
+
+          {/* Preserved streaming indicator */}
+          {isStreaming && (
+            <div className="absolute inset-0 pointer-events-none overflow-hidden">
+              <div className="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-[#7C68FA] to-[#7C68FA] animate-pulse-ripple-x" />
+            </div>
+          )}
         </div>
 
-        {/* Preserved streaming indicator */}
-        {isStreaming && (
-          <div className="absolute inset-0 pointer-events-none overflow-hidden">
-            <div className="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-[#7C68FA] to-[#7C68FA] animate-pulse-ripple-x" />
-          </div>
+        {showProgressBar && (
+          <div className="absolute bottom-0 left-0 w-full h-1 bg-green-500 animate-progress" />
+        )}
+        {showErrorIndicator && (
+          <div className="absolute bottom-0 left-0 w-full h-1 bg-red-500 animate-pulse" />
+        )}
+        {isFileUploadOpen && (
+          <FileUpload
+            onChange={handleFileUpload}
+            onClose={() => setIsFileUploadOpen(false)}
+          />
         )}
       </div>
-
-      {showProgressBar && (
-        <div className="absolute bottom-0 left-0 w-full h-1 bg-green-500 animate-progress" />
-      )}
-      {showErrorIndicator && (
-        <div className="absolute bottom-0 left-0 w-full h-1 bg-red-500 animate-pulse" />
-      )}
-      {isFileUploadOpen && (
-        <FileUpload
-          onChange={handleFileUpload}
-          onClose={() => setIsFileUploadOpen(false)}
-        />
-      )}
-    </div>
+    </>
   );
 }
diff --git a/app/frontend/src/components/chatui/MessageActions.tsx b/app/frontend/src/components/chatui/MessageActions.tsx
index ef8191fe..14767043 100644
--- a/app/frontend/src/components/chatui/MessageActions.tsx
+++ b/app/frontend/src/components/chatui/MessageActions.tsx
@@ -1,11 +1,13 @@
 // SPDX-License-Identifier: Apache-2.0
 // SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
-import React from "react";
+
+import type React from "react";
+import { useState, useEffect } from "react";
 import { Button } from "../ui/button";
 import { Clipboard, ThumbsUp, ThumbsDown } from "lucide-react";
 import CustomToaster, { customToast } from "../CustomToaster";
 import InferenceStats from "./InferenceStats";
-import { InferenceStats as InferenceStatsType } from "./types";
+import type { InferenceStats as InferenceStatsType } from "./types";
 
 interface MessageActionsProps {
   messageId: string;
@@ -14,6 +16,7 @@ interface MessageActionsProps {
   isReRendering: boolean;
   isStreaming: boolean;
   inferenceStats?: InferenceStatsType;
+  messageContent?: string;
 }
 
 const MessageActions: React.FC<MessageActionsProps> = ({
@@ -23,10 +26,29 @@ const MessageActions: React.FC<MessageActionsProps> = ({
   isReRendering,
   isStreaming,
   inferenceStats,
+  messageContent,
 }) => {
-  const handleCopy = () => {
-    // Implement copy logic here
-    customToast.success("Message copied to clipboard");
+  const [completeMessage, setCompleteMessage] = useState<string>(
+    messageContent || ""
+  );
+
+  // Update the complete message when streaming finishes
+  useEffect(() => {
+    if (!isStreaming && messageContent) {
+      setCompleteMessage(messageContent);
+    }
+  }, [isStreaming, messageContent]);
+
+  const handleCopy = async () => {
+    try {
+      if (completeMessage) {
+        await navigator.clipboard.writeText(completeMessage);
+        customToast.success("Message copied to clipboard");
+      }
+    } catch (err) {
+      console.error("Failed to copy text: ", err);
+      customToast.error("Failed to copy message");
+    }
   };
 
   const handleThumbsUp = () => {
@@ -49,6 +71,7 @@ const MessageActions: React.FC<MessageActionsProps> = ({
             size="icon"
             onClick={handleCopy}
             className="h-8 w-8 p-0"
+            disabled={isStreaming}
           >
             <Clipboard className="h-4 w-4" />
             <span className="sr-only">Copy message</span>
diff --git a/app/frontend/src/components/chatui/fileUtils.tsx b/app/frontend/src/components/chatui/fileUtils.tsx
index affeb1b9..748de1ab 100644
--- a/app/frontend/src/components/chatui/fileUtils.tsx
+++ b/app/frontend/src/components/chatui/fileUtils.tsx
@@ -1,97 +1,218 @@
 // SPDX-License-Identifier: Apache-2.0
 // SPDX-FileCopyrightText: © 2025 Tenstorrent AI ULC
-import { customToast } from "../CustomToaster"
+import { customToast } from "../CustomToaster";
 
-export const encodeFile = (file: File, base64Encoded = true): Promise<string> => {
+// File extensions mapping for code files
+const codeFileExtensions = new Set([
+  // Web
+  ".js",
+  ".jsx",
+  ".ts",
+  ".tsx",
+  ".html",
+  ".css",
+  ".scss",
+  ".sass",
+  // Backend
+  ".py",
+  ".java",
+  ".cpp",
+  ".c",
+  ".hpp",
+  ".h",
+  ".cs",
+  ".php",
+  ".rb",
+  // Other languages
+  ".go",
+  ".rs",
+  ".swift",
+  ".kt",
+  ".scala",
+  ".lua",
+  ".r",
+  ".pl",
+  ".sh",
+  // Config/Data
+  ".json",
+  ".yaml",
+  ".yml",
+  ".toml",
+  ".xml",
+  // Documentation
+  ".md",
+  ".mdx",
+  ".txt",
+  ".csv",
+]);
+
+const supportedMimeTypes = {
+  images: ["image/png", "image/jpeg", "image/webp"],
+  textFiles: ["text/plain", "text/markdown", "text/x-markdown", "text/mdx"],
+  codeFiles: [
+    "text/javascript",
+    "application/javascript",
+    "text/typescript",
+    "text/x-python",
+    "text/x-java",
+    "text/x-c++src",
+    "text/x-typescript",
+  ],
+};
+
+const getFileExtension = (filename: string): string => {
+  return filename
+    .slice(((filename.lastIndexOf(".") - 1) >>> 0) + 2)
+    .toLowerCase();
+};
+
+export const encodeFile = (
+  file: File,
+  base64Encoded = true
+): Promise<string> => {
   return new Promise((resolve, reject) => {
-    console.log("Starting file encoding process...")
-    console.log(`File name: ${file.name}, Size: ${file.size} bytes, Type: ${file.type}`)
-    console.log(`Encoding mode: ${base64Encoded ? "Base64" : "Raw binary"}`)
+    console.log("Starting file encoding process...");
+    console.log(
+      `File name: ${file.name}, Size: ${file.size} bytes, Type: ${file.type}`
+    );
+    console.log(`Encoding mode: ${base64Encoded ? "Base64" : "Raw binary"}`);
 
     if (!file) {
-      console.error("No file provided")
-      reject(new Error("No file provided"))
-      return
+      console.error("No file provided");
+      reject(new Error("No file provided"));
+      return;
     }
 
-    const reader = new FileReader()
+    const reader = new FileReader();
 
     reader.onload = () => {
-      console.log("File read successfully")
-      const result = reader.result as string
+      console.log("File read successfully");
+      const result = reader.result as string;
+      const extension = getFileExtension(file.name);
 
+      // Handle text and code files
+      if (
+        supportedMimeTypes.textFiles.includes(file.type) ||
+        supportedMimeTypes.codeFiles.includes(file.type) ||
+        codeFileExtensions.has(`.${extension}`)
+      ) {
+        console.log(`Text/code content length: ${result.length} chars`);
+        resolve(result);
+        customToast.success(`File ${file.name} processed successfully! 🎉`);
+        return;
+      }
+
+      // Original image handling
       if (base64Encoded) {
         // Extract only the base64 data without the data URI prefix
-        const base64Data = result.split(",")[1]
-        console.log(`Base64 encoded data (first 50 chars): ${base64Data.substring(0, 50)}...`)
-        resolve(base64Data)
-        customToast.success(`File name: ${file.name}, uploaded sucessfully!🎉`)
+        const base64Data = result.split(",")[1];
+        console.log(
+          `Base64 encoded data (first 50 chars): ${base64Data.substring(0, 50)}...`
+        );
+        resolve(base64Data);
+        customToast.success(`File name: ${file.name}, uploaded sucessfully!🎉`);
       } else {
         // Return raw binary data
-        console.log(`Raw binary data length: ${result.length} bytes`)
-        resolve(result)
+        console.log(`Raw binary data length: ${result.length} bytes`);
+        resolve(result);
       }
-    }
+    };
 
     reader.onerror = (error) => {
-      customToast.error(`Error uploading file: ${file.name} only supports PNG, JPEG, and WebP images.`)
-      console.error("File reading error:", error)
-      reject(new Error("Failed to read file"))
-    }
+      customToast.error(
+        `Error uploading file: ${file.name} only supports PNG, JPEG, and WebP images.`
+      );
+      console.error("File reading error:", error);
+      reject(new Error("Failed to read file"));
+    };
 
     reader.onabort = () => {
-      console.warn("File reading aborted")
-      reject(new Error("File reading aborted"))
-    }
+      console.warn("File reading aborted");
+      reject(new Error("File reading aborted"));
+    };
 
     try {
-      if (base64Encoded) {
-        console.log("Reading file as Data URL...")
-        reader.readAsDataURL(file)
+      const extension = getFileExtension(file.name);
+      if (
+        supportedMimeTypes.textFiles.includes(file.type) ||
+        supportedMimeTypes.codeFiles.includes(file.type) ||
+        codeFileExtensions.has(`.${extension}`)
+      ) {
+        console.log("Reading file as text...");
+        reader.readAsText(file);
+      } else if (base64Encoded) {
+        console.log("Reading file as Data URL...");
+        reader.readAsDataURL(file);
       } else {
-        console.log("Reading file as ArrayBuffer...")
-        reader.readAsArrayBuffer(file)
+        console.log("Reading file as ArrayBuffer...");
+        reader.readAsArrayBuffer(file);
       }
     } catch (error) {
-      console.error("Error during file reading:", error)
-      reject(new Error(`Failed to read file: ${error instanceof Error ? error.message : "Unknown error"}`))
+      console.error("Error during file reading:", error);
+      reject(
+        new Error(
+          `Failed to read file: ${error instanceof Error ? error.message : "Unknown error"}`
+        )
+      );
     }
-  })
-}
+  });
+};
 
 export const isImageFile = (file: File): boolean => {
-  const supportedMimeTypes = ["image/png", "image/jpeg", "image/webp"]
-  const result = supportedMimeTypes.includes(file.type)
-  console.log(`File type check: ${file.type} - Is supported image: ${result}`)
-  return result
-}
+  const result = supportedMimeTypes.images.includes(file.type);
+  console.log(`File type check: ${file.type} - Is supported image: ${result}`);
+  return result;
+};
 
-export const validateFile = (file: File, maxSizeMB = 10): { valid: boolean; error?: string } => {
-  console.log(`Validating file: ${file.name}`)
+export const isTextFile = (file: File): boolean => {
+  const extension = getFileExtension(file.name);
+  const result =
+    supportedMimeTypes.textFiles.includes(file.type) ||
+    supportedMimeTypes.codeFiles.includes(file.type) ||
+    codeFileExtensions.has(`.${extension}`);
+  console.log(
+    `File type check: ${file.type} - Is supported text/code file: ${result}`
+  );
+  return result;
+};
+
+export const validateFile = (
+  file: File,
+  maxSizeMB = 10
+): { valid: boolean; error?: string } => {
+  console.log(`Validating file: ${file.name}`);
 
   if (!file) {
-    console.error("No file provided for validation")
-    return { valid: false, error: "No file provided" }
+    console.error("No file provided for validation");
+    return { valid: false, error: "No file provided" };
   }
 
-  const maxSizeBytes = maxSizeMB * 1024 * 1024
+  const maxSizeBytes = maxSizeMB * 1024 * 1024;
   if (file.size > maxSizeBytes) {
-    console.warn(`File size (${file.size} bytes) exceeds limit of ${maxSizeBytes} bytes`)
+    console.warn(
+      `File size (${file.size} bytes) exceeds limit of ${maxSizeBytes} bytes`
+    );
     return {
       valid: false,
       error: `File size exceeds ${maxSizeMB}MB limit (${(file.size / 1024 / 1024).toFixed(2)}MB)`,
-    }
+    };
   }
 
-  if (!isImageFile(file)) {
-    console.warn(`Unsupported file type: ${file.type}`)
+  const extension = getFileExtension(file.name);
+  const isSupported =
+    isImageFile(file) ||
+    supportedMimeTypes.textFiles.includes(file.type) ||
+    supportedMimeTypes.codeFiles.includes(file.type) ||
+    codeFileExtensions.has(`.${extension}`);
+
+  if (!isSupported) {
+    console.warn(`Unsupported file type: ${file.type}`);
     return {
       valid: false,
-      error: `Unsupported file type. Only PNG, JPEG,and WebP images are allowed.`,
-    }
+      error: `Unsupported file type. Only PNG, JPEG, WebP images, and text/code files are allowed.`,
+    };
   }
 
-  console.log("File validation passed")
-  return { valid: true }
-}
-
+  console.log("File validation passed");
+  return { valid: true };
+};
diff --git a/app/frontend/src/components/chatui/processUploadedFiles.tsx b/app/frontend/src/components/chatui/processUploadedFiles.tsx
new file mode 100644
index 00000000..9a37f5e8
--- /dev/null
+++ b/app/frontend/src/components/chatui/processUploadedFiles.tsx
@@ -0,0 +1,42 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: © 2025 Tenstorrent AI ULC
+
+import type { FileData } from "./types";
+
+export function processUploadedFiles(files: FileData[]): FileData {
+  if (!files || files.length === 0) {
+    return {} as FileData;
+  }
+
+  if (files.length === 1 || files[0].type !== "text") {
+    return files[0];
+  }
+  const textFiles = files.filter((file) => file.type === "text" && file.text);
+
+  if (textFiles.length === 0) {
+    return files[0];
+  }
+
+  const combinedText = textFiles.map((file) => file.text).join("\n\n");
+  console.log(`Processed ${textFiles.length} text files into single content`);
+
+  return {
+    type: "text",
+    text: combinedText,
+    name: `combined_${textFiles.length}_files.txt`,
+  } as FileData;
+}
+
+// Usage example:
+/*
+const files = request.files
+console.log("Uploaded files:", files)
+const file = processUploadedFiles(files)
+
+// Now you can use 'file' as before
+if (file.type === "text" && file.text) {
+  // Handle text content
+} else if (file.image_url?.url || file) {
+  // Handle image
+}
+*/
diff --git a/app/frontend/src/components/chatui/runInference.ts b/app/frontend/src/components/chatui/runInference.ts
index 8d1fdd8c..577e4904 100644
--- a/app/frontend/src/components/chatui/runInference.ts
+++ b/app/frontend/src/components/chatui/runInference.ts
@@ -11,6 +11,7 @@ import { getRagContext } from "./getRagContext";
 import { generatePrompt } from "./templateRenderer";
 import { v4 as uuidv4 } from "uuid";
 import type React from "react";
+import { processUploadedFiles } from "./processUploadedFiles";
 
 export const runInference = async (
   request: InferenceRequest,
@@ -19,6 +20,8 @@ export const runInference = async (
   setChatHistory: React.Dispatch<React.SetStateAction<ChatMessage[]>>,
   setIsStreaming: React.Dispatch<React.SetStateAction<boolean>>,
   isAgentSelected: boolean,
+  threadId: number ,
+  isAgentSelected: boolean,
   threadId: number 
 ) => {
   try {
@@ -36,24 +39,56 @@ export const runInference = async (
 
     let messages;
     if (request.files && request.files.length > 0) {
-      console.log(
-        "Files detected, using image_url message structure",
-        request.files[0].image_url?.url
-      );
-      messages = [
-        {
-          role: "user",
-          content: [
-            { type: "text", text: request.text || "What's in this image?" },
-            {
-              type: "image_url",
-              image_url: {
-                url: request.files[0].image_url?.url || request.files[0],
+      const file = processUploadedFiles(request.files);
+      console.log("Processed file:", file);
+
+      if (file.type === "text" && file.text) {
+        // Handle text file by treating its content as RAG context
+        console.log("Text file detected, processing as RAG context");
+        const textContent = file.text;
+        console.log("Text content:", textContent);
+
+        // Create a RAG context from the text file content
+        const fileRagContext = {
+          documents: [textContent],
+        };
+
+        // Merge with existing RAG context if any
+        if (ragContext) {
+          ragContext.documents = [
+            ...ragContext.documents,
+            ...fileRagContext.documents,
+          ];
+        } else {
+          ragContext = fileRagContext;
+        }
+
+        // Process with RAG context
+        console.log("Processing with combined RAG context:", ragContext);
+        messages = generatePrompt(
+          chatHistory.map((msg) => ({ sender: msg.sender, text: msg.text })),
+          ragContext
+        );
+      } else if (file.image_url?.url || file) {
+        console.log(
+          "Image file detected, using image_url message structure",
+          file.image_url?.url
+        );
+        messages = [
+          {
+            role: "user",
+            content: [
+              { type: "text", text: request.text || "What's in this image?" },
+              {
+                type: "image_url",
+                image_url: {
+                  url: file.image_url?.url || file,
+                },
               },
-            },
-          ],
-        },
-      ];
+            ],
+          },
+        ];
+      }
     } else if (
       request.text &&
       request.text.includes("https://") &&
@@ -173,7 +208,6 @@ export const runInference = async (
     let inferenceStats: InferenceStats | undefined;
 
     if (reader) {
-      // eslint-disable-next-line no-constant-condition
       while (true) {
         const { done, value } = await reader.read();
 
@@ -213,7 +247,7 @@ export const runInference = async (
                   context_length: jsonData.context_length,
                 };
                 console.log("Final Inference Stats received:", inferenceStats);
-                continue; // Skip processing this chunk as part of the generated text
+                continue;
               }
             } 
               // Handle the generated text
@@ -241,7 +275,6 @@ export const runInference = async (
     console.log("Inference stream ended.");
     setIsStreaming(false);
 
-    // Update chat history with inference stats after streaming is fully completed
     if (inferenceStats) {
       console.log(
         "Updating chat history with inference stats:",
diff --git a/app/frontend/src/components/chatui/types.ts b/app/frontend/src/components/chatui/types.ts
index df73343b..f7c4fa89 100644
--- a/app/frontend/src/components/chatui/types.ts
+++ b/app/frontend/src/components/chatui/types.ts
@@ -1,35 +1,71 @@
 // SPDX-License-Identifier: Apache-2.0
 // SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
 
+// File and Media Types
+export interface ImageUrl {
+  url: string;
+  detail?: string;
+}
 
-export interface InputAreaProps {
-  textInput: string
-  setTextInput: React.Dispatch<React.SetStateAction<string>>
-  handleInference: (input: string, files: FileData[]) => void
-  isStreaming: boolean
-  isListening: boolean
-  setIsListening: (isListening: boolean) => void
-  files: FileData[]
-  setFiles: React.Dispatch<React.SetStateAction<FileData[]>>
+export interface FileData {
+  id?: string;
+  name: string;
+  type: "text" | "image_url" | "document" | "audio" | "video";
+  size?: number;
+  created_at?: string;
+  blob?: Blob;
+  url?: string;
+  mime_type?: string;
+  duration?: number;
+  thumbnail_url?: string;
+
+  // Type-specific fields
+  text?: string;
+  image_url?: ImageUrl;
+  document_url?: string;
+  audio_url?: string;
+  video_url?: string;
 }
+
+// Chat and Message Types
 export interface ChatMessage {
   id: string;
   sender: "user" | "assistant";
   text: string;
   files?: FileData[];
   inferenceStats?: InferenceStats;
-}
-export interface FileData {
-  url: any;
-  type: "text" | "image_url";
-  text?: string;
-  image_url?: {
-    url: string;
-  };
+  ragDatasource?: RagDataSource;
+}
+
+export type MessageContent =
+  | {
+      type: "text";
+      text: string;
+    }
+  | {
+      type: "image_url";
+      image_url: {
+        url: string;
+      };
+    };
+
+export type InferenceMessage = {
+  role: "user" | "assistant";
+  content: MessageContent[];
+};
+
+// RAG Types
+export interface RagDataSource {
+  id: string;
   name: string;
-  blob?: Blob;
+  metadata?: {
+    created_at?: string;
+    embedding_func_name?: string;
+    last_uploaded_document?: string;
+  };
 }
 
+// Inference Types
 export interface InferenceRequest {
   deploy_id: string;
   text: string;
@@ -37,40 +73,32 @@ export interface InferenceRequest {
   files?: FileData[];
 }
 
-export interface FileData {
-  type: "text" | "image_url";
-  text?: string;
-  image_url?: {
-    url: string;
-  };
-  name: string;
-  blob?: Blob;
-}
-
-export interface RagDataSource {
-  id: string;
-  name: string;
-  metadata: Record<string, string>;
-}
-
-export interface ChatMessage {
-  id: string;
-  sender: "user" | "assistant";
-  text: string;
-  inferenceStats?: InferenceStats;
-}
-
-export interface Model {
-  id: string;
-  name: string;
-}
-
 export interface InferenceStats {
-  user_ttft_s: number; // Time to First Token in seconds
-  user_tpot: number; // Time Per Output Token in seconds
-  tokens_decoded: number; // Number of tokens decoded
-  tokens_prefilled: number; // Number of tokens prefilled
-  context_length: number; // Context length
+  user_ttft_s?: number;
+  user_tpot?: number;
+  tokens_decoded?: number;
+  tokens_prefilled?: number;
+  context_length?: number;
+  startTime?: string;
+  endTime?: string;
+  totalDuration?: number;
+  tokensPerSecond?: number;
+  promptTokens?: number;
+  completionTokens?: number;
+  totalTokens?: number;
+  total_time_ms?: number;
+}
+
+// Component Props Types
+export interface InputAreaProps {
+  textInput: string;
+  setTextInput: React.Dispatch<React.SetStateAction<string>>;
+  handleInference: (input: string, files: FileData[]) => void;
+  isStreaming: boolean;
+  isListening: boolean;
+  setIsListening: (isListening: boolean) => void;
+  files: FileData[];
+  setFiles: React.Dispatch<React.SetStateAction<FileData[]>>;
 }
 
 export interface InferenceStatsProps {
@@ -82,7 +110,26 @@ export interface StreamingMessageProps {
   isStreamFinished: boolean;
 }
 
-// Voice input types
+export interface HistoryPanelProps {
+  chatHistory: ChatMessage[][];
+  onSelectThread: (index: number) => void;
+  onDeleteThread: (index: number) => void;
+  onCreateNewThread: () => void;
+}
+
+export interface FileDisplayProps {
+  files: FileData[];
+  minimizedFiles: Set<string>;
+  toggleMinimizeFile: (fileId: string) => void;
+  onFileClick: (fileUrl: string, fileName: string) => void;
+}
+
+export interface FileViewerDialogProps {
+  file: { url: string; name: string; isImage: boolean } | null;
+  onClose: () => void;
+}
+
+// Voice Input Types
 export interface SpeechRecognitionAlternative {
   transcript: string;
   confidence: number;
@@ -126,13 +173,19 @@ export interface VoiceInputProps {
   setIsListening: (isListening: boolean) => void;
 }
 
-export interface HistoryPanelProps {
-  chatHistory: ChatMessage[][];
-  onSelectThread: (index: number) => void;
-  onDeleteThread: (index: number) => void;
-  onCreateNewThread: () => void;
+// Model Types
+export interface Model {
+  id?: string;
+  containerID?: string;
+  name?: string;
+  modelName?: string;
+  modelSize?: string;
+  baseModel?: string;
+  task?: string;
+  status?: string;
 }
 
+// Global Type Declarations
 declare global {
   interface Window {
     SpeechRecognition: new () => SpeechRecognition;

From 29fb80a088655d959d43b0a24d1f931266cccb3b Mon Sep 17 00:00:00 2001
From: anirudTT <aramchandran@tenstorrent.com>
Date: Tue, 25 Feb 2025 20:44:07 +0000
Subject: [PATCH 28/29] fix merge issues

---
 app/frontend/src/components/chatui/Header.tsx | 203 +++++++++---------
 .../src/components/chatui/runInference.ts     |  50 ++---
 2 files changed, 127 insertions(+), 126 deletions(-)

diff --git a/app/frontend/src/components/chatui/Header.tsx b/app/frontend/src/components/chatui/Header.tsx
index 03df4570..b43133a4 100644
--- a/app/frontend/src/components/chatui/Header.tsx
+++ b/app/frontend/src/components/chatui/Header.tsx
@@ -2,7 +2,6 @@
 // SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
 import React from "react";
 import { useState } from "react";
-import { useState } from "react";
 import {
   Breadcrumb,
   BreadcrumbEllipsis,
@@ -44,9 +43,8 @@ interface HeaderProps {
   setRagDatasource: (datasource: RagDataSource | undefined) => void;
   isHistoryPanelOpen: boolean;
   setIsHistoryPanelOpen: (isOpen: boolean) => void;
-  isAgentSelected: boolean; 
+  isAgentSelected: boolean;
   setIsAgentSelected: (value: boolean) => void;
-
 }
 interface RagDataSource {
   id: string;
@@ -134,9 +132,9 @@ export default function Header({
   isHistoryPanelOpen,
   setIsHistoryPanelOpen,
   isAgentSelected,
-  setIsAgentSelected
+  setIsAgentSelected,
 }: HeaderProps) {
-  const [selectedAIAgent, setSelectedAIAgent] =  useState<string | null>(null);
+  const [selectedAIAgent, setSelectedAIAgent] = useState<string | null>(null);
 
   // Handle the AI agent selection change
   const handleAgentSelection = (value: string) => {
@@ -217,114 +215,117 @@ export default function Header({
           </BreadcrumbList>
         </Breadcrumb>
       </div>
-      <div className="flex items-center space-x-4"> 
-      <div className="flex items-center">
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <ForwardedSelect
-                value={ragDatasource ? ragDatasource.name : ""}
-                onValueChange={(v) => {
-                  if (v === "remove") {
-                    setRagDatasource(undefined);
-                  } else {
-                    const dataSource = ragDataSources.find(
-                      (rds) => rds.name === v
-                    );
-                    if (dataSource) {
-                      setRagDatasource(dataSource);
+      <div className="flex items-center space-x-4">
+        <div className="flex items-center">
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <ForwardedSelect
+                  value={ragDatasource ? ragDatasource.name : ""}
+                  onValueChange={(v) => {
+                    if (v === "remove") {
+                      setRagDatasource(undefined);
+                    } else {
+                      const dataSource = ragDataSources.find(
+                        (rds) => rds.name === v
+                      );
+                      if (dataSource) {
+                        setRagDatasource(dataSource);
+                      }
                     }
-                  }
-                }}
-              >
-                <SelectContent className="bg-white dark:bg-[#2A2A2A] border-gray-200 dark:border-[#7C68FA]/20">
-                  {ragDataSources.map((c) => (
+                  }}
+                >
+                  <SelectContent className="bg-white dark:bg-[#2A2A2A] border-gray-200 dark:border-[#7C68FA]/20">
+                    {ragDataSources.map((c) => (
+                      <SelectItem
+                        key={c.id}
+                        value={c.name}
+                        className="text-gray-800 dark:text-white hover:bg-gray-100 dark:hover:bg-[#7C68FA]/20"
+                      >
+                        {c.name}
+                      </SelectItem>
+                    ))}
+                    {ragDatasource && (
+                      <SelectItem
+                        value="remove"
+                        className="text-red-500 hover:bg-red-100 dark:hover:bg-red-900/20"
+                      >
+                        <span className="flex items-center">
+                          <X className="mr-2 h-4 w-4" />
+                          Remove RAG context
+                        </span>
+                      </SelectItem>
+                    )}
+                  </SelectContent>
+                </ForwardedSelect>
+              </TooltipTrigger>
+              <TooltipContent className="bg-white dark:bg-[#2A2A2A] border-gray-200 dark:border-[#7C68FA]/20 text-gray-800 dark:text-white">
+                <p>
+                  {ragDatasource
+                    ? "Change or remove RAG context"
+                    : "Select RAG context"}
+                </p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+
+        <div className="flex items-center">
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <ForwardedAISelect
+                  value={selectedAIAgent || ""} // Default value is an empty string for placeholder
+                  onValueChange={handleAgentSelection}
+                  // onValueChange={(v) => {
+                  //   if (v === "remove") {
+                  //     handleAgentSelection("");  // Clear selection if "remove" is chosen
+                  //   } else {
+                  //     handleAgentSelection(v);  // Set selected AI Agent
+                  //   }
+                  // }}
+                >
+                  <SelectContent className="bg-white dark:bg-[#2A2A2A] border-gray-200 dark:border-[#7C68FA]/20">
                     <SelectItem
-                      key={c.id}
-                      value={c.name}
+                      value="search-agent"
                       className="text-gray-800 dark:text-white hover:bg-gray-100 dark:hover:bg-[#7C68FA]/20"
                     >
-                      {c.name}
-                    </SelectItem>
-                  ))}
-                  {ragDatasource && (
-                    <SelectItem
-                      value="remove"
-                      className="text-red-500 hover:bg-red-100 dark:hover:bg-red-900/20"
-                    >
-                      <span className="flex items-center">
-                        <X className="mr-2 h-4 w-4" />
-                        Remove RAG context
-                      </span>
+                      Search Agent
                     </SelectItem>
-                  )}
-                </SelectContent>
-              </ForwardedSelect>
-            </TooltipTrigger>
-            <TooltipContent className="bg-white dark:bg-[#2A2A2A] border-gray-200 dark:border-[#7C68FA]/20 text-gray-800 dark:text-white">
-              <p>
-                {ragDatasource
-                  ? "Change or remove RAG context"
-                  : "Select RAG context"}
-              </p>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-        </div>
-  
-  <div className="flex items-center">
-  <TooltipProvider>
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <ForwardedAISelect
-          value={selectedAIAgent || ""}  // Default value is an empty string for placeholder
-          onValueChange={handleAgentSelection}
-          // onValueChange={(v) => {
-          //   if (v === "remove") {
-          //     handleAgentSelection("");  // Clear selection if "remove" is chosen
-          //   } else {
-          //     handleAgentSelection(v);  // Set selected AI Agent
-          //   }
-          // }}
-        >
-          <SelectContent className="bg-white dark:bg-[#2A2A2A] border-gray-200 dark:border-[#7C68FA]/20">
-            <SelectItem
-              value="search-agent"
-              className="text-gray-800 dark:text-white hover:bg-gray-100 dark:hover:bg-[#7C68FA]/20"
-            >
-              Search Agent
-            </SelectItem>
 
-            {/* Add more AI agents as SelectItems here if needed */}
-            {/* <SelectItem
+                    {/* Add more AI agents as SelectItems here if needed */}
+                    {/* <SelectItem
               value="another-agent"
               className="text-gray-800 dark:text-white hover:bg-gray-100 dark:hover:bg-[#7C68FA]/20"
             >
               Another AI Agent
             </SelectItem> */}
 
-            {selectedAIAgent && (
-              <SelectItem
-                value="remove"
-                className="text-red-500 hover:bg-red-100 dark:hover:bg-red-900/20"
-              >
-                <span className="flex items-center">
-                  <X className="mr-2 h-4 w-4" />
-                  Remove AI Agent
-                </span>
-              </SelectItem>
-            )}
-          </SelectContent>
-        </ForwardedAISelect>
-      </TooltipTrigger>
-      <TooltipContent className="bg-white dark:bg-[#2A2A2A] border-gray-200 dark:border-[#7C68FA]/20 text-gray-800 dark:text-white">
-        <p>{selectedAIAgent ? "Change or remove AI agent" : "Select AI Agent"}</p>
-      </TooltipContent>
-    </Tooltip>
-  </TooltipProvider>
-</div>
-    </div>
+                    {selectedAIAgent && (
+                      <SelectItem
+                        value="remove"
+                        className="text-red-500 hover:bg-red-100 dark:hover:bg-red-900/20"
+                      >
+                        <span className="flex items-center">
+                          <X className="mr-2 h-4 w-4" />
+                          Remove AI Agent
+                        </span>
+                      </SelectItem>
+                    )}
+                  </SelectContent>
+                </ForwardedAISelect>
+              </TooltipTrigger>
+              <TooltipContent className="bg-white dark:bg-[#2A2A2A] border-gray-200 dark:border-[#7C68FA]/20 text-gray-800 dark:text-white">
+                <p>
+                  {selectedAIAgent
+                    ? "Change or remove AI agent"
+                    : "Select AI Agent"}
+                </p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      </div>
     </div>
-          
   );
 }
diff --git a/app/frontend/src/components/chatui/runInference.ts b/app/frontend/src/components/chatui/runInference.ts
index 577e4904..333f4a5a 100644
--- a/app/frontend/src/components/chatui/runInference.ts
+++ b/app/frontend/src/components/chatui/runInference.ts
@@ -20,9 +20,7 @@ export const runInference = async (
   setChatHistory: React.Dispatch<React.SetStateAction<ChatMessage[]>>,
   setIsStreaming: React.Dispatch<React.SetStateAction<boolean>>,
   isAgentSelected: boolean,
-  threadId: number ,
-  isAgentSelected: boolean,
-  threadId: number 
+  threadId: number
 ) => {
   try {
     setIsStreaming(true);
@@ -132,12 +130,12 @@ export const runInference = async (
     }
 
     console.log("Generated messages:", messages);
-    console.log("Thread ID: ", threadId); 
+    console.log("Thread ID: ", threadId);
+
+    const API_URL = isAgentSelected
+      ? import.meta.env.VITE_SPECIAL_API_URL || "/models-api/agent/"
+      : import.meta.env.VITE_API_URL || "/models-api/inference/";
 
-    const API_URL = isAgentSelected 
-    ? import.meta.env.VITE_SPECIAL_API_URL || "/models-api/agent/"  
-    : import.meta.env.VITE_API_URL || "/models-api/inference/"; 
-    
     const AUTH_TOKEN = import.meta.env.VITE_AUTH_TOKEN || "";
 
     const headers: Record<string, string> = {
@@ -147,8 +145,8 @@ export const runInference = async (
       headers["Authorization"] = `Bearer ${AUTH_TOKEN}`;
     }
 
-    let requestBody; 
-    let threadIdStr = threadId.toString(); 
+    let requestBody;
+    let threadIdStr = threadId.toString();
 
     if (!isAgentSelected) {
       requestBody = {
@@ -161,8 +159,7 @@ export const runInference = async (
           include_usage: true,
         },
       };
-    }
-    else {
+    } else {
       requestBody = {
         deploy_id: request.deploy_id,
         // model: "meta-llama/Llama-3.1-70B-Instruct",
@@ -175,7 +172,7 @@ export const runInference = async (
         thread_id: threadIdStr, // Add thread_id to the request body
       };
     }
- 
+
     console.log(
       "Sending request to model:",
       JSON.stringify(requestBody, null, 2)
@@ -237,19 +234,22 @@ export const runInference = async (
               const jsonData = JSON.parse(trimmedLine.slice(5));
 
               if (!isAgentSelected) {
-              // // Handle statistics separately after [DONE]
-              if (jsonData.ttft && jsonData.tpot) {
-                inferenceStats = {
-                  user_ttft_s: jsonData.ttft,
-                  user_tpot: jsonData.tpot,
-                  tokens_decoded: jsonData.tokens_decoded,
-                  tokens_prefilled: jsonData.tokens_prefilled,
-                  context_length: jsonData.context_length,
-                };
-                console.log("Final Inference Stats received:", inferenceStats);
-                continue;
+                // // Handle statistics separately after [DONE]
+                if (jsonData.ttft && jsonData.tpot) {
+                  inferenceStats = {
+                    user_ttft_s: jsonData.ttft,
+                    user_tpot: jsonData.tpot,
+                    tokens_decoded: jsonData.tokens_decoded,
+                    tokens_prefilled: jsonData.tokens_prefilled,
+                    context_length: jsonData.context_length,
+                  };
+                  console.log(
+                    "Final Inference Stats received:",
+                    inferenceStats
+                  );
+                  continue;
+                }
               }
-            } 
               // Handle the generated text
               const content = jsonData.choices[0]?.delta?.content || "";
               if (content) {

From 75f657fef82c81b123f192355e9dd1025d04d1ad Mon Sep 17 00:00:00 2001
From: anirudTT <aramchandran@tenstorrent.com>
Date: Tue, 25 Feb 2025 20:49:59 +0000
Subject: [PATCH 29/29] remove unused console log

---
 app/frontend/src/components/chatui/ChatHistory.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/frontend/src/components/chatui/ChatHistory.tsx b/app/frontend/src/components/chatui/ChatHistory.tsx
index 664dd91b..0af96008 100644
--- a/app/frontend/src/components/chatui/ChatHistory.tsx
+++ b/app/frontend/src/components/chatui/ChatHistory.tsx
@@ -117,9 +117,9 @@ const ChatHistory: React.FC<ChatHistoryProps> = ({
   onReRender,
   onContinue,
   reRenderingMessageId,
-  ragDatasource,
+  // ragDatasource,
 }) => {
-  console.log("ChatHistory component rendered", ragDatasource);
+  // console.log("ChatHistory component rendered", ragDatasource);
   const viewportRef = useRef<HTMLDivElement>(null);
   const [isScrollButtonVisible, setIsScrollButtonVisible] = useState(false);
   const lastMessageRef = useRef<HTMLDivElement>(null);