@emblemvault/hustle-react 1.2.0 → 1.3.0

package/dist/components/index.js

@@ -2638,6 +2638,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.registerLanguage("javascript", javascript);
 hljs.registerLanguage("js", javascript);
@@ -3490,6 +3498,7 @@ function HustleChat({
   placeholder = "Type a message...",
   showSettings = false,
   showDebug = false,
+  hideHeader = false,
   initialSystemPrompt = "",
   onMessage,
   onToolCall,
@@ -3653,7 +3662,7 @@ function HustleChat({
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("style", { children: animations }),
     /* @__PURE__ */ jsxs("div", { className, style: styles.container, children: [
-      /* @__PURE__ */ jsxs("div", { style: styles.header, children: [
+      !hideHeader && /* @__PURE__ */ jsxs("div", { style: styles.header, children: [
         /* @__PURE__ */ jsx("h2", { style: styles.headerTitle, children: "Chat" }),
         /* @__PURE__ */ jsxs("div", { style: styles.headerActions, children: [
           selectedModel && /* @__PURE__ */ jsx("span", { style: { fontSize: tokens.typography.fontSizeSm, color: tokens.colors.textSecondary }, children: selectedModel.split("/").pop() }),
@@ -3828,7 +3837,7 @@ function HustleChat({
           ] })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsxs("div", { style: styles.messagesArea, children: [
+      /* @__PURE__ */ jsxs("div", { className: "hustle-hide-scrollbar", style: styles.messagesArea, children: [
         messages.length === 0 && /* @__PURE__ */ jsx("div", { style: styles.messagesEmpty, children: /* @__PURE__ */ jsx("p", { children: getPlaceholderMessage() }) }),
         /* @__PURE__ */ jsx("div", { style: styles.messagesContainer, children: messages.map((message) => /* @__PURE__ */ jsx(
           MessageBubble,
@@ -3955,7 +3964,344 @@ function SettingsIcon() {
 function AttachIcon() {
   return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ 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__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ 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__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+  ] });
+}
+function MinimizeIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("polyline", { points: "4 14 10 14 10 20" }),
+    /* @__PURE__ */ jsx("polyline", { points: "20 10 14 10 14 4" }),
+    /* @__PURE__ */ jsx("line", { x1: "14", y1: "10", x2: "21", y2: "3" }),
+    /* @__PURE__ */ 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] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const [closeHovered, setCloseHovered] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  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]);
+  useEffect(() => {
+    if (!mounted) return;
+    if (storageKey && typeof window !== "undefined") {
+      localStorage.setItem(storageKey, String(isOpen));
+    }
+  }, [isOpen, storageKey, mounted]);
+  const toggle = 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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: animations }),
+    /* @__PURE__ */ jsx("style", { children: `
+        @keyframes hustle-widget-bounce {
+          0%, 100% { transform: translateY(0); }
+          50% { transform: translateY(-4px); }
+        }
+      ` }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          ...widgetStyles.container,
+          ...positionStyles.container,
+          zIndex
+        },
+        children: [
+          /* @__PURE__ */ 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__ */ 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__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            fontWeight: tokens.typography.fontWeightSemibold,
+                            color: tokens.colors.textPrimary,
+                            fontSize: tokens.typography.fontSizeMd
+                          },
+                          children: title
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: toggle,
+                          onMouseEnter: () => setCloseHovered(true),
+                          onMouseLeave: () => setCloseHovered(false),
+                          style: {
+                            ...widgetStyles.closeBtn,
+                            ...closeHovered ? widgetStyles.closeBtnHover : {}
+                          },
+                          title: "Close chat",
+                          children: size === "full" ? /* @__PURE__ */ jsx(MinimizeIcon, {}) : /* @__PURE__ */ jsx(CloseIcon, {})
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { style: { flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }, children: /* @__PURE__ */ jsx(HustleChatInner, { ...chatProps }) })
+              ]
+            }
+          ),
+          (size !== "full" || !isOpen) && /* @__PURE__ */ 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__ */ jsx(ChatIcon, {}),
+                showBadge && badgeContent && !isOpen && /* @__PURE__ */ jsx("span", { style: widgetStyles.badge, children: badgeContent })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function HustleChatInner(props) {
+  return /* @__PURE__ */ 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
+        }
+      };
+  }
+}
 
-export { HustleChat, MarkdownContent };
+export { HustleChat, HustleChatWidget, MarkdownContent };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map