@sybilion/uilib 1.3.60 → 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/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.60",
+  "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/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