WIP: improved Ui, retry logic, and working on RAG

sunjay-dev · sunjay-dev · commit d6c14128e4ec · 2026-03-08T12:45:31.000+05:00
diff --git a/.github/workflows/docker-build-manual.yaml b/.github/workflows/docker-build-manual.yaml
@@ -5,6 +5,7 @@ on: workflow_dispatch
 jobs:
   backend:
     runs-on: ubuntu-24.04-arm
+    timeout-minutes: 10
     steps:
       - uses: actions/checkout@v4
 
diff --git a/.github/workflows/docker-build-push.yaml b/.github/workflows/docker-build-push.yaml
@@ -9,6 +9,7 @@ on:
 jobs:
   changes:
     runs-on: ubuntu-latest
+    timeout-minutes: 5
     outputs:
       backend: ${{ steps.set-filters.outputs.backend }}
     steps:
@@ -40,6 +41,7 @@ jobs:
     needs: changes
     if: needs.changes.outputs.backend == 'true'
     runs-on: ubuntu-24.04-arm
+    timeout-minutes: 10
     steps:
       - uses: actions/checkout@v4
 
diff --git a/backend/package.json b/backend/package.json
@@ -29,7 +29,6 @@
     "@langchain/google-genai": "^2.1.24",
     "@langchain/groq": "^1.1.4",
     "@langchain/langgraph-checkpoint-redis": "^1.0.2",
-    "@langchain/openrouter": "^0.1.5",
     "@langchain/pinecone": "^1.0.1",
     "@langchain/tavily": "^1.2.0",
     "@pinecone-database/pinecone": "^7.1.0",
diff --git a/backend/src/controllers/chat.controllers.ts b/backend/src/controllers/chat.controllers.ts
@@ -70,3 +70,18 @@ export async function handleDeleteAllUserChat(c: Context) {
 
   return c.json({ success: true, deleted: count });
 }
+export async function handleChatStatus(c: Context) {
+  const { chatId } = c.get("param");
+  const userId = c.get("user");
+
+  const chat = await prisma.chat.findUnique({
+    where: { id: chatId, userId },
+    select: {
+      ragStatus: true,
+    },
+  });
+
+  if (!chat) throw new NotFoundError("Chat not found or unauthorized");
+
+  return c.json(chat, 200);
+}
diff --git a/backend/src/prompts/system.prompt.ts b/backend/src/prompts/system.prompt.ts
@@ -57,9 +57,10 @@ ${memoryContext.length ? `### KNOWN FACTS ABOUT THE USER\n${memoryContext.join("
 - **AVOID ITERATION**: Do not search, analyze, and then search again. Try to get the answer in the first attempt.
 
 ### FORMATTING STANDARDS
-**1. Math & LaTeX**
-- Inline math: $...$
-- Block math: $$...$$
+**1. Math & Currency**
+- Inline math: ONLY use double dollar signs \`$$...$$\` for inline math equations so they render correctly via KaTeX. DO NOT use single dollar signs \`$...\` for math.
+- Block math: Use double dollar signs \`$$...$$\` on separate lines.
+- Currency: Write currency normally like \`$37,000\`. It will render as normal text because single-dollar math parsing is disabled.
 
 **2. Markdown Tables**
 - Do NOT use multi-line code blocks inside tables, place it **outside** the table..
diff --git a/backend/src/routes/chat.routes.ts b/backend/src/routes/chat.routes.ts
@@ -5,6 +5,7 @@ import {
   handleGetUserChats,
   handleRenameUserChat,
   handleDeleteAllUserChat,
+  handleChatStatus,
 } from "../controllers/chat.controllers.js";
 import { clerkMiddleware } from "@hono/clerk-auth";
 import { checkUser } from "../middlewares/auth.middlewares.js";
@@ -14,6 +15,7 @@ const router = new Hono();
 
 router.get("/", clerkMiddleware(), checkUser, handleGetUserChats);
 router.post("/", clerkMiddleware(), checkUser, validate(querySchema), handleCreateUserChat);
+router.get("/:chatId/status", clerkMiddleware(), checkUser, validateParams(chatIdParamSchema), handleChatStatus);
 router.patch("/:chatId", clerkMiddleware(), checkUser, validateParams(chatIdParamSchema), validate(chatRenameSchema), handleRenameUserChat);
 router.delete("/:chatId", clerkMiddleware(), checkUser, validateParams(chatIdParamSchema), handleDeleteUserChat);
 router.delete("/", clerkMiddleware(), checkUser, handleDeleteAllUserChat);
diff --git a/frontend/src/components/containers/InputContainer.tsx b/frontend/src/components/containers/InputContainer.tsx
@@ -1,12 +1,13 @@
 import React, { useState, useRef, useEffect } from "react";
-import { ArrowUp, Loader2, Paperclip, X, AlertCircle, FileText } from "lucide-react";
+import { ArrowUp, Loader2, Paperclip, X, AlertCircle, FileText, RefreshCw } from "lucide-react";
 import ModelSelector from "@/components/ModelSelector";
 import { useIsMobile } from "@/hooks";
 import { modelsList } from "@app/shared/src/models";
 import { useAuth } from "@clerk/clerk-react";
 import { useParams, useNavigate } from "react-router-dom";
 import type { UploadedFile } from "@app/shared/src/types";
 import { uploadToCloudinary } from "@/utils/cloudinary";
+import { toast } from "sonner";
 
 type Attachment = {
   id: string;
@@ -26,6 +27,19 @@ type Props = {
   startRagPolling: () => void;
 };
 
+const SUPPORTED_FORMATS = [
+  "application/pdf",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+  "text/csv",
+  "text/plain",
+  "image/jpeg",
+  "image/png",
+  "image/webp",
+];
+
+const SUPPORTED_EXTENSIONS_DISPLAY = ".pdf, .docx, .pptx, .csv, .txt, .jpg, .jpeg, .png, .webp";
+
 export default function InputContainer({ sendMessage, isGenerating, selectedModel, onStop, onModelChange, autoFocus, isRagProcessing, startRagPolling }: Props) {
   const [message, setMessage] = useState("");
   const { getToken } = useAuth();
@@ -40,62 +54,102 @@ export default function InputContainer({ sendMessage, isGenerating, selectedMode
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const isMobile = useIsMobile();
 
+  const uploadSingleFile = async (attachment: Attachment) => {
+    try {
+      setAttachments((prev) =>
+        prev.map((item) => (item.id === attachment.id ? { ...item, status: "uploading" } : item))
+      );
+
+      const data = await uploadToCloudinary({ file: attachment.file, getToken });
+
+      let newChatId = undefined;
+      if (!data.fileType.includes("image")) {
+        const token = await getToken();
+        const res = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/upload/rag`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` },
+          body: JSON.stringify({
+            fileUrl: data.fileUrl,
+            fileName: data.fileName,
+            fileType: data.fileType,
+            chatId: chatId || undefined
+          })
+        });
+        const apiData = await res.json();
+        if (apiData.success) {
+          startRagPolling();
+          if (apiData.chatId && !chatId) {
+            newChatId = apiData.chatId;
+          }
+        }
+      }
+
+      setAttachments((prev) =>
+        prev.map((item) => (item.id === attachment.id ? { ...item, status: "success", uploadData: data } : item))
+      );
+
+      if (newChatId) {
+        navigate(`/c/${newChatId}`, { replace: true });
+      }
+    } catch {
+      setAttachments((prev) =>
+        prev.map((item) => (item.id === attachment.id ? { ...item, status: "error" } : item))
+      );
+    }
+  };
+
   const processFiles = async (files: File[]) => {
     if (!files.length) return;
 
-    const newAttachments: Attachment[] = files.map((file) => ({
+    const currentCount = attachments.length;
+    const remainingSlots = 4 - currentCount;
+
+    if (remainingSlots <= 0) {
+      toast.error("Maximum 4 files allowed per message");
+      return;
+    }
+
+    const validFiles = files.filter(file => {
+      const isSupported = SUPPORTED_FORMATS.includes(file.type) ||
+        file.name.toLowerCase().endsWith('.txt') ||
+        file.name.toLowerCase().endsWith('.csv') ||
+        file.name.toLowerCase().endsWith('.pdf') ||
+        file.name.toLowerCase().endsWith('.docx') ||
+        file.name.toLowerCase().endsWith('.pptx');
+
+      if (!isSupported) {
+        toast.error(`Unsupported file type: ${file.name}`);
+      }
+      return isSupported;
+    });
+
+    if (validFiles.length === 0) return;
+
+    let filesToUpload = validFiles;
+    if (validFiles.length > remainingSlots) {
+      toast.warning(`Only ${remainingSlots} more file${remainingSlots > 1 ? 's' : ''} can be added (4 file limit)`);
+      filesToUpload = validFiles.slice(0, remainingSlots);
+    }
+
+    const newAttachments: Attachment[] = filesToUpload.map((file) => ({
       id: crypto.randomUUID(),
       file,
       status: "uploading",
     }));
 
     setAttachments((prev) => [...prev, ...newAttachments]);
 
-    const uploadPromises = newAttachments.map(async (attachment) => {
-      try {
-        const data = await uploadToCloudinary({ file: attachment.file, getToken });
-
-        let newChatId = undefined;
-        if (!data.fileType.includes("image")) {
-          const token = await getToken();
-          const res = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/upload/rag`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` },
-            body: JSON.stringify({
-              fileUrl: data.fileUrl,
-              fileName: data.fileName,
-              fileType: data.fileType,
-              chatId: chatId || undefined
-            })
-          });
-          const apiData = await res.json();
-          if (apiData.success) {
-            startRagPolling();
-            if (apiData.chatId && !chatId) {
-              newChatId = apiData.chatId;
-            }
-          }
-        }
-
-        setAttachments((prev) =>
-          prev.map((item) => (item.id === attachment.id ? { ...item, status: "success", uploadData: data } : item))
-        );
-
-        if (newChatId) {
-          navigate(`/c/${newChatId}`, { replace: true });
-        }
-      } catch {
-        setAttachments((prev) =>
-          prev.map((item) => (item.id === attachment.id ? { ...item, status: "error" } : item))
-        );
-      }
-    });
+    const uploadPromises = newAttachments.map((attachment) => uploadSingleFile(attachment));
 
     await Promise.allSettled(uploadPromises);
 
     if (fileInputRef.current) fileInputRef.current.value = "";
   };
 
+  const handleRetryUpload = (attachment: Attachment) => {
+    uploadSingleFile(attachment);
+  };
+
   const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.files && e.target.files.length > 0) {
       await processFiles(Array.from(e.target.files));
@@ -231,7 +285,7 @@ export default function InputContainer({ sendMessage, isGenerating, selectedMode
   const isBusy = isGenerating || isGlobalUploading;
 
   return (
-    <div className="w-full flex justify-center items-center px-4 pb-6 sm:pb-4 bg-transparent relative">
+    <div className="w-full flex justify-center items-center px-4 pb-4 bg-transparent relative">
       {isDragging && (
         <div className="fixed inset-0 z-99 flex items-center justify-center bg-black/40 backdrop-blur-sm pointer-events-none transition-all duration-200">
           <div className="absolute inset-4 sm:inset-6 md:inset-8 border-4 border-dashed border-white/60 rounded-3xl z-0" />
@@ -255,9 +309,19 @@ export default function InputContainer({ sendMessage, isGenerating, selectedMode
                         <img
                           src={URL.createObjectURL(att.file)}
                           alt="Preview"
-                          className={`h-16 w-auto rounded-lg object-contain border border-gray-100 transition-all ${att.status === "uploading" ? "opacity-50 blur-[1px]" : ""
-                            }`}
+                          className={`h-16 w-auto rounded-lg object-contain border border-gray-100 transition-all ${att.status === "uploading" ? "opacity-50 blur-[1px]" : "opacity-100"
+                            } ${att.status === "error" ? "border-red-400 bg-red-50" : ""}`}
                         />
+                        {att.status === "error" && (
+                          <button
+                            type="button"
+                            onClick={() => handleRetryUpload(att)}
+                            className="absolute inset-0 m-auto h-8 w-8 bg-black/60 hover:bg-black/80 text-white rounded-full flex items-center justify-center transition-colors shadow-lg z-20"
+                            title="Retry upload"
+                          >
+                            <RefreshCw size={16} />
+                          </button>
+                        )}
                         <button
                           type="button"
                           onClick={() => handleRemoveAttachment(att.id)}
@@ -268,10 +332,20 @@ export default function InputContainer({ sendMessage, isGenerating, selectedMode
                       </div>
                     ) : (
                       <div className="relative inline-flex items-center gap-2 bg-gray-50 px-3 py-2 rounded-lg border border-gray-100 w-fit max-w-full">
-                        <div className="bg-white p-1.5 rounded-md border border-gray-200 shadow-sm">
-                          <FileText size={16} className="text-primary" />
+                        <div className={`bg-white p-1.5 rounded-md border shadow-sm transition-colors ${att.status === "error" ? "border-red-200 bg-red-50" : "border-gray-200"}`}>
+                          {att.status === "error" ? (
+                            <RefreshCw
+                              size={16}
+                              className="text-red-500 cursor-pointer hover:rotate-180 transition-transform duration-500"
+                              onClick={() => handleRetryUpload(att)}
+                            />
+                          ) : (
+                            <FileText size={16} className="text-primary" />
+                          )}
                         </div>
-                        <span className="truncate text-xs text-primary max-w-24 font-medium">{att.file.name}</span>
+                        <span className={`truncate text-xs max-w-24 font-medium ${att.status === "error" ? "text-red-600" : "text-primary"}`}>
+                          {att.file.name}
+                        </span>
                         <button
                           type="button"
                           onClick={() => handleRemoveAttachment(att.id)}
@@ -317,7 +391,6 @@ export default function InputContainer({ sendMessage, isGenerating, selectedMode
               onChange={(e) => setMessage(e.target.value)}
               onKeyDown={handleKeyDown}
               onPaste={handlePaste}
-              disabled={isBusy}
               placeholder="Ask Anything"
               rows={1}
               className="w-full custom-scroll custom-scroll-xs py-2 px-1.5 text-primary text-sm focus:outline-none resize-none overflow-y-auto max-h-28 transition-all duration-200 ease-in-out"
@@ -329,7 +402,8 @@ export default function InputContainer({ sendMessage, isGenerating, selectedMode
                   type="file"
                   multiple
                   ref={fileInputRef}
-                  max={5}
+                  max={4}
+                  accept={SUPPORTED_EXTENSIONS_DISPLAY}
                   onChange={handleFileChange}
                   className="hidden"
                   id="file-upload"
diff --git a/frontend/src/components/messages/ModelMessage.tsx b/frontend/src/components/messages/ModelMessage.tsx
@@ -59,7 +59,7 @@ type Props = {
 export default memo(function ModelMessage({ text, status, isCopied, onCopy, onResend, hideToolTip, isGenerating }: Props) {
 
   return (
-    <div className="max-w-full text-[15px] sm:text-sm py-2 sm:py-4 rounded-xl">
+    <div className="max-w-full text-[15px] sm:text-sm py-3 rounded-xl">
       {isGenerating && text.length === 0 && !status ? (
         <span className="inline-block animate-pulse font-bold">▍</span>
       ) : (
@@ -71,7 +71,7 @@ export default memo(function ModelMessage({ text, status, isCopied, onCopy, onRe
           )}
           {text && (
             <ReactMarkdown
-              remarkPlugins={[remarkGfm, remarkMath]}
+              remarkPlugins={[remarkGfm, [remarkMath, { singleDollarTextMath: false }]]}
               rehypePlugins={[
                 rehypeHighlight,
                 [rehypeKatex, { strict: false }],
diff --git a/frontend/src/components/tooltips/ModelMessageToolTip.tsx b/frontend/src/components/tooltips/ModelMessageToolTip.tsx
@@ -16,7 +16,7 @@ export default function ModelMessageToolTip({ isCopied, onCopy, onResend }: Prop
         className="mr-1 p-1 text-[#1c1c1c]/80 hover:bg-[#e9e9e980] active:bg-[#e9e9e980] rounded-full"
         aria-label="Copy message"
       >
-        {isCopied ? <Check size={14} className="transition-all duration-300" /> : <Copy size={14} />}
+        {isCopied ? <Check size={16} className="transition-all duration-300" /> : <Copy size={16} />}
       </button>
 
       {onResend && (
@@ -27,7 +27,7 @@ export default function ModelMessageToolTip({ isCopied, onCopy, onResend }: Prop
           className="mr-1 p-1 text-[#1c1c1c]/80 hover:bg-[#e9e9e980] active:bg-[#e9e9e980] rounded-full"
           aria-label="Send again"
         >
-          <Repeat2 size={14} />
+          <Repeat2 size={16} />
         </button>
       )}
     </div>
diff --git a/frontend/src/hooks/useMessage.ts b/frontend/src/hooks/useMessage.ts
diff --git a/frontend/src/styles/modelMessage.css b/frontend/src/styles/modelMessage.css
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
