@sybilion/uilib 1.3.59 → 1.3.61

package/dist/esm/components/ui/Chat/ChatPresets/ChatPresets.js

@@ -13,7 +13,7 @@ function ChatPresets({ chatId, items, usedItemIds = [], layout = 'fixed', onSele
     const availableItems = items.filter(item => !usedItems.includes(item.id));
     if (availableItems.length === 0)
         return null;
-    return (jsx("div", { className: layout === 'inline' ? S.inlineRoot : S.root, children: jsx("div", { className: cn(S.inner, layout === 'inline' && S.innerInline), children: availableItems.map(preset => (jsx(Button, { type: "button", className: cn(S.item), onClick: () => {
+    return (jsx("div", { className: layout === 'inline' ? S.inlineRoot : S.root, children: jsx("div", { className: cn(S.inner, layout === 'inline' && S.innerInline), children: availableItems.map(preset => (jsx(Button, { type: "button", variant: "outline", size: "sm", className: cn(S.item), onClick: () => {
                     onSelect?.(preset);
                     onItemUsed?.(preset.id);
                     setLocalUsedItems(prev => [...prev, preset.id]);

package/dist/esm/components/ui/Chat/ChatPresets/ChatPresets.styl.js

@@ -1,6 +1,6 @@
 import styleInject from 'style-inject';
 
-var css_248z = ".ChatPresets_root__Cj42o{bottom:160px;width:100%}.ChatPresets_inlineRoot__WXVnu{margin-top:var(--p-6);position:relative;width:100%}.ChatPresets_inner__h14-q{background-color:var(--background);display:flex;flex-wrap:wrap;gap:8px;padding:var(--p-2) var(--p-6) var(--p-3)}.ChatPresets_innerInline__iPM2b{background-color:transparent}.ChatPresets_item__LfX5b{background:none;border:1px solid var(--border);border-radius:var(--p-4);color:var(--foreground);cursor:pointer;flex-shrink:0;font-size:var(--text-xs);line-height:1.4;max-width:300px;padding:var(--p-3);text-align:left;transition:all .2s ease;white-space:break-spaces}.ChatPresets_item__LfX5b:hover{background:var(--border)!important}.dark .ChatPresets_item__LfX5b{background-color:var(--muted)}";
+var css_248z = ".ChatPresets_root__Cj42o{bottom:160px;width:100%}.ChatPresets_inlineRoot__WXVnu{margin-top:var(--p-6);position:relative;width:100%}.ChatPresets_inner__h14-q{background-color:var(--background);display:flex;flex-wrap:wrap;gap:8px;padding:var(--p-2) var(--p-6) var(--p-3)}.ChatPresets_innerInline__iPM2b{background-color:transparent}.ChatPresets_item__LfX5b{flex-shrink:0;font-size:var(--text-xs);height:auto;line-height:1.4;max-width:300px;min-height:auto;min-width:0;overflow-wrap:anywhere;padding:var(--p-3);text-align:left;white-space:break-spaces!important}";
 var S = {"root":"ChatPresets_root__Cj42o","inlineRoot":"ChatPresets_inlineRoot__WXVnu","inner":"ChatPresets_inner__h14-q","innerInline":"ChatPresets_innerInline__iPM2b","item":"ChatPresets_item__LfX5b"};
 styleInject(css_248z);
 

package/dist/esm/components/ui/Chat/ChatSheet/useChatPanelChromeModel.js

@@ -123,29 +123,27 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
         if (embedAsPage) {
             return;
         }
-        const run = () => {
-            setIsOpen(open);
-            setChatPanelOpen(open);
-        };
-        if (!isMobile &&
-            'startViewTransition' in document &&
-            document.startViewTransition) {
-            document.startViewTransition(run);
-        }
-        else {
-            run();
-        }
         if (open) {
-            // Avoid a second setSearchParams when `chat` is already set (e.g. Reports merges
-            // reportId + chat in one update). A redundant add can merge from a stale `prev`
-            // and drop other query keys.
+            setIsOpen(true);
+            setChatPanelOpen(true);
             if (!searchParams.has(CHAT_QUERY_PARAM)) {
                 addSearchParams({ [CHAT_QUERY_PARAM]: CHAT_OPEN_VALUE });
             }
+            return;
+        }
+        const applyClose = () => {
+            setIsOpen(false);
+            setChatPanelOpen(false);
+        };
+        if (!isMobile &&
+            'startViewTransition' in document &&
+            document.startViewTransition) {
+            document.startViewTransition(applyClose);
         }
         else {
-            removeSearchParams(CHAT_QUERY_PARAM);
+            applyClose();
         }
+        removeSearchParams(CHAT_QUERY_PARAM);
     };
     const isEmpty = isChatEmpty(chat) && !isLoading;
     const openNewChatWithPrefill = useCallback((prompt) => {
@@ -630,9 +628,25 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
         if (embedAsPage) {
             return;
         }
-        setIsOpen(chatOpen);
-        setChatPanelOpen(chatOpen);
-    }, [embedAsPage, chatOpen, setChatPanelOpen]);
+        if (!chatOpen) {
+            setIsOpen(false);
+            setChatPanelOpen(false);
+            return;
+        }
+        if (!shellChatPanelOpen && sidebarNavOpen) {
+            removeSearchParams(CHAT_QUERY_PARAM);
+            return;
+        }
+        setIsOpen(true);
+        setChatPanelOpen(true);
+    }, [
+        embedAsPage,
+        chatOpen,
+        setChatPanelOpen,
+        sidebarNavOpen,
+        shellChatPanelOpen,
+        removeSearchParams,
+    ]);
     /** Shell closed chat for space (e.g. nav opened); keep UI and URL in sync. */
     useEffect(() => {
         if (embedAsPage || shellChatPanelOpen || !isOpen) {

package/dist/esm/hooks/panelWidth.js

@@ -46,13 +46,24 @@ function clampChatWidthPx(px, shellWidth, effectiveSidebarWidthPx) {
 function defaultChatWidthPx(shellWidth) {
     return clampChatWidthPx(CHAT_WIDTH_DEFAULT_PX, shellWidth, SIDEBAR_WIDTH_DEFAULT_PX);
 }
+/**
+ * Stored width can fall below panel min when the shell was narrow (clamp cap < min).
+ * For dual-panel fit checks, treat open panels as at least their min width.
+ */
+function effectiveOpenPanelWidthPx(px, minPx, bothPanelsOpen) {
+    if (bothPanelsOpen) {
+        return Math.max(px, minPx);
+    }
+    return px > 0 ? px : minPx;
+}
 /** Minimum shell width when nav and/or chat panels are open (main column at least `CENTRAL_AREA_MIN_PX`). */
 function requiredShellWidthForSidebars(widths) {
+    const bothPanelsOpen = widths.mainSidebarOpen && widths.chatPanelOpen;
     const sidebarW = widths.mainSidebarOpen
-        ? widths.sidebarWidthPx || SIDEBAR_WIDTH_MIN_PX
+        ? effectiveOpenPanelWidthPx(widths.sidebarWidthPx, SIDEBAR_WIDTH_MIN_PX, bothPanelsOpen)
         : 0;
     const chatW = widths.chatPanelOpen
-        ? widths.chatWidthPx || CHAT_WIDTH_MIN_PX
+        ? effectiveOpenPanelWidthPx(widths.chatWidthPx, CHAT_WIDTH_MIN_PX, bothPanelsOpen)
         : 0;
     return sidebarW + CENTRAL_AREA_MIN_PX + chatW;
 }

package/dist/esm/types/src/docs/chatPresets.sample.d.ts

@@ -0,0 +1,5 @@
+import type { ChatPreset } from '#uilib/components/ui/Chat/Chat.types';
+/** Sample dataset name — mirrors app dataset page chat presets. */
+export declare const DOCS_SAMPLE_DATASET_NAME = "HDPE Spot Price";
+export declare function getDocsDatasetPresets(datasetName?: string): ChatPreset[];
+export declare const DOCS_DATASET_PRESETS: ChatPreset[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.3.59",
+  "version": "1.3.61",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",

package/src/components/ui/Chat/ChatPresets/ChatPresets.styl

@@ -20,22 +20,13 @@
 
 .item
   flex-shrink 0
+  min-width 0
   max-width 300px
+  height auto
+  min-height auto
   padding var(--p-3)
-
-  background none
-  border 1px solid var(--border)
-  border-radius var(--p-4)
-  cursor pointer
-  transition all 0.2s ease
   text-align left
   font-size var(--text-xs)
   line-height 1.4
-  white-space break-spaces
-  color var(--foreground)
-
-  &:hover
-    background var(--border) !important
-
-  :global(.dark) &
-    background-color var(--muted)
+  white-space break-spaces !important
+  overflow-wrap anywhere

package/src/components/ui/Chat/ChatPresets/ChatPresets.tsx

@@ -43,6 +43,8 @@ export function ChatPresets({
           <Button
             key={preset.id}
             type="button"
+            variant="outline"
+            size="sm"
             className={cn(S.item)}
             onClick={() => {
               onSelect?.(preset);

package/src/components/ui/Chat/ChatSheet/useChatPanelChromeModel.tsx

@@ -287,30 +287,29 @@ export function useChatPanelChromeModel({
     if (embedAsPage) {
       return;
     }
-    const run = () => {
-      setIsOpen(open);
-      setChatPanelOpen(open);
+    if (open) {
+      setIsOpen(true);
+      setChatPanelOpen(true);
+      if (!searchParams.has(CHAT_QUERY_PARAM)) {
+        addSearchParams({ [CHAT_QUERY_PARAM]: CHAT_OPEN_VALUE });
+      }
+      return;
+    }
+
+    const applyClose = () => {
+      setIsOpen(false);
+      setChatPanelOpen(false);
     };
     if (
       !isMobile &&
       'startViewTransition' in document &&
       document.startViewTransition
     ) {
-      document.startViewTransition(run);
+      document.startViewTransition(applyClose);
     } else {
-      run();
-    }
-
-    if (open) {
-      // Avoid a second setSearchParams when `chat` is already set (e.g. Reports merges
-      // reportId + chat in one update). A redundant add can merge from a stale `prev`
-      // and drop other query keys.
-      if (!searchParams.has(CHAT_QUERY_PARAM)) {
-        addSearchParams({ [CHAT_QUERY_PARAM]: CHAT_OPEN_VALUE });
-      }
-    } else {
-      removeSearchParams(CHAT_QUERY_PARAM);
+      applyClose();
     }
+    removeSearchParams(CHAT_QUERY_PARAM);
   };
 
   const isEmpty = isChatEmpty(chat) && !isLoading;
@@ -856,9 +855,25 @@ export function useChatPanelChromeModel({
     if (embedAsPage) {
       return;
     }
-    setIsOpen(chatOpen);
-    setChatPanelOpen(chatOpen);
-  }, [embedAsPage, chatOpen, setChatPanelOpen]);
+    if (!chatOpen) {
+      setIsOpen(false);
+      setChatPanelOpen(false);
+      return;
+    }
+    if (!shellChatPanelOpen && sidebarNavOpen) {
+      removeSearchParams(CHAT_QUERY_PARAM);
+      return;
+    }
+    setIsOpen(true);
+    setChatPanelOpen(true);
+  }, [
+    embedAsPage,
+    chatOpen,
+    setChatPanelOpen,
+    sidebarNavOpen,
+    shellChatPanelOpen,
+    removeSearchParams,
+  ]);
 
   /** Shell closed chat for space (e.g. nav opened); keep UI and URL in sync. */
   useEffect(() => {

package/src/docs/chatPresets.sample.ts

@@ -0,0 +1,25 @@
+import type { ChatPreset } from '#uilib/components/ui/Chat/Chat.types';
+
+/** Sample dataset name — mirrors app dataset page chat presets. */
+export const DOCS_SAMPLE_DATASET_NAME = 'HDPE Spot Price';
+
+export function getDocsDatasetPresets(
+  datasetName: string = DOCS_SAMPLE_DATASET_NAME,
+): ChatPreset[] {
+  return [
+    {
+      id: '1',
+      text: `What should my planning decisions be based on the "${datasetName}" forecasts?`,
+    },
+    {
+      id: '2',
+      text: `Explain the "${datasetName}" forecast.`,
+    },
+    {
+      id: '3',
+      text: `What is the "${datasetName}" forecast performance?`,
+    },
+  ];
+}
+
+export const DOCS_DATASET_PRESETS = getDocsDatasetPresets();

package/src/docs/pages/ChatSheetPage.tsx

@@ -2,11 +2,15 @@ import type { SlashCommandItem } from '#uilib/components/ui/Chat';
 import { PageContentSection } from '#uilib/components/ui/Page';
 import { MessageSquare } from 'lucide-react';
 
+import {
+  DOCS_DATASET_PRESETS,
+  DOCS_SAMPLE_DATASET_NAME,
+} from '../chatPresets.sample';
 import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
 import { DOCS_CHAT_USER_KEY } from '../docsConstants';
 import { DocsHeaderActions } from '../docsHeaderActions';
 
-const DOCS_CHAT_SHEET_SCOPE_ID = `${DOCS_CHAT_USER_KEY}-docs-chat-sheet-portal`;
+const DOCS_CHAT_SHEET_SCOPE_ID = `${DOCS_CHAT_USER_KEY}-docs-dataset-chat`;
 
 const DOCS_SAMPLE_SLASH_ITEMS: SlashCommandItem[] = [
   {
@@ -22,24 +26,29 @@ export default function ChatSheetPage() {
       <AppPageHeader
         breadcrumbs={[{ label: 'Chat' }, { label: 'Chat sheet' }]}
         title="Chat sheet (portal)"
-        subheader="Same integration as design-demo: ChatSheet in page header actions, chat panel portaled into the shell sidebar slot. No inline ChatChrome on this page."
+        subheader={`Same integration as the app dataset page: ChatSheet in header actions with dataset-scoped presets for "${DOCS_SAMPLE_DATASET_NAME}". Panel portaled into the shell chat slot.`}
         actions={
           <DocsHeaderActions
             scopeId={DOCS_CHAT_SHEET_SCOPE_ID}
             slashCommandItems={DOCS_SAMPLE_SLASH_ITEMS}
-            triggerLabel={
-              <>
-                <MessageSquare size={20} />
-                &nbsp;AI Assistant
-              </>
-            }
+            presets={DOCS_DATASET_PRESETS}
+            triggerLabel={<MessageSquare size={20} />}
+            triggerAriaLabel="AI Assistant"
+            emptyState={{
+              title: 'Start a conversation',
+            }}
           />
         }
       />
       <PageContentSection>
         <p style={{ marginBottom: 16, fontSize: 14, lineHeight: 1.5 }}>
-          Open <strong>AI Assistant</strong> in the header. The composer runs
-          inside the portaled chat panel (not inline on this page).
+          Open <strong>AI Assistant</strong> in the header. Presets render below
+          the empty state (fixed layout) and inline after the assistant reply,
+          same as{' '}
+          <code style={{ fontSize: 13 }}>
+            presets=&#123;datasetPresets&#125;
+          </code>{' '}
+          on the app dataset page.
         </p>
         <h3 style={{ marginBottom: 8, fontSize: 14, fontWeight: 600 }}>
           Regression checklist
@@ -47,6 +56,10 @@ export default function ChatSheetPage() {
         <ul
           style={{ margin: 0, paddingLeft: 20, fontSize: 14, lineHeight: 1.6 }}
         >
+          <li>
+            Empty chat → three outline preset chips with dataset-scoped labels
+          </li>
+          <li>Preset click → sends preset text, chip hides for that session</li>
           <li>Plain Enter with text → submit and clear composer</li>
           <li>
             Plain Enter must not create empty lines with duplicated placeholders

package/src/hooks/panelWidth.test.ts

@@ -37,6 +37,28 @@ describe('requiredShellWidthForSidebars', () => {
       }),
     ).toBe(SIDEBAR_WIDTH_MIN_PX + CENTRAL_AREA_MIN_PX + CHAT_WIDTH_MIN_PX);
   });
+
+  it('uses panel mins for sub-min stored widths when both panels are open', () => {
+    expect(
+      requiredShellWidthForSidebars({
+        mainSidebarOpen: true,
+        chatPanelOpen: true,
+        sidebarWidthPx: 300,
+        chatWidthPx: 37,
+      }),
+    ).toBe(300 + CENTRAL_AREA_MIN_PX + CHAT_WIDTH_MIN_PX);
+  });
+
+  it('keeps actual chat width when only chat is open', () => {
+    expect(
+      requiredShellWidthForSidebars({
+        mainSidebarOpen: false,
+        chatPanelOpen: true,
+        sidebarWidthPx: 300,
+        chatWidthPx: 337,
+      }),
+    ).toBe(CENTRAL_AREA_MIN_PX + 337);
+  });
 });
 
 describe('shellFitsSidebarsLayout', () => {
@@ -62,6 +84,17 @@ describe('shellFitsSidebarsLayout', () => {
     ).toBe(false);
   });
 
+  it('returns false when sub-min chat width would falsely fit at shell edge', () => {
+    expect(
+      shellFitsSidebarsLayout(1137, {
+        mainSidebarOpen: true,
+        chatPanelOpen: true,
+        sidebarWidthPx: 300,
+        chatWidthPx: 37,
+      }),
+    ).toBe(false);
+  });
+
   it('returns true for unknown shell width', () => {
     expect(
       shellFitsSidebarsLayout(0, {

package/src/hooks/panelWidth.ts

@@ -86,15 +86,40 @@ export type SidebarsLayoutWidths = {
   chatWidthPx: number;
 };
 
+/**
+ * Stored width can fall below panel min when the shell was narrow (clamp cap < min).
+ * For dual-panel fit checks, treat open panels as at least their min width.
+ */
+function effectiveOpenPanelWidthPx(
+  px: number,
+  minPx: number,
+  bothPanelsOpen: boolean,
+): number {
+  if (bothPanelsOpen) {
+    return Math.max(px, minPx);
+  }
+  return px > 0 ? px : minPx;
+}
+
 /** Minimum shell width when nav and/or chat panels are open (main column at least `CENTRAL_AREA_MIN_PX`). */
 export function requiredShellWidthForSidebars(
   widths: SidebarsLayoutWidths,
 ): number {
+  const bothPanelsOpen =
+    widths.mainSidebarOpen && widths.chatPanelOpen;
   const sidebarW = widths.mainSidebarOpen
-    ? widths.sidebarWidthPx || SIDEBAR_WIDTH_MIN_PX
+    ? effectiveOpenPanelWidthPx(
+        widths.sidebarWidthPx,
+        SIDEBAR_WIDTH_MIN_PX,
+        bothPanelsOpen,
+      )
     : 0;
   const chatW = widths.chatPanelOpen
-    ? widths.chatWidthPx || CHAT_WIDTH_MIN_PX
+    ? effectiveOpenPanelWidthPx(
+        widths.chatWidthPx,
+        CHAT_WIDTH_MIN_PX,
+        bothPanelsOpen,
+      )
     : 0;
   return sidebarW + CENTRAL_AREA_MIN_PX + chatW;
 }