@sybilion/uilib 1.3.77 → 1.3.79

package/package.json

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

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

@@ -1,6 +1,7 @@
 .root
   display flex
   flex-direction column
+  flex 1
   height 100%
   min-height 0
   // max-height 100vh
@@ -15,4 +16,6 @@
   padding-right var(--p-12) // to not overlap with ChatSheet close button
 
 .isEmpty
-  padding-bottom 170px // goes under prompt
+  flex 1
+  min-height 0
+  overflow hidden

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

@@ -16,11 +16,12 @@ export function Chat({
   scopeId,
   onChatDeleted,
   onNewChat,
+  hideChatSelector = false,
   ...props
 }: ChatProps) {
   return (
     <div className={cn(S.root, className, isEmpty && S.isEmpty)} {...props}>
-      {scopeId ? (
+      {scopeId && !hideChatSelector ? (
         <div className={S.header}>
           <ChatSelector
             id={scopeId}

package/src/components/ui/Chat/Chat.types.ts

@@ -31,6 +31,10 @@ export type ChatSendMessagePayload = {
   loadingLabel?: string;
 };
 
+export type ChatMetaValue = string | number | boolean | null;
+
+export type ChatMeta = Record<string, ChatMetaValue>;
+
 export interface Message {
   id: string;
   role: MessageRole;
@@ -39,12 +43,14 @@ export interface Message {
   userTextFileAttachments?: UserTextFileAttachment[];
   /** SYSTEM-only: transient progress placeholder while work is in flight. */
   inProgress?: boolean;
+  meta?: ChatMeta;
 }
 
 export interface Chat {
   session_id: string;
   name: string;
   messages: Message[];
+  meta?: ChatMeta;
 }
 
 export interface ChatPreset {
@@ -124,6 +130,10 @@ export interface ChatMessageProps {
   onScriptContinue?: () => void;
   /** Renders `[CHART]` placeholder in assistant messages (app supplies dataset chart). */
   renderMessageChart?: () => ReactNode;
+  /** Full message for system-role render delegation. */
+  message?: Message;
+  /** When set, SYSTEM messages render via this callback instead of plain text. */
+  renderSystemMessage?: (message: Message) => ReactNode;
 }
 
 export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
@@ -135,4 +145,6 @@ export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
   onChatDeleted?: (sessionId: string) => void;
   /** "+ New Chat" in the selector; when omitted, starts an empty session. */
   onNewChat?: () => void;
+  /** When true, skip built-in header ChatSelector (e.g. external page-header slot). */
+  hideChatSelector?: boolean;
 }

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

@@ -83,29 +83,39 @@
 .scrollInner
   padding-top var(--p-10)
   min-height 100%
-  // padding-bottom 320px // goes under prompt
 
-  &::after
-    content ''
-    display block
-    height 260px
+.emptyBody
+  flex 1
+  min-height 0
+  display flex
+  flex-direction column
+  overflow hidden
 
+  & > *
+    flex 1
+    min-height 0
+    overflow auto
 
 // ---------------
 
 .footer
+  position relative
   z-index 50
   display flex
   flex-direction column
-
-  position absolute
-  bottom 0
-  width 100%;
+  flex-shrink 0
+  width 100%
 
   backdrop-filter blur(30px)
   background-color var(--background-alpha-800)
   border-top 1px solid var(--border)
-  box-shadow 0 0 20px 16px var(--background)
+  box-shadow 0 8px 24px 0 var(--background)
+
+.fixedPresets
+  position relative
+  z-index 10
+  flex-shrink 0
+  width 100%
 
 .notice
   position absolute

package/src/components/ui/Chat/ChatChrome/ChatChrome.styl.d.ts

@@ -6,6 +6,8 @@ interface CssExports {
   'branchRow': string;
   'chatResizeHandle': string;
   'content': string;
+  'emptyBody': string;
+  'fixedPresets': string;
   'footer': string;
   'loader': string;
   'notice': string;

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

@@ -38,6 +38,7 @@ export function ChatChrome({
   scriptContinueLabel,
   onScriptContinue,
   renderMessageChart,
+  renderSystemMessage,
   showSyntheticBranchButtons,
   unusedBranchKeys,
   showInlinePresets,
@@ -56,6 +57,7 @@ export function ChatChrome({
   slashCommandItems,
   onSlashItemCommand,
   promptPlaceholder,
+  hideChatSelector = false,
 }: ChatChromeProps) {
   const filteredAllowedAttachments = useMemo(
     () => filterToTextAttachments(allowedAttachments),
@@ -186,12 +188,12 @@ export function ChatChrome({
           scopeId={effectiveScopeId}
           onChatDeleted={onChatDeleted}
           onNewChat={onNewChat}
+          hideChatSelector={hideChatSelector}
         >
           {isEmpty ? (
-            <>
+            <div className={S.emptyBody}>
               <Chat.EmptyState {...emptyState} />
-              {renderPresets('fixed')}
-            </>
+            </div>
           ) : (
             <div className={S.scrollWrapper}>
               <Scroll
@@ -199,7 +201,7 @@ export function ChatChrome({
                 yScrollbarClassName={S.scrollbar}
                 className={S.scroll}
                 innerClassName={S.scrollInner}
-                offset={{ y: { before: 56, after: 180 } }}
+                offset={{ y: { before: 56, after: 24 } }}
                 fadeSize="m"
                 autoHide
                 ref={scrollRef}
@@ -209,6 +211,7 @@ export function ChatChrome({
                   return (
                     <Chat.Message
                       key={msg.id}
+                      message={msg}
                       role={msg.role}
                       text={msg.text}
                       inProgress={msg.inProgress}
@@ -229,6 +232,7 @@ export function ChatChrome({
                           : undefined
                       }
                       renderMessageChart={renderMessageChart}
+                      renderSystemMessage={renderSystemMessage}
                     />
                   );
                 })}
@@ -268,6 +272,10 @@ export function ChatChrome({
             </div>
           )}
 
+          {isEmpty ? (
+            <div className={S.fixedPresets}>{renderPresets('fixed')}</div>
+          ) : null}
+
           <div className={cn(S.footer, footerClassName)}>
             {isEmpty ? (
               <div className={S.notice}>

package/src/components/ui/Chat/ChatChrome/ChatChrome.types.ts

@@ -38,6 +38,8 @@ export interface ChatChromeProps {
   scriptContinueLabel: string | undefined;
   onScriptContinue: (() => void) | undefined;
   renderMessageChart?: () => React.ReactNode;
+  /** When set, SYSTEM messages render via this callback instead of plain text. */
+  renderSystemMessage?: (message: Message) => React.ReactNode;
   showSyntheticBranchButtons: boolean;
   unusedBranchKeys: string[];
   showInlinePresets: boolean;
@@ -69,4 +71,6 @@ export interface ChatChromeProps {
   onSlashItemCommand?: SlashOnItemCommand;
   /** Composer placeholder forwarded to `Chat.Prompt`. */
   promptPlaceholder?: string;
+  /** When true, skip built-in header ChatSelector (e.g. external page-header slot). */
+  hideChatSelector?: boolean;
 }

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

@@ -4,9 +4,8 @@
   align-items center
   justify-content center
   gap var(--p-10)
-
-  // height 450px
   flex 1
+  min-height 0
   padding var(--p-6)
 
   text-align center

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

@@ -142,6 +142,7 @@
     white-space nowrap
 
   .quickReplyWrap
+    width 100%
     display inline-block
     vertical-align middle
     margin var(--p-1) var(--p-1) var(--p-1) 0

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

@@ -22,6 +22,8 @@ export function ChatMessage({
   scriptContinue,
   onScriptContinue,
   renderMessageChart,
+  message,
+  renderSystemMessage,
 }: ChatMessageProps) {
   const fileAttachments = userTextFileAttachmentsFromMessage({
     userTextFileAttachments,
@@ -33,7 +35,13 @@ export function ChatMessage({
     <div className={cn(S.root, S[`role-${role}`])}>
       {isSystem ? (
         <div className={S.text}>
-          {inProgress ? <TextShimmer as="span">{text}</TextShimmer> : text}
+          {inProgress ? (
+            <TextShimmer as="span">{text}</TextShimmer>
+          ) : renderSystemMessage && message ? (
+            renderSystemMessage(message)
+          ) : (
+            text
+          )}
         </div>
       ) : isAssistant ? (
         <AgentMessageContent

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

@@ -1,7 +1,7 @@
 .root
-  // position fixed
+  position relative
+  flex-shrink 0
   width 100%
-  bottom 160px
 
 .inlineRoot
   position relative
@@ -12,6 +12,7 @@
   display flex
   flex-wrap wrap
   gap 8px
+  min-width 0
   padding var(--p-2) var(--p-6) var(--p-3)
   background-color var(--background)
 
@@ -19,9 +20,9 @@
   background-color transparent
 
 .item
-  flex-shrink 0
+  flex 0 1 auto
   min-width 0
-  max-width 300px
+  max-width unquote('min(300px, 100%)')
   height auto
   min-height auto
   padding var(--p-3)

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

@@ -16,6 +16,7 @@ import S from './ChatSelector.styl';
 
 export interface ChatSelectorProps {
   id: string;
+  wrapperClassName?: string;
   className?: string;
   onChatDeleted?: (sessionId: string) => void;
   /** When set, used for "+ New Chat" instead of the default empty `newChat()`. */
@@ -24,6 +25,7 @@ export interface ChatSelectorProps {
 
 export function ChatSelector({
   id,
+  wrapperClassName,
   className,
   onChatDeleted,
   onNewChat,
@@ -65,7 +67,7 @@ export function ChatSelector({
   };
 
   return (
-    <div className={S.wrapper}>
+    <div className={cn(S.wrapper, wrapperClassName)}>
       <div className={S.selectGrow}>
         <Select
           variant="clear"

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

@@ -44,6 +44,7 @@ export function ChatSheet({
   onMessage,
   onScriptComplete,
   renderMessageChart,
+  renderSystemMessage,
   emptyState,
   allowedAttachments,
   allowPdfAttachments,
@@ -60,6 +61,7 @@ export function ChatSheet({
     onMessage,
     onScriptComplete,
     renderMessageChart,
+    renderSystemMessage,
     emptyState,
     allowedAttachments,
     allowPdfAttachments,

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

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   ChatPreset,
   type ChatSendMessagePayload,
+  type Message,
   MessageRole,
   type ScriptCompletePayload,
 } from '#uilib/components/ui/Chat/Chat.types';
@@ -69,11 +70,17 @@ export type UseChatPanelChromeModelInput = {
   /** Composite chat scope (e.g. `${userId}-${datasetId}`, `${userId}-dashboard`, `${userId}-report-${reportId}`). */
   scopeId?: string | null;
   /** Fires after send; second arg is the assistant reply when the API call succeeded. */
-  onMessage?: (displayText: string, assistantResponse?: string) => void;
+  onMessage?: (
+    displayText: string,
+    assistantResponse?: string,
+    chatSessionId?: string,
+  ) => void;
   /** Fires when a preset script has no further `[Label|branchKey]` steps (graph leaf or linear script end). */
   onScriptComplete?: (payload: ScriptCompletePayload) => void;
   /** Renders `[CHART]` tokens in assistant messages. */
   renderMessageChart?: () => React.ReactNode;
+  /** When set, SYSTEM messages render via this callback instead of plain text. */
+  renderSystemMessage?: (message: Message) => React.ReactNode;
   /** Forwarded to `ChatChrome` when the thread is empty. */
   emptyState?: ChatEmptyStateConfig;
   /** MIME types / extensions for text-only chat attachments (filtered by uilib allowlist). */
@@ -144,6 +151,7 @@ export function useChatPanelChromeModel({
   onMessage,
   onScriptComplete,
   renderMessageChart,
+  renderSystemMessage,
   emptyState,
   allowedAttachments,
   allowPdfAttachments,
@@ -557,8 +565,13 @@ export function useChatPanelChromeModel({
           }
           setOutboundLoadingLabel(loadingLabelFromSendPayload(payload));
           try {
-            const assistantResponse = await sendMessage(payload);
-            onMessage?.(displayTextFromSendPayload(payload), assistantResponse);
+            const { response: assistantResponse, sessionId } =
+              await sendMessage(payload);
+            onMessage?.(
+              displayTextFromSendPayload(payload),
+              assistantResponse,
+              sessionId,
+            );
           } finally {
             setOutboundLoadingLabel(undefined);
           }
@@ -720,8 +733,13 @@ export function useChatPanelChromeModel({
         }
         setOutboundLoadingLabel(loadingLabelFromSendPayload(payload));
         try {
-          const assistantResponse = await sendMessage(payload);
-          onMessage?.(displayTextFromSendPayload(payload), assistantResponse);
+          const { response: assistantResponse, sessionId } =
+            await sendMessage(payload);
+          onMessage?.(
+            displayTextFromSendPayload(payload),
+            assistantResponse,
+            sessionId,
+          );
         } finally {
           setOutboundLoadingLabel(undefined);
         }
@@ -1245,6 +1263,7 @@ export function useChatPanelChromeModel({
     scriptContinueLabel,
     onScriptContinue,
     renderMessageChart,
+    renderSystemMessage,
     showSyntheticBranchButtons,
     unusedBranchKeys,
     showInlinePresets,

package/src/components/ui/Chat/index.ts

@@ -18,6 +18,8 @@ export {
   normalizeUserTextFileAttachments,
 } from './buildChatSendMessagePayload';
 export { sanitizeAttachmentFilename } from './sanitizeAttachmentFilename';
+export { ChatSelector } from './ChatSheet/ChatSelector';
+export type { ChatSelectorProps } from './ChatSheet/ChatSelector';
 export { ChatSheet } from './ChatSheet/ChatSheet';
 export { useChatPanelChromeModel } from './ChatSheet/useChatPanelChromeModel';
 export type { ChatSheetActions, ChatSheetProps } from './ChatSheet/ChatSheet';
@@ -45,6 +47,8 @@ export type {
 export type {
   Chat as ChatType,
   ChatAttachmentDropItem,
+  ChatMeta,
+  ChatMetaValue,
   ChatSendMessagePayload,
   ChatProps,
   ChatPreset as ChatPresetType,

package/src/components/ui/FileChip/FileChip.tsx

@@ -3,6 +3,7 @@ import cn from 'classnames';
 import { CsvIcon } from '#uilib/components/icons/CsvIcon/CsvIcon';
 import { CardAction, CardHeader } from '#uilib/components/ui/Card';
 import { FileTextIcon, XIcon } from '@phosphor-icons/react';
+import { LayoutDashboard } from 'lucide-react';
 
 import S from './FileChip.styl';
 import type { FileChipFormat, FileChipProps } from './FileChip.types';
@@ -14,6 +15,16 @@ function FormatIcon({ format }: { format: FileChipFormat }) {
     return <CsvIcon size={FORMAT_ICON_SIZE} />;
   }
 
+  if (format === 'dashboard') {
+    return (
+      <LayoutDashboard
+        size={FORMAT_ICON_SIZE}
+        aria-hidden
+        style={{ color: 'var(--muted-foreground)' }}
+      />
+    );
+  }
+
   return (
     <FileTextIcon
       size={FORMAT_ICON_SIZE}

package/src/components/ui/FileChip/FileChip.types.ts

@@ -1,4 +1,4 @@
-export type FileChipFormat = 'csv' | 'pdf' | 'text';
+export type FileChipFormat = 'csv' | 'pdf' | 'text' | 'dashboard';
 
 export type FileChipProps = {
   name: string;

package/src/contexts/chat-context.tsx

@@ -10,6 +10,7 @@ import {
 
 import {
   type Chat,
+  type ChatMeta,
   type ChatSendMessagePayload,
   type Message,
   MessageRole,
@@ -37,12 +38,14 @@ export type AddChatMessageOptions = {
   userTextFileAttachments?: UserTextFileAttachment[];
   /** SYSTEM-only: mark as transient progress placeholder (shimmer until removed). */
   inProgress?: boolean;
+  meta?: ChatMeta;
 };
 
 export type UpdateChatMessagePatch = {
   role?: MessageRole;
   text?: string;
   inProgress?: boolean;
+  meta?: ChatMeta;
 };
 
 export type NewChatOptions = {
@@ -50,6 +53,11 @@ export type NewChatOptions = {
   seedMessages?: readonly Message[];
 };
 
+export type SendMessageResult = {
+  response: string;
+  sessionId: string;
+};
+
 export interface ChatContextType {
   /** Returns the new session id, or undefined if no user / not created. */
   newChat: (scopeId: string, options?: NewChatOptions) => string | undefined;
@@ -78,11 +86,13 @@ export interface ChatContextType {
     chatId: string,
     messages: Message[],
   ) => void;
+  /** Shallow-merge keys into `chat.meta` and persist. */
+  updateChatMeta: (scopeId: string, chatId: string, patch: ChatMeta) => void;
   sendMessage: (
     scopeId: string,
     message: string | ChatSendMessagePayload,
     chatId?: string,
-  ) => Promise<string>;
+  ) => Promise<SendMessageResult>;
   getChatsForScopeId: (scopeId: string) => Chat[];
   getCurrentChatId: (scopeId: string) => string | null;
   deleteChat: (scopeId: string, sessionId: string) => void;
@@ -184,6 +194,7 @@ function cloneMessagesForNewSession(messages: readonly Message[]): Message[] {
     .filter(message => !message.inProgress)
     .map(message => ({
       ...message,
+      ...(message.meta ? { meta: { ...message.meta } } : {}),
       ...(message.userTextFileAttachments
         ? {
             userTextFileAttachments: message.userTextFileAttachments.map(
@@ -372,6 +383,7 @@ export function ChatProvider({
           ? { userTextFileAttachments: attachments }
           : {}),
         ...(options?.inProgress ? { inProgress: true } : {}),
+        ...(options?.meta ? { meta: { ...options.meta } } : {}),
       };
 
       setChats(prev => {
@@ -444,6 +456,9 @@ export function ChatProvider({
               ) {
                 delete next.inProgress;
               }
+              if (patch.meta != null) {
+                next.meta = { ...next.meta, ...patch.meta };
+              }
               return next;
             }),
           };
@@ -460,7 +475,10 @@ export function ChatProvider({
     (scopeId: string, chatId: string, messages: Message[]) => {
       if (userSwitchKey === null) return;
       addScopeIdToRegistry(scopeId);
-      const cloned = messages.map(message => ({ ...message }));
+      const cloned = messages.map(message => ({
+        ...message,
+        ...(message.meta ? { meta: { ...message.meta } } : {}),
+      }));
 
       setChats(prev => {
         const scopeChats = prev[scopeId] ?? [];
@@ -478,12 +496,34 @@ export function ChatProvider({
     [userSwitchKey],
   );
 
+  const updateChatMeta = useCallback(
+    (scopeId: string, chatId: string, patch: ChatMeta) => {
+      if (userSwitchKey === null) return;
+      setChats(prev => {
+        const scopeChats = prev[scopeId] ?? [];
+        const updatedChats = scopeChats.map(chat => {
+          if (chat.session_id !== chatId) return chat;
+          return {
+            ...chat,
+            meta: { ...chat.meta, ...patch },
+          };
+        });
+
+        const chatsKey = getChatsKey(scopeId);
+        LS.set(chatsKey, updatedChats);
+
+        return { ...prev, [scopeId]: updatedChats };
+      });
+    },
+    [userSwitchKey],
+  );
+
   const sendMessage = useCallback(
     async (
       scopeId: string,
       message: string | ChatSendMessagePayload,
       chatId?: string,
-    ): Promise<string> => {
+    ): Promise<SendMessageResult> => {
       const targetChatId = chatId ?? getCurrentChatId(scopeId);
       if (targetChatId === null || targetChatId === '') {
         throw new Error('No chat selected');
@@ -511,6 +551,11 @@ export function ChatProvider({
       try {
         const data = await sendChatMessageFn(apiPayload, pendingChatSessionId);
 
+        const effectiveSessionId =
+          data.session_id && data.session_id !== pendingChatSessionId
+            ? data.session_id
+            : pendingChatSessionId;
+
         if (data.session_id && data.session_id !== pendingChatSessionId) {
           setChats(prev => {
             const scopeChats = prev[scopeId] ?? [];
@@ -530,12 +575,12 @@ export function ChatProvider({
 
         addMessage(
           scopeId,
-          data.session_id ? data.session_id : pendingChatSessionId,
+          effectiveSessionId,
           MessageRole.ASSISTANT,
           data.response,
         );
 
-        return data.response;
+        return { response: data.response, sessionId: effectiveSessionId };
       } catch (error) {
         const errorMessage =
           error instanceof Error
@@ -597,6 +642,7 @@ export function ChatProvider({
         removeMessageById,
         updateMessageById,
         setChatMessages,
+        updateChatMeta,
         sendMessage,
         getChatsForScopeId,
         getCurrentChatId,
@@ -683,6 +729,8 @@ export function useChatsForScopeId(scopeId: string) {
     addMessage,
     removeMessageById,
     updateMessageById,
+    updateChatMeta,
+    setChatMessages,
     sendMessage,
     deleteChat,
   } = useChats();
@@ -713,6 +761,10 @@ export function useChatsForScopeId(scopeId: string) {
     ) => updateMessageById(scopeId, chatId, messageId, patch),
     sendMessage: (message: string | ChatSendMessagePayload, chatId?: string) =>
       sendMessage(scopeId, message, chatId),
+    updateChatMeta: (chatId: string, patch: ChatMeta) =>
+      updateChatMeta(scopeId, chatId, patch),
+    setChatMessages: (chatId: string, messages: Message[]) =>
+      setChatMessages(scopeId, chatId, messages),
     deleteChat: (sessionId: string) => deleteChat(scopeId, sessionId),
   };
 }

package/src/docs/pages/ChatPage.styl

@@ -0,0 +1,6 @@
+.chatDemoHost
+  display flex
+  flex-direction column
+  flex 1
+  // Bounded height so ChatChrome flex column can place presets above the prompt
+  min-height 480px

package/src/docs/pages/ChatPage.styl.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'chatDemoHost': string;
+}
+export const cssExports: CssExports;
+export default cssExports;