@emblemvault/hustle-react 1.5.0 → 1.5.1

package/dist/index.cjs

@@ -4136,6 +4136,8 @@ function HustleChat({
   className = "",
   placeholder = "Type a message...",
   showSettings = false,
+  settingsPanelOpen: controlledSettingsPanelOpen,
+  onSettingsPanelOpenChange,
   showDebug = false,
   hideHeader = false,
   initialSystemPrompt = "",
@@ -4175,7 +4177,17 @@ function HustleChat({
   const [isStreaming, setIsStreaming] = react.useState(false);
   const [attachments, setAttachments] = react.useState([]);
   const [currentToolCalls, setCurrentToolCalls] = react.useState([]);
-  const [showSettingsPanel, setShowSettingsPanel] = react.useState(false);
+  const [internalShowSettingsPanel, setInternalShowSettingsPanel] = react.useState(false);
+  const isSettingsControlled = controlledSettingsPanelOpen !== void 0;
+  const showSettingsPanel = isSettingsControlled ? controlledSettingsPanelOpen : internalShowSettingsPanel;
+  const setShowSettingsPanel = (open) => {
+    const newValue = typeof open === "function" ? open(showSettingsPanel) : open;
+    if (isSettingsControlled) {
+      onSettingsPanelOpenChange?.(newValue);
+    } else {
+      setInternalShowSettingsPanel(newValue);
+    }
+  };
   const [speechToTextEnabled, setSpeechToTextEnabled] = react.useState(() => {
     if (typeof window !== "undefined") {
       const stored = localStorage.getItem(`hustle-stt-enabled-${instanceId}`);
@@ -5048,6 +5060,12 @@ function CloseIcon() {
     /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
   ] });
 }
+function SettingsIcon2() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "3" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })
+  ] });
+}
 function ExpandIcon() {
   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: "15 3 21 3 21 9" }),
@@ -5096,6 +5114,8 @@ function HustleChatWidget({
   const [isHovered, setIsHovered] = react.useState(false);
   const [closeHovered, setCloseHovered] = react.useState(false);
   const [mounted, setMounted] = react.useState(false);
+  const [settingsOpen, setSettingsOpen] = react.useState(false);
+  const { showSettings, ...restChatProps } = chatProps;
   react.useEffect(() => {
     setMounted(true);
     if (storageKey && typeof window !== "undefined") {
@@ -5205,6 +5225,18 @@ function HustleChatWidget({
                         ] })
                       ] }),
                       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: tokens.spacing.xs }, children: [
+                        showSettings && /* @__PURE__ */ jsxRuntime.jsx(
+                          "button",
+                          {
+                            onClick: () => setSettingsOpen(!settingsOpen),
+                            style: {
+                              ...widgetStyles.closeBtn,
+                              ...settingsOpen ? { background: tokens.colors.bgSecondary } : {}
+                            },
+                            title: "Settings",
+                            children: /* @__PURE__ */ jsxRuntime.jsx(SettingsIcon2, {})
+                          }
+                        ),
                         size === "sideDock" && /* @__PURE__ */ jsxRuntime.jsx(
                           "button",
                           {
@@ -5239,7 +5271,15 @@ function HustleChatWidget({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx(HustleChatInner, { ...chatProps }) })
+                /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  HustleChatInner,
+                  {
+                    ...restChatProps,
+                    showSettings,
+                    settingsPanelOpen: settingsOpen,
+                    onSettingsPanelOpenChange: setSettingsOpen
+                  }
+                ) })
               ]
             }
           ),