@hef2024/llmasaservice-ui 0.16.8 → 0.16.10

package/dist/index.js

@@ -521,10 +521,7 @@ var ChatPanel = ({
       { key: "--userLanguage", data: browserInfo == null ? void 0 : browserInfo.userLanguage }
     ];
   };
-  let publicAPIUrl = "https://api.llmasaservice.io";
-  if (window.location.hostname === "localhost" || window.location.hostname === "dev.llmasaservice.io") {
-    publicAPIUrl = "https://8ftw8droff.execute-api.us-east-1.amazonaws.com/dev";
-  }
+  const publicAPIUrl = "https://api.llmasaservice.io";
   const [toolList, setToolList] = (0, import_react3.useState)([]);
   const [toolsLoading, setToolsLoading] = (0, import_react3.useState)(false);
   const [toolsFetchError, setToolsFetchError] = (0, import_react3.useState)(false);
@@ -2894,7 +2891,7 @@ var AgentPanel = ({
   (0, import_react4.useEffect)(() => {
     const fetchAgentData = () => __async(void 0, null, function* () {
       try {
-        const fetchUrl = url.endsWith("dev") ? `https://8ftw8droff.execute-api.us-east-1.amazonaws.com/dev/agents/${agent}` : `https://api.llmasaservice.io/agents/${agent}`;
+        const fetchUrl = `https://api.llmasaservice.io/agents/${agent}`;
         const response = yield fetch(fetchUrl, {
           method: "GET",
           headers: {
@@ -3646,8 +3643,10 @@ var AIChatPanel = ({
   contextSections = [],
   totalContextTokens = 0,
   maxContextTokens = 8e3,
-  enableContextDetailView = false
+  enableContextDetailView = false,
+  onConversationCreated
 }) => {
+  const publicAPIUrl = "https://api.llmasaservice.io";
   const [lastController, setLastController] = (0, import_react11.useState)(new AbortController());
   const [lastMessages, setLastMessages] = (0, import_react11.useState)([]);
   const [history, setHistory] = (0, import_react11.useState)(initialHistory);
@@ -3670,6 +3669,24 @@ var AIChatPanel = ({
   const prevIdleRef = (0, import_react11.useRef)(true);
   const hasNotifiedCompletionRef = (0, import_react11.useRef)(true);
   const latestHistoryRef = (0, import_react11.useRef)(initialHistory);
+  (0, import_react11.useEffect)(() => {
+    if (!initialHistory) return;
+    setHistory((prev) => {
+      const currentKeys = Object.keys(prev);
+      const newEntries = {};
+      let hasNewEntries = false;
+      for (const [key, value] of Object.entries(initialHistory)) {
+        if (!currentKeys.includes(key)) {
+          newEntries[key] = value;
+          hasNewEntries = true;
+        }
+      }
+      if (hasNewEntries) {
+        return __spreadValues(__spreadValues({}, prev), newEntries);
+      }
+      return prev;
+    });
+  }, [initialHistory]);
   const llmResult = (0, import_llmasaservice_client2.useLLM)(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
     project_id,
     customer
@@ -3709,6 +3726,60 @@ var AIChatPanel = ({
       userLanguage: navigator.language
     };
   }, []);
+  const ensureConversation = (0, import_react11.useCallback)(() => {
+    var _a, _b;
+    console.log("ensureConversation - called with:", {
+      currentConversation,
+      createConversationOnFirstChat,
+      project_id,
+      publicAPIUrl
+    });
+    if ((!currentConversation || currentConversation === "") && createConversationOnFirstChat) {
+      if (!project_id) {
+        console.error("ensureConversation - Cannot create conversation without project_id");
+        return Promise.resolve("");
+      }
+      const requestBody = {
+        project_id,
+        agentId: agent,
+        customerId: (_a = customer == null ? void 0 : customer.customer_id) != null ? _a : null,
+        customerEmail: (_b = customer == null ? void 0 : customer.customer_user_email) != null ? _b : null,
+        timezone: browserInfo == null ? void 0 : browserInfo.userTimezone,
+        language: browserInfo == null ? void 0 : browserInfo.userLanguage
+      };
+      console.log("ensureConversation - Creating conversation with:", requestBody);
+      console.log("ensureConversation - API URL:", `${publicAPIUrl}/conversations`);
+      return fetch(`${publicAPIUrl}/conversations`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(requestBody)
+      }).then((res) => __async(void 0, null, function* () {
+        if (!res.ok) {
+          const errorText = yield res.text();
+          throw new Error(
+            `HTTP error! status: ${res.status}, message: ${errorText}`
+          );
+        }
+        return res.json();
+      })).then((newConvo) => {
+        console.log("ensureConversation - API response:", newConvo);
+        if (newConvo == null ? void 0 : newConvo.id) {
+          console.log("ensureConversation - New conversation ID:", newConvo.id);
+          setCurrentConversation(newConvo.id);
+          return newConvo.id;
+        }
+        console.warn("ensureConversation - No ID in response");
+        return "";
+      }).catch((error) => {
+        console.error("Error creating new conversation", error);
+        return "";
+      });
+    }
+    console.log("ensureConversation - using existing conversation:", currentConversation);
+    return Promise.resolve(currentConversation);
+  }, [currentConversation, createConversationOnFirstChat, publicAPIUrl, project_id, agent, customer, browserInfo]);
   const dataWithExtras = (0, import_react11.useCallback)(() => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     return [
@@ -3822,6 +3893,7 @@ var AIChatPanel = ({
     lastScrollTimeRef.current = now;
   }, []);
   const continueChat = (0, import_react11.useCallback)((promptText) => {
+    console.log("AIChatPanel.continueChat called with:", promptText);
     setThinkingBlocks([]);
     setCurrentThinkingIndex(0);
     setUserHasScrolled(false);
@@ -3841,58 +3913,68 @@ var AIChatPanel = ({
     const promptToSend = promptText;
     if (!promptToSend || !promptToSend.trim()) return;
     setIsLoading(true);
-    const messagesAndHistory = [];
-    Object.entries(history).forEach(([historyPrompt, historyEntry]) => {
-      let promptForHistory = historyPrompt;
-      const isoTimestampRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z:/;
-      if (isoTimestampRegex.test(historyPrompt)) {
-        const colonIndex = historyPrompt.indexOf(":", 19);
-        promptForHistory = historyPrompt.substring(colonIndex + 1);
-      } else if (/^\d+:/.test(historyPrompt)) {
-        const colonIndex = historyPrompt.indexOf(":");
-        promptForHistory = historyPrompt.substring(colonIndex + 1);
+    console.log("AIChatPanel.continueChat - about to call ensureConversation");
+    ensureConversation().then((convId) => {
+      console.log("AIChatPanel.continueChat - ensureConversation resolved with:", convId);
+      const messagesAndHistory = [];
+      Object.entries(history).forEach(([historyPrompt, historyEntry]) => {
+        let promptForHistory = historyPrompt;
+        const isoTimestampRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z:/;
+        if (isoTimestampRegex.test(historyPrompt)) {
+          const colonIndex = historyPrompt.indexOf(":", 19);
+          promptForHistory = historyPrompt.substring(colonIndex + 1);
+        } else if (/^\d+:/.test(historyPrompt)) {
+          const colonIndex = historyPrompt.indexOf(":");
+          promptForHistory = historyPrompt.substring(colonIndex + 1);
+        }
+        messagesAndHistory.push({ role: "user", content: promptForHistory });
+        messagesAndHistory.push({ role: "assistant", content: historyEntry.content });
+      });
+      const timestamp = (/* @__PURE__ */ new Date()).toISOString();
+      const promptKey = `${timestamp}:${promptToSend.trim()}`;
+      setHistory((prevHistory) => __spreadProps(__spreadValues({}, prevHistory), {
+        [promptKey]: { content: "", callId: "" }
+      }));
+      let fullPromptToSend = promptToSend.trim();
+      if (Object.keys(history).length === 0 && promptTemplate) {
+        fullPromptToSend = promptTemplate.replace("{{prompt}}", fullPromptToSend);
       }
-      messagesAndHistory.push({ role: "user", content: promptForHistory });
-      messagesAndHistory.push({ role: "assistant", content: historyEntry.content });
-    });
-    const timestamp = (/* @__PURE__ */ new Date()).toISOString();
-    const promptKey = `${timestamp}:${promptToSend.trim()}`;
-    setHistory((prevHistory) => __spreadProps(__spreadValues({}, prevHistory), {
-      [promptKey]: { content: "", callId: "" }
-    }));
-    let fullPromptToSend = promptToSend.trim();
-    if (Object.keys(history).length === 0 && promptTemplate) {
-      fullPromptToSend = promptTemplate.replace("{{prompt}}", fullPromptToSend);
-    }
-    if (followOnPrompt) {
-      fullPromptToSend += `
+      if (followOnPrompt) {
+        fullPromptToSend += `
 
 ${followOnPrompt}`;
-    }
-    const newController = new AbortController();
-    setLastController(newController);
-    send(
-      fullPromptToSend,
-      messagesAndHistory,
-      [
-        ...dataWithExtras(),
-        { key: "--messages", data: messagesAndHistory.length.toString() }
-      ],
-      true,
-      // stream
-      true,
-      // includeHistory
-      service,
-      // group_id from agent config
-      currentConversation,
-      newController
-    );
-    setLastPrompt(promptToSend.trim());
-    setLastMessages(messagesAndHistory);
-    setLastKey(promptKey);
-    setTimeout(() => {
-      scrollToBottom();
-    }, 0);
+      }
+      const newController = new AbortController();
+      setLastController(newController);
+      send(
+        fullPromptToSend,
+        messagesAndHistory,
+        [
+          ...dataWithExtras(),
+          { key: "--messages", data: messagesAndHistory.length.toString() }
+        ],
+        true,
+        // stream
+        true,
+        // includeHistory
+        service,
+        // group_id from agent config
+        convId,
+        // Use the conversation ID from ensureConversation
+        newController
+      );
+      setLastPrompt(promptToSend.trim());
+      setLastMessages(messagesAndHistory);
+      setLastKey(promptKey);
+      if (convId && onConversationCreated) {
+        setTimeout(() => {
+          onConversationCreated(convId);
+        }, 100);
+      }
+      setTimeout(() => {
+        scrollToBottom();
+      }, 0);
+    });
   }, [
     idle,
     stop,
@@ -3907,9 +3989,10 @@ ${followOnPrompt}`;
     followOnPrompt,
     send,
     service,
-    currentConversation,
+    ensureConversation,
     dataWithExtras,
-    scrollToBottom
+    scrollToBottom,
+    onConversationCreated
   ]);
   const handleSuggestionClick = (0, import_react11.useCallback)((question) => {
     continueChat(question);
@@ -3951,18 +4034,18 @@ ${followOnPrompt}`;
   (0, import_react11.useEffect)(() => {
     if (!response || !lastKey || justReset) return;
     const { cleanedText, blocks } = processThinkingTags(response);
-    const processedContent = processActions(cleanedText);
     setThinkingBlocks(blocks);
     setHistory((prev) => {
       const newHistory = __spreadValues({}, prev);
       newHistory[lastKey] = {
-        content: processedContent,
+        content: cleanedText,
+        // Store raw content, not processed
         callId: lastCallId || ""
       };
       latestHistoryRef.current = newHistory;
       return newHistory;
     });
-  }, [response, lastKey, lastCallId, processThinkingTags, processActions, justReset]);
+  }, [response, lastKey, lastCallId, processThinkingTags, justReset]);
   (0, import_react11.useEffect)(() => {
     const wasStreaming = !prevIdleRef.current;
     const isNowIdle = idle;
@@ -4046,38 +4129,49 @@ ${followOnPrompt}`;
   }, []);
   (0, import_react11.useEffect)(() => {
     const hasLoadedHistory = initialHistory && Object.keys(initialHistory).length > 0;
+    if (!project_id) {
+      return;
+    }
     if (initialPrompt && initialPrompt !== "" && initialPrompt !== lastPrompt && !hasLoadedHistory) {
       setIsLoading(true);
       setThinkingBlocks([]);
       setCurrentThinkingIndex(0);
       setUserHasScrolled(false);
-      const controller = new AbortController();
-      setLastController(controller);
-      const timestamp = (/* @__PURE__ */ new Date()).toISOString();
-      const promptKey = `${timestamp}:${initialPrompt}`;
-      setHistory({ [promptKey]: { content: "", callId: "" } });
-      let fullPrompt = initialPrompt;
-      if (promptTemplate) {
-        fullPrompt = promptTemplate.replace("{{prompt}}", initialPrompt);
-      }
-      send(
-        fullPrompt,
-        [],
-        [
-          ...dataWithExtras(),
-          { key: "--messages", data: "0" }
-        ],
-        true,
-        true,
-        service,
-        currentConversation,
-        controller
-      );
-      setLastPrompt(initialPrompt);
-      setLastMessages([]);
-      setLastKey(promptKey);
+      ensureConversation().then((convId) => {
+        const controller = new AbortController();
+        setLastController(controller);
+        const timestamp = (/* @__PURE__ */ new Date()).toISOString();
+        const promptKey = `${timestamp}:${initialPrompt}`;
+        setHistory({ [promptKey]: { content: "", callId: "" } });
+        let fullPrompt = initialPrompt;
+        if (promptTemplate) {
+          fullPrompt = promptTemplate.replace("{{prompt}}", initialPrompt);
+        }
+        send(
+          fullPrompt,
+          [],
+          [
+            ...dataWithExtras(),
+            { key: "--messages", data: "0" }
+          ],
+          true,
+          true,
+          service,
+          convId,
+          // Use conversation ID from ensureConversation
+          controller
+        );
+        setLastPrompt(initialPrompt);
+        setLastMessages([]);
+        setLastKey(promptKey);
+        if (convId && onConversationCreated) {
+          setTimeout(() => {
+            onConversationCreated(convId);
+          }, 100);
+        }
+      });
     }
-  }, [initialPrompt, initialHistory]);
+  }, [initialPrompt, initialHistory, ensureConversation, promptTemplate, send, dataWithExtras, service, lastPrompt, project_id, onConversationCreated]);
   const CodeBlock = (0, import_react11.useCallback)((_a) => {
     var _b = _a, { node, inline, className, children } = _b, props = __objRest(_b, ["node", "inline", "className", "children"]);
     const match = /language-(\w+)/.exec(className || "");
@@ -4132,7 +4226,13 @@ ${followOnPrompt}`;
         variant: "default",
         size: "sm",
         className: "ai-chat-agent-suggestion__button",
-        onClick: () => onAgentChange(agentId)
+        onClick: () => {
+          onAgentChange(agentId);
+          setTimeout(() => {
+            var _a;
+            (_a = bottomRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "auto" });
+          }, 50);
+        }
       },
       "Switch"
     ));
@@ -4181,15 +4281,17 @@ ${followOnPrompt}`;
   const panelClasses = ["ai-chat-panel", theme === "dark" ? "dark-theme" : ""].filter(Boolean).join(" ");
   return /* @__PURE__ */ import_react11.default.createElement("div", { className: panelClasses }, title && /* @__PURE__ */ import_react11.default.createElement("div", { className: "ai-chat-panel__title" }, title), /* @__PURE__ */ import_react11.default.createElement(ScrollArea, { className: "ai-chat-panel__messages", ref: responseAreaRef }, initialMessage && /* @__PURE__ */ import_react11.default.createElement("div", { className: "ai-chat-message ai-chat-message--assistant" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "ai-chat-message__content" }, /* @__PURE__ */ import_react11.default.createElement(import_react_markdown2.default, { remarkPlugins: [import_remark_gfm2.default], rehypePlugins: [import_rehype_raw2.default] }, initialMessage))), Object.entries(history).map(([prompt, entry], index) => {
     const isLastEntry = index === Object.keys(history).length - 1;
+    const isSystemMessage = prompt.startsWith("__system__:");
     const { cleanedText } = processThinkingTags(entry.content);
-    return /* @__PURE__ */ import_react11.default.createElement("div", { key: index, className: "ai-chat-entry" }, !(hideInitialPrompt && index === 0) && /* @__PURE__ */ import_react11.default.createElement("div", { className: "ai-chat-message ai-chat-message--user" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "ai-chat-message__content" }, formatPromptForDisplay(prompt))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "ai-chat-message ai-chat-message--assistant" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "ai-chat-message__content" }, isLastEntry && (isLoading || !idle) && !justReset ? /* @__PURE__ */ import_react11.default.createElement("div", { className: "ai-chat-streaming" }, thinkingBlocks.length > 0 && renderThinkingBlocks(), cleanedText ? /* @__PURE__ */ import_react11.default.createElement(
+    const processedContent = processActions(cleanedText);
+    return /* @__PURE__ */ import_react11.default.createElement("div", { key: index, className: "ai-chat-entry" }, !(hideInitialPrompt && index === 0) && !isSystemMessage && /* @__PURE__ */ import_react11.default.createElement("div", { className: "ai-chat-message ai-chat-message--user" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "ai-chat-message__content" }, formatPromptForDisplay(prompt))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "ai-chat-message ai-chat-message--assistant" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "ai-chat-message__content" }, isLastEntry && (isLoading || !idle) && !justReset ? /* @__PURE__ */ import_react11.default.createElement("div", { className: "ai-chat-streaming" }, thinkingBlocks.length > 0 && renderThinkingBlocks(), processedContent ? /* @__PURE__ */ import_react11.default.createElement(
       import_react_markdown2.default,
       {
         remarkPlugins: [import_remark_gfm2.default],
         rehypePlugins: [import_rehype_raw2.default],
         components: markdownComponents
       },
-      cleanedText
+      processedContent
     ) : /* @__PURE__ */ import_react11.default.createElement("div", { className: "ai-chat-loading" }, /* @__PURE__ */ import_react11.default.createElement("span", null, "Thinking"), /* @__PURE__ */ import_react11.default.createElement("span", { className: "ai-chat-loading__dots" }, /* @__PURE__ */ import_react11.default.createElement("span", { className: "ai-chat-loading__dot" }), /* @__PURE__ */ import_react11.default.createElement("span", { className: "ai-chat-loading__dot" }), /* @__PURE__ */ import_react11.default.createElement("span", { className: "ai-chat-loading__dot" })))) : /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, isLastEntry && thinkingBlocks.length > 0 && renderThinkingBlocks(), /* @__PURE__ */ import_react11.default.createElement(
       import_react_markdown2.default,
       {
@@ -4197,7 +4299,7 @@ ${followOnPrompt}`;
         rehypePlugins: [import_rehype_raw2.default],
         components: markdownComponents
       },
-      cleanedText
+      processedContent
     ))), idle && !isLoading && /* @__PURE__ */ import_react11.default.createElement("div", { className: "ai-chat-message__actions" }, /* @__PURE__ */ import_react11.default.createElement(Tooltip, { content: copiedCallId === entry.callId ? "Copied!" : "Copy" }, /* @__PURE__ */ import_react11.default.createElement(
       Button,
       {
@@ -4272,8 +4374,7 @@ var AIChatPanel_default = import_react11.default.memo(AIChatPanel);
 // src/hooks/useAgentRegistry.ts
 var import_react12 = require("react");
 var resolveApiEndpoint = (baseUrl, agentId) => {
-  const apiRoot = baseUrl.endsWith("dev") ? "https://8ftw8droff.execute-api.us-east-1.amazonaws.com/dev" : "https://api.llmasaservice.io";
-  return `${apiRoot}/agents/${agentId}`;
+  return `https://api.llmasaservice.io/agents/${agentId}`;
 };
 function useAgentRegistry(agentIds, options = {}) {
   const { url = "https://chat.llmasaservice.io", autoFetch = true, localOverrides = {} } = options;
@@ -4478,6 +4579,7 @@ var MessageIcon = () => /* @__PURE__ */ import_react13.default.createElement("sv
 var CloseIcon = () => /* @__PURE__ */ import_react13.default.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react13.default.createElement("path", { d: "M9 3L3 9M3 3l6 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }));
 var LoadingDotIcon = () => /* @__PURE__ */ import_react13.default.createElement("span", { className: "ai-agent-panel__loading-dot" });
 var SidebarIcon = () => /* @__PURE__ */ import_react13.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react13.default.createElement("rect", { x: "2", y: "2", width: "12", height: "12", rx: "2", stroke: "currentColor", strokeWidth: "1.5" }), /* @__PURE__ */ import_react13.default.createElement("path", { d: "M6 2v12", stroke: "currentColor", strokeWidth: "1.5" }));
+var SparkleIcon = () => /* @__PURE__ */ import_react13.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react13.default.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__ */ import_react13.default.createElement("circle", { cx: "8", cy: "8", r: "2", fill: "currentColor" }));
 var normalizeConversationListPayload = (payload) => {
   if (!payload) return [];
   const conversations = Array.isArray(payload) ? payload : payload.conversations || [];
@@ -4595,7 +4697,8 @@ var ChatPanelWrapper = ({
   contextSections,
   totalContextTokens,
   maxContextTokens,
-  enableContextDetailView
+  enableContextDetailView,
+  onConversationCreated
 }) => {
   var _a, _b;
   const convAgentProfile = getAgent(activeConv.agentId);
@@ -4613,6 +4716,12 @@ var ChatPanelWrapper = ({
     },
     [handleLoadingChange, activeConv.conversationId]
   );
+  const conversationCreatedCallback = (0, import_react13.useCallback)(
+    (realConversationId) => {
+      onConversationCreated(activeConv.conversationId, realConversationId);
+    },
+    [onConversationCreated, activeConv.conversationId]
+  );
   const agentStatus = convAgentProfile == null ? void 0 : convAgentProfile.status;
   const promptsString = (convAgentMetadata == null ? void 0 : convAgentMetadata.displayFollowOnPrompts) || "";
   let effectiveFollowOnQuestions;
@@ -4671,7 +4780,8 @@ var ChatPanelWrapper = ({
         contextSections,
         totalContextTokens,
         maxContextTokens,
-        enableContextDetailView
+        enableContextDetailView,
+        onConversationCreated: conversationCreatedCallback
       }
     )
   );
@@ -4711,9 +4821,10 @@ var AIAgentPanel = ({
   actions = [],
   followOnQuestions = [],
   followOnPrompt = "",
-  historyListLimit = 50
+  historyListLimit = 50,
+  showConversationHistory = true
 }) => {
-  var _a, _b;
+  var _a, _b, _c, _d;
   const [isCollapsed, setIsCollapsed] = (0, import_react13.useState)(defaultCollapsed);
   const [isHistoryCollapsed, setIsHistoryCollapsed] = (0, import_react13.useState)(() => {
     if (typeof window !== "undefined") {
@@ -4738,6 +4849,7 @@ var AIAgentPanel = ({
   const [showSearch, setShowSearch] = (0, import_react13.useState)(false);
   const [showHandoffDialog, setShowHandoffDialog] = (0, import_react13.useState)(false);
   const [suggestedAgent, setSuggestedAgent] = (0, import_react13.useState)(null);
+  const [handoffSource, setHandoffSource] = (0, import_react13.useState)("agent");
   const panelRef = (0, import_react13.useRef)(null);
   const resizeRef = (0, import_react13.useRef)(null);
   const { agentIds, localOverrides } = (0, import_react13.useMemo)(() => {
@@ -4793,6 +4905,10 @@ var AIAgentPanel = ({
   activeConversationsRef.current = activeConversations;
   const currentConversationIdRef = (0, import_react13.useRef)(currentConversationId);
   currentConversationIdRef.current = currentConversationId;
+  const [showContextNotification, setShowContextNotification] = (0, import_react13.useState)(false);
+  const prevContextRef = (0, import_react13.useRef)(null);
+  const contextNotificationTimeoutRef = (0, import_react13.useRef)(null);
+  const prevDefaultAgentRef = (0, import_react13.useRef)(null);
   const fetchFirstPrompt = (0, import_react13.useCallback)((conversationId, agentIdForConversation) => __async(void 0, null, function* () {
     var _a2, _b2;
     if (checkedPromptsRef.current.has(conversationId)) {
@@ -4893,6 +5009,9 @@ var AIAgentPanel = ({
     fetchInProgressRef.current = true;
     setConversationsLoading(true);
     setConversationsError(null);
+    console.log("projectId", projectId);
+    console.log("customerId", customerId);
+    console.log("apiKey", apiKey);
     try {
       console.log("fetchConversations - customerId:", customerId);
       const url2 = `https://api.llmasaservice.io/conversations?customer_id=${customerId}`;
@@ -5012,6 +5131,8 @@ var AIAgentPanel = ({
         const next = new Map(prev);
         next.set(conversationId, {
           conversationId,
+          stableKey: conversationId,
+          // Use real ID as stable key when loading from API
           agentId: agentIdToUse,
           history,
           isLoading: false,
@@ -5035,6 +5156,7 @@ var AIAgentPanel = ({
   }, [currentAgentId, fetchConversations]);
   (0, import_react13.useEffect)(() => {
     var _a2;
+    if (!showConversationHistory) return;
     if (!agentsLoading && currentAgentId && apiKey) {
       const agentProfile = getAgent(currentAgentId);
       const projectId = (_a2 = agentProfile == null ? void 0 : agentProfile.metadata) == null ? void 0 : _a2.projectId;
@@ -5043,13 +5165,15 @@ var AIAgentPanel = ({
         fetchConversations(currentAgentId);
       }
     }
-  }, [agentsLoading, currentAgentId, apiKey, fetchConversations, getAgent]);
+  }, [agentsLoading, currentAgentId, apiKey, fetchConversations, getAgent, showConversationHistory]);
   const handleNewConversation = (0, import_react13.useCallback)(() => {
     const tempId = `new-${Date.now()}`;
     setActiveConversations((prev) => {
       const next = new Map(prev);
       next.set(tempId, {
         conversationId: tempId,
+        stableKey: tempId,
+        // Stable key never changes even when conversationId updates
         agentId: currentAgentId,
         history: {},
         isLoading: false,
@@ -5199,6 +5323,80 @@ var AIAgentPanel = ({
       totalTokens
     };
   }, [context, sharedContextSections, pageContextSections, contextDataSources]);
+  (0, import_react13.useEffect)(() => {
+    const contextString = JSON.stringify(mergedContext.sections.map((s) => ({ id: s.id, data: s.data })));
+    if (prevContextRef.current === null) {
+      prevContextRef.current = contextString;
+      return;
+    }
+    if (prevContextRef.current !== contextString) {
+      console.log("AIAgentPanel - Context changed, showing notification");
+      prevContextRef.current = contextString;
+      if (contextNotificationTimeoutRef.current) {
+        clearTimeout(contextNotificationTimeoutRef.current);
+        contextNotificationTimeoutRef.current = null;
+      }
+      setShowContextNotification(true);
+      contextNotificationTimeoutRef.current = setTimeout(() => {
+        setShowContextNotification(false);
+        contextNotificationTimeoutRef.current = null;
+      }, 3e3);
+    }
+  }, [mergedContext.sections]);
+  (0, import_react13.useEffect)(() => {
+    return () => {
+      if (contextNotificationTimeoutRef.current) {
+        clearTimeout(contextNotificationTimeoutRef.current);
+      }
+    };
+  }, []);
+  (0, import_react13.useEffect)(() => {
+    var _a2, _b2;
+    let foundDefaultAgent = null;
+    for (const section of pageContextSections) {
+      if (section.data && typeof section.data === "object" && "defaultAgent" in section.data) {
+        const defaultAgentValue = section.data.defaultAgent;
+        if (typeof defaultAgentValue === "string" && defaultAgentValue) {
+          foundDefaultAgent = defaultAgentValue;
+          break;
+        }
+      }
+    }
+    if (!foundDefaultAgent || foundDefaultAgent === prevDefaultAgentRef.current) {
+      return;
+    }
+    if (foundDefaultAgent === currentAgentId) {
+      prevDefaultAgentRef.current = foundDefaultAgent;
+      return;
+    }
+    const isAvailable = agentIds.includes(foundDefaultAgent);
+    const agentProfile = getAgent(foundDefaultAgent);
+    const isReady = (agentProfile == null ? void 0 : agentProfile.status) === "ready";
+    if (isAvailable && isReady && currentConversationIdRef.current) {
+      const agentName = ((_a2 = agentProfile == null ? void 0 : agentProfile.metadata) == null ? void 0 : _a2.displayTitle) || ((_b2 = localOverrides[foundDefaultAgent]) == null ? void 0 : _b2.localName) || foundDefaultAgent;
+      const suggestionMessage = `This page recommends a different agent for better assistance.
+
+[SUGGEST_AGENT:${foundDefaultAgent}|${agentName}|Recommended for this page]`;
+      const syntheticKey = `__system__:page_suggestion_${foundDefaultAgent}_${Date.now()}`;
+      prevDefaultAgentRef.current = foundDefaultAgent;
+      setActiveConversations((prev) => {
+        const conversationId = currentConversationIdRef.current;
+        if (!conversationId) return prev;
+        const existing = prev.get(conversationId);
+        if (!existing) return prev;
+        const next = new Map(prev);
+        next.set(conversationId, __spreadProps(__spreadValues({}, existing), {
+          history: __spreadProps(__spreadValues({}, existing.history), {
+            [syntheticKey]: {
+              content: suggestionMessage,
+              callId: `page-suggestion-${Date.now()}`
+            }
+          })
+        }));
+        return next;
+      });
+    }
+  }, [pageContextSections, currentAgentId, agentIds, getAgent, localOverrides]);
   const chatPanelData = (0, import_react13.useMemo)(() => {
     const contextData = mergedContext.sections.map((section) => ({
       key: section.id,
@@ -5301,6 +5499,7 @@ var AIAgentPanel = ({
           const suggestedId = handoffMatch[1];
           if (suggestedId && suggestedId !== currentAgentId && agents.includes(suggestedId)) {
             setSuggestedAgent(suggestedId);
+            setHandoffSource("agent");
             setShowHandoffDialog(true);
           }
         }
@@ -5337,11 +5536,34 @@ var AIAgentPanel = ({
     }
     setShowHandoffDialog(false);
     setSuggestedAgent(null);
+    setHandoffSource("agent");
   }, [suggestedAgent, handleAgentSwitch]);
   const handleHandoffCancel = (0, import_react13.useCallback)(() => {
     setShowHandoffDialog(false);
     setSuggestedAgent(null);
+    setHandoffSource("agent");
   }, []);
+  const handleConversationCreated = (0, import_react13.useCallback)((tempId, realId) => {
+    console.log("Conversation created:", tempId, "->", realId);
+    setActiveConversations((prev) => {
+      const existing = prev.get(tempId);
+      if (existing) {
+        const next = new Map(prev);
+        next.delete(tempId);
+        next.set(realId, __spreadProps(__spreadValues({}, existing), {
+          conversationId: realId
+        }));
+        return next;
+      }
+      return prev;
+    });
+    if (currentConversationIdRef.current === tempId) {
+      setCurrentConversationId(realId);
+      if (onConversationChange) {
+        onConversationChange(realId);
+      }
+    }
+  }, [onConversationChange]);
   const toggleCollapse = (0, import_react13.useCallback)(() => {
     setIsCollapsed((prev) => !prev);
   }, []);
@@ -5357,7 +5579,8 @@ var AIAgentPanel = ({
     theme === "dark" ? "dark-theme" : "",
     isCollapsed ? "ai-agent-panel--collapsed" : "",
     position === "left" ? "ai-agent-panel--left" : "ai-agent-panel--right",
-    sidebarPosition === "right" ? "ai-agent-panel--sidebar-right" : "ai-agent-panel--sidebar-left"
+    sidebarPosition === "right" ? "ai-agent-panel--sidebar-right" : "ai-agent-panel--sidebar-left",
+    !showConversationHistory ? "ai-agent-panel--no-history" : ""
   ].filter(Boolean).join(" ");
   if (isCollapsed) {
     return /* @__PURE__ */ import_react13.default.createElement("div", { className: panelClasses, ref: panelRef }, /* @__PURE__ */ import_react13.default.createElement(
@@ -5373,7 +5596,7 @@ var AIAgentPanel = ({
       },
       /* @__PURE__ */ import_react13.default.createElement(Tooltip, { content: "Expand Panel", side: "left" }, /* @__PURE__ */ import_react13.default.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleCollapse }, position === "right" ? /* @__PURE__ */ import_react13.default.createElement(ChevronLeftIcon, null) : /* @__PURE__ */ import_react13.default.createElement(ChevronRightIcon, null))),
       /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__collapsed-divider" }),
-      /* @__PURE__ */ import_react13.default.createElement(Tooltip, { content: "Search", side: "left" }, /* @__PURE__ */ import_react13.default.createElement(
+      showConversationHistory && /* @__PURE__ */ import_react13.default.createElement(Tooltip, { content: "Search", side: "left" }, /* @__PURE__ */ import_react13.default.createElement(
         Button,
         {
           variant: "ghost",
@@ -5422,6 +5645,8 @@ var AIAgentPanel = ({
                   const next = new Map(prev);
                   next.set(tempId, {
                     conversationId: tempId,
+                    stableKey: tempId,
+                    // Stable key never changes
                     agentId: agent.id,
                     history: {},
                     isLoading: false,
@@ -5468,7 +5693,7 @@ var AIAgentPanel = ({
         tabIndex: 0
       }
     ),
-    /* @__PURE__ */ import_react13.default.createElement("div", { className: `ai-agent-panel__sidebar ${isHistoryCollapsed ? "ai-agent-panel__sidebar--collapsed" : ""}` }, isHistoryCollapsed ? (
+    showConversationHistory && /* @__PURE__ */ import_react13.default.createElement("div", { className: `ai-agent-panel__sidebar ${isHistoryCollapsed ? "ai-agent-panel__sidebar--collapsed" : ""}` }, isHistoryCollapsed ? (
       // Collapsed history bar
       /* @__PURE__ */ import_react13.default.createElement(
         "div",
@@ -5524,6 +5749,8 @@ var AIAgentPanel = ({
                     const next = new Map(prev);
                     next.set(tempId, {
                       conversationId: tempId,
+                      stableKey: tempId,
+                      // Stable key never changes
                       agentId: agent.id,
                       history: {},
                       isLoading: false,
@@ -5581,7 +5808,7 @@ var AIAgentPanel = ({
     ))), /* @__PURE__ */ import_react13.default.createElement(Tooltip, { content: "Collapse History", side: "bottom" }, /* @__PURE__ */ import_react13.default.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleHistoryCollapse }, /* @__PURE__ */ import_react13.default.createElement(SidebarIcon, null))), /* @__PURE__ */ import_react13.default.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleCollapse }, position === "right" ? /* @__PURE__ */ import_react13.default.createElement(ChevronRightIcon, null) : /* @__PURE__ */ import_react13.default.createElement(ChevronLeftIcon, null))), /* @__PURE__ */ import_react13.default.createElement(ScrollArea, { className: "ai-agent-panel__conversations" }, activeConversationsList.length > 0 && /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__group ai-agent-panel__group--active" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__group-label" }, /* @__PURE__ */ import_react13.default.createElement("span", null, "Active (", activeConversationsList.length, ")")), activeConversationsList.map((activeConv) => /* @__PURE__ */ import_react13.default.createElement(
       "div",
       {
-        key: activeConv.conversationId,
+        key: activeConv.stableKey,
         className: `ai-agent-panel__conversation ai-agent-panel__conversation--active-item ${currentConversationId === activeConv.conversationId ? "ai-agent-panel__conversation--current" : ""}`,
         onClick: () => {
           setCurrentConversationId(activeConv.conversationId);
@@ -5620,10 +5847,10 @@ var AIAgentPanel = ({
         /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__conversation-content" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__conversation-title" }, isActive && /* @__PURE__ */ import_react13.default.createElement("span", { className: "ai-agent-panel__active-badge" }, "\u25CF"), conversationFirstPrompts[conv.conversationId] || conv.title))
       );
     }))))))),
-    /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__chat" }, activeConversationsList.map((activeConv) => /* @__PURE__ */ import_react13.default.createElement(
+    /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__chat" }, showContextNotification && /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__context-notification" }, /* @__PURE__ */ import_react13.default.createElement(SparkleIcon, null), /* @__PURE__ */ import_react13.default.createElement("span", null, "Agent now has new context")), activeConversationsList.map((activeConv) => /* @__PURE__ */ import_react13.default.createElement(
       ChatPanelWrapper,
       {
-        key: `${activeConv.conversationId}-${activeConv.agentId}`,
+        key: `${activeConv.stableKey}-${activeConv.agentId}`,
         activeConv,
         currentConversationId,
         getAgent,
@@ -5647,7 +5874,8 @@ var AIAgentPanel = ({
         contextSections: mergedContext.sections,
         totalContextTokens: mergedContext.totalTokens || 0,
         maxContextTokens,
-        enableContextDetailView
+        enableContextDetailView,
+        onConversationCreated: handleConversationCreated
       }
     )), loadingConversationId && /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__conversation-loading-overlay" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__loading-spinner" }), /* @__PURE__ */ import_react13.default.createElement("p", null, "Loading conversation...")), currentAgentMetadata && activeConversationsList.length === 0 && !loadingConversationId && /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__empty-chat" }, /* @__PURE__ */ import_react13.default.createElement(MessageIcon, null), /* @__PURE__ */ import_react13.default.createElement("p", null, "Select a conversation or start a new one"), /* @__PURE__ */ import_react13.default.createElement(Button, { variant: "default", size: "sm", onClick: handleNewConversation }, "New Conversation")), agentsLoading && !currentAgentMetadata && /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__loading" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "ai-agent-panel__loading-spinner" }), /* @__PURE__ */ import_react13.default.createElement("p", null, "Loading agent..."))),
     /* @__PURE__ */ import_react13.default.createElement(
@@ -5656,7 +5884,7 @@ var AIAgentPanel = ({
         isOpen: showHandoffDialog,
         onClose: handleHandoffCancel,
         title: "Switch Agent?",
-        description: `The current agent suggests transferring this conversation to ${suggestedAgent ? ((_b = (_a = getAgent(suggestedAgent)) == null ? void 0 : _a.metadata) == null ? void 0 : _b.displayTitle) || suggestedAgent : "another agent"}.`
+        description: handoffSource === "page" ? `This page has a recommended agent: ${suggestedAgent ? ((_b = (_a = getAgent(suggestedAgent)) == null ? void 0 : _a.metadata) == null ? void 0 : _b.displayTitle) || suggestedAgent : "another agent"}. Would you like to switch?` : `The current agent suggests transferring this conversation to ${suggestedAgent ? ((_d = (_c = getAgent(suggestedAgent)) == null ? void 0 : _c.metadata) == null ? void 0 : _d.displayTitle) || suggestedAgent : "another agent"}.`
       },
       /* @__PURE__ */ import_react13.default.createElement(DialogFooter, null, /* @__PURE__ */ import_react13.default.createElement(Button, { variant: "outline", onClick: handleHandoffCancel }, "Stay with current agent"), /* @__PURE__ */ import_react13.default.createElement(Button, { onClick: handleHandoffConfirm }, "Switch agent"))
     )