@kite-copilot/chat-panel 0.2.21 → 0.2.23

package/dist/auto.cjs

@@ -888,6 +888,9 @@ function DataRenderer({ type, data }) {
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var DEFAULT_AGENT_URL = "http://localhost:5002";
 var PANEL_WIDTH = 340;
+function unescapeJsonString(str) {
+  return str.replace(/\\\\n/g, "\n").replace(/\\\\t/g, "	").replace(/\\\\"/g, '"').replace(/\\\\\\\\/g, "\\").replace(/\\n/g, "\n").replace(/\\t/g, "	").replace(/\\"/g, '"').replace(/\\\\/g, "\\");
+}
 function renderMarkdown(text) {
   if (!text) return null;
   const lines = text.split("\n");
@@ -935,7 +938,7 @@ function renderMarkdown(text) {
             "a",
             {
               href: linkMatch[2],
-              className: "kite-link",
+              className: "text-blue-600 hover:underline",
               target: "_blank",
               rel: "noopener noreferrer",
               children: linkMatch[1]
@@ -946,44 +949,7 @@ function renderMarkdown(text) {
         remaining = remaining.slice(linkMatch[0].length);
         continue;
       }
-      const urlMatch = remaining.match(/^(https?:\/\/[^\s<>]+|www\.[^\s<>]+)/);
-      if (urlMatch) {
-        const url = urlMatch[1];
-        const href = url.startsWith("www.") ? `https://${url}` : url;
-        parts.push(
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-            "a",
-            {
-              href,
-              className: "kite-link",
-              target: "_blank",
-              rel: "noopener noreferrer",
-              children: url
-            },
-            keyIndex++
-          )
-        );
-        remaining = remaining.slice(url.length);
-        continue;
-      }
-      const emailMatch = remaining.match(/^([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})/);
-      if (emailMatch) {
-        const email = emailMatch[1];
-        parts.push(
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-            "a",
-            {
-              href: `mailto:${email}`,
-              className: "kite-link",
-              children: email
-            },
-            keyIndex++
-          )
-        );
-        remaining = remaining.slice(email.length);
-        continue;
-      }
-      const nextSpecial = remaining.search(/[`*\[@h]/);
+      const nextSpecial = remaining.search(/[`*\[]/);
       if (nextSpecial === -1) {
         parts.push(remaining);
         break;
@@ -1303,7 +1269,6 @@ var initialMessages = [];
 function ChatPanel({
   isOpen = true,
   onClose,
-  onOpen,
   onBack,
   onNavigate,
   onActionComplete,
@@ -1405,9 +1370,6 @@ function ChatPanel({
   const [pendingBulkSession, setPendingBulkSession] = React4.useState(null);
   const pendingBulkSessionRef = React4.useRef(null);
   const fileInputRef = React4.useRef(null);
-  const [searchExpanded, setSearchExpanded] = React4.useState(false);
-  const [searchInput, setSearchInput] = React4.useState("");
-  const searchInputRef = React4.useRef(null);
   React4.useEffect(() => {
     if (!activeGuide || activeGuide.id !== "add-api-key" || activeGuide.stepIndex !== 2) {
       return;
@@ -1566,6 +1528,7 @@ function ChatPanel({
       } catch {
       }
     }
+    textToStream = unescapeJsonString(textToStream);
     const tokens = textToStream.split(" ");
     let i = 0;
     const intervalId = window.setInterval(() => {
@@ -1756,11 +1719,7 @@ function ChatPanel({
     const isRespondingToNotification = lastAssistantMessage?.isNotificationMessage === true;
     const now = Date.now();
     const userMessage = { id: now, role: "user", content: userText };
-    setMessages(
-      (prev) => prev.map(
-        (m) => m.followups && m.followups.length > 0 ? { ...m, followupSelected: true } : m
-      ).concat(userMessage)
-    );
+    setMessages((prev) => [...prev, userMessage]);
     if (isRespondingToNotification) {
       const thankYouMessageId = Date.now() + 1;
       const thankYouMessage = {
@@ -2638,81 +2597,6 @@ ${userText}`
       ]);
     }
   }
-  if (!isOpen) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "fixed bottom-6 left-1/2 -translate-x-1/2 z-50", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `flex items-center gap-3 rounded-2xl bg-white border border-gray-200 shadow-lg px-4 py-2 hover:shadow-xl transition-all duration-300 ease-out focus-within:border-gray-700 ${searchExpanded ? "w-[480px]" : "w-[320px]"}`, children: !searchExpanded ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-3 w-full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-        "button",
-        {
-          onClick: () => {
-            setSearchExpanded(true);
-            setTimeout(() => searchInputRef.current?.focus(), 100);
-          },
-          className: "flex items-center gap-3 flex-1 group",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-sm text-gray-500 flex-1 text-left", children: "Ask a question..." }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs text-gray-400 font-medium", children: "\u2318I" })
-          ]
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        "button",
-        {
-          onClick: () => {
-            onOpen?.();
-          },
-          className: "h-7 w-7 rounded-lg bg-gray-100 hover:bg-gray-200 flex items-center justify-center transition-colors",
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Sparkles, { className: "h-3.5 w-3.5 text-black", fill: "currentColor" })
-        }
-      )
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        "input",
-        {
-          ref: searchInputRef,
-          type: "text",
-          value: searchInput,
-          onChange: (e) => setSearchInput(e.target.value),
-          onKeyDown: (e) => {
-            if (e.key === "Enter" && searchInput.trim()) {
-              e.preventDefault();
-              onOpen?.();
-              startChatFlow(searchInput.trim());
-              setSearchInput("");
-              setSearchExpanded(false);
-            } else if (e.key === "Escape") {
-              setSearchExpanded(false);
-              setSearchInput("");
-            }
-          },
-          onBlur: () => {
-            if (!searchInput.trim()) {
-              setTimeout(() => setSearchExpanded(false), 200);
-            }
-          },
-          placeholder: "Ask a question...",
-          className: "flex-1 text-sm text-gray-700 outline-none bg-transparent"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs text-gray-400 font-medium", children: "\u21B5 Enter" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          "button",
-          {
-            onClick: () => {
-              onOpen?.();
-              if (searchInput.trim()) {
-                setInput(searchInput);
-              }
-              setSearchInput("");
-              setSearchExpanded(false);
-            },
-            className: "h-7 w-7 rounded-lg bg-gray-100 hover:bg-gray-200 flex items-center justify-center transition-colors cursor-pointer",
-            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Sparkles, { className: "h-3.5 w-3.5 text-black", fill: "currentColor" })
-          }
-        )
-      ] })
-    ] }) }) });
-  }
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "section",
     {
@@ -4025,6 +3909,26 @@ ${userText}`
     }
   );
 }
+function PanelToggle({
+  isOpen,
+  onClick,
+  className = ""
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: `fixed top-1/2 z-50 flex items-center justify-center w-6 h-16 bg-gray-100 hover:bg-gray-200 border border-gray-200 border-r-0 rounded-l-lg text-gray-600 hover:text-gray-800 shadow-md transition-all duration-300 ${className}`,
+      "aria-label": isOpen ? "Close help panel" : "Open help panel",
+      style: {
+        right: isOpen ? `${PANEL_WIDTH}px` : "0px",
+        transform: "translateY(-50%)"
+      },
+      children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.ChevronRight, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.ChevronLeft, { className: "h-4 w-4" })
+    }
+  );
+}
 function ChatPanelWithToggle({
   onNavigate,
   onActionComplete,
@@ -4054,20 +3958,22 @@ function ChatPanelWithToggle({
       document.body.style.transition = originalTransition;
     };
   }, [isOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    ChatPanel,
-    {
-      isOpen,
-      onClose: () => setIsOpen(false),
-      onOpen: () => setIsOpen(true),
-      onNavigate,
-      onActionComplete,
-      currentPage,
-      agentUrl,
-      startingQuestions,
-      startingQuestionsEndpoint
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PanelToggle, { isOpen, onClick: () => setIsOpen(!isOpen) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      ChatPanel,
+      {
+        isOpen,
+        onClose: () => setIsOpen(false),
+        onNavigate,
+        onActionComplete,
+        currentPage,
+        agentUrl,
+        startingQuestions,
+        startingQuestionsEndpoint
+      }
+    )
+  ] });
 }
 
 // src/createKiteChat.tsx

package/dist/auto.d.cts

@@ -1,4 +1,4 @@
-import { K as KiteChatConfig, a as KiteChatInstance } from './createKiteChat-CyoN-YV4.cjs';
+import { K as KiteChatConfig, a as KiteChatInstance } from './createKiteChat-BMLaQQQk.cjs';
 import 'react/jsx-runtime';
 
 /**

package/dist/auto.d.ts

@@ -1,4 +1,4 @@
-import { K as KiteChatConfig, a as KiteChatInstance } from './createKiteChat-CyoN-YV4.js';
+import { K as KiteChatConfig, a as KiteChatInstance } from './createKiteChat-BMLaQQQk.js';
 import 'react/jsx-runtime';
 
 /**

package/dist/auto.js

@@ -1,6 +1,6 @@
 import {
   createKiteChat
-} from "./chunk-OQCVEXPE.js";
+} from "./chunk-MIJSRC3X.js";
 
 // src/auto.ts
 function mountKiteChat(config) {

package/dist/{chunk-OQCVEXPE.js → chunk-MIJSRC3X.js}

@@ -887,6 +887,9 @@ import { ArrowLeft, ArrowUp, Command, CornerDownLeft, CheckCircle2 as CheckCircl
 import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var DEFAULT_AGENT_URL = "http://localhost:5002";
 var PANEL_WIDTH = 340;
+function unescapeJsonString(str) {
+  return str.replace(/\\\\n/g, "\n").replace(/\\\\t/g, "	").replace(/\\\\"/g, '"').replace(/\\\\\\\\/g, "\\").replace(/\\n/g, "\n").replace(/\\t/g, "	").replace(/\\"/g, '"').replace(/\\\\/g, "\\");
+}
 function renderMarkdown(text) {
   if (!text) return null;
   const lines = text.split("\n");
@@ -934,7 +937,7 @@ function renderMarkdown(text) {
             "a",
             {
               href: linkMatch[2],
-              className: "kite-link",
+              className: "text-blue-600 hover:underline",
               target: "_blank",
               rel: "noopener noreferrer",
               children: linkMatch[1]
@@ -945,44 +948,7 @@ function renderMarkdown(text) {
         remaining = remaining.slice(linkMatch[0].length);
         continue;
       }
-      const urlMatch = remaining.match(/^(https?:\/\/[^\s<>]+|www\.[^\s<>]+)/);
-      if (urlMatch) {
-        const url = urlMatch[1];
-        const href = url.startsWith("www.") ? `https://${url}` : url;
-        parts.push(
-          /* @__PURE__ */ jsx9(
-            "a",
-            {
-              href,
-              className: "kite-link",
-              target: "_blank",
-              rel: "noopener noreferrer",
-              children: url
-            },
-            keyIndex++
-          )
-        );
-        remaining = remaining.slice(url.length);
-        continue;
-      }
-      const emailMatch = remaining.match(/^([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})/);
-      if (emailMatch) {
-        const email = emailMatch[1];
-        parts.push(
-          /* @__PURE__ */ jsx9(
-            "a",
-            {
-              href: `mailto:${email}`,
-              className: "kite-link",
-              children: email
-            },
-            keyIndex++
-          )
-        );
-        remaining = remaining.slice(email.length);
-        continue;
-      }
-      const nextSpecial = remaining.search(/[`*\[@h]/);
+      const nextSpecial = remaining.search(/[`*\[]/);
       if (nextSpecial === -1) {
         parts.push(remaining);
         break;
@@ -1302,7 +1268,6 @@ var initialMessages = [];
 function ChatPanel({
   isOpen = true,
   onClose,
-  onOpen,
   onBack,
   onNavigate,
   onActionComplete,
@@ -1404,9 +1369,6 @@ function ChatPanel({
   const [pendingBulkSession, setPendingBulkSession] = React4.useState(null);
   const pendingBulkSessionRef = React4.useRef(null);
   const fileInputRef = React4.useRef(null);
-  const [searchExpanded, setSearchExpanded] = React4.useState(false);
-  const [searchInput, setSearchInput] = React4.useState("");
-  const searchInputRef = React4.useRef(null);
   React4.useEffect(() => {
     if (!activeGuide || activeGuide.id !== "add-api-key" || activeGuide.stepIndex !== 2) {
       return;
@@ -1565,6 +1527,7 @@ function ChatPanel({
       } catch {
       }
     }
+    textToStream = unescapeJsonString(textToStream);
     const tokens = textToStream.split(" ");
     let i = 0;
     const intervalId = window.setInterval(() => {
@@ -1755,11 +1718,7 @@ function ChatPanel({
     const isRespondingToNotification = lastAssistantMessage?.isNotificationMessage === true;
     const now = Date.now();
     const userMessage = { id: now, role: "user", content: userText };
-    setMessages(
-      (prev) => prev.map(
-        (m) => m.followups && m.followups.length > 0 ? { ...m, followupSelected: true } : m
-      ).concat(userMessage)
-    );
+    setMessages((prev) => [...prev, userMessage]);
     if (isRespondingToNotification) {
       const thankYouMessageId = Date.now() + 1;
       const thankYouMessage = {
@@ -2637,81 +2596,6 @@ ${userText}`
       ]);
     }
   }
-  if (!isOpen) {
-    return /* @__PURE__ */ jsx9("div", { className: "fixed bottom-6 left-1/2 -translate-x-1/2 z-50", children: /* @__PURE__ */ jsx9("div", { className: `flex items-center gap-3 rounded-2xl bg-white border border-gray-200 shadow-lg px-4 py-2 hover:shadow-xl transition-all duration-300 ease-out focus-within:border-gray-700 ${searchExpanded ? "w-[480px]" : "w-[320px]"}`, children: !searchExpanded ? /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-3 w-full", children: [
-      /* @__PURE__ */ jsxs5(
-        "button",
-        {
-          onClick: () => {
-            setSearchExpanded(true);
-            setTimeout(() => searchInputRef.current?.focus(), 100);
-          },
-          className: "flex items-center gap-3 flex-1 group",
-          children: [
-            /* @__PURE__ */ jsx9("span", { className: "text-sm text-gray-500 flex-1 text-left", children: "Ask a question..." }),
-            /* @__PURE__ */ jsx9("span", { className: "text-xs text-gray-400 font-medium", children: "\u2318I" })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx9(
-        "button",
-        {
-          onClick: () => {
-            onOpen?.();
-          },
-          className: "h-7 w-7 rounded-lg bg-gray-100 hover:bg-gray-200 flex items-center justify-center transition-colors",
-          children: /* @__PURE__ */ jsx9(Sparkles, { className: "h-3.5 w-3.5 text-black", fill: "currentColor" })
-        }
-      )
-    ] }) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
-      /* @__PURE__ */ jsx9(
-        "input",
-        {
-          ref: searchInputRef,
-          type: "text",
-          value: searchInput,
-          onChange: (e) => setSearchInput(e.target.value),
-          onKeyDown: (e) => {
-            if (e.key === "Enter" && searchInput.trim()) {
-              e.preventDefault();
-              onOpen?.();
-              startChatFlow(searchInput.trim());
-              setSearchInput("");
-              setSearchExpanded(false);
-            } else if (e.key === "Escape") {
-              setSearchExpanded(false);
-              setSearchInput("");
-            }
-          },
-          onBlur: () => {
-            if (!searchInput.trim()) {
-              setTimeout(() => setSearchExpanded(false), 200);
-            }
-          },
-          placeholder: "Ask a question...",
-          className: "flex-1 text-sm text-gray-700 outline-none bg-transparent"
-        }
-      ),
-      /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx9("span", { className: "text-xs text-gray-400 font-medium", children: "\u21B5 Enter" }),
-        /* @__PURE__ */ jsx9(
-          "button",
-          {
-            onClick: () => {
-              onOpen?.();
-              if (searchInput.trim()) {
-                setInput(searchInput);
-              }
-              setSearchInput("");
-              setSearchExpanded(false);
-            },
-            className: "h-7 w-7 rounded-lg bg-gray-100 hover:bg-gray-200 flex items-center justify-center transition-colors cursor-pointer",
-            children: /* @__PURE__ */ jsx9(Sparkles, { className: "h-3.5 w-3.5 text-black", fill: "currentColor" })
-          }
-        )
-      ] })
-    ] }) }) });
-  }
   return /* @__PURE__ */ jsxs5(
     "section",
     {
@@ -4073,20 +3957,22 @@ function ChatPanelWithToggle({
       document.body.style.transition = originalTransition;
     };
   }, [isOpen]);
-  return /* @__PURE__ */ jsx9(
-    ChatPanel,
-    {
-      isOpen,
-      onClose: () => setIsOpen(false),
-      onOpen: () => setIsOpen(true),
-      onNavigate,
-      onActionComplete,
-      currentPage,
-      agentUrl,
-      startingQuestions,
-      startingQuestionsEndpoint
-    }
-  );
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsx9(PanelToggle, { isOpen, onClick: () => setIsOpen(!isOpen) }),
+    /* @__PURE__ */ jsx9(
+      ChatPanel,
+      {
+        isOpen,
+        onClose: () => setIsOpen(false),
+        onNavigate,
+        onActionComplete,
+        currentPage,
+        agentUrl,
+        startingQuestions,
+        startingQuestionsEndpoint
+      }
+    )
+  ] });
 }
 function HelpButton({ onClick, className = "" }) {
   return /* @__PURE__ */ jsx9(

package/dist/{createKiteChat-CyoN-YV4.d.cts → createKiteChat-BMLaQQQk.d.cts}

@@ -87,8 +87,6 @@ interface ChatPanelProps {
     isOpen?: boolean;
     /** Callback when the panel should close */
     onClose?: () => void;
-    /** Callback when the panel should open */
-    onOpen?: () => void;
     onBack?: () => void;
     onNavigate?: (page: Page, subtab?: SettingsTab) => void;
     onActionComplete?: (actionType: ActionType, data: ActionData) => void;
@@ -99,7 +97,7 @@ interface ChatPanelProps {
     /** API endpoint to fetch starting questions */
     startingQuestionsEndpoint?: string;
 }
-declare function ChatPanel({ isOpen, onClose, onOpen, onBack, onNavigate, onActionComplete, currentPage, agentUrl, startingQuestions: startingQuestionsProp, startingQuestionsEndpoint, }?: ChatPanelProps): react_jsx_runtime.JSX.Element;
+declare function ChatPanel({ isOpen, onClose, onBack, onNavigate, onActionComplete, currentPage, agentUrl, startingQuestions: startingQuestionsProp, startingQuestionsEndpoint, }?: ChatPanelProps): react_jsx_runtime.JSX.Element;
 /**
  * PanelToggle - An arrow button on the right edge that toggles the side panel
  * Shows left arrow when closed (click to open), right arrow when open (click to close)

package/dist/{createKiteChat-CyoN-YV4.d.ts → createKiteChat-BMLaQQQk.d.ts}

@@ -87,8 +87,6 @@ interface ChatPanelProps {
     isOpen?: boolean;
     /** Callback when the panel should close */
     onClose?: () => void;
-    /** Callback when the panel should open */
-    onOpen?: () => void;
     onBack?: () => void;
     onNavigate?: (page: Page, subtab?: SettingsTab) => void;
     onActionComplete?: (actionType: ActionType, data: ActionData) => void;
@@ -99,7 +97,7 @@ interface ChatPanelProps {
     /** API endpoint to fetch starting questions */
     startingQuestionsEndpoint?: string;
 }
-declare function ChatPanel({ isOpen, onClose, onOpen, onBack, onNavigate, onActionComplete, currentPage, agentUrl, startingQuestions: startingQuestionsProp, startingQuestionsEndpoint, }?: ChatPanelProps): react_jsx_runtime.JSX.Element;
+declare function ChatPanel({ isOpen, onClose, onBack, onNavigate, onActionComplete, currentPage, agentUrl, startingQuestions: startingQuestionsProp, startingQuestionsEndpoint, }?: ChatPanelProps): react_jsx_runtime.JSX.Element;
 /**
  * PanelToggle - An arrow button on the right edge that toggles the side panel
  * Shows left arrow when closed (click to open), right arrow when open (click to close)