@hef2024/llmasaservice-ui 0.20.0 → 0.20.1

package/dist/index.mjs

@@ -1865,16 +1865,16 @@ var ChatPanel = ({
     return /* @__PURE__ */ React3.createElement("a", __spreadValues({ href, target: "_blank", rel: "noopener noreferrer" }, props), children);
   };
   const convertMarkdownToHTML = (markdown) => {
+    const markdownContent = /* @__PURE__ */ React3.createElement(
+      ReactMarkdown,
+      {
+        remarkPlugins: [remarkGfm],
+        rehypePlugins: [rehypeRaw]
+      },
+      markdown
+    );
     const html = ReactDOMServer.renderToStaticMarkup(
-      /* @__PURE__ */ React3.createElement(
-        ReactMarkdown,
-        {
-          className: markdownClass,
-          remarkPlugins: [remarkGfm],
-          rehypePlugins: [rehypeRaw]
-        },
-        markdown
-      )
+      markdownClass ? /* @__PURE__ */ React3.createElement("div", { className: markdownClass }, markdownContent) : markdownContent
     );
     return html;
   };
@@ -2103,10 +2103,16 @@ var ChatPanel = ({
       },
       /* @__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(
+    /* @__PURE__ */ React3.createElement("div", { className: "responseArea", ref: responseAreaRef }, initialMessage && initialMessage !== "" ? /* @__PURE__ */ React3.createElement("div", { className: "history-entry" }, /* @__PURE__ */ React3.createElement("div", { className: "response" }, markdownClass ? /* @__PURE__ */ React3.createElement("div", { className: markdownClass }, /* @__PURE__ */ React3.createElement(
+      ReactMarkdown,
+      {
+        remarkPlugins: [remarkGfm],
+        rehypePlugins: [rehypeRaw]
+      },
+      initialMessage
+    )) : /* @__PURE__ */ React3.createElement(
       ReactMarkdown,
       {
-        className: markdownClass,
         remarkPlugins: [remarkGfm],
         rehypePlugins: [rehypeRaw]
       },
@@ -2131,10 +2137,9 @@ var ChatPanel = ({
         return null;
       })(), (() => {
         if (lastKey && history[lastKey] && history[lastKey].content) {
-          return /* @__PURE__ */ React3.createElement(
+          const content = /* @__PURE__ */ React3.createElement(
             ReactMarkdown,
             {
-              className: markdownClass,
               remarkPlugins: [remarkGfm],
               rehypePlugins: [rehypeRaw],
               components: {
@@ -2144,27 +2149,41 @@ var ChatPanel = ({
             },
             history[lastKey].content
           );
+          return markdownClass ? /* @__PURE__ */ React3.createElement("div", { className: markdownClass }, content) : content;
         }
         const { cleanedText } = processThinkingTags(
           response || ""
         );
-        return cleanedText && cleanedText.length > 0 ? /* @__PURE__ */ React3.createElement(
-          ReactMarkdown,
-          {
-            className: markdownClass,
-            remarkPlugins: [remarkGfm],
-            rehypePlugins: [rehypeRaw],
-            components: {
-              /*a: CustomLink,*/
-              code: CodeBlock
-            }
-          },
-          cleanedText
-        ) : null;
-      })()) : /* @__PURE__ */ React3.createElement("div", null, isLastEntry && thinkingBlocks.length > 0 && renderThinkingBlocks(), /* @__PURE__ */ React3.createElement(
+        if (cleanedText && cleanedText.length > 0) {
+          const content = /* @__PURE__ */ React3.createElement(
+            ReactMarkdown,
+            {
+              remarkPlugins: [remarkGfm],
+              rehypePlugins: [rehypeRaw],
+              components: {
+                /*a: CustomLink,*/
+                code: CodeBlock
+              }
+            },
+            cleanedText
+          );
+          return markdownClass ? /* @__PURE__ */ React3.createElement("div", { className: markdownClass }, content) : content;
+        }
+        return null;
+      })()) : /* @__PURE__ */ React3.createElement("div", null, isLastEntry && thinkingBlocks.length > 0 && renderThinkingBlocks(), markdownClass ? /* @__PURE__ */ React3.createElement("div", { className: markdownClass }, /* @__PURE__ */ React3.createElement(
+        ReactMarkdown,
+        {
+          remarkPlugins: [remarkGfm],
+          rehypePlugins: [rehypeRaw],
+          components: {
+            /*a: CustomLink,*/
+            code: CodeBlock
+          }
+        },
+        processThinkingTags(historyEntry.content).cleanedText
+      )) : /* @__PURE__ */ React3.createElement(
         ReactMarkdown,
         {
-          className: markdownClass,
           remarkPlugins: [remarkGfm],
           rehypePlugins: [rehypeRaw],
           components: {
@@ -2912,7 +2931,7 @@ var AgentPanel = ({
   useEffect3(() => {
     const fetchAgentData = () => __async(void 0, null, function* () {
       try {
-        const fetchUrl = `https://api.llmasaservice.io/agents/${agent}`;
+        const fetchUrl = url.endsWith("dev") ? `https://8ftw8droff.execute-api.us-east-1.amazonaws.com/dev/agents/${agent}` : `https://api.llmasaservice.io/agents/${agent}`;
         const response = yield fetch(fetchUrl, {
           method: "GET",
           headers: {
@@ -3020,16 +3039,17 @@ var AgentPanel = ({
 var AgentPanel_default = AgentPanel;
 
 // src/AIAgentPanel.tsx
-import React12, { useCallback as useCallback4, useEffect as useEffect9, useMemo as useMemo4, useRef as useRef6, useState as useState8 } from "react";
+import React13, { useCallback as useCallback4, useEffect as useEffect9, useMemo as useMemo4, useRef as useRef6, useState as useState8 } from "react";
 
 // src/AIChatPanel.tsx
-import React11, {
+import React12, {
   useCallback as useCallback2,
   useEffect as useEffect7,
   useMemo as useMemo2,
   useRef as useRef5,
   useState as useState6
 } from "react";
+import ReactDOMServer2 from "react-dom/server";
 import { useLLM as useLLM2 } from "llmasaservice-client";
 import ReactMarkdown2 from "react-markdown";
 import remarkGfm2 from "remark-gfm";
@@ -3371,19 +3391,69 @@ var DialogFooter = ({
   return /* @__PURE__ */ React10.createElement("div", { className: `ai-dialog-footer ${className}` }, children);
 };
 
+// src/components/ui/ToolInfoModal.tsx
+import React11 from "react";
+var ToolInfoModal2 = ({
+  isOpen,
+  onClose,
+  data
+}) => {
+  if (!isOpen || !data) return null;
+  return /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-modal-overlay", onClick: onClose }, /* @__PURE__ */ React11.createElement(
+    "div",
+    {
+      className: "ai-chat-modal-content ai-chat-tool-info-modal",
+      onClick: (e) => e.stopPropagation()
+    },
+    /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-modal-header" }, /* @__PURE__ */ React11.createElement("h3", null, "Tool Information"), /* @__PURE__ */ React11.createElement(
+      "button",
+      {
+        className: "ai-chat-modal-close",
+        onClick: onClose,
+        "aria-label": "Close"
+      },
+      "\xD7"
+    )),
+    /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-modal-body ai-chat-tool-info-container" }, /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-tool-info-section" }, /* @__PURE__ */ React11.createElement("h4", null, "Tool Calls"), /* @__PURE__ */ React11.createElement(
+      "textarea",
+      {
+        className: "ai-chat-tool-info-json",
+        readOnly: true,
+        value: JSON.stringify(data.calls, null, 2)
+      }
+    )), /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-tool-info-section" }, /* @__PURE__ */ React11.createElement("h4", null, "Tool Responses"), /* @__PURE__ */ React11.createElement(
+      "textarea",
+      {
+        className: "ai-chat-tool-info-json",
+        readOnly: true,
+        value: JSON.stringify(data.responses, null, 2)
+      }
+    ))),
+    /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-modal-footer" }, /* @__PURE__ */ React11.createElement(
+      "button",
+      {
+        className: "ai-chat-modal-button ai-chat-modal-button--primary",
+        onClick: onClose
+      },
+      "Close"
+    ))
+  ));
+};
+var ToolInfoModal_default2 = ToolInfoModal2;
+
 // 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 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" }));
-var CheckIcon = () => /* @__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("polyline", { points: "20 6 9 17 4 12" }));
-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(({
+var ArrowUpIcon = () => /* @__PURE__ */ React12.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__ */ React12.createElement("path", { d: "M12 19V5M5 12l7-7 7 7" }));
+var StopIcon = () => /* @__PURE__ */ React12.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "ai-chat-icon" }, /* @__PURE__ */ React12.createElement("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }));
+var ChevronDownIcon = () => /* @__PURE__ */ React12.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__ */ React12.createElement("path", { d: "m6 9 6 6 6-6" }));
+var ChevronUpIcon = () => /* @__PURE__ */ React12.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__ */ React12.createElement("path", { d: "m18 15-6-6-6 6" }));
+var AgentIcon = () => /* @__PURE__ */ React12.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__ */ React12.createElement("path", { d: "M12 8V4H8" }), /* @__PURE__ */ React12.createElement("rect", { width: "16", height: "12", x: "4", y: "8", rx: "2" }), /* @__PURE__ */ React12.createElement("path", { d: "M2 14h2" }), /* @__PURE__ */ React12.createElement("path", { d: "M20 14h2" }), /* @__PURE__ */ React12.createElement("path", { d: "M15 13v2" }), /* @__PURE__ */ React12.createElement("path", { d: "M9 13v2" }));
+var CheckIcon = () => /* @__PURE__ */ React12.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__ */ React12.createElement("polyline", { points: "20 6 9 17 4 12" }));
+var BrainIcon = () => /* @__PURE__ */ React12.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__ */ React12.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__ */ React12.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__ */ React12.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__ */ React12.createElement("circle", { cx: "11", cy: "11", r: "8" }), /* @__PURE__ */ React12.createElement("path", { d: "m21 21-4.3-4.3" }));
+var LLMAsAServiceLogo = () => /* @__PURE__ */ React12.createElement("svg", { width: "16", height: "16", viewBox: "0 0 72 72", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement("ellipse", { cx: "14.0868", cy: "59.2146", rx: "7.8261", ry: "7.7854", fill: "#2487D8" }), /* @__PURE__ */ React12.createElement("ellipse", { cx: "24.9013", cy: "43.0776", rx: "6.11858", ry: "6.08676", fill: "#2487D8" }), /* @__PURE__ */ React12.createElement("ellipse", { cx: "45.391", cy: "43.0776", rx: "6.11858", ry: "6.08676", fill: "#2487D8" }), /* @__PURE__ */ React12.createElement("ellipse", { cx: "65.8813", cy: "43.0776", rx: "6.11858", ry: "6.08676", fill: "#2487D8" }), /* @__PURE__ */ React12.createElement("ellipse", { cx: "35.1461", cy: "26.5327", rx: "4.41103", ry: "4.3878", fill: "#2487D8" }), /* @__PURE__ */ React12.createElement("ellipse", { cx: "55.6364", cy: "26.5327", rx: "4.41103", ry: "4.3878", fill: "#2487D8" }), /* @__PURE__ */ React12.createElement("ellipse", { cx: "45.391", cy: "10.3959", rx: "2.70351", ry: "2.68919", fill: "#2487D8" }));
+var AlertCircleIcon = () => /* @__PURE__ */ React12.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__ */ React12.createElement("circle", { cx: "12", cy: "12", r: "10" }), /* @__PURE__ */ React12.createElement("line", { x1: "12", x2: "12", y1: "8", y2: "12" }), /* @__PURE__ */ React12.createElement("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" }));
+var CloseIcon = () => /* @__PURE__ */ React12.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__ */ React12.createElement("line", { x1: "18", x2: "6", y1: "6", y2: "18" }), /* @__PURE__ */ React12.createElement("line", { x1: "6", x2: "18", y1: "6", y2: "18" }));
+var ChatInput = React12.memo(({
   placeholder,
   idle,
   onSubmit,
@@ -3466,13 +3536,13 @@ var ChatInput = React11.memo(({
     if (typeof data === "string") return data;
     return JSON.stringify(data, null, 2);
   };
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(
     "div",
     {
       className: `ai-chat-panel__input-container ${dropdownOpen ? "ai-chat-panel__input-container--dropdown-open" : ""}`,
       ref: containerRef
     },
-    /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-panel__input" }, /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-panel__input" }, /* @__PURE__ */ React12.createElement(
       "textarea",
       {
         ref: textareaRef,
@@ -3492,24 +3562,24 @@ var ChatInput = React11.memo(({
         rows: 1
       }
     )),
-    /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-panel__input-footer" }, agentOptions.length > 0 ? /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-agent-selector" }, /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-panel__input-footer" }, agentOptions.length > 0 ? /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-agent-selector" }, /* @__PURE__ */ React12.createElement(
       "button",
       {
         className: "ai-chat-agent-selector__trigger",
         onClick: () => setDropdownOpen(!dropdownOpen),
         disabled: agentsLoading
       },
-      currentAgentAvatarUrl ? /* @__PURE__ */ React11.createElement(
+      currentAgentAvatarUrl ? /* @__PURE__ */ React12.createElement(
         "img",
         {
           src: currentAgentAvatarUrl,
           alt: currentAgentLabel || "Agent",
           className: "ai-chat-agent-selector__avatar"
         }
-      ) : /* @__PURE__ */ React11.createElement(AgentIcon, null),
-      /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-agent-selector__label" }, agentsLoading ? "Loading..." : currentAgentLabel || "Select agent"),
-      dropdownOpen ? /* @__PURE__ */ React11.createElement(ChevronUpIcon, null) : /* @__PURE__ */ React11.createElement(ChevronDownIcon, null)
-    )) : /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-panel__input-footer-spacer" }), contextSections.length > 0 && /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-context-pill-wrapper" }, /* @__PURE__ */ React11.createElement(
+      ) : /* @__PURE__ */ React12.createElement(AgentIcon, null),
+      /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-selector__label" }, agentsLoading ? "Loading..." : currentAgentLabel || "Select agent"),
+      dropdownOpen ? /* @__PURE__ */ React12.createElement(ChevronUpIcon, null) : /* @__PURE__ */ React12.createElement(ChevronDownIcon, null)
+    )) : /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-panel__input-footer-spacer" }), contextSections.length > 0 && /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-context-pill-wrapper" }, /* @__PURE__ */ React12.createElement(
       "button",
       {
         className: `ai-chat-context-pill ${contextViewerOpen ? "ai-chat-context-pill--active" : ""} ${isOverLimit ? "ai-chat-context-pill--warning" : ""}`,
@@ -3525,15 +3595,15 @@ var ChatInput = React11.memo(({
         type: "button",
         title: "View context"
       },
-      /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-context-pill__label" }, "context: ", contextSections.length, " ", contextSections.length === 1 ? "section" : "sections")
-    ), contextViewerOpen && /* @__PURE__ */ React11.createElement(
+      /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-context-pill__label" }, "context: ", contextSections.length, " ", contextSections.length === 1 ? "section" : "sections")
+    ), contextViewerOpen && /* @__PURE__ */ React12.createElement(
       "div",
       {
         className: `ai-chat-context-popover ${contextViewMode === "detail" ? "ai-chat-context-popover--detail" : ""}`,
         ref: contextPopoverRef,
         onClick: (e) => e.stopPropagation()
       },
-      contextViewMode === "summary" && /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-context-popover__summary" }, /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-context-popover__header" }, /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-context-popover__title" }, "Context"), /* @__PURE__ */ React11.createElement(
+      contextViewMode === "summary" && /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-context-popover__summary" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-context-popover__header" }, /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-context-popover__title" }, "Context"), /* @__PURE__ */ React12.createElement(
         "button",
         {
           className: "ai-chat-context-popover__close",
@@ -3541,13 +3611,13 @@ var ChatInput = React11.memo(({
           type: "button"
         },
         "\xD7"
-      )), /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-context-popover__token-bar" }, /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-context-popover__token-info" }, /* @__PURE__ */ React11.createElement("span", { className: isOverLimit ? "ai-chat-context-popover__tokens--warning" : "" }, formatTokens(totalContextTokens), " tokens"), /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-context-popover__token-limit" }, "/ ", formatTokens(maxContextTokens), " limit")), /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-context-popover__progress" }, /* @__PURE__ */ React11.createElement(
+      )), /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-context-popover__token-bar" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-context-popover__token-info" }, /* @__PURE__ */ React12.createElement("span", { className: isOverLimit ? "ai-chat-context-popover__tokens--warning" : "" }, formatTokens(totalContextTokens), " tokens"), /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-context-popover__token-limit" }, "/ ", formatTokens(maxContextTokens), " limit")), /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-context-popover__progress" }, /* @__PURE__ */ React12.createElement(
         "div",
         {
           className: `ai-chat-context-popover__progress-bar ${isOverLimit ? "ai-chat-context-popover__progress-bar--warning" : ""}`,
           style: { width: `${Math.min(tokenPercentage, 100)}%` }
         }
-      ))), /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-context-popover__sections" }, contextSections.map((section) => /* @__PURE__ */ React11.createElement(
+      ))), /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-context-popover__sections" }, contextSections.map((section) => /* @__PURE__ */ React12.createElement(
         "div",
         {
           key: section.id,
@@ -3558,10 +3628,10 @@ var ChatInput = React11.memo(({
             }
           }
         },
-        /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-context-popover__section-icon" }, "\u{1F4C4}"),
-        /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-context-popover__section-title" }, section.title),
-        /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-context-popover__section-tokens" }, section.tokens || Math.ceil(JSON.stringify(section.data).length / 4))
-      ))), enableContextDetailView && /* @__PURE__ */ React11.createElement(
+        /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-context-popover__section-icon" }, "\u{1F4C4}"),
+        /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-context-popover__section-title" }, section.title),
+        /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-context-popover__section-tokens" }, section.tokens || Math.ceil(JSON.stringify(section.data).length / 4))
+      ))), enableContextDetailView && /* @__PURE__ */ React12.createElement(
         "button",
         {
           className: "ai-chat-context-popover__expand-btn",
@@ -3570,7 +3640,7 @@ var ChatInput = React11.memo(({
         },
         "View details \u2192"
       )),
-      contextViewMode === "detail" && enableContextDetailView && /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-context-popover__detail" }, /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-context-popover__header" }, /* @__PURE__ */ React11.createElement(
+      contextViewMode === "detail" && enableContextDetailView && /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-context-popover__detail" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-context-popover__header" }, /* @__PURE__ */ React12.createElement(
         "button",
         {
           className: "ai-chat-context-popover__back",
@@ -3578,7 +3648,7 @@ var ChatInput = React11.memo(({
           type: "button"
         },
         "\u2190 Back"
-      ), /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-context-popover__title" }, "Context Details"), /* @__PURE__ */ React11.createElement(
+      ), /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-context-popover__title" }, "Context Details"), /* @__PURE__ */ React12.createElement(
         "button",
         {
           className: "ai-chat-context-popover__close",
@@ -3586,26 +3656,26 @@ var ChatInput = React11.memo(({
           type: "button"
         },
         "\xD7"
-      )), /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-context-popover__token-bar" }, /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-context-popover__token-info" }, /* @__PURE__ */ React11.createElement("span", { className: isOverLimit ? "ai-chat-context-popover__tokens--warning" : "" }, formatTokens(totalContextTokens), " tokens"), /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-context-popover__token-limit" }, "/ ", formatTokens(maxContextTokens), " limit")), /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-context-popover__progress" }, /* @__PURE__ */ React11.createElement(
+      )), /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-context-popover__token-bar" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-context-popover__token-info" }, /* @__PURE__ */ React12.createElement("span", { className: isOverLimit ? "ai-chat-context-popover__tokens--warning" : "" }, formatTokens(totalContextTokens), " tokens"), /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-context-popover__token-limit" }, "/ ", formatTokens(maxContextTokens), " limit")), /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-context-popover__progress" }, /* @__PURE__ */ React12.createElement(
         "div",
         {
           className: `ai-chat-context-popover__progress-bar ${isOverLimit ? "ai-chat-context-popover__progress-bar--warning" : ""}`,
           style: { width: `${Math.min(tokenPercentage, 100)}%` }
         }
-      ))), /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-context-popover__detail-sections" }, contextSections.map((section) => {
+      ))), /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-context-popover__detail-sections" }, contextSections.map((section) => {
         const format = detectFormat(section.data);
-        return /* @__PURE__ */ React11.createElement("details", { key: section.id, className: "ai-chat-context-popover__detail-section", open: true }, /* @__PURE__ */ React11.createElement("summary", { className: "ai-chat-context-popover__detail-section-header" }, /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-context-popover__detail-section-title" }, section.title), /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-context-popover__detail-section-meta" }, /* @__PURE__ */ React11.createElement("code", null, `{{${section.id}}}`), /* @__PURE__ */ React11.createElement("span", null, "~", section.tokens || Math.ceil(JSON.stringify(section.data).length / 4)))), /* @__PURE__ */ React11.createElement("pre", { className: "ai-chat-context-popover__detail-content" }, /* @__PURE__ */ React11.createElement("code", null, formatContent(section.data, format))));
+        return /* @__PURE__ */ React12.createElement("details", { key: section.id, className: "ai-chat-context-popover__detail-section", open: true }, /* @__PURE__ */ React12.createElement("summary", { className: "ai-chat-context-popover__detail-section-header" }, /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-context-popover__detail-section-title" }, section.title), /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-context-popover__detail-section-meta" }, /* @__PURE__ */ React12.createElement("code", null, `{{${section.id}}}`), /* @__PURE__ */ React12.createElement("span", null, "~", section.tokens || Math.ceil(JSON.stringify(section.data).length / 4)))), /* @__PURE__ */ React12.createElement("pre", { className: "ai-chat-context-popover__detail-content" }, /* @__PURE__ */ React12.createElement("code", null, formatContent(section.data, format))));
       })))
-    )), /* @__PURE__ */ React11.createElement(
+    )), /* @__PURE__ */ React12.createElement(
       "button",
       {
         className: `ai-chat-send-button ${idle && !inputValue.trim() ? "ai-chat-send-button--disabled" : ""} ${!idle ? "ai-chat-send-button--stop" : ""}`,
         onClick: () => idle ? handleSubmit() : onStop(),
         disabled: idle && !inputValue.trim()
       },
-      idle ? /* @__PURE__ */ React11.createElement(ArrowUpIcon, null) : /* @__PURE__ */ React11.createElement(StopIcon, null)
+      idle ? /* @__PURE__ */ React12.createElement(ArrowUpIcon, null) : /* @__PURE__ */ React12.createElement(StopIcon, null)
     )),
-    agentOptions.length > 0 && dropdownOpen && /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-agent-selector__dropdown-inside" }, agentOptions.map((option) => /* @__PURE__ */ React11.createElement(
+    agentOptions.length > 0 && dropdownOpen && /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-agent-selector__dropdown-inside" }, agentOptions.map((option) => /* @__PURE__ */ React12.createElement(
       "button",
       {
         key: option.value,
@@ -3617,16 +3687,16 @@ var ChatInput = React11.memo(({
           setDropdownOpen(false);
         }
       },
-      option.avatarUrl ? /* @__PURE__ */ React11.createElement(
+      option.avatarUrl ? /* @__PURE__ */ React12.createElement(
         "img",
         {
           src: option.avatarUrl,
           alt: option.label,
           className: "ai-chat-agent-selector__option-avatar"
         }
-      ) : option.icon ? /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-agent-selector__option-icon" }, option.icon) : null,
-      /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-agent-selector__option-content" }, /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-agent-selector__option-label" }, option.label), option.description && /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-agent-selector__option-description" }, option.description)),
-      option.value === currentAgentId && /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-agent-selector__option-check" }, /* @__PURE__ */ React11.createElement(CheckIcon, null))
+      ) : option.icon ? /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-selector__option-icon" }, option.icon) : null,
+      /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-selector__option-content" }, /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-selector__option-label" }, option.label), option.description && /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-selector__option-description" }, option.description)),
+      option.value === currentAgentId && /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-selector__option-check" }, /* @__PURE__ */ React12.createElement(CheckIcon, null))
     )))
   );
 });
@@ -3670,8 +3740,28 @@ var AIChatPanel = ({
   totalContextTokens = 0,
   maxContextTokens = 8e3,
   enableContextDetailView = false,
-  onConversationCreated
+  onConversationCreated,
+  // UI Customization Props
+  cssUrl,
+  markdownClass,
+  width,
+  height,
+  scrollToEnd = false,
+  prismStyle,
+  // Email & Save Props
+  showSaveButton = true,
+  showEmailButton = true,
+  messages = [],
+  // Call-to-Action Props
+  showCallToAction = false,
+  callToActionButtonText = "Submit",
+  callToActionEmailAddress = "",
+  callToActionEmailSubject = "Agent CTA submitted",
+  // Customer Email Capture Props
+  customerEmailCaptureMode = "HIDE",
+  customerEmailCapturePlaceholder = "Please enter your email..."
 }) => {
+  var _a;
   const publicAPIUrl = "https://api.llmasaservice.io";
   const [lastController, setLastController] = useState6(new AbortController());
   const [lastMessages, setLastMessages] = useState6([]);
@@ -3688,6 +3778,27 @@ var AIChatPanel = ({
   const [copiedCallId, setCopiedCallId] = useState6(null);
   const [feedbackCallId, setFeedbackCallId] = useState6(null);
   const [error, setError] = useState6(null);
+  const [emailSent, setEmailSent] = useState6(false);
+  const [isToolInfoModalOpen, setIsToolInfoModalOpen] = useState6(false);
+  const [toolInfoData, setToolInfoData] = useState6(null);
+  const [callToActionSent, setCallToActionSent] = useState6(false);
+  const [CTAClickedButNoEmail, setCTAClickedButNoEmail] = useState6(false);
+  const [emailInput, setEmailInput] = useState6((_a = customer == null ? void 0 : customer.customer_user_email) != null ? _a : "");
+  const [emailInputSet, setEmailInputSet] = useState6(false);
+  const [emailValid, setEmailValid] = useState6(true);
+  const [showEmailPanel, setShowEmailPanel] = useState6(customerEmailCaptureMode !== "HIDE");
+  const [emailClickedButNoEmail, setEmailClickedButNoEmail] = useState6(false);
+  const [pendingToolRequests, setPendingToolRequests] = useState6([]);
+  const [sessionApprovedTools, setSessionApprovedTools] = useState6([]);
+  const [alwaysApprovedTools, setAlwaysApprovedTools] = useState6([]);
+  useEffect7(() => {
+    setShowEmailPanel(customerEmailCaptureMode !== "HIDE");
+    if (customerEmailCaptureMode === "REQUIRED") {
+      if (!isEmailAddress(emailInput)) {
+        setEmailValid(false);
+      }
+    }
+  }, [customerEmailCaptureMode, emailInput]);
   const bottomRef = useRef5(null);
   const responseAreaRef = useRef5(null);
   const [userHasScrolled, setUserHasScrolled] = useState6(false);
@@ -3698,6 +3809,7 @@ var AIChatPanel = ({
   const hasNotifiedCompletionRef = useRef5(true);
   const latestHistoryRef = useRef5(initialHistory);
   const initialPromptSentRef = useRef5(false);
+  const lastFollowOnPromptRef = useRef5("");
   useEffect7(() => {
     if (!initialHistory) return;
     setHistory((prev) => {
@@ -3744,9 +3856,9 @@ var AIChatPanel = ({
   lastKeyRef.current = lastKey;
   lastCallIdRef.current = lastCallId;
   lastPromptRef.current = lastPrompt;
-  const prismStyle = useMemo2(
-    () => theme === "light" ? materialLight3 : materialDark3,
-    [theme]
+  const effectivePrismStyle = useMemo2(
+    () => prismStyle != null ? prismStyle : theme === "light" ? materialLight3 : materialDark3,
+    [prismStyle, theme]
   );
   const browserInfo = useMemo2(() => {
     if (typeof window === "undefined") return null;
@@ -3757,7 +3869,7 @@ var AIChatPanel = ({
     };
   }, []);
   const ensureConversation = useCallback2(() => {
-    var _a, _b;
+    var _a2, _b;
     console.log("ensureConversation - called with:", {
       currentConversation,
       createConversationOnFirstChat,
@@ -3772,7 +3884,7 @@ var AIChatPanel = ({
       const requestBody = {
         project_id,
         agentId: agent,
-        customerId: (_a = customer == null ? void 0 : customer.customer_id) != null ? _a : null,
+        customerId: (_a2 = customer == null ? void 0 : customer.customer_id) != null ? _a2 : 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
@@ -3811,10 +3923,10 @@ var AIChatPanel = ({
     return Promise.resolve(currentConversation);
   }, [currentConversation, createConversationOnFirstChat, publicAPIUrl, project_id, agent, customer, browserInfo]);
   const dataWithExtras = useCallback2(() => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a2, _b, _c, _d, _e, _f, _g, _h;
     return [
       ...data,
-      { key: "--customer_id", data: (_a = customer == null ? void 0 : customer.customer_id) != null ? _a : "" },
+      { key: "--customer_id", data: (_a2 = customer == null ? void 0 : customer.customer_id) != null ? _a2 : "" },
       { key: "--customer_name", data: (_b = customer == null ? void 0 : customer.customer_name) != null ? _b : "" },
       { key: "--customer_user_id", data: (_c = customer == null ? void 0 : customer.customer_user_id) != null ? _c : "" },
       { key: "--customer_user_name", data: (_d = customer == null ? void 0 : customer.customer_user_name) != null ? _d : "" },
@@ -3834,6 +3946,176 @@ var AIChatPanel = ({
   }, [currentAgentId, agentOptions]);
   const currentAgentLabel = currentAgentInfo.label;
   const currentAgentAvatarUrl = currentAgentInfo.avatarUrl;
+  const isEmailAddress = (email) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  };
+  const convertMarkdownToHTML = (markdown) => {
+    const html = ReactDOMServer2.renderToStaticMarkup(
+      /* @__PURE__ */ React12.createElement("div", { className: markdownClass }, /* @__PURE__ */ React12.createElement(
+        ReactMarkdown2,
+        {
+          remarkPlugins: [remarkGfm2],
+          rehypePlugins: [rehypeRaw2]
+        },
+        markdown
+      ))
+    );
+    return html;
+  };
+  const convertHistoryToHTML = (history2) => {
+    const stylesheet = `
+        <style>
+      .conversation-history {
+        font-family: Arial, sans-serif;
+        line-height: 1.5;
+      }
+      .history-entry {
+        margin-bottom: 15px;
+      }
+      .prompt-container, .response-container {
+        margin-bottom: 10px;
+      }
+      .prompt, .response {
+        display: block;
+        margin: 5px 0;
+        padding: 10px;
+        border-radius: 5px;
+        max-width: 80%;
+      }
+      .prompt {
+        background-color: #efefef;
+        margin-left: 0;
+      }
+      .response {
+        background-color: #f0fcfd;
+        margin-left: 25px;
+      }
+    </style>
+`;
+    let html = `
+    <html>
+      <head>
+        ${stylesheet}
+      </head>
+      <body>
+        <h1>Conversation History (${(/* @__PURE__ */ new Date()).toLocaleString()})</h1>
+        <div class="conversation-history">
+  `;
+    Object.entries(history2).forEach(([prompt, response2], index) => {
+      if (hideInitialPrompt && index === 0) {
+        html += `
+        <div class="history-entry">
+          <div class="response-container">
+            <div class="response">${convertMarkdownToHTML(response2.content)}</div>
+          </div>
+        </div>
+      `;
+      } else {
+        html += `
+      <div class="history-entry">
+        <div class="prompt-container">
+          <div class="prompt">${convertMarkdownToHTML(
+          formatPromptForDisplay(prompt)
+        )}</div>
+        </div>
+        <div class="response-container">
+          <div class="response">${convertMarkdownToHTML(response2.content)}</div>
+        </div>
+      </div>
+    `;
+      }
+    });
+    html += `
+        </div>
+      </body>
+    </html>
+  `;
+    return html;
+  };
+  const saveHTMLToFile = (html, filename) => {
+    const blob = new Blob([html], { type: "text/html" });
+    const link = document.createElement("a");
+    link.href = URL.createObjectURL(blob);
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+  const saveAsHTMLFile = useCallback2(() => {
+    saveHTMLToFile(
+      convertHistoryToHTML(history),
+      `conversation-${(/* @__PURE__ */ new Date()).toISOString()}.html`
+    );
+    interactionClicked(lastCallId || "", "save");
+  }, [history, lastCallId]);
+  const handleSendEmail = (to, from) => {
+    sendConversationsViaEmail(to, `Conversation History from ${title}`, from);
+    interactionClicked(lastCallId || "", "email", to);
+    setEmailSent(true);
+  };
+  const sendConversationsViaEmail = (_0, ..._1) => __async(void 0, [_0, ..._1], function* (to, subject = `Conversation History from ${title}`, from = "") {
+    fetch(`${publicAPIUrl}/share/email`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        to,
+        from,
+        subject,
+        html: convertHistoryToHTML(history),
+        project_id: project_id != null ? project_id : "",
+        customer,
+        history,
+        title
+      })
+    });
+    yield interactionClicked(lastCallId || "", "email", from);
+  });
+  const sendCallToActionEmail = useCallback2((from) => __async(void 0, null, function* () {
+    try {
+      yield fetch(`${publicAPIUrl}/share/email`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          to: callToActionEmailAddress,
+          from,
+          subject: `${callToActionEmailSubject} from ${from}`,
+          html: convertHistoryToHTML(history),
+          project_id: project_id != null ? project_id : "",
+          customer,
+          history,
+          title
+        })
+      });
+      yield interactionClicked(lastCallId || "", "cta", from);
+      setCallToActionSent(true);
+    } catch (err) {
+      console.error("[AIChatPanel] Failed to send CTA email:", err);
+    }
+  }), [history, title, project_id, customer, lastCallId, publicAPIUrl, callToActionEmailAddress, callToActionEmailSubject]);
+  const isDisabledDueToNoEmail = useCallback2(() => {
+    if (customerEmailCaptureMode === "REQUIRED" && !emailInputSet) {
+      return true;
+    }
+    return false;
+  }, [customerEmailCaptureMode, emailInputSet]);
+  const handleToolApproval = useCallback2((toolName, scope) => {
+    if (scope === "session" || scope === "always") {
+      setSessionApprovedTools((prev) => Array.from(/* @__PURE__ */ new Set([...prev, toolName])));
+    }
+    if (scope === "always") {
+      setAlwaysApprovedTools((prev) => Array.from(/* @__PURE__ */ new Set([...prev, toolName])));
+    }
+    setPendingToolRequests((prev) => prev.filter((r) => r.toolName !== toolName));
+    console.log(`[AIChatPanel] Tool "${toolName}" approved with scope: ${scope}`);
+  }, []);
+  const getUniqueToolNames = useCallback2(() => {
+    return Array.from(new Set(pendingToolRequests.map((r) => r.toolName)));
+  }, [pendingToolRequests]);
   const cleanContentForDisplay = useCallback2((content) => {
     let cleaned = content.replace(/\*\*(.*?)\*\*/g, "$1").replace(/\*(.*?)\*/g, "$1").replace(/\n+/g, " ").replace(/\s+/g, " ").trim();
     if (cleaned.length > 100) {
@@ -3842,13 +4124,13 @@ var AIChatPanel = ({
     return cleaned || "Thinking";
   }, []);
   const processThinkingTags = useCallback2((text) => {
-    var _a, _b;
+    var _a2, _b;
     const blocks = [];
     let index = 0;
     const reasoningRegex = /<reasoning>([\s\S]*?)<\/reasoning>/gi;
     let match;
     while ((match = reasoningRegex.exec(text)) !== null) {
-      blocks.push({ type: "reasoning", content: (_a = match[1]) != null ? _a : "", index: index++ });
+      blocks.push({ type: "reasoning", content: (_a2 = match[1]) != null ? _a2 : "", index: index++ });
     }
     const searchingRegex = /<searching>([\s\S]*?)<\/searching>/gi;
     while ((match = searchingRegex.exec(text)) !== null) {
@@ -3896,12 +4178,12 @@ var AIChatPanel = ({
     return displayPrompt;
   }, [hideRagContextInPrompt]);
   const interactionClicked = useCallback2((callId, action, emailaddress = "", comment = "") => __async(void 0, null, function* () {
-    var _a, _b;
+    var _a2, _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 : "";
+    const isEmailAddress2 = (str) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(str);
+    const email = emailaddress && emailaddress !== "" ? emailaddress : isEmailAddress2((_a2 = customer == null ? void 0 : customer.customer_user_email) != null ? _a2 : "") ? customer == null ? void 0 : customer.customer_user_email : isEmailAddress2((_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",
@@ -3949,20 +4231,20 @@ var AIChatPanel = ({
     }
   }), [thumbsDownClick, interactionClicked]);
   const scrollToBottom = useCallback2(() => {
-    var _a;
+    var _a2;
     if (scrollRAFRef.current) {
       cancelAnimationFrame(scrollRAFRef.current);
     }
     const now = Date.now();
     if (now - lastScrollTimeRef.current < 100) {
       scrollRAFRef.current = requestAnimationFrame(() => {
-        var _a2;
-        (_a2 = bottomRef.current) == null ? void 0 : _a2.scrollIntoView({ behavior: "auto" });
+        var _a3;
+        (_a3 = bottomRef.current) == null ? void 0 : _a3.scrollIntoView({ behavior: "auto" });
         lastScrollTimeRef.current = Date.now();
       });
       return;
     }
-    (_a = bottomRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "auto" });
+    (_a2 = bottomRef.current) == null ? void 0 : _a2.scrollIntoView({ behavior: "auto" });
     lastScrollTimeRef.current = now;
   }, []);
   const continueChat = useCallback2((promptText) => {
@@ -4020,11 +4302,6 @@ var AIChatPanel = ({
       if (messagesAndHistory.length === 0 && promptTemplate) {
         fullPromptToSend = promptTemplate.replace("{{prompt}}", fullPromptToSend);
       }
-      if (followOnPrompt) {
-        fullPromptToSend += `
-
-${followOnPrompt}`;
-      }
       const newController = new AbortController();
       setLastController(newController);
       send(
@@ -4092,7 +4369,6 @@ ${followOnPrompt}`;
     clearFollowOnQuestionsNextPrompt,
     history,
     promptTemplate,
-    followOnPrompt,
     send,
     service,
     ensureConversation,
@@ -4134,9 +4410,9 @@ ${followOnPrompt}`;
     setUserHasScrolled(false);
     setError(null);
     setTimeout(() => {
-      var _a;
+      var _a2;
       setJustReset(false);
-      (_a = responseAreaRef.current) == null ? void 0 : _a.scrollTo({ top: 0, behavior: "smooth" });
+      (_a2 = responseAreaRef.current) == null ? void 0 : _a2.scrollTo({ top: 0, behavior: "smooth" });
     }, 100);
   }, [newConversationConfirm, idle, stop, lastController, setResponse, followOnQuestions]);
   useEffect7(() => {
@@ -4180,10 +4456,11 @@ ${followOnPrompt}`;
     }
   }, [idle]);
   useEffect7(() => {
-    if (!idle && !userHasScrolled && response) {
+    const shouldAutoScroll = scrollToEnd || !userHasScrolled;
+    if (!idle && shouldAutoScroll && response) {
       scrollToBottom();
     }
-  }, [response, scrollToBottom, idle, userHasScrolled]);
+  }, [response, scrollToBottom, idle, userHasScrolled, scrollToEnd]);
   const idleRef = useRef5(idle);
   idleRef.current = idle;
   const userHasScrolledRef = useRef5(userHasScrolled);
@@ -4242,6 +4519,12 @@ ${followOnPrompt}`;
       continueChat(initialPrompt);
     }
   }, [initialPrompt, continueChat]);
+  useEffect7(() => {
+    if (followOnPrompt && followOnPrompt !== "" && followOnPrompt !== lastFollowOnPromptRef.current) {
+      lastFollowOnPromptRef.current = followOnPrompt;
+      continueChat(followOnPrompt);
+    }
+  }, [followOnPrompt, continueChat]);
   useEffect7(() => {
     if (llmError && llmError.trim()) {
       console.log("[AIChatPanel] Error detected:", llmError);
@@ -4273,20 +4556,66 @@ ${followOnPrompt}`;
       }
     }
   }, [llmError, lastKey, lastCallId]);
-  const CodeBlock = useCallback2((_a) => {
-    var _b = _a, { node, inline, className, children } = _b, props = __objRest(_b, ["node", "inline", "className", "children"]);
+  useEffect7(() => {
+    const existingLinks = document.querySelectorAll(
+      'link[data-source="ai-chat-panel"]'
+    );
+    existingLinks.forEach((link) => {
+      var _a2;
+      return (_a2 = link.parentNode) == null ? void 0 : _a2.removeChild(link);
+    });
+    const existingStyles = document.querySelectorAll(
+      'style[data-source="ai-chat-panel"]'
+    );
+    existingStyles.forEach((style) => {
+      var _a2;
+      return (_a2 = style.parentNode) == null ? void 0 : _a2.removeChild(style);
+    });
+    if (cssUrl) {
+      if (cssUrl.startsWith("http://") || cssUrl.startsWith("https://")) {
+        const link = document.createElement("link");
+        link.href = cssUrl;
+        link.rel = "stylesheet";
+        link.setAttribute("data-source", "ai-chat-panel");
+        document.head.appendChild(link);
+      } else {
+        const style = document.createElement("style");
+        style.textContent = cssUrl;
+        style.setAttribute("data-source", "ai-chat-panel");
+        document.head.appendChild(style);
+      }
+    }
+    return () => {
+      const links = document.querySelectorAll(
+        'link[data-source="ai-chat-panel"]'
+      );
+      links.forEach((link) => {
+        var _a2;
+        return (_a2 = link.parentNode) == null ? void 0 : _a2.removeChild(link);
+      });
+      const styles = document.querySelectorAll(
+        'style[data-source="ai-chat-panel"]'
+      );
+      styles.forEach((style) => {
+        var _a2;
+        return (_a2 = style.parentNode) == null ? void 0 : _a2.removeChild(style);
+      });
+    };
+  }, [cssUrl]);
+  const CodeBlock = useCallback2((_b) => {
+    var _c = _b, { node, inline, className, children } = _c, props = __objRest(_c, ["node", "inline", "className", "children"]);
     const match = /language-(\w+)/.exec(className || "");
-    return !inline && match ? /* @__PURE__ */ React11.createElement(
+    return !inline && match ? /* @__PURE__ */ React12.createElement(
       SyntaxHighlighter2,
       __spreadValues({
-        style: prismStyle,
+        style: effectivePrismStyle,
         language: match[1],
         PreTag: "div"
       }, props),
       String(children).replace(/\n$/, "")
-    ) : /* @__PURE__ */ React11.createElement("code", __spreadValues({ className }, props), children);
-  }, [prismStyle]);
-  const AgentSuggestionCard = React11.memo(({ agentId, agentName, reason }) => {
+    ) : /* @__PURE__ */ React12.createElement("code", __spreadValues({ className }, props), children);
+  }, [effectivePrismStyle]);
+  const AgentSuggestionCard = React12.memo(({ agentId, agentName, reason }) => {
     useEffect7(() => {
       const timer = setTimeout(() => {
         scrollToBottom();
@@ -4301,33 +4630,33 @@ ${followOnPrompt}`;
     const avatarUrl = agentOption == null ? void 0 : agentOption.avatarUrl;
     const isCurrentAgent = currentAgentId === agentId;
     if (!isValidAgent || agentId.includes("{") || agentId.includes("$")) {
-      return /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-agent-suggestion ai-chat-agent-suggestion--invalid" }, /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-agent-suggestion__content" }, avatarUrl ? /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-suggestion ai-chat-agent-suggestion--invalid" }, /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-suggestion__content" }, avatarUrl ? /* @__PURE__ */ React12.createElement(
         "img",
         {
           src: avatarUrl,
           alt: agentName,
           className: "ai-chat-agent-suggestion__avatar"
         }
-      ) : /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-agent-suggestion__icon" }, /* @__PURE__ */ React11.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__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" }))), /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-agent-suggestion__text" }, /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-agent-suggestion__label" }, "Suggested: ", agentName), reason && /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-agent-suggestion__reason" }, reason))), /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-agent-suggestion__unavailable" }, "Agent unavailable"));
+      ) : /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-suggestion__icon" }, /* @__PURE__ */ React12.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React12.createElement("path", { d: "M12 8V4H8" }), /* @__PURE__ */ React12.createElement("rect", { width: "16", height: "12", x: "4", y: "8", rx: "2" }), /* @__PURE__ */ React12.createElement("path", { d: "M2 14h2" }), /* @__PURE__ */ React12.createElement("path", { d: "M20 14h2" }), /* @__PURE__ */ React12.createElement("path", { d: "M15 13v2" }), /* @__PURE__ */ React12.createElement("path", { d: "M9 13v2" }))), /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-suggestion__text" }, /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-suggestion__label" }, "Suggested: ", agentName), reason && /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-suggestion__reason" }, reason))), /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-suggestion__unavailable" }, "Agent unavailable"));
     }
     if (isCurrentAgent) {
-      return /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-agent-suggestion ai-chat-agent-suggestion--switched" }, /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-agent-suggestion__content" }, avatarUrl ? /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-suggestion ai-chat-agent-suggestion--switched" }, /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-suggestion__content" }, avatarUrl ? /* @__PURE__ */ React12.createElement(
         "img",
         {
           src: avatarUrl,
           alt: agentName,
           className: "ai-chat-agent-suggestion__avatar"
         }
-      ) : /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-agent-suggestion__icon ai-chat-agent-suggestion__icon--switched" }, /* @__PURE__ */ React11.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React11.createElement("polyline", { points: "20 6 9 17 4 12" }))), /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-agent-suggestion__text" }, /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-agent-suggestion__label" }, "Switched to ", agentName), reason && /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-agent-suggestion__reason" }, reason))), /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-agent-suggestion__switched-badge" }, /* @__PURE__ */ React11.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React11.createElement("polyline", { points: "20 6 9 17 4 12" })), "Active"));
+      ) : /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-suggestion__icon ai-chat-agent-suggestion__icon--switched" }, /* @__PURE__ */ React12.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React12.createElement("polyline", { points: "20 6 9 17 4 12" }))), /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-suggestion__text" }, /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-suggestion__label" }, "Switched to ", agentName), reason && /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-suggestion__reason" }, reason))), /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-suggestion__switched-badge" }, /* @__PURE__ */ React12.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React12.createElement("polyline", { points: "20 6 9 17 4 12" })), "Active"));
     }
-    return /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-agent-suggestion" }, /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-agent-suggestion__content" }, avatarUrl ? /* @__PURE__ */ React11.createElement(
+    return /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-suggestion" }, /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-suggestion__content" }, avatarUrl ? /* @__PURE__ */ React12.createElement(
       "img",
       {
         src: avatarUrl,
         alt: agentName,
         className: "ai-chat-agent-suggestion__avatar"
       }
-    ) : /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-agent-suggestion__icon" }, /* @__PURE__ */ React11.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__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" }))), /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-agent-suggestion__text" }, /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-agent-suggestion__label" }, "Suggested: ", agentName), reason && /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-agent-suggestion__reason" }, reason))), /* @__PURE__ */ React11.createElement(
+    ) : /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-suggestion__icon" }, /* @__PURE__ */ React12.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React12.createElement("path", { d: "M12 8V4H8" }), /* @__PURE__ */ React12.createElement("rect", { width: "16", height: "12", x: "4", y: "8", rx: "2" }), /* @__PURE__ */ React12.createElement("path", { d: "M2 14h2" }), /* @__PURE__ */ React12.createElement("path", { d: "M20 14h2" }), /* @__PURE__ */ React12.createElement("path", { d: "M15 13v2" }), /* @__PURE__ */ React12.createElement("path", { d: "M9 13v2" }))), /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-suggestion__text" }, /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-suggestion__label" }, "Suggested: ", agentName), reason && /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-agent-suggestion__reason" }, reason))), /* @__PURE__ */ React12.createElement(
       Button,
       {
         variant: "default",
@@ -4345,13 +4674,13 @@ ${followOnPrompt}`;
   });
   const markdownComponents = useMemo2(() => ({
     code: CodeBlock,
-    "agent-suggestion": (_a) => {
-      var _b = _a, { node } = _b, props = __objRest(_b, ["node"]);
+    "agent-suggestion": (_a2) => {
+      var _b = _a2, { node } = _b, props = __objRest(_b, ["node"]);
       const agentId = props["data-agent-id"];
       const agentName = props["data-agent-name"];
       const reason = props["data-reason"];
       if (!agentId) return null;
-      return /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React12.createElement(
         AgentSuggestionCard,
         {
           agentId,
@@ -4366,126 +4695,339 @@ ${followOnPrompt}`;
     const currentBlock = thinkingBlocks[currentThinkingIndex];
     if (!currentBlock) return null;
     const isReasoning = currentBlock.type === "reasoning";
-    const icon = isReasoning ? /* @__PURE__ */ React11.createElement(BrainIcon, null) : /* @__PURE__ */ React11.createElement(SearchIcon, null);
+    const icon = isReasoning ? /* @__PURE__ */ React12.createElement(BrainIcon, null) : /* @__PURE__ */ React12.createElement(SearchIcon, null);
     const title2 = isReasoning ? "Reasoning" : "Searching";
-    return /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-thinking" }, /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-thinking__header" }, /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-thinking__icon" }, icon), /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-thinking__title" }, title2), thinkingBlocks.length > 1 && /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-thinking__nav" }, /* @__PURE__ */ React11.createElement(
+    return /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-thinking" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-thinking__header" }, /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-thinking__icon" }, icon), /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-thinking__title" }, title2), thinkingBlocks.length > 1 && /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-thinking__nav" }, /* @__PURE__ */ React12.createElement(
       "button",
       {
         onClick: () => setCurrentThinkingIndex(Math.max(0, currentThinkingIndex - 1)),
         disabled: currentThinkingIndex === 0
       },
       "\u2039"
-    ), /* @__PURE__ */ React11.createElement("span", null, currentThinkingIndex + 1, " / ", thinkingBlocks.length), /* @__PURE__ */ React11.createElement(
+    ), /* @__PURE__ */ React12.createElement("span", null, currentThinkingIndex + 1, " / ", thinkingBlocks.length), /* @__PURE__ */ React12.createElement(
       "button",
       {
         onClick: () => setCurrentThinkingIndex(Math.min(thinkingBlocks.length - 1, currentThinkingIndex + 1)),
         disabled: currentThinkingIndex === thinkingBlocks.length - 1
       },
       "\u203A"
-    ))), /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-thinking__content" }, cleanContentForDisplay(currentBlock.content)));
+    ))), /* @__PURE__ */ React12.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), 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",
+  return /* @__PURE__ */ React12.createElement(
+    "div",
     {
-      className: "ai-chat-error-banner__close",
-      onClick: () => setError(null),
-      "aria-label": "Dismiss error"
+      className: panelClasses,
+      style: __spreadValues(__spreadValues({}, width && { width }), height && { height })
     },
-    /* @__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);
-    return /* @__PURE__ */ React11.createElement("div", { key: index, className: "ai-chat-entry" }, !(hideInitialPrompt && index === 0) && !isSystemMessage && /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-message ai-chat-message--user" }, /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-message__content" }, formatPromptForDisplay(prompt))), /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-message ai-chat-message--assistant" }, /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-message__content" }, isLastEntry && (isLoading || !idle) && !justReset ? /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-streaming" }, thinkingBlocks.length > 0 && renderThinkingBlocks(), processedContent ? /* @__PURE__ */ React11.createElement(
+    title && /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-panel__title" }, title),
+    error && /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-error-banner" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-error-banner__icon" }, /* @__PURE__ */ React12.createElement(AlertCircleIcon, null)), /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-error-banner__content" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-error-banner__message" }, error.message), error.code === "413" && /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-error-banner__hint" }, "Try starting a new conversation or reducing the amount of information being sent.")), /* @__PURE__ */ React12.createElement(
+      "button",
+      {
+        className: "ai-chat-error-banner__close",
+        onClick: () => setError(null),
+        "aria-label": "Dismiss error"
+      },
+      /* @__PURE__ */ React12.createElement(CloseIcon, null)
+    )),
+    /* @__PURE__ */ React12.createElement(ScrollArea, { className: "ai-chat-panel__messages", ref: responseAreaRef }, initialMessage && /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-message ai-chat-message--assistant" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-message__content" }, markdownClass ? /* @__PURE__ */ React12.createElement("div", { className: markdownClass }, /* @__PURE__ */ React12.createElement(
       ReactMarkdown2,
       {
         remarkPlugins: [remarkGfm2],
-        rehypePlugins: [rehypeRaw2],
-        components: markdownComponents
+        rehypePlugins: [rehypeRaw2]
       },
-      processedContent
-    ) : /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-loading" }, /* @__PURE__ */ React11.createElement("span", null, "Thinking"), /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-loading__dots" }, /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-loading__dot" }), /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-loading__dot" }), /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-loading__dot" })))) : /* @__PURE__ */ React11.createElement(React11.Fragment, null, isLastEntry && thinkingBlocks.length > 0 && renderThinkingBlocks(), /* @__PURE__ */ React11.createElement(
+      initialMessage
+    )) : /* @__PURE__ */ React12.createElement(
       ReactMarkdown2,
       {
         remarkPlugins: [remarkGfm2],
-        rehypePlugins: [rehypeRaw2],
-        components: markdownComponents
+        rehypePlugins: [rehypeRaw2]
       },
-      processedContent
-    ))), (!isLastEntry || !isLoading) && /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-message__actions" }, /* @__PURE__ */ React11.createElement(
-      "button",
+      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);
+      return /* @__PURE__ */ React12.createElement("div", { key: index, className: "ai-chat-entry" }, !(hideInitialPrompt && index === 0) && !isSystemMessage && /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-message ai-chat-message--user" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-message__content" }, formatPromptForDisplay(prompt))), /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-message ai-chat-message--assistant" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-message__content" }, isLastEntry && (isLoading || !idle) && !justReset ? /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-streaming" }, thinkingBlocks.length > 0 && renderThinkingBlocks(), processedContent ? markdownClass ? /* @__PURE__ */ React12.createElement("div", { className: markdownClass }, /* @__PURE__ */ React12.createElement(
+        ReactMarkdown2,
+        {
+          remarkPlugins: [remarkGfm2],
+          rehypePlugins: [rehypeRaw2],
+          components: markdownComponents
+        },
+        processedContent
+      )) : /* @__PURE__ */ React12.createElement(
+        ReactMarkdown2,
+        {
+          remarkPlugins: [remarkGfm2],
+          rehypePlugins: [rehypeRaw2],
+          components: markdownComponents
+        },
+        processedContent
+      ) : /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-loading" }, /* @__PURE__ */ React12.createElement("span", null, "Thinking"), /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-loading__dots" }, /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-loading__dot" }), /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-loading__dot" }), /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-loading__dot" })))) : /* @__PURE__ */ React12.createElement(React12.Fragment, null, isLastEntry && thinkingBlocks.length > 0 && renderThinkingBlocks(), markdownClass ? /* @__PURE__ */ React12.createElement("div", { className: markdownClass }, /* @__PURE__ */ React12.createElement(
+        ReactMarkdown2,
+        {
+          remarkPlugins: [remarkGfm2],
+          rehypePlugins: [rehypeRaw2],
+          components: markdownComponents
+        },
+        processedContent
+      )) : /* @__PURE__ */ React12.createElement(
+        ReactMarkdown2,
+        {
+          remarkPlugins: [remarkGfm2],
+          rehypePlugins: [rehypeRaw2],
+          components: markdownComponents
+        },
+        processedContent
+      ))), (!isLastEntry || !isLoading) && /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-message__actions" }, /* @__PURE__ */ React12.createElement(
+        "button",
+        {
+          className: "ai-chat-action-button",
+          onClick: () => copyToClipboard(entry.content, entry.callId),
+          title: copiedCallId === entry.callId ? "Copied!" : "Copy"
+        },
+        copiedCallId === entry.callId ? /* @__PURE__ */ React12.createElement("span", { style: { fontSize: "11px", fontWeight: 500 } }, "Copied!") : /* @__PURE__ */ React12.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__ */ React12.createElement("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), /* @__PURE__ */ React12.createElement("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" }))
+      ), /* @__PURE__ */ React12.createElement(
+        "button",
+        {
+          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
+        },
+        (feedbackCallId == null ? void 0 : feedbackCallId.callId) === entry.callId && (feedbackCallId == null ? void 0 : feedbackCallId.type) === "up" ? /* @__PURE__ */ React12.createElement("span", { style: { fontSize: "11px", fontWeight: 500 } }, "Thanks!") : /* @__PURE__ */ React12.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__ */ React12.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__ */ React12.createElement(
+        "button",
+        {
+          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
+        },
+        (feedbackCallId == null ? void 0 : feedbackCallId.callId) === entry.callId && (feedbackCallId == null ? void 0 : feedbackCallId.type) === "down" ? /* @__PURE__ */ React12.createElement("span", { style: { fontSize: "11px", fontWeight: 500 } }, "Thanks!") : /* @__PURE__ */ React12.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__ */ React12.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" }))
+      ), (entry.toolCalls || entry.toolResponses) && /* @__PURE__ */ React12.createElement(
+        "button",
+        {
+          className: "ai-chat-action-button",
+          onClick: () => {
+            setToolInfoData({
+              calls: entry.toolCalls || [],
+              responses: entry.toolResponses || []
+            });
+            setIsToolInfoModalOpen(true);
+          },
+          title: "View tool information"
+        },
+        /* @__PURE__ */ React12.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__ */ React12.createElement("circle", { cx: "12", cy: "12", r: "10" }), /* @__PURE__ */ React12.createElement("line", { x1: "12", x2: "12", y1: "16", y2: "12" }), /* @__PURE__ */ React12.createElement("line", { x1: "12", x2: "12.01", y1: "8", y2: "8" }))
+      ))));
+    }), followOnQuestionsState.length > 0 && idle && !isLoading && /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-suggestions" }, followOnQuestionsState.map((question, index) => /* @__PURE__ */ React12.createElement(
+      Button,
       {
-        className: "ai-chat-action-button",
-        onClick: () => copyToClipboard(entry.content, entry.callId),
-        title: copiedCallId === entry.callId ? "Copied!" : "Copy"
+        key: index,
+        variant: "outline",
+        size: "sm",
+        onClick: () => handleSuggestionClick(question),
+        className: "ai-chat-suggestions__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",
+      question
+    ))), /* @__PURE__ */ React12.createElement("div", { ref: bottomRef })),
+    pendingToolRequests.length > 0 && /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-approve-tools-panel" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-approve-tools-header" }, "Tool Approval Required"), /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-approve-tools-description" }, "The AI wants to use the following tools:"), getUniqueToolNames().map((toolName) => /* @__PURE__ */ React12.createElement("div", { key: toolName, className: "ai-chat-approve-tool-item" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-approve-tool-name" }, toolName), /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-approve-tools-buttons" }, /* @__PURE__ */ React12.createElement(
+      Button,
+      {
+        size: "sm",
+        variant: "outline",
+        className: "ai-chat-approve-tools-button",
+        onClick: () => handleToolApproval(toolName, "once")
+      },
+      "Once"
+    ), /* @__PURE__ */ React12.createElement(
+      Button,
+      {
+        size: "sm",
+        variant: "outline",
+        className: "ai-chat-approve-tools-button",
+        onClick: () => handleToolApproval(toolName, "session")
+      },
+      "This Session"
+    ), /* @__PURE__ */ React12.createElement(
+      Button,
+      {
+        size: "sm",
+        variant: "default",
+        className: "ai-chat-approve-tools-button",
+        onClick: () => handleToolApproval(toolName, "always")
+      },
+      "Always"
+    ))))),
+    (showSaveButton || showEmailButton || showCallToAction) && /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-button-container" }, showSaveButton && /* @__PURE__ */ React12.createElement(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        onClick: saveAsHTMLFile,
+        disabled: Object.keys(history).length === 0,
+        className: "ai-chat-save-button"
+      },
+      "\u{1F4BE} Save"
+    ), showEmailButton && /* @__PURE__ */ React12.createElement(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        onClick: () => {
+          if (isEmailAddress(emailInput)) {
+            setEmailInputSet(true);
+            setEmailValid(true);
+            handleSendEmail(emailInput, emailInput);
+            setEmailClickedButNoEmail(false);
+          } else {
+            setShowEmailPanel(true);
+            setEmailValid(false);
+            setEmailClickedButNoEmail(true);
+          }
+        },
+        disabled: Object.keys(history).length === 0 || isDisabledDueToNoEmail(),
+        className: "ai-chat-email-button"
+      },
+      "\u{1F4E7} Email Conversation",
+      emailSent ? " \u2713" : ""
+    ), showCallToAction && /* @__PURE__ */ React12.createElement(
+      Button,
       {
-        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
+        variant: callToActionSent ? "outline" : "default",
+        size: "sm",
+        onClick: () => {
+          if (customerEmailCaptureMode !== "HIDE" && !emailInputSet) {
+            setCTAClickedButNoEmail(true);
+            setTimeout(() => setCTAClickedButNoEmail(false), 3e3);
+            return;
+          }
+          const fromEmail = emailInput || (customer == null ? void 0 : customer.customer_user_email) || "";
+          sendCallToActionEmail(fromEmail);
+        },
+        disabled: callToActionSent || Object.keys(history).length === 0,
+        className: "ai-chat-cta-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(
+      callToActionSent ? "\u2713 Submitted" : callToActionButtonText
+    )),
+    showNewConversationButton && /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-panel__new-conversation" }, /* @__PURE__ */ React12.createElement(
+      Button,
+      {
+        variant: newConversationConfirm ? "destructive" : "outline",
+        size: "sm",
+        onClick: handleNewConversation,
+        className: "ai-chat-new-conversation"
+      },
+      newConversationConfirm ? "Click to Confirm" : "New Conversation"
+    )),
+    showEmailPanel && /* @__PURE__ */ React12.createElement(React12.Fragment, null, !emailValid && /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-email-input-message" }, isDisabledDueToNoEmail() ? "Let's get started - please enter your email" : CTAClickedButNoEmail || emailClickedButNoEmail ? "Sure, we just need an email address to contact you" : "Email address is invalid"), /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-email-input-container" }, /* @__PURE__ */ React12.createElement(
+      "input",
+      {
+        type: "email",
+        name: "email",
+        id: "email",
+        className: emailValid ? emailInputSet ? "ai-chat-email-input-set" : "ai-chat-email-input" : "ai-chat-email-input-invalid",
+        placeholder: customerEmailCapturePlaceholder,
+        value: emailInput,
+        onChange: (e) => {
+          const newEmail = e.target.value;
+          setEmailInput(newEmail);
+          if (!emailInputSet) {
+            if (customerEmailCaptureMode === "REQUIRED" && newEmail !== "") {
+              setEmailValid(isEmailAddress(newEmail));
+            } else {
+              setEmailValid(true);
+            }
+          }
+        },
+        onBlur: () => {
+          if (emailInput && isEmailAddress(emailInput) && !emailInputSet) {
+            setEmailInputSet(true);
+            setEmailValid(true);
+            interactionClicked("", "emailcapture", emailInput);
+            if (CTAClickedButNoEmail) {
+              sendCallToActionEmail(emailInput);
+              setCTAClickedButNoEmail(false);
+            }
+            if (emailClickedButNoEmail) {
+              handleSendEmail(emailInput, emailInput);
+              setEmailClickedButNoEmail(false);
+            }
+          } else if (customerEmailCaptureMode === "REQUIRED" && emailInput !== "") {
+            setEmailValid(isEmailAddress(emailInput));
+          }
+        },
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            if (isEmailAddress(emailInput)) {
+              setEmailInputSet(true);
+              setEmailValid(true);
+              interactionClicked("", "emailcapture", emailInput);
+              if (CTAClickedButNoEmail) {
+                sendCallToActionEmail(emailInput);
+                setCTAClickedButNoEmail(false);
+              }
+              if (emailClickedButNoEmail) {
+                handleSendEmail(emailInput, emailInput);
+                setEmailClickedButNoEmail(false);
+              }
+            } else {
+              setEmailValid(false);
+            }
+          }
+        },
+        disabled: false
+      }
+    ), emailInputSet && /* @__PURE__ */ React12.createElement(
       "button",
       {
-        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
+        className: "ai-chat-email-edit-button",
+        onClick: () => {
+          setEmailInputSet(false);
+          setEmailValid(true);
+        },
+        title: "Edit email"
       },
-      (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,
-    {
-      key: index,
-      variant: "outline",
-      size: "sm",
-      onClick: () => handleSuggestionClick(question),
-      className: "ai-chat-suggestions__button"
-    },
-    question
-  ))), /* @__PURE__ */ React11.createElement("div", { ref: bottomRef })), showNewConversationButton && /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-panel__new-conversation" }, /* @__PURE__ */ React11.createElement(
-    Button,
-    {
-      variant: newConversationConfirm ? "destructive" : "outline",
-      size: "sm",
-      onClick: handleNewConversation,
-      className: "ai-chat-new-conversation"
-    },
-    newConversationConfirm ? "Click to Confirm" : "New Conversation"
-  )), /* @__PURE__ */ React11.createElement(
-    ChatInput,
-    {
-      placeholder,
-      idle,
-      onSubmit: continueChat,
-      onStop: handleStop,
-      agentOptions,
-      currentAgentId,
-      onAgentChange,
-      agentsLoading,
-      currentAgentLabel: currentAgentLabel || void 0,
-      currentAgentAvatarUrl: currentAgentAvatarUrl || void 0,
-      contextSections,
-      totalContextTokens,
-      maxContextTokens,
-      enableContextDetailView
-    }
-  ), showPoweredBy && /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-panel__footer" }, mcpServers && mcpServers.length > 0 && /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-tools-status" }, /* @__PURE__ */ React11.createElement(
-    "span",
-    {
-      className: `ai-chat-tools-status__dot ${toolsLoading ? "loading" : toolsFetchError ? "error" : "ready"}`
-    }
-  ), /* @__PURE__ */ React11.createElement("span", { className: "ai-chat-tools-status__text" }, toolsLoading ? "tools loading..." : toolsFetchError ? "tool fetch failed" : toolList.length > 0 ? `${toolList.length} tools ready` : "no tools found")), /* @__PURE__ */ React11.createElement("div", { className: "ai-chat-powered-by" }, /* @__PURE__ */ React11.createElement("span", null, "brought to you by"), /* @__PURE__ */ React11.createElement("a", { href: "https://llmasaservice.io", target: "_blank", rel: "noopener noreferrer" }, /* @__PURE__ */ React11.createElement(LLMAsAServiceLogo, null), /* @__PURE__ */ React11.createElement("span", null, "llmasaservice.io")))));
+      "\u270E"
+    ))),
+    /* @__PURE__ */ React12.createElement(
+      ChatInput,
+      {
+        placeholder,
+        idle,
+        onSubmit: continueChat,
+        onStop: handleStop,
+        agentOptions,
+        currentAgentId,
+        onAgentChange,
+        agentsLoading,
+        currentAgentLabel: currentAgentLabel || void 0,
+        currentAgentAvatarUrl: currentAgentAvatarUrl || void 0,
+        contextSections,
+        totalContextTokens,
+        maxContextTokens,
+        enableContextDetailView
+      }
+    ),
+    showPoweredBy && /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-panel__footer" }, mcpServers && mcpServers.length > 0 && /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-tools-status" }, /* @__PURE__ */ React12.createElement(
+      "span",
+      {
+        className: `ai-chat-tools-status__dot ${toolsLoading ? "loading" : toolsFetchError ? "error" : "ready"}`
+      }
+    ), /* @__PURE__ */ React12.createElement("span", { className: "ai-chat-tools-status__text" }, toolsLoading ? "tools loading..." : toolsFetchError ? "tool fetch failed" : toolList.length > 0 ? `${toolList.length} tools ready` : "no tools found")), /* @__PURE__ */ React12.createElement("div", { className: "ai-chat-powered-by" }, /* @__PURE__ */ React12.createElement("span", null, "brought to you by"), /* @__PURE__ */ React12.createElement("a", { href: "https://llmasaservice.io", target: "_blank", rel: "noopener noreferrer" }, /* @__PURE__ */ React12.createElement(LLMAsAServiceLogo, null), /* @__PURE__ */ React12.createElement("span", null, "llmasaservice.io")))),
+    /* @__PURE__ */ React12.createElement(
+      ToolInfoModal_default2,
+      {
+        isOpen: isToolInfoModalOpen,
+        onClose: () => setIsToolInfoModalOpen(false),
+        data: toolInfoData
+      }
+    )
+  );
 };
-var AIChatPanel_default = React11.memo(AIChatPanel);
+var AIChatPanel_default = React12.memo(AIChatPanel);
 
 // src/hooks/useAgentRegistry.ts
 import { useState as useState7, useEffect as useEffect8, useCallback as useCallback3, useMemo as useMemo3 } from "react";
@@ -4687,15 +5229,15 @@ function extractAgentNameFromMessage(message) {
 }
 
 // src/AIAgentPanel.tsx
-var SearchIcon2 = () => /* @__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: "M7.333 12.667A5.333 5.333 0 1 0 7.333 2a5.333 5.333 0 0 0 0 10.667ZM14 14l-2.9-2.9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }));
-var PlusIcon = () => /* @__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: "M8 3.333v9.334M3.333 8h9.334", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }));
-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 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" }));
+var SearchIcon2 = () => /* @__PURE__ */ React13.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React13.createElement("path", { d: "M7.333 12.667A5.333 5.333 0 1 0 7.333 2a5.333 5.333 0 0 0 0 10.667ZM14 14l-2.9-2.9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }));
+var PlusIcon = () => /* @__PURE__ */ React13.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React13.createElement("path", { d: "M8 3.333v9.334M3.333 8h9.334", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }));
+var ChevronLeftIcon = () => /* @__PURE__ */ React13.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React13.createElement("path", { d: "M10 12L6 8l4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }));
+var ChevronRightIcon = () => /* @__PURE__ */ React13.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React13.createElement("path", { d: "M6 12l4-4-4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }));
+var MessageIcon = () => /* @__PURE__ */ React13.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React13.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 CloseIcon2 = () => /* @__PURE__ */ React13.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React13.createElement("path", { d: "M9 3L3 9M3 3l6 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }));
+var LoadingDotIcon = () => /* @__PURE__ */ React13.createElement("span", { className: "ai-agent-panel__loading-dot" });
+var SidebarIcon = () => /* @__PURE__ */ React13.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React13.createElement("rect", { x: "2", y: "2", width: "12", height: "12", rx: "2", stroke: "currentColor", strokeWidth: "1.5" }), /* @__PURE__ */ React13.createElement("path", { d: "M6 2v12", stroke: "currentColor", strokeWidth: "1.5" }));
+var SparkleIcon = () => /* @__PURE__ */ React13.createElement("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React13.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__ */ React13.createElement("circle", { cx: "8", cy: "8", r: "2", fill: "currentColor" }));
 var normalizeConversationListPayload = (payload) => {
   if (!payload) return [];
   const conversations = Array.isArray(payload) ? payload : payload.conversations || [];
@@ -4818,9 +5360,25 @@ var ChatPanelWrapper = ({
   maxContextTokens,
   enableContextDetailView,
   onConversationCreated,
-  conversationInitialPrompt
+  conversationInitialPrompt,
+  // New props from ChatPanel port
+  cssUrl,
+  markdownClass,
+  width,
+  height,
+  scrollToEnd,
+  prismStyle,
+  showSaveButton,
+  showEmailButton,
+  messages,
+  showCallToAction,
+  callToActionButtonText,
+  callToActionEmailAddress,
+  callToActionEmailSubject,
+  customerEmailCaptureMode,
+  customerEmailCapturePlaceholder
 }) => {
-  var _a, _b;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
   const convAgentProfile = getAgent(activeConv.agentId);
   const convAgentMetadata = convAgentProfile == null ? void 0 : convAgentProfile.metadata;
   const isVisible = currentConversationId === activeConv.conversationId;
@@ -4856,13 +5414,13 @@ var ChatPanelWrapper = ({
   }, [convAgentProfile == null ? void 0 : convAgentProfile.mcpServers]);
   const effectiveInitialPrompt = conversationInitialPrompt || initialPrompt;
   if (!convAgentMetadata) return null;
-  return /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React13.createElement(
     "div",
     {
       className: "ai-agent-panel__chat-wrapper",
       style: { display: isVisible ? "flex" : "none" }
     },
-    /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React13.createElement(
       AIChatPanel_default,
       {
         project_id: convAgentMetadata.projectId,
@@ -4887,7 +5445,7 @@ var ChatPanelWrapper = ({
         customer: effectiveCustomer,
         showPoweredBy,
         showNewConversationButton: false,
-        createConversationOnFirstChat: (_b = convAgentMetadata.createConversationOnFirstChat) != null ? _b : true,
+        createConversationOnFirstChat: (_b = convAgentProfile == null ? void 0 : convAgentProfile.createConversationOnFirstChat) != null ? _b : true,
         mcpServers,
         actions,
         followOnQuestions: effectiveFollowOnQuestions,
@@ -4902,13 +5460,28 @@ var ChatPanelWrapper = ({
         totalContextTokens,
         maxContextTokens,
         enableContextDetailView,
-        onConversationCreated: conversationCreatedCallback
+        onConversationCreated: conversationCreatedCallback,
+        cssUrl,
+        markdownClass,
+        width,
+        height,
+        scrollToEnd: scrollToEnd != null ? scrollToEnd : convAgentMetadata.displayAutoScroll,
+        prismStyle,
+        showSaveButton: (_c = showSaveButton != null ? showSaveButton : convAgentMetadata.displayShowSaveButton) != null ? _c : true,
+        showEmailButton: (_d = showEmailButton != null ? showEmailButton : convAgentMetadata.displayShowEmailButton) != null ? _d : true,
+        messages,
+        showCallToAction: (_e = showCallToAction != null ? showCallToAction : convAgentMetadata.displayShowCallToAction) != null ? _e : false,
+        callToActionButtonText: (_f = callToActionButtonText != null ? callToActionButtonText : convAgentMetadata.displayCallToActionButtonText) != null ? _f : "Submit",
+        callToActionEmailAddress: (_g = callToActionEmailAddress != null ? callToActionEmailAddress : convAgentMetadata.displayCallToActionEmailAddress) != null ? _g : "",
+        callToActionEmailSubject: (_h = callToActionEmailSubject != null ? callToActionEmailSubject : convAgentMetadata.displayCallToActionEmailSubject) != null ? _h : "Agent CTA submitted",
+        customerEmailCaptureMode: (_i = customerEmailCaptureMode != null ? customerEmailCaptureMode : convAgentMetadata == null ? void 0 : convAgentMetadata.customerEmailCaptureMode) != null ? _i : "HIDE",
+        customerEmailCapturePlaceholder: (_j = customerEmailCapturePlaceholder != null ? customerEmailCapturePlaceholder : convAgentMetadata == null ? void 0 : convAgentMetadata.customerEmailCapturePlaceholder) != null ? _j : "Please enter your email..."
       }
     )
   );
 };
 ChatPanelWrapper.displayName = "ChatPanelWrapper";
-var AIAgentPanel = React12.forwardRef(({
+var AIAgentPanel = React13.forwardRef(({
   agents,
   defaultAgent,
   customerId,
@@ -4947,7 +5520,23 @@ var AIAgentPanel = React12.forwardRef(({
   followOnQuestions = [],
   followOnPrompt = "",
   historyListLimit = 50,
-  showConversationHistory = true
+  showConversationHistory = true,
+  // New props from ChatPanel port
+  cssUrl,
+  markdownClass,
+  width,
+  height,
+  scrollToEnd,
+  prismStyle,
+  showSaveButton,
+  showEmailButton,
+  messages,
+  showCallToAction,
+  callToActionButtonText,
+  callToActionEmailAddress,
+  callToActionEmailSubject,
+  customerEmailCaptureMode,
+  customerEmailCapturePlaceholder
 }, ref) => {
   var _a, _b, _c, _d;
   const [isCollapsed, setIsCollapsed] = useState8(collapsible && defaultCollapsed);
@@ -4962,9 +5551,9 @@ var AIAgentPanel = React12.forwardRef(({
     if (typeof window !== "undefined") {
       const savedWidth = localStorage.getItem("ai-agent-panel-width");
       if (savedWidth) {
-        const width = parseInt(savedWidth, 10);
-        if (width >= minWidth && width <= maxWidth) {
-          return width;
+        const width2 = parseInt(savedWidth, 10);
+        if (width2 >= minWidth && width2 <= maxWidth) {
+          return width2;
         }
       }
     }
@@ -5030,7 +5619,7 @@ var AIAgentPanel = React12.forwardRef(({
   activeConversationsRef.current = activeConversations;
   const currentConversationIdRef = useRef6(currentConversationId);
   currentConversationIdRef.current = currentConversationId;
-  React12.useImperativeHandle(ref, () => ({
+  React13.useImperativeHandle(ref, () => ({
     startNewConversation: (prompt, agent) => {
       const targetAgent = agent || currentAgentId;
       const tempId = `new-${Date.now()}`;
@@ -5734,7 +6323,7 @@ var AIAgentPanel = React12.forwardRef(({
     !showConversationHistory ? "ai-agent-panel--no-history" : ""
   ].filter(Boolean).join(" ");
   if (collapsible && isCollapsed) {
-    return /* @__PURE__ */ React12.createElement("div", { className: panelClasses, ref: panelRef }, /* @__PURE__ */ React12.createElement(
+    return /* @__PURE__ */ React13.createElement("div", { className: panelClasses, ref: panelRef }, /* @__PURE__ */ React13.createElement(
       "div",
       {
         className: "ai-agent-panel__collapsed-bar",
@@ -5745,9 +6334,9 @@ var AIAgentPanel = React12.forwardRef(({
         },
         title: "Click to expand"
       },
-      /* @__PURE__ */ React12.createElement(Tooltip, { content: "Expand Panel", side: "left" }, /* @__PURE__ */ React12.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleCollapse }, position === "right" ? /* @__PURE__ */ React12.createElement(ChevronLeftIcon, null) : /* @__PURE__ */ React12.createElement(ChevronRightIcon, null))),
-      /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__collapsed-divider" }),
-      showConversationHistory && /* @__PURE__ */ React12.createElement(Tooltip, { content: "Search", side: "left" }, /* @__PURE__ */ React12.createElement(
+      /* @__PURE__ */ React13.createElement(Tooltip, { content: "Expand Panel", side: "left" }, /* @__PURE__ */ React13.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleCollapse }, position === "right" ? /* @__PURE__ */ React13.createElement(ChevronLeftIcon, null) : /* @__PURE__ */ React13.createElement(ChevronRightIcon, null))),
+      /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__collapsed-divider" }),
+      showConversationHistory && /* @__PURE__ */ React13.createElement(Tooltip, { content: "Search", side: "left" }, /* @__PURE__ */ React13.createElement(
         Button,
         {
           variant: "ghost",
@@ -5757,9 +6346,9 @@ var AIAgentPanel = React12.forwardRef(({
             setShowSearch(true);
           }
         },
-        /* @__PURE__ */ React12.createElement(SearchIcon2, null)
+        /* @__PURE__ */ React13.createElement(SearchIcon2, null)
       )),
-      /* @__PURE__ */ React12.createElement(Tooltip, { content: "New Chat", side: "left" }, /* @__PURE__ */ React12.createElement(
+      /* @__PURE__ */ React13.createElement(Tooltip, { content: "New Chat", side: "left" }, /* @__PURE__ */ React13.createElement(
         Button,
         {
           variant: "ghost",
@@ -5769,15 +6358,15 @@ var AIAgentPanel = React12.forwardRef(({
             handleNewConversation();
           }
         },
-        /* @__PURE__ */ React12.createElement(PlusIcon, null)
+        /* @__PURE__ */ React13.createElement(PlusIcon, null)
       )),
-      /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__collapsed-divider" }),
+      /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__collapsed-divider" }),
       agentList.map((agent) => {
         const activeConvForAgent = activeConversationsList.find(
           (conv) => conv.agentId === agent.id
         );
         const hasActiveConversation = !!activeConvForAgent;
-        return /* @__PURE__ */ React12.createElement(Tooltip, { key: agent.id, content: agent.name, side: "left" }, /* @__PURE__ */ React12.createElement(
+        return /* @__PURE__ */ React13.createElement(Tooltip, { key: agent.id, content: agent.name, side: "left" }, /* @__PURE__ */ React13.createElement(
           Button,
           {
             variant: agent.id === currentAgentId ? "secondary" : "ghost",
@@ -5811,7 +6400,7 @@ var AIAgentPanel = React12.forwardRef(({
             },
             className: `ai-agent-panel__agent-icon ${hasActiveConversation ? "ai-agent-panel__agent-icon--active" : ""}`
           },
-          agent.avatarUrl ? /* @__PURE__ */ React12.createElement(
+          agent.avatarUrl ? /* @__PURE__ */ React13.createElement(
             "img",
             {
               src: agent.avatarUrl,
@@ -5819,20 +6408,20 @@ var AIAgentPanel = React12.forwardRef(({
               className: "ai-agent-panel__agent-avatar"
             }
           ) : agent.name.charAt(0).toUpperCase(),
-          hasActiveConversation && /* @__PURE__ */ React12.createElement("span", { className: "ai-agent-panel__agent-active-indicator" })
+          hasActiveConversation && /* @__PURE__ */ React13.createElement("span", { className: "ai-agent-panel__agent-active-indicator" })
         ));
       }),
-      /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__collapsed-spacer" })
+      /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__collapsed-spacer" })
     ));
   }
-  return /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React13.createElement(
     "div",
     {
       className: panelClasses,
       ref: panelRef,
       style: { width: `${panelWidth}px` }
     },
-    /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React13.createElement(
       "div",
       {
         ref: resizeRef,
@@ -5844,9 +6433,9 @@ var AIAgentPanel = React12.forwardRef(({
         tabIndex: 0
       }
     ),
-    showConversationHistory && /* @__PURE__ */ React12.createElement("div", { className: `ai-agent-panel__sidebar ${isHistoryCollapsed ? "ai-agent-panel__sidebar--collapsed" : ""}` }, isHistoryCollapsed ? (
+    showConversationHistory && /* @__PURE__ */ React13.createElement("div", { className: `ai-agent-panel__sidebar ${isHistoryCollapsed ? "ai-agent-panel__sidebar--collapsed" : ""}` }, isHistoryCollapsed ? (
       // Collapsed history bar
-      /* @__PURE__ */ React12.createElement(
+      /* @__PURE__ */ React13.createElement(
         "div",
         {
           className: "ai-agent-panel__history-collapsed-bar",
@@ -5857,32 +6446,32 @@ var AIAgentPanel = React12.forwardRef(({
           },
           title: "Click to expand history"
         },
-        /* @__PURE__ */ React12.createElement(Tooltip, { content: "Expand History", side: sidebarPosition === "left" ? "right" : "left" }, /* @__PURE__ */ React12.createElement(
+        /* @__PURE__ */ React13.createElement(Tooltip, { content: "Expand History", side: sidebarPosition === "left" ? "right" : "left" }, /* @__PURE__ */ React13.createElement(
           Button,
           {
             variant: "ghost",
             size: "icon",
             onClick: toggleHistoryCollapse
           },
-          /* @__PURE__ */ React12.createElement(ChevronRightIcon, null)
+          /* @__PURE__ */ React13.createElement(ChevronRightIcon, null)
         )),
-        /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__collapsed-divider" }),
-        /* @__PURE__ */ React12.createElement(Tooltip, { content: "New Chat", side: sidebarPosition === "left" ? "right" : "left" }, /* @__PURE__ */ React12.createElement(
+        /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__collapsed-divider" }),
+        /* @__PURE__ */ React13.createElement(Tooltip, { content: "New Chat", side: sidebarPosition === "left" ? "right" : "left" }, /* @__PURE__ */ React13.createElement(
           Button,
           {
             variant: "ghost",
             size: "icon",
             onClick: handleNewConversation
           },
-          /* @__PURE__ */ React12.createElement(PlusIcon, null)
+          /* @__PURE__ */ React13.createElement(PlusIcon, null)
         )),
-        /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__collapsed-divider" }),
+        /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__collapsed-divider" }),
         agentList.map((agent) => {
           const activeConvForAgent = activeConversationsList.find(
             (conv) => conv.agentId === agent.id
           );
           const hasActiveConversation = !!activeConvForAgent;
-          return /* @__PURE__ */ React12.createElement(Tooltip, { key: agent.id, content: agent.name, side: sidebarPosition === "left" ? "right" : "left" }, /* @__PURE__ */ React12.createElement(
+          return /* @__PURE__ */ React13.createElement(Tooltip, { key: agent.id, content: agent.name, side: sidebarPosition === "left" ? "right" : "left" }, /* @__PURE__ */ React13.createElement(
             Button,
             {
               variant: agent.id === currentAgentId ? "secondary" : "ghost",
@@ -5915,7 +6504,7 @@ var AIAgentPanel = React12.forwardRef(({
               },
               className: `ai-agent-panel__agent-icon ${hasActiveConversation ? "ai-agent-panel__agent-icon--active" : ""}`
             },
-            agent.avatarUrl ? /* @__PURE__ */ React12.createElement(
+            agent.avatarUrl ? /* @__PURE__ */ React13.createElement(
               "img",
               {
                 src: agent.avatarUrl,
@@ -5923,40 +6512,40 @@ var AIAgentPanel = React12.forwardRef(({
                 className: "ai-agent-panel__agent-avatar"
               }
             ) : agent.name.charAt(0).toUpperCase(),
-            hasActiveConversation && /* @__PURE__ */ React12.createElement("span", { className: "ai-agent-panel__agent-active-indicator" })
+            hasActiveConversation && /* @__PURE__ */ React13.createElement("span", { className: "ai-agent-panel__agent-active-indicator" })
           ));
         }),
-        /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__history-collapsed-spacer" })
+        /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__history-collapsed-spacer" })
       )
-    ) : /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__header" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__header-actions" }, showSearch ? /* @__PURE__ */ React12.createElement(
+    ) : /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__header" }, /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__header-actions" }, showSearch ? /* @__PURE__ */ React13.createElement(
       Input,
       {
         placeholder: "Search conversations...",
         value: searchQuery,
         onChange: (e) => setSearchQuery(e.target.value),
-        icon: /* @__PURE__ */ React12.createElement(SearchIcon2, null),
+        icon: /* @__PURE__ */ React13.createElement(SearchIcon2, null),
         autoFocus: true,
         onBlur: () => {
           if (!searchQuery) setShowSearch(false);
         }
       }
-    ) : /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(
+    ) : /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(
       Button,
       {
         variant: "ghost",
         size: "icon",
         onClick: () => setShowSearch(true)
       },
-      /* @__PURE__ */ React12.createElement(SearchIcon2, null)
-    ), /* @__PURE__ */ React12.createElement(
+      /* @__PURE__ */ React13.createElement(SearchIcon2, null)
+    ), /* @__PURE__ */ React13.createElement(
       Button,
       {
         variant: "ghost",
         size: "icon",
         onClick: handleNewConversation
       },
-      /* @__PURE__ */ React12.createElement(PlusIcon, null)
-    ))), /* @__PURE__ */ React12.createElement(Tooltip, { content: "Collapse History", side: "bottom" }, /* @__PURE__ */ React12.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleHistoryCollapse }, /* @__PURE__ */ React12.createElement(SidebarIcon, null))), collapsible && /* @__PURE__ */ React12.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleCollapse }, position === "right" ? /* @__PURE__ */ React12.createElement(ChevronRightIcon, null) : /* @__PURE__ */ React12.createElement(ChevronLeftIcon, null))), /* @__PURE__ */ React12.createElement(ScrollArea, { className: "ai-agent-panel__conversations" }, activeConversationsList.length > 0 && /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__group ai-agent-panel__group--active" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__group-label" }, /* @__PURE__ */ React12.createElement("span", null, "Active (", activeConversationsList.length, ")")), activeConversationsList.map((activeConv) => /* @__PURE__ */ React12.createElement(
+      /* @__PURE__ */ React13.createElement(PlusIcon, null)
+    ))), /* @__PURE__ */ React13.createElement(Tooltip, { content: "Collapse History", side: "bottom" }, /* @__PURE__ */ React13.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleHistoryCollapse }, /* @__PURE__ */ React13.createElement(SidebarIcon, null))), collapsible && /* @__PURE__ */ React13.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleCollapse }, position === "right" ? /* @__PURE__ */ React13.createElement(ChevronRightIcon, null) : /* @__PURE__ */ React13.createElement(ChevronLeftIcon, null))), /* @__PURE__ */ React13.createElement(ScrollArea, { className: "ai-agent-panel__conversations" }, activeConversationsList.length > 0 && /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__group ai-agent-panel__group--active" }, /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__group-label" }, /* @__PURE__ */ React13.createElement("span", null, "Active (", activeConversationsList.length, ")")), activeConversationsList.map((activeConv) => /* @__PURE__ */ React13.createElement(
       "div",
       {
         key: activeConv.stableKey,
@@ -5968,37 +6557,37 @@ var AIAgentPanel = React12.forwardRef(({
           }
         }
       },
-      /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__conversation-content" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__conversation-title" }, activeConv.isLoading && /* @__PURE__ */ React12.createElement(LoadingDotIcon, null), /* @__PURE__ */ React12.createElement("span", null, activeConv.title))),
-      /* @__PURE__ */ React12.createElement(
+      /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__conversation-content" }, /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__conversation-title" }, activeConv.isLoading && /* @__PURE__ */ React13.createElement(LoadingDotIcon, null), /* @__PURE__ */ React13.createElement("span", null, activeConv.title))),
+      /* @__PURE__ */ React13.createElement(
         "button",
         {
           className: "ai-agent-panel__conversation-close",
           onClick: (e) => handleCloseConversation(activeConv.conversationId, e),
           title: "Close conversation"
         },
-        /* @__PURE__ */ React12.createElement(CloseIcon2, null)
+        /* @__PURE__ */ React13.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(
+    ))), conversationsLoading ? /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__loading" }, /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__loading-spinner" }), /* @__PURE__ */ React13.createElement("span", null, "Loading conversations...")) : conversationsError ? /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__empty" }, /* @__PURE__ */ React13.createElement("p", null, "Error: ", conversationsError), /* @__PURE__ */ React13.createElement(Button, { variant: "secondary", size: "sm", onClick: handleRefreshConversations }, "Retry")) : groupedConversations.length === 0 && activeConversationsList.length === 0 ? /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__empty" }, /* @__PURE__ */ React13.createElement(MessageIcon, null), /* @__PURE__ */ React13.createElement("p", null, "No conversations yet"), /* @__PURE__ */ React13.createElement("p", { className: "ai-agent-panel__empty-hint" }, "Start chatting to create your first conversation")) : /* @__PURE__ */ React13.createElement(React13.Fragment, null, activeConversationsList.length > 0 && groupedConversations.some((g) => g.count > 0) && /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__group-divider" }), groupedConversations.map((group) => /* @__PURE__ */ React13.createElement("div", { key: group.label, className: "ai-agent-panel__group" }, /* @__PURE__ */ React13.createElement(
       "div",
       {
         className: "ai-agent-panel__group-label ai-agent-panel__group-label--clickable",
         onClick: () => toggleSection(group.label)
       },
-      /* @__PURE__ */ React12.createElement("span", null, group.label, " ", group.count > 0 && `(${group.count})`),
-      /* @__PURE__ */ React12.createElement("span", { className: "ai-agent-panel__group-chevron" }, expandedSections[group.label] ? "\u25BC" : "\u25B6")
+      /* @__PURE__ */ React13.createElement("span", null, group.label, " ", group.count > 0 && `(${group.count})`),
+      /* @__PURE__ */ React13.createElement("span", { className: "ai-agent-panel__group-chevron" }, expandedSections[group.label] ? "\u25BC" : "\u25B6")
     ), expandedSections[group.label] && group.conversations.length > 0 && group.conversations.map((conv) => {
       const isActive = activeConversations.has(conv.conversationId);
-      return /* @__PURE__ */ React12.createElement(
+      return /* @__PURE__ */ React13.createElement(
         "div",
         {
           key: conv.conversationId,
           className: `ai-agent-panel__conversation ${currentConversationId === conv.conversationId ? "ai-agent-panel__conversation--current" : ""} ${isActive ? "ai-agent-panel__conversation--in-active" : ""}`,
           onClick: () => handleConversationSelect(conv)
         },
-        /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__conversation-content" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__conversation-title" }, isActive && /* @__PURE__ */ React12.createElement("span", { className: "ai-agent-panel__active-badge" }, "\u25CF"), conversationFirstPrompts[conv.conversationId] || conv.title))
+        /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__conversation-content" }, /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__conversation-title" }, isActive && /* @__PURE__ */ React13.createElement("span", { className: "ai-agent-panel__active-badge" }, "\u25CF"), conversationFirstPrompts[conv.conversationId] || conv.title))
       );
     }))))))),
-    /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__chat" }, !showConversationHistory && collapsible && /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__chat-header" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__chat-header-spacer" }), /* @__PURE__ */ React12.createElement(Tooltip, { content: "Collapse Panel", side: position === "right" ? "left" : "right" }, /* @__PURE__ */ React12.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleCollapse }, position === "right" ? /* @__PURE__ */ React12.createElement(ChevronRightIcon, null) : /* @__PURE__ */ React12.createElement(ChevronLeftIcon, null)))), showContextNotification && /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__context-notification" }, /* @__PURE__ */ React12.createElement(SparkleIcon, null), /* @__PURE__ */ React12.createElement("span", null, "Agent now has new context")), activeConversationsList.map((activeConv) => /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__chat" }, !showConversationHistory && collapsible && /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__chat-header" }, /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__chat-header-spacer" }), /* @__PURE__ */ React13.createElement(Tooltip, { content: "Collapse Panel", side: position === "right" ? "left" : "right" }, /* @__PURE__ */ React13.createElement(Button, { variant: "ghost", size: "icon", onClick: toggleCollapse }, position === "right" ? /* @__PURE__ */ React13.createElement(ChevronRightIcon, null) : /* @__PURE__ */ React13.createElement(ChevronLeftIcon, null)))), showContextNotification && /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__context-notification" }, /* @__PURE__ */ React13.createElement(SparkleIcon, null), /* @__PURE__ */ React13.createElement("span", null, "Agent now has new context")), activeConversationsList.map((activeConv) => /* @__PURE__ */ React13.createElement(
       ChatPanelWrapper,
       {
         key: `${activeConv.stableKey}-${activeConv.agentId}`,
@@ -6030,10 +6619,25 @@ var AIAgentPanel = React12.forwardRef(({
         maxContextTokens,
         enableContextDetailView,
         onConversationCreated: handleConversationCreated,
-        conversationInitialPrompt: activeConv.conversationInitialPrompt
+        conversationInitialPrompt: activeConv.conversationInitialPrompt,
+        cssUrl,
+        markdownClass,
+        width,
+        height,
+        scrollToEnd,
+        prismStyle,
+        showSaveButton,
+        showEmailButton,
+        messages,
+        showCallToAction,
+        callToActionButtonText,
+        callToActionEmailAddress,
+        callToActionEmailSubject,
+        customerEmailCaptureMode,
+        customerEmailCapturePlaceholder
       }
-    )), loadingConversationId && /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__conversation-loading-overlay" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__loading-spinner" }), /* @__PURE__ */ React12.createElement("p", null, "Loading conversation...")), currentAgentMetadata && activeConversationsList.length === 0 && !loadingConversationId && /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__empty-chat" }, /* @__PURE__ */ React12.createElement(MessageIcon, null), /* @__PURE__ */ React12.createElement("p", null, "Select a conversation or start a new one"), /* @__PURE__ */ React12.createElement(Button, { variant: "default", size: "sm", onClick: handleNewConversation }, "New Conversation")), agentsLoading && !currentAgentMetadata && /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__loading" }, /* @__PURE__ */ React12.createElement("div", { className: "ai-agent-panel__loading-spinner" }), /* @__PURE__ */ React12.createElement("p", null, "Loading agent..."))),
-    /* @__PURE__ */ React12.createElement(
+    )), loadingConversationId && /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__conversation-loading-overlay" }, /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__loading-spinner" }), /* @__PURE__ */ React13.createElement("p", null, "Loading conversation...")), currentAgentMetadata && activeConversationsList.length === 0 && !loadingConversationId && /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__empty-chat" }, /* @__PURE__ */ React13.createElement(MessageIcon, null), /* @__PURE__ */ React13.createElement("p", null, "Select a conversation or start a new one"), /* @__PURE__ */ React13.createElement(Button, { variant: "default", size: "sm", onClick: handleNewConversation }, "New Conversation")), agentsLoading && !currentAgentMetadata && /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__loading" }, /* @__PURE__ */ React13.createElement("div", { className: "ai-agent-panel__loading-spinner" }), /* @__PURE__ */ React13.createElement("p", null, "Loading agent..."))),
+    /* @__PURE__ */ React13.createElement(
       Dialog,
       {
         isOpen: showHandoffDialog,
@@ -6041,7 +6645,7 @@ var AIAgentPanel = React12.forwardRef(({
         title: "Switch 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__ */ React12.createElement(DialogFooter, null, /* @__PURE__ */ React12.createElement(Button, { variant: "outline", onClick: handleHandoffCancel }, "Stay with current agent"), /* @__PURE__ */ React12.createElement(Button, { onClick: handleHandoffConfirm }, "Switch agent"))
+      /* @__PURE__ */ React13.createElement(DialogFooter, null, /* @__PURE__ */ React13.createElement(Button, { variant: "outline", onClick: handleHandoffCancel }, "Stay with current agent"), /* @__PURE__ */ React13.createElement(Button, { onClick: handleHandoffConfirm }, "Switch agent"))
     )
   );
 });