@frankieai/react 0.2.5 → 0.2.7

package/dist/index.js

@@ -1183,14 +1183,23 @@ function ChatPanel({
   const theme = useFrankieTheme();
   const { messages, busy, restoring, error, send, stop, reset } = useFrankieChat();
   const scrollRef = useRef4(null);
+  const atBottomRef = useRef4(true);
   const features = config?.features;
   const pickerModels = features?.modelPicker.enabled ? features.modelPicker.models : [];
   const [model, setModel] = useState5(void 0);
   useEffect4(() => {
     const node = scrollRef.current;
     if (!node) return;
-    const distanceFromBottom = node.scrollHeight - node.scrollTop - node.clientHeight;
-    if (distanceFromBottom < 160) node.scrollTop = node.scrollHeight;
+    const onScroll = () => {
+      atBottomRef.current = node.scrollHeight - node.scrollTop - node.clientHeight < 160;
+    };
+    node.addEventListener("scroll", onScroll, { passive: true });
+    return () => node.removeEventListener("scroll", onScroll);
+  }, []);
+  useEffect4(() => {
+    const node = scrollRef.current;
+    if (!node || !atBottomRef.current) return;
+    node.scrollTop = node.scrollHeight;
   }, [messages]);
   const name = config?.branding.name ?? "Assistant";
   const mode = resolveMode(theme?.mode);
@@ -1333,7 +1342,7 @@ function FrankieInline({ className, style, ...panelProps }) {
 
 // src/components/chat/FrankieChatPage.tsx
 import { useCallback as useCallback3, useEffect as useEffect6, useRef as useRef5, useState as useState7 } from "react";
-import { History, Menu, Plus as Plus2, Settings, X as X5 } from "lucide-react";
+import { ChevronsLeft, ChevronsRight, History, Menu, Plus as Plus2, Settings, X as X5 } from "lucide-react";
 import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
 function PageEmptyState() {
   const { config } = useFrankie();
@@ -1360,6 +1369,13 @@ function PageChrome({ showHistory, navigation, currentId, onSelect, onNew, ...pa
   const [historyError, setHistoryError] = useState7("");
   const [historyLoading, setHistoryLoading] = useState7(false);
   const [drawerOpen, setDrawerOpen] = useState7(false);
+  const [collapsed, setCollapsed] = useState7(() => {
+    try {
+      return window.localStorage.getItem("frankie.history-collapsed") === "1";
+    } catch {
+      return false;
+    }
+  });
   const [query, setQuery] = useState7("");
   const dialog = useRef5(null);
   const menu = useRef5(null);
@@ -1391,6 +1407,12 @@ function PageChrome({ showHistory, navigation, currentId, onSelect, onNew, ...pa
       requestVersion.current++;
     };
   }, [refresh, busy]);
+  useEffect6(() => {
+    try {
+      window.localStorage.setItem("frankie.history-collapsed", collapsed ? "1" : "0");
+    } catch {
+    }
+  }, [collapsed]);
   useEffect6(() => {
     const node = dialog.current;
     if (drawerOpen) {
@@ -1436,7 +1458,10 @@ function PageChrome({ showHistory, navigation, currentId, onSelect, onNew, ...pa
     navigation ? /* @__PURE__ */ jsx17("div", { className: "frankie-host-navigation", children: navigation }) : null
   ] });
   return /* @__PURE__ */ jsxs7("div", { className: "frankie-page-shell" + (resolveMode(theme?.mode) === "dark" ? " dark" : ""), style: themeToCssVars(theme), children: [
-    showHistory ? /* @__PURE__ */ jsx17("aside", { className: "frankie-history-desktop", children: history }) : null,
+    showHistory ? /* @__PURE__ */ jsxs7("aside", { className: "frankie-history-desktop" + (collapsed ? " frankie-history-collapsed" : ""), children: [
+      /* @__PURE__ */ jsx17("button", { type: "button", className: "frankie-history-toggle", "aria-label": collapsed ? "Expand conversations" : "Collapse conversations", "aria-expanded": !collapsed, onClick: () => setCollapsed((value) => !value), children: collapsed ? /* @__PURE__ */ jsx17(ChevronsRight, { size: 16 }) : /* @__PURE__ */ jsx17(ChevronsLeft, { size: 16 }) }),
+      collapsed ? null : history
+    ] }) : null,
     /* @__PURE__ */ jsxs7("div", { className: "frankie-page-main", children: [
       /* @__PURE__ */ jsxs7("header", { className: "frankie-page-header", children: [
         /* @__PURE__ */ jsxs7("div", { children: [