@kite-copilot/chat-panel 0.2.47 → 0.2.49

package/dist/index.cjs

@@ -66,7 +66,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_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
@@ -478,6 +478,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 }) {
@@ -1078,7 +1150,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;
@@ -1561,6 +1633,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({
@@ -1569,6 +1642,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;
@@ -1601,6 +1679,9 @@ function ChatPanel({
     testProductBackendEndpoint();
   }, [effectiveProductBackendUrl, orgConfigState.status]);
   const effectiveUser = React6.useMemo(() => {
+    if (sessionUser) {
+      return sessionUser;
+    }
     if (authState.status === "authenticated") {
       return {
         userId: authState.user.id,
@@ -1617,7 +1698,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);
@@ -1645,6 +1742,7 @@ function ChatPanel({
     } else {
       console.log("[KiteChat] Skipping disconnect update - conditions not met");
     }
+    setSessionUser(null);
     setSessionId(crypto.randomUUID());
     setIsEscalated(false);
     if (escalationWsRef.current) {
@@ -2563,6 +2661,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) {
@@ -4714,7 +4818,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" })
                 }
@@ -4827,14 +4931,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);
@@ -4846,7 +4950,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/index.js

@@ -31,7 +31,7 @@ import {
   cn,
   createKiteChat,
   useGuideCursor
-} from "./chunk-XMIO4GMW.js";
+} from "./chunk-YZXB3LLU.js";
 export {
   ApiKeyList,
   AssistantActivity,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kite-copilot/chat-panel",
-  "version": "0.2.47",
+  "version": "0.2.49",
   "description": "AI-powered chat panel SDK with programmatic lifecycle control",
   "type": "module",
   "main": "./dist/index.cjs",