@kite-copilot/chat-panel 0.2.23 → 0.2.25

package/dist/auto.cjs

@@ -885,6 +885,7 @@ function DataRenderer({ type, data }) {
 }
 
 // src/ChatPanel.tsx
+var import_supabase_js = require("@supabase/supabase-js");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var DEFAULT_AGENT_URL = "http://localhost:5002";
 var PANEL_WIDTH = 340;
@@ -938,7 +939,7 @@ function renderMarkdown(text) {
             "a",
             {
               href: linkMatch[2],
-              className: "text-blue-600 hover:underline",
+              className: "kite-link",
               target: "_blank",
               rel: "noopener noreferrer",
               children: linkMatch[1]
@@ -949,7 +950,44 @@ function renderMarkdown(text) {
         remaining = remaining.slice(linkMatch[0].length);
         continue;
       }
-      const nextSpecial = remaining.search(/[`*\[]/);
+      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]/);
       if (nextSpecial === -1) {
         parts.push(remaining);
         break;
@@ -1269,17 +1307,23 @@ var initialMessages = [];
 function ChatPanel({
   isOpen = true,
   onClose,
+  onOpen,
   onBack,
   onNavigate,
   onActionComplete,
   currentPage,
   agentUrl = DEFAULT_AGENT_URL,
   startingQuestions: startingQuestionsProp,
-  startingQuestionsEndpoint
+  startingQuestionsEndpoint,
+  supabaseUrl,
+  supabaseAnonKey
 } = {}) {
   const [messages, setMessages] = React4.useState(initialMessages);
   const [input, setInput] = React4.useState("");
   const [sessionId, setSessionId] = React4.useState(() => crypto.randomUUID());
+  const [isEscalated, setIsEscalated] = React4.useState(false);
+  const [supabaseClient, setSupabaseClient] = React4.useState(null);
+  const realtimeChannelRef = React4.useRef(null);
   const resetSession = React4.useCallback(() => {
     setSessionId(crypto.randomUUID());
   }, []);
@@ -1370,6 +1414,9 @@ 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;
@@ -1501,6 +1548,63 @@ function ChatPanel({
     guideComplete,
     onNavigate
   ]);
+  React4.useEffect(() => {
+    if (supabaseUrl && supabaseAnonKey && !supabaseClient) {
+      const client = (0, import_supabase_js.createClient)(supabaseUrl, supabaseAnonKey);
+      setSupabaseClient(client);
+    }
+  }, [supabaseUrl, supabaseAnonKey, supabaseClient]);
+  const subscribeToAgentMessages = React4.useCallback((currentSessionId) => {
+    if (!supabaseClient) return;
+    if (realtimeChannelRef.current) {
+      supabaseClient.removeChannel(realtimeChannelRef.current);
+    }
+    const channel = supabaseClient.channel(`user-chat-${currentSessionId}`).on(
+      "postgres_changes",
+      {
+        event: "INSERT",
+        schema: "public",
+        table: "chat_history",
+        filter: `session_id=eq.${currentSessionId}`
+      },
+      (payload) => {
+        const newMsg = payload.new;
+        if (newMsg.role === "agent") {
+          setMessages((prev) => [
+            ...prev,
+            {
+              id: Date.now(),
+              role: "agent",
+              kind: "text",
+              content: newMsg.content
+            }
+          ]);
+        }
+      }
+    ).subscribe();
+    realtimeChannelRef.current = channel;
+  }, [supabaseClient]);
+  React4.useEffect(() => {
+    return () => {
+      if (realtimeChannelRef.current && supabaseClient) {
+        supabaseClient.removeChannel(realtimeChannelRef.current);
+      }
+    };
+  }, [supabaseClient]);
+  const sendEscalatedMessage = React4.useCallback(async (content) => {
+    if (!supabaseClient || !isEscalated) return false;
+    try {
+      await supabaseClient.from("chat_history").insert({
+        session_id: sessionId,
+        role: "user",
+        content
+      });
+      return true;
+    } catch (err) {
+      console.error("[KiteChat] Failed to send escalated message:", err);
+      return false;
+    }
+  }, [supabaseClient, isEscalated, sessionId]);
   function streamAssistantMessage(messageId, fullText, followups) {
     let textToStream = fullText;
     let extractedFollowups = followups;
@@ -1611,6 +1715,17 @@ function ChatPanel({
       return;
     }
     if (!trimmed) return;
+    if (isEscalated && supabaseClient) {
+      const userMessage = {
+        id: Date.now(),
+        role: "user",
+        content: trimmed
+      };
+      setMessages((prev) => [...prev, userMessage]);
+      sendEscalatedMessage(trimmed);
+      setInput("");
+      return;
+    }
     startChatFlow(trimmed);
     setInput("");
   }
@@ -1719,7 +1834,11 @@ function ChatPanel({
     const isRespondingToNotification = lastAssistantMessage?.isNotificationMessage === true;
     const now = Date.now();
     const userMessage = { id: now, role: "user", content: userText };
-    setMessages((prev) => [...prev, userMessage]);
+    setMessages(
+      (prev) => prev.map(
+        (m) => m.followups && m.followups.length > 0 ? { ...m, followupSelected: true } : m
+      ).concat(userMessage)
+    );
     if (isRespondingToNotification) {
       const thankYouMessageId = Date.now() + 1;
       const thankYouMessage = {
@@ -1935,6 +2054,18 @@ function ChatPanel({
               setProgressSteps([]);
               setPhase("idle");
               streamCompleted = true;
+            } else if (eventType === "escalation") {
+              setIsEscalated(true);
+              setPhase("idle");
+              const escalationMessageId = Date.now() + 2;
+              const escalationMessage = {
+                id: escalationMessageId,
+                role: "assistant",
+                kind: "text",
+                content: data.message || "You've been connected to our support queue. An agent will be with you shortly."
+              };
+              setMessages((prev) => [...prev, escalationMessage]);
+              subscribeToAgentMessages(sessionId);
             }
           } catch (parseError) {
             console.error("Failed to parse SSE event:", parseError);
@@ -2597,6 +2728,81 @@ ${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",
     {
@@ -2727,6 +2933,12 @@ ${userText}`
                 if (isUser) {
                   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `flex justify-end ${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "max-w-[260px] rounded-2xl rounded-br-md bg-gray-900 px-3.5 py-2.5 text-sm text-white shadow-sm", children: message.content }) }, message.id);
                 }
+                if (message.role === "agent") {
+                  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `flex justify-start ${isRoleChange ? "mt-3" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "max-w-[260px] rounded-2xl rounded-bl-md bg-blue-50 border border-blue-200 px-3.5 py-2.5 text-sm text-gray-900 shadow-sm", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-xs text-blue-600 font-medium mb-1", children: "Support Agent" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "whitespace-pre-wrap leading-relaxed", children: renderMarkdown(message.content || "") })
+                  ] }) }, message.id);
+                }
                 if (message.kind === "searchSummary") {
                   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                     "div",
@@ -3909,26 +4121,6 @@ ${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,
@@ -3938,7 +4130,9 @@ function ChatPanelWithToggle({
   startingQuestionsEndpoint,
   defaultOpen = false,
   isOpen: controlledIsOpen,
-  onOpenChange
+  onOpenChange,
+  supabaseUrl,
+  supabaseAnonKey
 }) {
   const [internalIsOpen, setInternalIsOpen] = React4.useState(defaultOpen);
   const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
@@ -3958,22 +4152,22 @@ function ChatPanelWithToggle({
       document.body.style.transition = originalTransition;
     };
   }, [isOpen]);
-  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
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    ChatPanel,
+    {
+      isOpen,
+      onClose: () => setIsOpen(false),
+      onOpen: () => setIsOpen(true),
+      onNavigate,
+      onActionComplete,
+      currentPage,
+      agentUrl,
+      startingQuestions,
+      startingQuestionsEndpoint,
+      supabaseUrl,
+      supabaseAnonKey
+    }
+  );
 }
 
 // src/createKiteChat.tsx

package/dist/auto.d.cts

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

package/dist/auto.d.ts

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

package/dist/auto.js

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