@helpai/elements 0.7.0 → 0.7.1

package/index.mjs

@@ -884,10 +884,11 @@ function pickInitialPanelSize(mode, size, viewportWidth) {
   }
   return "normal";
 }
-function resolveInitialPanelState(options, viewportWidth, persistedPanelOpen) {
+function resolveInitialPanelState(options, viewportWidth, persistedPanelOpen, persistedPanelSize = null) {
   const isInlineLike = options.mode === "inline" || options.mode === "standalone" || options.mode === "page";
   const panelOpen = isInlineLike || (persistedPanelOpen ?? !options.startMinimized);
-  const panelSize = pickInitialPanelSize(options.mode, options.size, viewportWidth);
+  const honorsPersisted = options.mode !== "standalone" && options.mode !== "page" && options.mode !== "inline";
+  const panelSize = honorsPersisted && persistedPanelSize ? persistedPanelSize : pickInitialPanelSize(options.mode, options.size, viewportWidth);
   return { panelOpen, panelSize };
 }
 function currentViewportWidth() {
@@ -1810,6 +1811,7 @@ function createPersistence(widgetId, storage = defaultStorage) {
   const KEY_CHAT = `${prefix}.sessionId`;
   const KEY_USER_PREFS = `${prefix}.userPrefs`;
   const KEY_PANEL_OPEN = `${prefix}.panelOpen`;
+  const KEY_PANEL_SIZE = `${prefix}.panelSize`;
   const KEY_CALLOUT_DISMISSED = `${prefix}.calloutDismissed`;
   const KEY_SIDEBAR_COLLAPSED = `${prefix}.sidebarCollapsed`;
   const KEY_ACTIVE_MODULE = `${prefix}.activeModule`;
@@ -1864,6 +1866,13 @@ function createPersistence(widgetId, storage = defaultStorage) {
     savePanelOpen(open) {
       storage.set(KEY_PANEL_OPEN, open ? "1" : "0");
     },
+    loadPanelSize() {
+      const raw = storage.get(KEY_PANEL_SIZE);
+      return raw === "normal" || raw === "expanded" || raw === "fullscreen" ? raw : null;
+    },
+    savePanelSize(size) {
+      storage.set(KEY_PANEL_SIZE, size);
+    },
     loadCalloutDismissed(currentText) {
       if (!currentText) return false;
       const dismissedText = storage.get(KEY_CALLOUT_DISMISSED);
@@ -5218,7 +5227,7 @@ function App({ options, hostElement, bus }) {
   const [sessionReady, setSessionReady] = useState11(false);
   const isInlineLike = options.mode === "standalone" || options.mode === "inline";
   const initialPanelRef = useRef8(
-    resolveInitialPanelState(options, currentViewportWidth(), persistence.loadPanelOpen())
+    resolveInitialPanelState(options, currentViewportWidth(), persistence.loadPanelOpen(), persistence.loadPanelSize())
   );
   const [isOpen, setIsOpen] = useState11(initialPanelRef.current.panelOpen);
   const initialPanelApplied = useRef8(false);
@@ -5289,13 +5298,19 @@ function App({ options, hostElement, bus }) {
   }, [feedback, patchAndSync]);
   useEffect17(() => {
     if (initialSizeApplied.current || !options.size.initialSize) return;
-    setPanelSize(pickInitialPanelSize(options.mode, options.size, currentViewportWidth()));
     initialSizeApplied.current = true;
-  }, [options.mode, options.size]);
+    if (persistence.loadPanelSize()) return;
+    setPanelSize(pickInitialPanelSize(options.mode, options.size, currentViewportWidth()));
+  }, [options.mode, options.size, persistence]);
   useEffect17(() => {
     if (!sessionReady || initialPanelApplied.current) return;
     initialPanelApplied.current = true;
-    const state = resolveInitialPanelState(options, currentViewportWidth(), persistence.loadPanelOpen());
+    const state = resolveInitialPanelState(
+      options,
+      currentViewportWidth(),
+      persistence.loadPanelOpen(),
+      persistence.loadPanelSize()
+    );
     setIsOpen(state.panelOpen);
     setPanelSize(state.panelSize);
   }, [sessionReady, options, persistence]);
@@ -5591,17 +5606,19 @@ function App({ options, hostElement, bus }) {
     if (chatId) homeNav.switchTab(chatId);
   }, [handleClear, homeNav, options]);
   const handleExpand = useCallback8(() => {
-    const next = panelSize !== "expanded";
-    log16.info("expand", { from: panelSize, expanded: next });
-    setPanelSize((s) => s === "expanded" ? "normal" : "expanded");
-    bus.emit("expand", next);
-  }, [bus, panelSize]);
+    const nextSize = panelSize === "expanded" ? "normal" : "expanded";
+    log16.info("expand", { from: panelSize, expanded: nextSize === "expanded" });
+    setPanelSize(nextSize);
+    persistence.savePanelSize(nextSize);
+    bus.emit("expand", nextSize === "expanded");
+  }, [bus, panelSize, persistence]);
   const handleFullscreen = useCallback8(() => {
-    const next = panelSize !== "fullscreen";
-    log16.info("fullscreen", { from: panelSize, fullscreen: next });
-    setPanelSize((s) => s === "fullscreen" ? "normal" : "fullscreen");
-    bus.emit("fullscreen", next);
-  }, [bus, panelSize]);
+    const nextSize = panelSize === "fullscreen" ? "normal" : "fullscreen";
+    log16.info("fullscreen", { from: panelSize, fullscreen: nextSize === "fullscreen" });
+    setPanelSize(nextSize);
+    persistence.savePanelSize(nextSize);
+    bus.emit("fullscreen", nextSize === "fullscreen");
+  }, [bus, panelSize, persistence]);
   const handlePopOut = useCallback8(() => {
     if (!options.popOutUrl) return;
     const url = new URL(options.popOutUrl);
@@ -6168,7 +6185,8 @@ function resolveInitialHostMode(options) {
   const { panelOpen, panelSize } = resolveInitialPanelState(
     options,
     currentViewportWidth(),
-    persistence.loadPanelOpen()
+    persistence.loadPanelOpen(),
+    persistence.loadPanelSize()
   );
   return computeHostMode(options.mode, panelSize, panelOpen);
 }

package/package.json

@@ -80,5 +80,5 @@
   ],
   "type": "module",
   "types": "./index.d.ts",
-  "version": "0.7.0"
+  "version": "0.7.1"
 }

package/web-component.mjs

@@ -948,10 +948,11 @@ function pickInitialPanelSize(mode, size, viewportWidth) {
   }
   return "normal";
 }
-function resolveInitialPanelState(options, viewportWidth, persistedPanelOpen) {
+function resolveInitialPanelState(options, viewportWidth, persistedPanelOpen, persistedPanelSize = null) {
   const isInlineLike = options.mode === "inline" || options.mode === "standalone" || options.mode === "page";
   const panelOpen = isInlineLike || (persistedPanelOpen ?? !options.startMinimized);
-  const panelSize = pickInitialPanelSize(options.mode, options.size, viewportWidth);
+  const honorsPersisted = options.mode !== "standalone" && options.mode !== "page" && options.mode !== "inline";
+  const panelSize = honorsPersisted && persistedPanelSize ? persistedPanelSize : pickInitialPanelSize(options.mode, options.size, viewportWidth);
   return { panelOpen, panelSize };
 }
 function currentViewportWidth() {
@@ -1874,6 +1875,7 @@ function createPersistence(widgetId, storage = defaultStorage) {
   const KEY_CHAT = `${prefix}.sessionId`;
   const KEY_USER_PREFS = `${prefix}.userPrefs`;
   const KEY_PANEL_OPEN = `${prefix}.panelOpen`;
+  const KEY_PANEL_SIZE = `${prefix}.panelSize`;
   const KEY_CALLOUT_DISMISSED = `${prefix}.calloutDismissed`;
   const KEY_SIDEBAR_COLLAPSED = `${prefix}.sidebarCollapsed`;
   const KEY_ACTIVE_MODULE = `${prefix}.activeModule`;
@@ -1928,6 +1930,13 @@ function createPersistence(widgetId, storage = defaultStorage) {
     savePanelOpen(open) {
       storage.set(KEY_PANEL_OPEN, open ? "1" : "0");
     },
+    loadPanelSize() {
+      const raw = storage.get(KEY_PANEL_SIZE);
+      return raw === "normal" || raw === "expanded" || raw === "fullscreen" ? raw : null;
+    },
+    savePanelSize(size) {
+      storage.set(KEY_PANEL_SIZE, size);
+    },
     loadCalloutDismissed(currentText) {
       if (!currentText) return false;
       const dismissedText = storage.get(KEY_CALLOUT_DISMISSED);
@@ -5282,7 +5291,7 @@ function App({ options, hostElement, bus }) {
   const [sessionReady, setSessionReady] = useState11(false);
   const isInlineLike = options.mode === "standalone" || options.mode === "inline";
   const initialPanelRef = useRef8(
-    resolveInitialPanelState(options, currentViewportWidth(), persistence.loadPanelOpen())
+    resolveInitialPanelState(options, currentViewportWidth(), persistence.loadPanelOpen(), persistence.loadPanelSize())
   );
   const [isOpen, setIsOpen] = useState11(initialPanelRef.current.panelOpen);
   const initialPanelApplied = useRef8(false);
@@ -5353,13 +5362,19 @@ function App({ options, hostElement, bus }) {
   }, [feedback, patchAndSync]);
   useEffect17(() => {
     if (initialSizeApplied.current || !options.size.initialSize) return;
-    setPanelSize(pickInitialPanelSize(options.mode, options.size, currentViewportWidth()));
     initialSizeApplied.current = true;
-  }, [options.mode, options.size]);
+    if (persistence.loadPanelSize()) return;
+    setPanelSize(pickInitialPanelSize(options.mode, options.size, currentViewportWidth()));
+  }, [options.mode, options.size, persistence]);
   useEffect17(() => {
     if (!sessionReady || initialPanelApplied.current) return;
     initialPanelApplied.current = true;
-    const state = resolveInitialPanelState(options, currentViewportWidth(), persistence.loadPanelOpen());
+    const state = resolveInitialPanelState(
+      options,
+      currentViewportWidth(),
+      persistence.loadPanelOpen(),
+      persistence.loadPanelSize()
+    );
     setIsOpen(state.panelOpen);
     setPanelSize(state.panelSize);
   }, [sessionReady, options, persistence]);
@@ -5655,17 +5670,19 @@ function App({ options, hostElement, bus }) {
     if (chatId) homeNav.switchTab(chatId);
   }, [handleClear, homeNav, options]);
   const handleExpand = useCallback8(() => {
-    const next = panelSize !== "expanded";
-    log16.info("expand", { from: panelSize, expanded: next });
-    setPanelSize((s) => s === "expanded" ? "normal" : "expanded");
-    bus.emit("expand", next);
-  }, [bus, panelSize]);
+    const nextSize = panelSize === "expanded" ? "normal" : "expanded";
+    log16.info("expand", { from: panelSize, expanded: nextSize === "expanded" });
+    setPanelSize(nextSize);
+    persistence.savePanelSize(nextSize);
+    bus.emit("expand", nextSize === "expanded");
+  }, [bus, panelSize, persistence]);
   const handleFullscreen = useCallback8(() => {
-    const next = panelSize !== "fullscreen";
-    log16.info("fullscreen", { from: panelSize, fullscreen: next });
-    setPanelSize((s) => s === "fullscreen" ? "normal" : "fullscreen");
-    bus.emit("fullscreen", next);
-  }, [bus, panelSize]);
+    const nextSize = panelSize === "fullscreen" ? "normal" : "fullscreen";
+    log16.info("fullscreen", { from: panelSize, fullscreen: nextSize === "fullscreen" });
+    setPanelSize(nextSize);
+    persistence.savePanelSize(nextSize);
+    bus.emit("fullscreen", nextSize === "fullscreen");
+  }, [bus, panelSize, persistence]);
   const handlePopOut = useCallback8(() => {
     if (!options.popOutUrl) return;
     const url = new URL(options.popOutUrl);
@@ -5955,7 +5972,8 @@ function resolveInitialHostMode(options) {
   const { panelOpen, panelSize } = resolveInitialPanelState(
     options,
     currentViewportWidth(),
-    persistence.loadPanelOpen()
+    persistence.loadPanelOpen(),
+    persistence.loadPanelSize()
   );
   return computeHostMode(options.mode, panelSize, panelOpen);
 }