@hef2024/llmasaservice-ui 0.19.0 → 0.20.0

package/dist/index.mjs

@@ -234,6 +234,7 @@ var ChatPanel = ({
   const [alwaysApprovedTools, setAlwaysApprovedTools] = useState2([]);
   const [thinkingBlocks, setThinkingBlocks] = useState2([]);
   const [currentThinkingIndex, setCurrentThinkingIndex] = useState2(0);
+  const [error, setError] = useState2(null);
   const [userResizedHeight, setUserResizedHeight] = useState2(null);
   const [pendingButtonAttachments, setPendingButtonAttachments] = useState2([]);
   const actionMatchRegistry = useRef(/* @__PURE__ */ new Map());
@@ -535,10 +536,10 @@ var ChatPanel = ({
         const allTools = results.flat();
         setToolList(allTools);
         setToolsFetchError(false);
-      } catch (error) {
+      } catch (error2) {
         console.error(
           "An error occurred while processing tool fetches:",
-          error
+          error2
         );
         setToolList([]);
         setToolsFetchError(true);
@@ -548,7 +549,7 @@ var ChatPanel = ({
     });
     fetchAndSetTools();
   }, [mcpServers, publicAPIUrl]);
-  const { send, response, idle, stop, lastCallId, setResponse } = useLLM({
+  const llmResult = useLLM({
     project_id,
     customer: currentCustomer,
     url,
@@ -561,6 +562,41 @@ var ChatPanel = ({
       };
     })
   });
+  const { send, response, idle, stop, lastCallId, setResponse, error: llmError } = llmResult;
+  const handleError = useCallback((errorMessage, historyKey) => {
+    console.log("[ChatPanel] Error detected:", errorMessage);
+    if (errorMessage.includes("413") || errorMessage.toLowerCase().includes("content too large")) {
+      setError({
+        message: "The context is too large to process. Please start a new conversation or reduce the amount of context.",
+        code: "413"
+      });
+    } else if (errorMessage.toLowerCase().includes("network error") || errorMessage.toLowerCase().includes("fetch")) {
+      setError({
+        message: "Network error. Please check your connection and try again.",
+        code: "NETWORK_ERROR"
+      });
+    } else {
+      setError({
+        message: errorMessage,
+        code: "UNKNOWN_ERROR"
+      });
+    }
+    setIsLoading(false);
+    const keyToUse = historyKey || lastKey;
+    if (keyToUse) {
+      setHistory((prev) => __spreadProps(__spreadValues({}, prev), {
+        [keyToUse]: {
+          content: `Error: ${errorMessage}`,
+          callId: lastCallId || ""
+        }
+      }));
+    }
+  }, [lastKey, lastCallId]);
+  useEffect2(() => {
+    if (llmError && llmError.trim()) {
+      handleError(llmError);
+    }
+  }, [llmError, handleError]);
   const processActionsOnContent = useCallback((content, context) => {
     let workingContent = content;
     const buttonAttachments = [];
@@ -897,8 +933,8 @@ var ChatPanel = ({
             return action;
           }
         }).filter(Boolean);
-      } catch (error) {
-        console.error("Error parsing actions string:", error);
+      } catch (error2) {
+        console.error("Error parsing actions string:", error2);
         actions2 = [];
       }
     }
@@ -1086,8 +1122,8 @@ var ChatPanel = ({
             console.error(`No content returned from tool ${req.toolName}`);
             return null;
           }
-        } catch (error) {
-          console.error(`Error processing tool ${req.toolName}:`, error);
+        } catch (error2) {
+          console.error(`Error processing tool ${req.toolName}:`, error2);
           return null;
         }
       }));
@@ -1129,10 +1165,14 @@ var ChatPanel = ({
         true,
         service,
         currentConversation,
-        lastController
+        lastController,
+        void 0,
+        // onComplete
+        (errorMsg) => handleError(errorMsg)
+        // onError
       );
-    } catch (error) {
-      console.error("Error in processing all tools:", error);
+    } catch (error2) {
+      console.error("Error in processing all tools:", error2);
       setIsLoading(false);
     }
   });
@@ -1264,8 +1304,8 @@ var ChatPanel = ({
                   if (typeof interactionClicked === "function") {
                     interactionClicked(lastCallId, "action");
                   }
-                } catch (error) {
-                  console.error("Error executing clickCode:", error);
+                } catch (error2) {
+                  console.error("Error executing clickCode:", error2);
                 }
               }
             };
@@ -1360,10 +1400,10 @@ var ChatPanel = ({
                 if (typeof interactionClicked === "function") {
                   interactionClicked(lastCallId, "action");
                 }
-              } catch (error) {
+              } catch (error2) {
                 console.error(
                   "Error executing clickCode via delegation:",
-                  error
+                  error2
                 );
               }
             }
@@ -1475,7 +1515,11 @@ var ChatPanel = ({
             true,
             service,
             convId,
-            controller
+            controller,
+            void 0,
+            // onComplete
+            (errorMsg) => handleError(errorMsg)
+            // onError
           );
           setLastPrompt(initialPrompt);
           setLastMessages(messages);
@@ -1571,8 +1615,8 @@ var ChatPanel = ({
           return newConvo.id;
         }
         return "";
-      }).catch((error) => {
-        console.error("Error creating new conversation", error);
+      }).catch((error2) => {
+        console.error("Error creating new conversation", error2);
         return "";
       });
     }
@@ -1621,7 +1665,7 @@ var ChatPanel = ({
               customerEmail: updatedValues.customer_user_email
             })
           }).catch(
-            (error) => console.error("Failed to update conversation:", error)
+            (error2) => console.error("Failed to update conversation:", error2)
           );
         }
       });
@@ -1631,6 +1675,8 @@ var ChatPanel = ({
   const continueChat = (suggestion) => {
     setThinkingBlocks([]);
     setCurrentThinkingIndex(0);
+    setError(null);
+    setResponse("");
     if (emailInput && isEmailAddress(emailInput) && !emailInputSet) {
       const newId = (currentCustomer == null ? void 0 : currentCustomer.customer_id) && currentCustomer.customer_id !== "" && currentCustomer.customer_id !== (currentCustomer == null ? void 0 : currentCustomer.customer_user_email) ? currentCustomer.customer_id : emailInput;
       setEmailInputSet(true);
@@ -1725,7 +1771,11 @@ var ChatPanel = ({
           true,
           service,
           convId,
-          controller
+          controller,
+          void 0,
+          // onComplete
+          (errorMsg) => handleError(errorMsg)
+          // onError
         );
         setLastPrompt(nextPromptToSend);
         setLastMessages(messagesAndHistory);
@@ -2044,6 +2094,15 @@ var ChatPanel = ({
       className: "llm-panel" + (theme === "light" ? "" : " dark-theme")
     },
     title && title !== "" ? /* @__PURE__ */ React3.createElement("div", { className: "title" }, title) : null,
+    error && /* @__PURE__ */ React3.createElement("div", { className: "error-banner" }, /* @__PURE__ */ React3.createElement("div", { className: "error-banner__icon" }, /* @__PURE__ */ React3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React3.createElement("circle", { cx: "12", cy: "12", r: "10" }), /* @__PURE__ */ React3.createElement("line", { x1: "12", x2: "12", y1: "8", y2: "12" }), /* @__PURE__ */ React3.createElement("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" }))), /* @__PURE__ */ React3.createElement("div", { className: "error-banner__content" }, /* @__PURE__ */ React3.createElement("div", { className: "error-banner__message" }, error.message), error.code === "413" && /* @__PURE__ */ React3.createElement("div", { className: "error-banner__hint" }, "Try starting a new conversation or reducing the amount of information being sent.")), /* @__PURE__ */ React3.createElement(
+      "button",
+      {
+        className: "error-banner__close",
+        onClick: () => setError(null),
+        "aria-label": "Dismiss error"
+      },
+      /* @__PURE__ */ React3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React3.createElement("line", { x1: "18", x2: "6", y1: "6", y2: "18" }), /* @__PURE__ */ React3.createElement("line", { x1: "6", x2: "18", y1: "6", y2: "18" }))
+    )),
     /* @__PURE__ */ React3.createElement("div", { className: "responseArea", ref: responseAreaRef }, initialMessage && initialMessage !== "" ? /* @__PURE__ */ React3.createElement("div", { className: "history-entry" }, /* @__PURE__ */ React3.createElement("div", { className: "response" }, /* @__PURE__ */ React3.createElement(
       ReactMarkdown,
       {
@@ -2353,6 +2412,7 @@ var ChatPanel = ({
             setIsToolInfoModalOpen(false);
             setToolInfoData(null);
             setJustReset(true);
+            setError(null);
             setLastController(new AbortController());
             buttonActionRegistry.current.clear();
             setTimeout(() => {
@@ -3314,9 +3374,6 @@ var DialogFooter = ({
 // src/AIChatPanel.tsx
 var ArrowUpIcon = () => /* @__PURE__ */ React11.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ React11.createElement("path", { d: "M12 19V5M5 12l7-7 7 7" }));
 var StopIcon = () => /* @__PURE__ */ React11.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "ai-chat-icon" }, /* @__PURE__ */ React11.createElement("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }));
-var CopyIcon = () => /* @__PURE__ */ React11.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ React11.createElement("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), /* @__PURE__ */ React11.createElement("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" }));
-var ThumbsUpIcon = () => /* @__PURE__ */ React11.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ React11.createElement("path", { d: "M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" }));
-var ThumbsDownIcon = () => /* @__PURE__ */ React11.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ React11.createElement("path", { d: "M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17" }));
 var ChevronDownIcon = () => /* @__PURE__ */ React11.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ React11.createElement("path", { d: "m6 9 6 6 6-6" }));
 var ChevronUpIcon = () => /* @__PURE__ */ React11.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ React11.createElement("path", { d: "m18 15-6-6-6 6" }));
 var AgentIcon = () => /* @__PURE__ */ React11.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ React11.createElement("path", { d: "M12 8V4H8" }), /* @__PURE__ */ React11.createElement("rect", { width: "16", height: "12", x: "4", y: "8", rx: "2" }), /* @__PURE__ */ React11.createElement("path", { d: "M2 14h2" }), /* @__PURE__ */ React11.createElement("path", { d: "M20 14h2" }), /* @__PURE__ */ React11.createElement("path", { d: "M15 13v2" }), /* @__PURE__ */ React11.createElement("path", { d: "M9 13v2" }));
@@ -3324,6 +3381,8 @@ var CheckIcon = () => /* @__PURE__ */ React11.createElement("svg", { xmlns: "htt
 var BrainIcon = () => /* @__PURE__ */ React11.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ React11.createElement("path", { d: "M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z" }), /* @__PURE__ */ React11.createElement("path", { d: "M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z" }));
 var SearchIcon = () => /* @__PURE__ */ React11.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ React11.createElement("circle", { cx: "11", cy: "11", r: "8" }), /* @__PURE__ */ React11.createElement("path", { d: "m21 21-4.3-4.3" }));
 var LLMAsAServiceLogo = () => /* @__PURE__ */ React11.createElement("svg", { width: "16", height: "16", viewBox: "0 0 72 72", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React11.createElement("ellipse", { cx: "14.0868", cy: "59.2146", rx: "7.8261", ry: "7.7854", fill: "#2487D8" }), /* @__PURE__ */ React11.createElement("ellipse", { cx: "24.9013", cy: "43.0776", rx: "6.11858", ry: "6.08676", fill: "#2487D8" }), /* @__PURE__ */ React11.createElement("ellipse", { cx: "45.391", cy: "43.0776", rx: "6.11858", ry: "6.08676", fill: "#2487D8" }), /* @__PURE__ */ React11.createElement("ellipse", { cx: "65.8813", cy: "43.0776", rx: "6.11858", ry: "6.08676", fill: "#2487D8" }), /* @__PURE__ */ React11.createElement("ellipse", { cx: "35.1461", cy: "26.5327", rx: "4.41103", ry: "4.3878", fill: "#2487D8" }), /* @__PURE__ */ React11.createElement("ellipse", { cx: "55.6364", cy: "26.5327", rx: "4.41103", ry: "4.3878", fill: "#2487D8" }), /* @__PURE__ */ React11.createElement("ellipse", { cx: "45.391", cy: "10.3959", rx: "2.70351", ry: "2.68919", fill: "#2487D8" }));
+var AlertCircleIcon = () => /* @__PURE__ */ React11.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ React11.createElement("circle", { cx: "12", cy: "12", r: "10" }), /* @__PURE__ */ React11.createElement("line", { x1: "12", x2: "12", y1: "8", y2: "12" }), /* @__PURE__ */ React11.createElement("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" }));
+var CloseIcon = () => /* @__PURE__ */ React11.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ React11.createElement("line", { x1: "18", x2: "6", y1: "6", y2: "18" }), /* @__PURE__ */ React11.createElement("line", { x1: "6", x2: "18", y1: "6", y2: "18" }));
 var ChatInput = React11.memo(({
   placeholder,
   idle,
@@ -3627,6 +3686,8 @@ var AIChatPanel = ({
   const [newConversationConfirm, setNewConversationConfirm] = useState6(false);
   const [justReset, setJustReset] = useState6(false);
   const [copiedCallId, setCopiedCallId] = useState6(null);
+  const [feedbackCallId, setFeedbackCallId] = useState6(null);
+  const [error, setError] = useState6(null);
   const bottomRef = useRef5(null);
   const responseAreaRef = useRef5(null);
   const [userHasScrolled, setUserHasScrolled] = useState6(false);
@@ -3665,7 +3726,8 @@ var AIChatPanel = ({
     idle,
     lastCallId,
     stop,
-    setResponse
+    setResponse,
+    error: llmError
   } = llmResult;
   const toolList = llmResult.toolList || [];
   const toolsLoading = llmResult.toolsLoading || false;
@@ -3740,8 +3802,8 @@ var AIChatPanel = ({
         }
         console.warn("ensureConversation - No ID in response");
         return "";
-      }).catch((error) => {
-        console.error("Error creating new conversation", error);
+      }).catch((error2) => {
+        console.error("Error creating new conversation", error2);
         return "";
       });
     }
@@ -3833,16 +3895,59 @@ var AIChatPanel = ({
     }
     return displayPrompt;
   }, [hideRagContextInPrompt]);
+  const interactionClicked = useCallback2((callId, action, emailaddress = "", comment = "") => __async(void 0, null, function* () {
+    var _a, _b;
+    console.log(`[AIChatPanel] Interaction: ${action} for callId: ${callId}`);
+    const convId = currentConversation || (yield ensureConversation());
+    const finalCallId = callId || convId;
+    const isEmailAddress = (str) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(str);
+    const email = emailaddress && emailaddress !== "" ? emailaddress : isEmailAddress((_a = customer == null ? void 0 : customer.customer_user_email) != null ? _a : "") ? customer == null ? void 0 : customer.customer_user_email : isEmailAddress((_b = customer == null ? void 0 : customer.customer_id) != null ? _b : "") ? customer == null ? void 0 : customer.customer_id : "";
+    try {
+      yield fetch(`${publicAPIUrl}/feedback/${finalCallId}/${action}`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          project_id: project_id != null ? project_id : "",
+          conversation_id: convId != null ? convId : "",
+          email,
+          comment
+        })
+      });
+    } catch (err) {
+      console.error("[AIChatPanel] Failed to send feedback:", err);
+    }
+  }), [currentConversation, ensureConversation, customer, project_id, publicAPIUrl]);
   const copyToClipboard = useCallback2((text, callId) => __async(void 0, null, function* () {
     try {
       const cleanText = text.replace(/<[^>]*>/g, "").replace(/\*\*(.*?)\*\*/g, "$1").replace(/\*(.*?)\*/g, "$1").replace(/#{1,6}\s/g, "").replace(/\[([^\]]+)\]\([^)]+\)/g, "$1");
       yield navigator.clipboard.writeText(cleanText);
       setCopiedCallId(callId);
       setTimeout(() => setCopiedCallId(null), 2e3);
+      yield interactionClicked(callId, "copy");
     } catch (err) {
       console.error("Failed to copy:", err);
     }
-  }), []);
+  }), [interactionClicked]);
+  const handleThumbsUp = useCallback2((callId) => __async(void 0, null, function* () {
+    console.log("[AIChatPanel] Thumbs up clicked:", callId);
+    setFeedbackCallId({ callId, type: "up" });
+    setTimeout(() => setFeedbackCallId(null), 2e3);
+    yield interactionClicked(callId, "thumbsup");
+    if (thumbsUpClick) {
+      thumbsUpClick(callId);
+    }
+  }), [thumbsUpClick, interactionClicked]);
+  const handleThumbsDown = useCallback2((callId) => __async(void 0, null, function* () {
+    console.log("[AIChatPanel] Thumbs down clicked:", callId);
+    setFeedbackCallId({ callId, type: "down" });
+    setTimeout(() => setFeedbackCallId(null), 2e3);
+    yield interactionClicked(callId, "thumbsdown");
+    if (thumbsDownClick) {
+      thumbsDownClick(callId);
+    }
+  }), [thumbsDownClick, interactionClicked]);
   const scrollToBottom = useCallback2(() => {
     var _a;
     if (scrollRAFRef.current) {
@@ -3864,7 +3969,9 @@ var AIChatPanel = ({
     console.log("AIChatPanel.continueChat called with:", promptText);
     setThinkingBlocks([]);
     setCurrentThinkingIndex(0);
+    setError(null);
     setUserHasScrolled(false);
+    setResponse("");
     if (!idle) {
       stop(lastController);
       setHistory((prevHistory) => __spreadProps(__spreadValues({}, prevHistory), {
@@ -3935,7 +4042,37 @@ ${followOnPrompt}`;
         // group_id from agent config
         convId,
         // Use the conversation ID from ensureConversation
-        newController
+        newController,
+        void 0,
+        // onComplete
+        (errorMsg) => {
+          console.log("[AIChatPanel] Error callback triggered:", errorMsg);
+          if (errorMsg.includes("413") || errorMsg.toLowerCase().includes("content too large")) {
+            setError({
+              message: "The context is too large to process. Please start a new conversation or reduce the amount of context.",
+              code: "413"
+            });
+          } else if (errorMsg.toLowerCase().includes("network error") || errorMsg.toLowerCase().includes("fetch")) {
+            setError({
+              message: "Network error. Please check your connection and try again.",
+              code: "NETWORK_ERROR"
+            });
+          } else {
+            setError({
+              message: errorMsg,
+              code: "UNKNOWN_ERROR"
+            });
+          }
+          setIsLoading(false);
+          if (promptKey) {
+            setHistory((prev) => __spreadProps(__spreadValues({}, prev), {
+              [promptKey]: {
+                content: `Error: ${errorMsg}`,
+                callId: lastCallId || ""
+              }
+            }));
+          }
+        }
       );
       setLastMessages(messagesAndHistory);
       if (convId && onConversationCreated) {
@@ -3961,7 +4098,8 @@ ${followOnPrompt}`;
     ensureConversation,
     dataWithExtras,
     scrollToBottom,
-    onConversationCreated
+    onConversationCreated,
+    setResponse
   ]);
   const handleSuggestionClick = useCallback2((question) => {
     continueChat(question);
@@ -3994,6 +4132,7 @@ ${followOnPrompt}`;
     setJustReset(true);
     setLastController(new AbortController());
     setUserHasScrolled(false);
+    setError(null);
     setTimeout(() => {
       var _a;
       setJustReset(false);
@@ -4021,6 +4160,7 @@ ${followOnPrompt}`;
     prevIdleRef.current = idle;
     if (wasStreaming && isNowIdle && !hasNotifiedCompletionRef.current) {
       hasNotifiedCompletionRef.current = true;
+      setIsLoading(false);
       const currentHistory = latestHistoryRef.current;
       const currentLastKey = lastKeyRef.current;
       const currentLastCallId = lastCallIdRef.current;
@@ -4102,6 +4242,37 @@ ${followOnPrompt}`;
       continueChat(initialPrompt);
     }
   }, [initialPrompt, continueChat]);
+  useEffect7(() => {
+    if (llmError && llmError.trim()) {
+      console.log("[AIChatPanel] Error detected:", llmError);
+      const errorMessage = llmError;
+      if (errorMessage.includes("413") || errorMessage.toLowerCase().includes("content too large")) {
+        setError({
+          message: "The context is too large to process. Please start a new conversation or reduce the amount of context.",
+          code: "413"
+        });
+      } else if (errorMessage.toLowerCase().includes("network error") || errorMessage.toLowerCase().includes("fetch")) {
+        setError({
+          message: "Network error. Please check your connection and try again.",
+          code: "NETWORK_ERROR"
+        });
+      } else {
+        setError({
+          message: errorMessage,
+          code: "UNKNOWN_ERROR"
+        });
+      }
+      setIsLoading(false);
+      if (lastKey) {
+        setHistory((prev) => __spreadProps(__spreadValues({}, prev), {
+          [lastKey]: {
+            content: `Error: ${errorMessage}`,
+            callId: lastCallId || ""
+          }
+        }));
+      }
+    }
+  }, [llmError, lastKey, lastCallId]);
   const CodeBlock = useCallback2((_a) => {
     var _b = _a, { node, inline, className, children } = _b, props = __objRest(_b, ["node", "inline", "className", "children"]);
     const match = /language-(\w+)/.exec(className || "");
@@ -4115,7 +4286,13 @@ ${followOnPrompt}`;
       String(children).replace(/\n$/, "")
     ) : /* @__PURE__ */ React11.createElement("code", __spreadValues({ className }, props), children);
   }, [prismStyle]);
-  const AgentSuggestionCard = useCallback2(({ agentId, agentName, reason }) => {
+  const AgentSuggestionCard = React11.memo(({ agentId, agentName, reason }) => {
+    useEffect7(() => {
+      const timer = setTimeout(() => {
+        scrollToBottom();
+      }, 100);
+      return () => clearTimeout(timer);
+    }, []);
     if (!agentId || !onAgentChange) return null;
     const isValidUUID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(agentId);
     const agentOption = agentOptions.find((opt) => opt.value === agentId);
@@ -4159,14 +4336,13 @@ ${followOnPrompt}`;
         onClick: () => {
           onAgentChange(agentId);
           setTimeout(() => {
-            var _a;
-            (_a = bottomRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "auto" });
-          }, 50);
+            scrollToBottom();
+          }, 100);
         }
       },
       "Switch"
     ));
-  }, [onAgentChange, agentOptions, currentAgentId]);
+  });
   const markdownComponents = useMemo2(() => ({
     code: CodeBlock,
     "agent-suggestion": (_a) => {
@@ -4209,8 +4385,16 @@ ${followOnPrompt}`;
     ))), /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-thinking__content" }, cleanContentForDisplay(currentBlock.content)));
   }, [thinkingBlocks, currentThinkingIndex, cleanContentForDisplay]);
   const panelClasses = ["ai-chat-panel", theme === "dark" ? "dark-theme" : ""].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React11.createElement("div", { className: panelClasses }, title && /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-panel__title" }, title), /* @__PURE__ */ React11.createElement(ScrollArea, { className: "ai-chat-panel__messages", ref: responseAreaRef }, initialMessage && /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-message ai-chat-message--assistant" }, /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-message__content" }, /* @__PURE__ */ React11.createElement(ReactMarkdown2, { remarkPlugins: [remarkGfm2], rehypePlugins: [rehypeRaw2] }, initialMessage))), Object.entries(history).map(([prompt, entry], index) => {
-    const isLastEntry = index === Object.keys(history).length - 1;
+  return /* @__PURE__ */ React11.createElement("div", { className: panelClasses }, title && /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-panel__title" }, title), error && /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-error-banner" }, /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-error-banner__icon" }, /* @__PURE__ */ React11.createElement(AlertCircleIcon, null)), /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-error-banner__content" }, /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-error-banner__message" }, error.message), error.code === "413" && /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-error-banner__hint" }, "Try starting a new conversation or reducing the amount of information being sent.")), /* @__PURE__ */ React11.createElement(
+    "button",
+    {
+      className: "ai-chat-error-banner__close",
+      onClick: () => setError(null),
+      "aria-label": "Dismiss error"
+    },
+    /* @__PURE__ */ React11.createElement(CloseIcon, null)
+  )), /* @__PURE__ */ React11.createElement(ScrollArea, { className: "ai-chat-panel__messages", ref: responseAreaRef }, initialMessage && /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-message ai-chat-message--assistant" }, /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-message__content" }, /* @__PURE__ */ React11.createElement(ReactMarkdown2, { remarkPlugins: [remarkGfm2], rehypePlugins: [rehypeRaw2] }, initialMessage))), Object.entries(history).map(([prompt, entry], index, entries) => {
+    const isLastEntry = index === entries.length - 1;
     const isSystemMessage = prompt.startsWith("__system__:");
     const { cleanedText } = processThinkingTags(entry.content);
     const processedContent = processActions(cleanedText);
@@ -4230,31 +4414,33 @@ ${followOnPrompt}`;
         components: markdownComponents
       },
       processedContent
-    ))), idle && !isLoading && /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-message__actions" }, /* @__PURE__ */ React11.createElement(Tooltip, { content: copiedCallId === entry.callId ? "Copied!" : "Copy" }, /* @__PURE__ */ React11.createElement(
-      Button,
+    ))), (!isLastEntry || !isLoading) && /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-message__actions" }, /* @__PURE__ */ React11.createElement(
+      "button",
       {
-        variant: "ghost",
-        size: "icon",
-        onClick: () => copyToClipboard(entry.content, entry.callId)
+        className: "ai-chat-action-button",
+        onClick: () => copyToClipboard(entry.content, entry.callId),
+        title: copiedCallId === entry.callId ? "Copied!" : "Copy"
       },
-      /* @__PURE__ */ React11.createElement(CopyIcon, null)
-    )), thumbsUpClick && /* @__PURE__ */ React11.createElement(Tooltip, { content: "Good response" }, /* @__PURE__ */ React11.createElement(
-      Button,
+      copiedCallId === entry.callId ? /* @__PURE__ */ React11.createElement("span", { style: { fontSize: "11px", fontWeight: 500 } }, "Copied!") : /* @__PURE__ */ React11.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ React11.createElement("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), /* @__PURE__ */ React11.createElement("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" }))
+    ), /* @__PURE__ */ React11.createElement(
+      "button",
       {
-        variant: "ghost",
-        size: "icon",
-        onClick: () => thumbsUpClick(entry.callId)
+        className: "ai-chat-action-button",
+        onClick: () => handleThumbsUp(entry.callId),
+        title: (feedbackCallId == null ? void 0 : feedbackCallId.callId) === entry.callId && (feedbackCallId == null ? void 0 : feedbackCallId.type) === "up" ? "Thanks!" : "Good response",
+        style: (feedbackCallId == null ? void 0 : feedbackCallId.callId) === entry.callId && (feedbackCallId == null ? void 0 : feedbackCallId.type) === "up" ? { color: "#22c55e" } : void 0
       },
-      /* @__PURE__ */ React11.createElement(ThumbsUpIcon, null)
-    )), thumbsDownClick && /* @__PURE__ */ React11.createElement(Tooltip, { content: "Poor response" }, /* @__PURE__ */ React11.createElement(
-      Button,
+      (feedbackCallId == null ? void 0 : feedbackCallId.callId) === entry.callId && (feedbackCallId == null ? void 0 : feedbackCallId.type) === "up" ? /* @__PURE__ */ React11.createElement("span", { style: { fontSize: "11px", fontWeight: 500 } }, "Thanks!") : /* @__PURE__ */ React11.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ React11.createElement("path", { d: "M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" }))
+    ), /* @__PURE__ */ React11.createElement(
+      "button",
       {
-        variant: "ghost",
-        size: "icon",
-        onClick: () => thumbsDownClick(entry.callId)
+        className: "ai-chat-action-button",
+        onClick: () => handleThumbsDown(entry.callId),
+        title: (feedbackCallId == null ? void 0 : feedbackCallId.callId) === entry.callId && (feedbackCallId == null ? void 0 : feedbackCallId.type) === "down" ? "Thanks!" : "Poor response",
+        style: (feedbackCallId == null ? void 0 : feedbackCallId.callId) === entry.callId && (feedbackCallId == null ? void 0 : feedbackCallId.type) === "down" ? { color: "#ef4444" } : void 0
       },
-      /* @__PURE__ */ React11.createElement(ThumbsDownIcon, null)
-    )))));
+      (feedbackCallId == null ? void 0 : feedbackCallId.callId) === entry.callId && (feedbackCallId == null ? void 0 : feedbackCallId.type) === "down" ? /* @__PURE__ */ React11.createElement("span", { style: { fontSize: "11px", fontWeight: 500 } }, "Thanks!") : /* @__PURE__ */ React11.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "ai-chat-icon-sm" }, /* @__PURE__ */ React11.createElement("path", { d: "M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17" }))
+    ))));
   }), followOnQuestionsState.length > 0 && idle && !isLoading && /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-suggestions" }, followOnQuestionsState.map((question, index) => /* @__PURE__ */ React11.createElement(
     Button,
     {
@@ -4506,7 +4692,7 @@ var PlusIcon = () => /* @__PURE__ */ React12.createElement("svg", { width: "16",
 var ChevronLeftIcon = () => /* @__PURE__ */ React12.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement("path", { d: "M10 12L6 8l4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }));
 var ChevronRightIcon = () => /* @__PURE__ */ React12.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement("path", { d: "M6 12l4-4-4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }));
 var MessageIcon = () => /* @__PURE__ */ React12.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement("path", { d: "M14 10a1.333 1.333 0 0 1-1.333 1.333H4L2 14V3.333A1.333 1.333 0 0 1 3.333 2h9.334A1.333 1.333 0 0 1 14 3.333V10Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }));
-var CloseIcon = () => /* @__PURE__ */ React12.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement("path", { d: "M9 3L3 9M3 3l6 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }));
+var CloseIcon2 = () => /* @__PURE__ */ React12.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement("path", { d: "M9 3L3 9M3 3l6 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }));
 var LoadingDotIcon = () => /* @__PURE__ */ React12.createElement("span", { className: "ai-agent-panel__loading-dot" });
 var SidebarIcon = () => /* @__PURE__ */ React12.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement("rect", { x: "2", y: "2", width: "12", height: "12", rx: "2", stroke: "currentColor", strokeWidth: "1.5" }), /* @__PURE__ */ React12.createElement("path", { d: "M6 2v12", stroke: "currentColor", strokeWidth: "1.5" }));
 var SparkleIcon = () => /* @__PURE__ */ React12.createElement("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement("path", { d: "M8 1v3M8 12v3M3 8H0M16 8h-3M12.95 3.05l-2.12 2.12M5.17 10.83l-2.12 2.12M12.95 12.95l-2.12-2.12M5.17 5.17L3.05 3.05", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }), /* @__PURE__ */ React12.createElement("circle", { cx: "8", cy: "8", r: "2", fill: "currentColor" }));
@@ -5790,7 +5976,7 @@ var AIAgentPanel = React12.forwardRef(({
           onClick: (e) => handleCloseConversation(activeConv.conversationId, e),
           title: "Close conversation"
         },
-        /* @__PURE__ */ React12.createElement(CloseIcon, null)
+        /* @__PURE__ */ React12.createElement(CloseIcon2, null)
       )
     ))), conversationsLoading ? /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__loading" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__loading-spinner" }), /* @__PURE__ */ React12.createElement("span", null, "Loading conversations...")) : conversationsError ? /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__empty" }, /* @__PURE__ */ React12.createElement("p", null, "Error: ", conversationsError), /* @__PURE__ */ React12.createElement(Button, { variant: "secondary", size: "sm", onClick: handleRefreshConversations }, "Retry")) : groupedConversations.length === 0 && activeConversationsList.length === 0 ? /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__empty" }, /* @__PURE__ */ React12.createElement(MessageIcon, null), /* @__PURE__ */ React12.createElement("p", null, "No conversations yet"), /* @__PURE__ */ React12.createElement("p", { className: "ai-agent-panel__empty-hint" }, "Start chatting to create your first conversation")) : /* @__PURE__ */ React12.createElement(React12.Fragment, null, activeConversationsList.length > 0 && groupedConversations.some((g) => g.count > 0) && /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__group-divider" }), groupedConversations.map((group) => /* @__PURE__ */ React12.createElement("div", { key: group.label, className: "ai-agent-panel__group" }, /* @__PURE__ */ React12.createElement(
       "div",