llmasaservice-ui 0.9.12 → 0.10.2

package/.storybook/main.ts

@@ -1,4 +1,5 @@
 import type { StorybookConfig } from "@storybook/react-webpack5";
+import webpack from 'webpack';
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
@@ -14,5 +15,34 @@ const config: StorybookConfig = {
     name: "@storybook/react-webpack5",
     options: {},
   },
+  webpackFinal: async (config) => {
+    // Provide fallbacks for node built-ins
+    config.resolve!.fallback = {
+      ...config.resolve!.fallback,
+      process: require.resolve("process/browser"),
+      child_process: false,
+    };
+
+    // Set up aliases
+    config.resolve!.alias = {
+      ...config.resolve!.alias,
+      "node:process": require.resolve("process/browser"),
+    };
+
+    // Add ProvidePlugin to inject process globally
+    config.plugins = [
+      ...(config.plugins || []),
+      new webpack.ProvidePlugin({
+        process: "process/browser",
+      }),
+      // Handle node:process scheme
+      new webpack.NormalModuleReplacementPlugin(/node:process/, (resource) => {
+        resource.request = "process/browser";
+      }),
+    ];
+
+    return config;
+  },
 };
-export default config;
+
+export default config;

package/dist/index.d.mts

@@ -67,6 +67,7 @@ interface ChatPanelProps {
     createConversationOnFirstChat?: boolean;
     customerEmailCaptureMode?: "HIDE" | "OPTIONAL" | "REQUIRED";
     customerEmailCapturePlaceholder?: string;
+    mcpServers: [];
 }
 interface ExtraProps$1 extends React.HTMLAttributes<HTMLElement> {
     inline?: boolean;

package/dist/index.d.ts

@@ -67,6 +67,7 @@ interface ChatPanelProps {
     createConversationOnFirstChat?: boolean;
     customerEmailCaptureMode?: "HIDE" | "OPTIONAL" | "REQUIRED";
     customerEmailCapturePlaceholder?: string;
+    mcpServers: [];
 }
 interface ExtraProps$1 extends React.HTMLAttributes<HTMLElement> {
     inline?: boolean;

package/dist/index.js

@@ -127,6 +127,89 @@ var EmailModal = ({ isOpen, onClose, onSend, defaultEmail }) => {
 };
 var EmailModal_default = EmailModal;
 
+// src/mcpClient.ts
+var import_client = require("@modelcontextprotocol/sdk/client/index.js");
+var import_sse = require("@modelcontextprotocol/sdk/client/sse.js");
+var MCPClient = class {
+  constructor(name, url, headers = []) {
+    this.tools = [];
+    this.transport = new import_sse.SSEClientTransport(new URL(url));
+    this.client = new import_client.Client(
+      {
+        name,
+        version: "1.0.0"
+      },
+      { capabilities: { tools: {}, resources: {}, prompts: {} } }
+    );
+    this.headers = headers;
+  }
+  connect() {
+    return __async(this, null, function* () {
+      yield this.client.connect(this.transport);
+    });
+  }
+  disconnect() {
+    return __async(this, null, function* () {
+      yield this.client.close();
+    });
+  }
+  listTools() {
+    return __async(this, null, function* () {
+      var _a;
+      const result = yield this.client.listTools();
+      this.tools = Array.isArray(result) ? result : (_a = result.tools) != null ? _a : [];
+      return this.tools;
+    });
+  }
+  getNormalizedTools() {
+    const formattedTools = [];
+    this.tools.forEach(
+      (t) => formattedTools.push({
+        name: t.name,
+        description: t.description || `Tool: ${t.name}`,
+        input_schema: t.inputSchema
+      })
+    );
+    return formattedTools;
+  }
+  toolExists(name) {
+    return this.tools.some((tool) => tool.name === name);
+  }
+  listPrompts() {
+    return __async(this, null, function* () {
+      return yield this.client.listPrompts();
+    });
+  }
+  getPrompt(name, args) {
+    return __async(this, null, function* () {
+      return yield this.client.getPrompt({
+        name,
+        arguments: args
+      });
+    });
+  }
+  listResources() {
+    return __async(this, null, function* () {
+      return yield this.client.listResources();
+    });
+  }
+  readResource(uri) {
+    return __async(this, null, function* () {
+      return yield this.client.readResource({
+        uri
+      });
+    });
+  }
+  callTool(name, args) {
+    return __async(this, null, function* () {
+      return yield this.client.callTool({
+        name,
+        arguments: args
+      });
+    });
+  }
+};
+
 // src/ChatPanel.tsx
 var ChatPanel = ({
   project_id,
@@ -169,7 +252,8 @@ var ChatPanel = ({
   hideRagContextInPrompt = true,
   createConversationOnFirstChat = true,
   customerEmailCaptureMode = "HIDE",
-  customerEmailCapturePlaceholder = "Please enter your email..."
+  customerEmailCapturePlaceholder = "Please enter your email...",
+  mcpServers = []
 }) => {
   var _a;
   const isEmailAddress = (email) => {
@@ -178,6 +262,7 @@ var ChatPanel = ({
   };
   const [nextPrompt, setNextPrompt] = (0, import_react2.useState)("");
   const [lastController, setLastController] = (0, import_react2.useState)(new AbortController());
+  const [lastMessages, setLastMessages] = (0, import_react2.useState)([]);
   const [history, setHistory] = (0, import_react2.useState)(initialHistory);
   const [isLoading, setIsLoading] = (0, import_react2.useState)(false);
   const [lastPrompt, setLastPrompt] = (0, import_react2.useState)(null);
@@ -204,23 +289,59 @@ var ChatPanel = ({
   const [CTAClickedButNoEmail, setCTAClickedButNoEmail] = (0, import_react2.useState)(false);
   const [emailSent, setEmailSent] = (0, import_react2.useState)(false);
   const [emailClickedButNoEmail, setEmailClickedButNoEmail] = (0, import_react2.useState)(false);
-  const handleSendEmail = (to, from) => {
-    sendConversationsViaEmail(to, `Conversation History from ${title}`, from);
-    interactionClicked(lastCallId, "email", to);
-    setEmailSent(true);
-  };
   const [currentCustomer, setCurrentCustomer] = (0, import_react2.useState)(customer);
-  const { send, response, idle, stop, lastCallId } = (0, import_llmasaservice_client.useLLM)({
-    project_id,
-    customer: currentCustomer,
-    url,
-    agent
-  });
+  const [allActions, setAllActions] = (0, import_react2.useState)([]);
   const responseAreaRef = (0, import_react2.useRef)(null);
   let publicAPIUrl = "https://api.llmasaservice.io";
   if (window.location.hostname === "localhost" || window.location.hostname === "dev.llmasaservice.io") {
     publicAPIUrl = "https://8ftw8droff.execute-api.us-east-1.amazonaws.com/dev";
   }
+  const [mcpClients, setMcpClients] = (0, import_react2.useState)([]);
+  const [convertedTools, setConvertedTools] = (0, import_react2.useState)([]);
+  (0, import_react2.useEffect)(() => {
+    const list = Array.isArray(mcpServers) ? mcpServers : [];
+    const clients = list.map(
+      (m) => new MCPClient(m.sseUrl, m.sseUrl, m.sseHeaders)
+    );
+    setMcpClients(clients);
+    return () => {
+      clients.forEach((c) => c.disconnect());
+    };
+  }, [mcpServers]);
+  (0, import_react2.useEffect)(() => {
+    if (mcpClients.length === 0) return;
+    (() => __async(void 0, null, function* () {
+      const tools = [];
+      yield Promise.all(
+        mcpClients.map((client) => __async(void 0, null, function* () {
+          var _a2;
+          try {
+            yield client.connect();
+            const list = yield client.listTools();
+            console.log("listTools()", list);
+            const arr = Array.isArray(list) ? list : (_a2 = list.tools) != null ? _a2 : [];
+            arr.forEach(
+              (t) => tools.push({
+                name: t.name,
+                description: t.description || `Tool: ${t.name}`,
+                parameters: t.inputSchema
+              })
+            );
+          } catch (e) {
+            console.error("listTools() failed", e);
+          }
+        }))
+      );
+      setConvertedTools(tools);
+    }))();
+  }, [mcpClients]);
+  const { send, response, idle, stop, lastCallId } = (0, import_llmasaservice_client.useLLM)({
+    project_id,
+    customer: currentCustomer,
+    url,
+    agent,
+    tools: convertedTools
+  });
   (0, import_react2.useEffect)(() => {
     setShowEmailPanel(customerEmailCaptureMode !== "HIDE");
     if (customerEmailCaptureMode === "REQUIRED") {
@@ -292,12 +413,170 @@ var ChatPanel = ({
       });
     };
   }, [cssUrl]);
+  const toolUseCallback = (0, import_react2.useCallback)(
+    (match, groups) => __async(void 0, null, function* () {
+      var _a2, _b, _c, _d, _e, _f;
+      for (const client of mcpClients) {
+        console.log("tool", groups[1]);
+        console.log("input", groups[2]);
+        if (client.toolExists(groups[1])) {
+          console.log("tool exists", groups[1]);
+          setIsLoading(true);
+          try {
+            let args;
+            try {
+              args = JSON.parse(groups[2]);
+            } catch (e) {
+              try {
+                args = JSON.parse(groups[2].replace(/\\"/g, '"'));
+              } catch (err) {
+                console.error("Failed to parse tool arguments:", err);
+                console.log("Raw argument string:", groups[2]);
+                throw new Error("Could not parse tool arguments");
+              }
+            }
+            const result = yield client.callTool(groups[1], args);
+            if (result && result.content && ((_a2 = result.content) == null ? void 0 : _a2.length) > 0) {
+              const textResult = (_b = result.content[0]) == null ? void 0 : _b.text;
+              const messagesAndHistory = lastMessages;
+              messagesAndHistory.push({
+                role: "user",
+                content: [
+                  {
+                    type: "text",
+                    text: lastPrompt != null ? lastPrompt : ""
+                  }
+                ]
+              });
+              messagesAndHistory.push({
+                role: "assistant",
+                content: [],
+                tool_calls: [JSON.parse(match)]
+              });
+              messagesAndHistory.push({
+                role: "tool",
+                content: [
+                  {
+                    type: "text",
+                    text: textResult
+                  }
+                ],
+                tool_call_id: groups[0]
+              });
+              const browserInfo = getBrowserInfo();
+              send(
+                "",
+                messagesAndHistory,
+                [
+                  ...data,
+                  {
+                    key: "--customer_id",
+                    data: (_c = currentCustomer == null ? void 0 : currentCustomer.customer_id) != null ? _c : ""
+                  },
+                  {
+                    key: "--customer_name",
+                    data: (_d = currentCustomer == null ? void 0 : currentCustomer.customer_name) != null ? _d : ""
+                  },
+                  {
+                    key: "--customer_user_id",
+                    data: (_e = currentCustomer == null ? void 0 : currentCustomer.customer_user_id) != null ? _e : ""
+                  },
+                  {
+                    key: "--customer_user_email",
+                    data: (_f = currentCustomer == null ? void 0 : currentCustomer.customer_user_email) != null ? _f : ""
+                  },
+                  { key: "--email", data: emailInput != null ? emailInput : "" },
+                  { key: "--emailValid", data: emailValid ? "true" : "false" },
+                  {
+                    key: "--emailInputSet",
+                    data: emailInputSet ? "true" : "false"
+                  },
+                  {
+                    key: "--emailPanelShowing",
+                    data: showEmailPanel ? "true" : "false"
+                  },
+                  {
+                    key: "--callToActionSent",
+                    data: callToActionSent ? "true" : "false"
+                  },
+                  {
+                    key: "--CTAClickedButNoEmail",
+                    data: CTAClickedButNoEmail ? "true" : "false"
+                  },
+                  { key: "--emailSent", data: emailSent ? "true" : "false" },
+                  {
+                    key: "--emailClickedButNoEmail",
+                    data: emailClickedButNoEmail ? "true" : "false"
+                  },
+                  {
+                    key: "--messages",
+                    data: messagesAndHistory.length.toString()
+                  },
+                  {
+                    key: "--currentTimeUTC",
+                    data: browserInfo == null ? void 0 : browserInfo.currentTimeUTC
+                  },
+                  { key: "--userTimezone", data: browserInfo == null ? void 0 : browserInfo.userTimezone },
+                  { key: "--userLanguage", data: browserInfo == null ? void 0 : browserInfo.userLanguage }
+                ],
+                true,
+                true,
+                service && service !== "" ? service : groups[3],
+                // call the same service that asked for the tool_use
+                currentConversation,
+                lastController
+              );
+            } else {
+              console.error("No content in result", result);
+            }
+          } catch (error) {
+            console.error("Error calling tool:", error);
+          }
+        }
+      }
+    }),
+    [
+      mcpClients,
+      lastPrompt,
+      lastMessages,
+      lastController,
+      data,
+      service,
+      currentConversation
+    ]
+  );
+  (0, import_react2.useEffect)(() => {
+    const anthropic_toolAction = {
+      pattern: '\\{"type":"tool_use","id":"([^"]+)","name":"([^"]+)","input":(\\{[^}]+\\}),"service":"([^"]+)"\\}',
+      type: "button",
+      markdown: "Approve Tool Use: $2",
+      callback: toolUseCallback
+    };
+    const openAI_toolAction = {
+      pattern: '\\{"id":"([^"]+)","type":"function","function":\\{"name":"([^"]+)","arguments":"((?:\\\\.|[^"\\\\])*)"\\},"service":"([^"]+)"\\}',
+      type: "button",
+      markdown: "Approve Tool Use: $2",
+      callback: toolUseCallback
+    };
+    const google_toolAction = {
+      pattern: '^\\{\\s*"(functionCall)"\\s*:\\s*\\{\\s*"name"\\s*:\\s*"([^"]+)"\\s*,\\s*"args"\\s*:\\s*(\\{[^}]+\\})\\s*\\}\\s*,\\s*"service"\\s*:\\s*"([^"]+)"\\s*\\}$',
+      type: "button",
+      markdown: "Approve Tool Use: $2",
+      callback: toolUseCallback
+    };
+    setAllActions([
+      ...actions,
+      anthropic_toolAction,
+      openAI_toolAction,
+      google_toolAction
+    ]);
+  }, [actions, toolUseCallback]);
   (0, import_react2.useEffect)(() => {
     if (response && response.length > 0) {
       setIsLoading(false);
       let newResponse = response;
-      if (actions && actions.length > 0) {
-        actions.forEach((action, index) => {
+      if (allActions && allActions.length > 0) {
+        allActions.forEach((action, index) => {
           const regex = new RegExp(action.pattern, "gmi");
           newResponse = newResponse.replace(regex, (match, ...groups) => {
             var _a2, _b;
@@ -306,7 +585,7 @@ var ChatPanel = ({
             const buttonId = `button-${messages.length}-${index}-${matchIndex}`;
             let html = match;
             if (action.type === "button" || action.type === "callback") {
-              html = ` <button id="${buttonId}"  ${action.style ? 'class=" ' + action.style + '"' : ""}>${(_a2 = action.markdown) != null ? _a2 : match}</button>`;
+              html = `<br /> <button id="${buttonId}"  ${action.style ? 'class=" ' + action.style + '"' : ""}>${(_a2 = action.markdown) != null ? _a2 : match}</button>`;
             } else if (action.type === "markdown" || action.type === "html") {
               html = (_b = action.markdown) != null ? _b : "";
             }
@@ -430,6 +709,7 @@ var ChatPanel = ({
             controller
           );
           setLastPrompt(initialPrompt);
+          setLastMessages(messages);
           setLastKey(initialPrompt);
           setLastController(controller);
           setHistory({});
@@ -716,6 +996,7 @@ var ChatPanel = ({
           controller
         );
         setLastPrompt(nextPromptToSend);
+        setLastMessages(messagesAndHistory);
         setLastKey(promptKey);
         setLastController(controller);
         setNextPrompt("");
@@ -902,6 +1183,11 @@ var ChatPanel = ({
     )}&body=${encodeURIComponent(html)}`;
     window.location.href = mailtoLink;
   };
+  const handleSendEmail = (to, from) => {
+    sendConversationsViaEmail(to, `Conversation History from ${title}`, from);
+    interactionClicked(lastCallId, "email", to);
+    setEmailSent(true);
+  };
   const handleSuggestionClick = (suggestion) => {
     continueChat(suggestion);
     interactionClicked(lastCallId, "suggestion");
@@ -1000,7 +1286,7 @@ var ChatPanel = ({
         rehypePlugins: [import_rehype_raw.default]
       },
       initialMessage
-    ))) : null, Object.entries(history).map(([prompt, response2], index) => /* @__PURE__ */ import_react2.default.createElement("div", { className: "history-entry", key: index }, hideInitialPrompt && index === 0 ? null : /* @__PURE__ */ import_react2.default.createElement("div", { className: "prompt" }, formatPromptForDisplay(prompt)), /* @__PURE__ */ import_react2.default.createElement("div", { className: "response" }, index === Object.keys(history).length - 1 && isLoading ? /* @__PURE__ */ import_react2.default.createElement("div", { className: "loading-text" }, "loading...") : null, /* @__PURE__ */ import_react2.default.createElement(
+    ))) : null, Object.entries(history).map(([prompt, response2], index) => /* @__PURE__ */ import_react2.default.createElement("div", { className: "history-entry", key: index }, hideInitialPrompt && index === 0 ? null : /* @__PURE__ */ import_react2.default.createElement("div", { className: "prompt" }, formatPromptForDisplay(prompt)), /* @__PURE__ */ import_react2.default.createElement("div", { className: "response" }, index === Object.keys(history).length - 1 && isLoading ? /* @__PURE__ */ import_react2.default.createElement("div", { className: "loading-text" }, "thinking...") : null, /* @__PURE__ */ import_react2.default.createElement(
       import_react_markdown.default,
       {
         className: markdownClass,
@@ -1486,7 +1772,8 @@ var AgentPanel = ({
   markdownClass = null,
   width,
   height,
-  url = "https://chat.llmasaservice.io/",
+  url = "https://chat.llmasaservice.io",
+  //url = "https://chat.llmasaservice.io/dev",
   //scrollToEnd = false,
   //initialMessage = "",
   prismStyle = null,
@@ -1517,21 +1804,31 @@ var AgentPanel = ({
   const customer_id = searchParams.get("customer_id") || "";
   const customer_email = searchParams.get("customer_email") || "";
   const [agentData, setAgentData] = (0, import_react3.useState)(null);
+  const [mcpData, setMCPData] = (0, import_react3.useState)(null);
   (0, import_react3.useEffect)(() => {
     const fetchAgentData = () => __async(void 0, null, function* () {
       try {
-        const response = yield fetch(
-          url.endsWith("dev") ? `https://8ftw8droff.execute-api.us-east-1.amazonaws.com/dev/agents/${agent}` : `https://api.llmasaservice.io/agents/${agent}`,
-          {
+        const fetchUrl = url.endsWith("dev") ? `https://8ftw8droff.execute-api.us-east-1.amazonaws.com/dev/agents/${agent}` : `https://api.llmasaservice.io/agents/${agent}`;
+        const response = yield fetch(fetchUrl, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json"
+          }
+        });
+        const data2 = yield response.json();
+        if (data2 && data2.length > 0) {
+          setAgentData(data2[0]);
+          const response2 = yield fetch(fetchUrl + "/mcp", {
             method: "GET",
             headers: {
               "Content-Type": "application/json"
             }
+          });
+          const mcpData2 = yield response2.json();
+          if (mcpData2 && mcpData2.length > 0) {
+            console.log("MCP servers", mcpData2);
+            setMCPData(mcpData2);
           }
-        );
-        const data2 = yield response.json();
-        if (data2 && data2.length > 0) {
-          setAgentData(data2[0]);
         }
       } catch (error) {
         console.error("Error fetching agent data:", error);
@@ -1540,7 +1837,7 @@ var AgentPanel = ({
     if (agent && agent !== "") {
       fetchAgentData();
     }
-  }, [agent]);
+  }, [agent, url]);
   const getActionsArraySafely = (actionsString) => {
     let actions2 = [];
     if (actionsString && actionsString !== "") {
@@ -1602,7 +1899,8 @@ var AgentPanel = ({
       hideRagContextInPrompt,
       createConversationOnFirstChat: (_s = agentData == null ? void 0 : agentData.createConversationOnFirstChat) != null ? _s : true,
       customerEmailCaptureMode: (_t = agentData == null ? void 0 : agentData.customerEmailCaptureMode) != null ? _t : "HIDE",
-      customerEmailCapturePlaceholder: (_u = agentData == null ? void 0 : agentData.customerEmailCapturePlaceholder) != null ? _u : "Please enter your email..."
+      customerEmailCapturePlaceholder: (_u = agentData == null ? void 0 : agentData.customerEmailCapturePlaceholder) != null ? _u : "Please enter your email...",
+      mcpServers: mcpData
     }
   ));
 };