@kite-copilot/chat-panel 0.2.47 → 0.2.49

package/README.md

@@ -548,6 +548,36 @@ If upgrading from a previous version with overlay/floating panel:
 <ChatPanelWithToggle />
 ```
 
+## Local Development with Test Page
+
+To test the embed script locally using the included test page:
+
+1. **Install dependencies:**
+   ```bash
+   npm install
+   ```
+
+2. **Build the embed script:**
+   ```bash
+   npm run build
+   ```
+
+3. **Serve the test page:**
+   ```bash
+   npx serve .
+   ```
+
+4. **Open in browser:**
+   Navigate to `http://localhost:3000/test/test-embed.html`
+
+The test page (`test/test-embed.html`) provides:
+- Interactive controls to open/close/toggle the panel
+- Page context switching buttons
+- Backend URL toggle (localhost vs production)
+- Event logging for navigation and action callbacks
+
+**Note:** Make sure your backend agent is running on `http://localhost:5002` (or toggle to production in the test page).
+
 ## License
 
 MIT © Kite

package/dist/auto.cjs

@@ -35,7 +35,7 @@ __export(auto_exports, {
 module.exports = __toCommonJS(auto_exports);
 
 // src/createKiteChat.tsx
-var import_react = __toESM(require("react"), 1);
+var import_react2 = __toESM(require("react"), 1);
 var import_client = require("react-dom/client");
 
 // src/ChatPanel.tsx
@@ -447,6 +447,78 @@ function useOrgConfig({ agentUrl, orgId }) {
   return state;
 }
 
+// src/hooks/useFrontendToolExecutor.ts
+var import_react = require("react");
+function useFrontendToolExecutor({
+  productBackendUrl,
+  agentUrl,
+  sessionId
+}) {
+  const sendToolResult = (0, import_react.useCallback)(async (payload) => {
+    try {
+      await fetch(`${agentUrl}/chat/tool-result`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(payload)
+      });
+    } catch (error) {
+      console.error("[FrontendToolExecutor] Failed to send tool result:", error);
+    }
+  }, [agentUrl]);
+  const executeToolRequest = (0, import_react.useCallback)(async (toolRequest) => {
+    const { call_id, tool_name, arguments: args, endpoint, method, path_params } = toolRequest;
+    console.log("[FrontendToolExecutor] Executing tool:", tool_name, "with args:", args);
+    try {
+      let url = endpoint;
+      for (const param of path_params) {
+        if (args[param]) {
+          url = url.replace(`{${param}}`, encodeURIComponent(args[param]));
+        }
+      }
+      const queryParams = new URLSearchParams();
+      for (const [key, value] of Object.entries(args)) {
+        if (!path_params.includes(key) && value !== void 0 && value !== null) {
+          queryParams.append(key, String(value));
+        }
+      }
+      const queryString = queryParams.toString();
+      const fullUrl = `${productBackendUrl}${url}${queryString ? "?" + queryString : ""}`;
+      console.log("[FrontendToolExecutor] Fetching:", fullUrl);
+      const response = await fetch(fullUrl, {
+        method,
+        credentials: "include",
+        headers: {
+          "Accept": "application/json",
+          "Content-Type": "application/json"
+        }
+      });
+      let result;
+      if (response.ok) {
+        result = await response.json();
+        console.log("[FrontendToolExecutor] Tool result:", result);
+      } else {
+        const errorText = await response.text();
+        throw new Error(`HTTP ${response.status}: ${errorText}`);
+      }
+      await sendToolResult({
+        session_id: sessionId,
+        call_id,
+        result
+      });
+    } catch (error) {
+      console.error("[FrontendToolExecutor] Tool execution failed:", error);
+      await sendToolResult({
+        session_id: sessionId,
+        call_id,
+        error: error instanceof Error ? error.message : "Unknown error"
+      });
+    }
+  }, [productBackendUrl, sessionId, sendToolResult]);
+  return { executeToolRequest };
+}
+
 // src/components/ui/card.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function Card({ className, ...props }) {
@@ -1024,7 +1096,7 @@ function TypingIndicator({ className = "" }) {
 
 // src/ChatPanel.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var CHAT_PANEL_VERSION = true ? "0.2.47" : "dev";
+var CHAT_PANEL_VERSION = true ? "0.2.49" : "dev";
 var DEFAULT_AGENT_URL = "http://localhost:5002";
 var PANEL_WIDTH = 400;
 var PANEL_HEIGHT = 600;
@@ -1507,6 +1579,7 @@ function ChatPanel({
     }
   }, [corner, onCornerChange, dragControls]);
   const [sessionId, setSessionId] = React6.useState(() => crypto.randomUUID());
+  const [sessionUser, setSessionUser] = React6.useState(null);
   const orgConfigState = useOrgConfig({ agentUrl, orgId: orgId || "" });
   const effectiveProductBackendUrl = orgConfigState.config?.productBackendUrl || productBackendUrl;
   const { authState, retry: retryAuth } = useUserAuth({
@@ -1515,6 +1588,11 @@ function ChatPanel({
     enabled: !!effectiveProductBackendUrl && orgConfigState.status === "success"
     // Only enable after config is fetched
   });
+  const { executeToolRequest } = useFrontendToolExecutor({
+    productBackendUrl: effectiveProductBackendUrl || "",
+    agentUrl,
+    sessionId
+  });
   React6.useEffect(() => {
     if (!effectiveProductBackendUrl || orgConfigState.status !== "success") {
       return;
@@ -1547,6 +1625,9 @@ function ChatPanel({
     testProductBackendEndpoint();
   }, [effectiveProductBackendUrl, orgConfigState.status]);
   const effectiveUser = React6.useMemo(() => {
+    if (sessionUser) {
+      return sessionUser;
+    }
     if (authState.status === "authenticated") {
       return {
         userId: authState.user.id,
@@ -1563,7 +1644,23 @@ function ChatPanel({
       userRole: void 0,
       isInternal: false
     };
-  }, [authState, userId, userName, userEmail]);
+  }, [sessionUser, authState, userId, userName, userEmail]);
+  React6.useEffect(() => {
+    if (authState.status === "authenticated" && sessionUser === null) {
+      setSessionUser({
+        userId: authState.user.id,
+        userName: authState.user.name,
+        userEmail: authState.user.email,
+        userRole: authState.user.role,
+        isInternal: authState.user.isInternal
+      });
+      console.log("[ChatPanel] Session user captured:", authState.user.id);
+    }
+  }, [authState, sessionUser]);
+  const isWaitingForAuth = React6.useMemo(() => {
+    if (!effectiveProductBackendUrl) return false;
+    return authState.status === "loading" || authState.status === "idle";
+  }, [effectiveProductBackendUrl, authState.status]);
   const [isEscalated, setIsEscalated] = React6.useState(false);
   const escalationWsRef = React6.useRef(null);
   const [agentIsTyping, setAgentIsTyping] = React6.useState(false);
@@ -1591,6 +1688,7 @@ function ChatPanel({
     } else {
       console.log("[KiteChat] Skipping disconnect update - conditions not met");
     }
+    setSessionUser(null);
     setSessionId(crypto.randomUUID());
     setIsEscalated(false);
     if (escalationWsRef.current) {
@@ -2509,6 +2607,12 @@ function ChatPanel({
                 content: data.message || "You've been connected to our support queue. An agent will be with you shortly."
               };
               setMessages((prev) => [...prev, escalationMessage]);
+            } else if (eventType === "tool_request") {
+              const toolRequest = data;
+              console.log("[KiteChat] Received tool_request:", toolRequest);
+              executeToolRequest(toolRequest).catch((err) => {
+                console.error("[KiteChat] Tool execution failed:", err);
+              });
             } else if (eventType === "token") {
             }
           } catch (parseError) {
@@ -4660,7 +4764,7 @@ ${userText}`
                 {
                   type: "submit",
                   size: "icon",
-                  disabled: !input.trim() && !pendingFile,
+                  disabled: !input.trim() && !pendingFile || isWaitingForAuth,
                   className: "h-6 w-6 rounded-full bg-gray-900 hover:bg-gray-800 disabled:bg-gray-300",
                   children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.ArrowUp, { className: "h-2.5 w-2.5" })
                 }
@@ -4741,14 +4845,14 @@ function KiteChatWrapper({
   onConfigUpdate,
   onStateUpdate
 }) {
-  const [config, setConfig] = import_react.default.useState(initialConfig);
-  const [currentPage, setCurrentPage] = import_react.default.useState(initialConfig.currentPage || "dashboard");
-  const [isOpen, setIsOpen] = import_react.default.useState(false);
-  const isOpenRef = import_react.default.useRef(false);
-  import_react.default.useEffect(() => {
+  const [config, setConfig] = import_react2.default.useState(initialConfig);
+  const [currentPage, setCurrentPage] = import_react2.default.useState(initialConfig.currentPage || "dashboard");
+  const [isOpen, setIsOpen] = import_react2.default.useState(false);
+  const isOpenRef = import_react2.default.useRef(false);
+  import_react2.default.useEffect(() => {
     isOpenRef.current = isOpen;
   }, [isOpen]);
-  import_react.default.useEffect(() => {
+  import_react2.default.useEffect(() => {
     onConfigUpdate((newConfig) => {
       if (newConfig.currentPage !== void 0) {
         setCurrentPage(newConfig.currentPage);
@@ -4760,7 +4864,7 @@ function KiteChatWrapper({
       getIsOpen: () => isOpenRef.current
     });
   }, [onConfigUpdate, onStateUpdate]);
-  import_react.default.useEffect(() => {
+  import_react2.default.useEffect(() => {
     const container = document.getElementById("kite-chat-root");
     if (!container) return;
     if (config.theme === "dark") {

package/dist/auto.js

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

package/dist/{chunk-XMIO4GMW.js → chunk-YZXB3LLU.js}

@@ -995,6 +995,78 @@ function useOrgConfig({ agentUrl, orgId }) {
   return state;
 }
 
+// src/hooks/useFrontendToolExecutor.ts
+import { useCallback as useCallback3 } from "react";
+function useFrontendToolExecutor({
+  productBackendUrl,
+  agentUrl,
+  sessionId
+}) {
+  const sendToolResult = useCallback3(async (payload) => {
+    try {
+      await fetch(`${agentUrl}/chat/tool-result`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(payload)
+      });
+    } catch (error) {
+      console.error("[FrontendToolExecutor] Failed to send tool result:", error);
+    }
+  }, [agentUrl]);
+  const executeToolRequest = useCallback3(async (toolRequest) => {
+    const { call_id, tool_name, arguments: args, endpoint, method, path_params } = toolRequest;
+    console.log("[FrontendToolExecutor] Executing tool:", tool_name, "with args:", args);
+    try {
+      let url = endpoint;
+      for (const param of path_params) {
+        if (args[param]) {
+          url = url.replace(`{${param}}`, encodeURIComponent(args[param]));
+        }
+      }
+      const queryParams = new URLSearchParams();
+      for (const [key, value] of Object.entries(args)) {
+        if (!path_params.includes(key) && value !== void 0 && value !== null) {
+          queryParams.append(key, String(value));
+        }
+      }
+      const queryString = queryParams.toString();
+      const fullUrl = `${productBackendUrl}${url}${queryString ? "?" + queryString : ""}`;
+      console.log("[FrontendToolExecutor] Fetching:", fullUrl);
+      const response = await fetch(fullUrl, {
+        method,
+        credentials: "include",
+        headers: {
+          "Accept": "application/json",
+          "Content-Type": "application/json"
+        }
+      });
+      let result;
+      if (response.ok) {
+        result = await response.json();
+        console.log("[FrontendToolExecutor] Tool result:", result);
+      } else {
+        const errorText = await response.text();
+        throw new Error(`HTTP ${response.status}: ${errorText}`);
+      }
+      await sendToolResult({
+        session_id: sessionId,
+        call_id,
+        result
+      });
+    } catch (error) {
+      console.error("[FrontendToolExecutor] Tool execution failed:", error);
+      await sendToolResult({
+        session_id: sessionId,
+        call_id,
+        error: error instanceof Error ? error.message : "Unknown error"
+      });
+    }
+  }, [productBackendUrl, sessionId, sendToolResult]);
+  return { executeToolRequest };
+}
+
 // src/components/TypingIndicator.tsx
 import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 function TypingIndicator({ className = "" }) {
@@ -1025,7 +1097,7 @@ function TypingIndicator({ className = "" }) {
 
 // src/ChatPanel.tsx
 import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
-var CHAT_PANEL_VERSION = true ? "0.2.47" : "dev";
+var CHAT_PANEL_VERSION = true ? "0.2.49" : "dev";
 var DEFAULT_AGENT_URL = "http://localhost:5002";
 var PANEL_WIDTH = 400;
 var PANEL_HEIGHT = 600;
@@ -1508,6 +1580,7 @@ function ChatPanel({
     }
   }, [corner, onCornerChange, dragControls]);
   const [sessionId, setSessionId] = React6.useState(() => crypto.randomUUID());
+  const [sessionUser, setSessionUser] = React6.useState(null);
   const orgConfigState = useOrgConfig({ agentUrl, orgId: orgId || "" });
   const effectiveProductBackendUrl = orgConfigState.config?.productBackendUrl || productBackendUrl;
   const { authState, retry: retryAuth } = useUserAuth({
@@ -1516,6 +1589,11 @@ function ChatPanel({
     enabled: !!effectiveProductBackendUrl && orgConfigState.status === "success"
     // Only enable after config is fetched
   });
+  const { executeToolRequest } = useFrontendToolExecutor({
+    productBackendUrl: effectiveProductBackendUrl || "",
+    agentUrl,
+    sessionId
+  });
   React6.useEffect(() => {
     if (!effectiveProductBackendUrl || orgConfigState.status !== "success") {
       return;
@@ -1548,6 +1626,9 @@ function ChatPanel({
     testProductBackendEndpoint();
   }, [effectiveProductBackendUrl, orgConfigState.status]);
   const effectiveUser = React6.useMemo(() => {
+    if (sessionUser) {
+      return sessionUser;
+    }
     if (authState.status === "authenticated") {
       return {
         userId: authState.user.id,
@@ -1564,7 +1645,23 @@ function ChatPanel({
       userRole: void 0,
       isInternal: false
     };
-  }, [authState, userId, userName, userEmail]);
+  }, [sessionUser, authState, userId, userName, userEmail]);
+  React6.useEffect(() => {
+    if (authState.status === "authenticated" && sessionUser === null) {
+      setSessionUser({
+        userId: authState.user.id,
+        userName: authState.user.name,
+        userEmail: authState.user.email,
+        userRole: authState.user.role,
+        isInternal: authState.user.isInternal
+      });
+      console.log("[ChatPanel] Session user captured:", authState.user.id);
+    }
+  }, [authState, sessionUser]);
+  const isWaitingForAuth = React6.useMemo(() => {
+    if (!effectiveProductBackendUrl) return false;
+    return authState.status === "loading" || authState.status === "idle";
+  }, [effectiveProductBackendUrl, authState.status]);
   const [isEscalated, setIsEscalated] = React6.useState(false);
   const escalationWsRef = React6.useRef(null);
   const [agentIsTyping, setAgentIsTyping] = React6.useState(false);
@@ -1592,6 +1689,7 @@ function ChatPanel({
     } else {
       console.log("[KiteChat] Skipping disconnect update - conditions not met");
     }
+    setSessionUser(null);
     setSessionId(crypto.randomUUID());
     setIsEscalated(false);
     if (escalationWsRef.current) {
@@ -2510,6 +2608,12 @@ function ChatPanel({
                 content: data.message || "You've been connected to our support queue. An agent will be with you shortly."
               };
               setMessages((prev) => [...prev, escalationMessage]);
+            } else if (eventType === "tool_request") {
+              const toolRequest = data;
+              console.log("[KiteChat] Received tool_request:", toolRequest);
+              executeToolRequest(toolRequest).catch((err) => {
+                console.error("[KiteChat] Tool execution failed:", err);
+              });
             } else if (eventType === "token") {
             }
           } catch (parseError) {
@@ -4661,7 +4765,7 @@ ${userText}`
                 {
                   type: "submit",
                   size: "icon",
-                  disabled: !input.trim() && !pendingFile,
+                  disabled: !input.trim() && !pendingFile || isWaitingForAuth,
                   className: "h-6 w-6 rounded-full bg-gray-900 hover:bg-gray-800 disabled:bg-gray-300",
                   children: /* @__PURE__ */ jsx10(ArrowUp, { className: "h-2.5 w-2.5" })
                 }