@emblemvault/hustle-react 1.5.0 → 1.5.1

package/dist/components/index.d.cts

@@ -13,6 +13,10 @@ interface HustleChatProps {
     placeholder?: string;
     /** Show settings button (opens modal with model selector, prompts, etc.) */
     showSettings?: boolean;
+    /** Controlled mode: external control of settings panel visibility */
+    settingsPanelOpen?: boolean;
+    /** Controlled mode: callback when settings panel visibility changes */
+    onSettingsPanelOpenChange?: (open: boolean) => void;
     /** Show debug info */
     showDebug?: boolean;
     /** Hide the header (useful when embedding in a widget with its own header) */
@@ -45,7 +49,7 @@ interface HustleChatProps {
  * />
  * ```
  */
-declare function HustleChat({ className, placeholder, showSettings, showDebug, hideHeader, initialSystemPrompt, enableSpeechToText, onMessage, onToolCall, onResponse, }: HustleChatProps): react_jsx_runtime.JSX.Element;
+declare function HustleChat({ className, placeholder, showSettings, settingsPanelOpen: controlledSettingsPanelOpen, onSettingsPanelOpenChange, showDebug, hideHeader, initialSystemPrompt, enableSpeechToText, onMessage, onToolCall, onResponse, }: HustleChatProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Position options for the widget

package/dist/components/index.d.ts

@@ -13,6 +13,10 @@ interface HustleChatProps {
     placeholder?: string;
     /** Show settings button (opens modal with model selector, prompts, etc.) */
     showSettings?: boolean;
+    /** Controlled mode: external control of settings panel visibility */
+    settingsPanelOpen?: boolean;
+    /** Controlled mode: callback when settings panel visibility changes */
+    onSettingsPanelOpenChange?: (open: boolean) => void;
     /** Show debug info */
     showDebug?: boolean;
     /** Hide the header (useful when embedding in a widget with its own header) */
@@ -45,7 +49,7 @@ interface HustleChatProps {
  * />
  * ```
  */
-declare function HustleChat({ className, placeholder, showSettings, showDebug, hideHeader, initialSystemPrompt, enableSpeechToText, onMessage, onToolCall, onResponse, }: HustleChatProps): react_jsx_runtime.JSX.Element;
+declare function HustleChat({ className, placeholder, showSettings, settingsPanelOpen: controlledSettingsPanelOpen, onSettingsPanelOpenChange, showDebug, hideHeader, initialSystemPrompt, enableSpeechToText, onMessage, onToolCall, onResponse, }: HustleChatProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Position options for the widget

package/dist/components/index.js

@@ -3660,6 +3660,8 @@ function HustleChat({
   className = "",
   placeholder = "Type a message...",
   showSettings = false,
+  settingsPanelOpen: controlledSettingsPanelOpen,
+  onSettingsPanelOpenChange,
   showDebug = false,
   hideHeader = false,
   initialSystemPrompt = "",
@@ -3699,7 +3701,17 @@ function HustleChat({
   const [isStreaming, setIsStreaming] = useState(false);
   const [attachments, setAttachments] = useState([]);
   const [currentToolCalls, setCurrentToolCalls] = useState([]);
-  const [showSettingsPanel, setShowSettingsPanel] = useState(false);
+  const [internalShowSettingsPanel, setInternalShowSettingsPanel] = 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] = useState(() => {
     if (typeof window !== "undefined") {
       const stored = localStorage.getItem(`hustle-stt-enabled-${instanceId}`);
@@ -4572,6 +4584,12 @@ function CloseIcon() {
     /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
   ] });
 }
+function SettingsIcon2() {
+  return /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" }),
+    /* @__PURE__ */ 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__ */ 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: "15 3 21 3 21 9" }),
@@ -4620,6 +4638,8 @@ function HustleChatWidget({
   const [isHovered, setIsHovered] = useState(false);
   const [closeHovered, setCloseHovered] = useState(false);
   const [mounted, setMounted] = useState(false);
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const { showSettings, ...restChatProps } = chatProps;
   useEffect(() => {
     setMounted(true);
     if (storageKey && typeof window !== "undefined") {
@@ -4729,6 +4749,18 @@ function HustleChatWidget({
                         ] })
                       ] }),
                       /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: tokens.spacing.xs }, children: [
+                        showSettings && /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            onClick: () => setSettingsOpen(!settingsOpen),
+                            style: {
+                              ...widgetStyles.closeBtn,
+                              ...settingsOpen ? { background: tokens.colors.bgSecondary } : {}
+                            },
+                            title: "Settings",
+                            children: /* @__PURE__ */ jsx(SettingsIcon2, {})
+                          }
+                        ),
                         size === "sideDock" && /* @__PURE__ */ jsx(
                           "button",
                           {
@@ -4763,7 +4795,15 @@ function HustleChatWidget({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx("div", { style: { flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }, children: /* @__PURE__ */ jsx(HustleChatInner, { ...chatProps }) })
+                /* @__PURE__ */ jsx("div", { style: { flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }, children: /* @__PURE__ */ jsx(
+                  HustleChatInner,
+                  {
+                    ...restChatProps,
+                    showSettings,
+                    settingsPanelOpen: settingsOpen,
+                    onSettingsPanelOpenChange: setSettingsOpen
+                  }
+                ) })
               ]
             }
           ),