llmasaservice-ui 0.16.2 → 0.16.3

package/dist/index.css

@@ -166,12 +166,15 @@
   border-radius: var(--border-radius);
   min-height: var(--input-height);
   max-height: 120px;
-  resize: none;
+  resize: vertical;
   overflow-y: auto;
   background-color: var(--input-background-color);
   border: 1px solid var(--input-border-color);
   transition: height 0.1s ease;
 }
+.llm-panel .chat-input.user-resized {
+  max-height: none;
+}
 .llm-panel .chat-input:focus,
 .llm-panel input:focus {
   outline: none;

package/dist/index.js

@@ -261,6 +261,7 @@ var ChatPanel = ({
   const [alwaysApprovedTools, setAlwaysApprovedTools] = (0, import_react3.useState)([]);
   const [thinkingBlocks, setThinkingBlocks] = (0, import_react3.useState)([]);
   const [currentThinkingIndex, setCurrentThinkingIndex] = (0, import_react3.useState)(0);
+  const [userResizedHeight, setUserResizedHeight] = (0, import_react3.useState)(null);
   const [pendingButtonAttachments, setPendingButtonAttachments] = (0, import_react3.useState)([]);
   const actionMatchRegistry = (0, import_react3.useRef)(/* @__PURE__ */ new Map());
   const deferredActionsRef = (0, import_react3.useRef)(/* @__PURE__ */ new Map());
@@ -515,7 +516,6 @@ var ChatPanel = ({
   const [toolsLoading, setToolsLoading] = (0, import_react3.useState)(false);
   const [toolsFetchError, setToolsFetchError] = (0, import_react3.useState)(false);
   (0, import_react3.useEffect)(() => {
-    console.log("MCP servers", mcpServers);
     const fetchAndSetTools = () => __async(void 0, null, function* () {
       if (!mcpServers || mcpServers.length === 0) {
         setToolList([]);
@@ -562,7 +562,6 @@ var ChatPanel = ({
         }));
         const results = yield Promise.all(fetchPromises);
         const allTools = results.flat();
-        console.log("Merged tools from all servers:", allTools);
         setToolList(allTools);
         setToolsFetchError(false);
       } catch (error) {
@@ -591,6 +590,122 @@ var ChatPanel = ({
       };
     })
   });
+  const processActionsOnContent = (0, import_react3.useCallback)((content, context) => {
+    let workingContent = content;
+    const buttonAttachments = [];
+    allActions.filter((a) => a.actionType === "tool").forEach((action) => {
+      try {
+        const regex = new RegExp(action.pattern, "gmi");
+        workingContent = workingContent.replace(regex, "");
+      } catch (e) {
+        console.warn("Invalid tool action regex", action.pattern, e);
+      }
+    });
+    if (context.type === "history") {
+      const { cleanedText } = processThinkingTags(workingContent);
+      workingContent = cleanedText;
+    }
+    allActions.filter((a) => a.type !== "response" && a.actionType !== "tool").forEach((action, actionIndex) => {
+      try {
+        const regex = new RegExp(action.pattern, "gmi");
+        const matches = workingContent.match(regex);
+        workingContent = workingContent.replace(
+          regex,
+          (match, ...groups) => {
+            var _a2, _b, _c, _d, _e;
+            const actualMatch = groups[0] || match;
+            const restGroups = groups.slice(1);
+            let buttonId;
+            if (context.type === "history") {
+              const matchIndex = restGroups[restGroups.length - 2];
+              buttonId = `button-init-${context.historyIndex}-${actionIndex}-${matchIndex}`;
+            } else {
+              const offset = groups[groups.length - 2];
+              const matchOffset = typeof offset === "number" ? offset : 0;
+              const key = `${actionIndex}:${matchOffset}`;
+              let existingButtonId = actionMatchRegistry.current.get(key);
+              if (!existingButtonId) {
+                existingButtonId = `button-stable-${actionSequenceRef.current++}`;
+                actionMatchRegistry.current.set(key, existingButtonId);
+              }
+              buttonId = existingButtonId;
+              if (context.isProgressive && finalizedButtonsRef.current.has(buttonId)) {
+                return match;
+              }
+            }
+            const substituteTemplate = (template) => {
+              let html2 = template.replace(/\$match/gim, actualMatch);
+              restGroups.forEach((g, gi) => {
+                html2 = html2.replace(new RegExp(`\\$${gi + 1}`, "gmi"), g || "");
+              });
+              return html2;
+            };
+            let html = actualMatch;
+            if (action.type === "button" || action.type === "callback") {
+              if (context.type === "history") {
+                html = `<br /><button id="${buttonId}" ${action.style ? 'class="' + action.style + '"' : ""}>${(_a2 = action.markdown) != null ? _a2 : actualMatch}</button>`;
+              } else {
+                if (context.isProgressive && !context.isIdle) {
+                  html = `<br /><button id="${buttonId}" data-pending="true" ${action.style ? 'class="' + action.style + '"' : ""}>${substituteTemplate((_b = action.markdown) != null ? _b : actualMatch)}</button>`;
+                } else {
+                  html = `<br /><button id="${buttonId}" ${action.style ? 'class="' + action.style + '"' : ""}>${substituteTemplate((_c = action.markdown) != null ? _c : actualMatch)}</button>`;
+                }
+              }
+            } else if (action.type === "markdown" || action.type === "html") {
+              html = context.type === "history" ? (_d = action.markdown) != null ? _d : "" : substituteTemplate((_e = action.markdown) != null ? _e : "");
+            }
+            if (context.type === "history") {
+              html = html.replace(new RegExp("\\$match", "gmi"), actualMatch);
+              restGroups.forEach((group, gi) => {
+                html = html.replace(
+                  new RegExp(`\\$${gi + 1}`, "gmi"),
+                  group || ""
+                );
+              });
+            }
+            if (action.type === "button" || action.type === "callback") {
+              if (context.type === "history") {
+                buttonAttachments.push({
+                  buttonId,
+                  action,
+                  match: actualMatch,
+                  groups: restGroups
+                });
+                buttonActionRegistry.current.set(buttonId, {
+                  action,
+                  match: actualMatch,
+                  groups: restGroups
+                });
+              } else {
+                if (!finalizedButtonsRef.current.has(buttonId)) {
+                  deferredActionsRef.current.set(buttonId, {
+                    action,
+                    match: actualMatch,
+                    groups: restGroups
+                  });
+                  if (!context.isProgressive) {
+                    buttonAttachments.push({
+                      buttonId,
+                      action,
+                      match: actualMatch,
+                      groups: restGroups
+                    });
+                  }
+                }
+              }
+            }
+            return html;
+          }
+        );
+      } catch (e) {
+        console.warn("Invalid action regex", action.pattern, e);
+      }
+    });
+    return {
+      processedContent: workingContent,
+      buttonAttachments
+    };
+  }, [allActions, processThinkingTags, progressiveActions, idle]);
   (0, import_react3.useEffect)(() => {
     setShowEmailPanel(customerEmailCaptureMode !== "HIDE");
     if (customerEmailCaptureMode === "REQUIRED") {
@@ -605,24 +720,12 @@ var ChatPanel = ({
         if (action.type === "response" && action.pattern) {
           const regex = new RegExp(action.pattern, "gi");
           const matches = regex.exec(response);
-          console.log(
-            "action match",
-            matches,
-            action.pattern,
-            action.callback
-          );
           if (matches && action.callback) {
             action.callback(matches[0], matches.slice(1));
           }
         }
       });
     }
-    if (lastCallId && lastCallId !== "" && idle && Object.keys(history).length > 0) {
-      console.log("=== HISTORY FOR initialHistory prop ===");
-      console.log("Copy this object to use as initialHistory:");
-      console.log(JSON.stringify(history, null, 2));
-      console.log("=== END HISTORY ===");
-    }
     if (responseCompleteCallback) {
       if (lastCallId && lastCallId !== "" && idle)
         responseCompleteCallback(lastCallId, lastPrompt != null ? lastPrompt : "", response);
@@ -659,13 +762,11 @@ var ChatPanel = ({
         link.rel = "stylesheet";
         link.setAttribute("data-source", "llmasaservice-ui");
         document.head.appendChild(link);
-        console.log("Added CSS link", link);
       } else {
         const style = document.createElement("style");
         style.textContent = cssUrl;
         style.setAttribute("data-source", "llmasaservice-ui");
         document.head.appendChild(style);
-        console.log("Added inline CSS");
       }
     }
     return () => {
@@ -814,7 +915,6 @@ var ChatPanel = ({
                 });
               }
             } else {
-              console.warn("Invalid or missing callback in action:", action);
               return null;
             }
           } else {
@@ -830,8 +930,9 @@ var ChatPanel = ({
   };
   (0, import_react3.useEffect)(() => {
     const actionsString = typeof actions === "string" ? actions : JSON.stringify(actions);
+    const processedActions = getActionsArraySafely(actionsString);
     setAllActions([
-      ...getActionsArraySafely(actionsString),
+      ...processedActions,
       anthropic_toolAction,
       openAI_toolAction,
       google_toolAction
@@ -852,63 +953,18 @@ var ChatPanel = ({
           processedHistoryKeysRef.current.add(prompt);
           return;
         }
-        let workingContent = entry.content;
-        allActions.filter((a) => a.actionType === "tool").forEach((action) => {
-          try {
-            const regex = new RegExp(action.pattern, "gmi");
-            workingContent = workingContent.replace(regex, "");
-          } catch (e) {
-            console.warn("Invalid tool action regex", action.pattern, e);
-          }
-        });
-        const { cleanedText } = processThinkingTags(workingContent);
-        workingContent = cleanedText;
-        allActions.filter((a) => a.type !== "response" && a.actionType !== "tool").forEach((action, actionIndex) => {
-          try {
-            const regex = new RegExp(action.pattern, "gmi");
-            workingContent = workingContent.replace(
-              regex,
-              (match, ...groups) => {
-                var _a2, _b;
-                const matchIndex = groups[groups.length - 2];
-                const buttonId = `button-init-${historyIndex}-${actionIndex}-${matchIndex}`;
-                let html = match;
-                if (action.type === "button" || action.type === "callback") {
-                  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 : "";
-                }
-                html = html.replace(new RegExp("\\$match", "gmi"), match);
-                groups.forEach((group, gi) => {
-                  html = html.replace(
-                    new RegExp(`\\$${gi + 1}`, "gmi"),
-                    group
-                  );
-                });
-                if (action.type === "button" || action.type === "callback") {
-                  newButtonAttachments.push({
-                    buttonId,
-                    action,
-                    match,
-                    groups
-                  });
-                  buttonActionRegistry.current.set(buttonId, {
-                    action,
-                    match,
-                    groups
-                  });
-                }
-                return html;
-              }
-            );
-          } catch (e) {
-            console.warn("Invalid action regex", action.pattern, e);
+        const { processedContent, buttonAttachments } = processActionsOnContent(
+          entry.content,
+          {
+            type: "history",
+            historyIndex
           }
-        });
-        if (workingContent !== entry.content) {
-          updated[prompt] = __spreadProps(__spreadValues({}, entry), { content: workingContent });
+        );
+        if (processedContent !== entry.content) {
+          updated[prompt] = __spreadProps(__spreadValues({}, entry), { content: processedContent });
           changed = true;
         }
+        newButtonAttachments.push(...buttonAttachments);
         processedHistoryKeysRef.current.add(prompt);
       });
       if (newButtonAttachments.length > 0) {
@@ -928,7 +984,6 @@ var ChatPanel = ({
     if (!requests || requests.length === 0)
       requests = pendingToolRequestsRef.current;
     if (requests.length === 0) return;
-    console.log("processGivenToolRequests", requests);
     setIsLoading(true);
     const toolsToProcess = [...requests];
     setPendingToolRequests([]);
@@ -973,7 +1028,6 @@ var ChatPanel = ({
         var _a2;
         if (!item || !item.req) return null;
         const req = item.req;
-        console.log(`Processing tool ${req.toolName}`);
         const mcpTool = toolList.find((tool) => tool.name === req.toolName);
         if (!mcpTool) {
           console.error(`Tool ${req.toolName} not found in tool list`);
@@ -1120,7 +1174,6 @@ var ChatPanel = ({
         });
       }
       if (toolRequests.length > 0) {
-        console.log("toolRequests", toolRequests);
         setPendingToolRequests(toolRequests);
       } else {
         setPendingToolRequests([]);
@@ -1135,66 +1188,16 @@ var ChatPanel = ({
       const { cleanedText, thinkingBlocks: newThinkingBlocks } = processThinkingTags(responseWithoutTools);
       setThinkingBlocks(newThinkingBlocks);
       setCurrentThinkingIndex(Math.max(0, newThinkingBlocks.length - 1));
-      let newResponse = cleanedText;
-      if (allActions && allActions.length > 0) {
-        const nonToolActions = allActions.filter(
-          (a) => a.type !== "response" && a.actionType !== "tool"
-        );
-        nonToolActions.forEach((action, actionIndex) => {
-          try {
-            const regex = new RegExp(action.pattern, "gmi");
-            newResponse = newResponse.replace(
-              regex,
-              (match, ...groups) => {
-                var _a2, _b, _c;
-                const offset = groups[groups.length - 2];
-                const matchOffset = typeof offset === "number" ? offset : 0;
-                const key = `${actionIndex}:${matchOffset}`;
-                let buttonId = actionMatchRegistry.current.get(key);
-                if (!buttonId) {
-                  buttonId = `button-stable-${actionSequenceRef.current++}`;
-                  actionMatchRegistry.current.set(key, buttonId);
-                }
-                if (progressiveActions && finalizedButtonsRef.current.has(buttonId)) {
-                  return match;
-                }
-                const substituteTemplate = (template) => {
-                  let html = template.replace(/\$match/gim, match);
-                  groups.forEach((g, gi) => {
-                    html = html.replace(new RegExp(`\\$${gi + 1}`, "gmi"), g);
-                  });
-                  return html;
-                };
-                let htmlOut = match;
-                if (action.type === "button" || action.type === "callback") {
-                  if (progressiveActions && !idle) {
-                    htmlOut = `<br /><button id="${buttonId}" data-pending="true" ${action.style ? 'class="' + action.style + '"' : ""}>${substituteTemplate((_a2 = action.markdown) != null ? _a2 : match)}</button>`;
-                  } else {
-                    htmlOut = `<br /><button id="${buttonId}" ${action.style ? 'class="' + action.style + '"' : ""}>${substituteTemplate((_b = action.markdown) != null ? _b : match)}</button>`;
-                  }
-                } else if (action.type === "markdown" || action.type === "html") {
-                  htmlOut = substituteTemplate((_c = action.markdown) != null ? _c : "");
-                }
-                if ((action.type === "button" || action.type === "callback") && !finalizedButtonsRef.current.has(buttonId)) {
-                  deferredActionsRef.current.set(buttonId, {
-                    action,
-                    match,
-                    groups
-                  });
-                  if (!progressiveActions) {
-                    setPendingButtonAttachments((prev) => [
-                      ...prev,
-                      { buttonId, action, match, groups }
-                    ]);
-                  }
-                }
-                return htmlOut;
-              }
-            );
-          } catch (e) {
-            console.warn("Invalid action regex", action.pattern, e);
-          }
-        });
+      const { processedContent: newResponse, buttonAttachments } = processActionsOnContent(
+        cleanedText,
+        {
+          type: "streaming",
+          isProgressive: progressiveActions,
+          isIdle: idle
+        }
+      );
+      if (!progressiveActions && buttonAttachments.length > 0) {
+        setPendingButtonAttachments((prev) => [...prev, ...buttonAttachments]);
       }
       setHistory((prevHistory) => {
         const existingEntry = prevHistory[lastKey != null ? lastKey : ""] || {
@@ -1423,16 +1426,50 @@ var ChatPanel = ({
       textarea.style.height = "auto";
       const minHeight = 40;
       const maxHeight = 120;
+      const effectiveMinHeight = userResizedHeight ? Math.max(userResizedHeight, minHeight) : minHeight;
+      const effectiveMaxHeight = userResizedHeight ? Number.MAX_SAFE_INTEGER : maxHeight;
       const newHeight = Math.min(
-        Math.max(textarea.scrollHeight, minHeight),
-        maxHeight
+        Math.max(textarea.scrollHeight, effectiveMinHeight),
+        effectiveMaxHeight
       );
       textarea.style.height = `${newHeight}px`;
     }
-  }, []);
+  }, [userResizedHeight]);
   (0, import_react3.useEffect)(() => {
     autoResizeTextarea();
   }, [nextPrompt, autoResizeTextarea]);
+  (0, import_react3.useEffect)(() => {
+    if (!textareaRef.current) return;
+    const textarea = textareaRef.current;
+    let heightBeforeInteraction = textarea.clientHeight;
+    let userIsInteracting = false;
+    const handleMouseDown = () => {
+      heightBeforeInteraction = textarea.clientHeight;
+      userIsInteracting = true;
+    };
+    const handleMouseUp = () => {
+      if (userIsInteracting) {
+        const currentHeight = textarea.clientHeight;
+        if (Math.abs(currentHeight - heightBeforeInteraction) > 5) {
+          setUserResizedHeight(currentHeight);
+        }
+        userIsInteracting = false;
+      }
+    };
+    const handleGlobalMouseUp = () => {
+      if (userIsInteracting) {
+        handleMouseUp();
+      }
+    };
+    textarea.addEventListener("mousedown", handleMouseDown);
+    textarea.addEventListener("mouseup", handleMouseUp);
+    document.addEventListener("mouseup", handleGlobalMouseUp);
+    return () => {
+      textarea.removeEventListener("mousedown", handleMouseDown);
+      textarea.removeEventListener("mouseup", handleMouseUp);
+      document.removeEventListener("mouseup", handleGlobalMouseUp);
+    };
+  }, []);
   (0, import_react3.useEffect)(() => {
     if (initialPrompt && initialPrompt !== "") {
       if (initialPrompt !== lastPrompt) {
@@ -1500,7 +1537,6 @@ var ChatPanel = ({
     }
   }, [history, historyChangedCallback]);
   (0, import_react3.useEffect)(() => {
-    console.log("followOnPromptChanged detected");
     if (followOnPrompt && followOnPrompt !== "") {
       continueChat(followOnPrompt);
     }
@@ -1549,7 +1585,6 @@ var ChatPanel = ({
         return res.json();
       })).then((newConvo) => {
         if (newConvo == null ? void 0 : newConvo.id) {
-          console.log("new conversation created", newConvo.id);
           setCurrentConversation(newConvo.id);
           return newConvo.id;
         }
@@ -1593,11 +1628,6 @@ var ChatPanel = ({
     if (needsUpdate && (updatedValues.customer_id !== currentCustomer.customer_id || updatedValues.customer_user_email !== currentCustomer.customer_user_email)) {
       ensureConversation().then((convId) => {
         if (convId && convId !== "") {
-          console.log(
-            "updating conversation with customer id and email",
-            convId,
-            updatedValues
-          );
           fetch(`${publicAPIUrl}/conversations/${convId}`, {
             method: "POST",
             headers: {
@@ -1617,7 +1647,6 @@ var ChatPanel = ({
     }
   }, [currentCustomer, project_id, agent, publicAPIUrl, emailInput]);
   const continueChat = (suggestion) => {
-    console.log("continueChat called");
     setThinkingBlocks([]);
     setCurrentThinkingIndex(0);
     if (emailInput && isEmailAddress(emailInput) && !emailInputSet) {
@@ -1631,7 +1660,6 @@ var ChatPanel = ({
     }
     ensureConversation().then((convId) => {
       var _a2, _b, _c;
-      console.log("current customer", currentCustomer);
       if (!idle) {
         stop(lastController);
         setHistory((prevHistory) => {
@@ -1700,7 +1728,6 @@ var ChatPanel = ({
             }
           }
         }
-        console.log("Sending for conversation", convId);
         const controller = new AbortController();
         send(
           nextPromptToSend,
@@ -2427,7 +2454,7 @@ var ChatPanel = ({
       "textarea",
       {
         ref: textareaRef,
-        className: "chat-input",
+        className: `chat-input${userResizedHeight ? " user-resized" : ""}`,
         placeholder,
         value: nextPrompt,
         onChange: (e) => {
@@ -2446,7 +2473,14 @@ var ChatPanel = ({
             }
           }
         },
-        disabled: isDisabledDueToNoEmail()
+        onDoubleClick: () => {
+          if (userResizedHeight) {
+            setUserResizedHeight(null);
+            setTimeout(autoResizeTextarea, 0);
+          }
+        },
+        disabled: isDisabledDueToNoEmail(),
+        title: userResizedHeight ? "Double-click to reset to auto-resize" : "Drag bottom-right corner to manually resize"
       }
     ), /* @__PURE__ */ import_react3.default.createElement(
       "button",