aizek-chatbot 1.0.15 → 1.0.16

package/dist/index.cjs

@@ -517,6 +517,17 @@ var extractUIJsonFromText = (text) => {
     uiData
   };
 };
+var historyMessages = (history, currentUserText) => {
+  const claudeHistory = history.filter((m) => m.role === "user" || m.role === "assistant").map((m) => ({
+    role: m.role,
+    content: m.text ?? JSON.stringify(m.ui ?? "")
+  }));
+  claudeHistory.push({
+    role: "user",
+    content: currentUserText
+  });
+  return claudeHistory;
+};
 var generateId = () => Date.now().toString() + Math.random().toString(36).substr(2, 9);
 var normalizeHeaders = (headers) => {
   const result = {};
@@ -530,7 +541,7 @@ var normalizeHeaders = (headers) => {
   }
   return result;
 };
-var AizekChatBot = ({ clientId, headers }) => {
+var AizekChatBot = ({ clientId, headers, onMounted, onReady, onOpen, onClose, onMessage, onToolCall }) => {
   const messagesEndRef = react.useRef(null);
   const [config, setConfig] = react.useState(defaultConfig);
   const [anthropic, setAnthropic] = react.useState();
@@ -542,35 +553,54 @@ var AizekChatBot = ({ clientId, headers }) => {
   const [headerValidation, setHeaderValidation] = react.useState(null);
   const [showAlert, setShowAlert] = react.useState(true);
   const { button_background, button_position, button_size, chat_height, chat_width, company_logo, company_name, header_background, initial_open, placeholder, show_typing_indicator, welcome_message } = config.chat_widget_settings;
+  react.useEffect(() => {
+    onMounted?.();
+  }, []);
+  react.useEffect(() => {
+    if (!isConfigLoading && mcpClient && anthropic && config) {
+      onReady?.({
+        config
+      });
+    }
+  }, [isConfigLoading, mcpClient, anthropic, config]);
   react.useEffect(() => {
     const loadConfig = async () => {
       try {
         setIsConfigLoading(true);
         const apiResponse = await fetchChatWidgetSettings(clientId);
         if (apiResponse.success) {
-          const anthropic2 = new Anthropic__default.default({ apiKey: apiResponse.data.openai_key, dangerouslyAllowBrowser: true });
-          const mcpClient2 = new client.Client({ name: "mcp-client-cli", version: "1.0.0" });
-          const transport = new sse_js.SSEClientTransport(new URL("", apiResponse.data.mcp_url), {
-            eventSourceInit: {
-              fetch: (url, init) => {
-                if (headers) {
-                  const dynamicHeaders = normalizeHeaders(headers);
-                  return fetch(url, {
-                    headers: {
-                      ...init?.headers ?? {},
-                      ...dynamicHeaders
-                    }
-                  });
-                } else {
-                  return fetch(url, {
-                    headers: {
-                      ...init?.headers ?? {}
-                    }
-                  });
+          const anthropic2 = new Anthropic__default.default({
+            apiKey: apiResponse.data.openai_key,
+            dangerouslyAllowBrowser: true
+          });
+          const mcpClient2 = new client.Client({
+            name: "mcp-client-cli",
+            version: "1.0.0"
+          });
+          const transport = new sse_js.SSEClientTransport(
+            new URL("", apiResponse.data.mcp_url),
+            {
+              eventSourceInit: {
+                fetch: (url, init) => {
+                  if (headers) {
+                    const dynamicHeaders = normalizeHeaders(headers);
+                    return fetch(url, {
+                      headers: {
+                        ...init?.headers ?? {},
+                        ...dynamicHeaders
+                      }
+                    });
+                  } else {
+                    return fetch(url, {
+                      headers: {
+                        ...init?.headers ?? {}
+                      }
+                    });
+                  }
                 }
               }
             }
-          });
+          );
           await mcpClient2.connect(transport);
           setMcpClient(mcpClient2);
           setAnthropic(anthropic2);
@@ -623,24 +653,24 @@ var AizekChatBot = ({ clientId, headers }) => {
   }, []);
   react.useEffect(() => {
     setIsOpen(initial_open);
+    const newIsOpen = !isOpen;
+    setIsOpen(newIsOpen);
+    if (newIsOpen) onOpen?.();
+    else onClose?.();
   }, [initial_open]);
   react.useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
   if (isConfigLoading || !mcpClient || !anthropic) {
-    return /* @__PURE__ */ jsxRuntime.jsx("button", { className: `floating-button ${button_position} button-sizes ${button_size}`, style: { background: button_background }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "loading-spinner" }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        className: `floating-button ${button_position} button-sizes ${button_size}`,
+        style: { background: button_background },
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "loading-spinner" })
+      }
+    );
   }
-  const historyMessages = (history, currentUserText) => {
-    const claudeHistory = history.filter((m) => m.role === "user" || m.role === "assistant").map((m) => ({
-      role: m.role,
-      content: m.text ?? JSON.stringify(m.ui ?? "")
-    }));
-    claudeHistory.push({
-      role: "user",
-      content: currentUserText
-    });
-    return claudeHistory;
-  };
   const addMessage = (payload) => {
     const newMessage = {
       id: generateId(),
@@ -649,6 +679,7 @@ var AizekChatBot = ({ clientId, headers }) => {
       role: payload.role,
       timestamp: /* @__PURE__ */ new Date()
     };
+    onMessage?.(newMessage);
     setMessages((prev) => [...prev, newMessage]);
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
     return newMessage;
@@ -665,13 +696,7 @@ var AizekChatBot = ({ clientId, headers }) => {
     setMessages((prev) => [...prev, newMessage]);
     setIsLoading(true);
     const toolsResult = await mcpClient.listTools();
-    const tools = toolsResult.tools.map((tool) => {
-      return {
-        name: tool.name,
-        description: tool.description,
-        input_schema: tool.inputSchema
-      };
-    });
+    const tools = toolsResult.tools.map((tool) => ({ name: tool.name, description: tool.description, input_schema: tool.inputSchema }));
     try {
       const historyForContext = historyMessages([...messages, newMessage], message);
       const response = await anthropic.beta.messages.create({
@@ -680,11 +705,19 @@ var AizekChatBot = ({ clientId, headers }) => {
         max_tokens: 5e3,
         messages: historyForContext,
         tools,
-        system: GENERATIVE_UI_SYSTEM_PROMPT
+        system: [{
+          type: "text",
+          text: GENERATIVE_UI_SYSTEM_PROMPT,
+          cache_control: {
+            type: "ephemeral",
+            ttl: "1h"
+          }
+        }]
       });
       for (const content of response.content) {
         if (content.type === "tool_use") {
           const toolCall = await mcpClient.callTool({ name: content.name, arguments: content.input });
+          onToolCall?.({ name: content.name, args: content.input, result: toolCall });
           const toolMessagesForContext = historyMessages([...messages, newMessage], JSON.stringify(toolCall.structuredContent));
           const finalResponse = await anthropic.beta.messages.create({
             model: "claude-sonnet-4-5",
@@ -692,66 +725,104 @@ var AizekChatBot = ({ clientId, headers }) => {
             betas: ["structured-outputs-2025-11-13"],
             messages: toolMessagesForContext,
             tools,
-            system: GENERATIVE_UI_SYSTEM_PROMPT
+            system: [{
+              type: "text",
+              text: GENERATIVE_UI_SYSTEM_PROMPT,
+              cache_control: {
+                type: "ephemeral",
+                ttl: "1h"
+              }
+            }]
           });
           const textBlock = finalResponse.content.find((x) => x.type === "text");
           const { cleanedText, uiData } = extractUIJsonFromText(textBlock?.text ?? "");
           addMessage({ ui: uiData, text: cleanedText || void 0, role: "assistant" });
         } else if (content.type === "text") {
           const { cleanedText, uiData } = extractUIJsonFromText(content?.text);
-          console.log(cleanedText, uiData);
           addMessage({ ui: uiData, text: cleanedText || void 0, role: "assistant" });
         }
       }
       setIsLoading(false);
     } catch (error) {
       console.error("Error sending message:", error);
-      addMessage({ text: "\xDCzg\xFCn\xFCm, bir hata olu\u015Ftu. L\xFCtfen tekrar deneyin.", role: "assistant" });
+      addMessage({
+        text: "\xDCzg\xFCn\xFCm, bir hata olu\u015Ftu. L\xFCtfen tekrar deneyin.",
+        role: "assistant"
+      });
       setIsLoading(false);
     }
   };
   const toggleChat = () => {
     const newIsOpen = !isOpen;
     setIsOpen(newIsOpen);
+    if (newIsOpen) onOpen?.();
+    else onClose?.();
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `overlay floating-chat-overlay ${isOpen ? "is-open" : ""}`, onClick: toggleChat }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `chat-container ${button_position} ${isOpen ? "is-open" : ""}`, style: { width: chat_width, height: chat_height }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "chatbot-container", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "header", style: { background: header_background }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "logo-container", children: company_logo ? company_logo.startsWith("http") || company_logo.startsWith("data:") ? /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
-          {
-            src: company_logo,
-            alt: "Company Logo",
-            className: "logo-image"
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "logo-text", children: company_logo }) : "\u{1F916}" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "company-name", children: company_name }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "status-text", children: isLoading ? "Yaz\u0131yor..." : "\xC7evrimi\xE7i" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "messages-container", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(HeaderAlert, { headerValidation, setShowAlert, showAlert }),
-        messages.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "empty-state", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "empty-state-icon", children: "\u{1F4AC}" }),
-          /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "empty-state-title", children: welcome_message }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "empty-state-description", children: "A\u015Fa\u011F\u0131daki alana mesaj\u0131n\u0131z\u0131 yazarak ba\u015Flayabilirsiniz." })
-        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          messages.map((message) => /* @__PURE__ */ jsxRuntime.jsx(
-            MessageBubble,
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `overlay floating-chat-overlay ${isOpen ? "is-open" : ""}`,
+        onClick: toggleChat
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `chat-container ${button_position} ${isOpen ? "is-open" : ""}`,
+        style: { width: chat_width, height: chat_height },
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "chatbot-container", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "header", style: { background: header_background }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "logo-container", children: company_logo ? company_logo.startsWith("http") || company_logo.startsWith("data:") ? /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: company_logo,
+                alt: "Company Logo",
+                className: "logo-image"
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "logo-text", children: company_logo }) : "\u{1F916}" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "company-name", children: company_name }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "status-text", children: isLoading ? "Yaz\u0131yor..." : "\xC7evrimi\xE7i" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "messages-container", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              HeaderAlert,
+              {
+                headerValidation,
+                setShowAlert,
+                showAlert
+              }
+            ),
+            messages.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "empty-state", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "empty-state-icon", children: "\u{1F4AC}" }),
+              /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "empty-state-title", children: welcome_message }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "empty-state-description", children: "A\u015Fa\u011F\u0131daki alana mesaj\u0131n\u0131z\u0131 yazarak ba\u015Flayabilirsiniz." })
+            ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              messages.map((message) => /* @__PURE__ */ jsxRuntime.jsx(
+                MessageBubble,
+                {
+                  message,
+                  onAction: sendMessage
+                },
+                message.id
+              )),
+              show_typing_indicator && isLoading && /* @__PURE__ */ jsxRuntime.jsx(TypingDots, {})
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { ref: messagesEndRef })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ChatInput,
             {
-              message,
-              onAction: sendMessage
-            },
-            message.id
-          )),
-          show_typing_indicator && isLoading && /* @__PURE__ */ jsxRuntime.jsx(TypingDots, {})
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { ref: messagesEndRef })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(ChatInput, { handleSendMessage: sendMessage, isLoading, placeholder })
-    ] }) }),
+              handleSendMessage: sendMessage,
+              isLoading,
+              placeholder
+            }
+          )
+        ] })
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {