@sybilion/uilib 1.3.78 → 1.3.80

package/dist/esm/types/src/contexts/chat-context.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { type Chat, type ChatSendMessagePayload, type Message, MessageRole, type UserTextFileAttachment } from '#uilib/components/ui/Chat/Chat.types';
+import { type Chat, type ChatMeta, type ChatSendMessagePayload, type Message, MessageRole, type UserTextFileAttachment } from '#uilib/components/ui/Chat/Chat.types';
 import type { ChatResponse } from '#uilib/types/chat-api.types';
 export type SendChatMessageFn = (message: string, targetChatId: string) => Promise<ChatResponse>;
 export type { ChatSendMessagePayload, UserTextFileAttachment, } from '#uilib/components/ui/Chat/Chat.types';
@@ -7,16 +7,22 @@ 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 = {
     /** When set, seeds the new session's messages (e.g. continue dialog in reports). */
     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;
@@ -26,7 +32,9 @@ export interface ChatContextType {
     updateMessageById: (scopeId: string, chatId: string, messageId: string, patch: UpdateChatMessagePatch) => void;
     /** Replaces all messages on a session (e.g. seeding from another chat). */
     setChatMessages: (scopeId: string, chatId: string, messages: Message[]) => void;
-    sendMessage: (scopeId: string, message: string | ChatSendMessagePayload, chatId?: string) => Promise<string>;
+    /** 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<SendMessageResult>;
     getChatsForScopeId: (scopeId: string) => Chat[];
     getCurrentChatId: (scopeId: string) => string | null;
     deleteChat: (scopeId: string, sessionId: string) => void;
@@ -68,7 +76,9 @@ export declare function useChatsForScopeId(scopeId: string): {
     addMessage: (chatId: string, role: MessageRole, text: string, options?: AddChatMessageOptions) => string;
     removeMessageById: (chatId: string, messageId: string) => void;
     updateMessageById: (chatId: string, messageId: string, patch: UpdateChatMessagePatch) => void;
-    sendMessage: (message: string | ChatSendMessagePayload, chatId?: string) => Promise<string>;
+    sendMessage: (message: string | ChatSendMessagePayload, chatId?: string) => Promise<SendMessageResult>;
+    updateChatMeta: (chatId: string, patch: ChatMeta) => void;
+    setChatMessages: (chatId: string, messages: Message[]) => void;
     deleteChat: (sessionId: string) => void;
 };
 /** @deprecated Use useChatsForScopeId */
@@ -82,7 +92,9 @@ export declare function useChatsForDataset(scopeId: string): {
     addMessage: (chatId: string, role: MessageRole, text: string, options?: AddChatMessageOptions) => string;
     removeMessageById: (chatId: string, messageId: string) => void;
     updateMessageById: (chatId: string, messageId: string, patch: UpdateChatMessagePatch) => void;
-    sendMessage: (message: string | ChatSendMessagePayload, chatId?: string) => Promise<string>;
+    sendMessage: (message: string | ChatSendMessagePayload, chatId?: string) => Promise<SendMessageResult>;
+    updateChatMeta: (chatId: string, patch: ChatMeta) => void;
+    setChatMessages: (chatId: string, messages: Message[]) => void;
     deleteChat: (sessionId: string) => void;
 };
 export declare function useCurrentChat(scopeId: string): Chat;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.3.78",
+  "version": "1.3.80",
   "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

@@ -29,8 +29,14 @@ export type ChatSendMessagePayload = {
   omitUserMessage?: boolean;
   /** Shimmer label while waiting on the API; defaults to "Thinking...". */
   loadingLabel?: string;
+  /** When set, show as a SYSTEM inProgress bubble instead of the footer shimmer. */
+  systemProgressLabel?: string;
 };
 
+export type ChatMetaValue = string | number | boolean | null;
+
+export type ChatMeta = Record<string, ChatMetaValue>;
+
 export interface Message {
   id: string;
   role: MessageRole;
@@ -39,12 +45,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 +132,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 +147,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

@@ -14,7 +14,7 @@ import { DropZone } from '../../DropZone/DropZone';
 import { PanelResizeHandle } from '../../Sidebar/Sidebar';
 import SidebarStem from '../../Sidebar/Sidebar.styl';
 import { Chat } from '../Chat';
-import type { ChatAttachmentDropItem } from '../Chat.types';
+import { type ChatAttachmentDropItem, MessageRole } from '../Chat.types';
 import {
   buildAcceptAttr,
   filterToTextAttachments,
@@ -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),
@@ -74,6 +76,13 @@ export function ChatChrome({
   >([]);
   const [isExtractingAttachments, setIsExtractingAttachments] = useState(false);
   const promptDisabled = isExtractingAttachments;
+  const hasInProgressSystemMessage = useMemo(
+    () =>
+      messages.some(
+        msg => msg.role === MessageRole.SYSTEM && msg.inProgress === true,
+      ),
+    [messages],
+  );
 
   const handleAttachmentFiles = useCallback(
     (files: File[]) => {
@@ -186,12 +195,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 +208,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 +218,7 @@ export function ChatChrome({
                   return (
                     <Chat.Message
                       key={msg.id}
+                      message={msg}
                       role={msg.role}
                       text={msg.text}
                       inProgress={msg.inProgress}
@@ -229,6 +239,7 @@ export function ChatChrome({
                           : undefined
                       }
                       renderMessageChart={renderMessageChart}
+                      renderSystemMessage={renderSystemMessage}
                     />
                   );
                 })}
@@ -259,15 +270,21 @@ export function ChatChrome({
 
                 {showInlinePresets && renderPresets('inline')}
 
-                {isLoading && (isLastMessageFromUser || loadingLabel) && (
-                  <TextShimmer duration={1} spread={5} className={S.loader}>
-                    {loadingLabel ?? 'Thinking...'}
-                  </TextShimmer>
-                )}
+                {isLoading &&
+                  !hasInProgressSystemMessage &&
+                  (isLastMessageFromUser || loadingLabel) && (
+                    <TextShimmer duration={1} spread={5} className={S.loader}>
+                      {loadingLabel ?? 'Thinking...'}
+                    </TextShimmer>
+                  )}
               </Scroll>
             </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.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/buildChatSendMessagePayload.ts

@@ -85,5 +85,6 @@ export function displayTextFromSendPayload(
 export function loadingLabelFromSendPayload(
   message: string | ChatSendMessagePayload,
 ): string | undefined {
-  return typeof message === 'string' ? undefined : message.loadingLabel;
+  if (typeof message === 'string') return undefined;
+  return message.loadingLabel ?? message.systemProgressLabel;
 }

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/components/widgets/DriversComparisonChart/driversComparisonChart.helpers.test.ts

@@ -127,7 +127,16 @@ describe('applyDriversComparisonViewToPayload', () => {
   };
 
   it('returns original payload for lagged tab', () => {
-    expect(applyDriversComparisonViewToPayload(payload, 'lagged')).toBe(payload);
+    expect(applyDriversComparisonViewToPayload(payload, 'lagged')).toBe(
+      payload,
+    );
+  });
+
+  it('returns original payload for overlapped tab when target series missing', () => {
+    const incomplete = { drivers: payload.drivers } as typeof payload;
+    expect(applyDriversComparisonViewToPayload(incomplete, 'overlapped')).toBe(
+      incomplete,
+    );
   });
 
   it('shifts driver series backward for overlapped tab without mutating source', () => {
@@ -327,8 +336,8 @@ describe('buildDriversComparisonChartData historical window floor', () => {
 
     expect(laggedChart[0]?.date).toBe('2014-10-01');
     expect(overlappedChart[0]?.date).toBe('2014-07-01');
-    expect(
-      overlappedChart[0]?.date!.localeCompare(laggedChart[0]?.date!),
-    ).toBe(-1);
+    expect(overlappedChart[0]?.date!.localeCompare(laggedChart[0]?.date!)).toBe(
+      -1,
+    );
   });
 });

package/src/components/widgets/DriversComparisonChart/driversComparisonChart.helpers.ts

@@ -125,13 +125,14 @@ export function applyDriversComparisonViewToPayload(
   tab: DriversComparisonViewTab,
 ): BacktestsComponentPayload | null {
   if (!payload || tab === 'lagged') return payload;
+  if (!payload.target?.normalized_series) return payload;
 
   return {
     target: {
       ...payload.target,
       normalized_series: { ...payload.target.normalized_series },
     },
-    drivers: payload.drivers.map(driver => {
+    drivers: (payload.drivers ?? []).map(driver => {
       const lagMonths = parseLagMonthsFromLabel(resolveDriverLagLabel(driver));
       const series = driver.normalized_series ?? {};
       const normalized_series =