@kite-copilot/chat-panel 0.2.52 → 0.2.53

package/dist/index.cjs

@@ -1120,29 +1120,29 @@ function DataRenderer({ type, data }) {
 // src/components/TypingIndicator.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function TypingIndicator({ className = "" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `flex items-center gap-1 px-4 py-3 ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-1", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `flex items-center gap-1.5 ${className}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "span",
       {
-        className: "w-2 h-2 bg-gray-400 rounded-full animate-bounce",
+        className: "w-2 h-2 bg-gray-500 rounded-full animate-bounce",
         style: { animationDelay: "0ms", animationDuration: "600ms" }
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "span",
       {
-        className: "w-2 h-2 bg-gray-400 rounded-full animate-bounce",
+        className: "w-2 h-2 bg-gray-500 rounded-full animate-bounce",
         style: { animationDelay: "150ms", animationDuration: "600ms" }
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "span",
       {
-        className: "w-2 h-2 bg-gray-400 rounded-full animate-bounce",
+        className: "w-2 h-2 bg-gray-500 rounded-full animate-bounce",
         style: { animationDelay: "300ms", animationDuration: "600ms" }
       }
     )
-  ] }) });
+  ] });
 }
 
 // src/ChatPanel.tsx
@@ -1591,6 +1591,78 @@ function AuthErrorState({
     )
   ] });
 }
+function ImageLightbox({
+  imageUrl,
+  onClose
+}) {
+  const handleDownload = async () => {
+    try {
+      const response = await fetch(imageUrl);
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      const urlParts = imageUrl.split("/");
+      const filename = urlParts[urlParts.length - 1] || "image.jpg";
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      window.URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error("Failed to download image:", error);
+      window.open(imageUrl, "_blank");
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "div",
+    {
+      className: "fixed inset-0 z-[100] flex items-center justify-center bg-black/80",
+      onClick: onClose,
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        "div",
+        {
+          className: "relative max-w-[90vw] max-h-[90vh] flex flex-col items-center",
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              "img",
+              {
+                src: imageUrl,
+                alt: "Full size preview",
+                className: "max-w-full max-h-[80vh] object-contain rounded-lg"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex gap-3 mt-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                "button",
+                {
+                  onClick: handleDownload,
+                  className: "flex items-center gap-2 px-4 py-2 bg-white text-gray-800 rounded-lg hover:bg-gray-100 transition-colors text-sm font-medium",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Download, { className: "h-4 w-4" }),
+                    "Download"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                "button",
+                {
+                  onClick: onClose,
+                  className: "flex items-center gap-2 px-4 py-2 bg-gray-700 text-white rounded-lg hover:bg-gray-600 transition-colors text-sm font-medium",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.X, { className: "h-4 w-4" }),
+                    "Close"
+                  ]
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
 function ChatPanel({
   isOpen = true,
   onClose,
@@ -1611,7 +1683,8 @@ function ChatPanel({
   initialCorner = "bottom-left",
   onCornerChange,
   productBackendUrl,
-  getAuthHeaders
+  getAuthHeaders,
+  isEval = false
 } = {}) {
   const [messages, setMessages] = React6.useState(initialMessages);
   const [input, setInput] = React6.useState("");
@@ -1721,13 +1794,20 @@ function ChatPanel({
   }, [effectiveSupabaseUrl, effectiveSupabaseAnonKey]);
   React6.useEffect(() => {
     if (!isEscalated || !sessionId || !supabaseRef.current) {
+      console.log("[KiteChat] Typing channel skip - isEscalated:", isEscalated, "sessionId:", sessionId, "supabase:", !!supabaseRef.current);
       return;
     }
     const channelName = `typing:${sessionId}`;
-    const channel = supabaseRef.current.channel(channelName);
+    console.log("[KiteChat] Subscribing to typing channel:", channelName, "sessionId:", sessionId);
+    const channel = supabaseRef.current.channel(channelName, {
+      config: { broadcast: { self: true } }
+    });
     channel.on("broadcast", { event: "typing" }, (payload) => {
+      console.log("[KiteChat] Received typing event:", payload);
       const { sender, isTyping } = payload.payload;
+      console.log("[KiteChat] Typing event - sender:", sender, "isTyping:", isTyping);
       if (sender === "agent") {
+        console.log("[KiteChat] Setting agentIsTyping to:", isTyping);
         setAgentIsTyping(isTyping);
         if (isTyping) {
           if (typingTimeoutRef.current) {
@@ -1739,6 +1819,7 @@ function ChatPanel({
         }
       }
     }).subscribe((status) => {
+      console.log("[KiteChat] Typing channel subscription status:", status);
       if (status === "SUBSCRIBED") {
         typingChannelRef.current = channel;
         console.log("[KiteChat] Typing channel subscribed successfully");
@@ -1753,7 +1834,7 @@ function ChatPanel({
         window.clearTimeout(typingTimeoutRef.current);
       }
     };
-  }, [isEscalated, sessionId]);
+  }, [isEscalated, sessionId, effectiveSupabaseUrl, effectiveSupabaseAnonKey]);
   React6.useEffect(() => {
     if (!isOpen && isEscalated && supabaseRef.current && sessionId) {
       console.log("[KiteChat] Panel closed during live chat, marking disconnected");
@@ -1964,6 +2045,77 @@ function ChatPanel({
   const [pendingBulkSession, setPendingBulkSession] = React6.useState(null);
   const pendingBulkSessionRef = React6.useRef(null);
   const fileInputRef = React6.useRef(null);
+  const [pendingImages, setPendingImages] = React6.useState([]);
+  const [isUploadingImage, setIsUploadingImage] = React6.useState(false);
+  const [isDragOver, setIsDragOver] = React6.useState(false);
+  const imageInputRef = React6.useRef(null);
+  const [lightboxImageUrl, setLightboxImageUrl] = React6.useState(null);
+  const uploadImageToStorage = React6.useCallback(async (file) => {
+    if (!supabaseRef.current) {
+      console.error("[KiteChat] Supabase client not available for file upload");
+      return null;
+    }
+    const fileExt = file.name.split(".").pop();
+    const fileName = `${sessionId}/${Date.now()}-${Math.random().toString(36).substring(7)}.${fileExt}`;
+    const bucketName = "chat-attachments";
+    try {
+      const { data, error } = await supabaseRef.current.storage.from(bucketName).upload(fileName, file, {
+        cacheControl: "3600",
+        upsert: false
+      });
+      if (error) {
+        console.error("[KiteChat] Upload error:", error);
+        return null;
+      }
+      const { data: urlData } = supabaseRef.current.storage.from(bucketName).getPublicUrl(fileName);
+      return urlData?.publicUrl || null;
+    } catch (err) {
+      console.error("[KiteChat] Upload failed:", err);
+      return null;
+    }
+  }, [sessionId]);
+  const handleImageSelect = React6.useCallback((files) => {
+    if (!files) return;
+    const imageFiles = Array.from(files).filter(
+      (file) => file.type.startsWith("image/") || file.type === "application/pdf"
+    );
+    const newImages = imageFiles.map((file) => ({
+      file,
+      preview: file.type.startsWith("image/") ? URL.createObjectURL(file) : ""
+    }));
+    setPendingImages((prev) => [...prev, ...newImages]);
+  }, []);
+  const handleDragOver = React6.useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(true);
+  }, []);
+  const handleDragLeave = React6.useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+  }, []);
+  const handleDrop = React6.useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+    const files = e.dataTransfer.files;
+    if (files.length > 0) {
+      const csvFile = Array.from(files).find((f) => f.name.endsWith(".csv"));
+      if (csvFile && !isEscalated) {
+        setPendingFile(csvFile);
+      } else {
+        handleImageSelect(files);
+      }
+    }
+  }, [isEscalated, handleImageSelect]);
+  React6.useEffect(() => {
+    return () => {
+      pendingImages.forEach((img) => {
+        if (img.preview) URL.revokeObjectURL(img.preview);
+      });
+    };
+  }, [pendingImages]);
   const [searchExpanded, setSearchExpanded] = React6.useState(false);
   const [searchInput, setSearchInput] = React6.useState("");
   const searchInputRef = React6.useRef(null);
@@ -2020,6 +2172,11 @@ function ChatPanel({
       messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
     }
   }, [messages, phase, activeGuide]);
+  React6.useEffect(() => {
+    if (isEscalated && agentIsTyping && !activeGuide) {
+      messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [isEscalated, agentIsTyping, activeGuide]);
   const latestBulkSummaryNavigation = React6.useMemo(() => {
     for (let i = messages.length - 1; i >= 0; i--) {
       const msg = messages[i];
@@ -2256,7 +2413,7 @@ function ChatPanel({
     setPanelView("landing");
     setCurrentFolderId(void 0);
   }
-  function handleSubmit(e) {
+  async function handleSubmit(e) {
     e.preventDefault();
     const trimmed = input.trim();
     if (pendingFile) {
@@ -2276,6 +2433,49 @@ function ChatPanel({
       if (fileInputRef.current) fileInputRef.current.value = "";
       return;
     }
+    if (pendingImages.length > 0) {
+      setIsUploadingImage(true);
+      try {
+        const uploadedUrls = [];
+        for (const img of pendingImages) {
+          const url = await uploadImageToStorage(img.file);
+          if (url) {
+            uploadedUrls.push(url);
+          }
+          if (img.preview) URL.revokeObjectURL(img.preview);
+        }
+        if (uploadedUrls.length > 0) {
+          const imageMarkdown = uploadedUrls.map((url) => `![image](${url})`).join("\n");
+          const messageContent = trimmed ? `${trimmed}
+
+${imageMarkdown}` : imageMarkdown;
+          const userMessage = {
+            id: Date.now(),
+            role: "user",
+            content: messageContent,
+            imageUrls: uploadedUrls
+          };
+          setMessages((prev) => [...prev, userMessage]);
+          if (isEscalated) {
+            sendEscalatedMessage(messageContent);
+            sendTypingIndicator(false);
+            if (userTypingTimeoutRef.current) {
+              window.clearTimeout(userTypingTimeoutRef.current);
+              userTypingTimeoutRef.current = null;
+            }
+          } else {
+            startChatFlow(messageContent);
+          }
+        }
+      } catch (err) {
+        console.error("[KiteChat] Failed to upload images:", err);
+      } finally {
+        setIsUploadingImage(false);
+        setPendingImages([]);
+        setInput("");
+      }
+      return;
+    }
     if (!trimmed) return;
     if (isEscalated) {
       const userMessage = {
@@ -2440,7 +2640,8 @@ function ChatPanel({
           user_id: userId,
           org_id: orgId,
           user_name: userName,
-          user_email: userEmail
+          user_email: userEmail,
+          is_eval: isEval
         }),
         signal: controller.signal
       });
@@ -3333,19 +3534,23 @@ ${userText}`
       )
     ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        "input",
+        "textarea",
         {
           ref: searchInputRef,
-          type: "text",
           value: searchInput,
-          onChange: (e) => setSearchInput(e.target.value),
+          onChange: (e) => {
+            setSearchInput(e.target.value);
+            e.target.style.height = "auto";
+            e.target.style.height = Math.min(e.target.scrollHeight, 120) + "px";
+          },
           onKeyDown: (e) => {
-            if (e.key === "Enter" && searchInput.trim()) {
+            if (e.key === "Enter" && !e.shiftKey && searchInput.trim()) {
               e.preventDefault();
               onOpen?.();
               startChatFlow(searchInput.trim());
               setSearchInput("");
               setSearchExpanded(false);
+              e.currentTarget.style.height = "auto";
             } else if (e.key === "Escape") {
               setSearchExpanded(false);
               setSearchInput("");
@@ -3357,7 +3562,8 @@ ${userText}`
             }
           },
           placeholder: "Ask a question...",
-          className: "flex-1 text-sm text-gray-700 outline-none bg-transparent"
+          rows: 1,
+          className: "flex-1 text-sm text-gray-700 outline-none bg-transparent resize-none min-h-[20px] max-h-[120px]"
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2", children: [
@@ -3617,12 +3823,55 @@ ${userText}`
                   return null;
                 }
                 if (isUser) {
-                  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `flex justify-end ${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "max-w-[260px] rounded-2xl rounded-br-md bg-gray-900 px-3 py-2 text-sm text-white shadow-sm", children: message.content }) }, message.id);
+                  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `flex flex-col items-end gap-2 ${isRoleChange ? "mt-3" : ""}`, children: [
+                    message.imageUrls && message.imageUrls.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-wrap gap-1 justify-end max-w-[260px]", children: message.imageUrls.map((url, imgIndex) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      "button",
+                      {
+                        onClick: () => setLightboxImageUrl(url),
+                        className: "block cursor-pointer",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                          "img",
+                          {
+                            src: url,
+                            alt: `Attachment ${imgIndex + 1}`,
+                            className: "max-h-32 max-w-[200px] rounded-lg object-cover border border-gray-700 hover:opacity-90 transition-opacity"
+                          }
+                        )
+                      },
+                      imgIndex
+                    )) }),
+                    message.content && !message.content.match(/^!\[image\]\([^)]+\)(\n!\[image\]\([^)]+\))*$/) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "max-w-[260px] rounded-2xl rounded-br-md bg-gray-900 px-3 py-2 text-sm text-white shadow-sm", children: message.content.replace(/!\[image\]\([^)]+\)\n*/g, "").trim() })
+                  ] }, message.id);
                 }
                 if (message.role === "agent") {
-                  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `flex flex-col items-start ${isRoleChange ? "mt-3" : ""}`, children: [
+                  const imageRegex = /!\[image\]\(([^)]+)\)/g;
+                  const extractedImageUrls = [];
+                  let match;
+                  const contentStr = message.content || "";
+                  while ((match = imageRegex.exec(contentStr)) !== null) {
+                    extractedImageUrls.push(match[1]);
+                  }
+                  const agentImageUrls = message.imageUrls || extractedImageUrls;
+                  const agentTextContent = contentStr.replace(/!\[image\]\([^)]+\)\n*/g, "").trim();
+                  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `flex flex-col items-start gap-2 ${isRoleChange ? "mt-3" : ""}`, children: [
                     isRoleChange && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[10px] text-gray-500 mb-1 ml-1", children: "Agent" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "max-w-[300px] rounded-2xl rounded-bl-md bg-gray-100 px-4 py-3 text-sm text-gray-700", children: message.content })
+                    agentImageUrls.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-wrap gap-1 justify-start max-w-[300px]", children: agentImageUrls.map((url, imgIndex) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      "button",
+                      {
+                        onClick: () => setLightboxImageUrl(url),
+                        className: "block cursor-pointer",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                          "img",
+                          {
+                            src: url,
+                            alt: `Attachment ${imgIndex + 1}`,
+                            className: "max-h-32 max-w-[200px] rounded-lg object-cover border border-gray-300 hover:opacity-90 transition-opacity"
+                          }
+                        )
+                      },
+                      imgIndex
+                    )) }),
+                    agentTextContent && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "max-w-[300px] rounded-2xl rounded-bl-md bg-gray-100 px-4 py-3 text-sm text-gray-700", children: agentTextContent })
                   ] }, message.id);
                 }
                 if (message.kind === "searchSummary") {
@@ -4658,131 +4907,183 @@ ${userText}`
                   progressSteps
                 }
               ) }),
-              isEscalated && agentIsTyping && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TypingIndicator, {}) }),
+              isEscalated && agentIsTyping && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex items-start mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "bg-gray-200 rounded-2xl rounded-bl-md px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TypingIndicator, {}) }) }),
               !activeGuide && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref: messagesEndRef })
             ] }) }) }) })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "px-4 py-3 bg-white shrink-0", children: [
-          pendingFile && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mb-2 flex items-center gap-2 rounded-xl bg-blue-50 border border-blue-200 px-3 py-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.FileSpreadsheet, { className: "h-4 w-4 text-blue-600" }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs text-blue-700 flex-1 truncate", children: pendingFile.name }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-              "button",
-              {
-                type: "button",
-                onClick: () => {
-                  setPendingFile(null);
-                  if (fileInputRef.current) fileInputRef.current.value = "";
-                },
-                className: "text-blue-600 hover:text-blue-800",
-                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.X, { className: "h-4 w-4" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("form", { onSubmit: handleSubmit, className: "w-full", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-              "input",
-              {
-                ref: fileInputRef,
-                type: "file",
-                accept: ".csv",
-                className: "hidden",
-                onChange: (e) => {
-                  const file = e.target.files?.[0];
-                  if (file) {
-                    setPendingFile(file);
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+          "div",
+          {
+            className: `px-4 py-3 bg-white shrink-0 ${isDragOver ? "ring-2 ring-blue-400 ring-inset bg-blue-50" : ""}`,
+            onDragOver: handleDragOver,
+            onDragLeave: handleDragLeave,
+            onDrop: handleDrop,
+            children: [
+              pendingFile && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mb-2 flex items-center gap-2 rounded-xl bg-blue-50 border border-blue-200 px-3 py-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.FileSpreadsheet, { className: "h-4 w-4 text-blue-600" }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs text-blue-700 flex-1 truncate", children: pendingFile.name }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      setPendingFile(null);
+                      if (fileInputRef.current) fileInputRef.current.value = "";
+                    },
+                    className: "text-blue-600 hover:text-blue-800",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.X, { className: "h-4 w-4" })
                   }
-                }
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex w-full items-start gap-2 rounded-xl border border-gray-200 bg-white px-3 py-2 shadow-sm", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                Button,
-                {
-                  type: "button",
-                  size: "icon",
-                  variant: "ghost",
-                  onClick: () => fileInputRef.current?.click(),
-                  className: "h-5 w-5 rounded-full text-gray-400 hover:text-gray-600 hover:bg-gray-100",
-                  title: "Upload CSV for bulk operations",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Paperclip, { className: "h-2.5 w-2.5" })
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                "textarea",
-                {
-                  placeholder: pendingFile ? "Describe what to do with this CSV..." : "Ask anything...",
-                  value: input,
-                  onChange: (e) => {
-                    setInput(e.target.value);
-                    if (e.target.value.length > 0) {
-                      handleTypingStart();
+                )
+              ] }),
+              pendingImages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mb-2 flex flex-wrap gap-2", children: [
+                pendingImages.map((img, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "relative group", children: [
+                  img.preview ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    "img",
+                    {
+                      src: img.preview,
+                      alt: `Preview ${index + 1}`,
+                      className: "h-16 w-16 object-cover rounded-lg border border-gray-200"
                     }
-                  },
-                  rows: 1,
-                  className: "flex-1 border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 text-sm placeholder:text-gray-400 resize-none overflow-hidden outline-none",
-                  style: { minHeight: "20px", maxHeight: "120px" },
-                  onInput: (e) => {
-                    const target = e.target;
-                    target.style.height = "auto";
-                    target.style.height = Math.min(target.scrollHeight, 120) + "px";
-                  },
-                  onKeyDown: (e) => {
-                    if (e.key === "Enter" && !e.shiftKey && !e.metaKey && !e.ctrlKey) {
-                      e.preventDefault();
-                      if (input.trim() || pendingFile) {
-                        const form = e.currentTarget.closest("form");
-                        if (form) {
-                          form.requestSubmit();
-                        }
-                      }
-                      return;
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-16 w-16 rounded-lg border border-gray-200 bg-gray-100 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.FileSpreadsheet, { className: "h-6 w-6 text-gray-400" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        if (img.preview) URL.revokeObjectURL(img.preview);
+                        setPendingImages((prev) => prev.filter((_, i) => i !== index));
+                      },
+                      className: "absolute -top-1 -right-1 h-4 w-4 rounded-full bg-gray-800 text-white flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.X, { className: "h-2.5 w-2.5" })
                     }
-                    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
-                      const currentBulkSession = pendingBulkSessionRef.current;
-                      if (currentBulkSession) {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        confirmBulkOperation(currentBulkSession);
-                        return;
-                      }
-                      if (pendingAction) {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        handleActionSubmit();
-                        return;
-                      }
-                      if (pendingNavigation) {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        handleConfirmNavigation(pendingNavigation);
-                        return;
-                      }
-                      const currentGuide = activeGuideRef.current;
-                      if (currentGuide) {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        advanceGuide();
-                        return;
+                  )
+                ] }, index)),
+                isUploadingImage && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-16 w-16 rounded-lg border border-gray-200 bg-gray-50 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Loader2, { className: "h-5 w-5 animate-spin text-gray-400" }) })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("form", { onSubmit: handleSubmit, className: "w-full", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  "input",
+                  {
+                    ref: fileInputRef,
+                    type: "file",
+                    accept: ".csv",
+                    className: "hidden",
+                    onChange: (e) => {
+                      const file = e.target.files?.[0];
+                      if (file) {
+                        setPendingFile(file);
                       }
                     }
                   }
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                Button,
-                {
-                  type: "submit",
-                  size: "icon",
-                  disabled: !input.trim() && !pendingFile || isWaitingForAuth,
-                  className: "h-6 w-6 rounded-full bg-gray-900 hover:bg-gray-800 disabled:bg-gray-300",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.ArrowUp, { className: "h-2.5 w-2.5" })
-                }
-              )
-            ] })
-          ] })
-        ] }),
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  "input",
+                  {
+                    ref: imageInputRef,
+                    type: "file",
+                    accept: "image/*,.pdf",
+                    multiple: true,
+                    className: "hidden",
+                    onChange: (e) => handleImageSelect(e.target.files)
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `flex w-full items-start gap-2 rounded-xl border bg-white px-3 py-2 shadow-sm ${isDragOver ? "border-blue-400" : "border-gray-200"}`, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    Button,
+                    {
+                      type: "button",
+                      size: "icon",
+                      variant: "ghost",
+                      onClick: () => {
+                        if (isEscalated) {
+                          imageInputRef.current?.click();
+                        } else {
+                          fileInputRef.current?.click();
+                        }
+                      },
+                      className: "h-5 w-5 rounded-full text-gray-400 hover:text-gray-600 hover:bg-gray-100",
+                      title: isEscalated ? "Attach image or file" : "Upload CSV for bulk operations",
+                      disabled: isUploadingImage,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Paperclip, { className: "h-2.5 w-2.5" })
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    "textarea",
+                    {
+                      placeholder: pendingFile ? "Describe what to do with this CSV..." : pendingImages.length > 0 ? "Add a message (optional)..." : isDragOver ? "Drop files here..." : "Ask anything...",
+                      value: input,
+                      onChange: (e) => {
+                        setInput(e.target.value);
+                        if (e.target.value.length > 0) {
+                          handleTypingStart();
+                        }
+                      },
+                      rows: 1,
+                      className: "flex-1 border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 text-sm placeholder:text-gray-400 resize-none overflow-hidden outline-none",
+                      style: { minHeight: "20px", maxHeight: "120px" },
+                      onInput: (e) => {
+                        const target = e.target;
+                        target.style.height = "auto";
+                        target.style.height = Math.min(target.scrollHeight, 120) + "px";
+                      },
+                      onKeyDown: (e) => {
+                        if (e.key === "Enter" && !e.shiftKey && !e.metaKey && !e.ctrlKey) {
+                          e.preventDefault();
+                          if (input.trim() || pendingFile || pendingImages.length > 0) {
+                            const form = e.currentTarget.closest("form");
+                            if (form) {
+                              form.requestSubmit();
+                            }
+                          }
+                          return;
+                        }
+                        if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+                          const currentBulkSession = pendingBulkSessionRef.current;
+                          if (currentBulkSession) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            confirmBulkOperation(currentBulkSession);
+                            return;
+                          }
+                          if (pendingAction) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            handleActionSubmit();
+                            return;
+                          }
+                          if (pendingNavigation) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            handleConfirmNavigation(pendingNavigation);
+                            return;
+                          }
+                          const currentGuide = activeGuideRef.current;
+                          if (currentGuide) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            advanceGuide();
+                            return;
+                          }
+                        }
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    Button,
+                    {
+                      type: "submit",
+                      size: "icon",
+                      disabled: !input.trim() && !pendingFile || isWaitingForAuth,
+                      className: "h-6 w-6 rounded-full bg-gray-700 hover:bg-gray-600 disabled:bg-gray-300",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.ArrowUp, { className: "h-2.5 w-2.5 text-white" })
+                    }
+                  )
+                ] })
+              ] })
+            ]
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           GuideCursor,
           {
@@ -4791,6 +5092,13 @@ ${userText}`
             visible: cursorState.visible,
             onClick: cursorState.onClick
           }
+        ),
+        lightboxImageUrl && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          ImageLightbox,
+          {
+            imageUrl: lightboxImageUrl,
+            onClose: () => setLightboxImageUrl(null)
+          }
         )
       ]
     }
@@ -4835,7 +5143,8 @@ function ChatPanelWithToggle({
   initialCorner,
   onCornerChange,
   productBackendUrl,
-  getAuthHeaders
+  getAuthHeaders,
+  isEval
 }) {
   const [internalIsOpen, setInternalIsOpen] = React6.useState(defaultOpen);
   const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
@@ -4866,7 +5175,8 @@ function ChatPanelWithToggle({
       initialCorner,
       onCornerChange,
       productBackendUrl,
-      getAuthHeaders
+      getAuthHeaders,
+      isEval
     }
   );
 }