@emblemvault/hustle-react 1.2.0 → 1.4.0

package/dist/components/index.cjs

@@ -1609,7 +1609,7 @@ var screenshotExecutor = async (args2) => {
     if (!window.html2canvas) {
       await new Promise((resolve, reject) => {
         const script = document.createElement("script");
-        script.src = "https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js";
+        script.src = "https://cdn.jsdelivr.net/npm/html2canvas-pro@1.5.0/dist/html2canvas-pro.min.js";
         script.onload = () => resolve();
         script.onerror = () => reject(new Error("Failed to load html2canvas"));
         document.head.appendChild(script);
@@ -2664,6 +2664,14 @@ var animations = `
     text-shadow: 0 0 8px ${defaults.colors.accentPrimary};
   }
 }
+/* Hide scrollbar while maintaining scroll functionality */
+.hustle-hide-scrollbar {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+.hustle-hide-scrollbar::-webkit-scrollbar {
+  display: none;  /* Chrome, Safari, Opera */
+}
 `;
 hljs__default.default.registerLanguage("javascript", javascript__default.default);
 hljs__default.default.registerLanguage("js", javascript__default.default);
@@ -3307,7 +3315,11 @@ var styles = {
     border: "none",
     borderRadius: 0,
     color: tokens.colors.textTertiary,
-    flexShrink: 0
+    flexShrink: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    cursor: "pointer"
   },
   inputWrapper: {
     flex: 1
@@ -3516,6 +3528,7 @@ function HustleChat({
   placeholder = "Type a message...",
   showSettings = false,
   showDebug = false,
+  hideHeader = false,
   initialSystemPrompt = "",
   onMessage,
   onToolCall,
@@ -3528,6 +3541,7 @@ function HustleChat({
     isLoading,
     error: error2,
     models,
+    client,
     chatStream,
     uploadFile,
     selectedModel,
@@ -3554,6 +3568,7 @@ function HustleChat({
   const [showSettingsPanel, setShowSettingsPanel] = react.useState(false);
   const messagesEndRef = react.useRef(null);
   const fileInputRef = react.useRef(null);
+  const messagesRef = react.useRef(messages);
   react.useEffect(() => {
     if (initialSystemPrompt && !systemPrompt) {
       setSystemPrompt(initialSystemPrompt);
@@ -3562,6 +3577,9 @@ function HustleChat({
   react.useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
+  react.useEffect(() => {
+    messagesRef.current = messages;
+  }, [messages]);
   const handleFileSelect = react.useCallback(
     async (e) => {
       const files = e.target.files;
@@ -3583,6 +3601,96 @@ function HustleChat({
   const removeAttachment = react.useCallback((index) => {
     setAttachments((prev) => prev.filter((_, i) => i !== index));
   }, []);
+  const sendContinue = react.useCallback(async () => {
+    if (isStreaming || !isReady) return;
+    console.log("[AUTO_CONTINUE] Sending continue message...");
+    const userMessage = {
+      id: generateId(),
+      role: "user",
+      content: "continue"
+    };
+    setMessages((prev) => [...prev, userMessage]);
+    onMessage?.(userMessage);
+    const assistantMessage = {
+      id: generateId(),
+      role: "assistant",
+      content: "",
+      isStreaming: true,
+      toolCalls: []
+    };
+    setMessages((prev) => [...prev, assistantMessage]);
+    setIsStreaming(true);
+    setCurrentToolCalls([]);
+    try {
+      const chatMessages = messagesRef.current.filter((m) => !m.isStreaming).map((m) => ({ role: m.role, content: m.content }));
+      chatMessages.push({ role: "user", content: "continue" });
+      const stream = chatStream({
+        messages: chatMessages,
+        processChunks: true
+      });
+      let fullContent = "";
+      const toolCallsAccumulated = [];
+      for await (const chunk of stream) {
+        if (chunk.type === "text") {
+          fullContent += chunk.value;
+          setMessages(
+            (prev) => prev.map(
+              (m) => m.id === assistantMessage.id ? { ...m, content: fullContent } : m
+            )
+          );
+        } else if (chunk.type === "tool_call") {
+          const toolCall = chunk.value;
+          toolCallsAccumulated.push(toolCall);
+          setCurrentToolCalls([...toolCallsAccumulated]);
+          setMessages(
+            (prev) => prev.map(
+              (m) => m.id === assistantMessage.id ? { ...m, toolCalls: [...toolCallsAccumulated] } : m
+            )
+          );
+          onToolCall?.(toolCall);
+        } else if (chunk.type === "error") {
+          console.error("Stream error:", chunk.value);
+        }
+      }
+      const processedResponse = await stream.response;
+      const finalContent = processedResponse?.content || fullContent || "(No response)";
+      setMessages(
+        (prev) => prev.map(
+          (m) => m.id === assistantMessage.id ? { ...m, isStreaming: false, content: finalContent } : m
+        )
+      );
+      onResponse?.(finalContent);
+    } catch (err) {
+      console.error("Continue error:", err);
+      setMessages(
+        (prev) => prev.map(
+          (m) => m.id === assistantMessage.id ? { ...m, isStreaming: false, content: `Error: ${err instanceof Error ? err.message : "Unknown error"}` } : m
+        )
+      );
+    } finally {
+      setIsStreaming(false);
+      setCurrentToolCalls([]);
+    }
+  }, [isStreaming, isReady, chatStream, onMessage, onToolCall, onResponse]);
+  react.useEffect(() => {
+    if (!client) return;
+    const unsubMaxTools = client.on("max_tools_reached", (event) => {
+      console.log(`[AUTO_CONTINUE] Max tools reached (${event.toolsExecuted}/${event.maxSteps}), auto-continuing...`);
+      setTimeout(() => {
+        sendContinue();
+      }, 100);
+    });
+    const unsubTimeout = client.on("timeout", (event) => {
+      console.log(`[AUTO_CONTINUE] Timeout: ${event.message}, auto-continuing...`);
+      setTimeout(() => {
+        sendContinue();
+      }, 100);
+    });
+    return () => {
+      unsubMaxTools();
+      unsubTimeout();
+    };
+  }, [client, sendContinue]);
   const sendMessage = react.useCallback(async () => {
     const content = inputValue.trim();
     if (!content || isStreaming || !isReady) return;
@@ -3679,7 +3787,7 @@ function HustleChat({
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("style", { children: animations }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: styles.container, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.header, children: [
+      !hideHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.header, children: [
         /* @__PURE__ */ jsxRuntime.jsx("h2", { style: styles.headerTitle, children: "Chat" }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.headerActions, children: [
           selectedModel && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: tokens.typography.fontSizeSm, color: tokens.colors.textSecondary }, children: selectedModel.split("/").pop() }),
@@ -3854,7 +3962,7 @@ function HustleChat({
           ] })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.messagesArea, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hustle-hide-scrollbar", style: styles.messagesArea, children: [
         messages.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.messagesEmpty, children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: getPlaceholderMessage() }) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.messagesContainer, children: messages.map((message) => /* @__PURE__ */ jsxRuntime.jsx(
           MessageBubble,
@@ -3981,8 +4089,346 @@ function SettingsIcon() {
 function AttachIcon() {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" }) });
 }
+var sizeConfigs = {
+  sm: { width: "320px", height: "400px" },
+  md: { width: "380px", height: "520px" },
+  lg: { width: "420px", height: "600px" },
+  xl: { width: "480px", height: "700px" },
+  full: { width: "100vw", height: "100vh" }
+};
+var widgetStyles = {
+  // Container for absolute positioning
+  container: {
+    position: "fixed",
+    zIndex: 9999,
+    fontFamily: tokens.typography.fontFamily
+  },
+  // Launcher button
+  launcher: {
+    width: "56px",
+    height: "56px",
+    borderRadius: tokens.radius.full,
+    background: `linear-gradient(135deg, ${tokens.colors.accentPrimary} 0%, #2d7dd2 100%)`,
+    border: "none",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    boxShadow: `0 4px 20px rgba(76, 154, 255, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3)`,
+    transition: `all ${tokens.transitions.normal}`,
+    color: tokens.colors.textInverse
+  },
+  launcherHover: {
+    transform: "scale(1.05)",
+    boxShadow: `0 6px 24px rgba(76, 154, 255, 0.5), 0 4px 12px rgba(0, 0, 0, 0.4)`
+  },
+  // Badge
+  badge: {
+    position: "absolute",
+    top: "-4px",
+    right: "-4px",
+    minWidth: "20px",
+    height: "20px",
+    borderRadius: tokens.radius.pill,
+    background: tokens.colors.accentError,
+    color: tokens.colors.textInverse,
+    fontSize: tokens.typography.fontSizeXs,
+    fontWeight: tokens.typography.fontWeightSemibold,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "0 6px",
+    border: `2px solid ${tokens.colors.bgPrimary}`
+  },
+  // Chat panel
+  panel: {
+    position: "absolute",
+    borderRadius: tokens.radius.xl,
+    background: tokens.colors.bgSecondary,
+    border: `1px solid ${tokens.colors.borderPrimary}`,
+    boxShadow: `0 16px 48px rgba(0, 0, 0, 0.5)`,
+    overflow: "hidden",
+    display: "flex",
+    flexDirection: "column",
+    transition: `all ${tokens.transitions.slow}`
+  },
+  panelHidden: {
+    opacity: 0,
+    transform: "scale(0.95) translateY(10px)",
+    pointerEvents: "none"
+  },
+  panelVisible: {
+    opacity: 1,
+    transform: "scale(1) translateY(0)"
+  },
+  // Full screen mode overrides
+  panelFull: {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderRadius: 0,
+    width: "100vw",
+    height: "100vh"
+  },
+  // Close button in panel header
+  closeBtn: {
+    width: "32px",
+    height: "32px",
+    borderRadius: tokens.radius.md,
+    background: "transparent",
+    border: "none",
+    color: tokens.colors.textTertiary,
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: `all ${tokens.transitions.fast}`
+  },
+  closeBtnHover: {
+    background: tokens.colors.bgTertiary,
+    color: tokens.colors.textPrimary
+  }
+};
+function ChatIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) });
+}
+function CloseIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+  ] });
+}
+function MinimizeIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "4 14 10 14 10 20" }),
+    /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 10 14 10 14 4" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "14", y1: "10", x2: "21", y2: "3" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+  ] });
+}
+function HustleChatWidget({
+  config = {},
+  ...chatProps
+}) {
+  const {
+    position = "bottom-right",
+    size = "md",
+    title = "Chat",
+    defaultOpen = false,
+    launcherIcon,
+    offset = { x: 24, y: 24 },
+    zIndex = 9999,
+    showBadge = false,
+    badgeContent,
+    launcherStyle,
+    panelStyle,
+    onOpen,
+    onClose,
+    storageKey = "hustle-widget-open"
+  } = config;
+  const [isOpen, setIsOpen] = react.useState(false);
+  const [isHovered, setIsHovered] = react.useState(false);
+  const [closeHovered, setCloseHovered] = react.useState(false);
+  const [mounted, setMounted] = react.useState(false);
+  react.useEffect(() => {
+    setMounted(true);
+    if (storageKey && typeof window !== "undefined") {
+      const stored = localStorage.getItem(storageKey);
+      if (stored !== null) {
+        setIsOpen(stored === "true");
+      } else {
+        setIsOpen(defaultOpen);
+      }
+    } else {
+      setIsOpen(defaultOpen);
+    }
+  }, [defaultOpen, storageKey]);
+  react.useEffect(() => {
+    if (!mounted) return;
+    if (storageKey && typeof window !== "undefined") {
+      localStorage.setItem(storageKey, String(isOpen));
+    }
+  }, [isOpen, storageKey, mounted]);
+  const toggle = react.useCallback(() => {
+    setIsOpen((prev) => {
+      const next = !prev;
+      if (next) {
+        onOpen?.();
+      } else {
+        onClose?.();
+      }
+      return next;
+    });
+  }, [onOpen, onClose]);
+  const positionStyles = getPositionStyles(position, offset);
+  const sizeConfig = sizeConfigs[size];
+  if (!mounted) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("style", { children: animations }),
+    /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+        @keyframes hustle-widget-bounce {
+          0%, 100% { transform: translateY(0); }
+          50% { transform: translateY(-4px); }
+        }
+      ` }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          ...widgetStyles.container,
+          ...positionStyles.container,
+          zIndex
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              style: {
+                ...widgetStyles.panel,
+                ...positionStyles.panel,
+                ...size === "full" ? widgetStyles.panelFull : {
+                  width: sizeConfig.width,
+                  height: sizeConfig.height
+                },
+                ...isOpen ? widgetStyles.panelVisible : widgetStyles.panelHidden,
+                ...panelStyle
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "space-between",
+                      padding: `${tokens.spacing.md} ${tokens.spacing.lg}`,
+                      background: tokens.colors.bgPrimary,
+                      borderBottom: `1px solid ${tokens.colors.borderPrimary}`,
+                      borderRadius: `${tokens.radius.xl} ${tokens.radius.xl} 0 0`,
+                      flexShrink: 0
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          style: {
+                            fontWeight: tokens.typography.fontWeightSemibold,
+                            color: tokens.colors.textPrimary,
+                            fontSize: tokens.typography.fontSizeMd
+                          },
+                          children: title
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          onClick: toggle,
+                          onMouseEnter: () => setCloseHovered(true),
+                          onMouseLeave: () => setCloseHovered(false),
+                          style: {
+                            ...widgetStyles.closeBtn,
+                            ...closeHovered ? widgetStyles.closeBtnHover : {}
+                          },
+                          title: "Close chat",
+                          children: size === "full" ? /* @__PURE__ */ jsxRuntime.jsx(MinimizeIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {})
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx(HustleChatInner, { ...chatProps }) })
+              ]
+            }
+          ),
+          (size !== "full" || !isOpen) && /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onClick: toggle,
+              onMouseEnter: () => setIsHovered(true),
+              onMouseLeave: () => setIsHovered(false),
+              style: {
+                ...widgetStyles.launcher,
+                ...isHovered ? widgetStyles.launcherHover : {},
+                ...positionStyles.launcher,
+                ...launcherStyle,
+                ...isOpen ? { opacity: 0, pointerEvents: "none" } : {}
+              },
+              title: isOpen ? "Close chat" : "Open chat",
+              "aria-label": isOpen ? "Close chat" : "Open chat",
+              children: [
+                launcherIcon || /* @__PURE__ */ jsxRuntime.jsx(ChatIcon, {}),
+                showBadge && badgeContent && !isOpen && /* @__PURE__ */ jsxRuntime.jsx("span", { style: widgetStyles.badge, children: badgeContent })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function HustleChatInner(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(HustleChat, { ...props, hideHeader: true });
+}
+function getPositionStyles(position, offset, isOpen, size) {
+  const panelGap = 16;
+  switch (position) {
+    case "bottom-right":
+      return {
+        container: {
+          bottom: `${offset.y}px`,
+          right: `${offset.x}px`
+        },
+        launcher: {},
+        panel: {
+          bottom: `${56 + panelGap}px`,
+          right: 0
+        }
+      };
+    case "bottom-left":
+      return {
+        container: {
+          bottom: `${offset.y}px`,
+          left: `${offset.x}px`
+        },
+        launcher: {},
+        panel: {
+          bottom: `${56 + panelGap}px`,
+          left: 0
+        }
+      };
+    case "top-right":
+      return {
+        container: {
+          top: `${offset.y}px`,
+          right: `${offset.x}px`
+        },
+        launcher: {},
+        panel: {
+          top: `${56 + panelGap}px`,
+          right: 0
+        }
+      };
+    case "top-left":
+      return {
+        container: {
+          top: `${offset.y}px`,
+          left: `${offset.x}px`
+        },
+        launcher: {},
+        panel: {
+          top: `${56 + panelGap}px`,
+          left: 0
+        }
+      };
+  }
+}
 
 exports.HustleChat = HustleChat;
+exports.HustleChatWidget = HustleChatWidget;
 exports.MarkdownContent = MarkdownContent;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map