@sybilion/uilib 1.2.16 → 1.2.18

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

@@ -2,8 +2,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import S from './ChatEmptyState.styl.js';
 import SparklesIcon from './icons/sparkles.svg.js';
 
-function ChatEmptyState({ icon = jsx(SparklesIcon, {}), title = 'Start a conversation', description, children, }) {
-    return (jsxs("div", { className: S.root, children: [icon && jsx("div", { className: S.icon, children: icon }), title && jsx("h2", { children: title }), description && jsx("p", { children: description }), children] }));
+function ChatEmptyState({ icon = jsx(SparklesIcon, {}), title = 'Start a conversation', description, additionalContent, children, }) {
+    return (jsxs("div", { className: S.root, children: [icon && jsx("div", { className: S.icon, children: icon }), title && jsx("h2", { children: title }), description && jsx("p", { children: description }), additionalContent, children] }));
 }
 
 export { ChatEmptyState };

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

@@ -1,6 +1,6 @@
 import styleInject from 'style-inject';
 
-var css_248z = ".ChatEmptyState_root__j1n-C{align-items:center;display:flex;flex:1;flex-direction:column;gap:var(--p-10);justify-content:center;padding:var(--p-6);text-align:center;text-size:var(--text-sm);color:var(--text-secondary)}.ChatEmptyState_icon__YSDgv,.ChatEmptyState_icon__YSDgv>svg{height:32px;width:32px}";
+var css_248z = ".ChatEmptyState_root__j1n-C{align-items:center;color:var(--text-secondary);display:flex;flex:1;flex-direction:column;font-size:var(--text-sm);gap:var(--p-10);justify-content:center;padding:var(--p-6);text-align:center;text-wrap:balance}.ChatEmptyState_icon__YSDgv,.ChatEmptyState_icon__YSDgv>svg{height:32px;width:32px}";
 var S = {"root":"ChatEmptyState_root__j1n-C","icon":"ChatEmptyState_icon__YSDgv"};
 styleInject(css_248z);
 

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

@@ -4,7 +4,7 @@ import { Button } from '../../Button/Button.js';
 import { ChatChrome } from '../ChatChrome/ChatChrome.js';
 import { useChatPanelChromeModel } from './useChatPanelChromeModel.js';
 
-function ChatSheet({ triggerLabel = 'Open Chat', triggerAriaLabel, actionsRef, renderTrigger, presets, scopeId, onMessage, onScriptComplete, onGenerateDashboard, renderMessageChart, inline = false, }) {
+function ChatSheet({ triggerLabel = 'Open Chat', triggerAriaLabel, actionsRef, renderTrigger, presets, scopeId, onMessage, onScriptComplete, onGenerateDashboard, renderMessageChart, emptyState, inline = false, }) {
     const model = useChatPanelChromeModel({
         embedAsPage: inline,
         presets,
@@ -13,6 +13,7 @@ function ChatSheet({ triggerLabel = 'Open Chat', triggerAriaLabel, actionsRef, r
         onScriptComplete,
         onGenerateDashboard,
         renderMessageChart,
+        emptyState,
     });
     if (actionsRef) {
         actionsRef.current = {

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

@@ -3,7 +3,7 @@ import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import { MessageRole, GENERATING_DASHBOARD_SYSTEM_TEXT } from '../Chat.types.js';
 import { isGraphIntakeAssistantStepComplete, matchUserTextToQuickReply, parseScriptLine, textHasQuickReplyMarkers, branchKeysUsedFromChatHistory, branchKeysUsedByUserMessages, extractQuickReplyLabelKeyPairsFromText, entryBranchKeyBeforeLastAssistant, isPresetScriptGraph, branchesFromPresetScriptGraph } from '../ChatMessage/presetScript.js';
 import { usedPresetIdsFromMessages, formatChatTranscript } from '../chat-preset-utils.js';
-import { useChatsForScopeId, useChat } from '../../../../contexts/chat-context.js';
+import { useChatsForScopeId, useChat, isChatEmpty } from '../../../../contexts/chat-context.js';
 import useEvent from '../../../../hooks/useEvent.js';
 import { useIsMobile } from '../../../../hooks/useIsMobile.js';
 import { useQueryParams } from '../../../../hooks/useQueryParams.js';
@@ -21,7 +21,7 @@ const CHAT_NAV_COLLAPSE_BREAKPOINT_PX = 1400;
 const CHAT_QUERY_PARAM = 'chat';
 const CHAT_OPEN_VALUE = 'open';
 const PROMPT_QUERY_PARAM = 'prompt';
-function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onScriptComplete, onGenerateDashboard, renderMessageChart, }) {
+function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onScriptComplete, onGenerateDashboard, renderMessageChart, emptyState, }) {
     const effectiveScopeId = scopeId ?? NO_SCOPE_FALLBACK;
     const isMobile = useIsMobile();
     const { chatPanelContainer, isOpen: sidebarNavOpen, setOpen: setSidebarNavOpen, chatWidthPx, setChatWidthPx, getShellWidth, setChatPanelOpen, } = useSidebar();
@@ -145,6 +145,7 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
             removeSearchParams(CHAT_QUERY_PARAM);
         }
     };
+    const isEmpty = isChatEmpty(chat) && !isLoading;
     /**
      * App link: `?prompt=…` — open panel, pre-fill composer, strip param (read once on mount
      * from `location.search`). If the selected session already has messages, `newChat()` first.
@@ -168,12 +169,8 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
             return;
         }
         promptParamHandledInEffectRef.current = true;
-        const selected = currentChatId
-            ? chats.find(c => c.session_id === currentChatId)
-            : undefined;
-        const selectedHasMessages = (selected?.messages?.length ?? 0) > 0;
         const needsFirstSession = chats.length === 0;
-        if (selectedHasMessages || needsFirstSession) {
+        if (!isEmpty || needsFirstSession) {
             const sessionId = newChat();
             if (sessionId == null) {
                 logger.warn('Chat prompt link: sign in to use the assistant.');
@@ -641,7 +638,6 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
     };
     const isLastMessageFromUser = chat?.messages.length > 0 &&
         chat.messages[chat.messages.length - 1]?.role === MessageRole.USER;
-    const isEmpty = !chat?.messages?.length && !isLoading;
     const linearScriptActive = Boolean(currentChatId && scriptByChatId[currentChatId]);
     const quickBranches = currentChatId
         ? quickReplyBranchesByChat[currentChatId]
@@ -771,6 +767,7 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
         onPromptSubmit: handlePromptSubmit,
         onChatDeleted: endLocalDemoFlow,
         promptPrefill: promptLinkPrefill,
+        emptyState,
     };
     const toggleOpen = () => onOpenChange(!isOpen);
     return {

package/dist/esm/components/ui/Page/PageContent/PageContent.styl.js

@@ -1,6 +1,6 @@
 import styleInject from 'style-inject';
 
-var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.PageContent_root__caExB{display:flex;flex:1;flex-direction:column;max-width:var(--page-width);min-height:0;padding-bottom:var(--page-y-padding);width:100%}.PageContent_section__Wve-w{display:flex;flex-direction:column;min-height:0;padding-left:var(--page-x-padding);padding-right:var(--page-x-padding)}.PageContent_grow__Nkfqk{flex-grow:1}";
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.PageContent_root__caExB{display:flex;flex:1;flex-direction:column;max-width:var(--page-width);min-height:0;width:100%}.PageContent_section__Wve-w{display:flex;flex-direction:column;min-height:0;padding-left:var(--page-x-padding);padding-right:var(--page-x-padding)}.PageContent_grow__Nkfqk{flex-grow:1}";
 var S = {"root":"PageContent_root__caExB","section":"PageContent_section__Wve-w","grow":"PageContent_grow__Nkfqk"};
 styleInject(css_248z);
 

package/dist/esm/contexts/chat-context.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useState, useCallback, useEffect, useContext } from 'react';
+import { createContext, useState, useCallback, useEffect, useContext, useMemo } from 'react';
 import { MessageRole } from '../components/ui/Chat/Chat.types.js';
 import { stripJsonDashboardFences } from '../lib/dashboard-spec/stripJsonDashboardFences.js';
 import { LS } from '@homecode/ui';
@@ -255,6 +255,7 @@ function ChatProvider({ children, userSwitchKey, sendChatMessage: sendChatMessag
             deleteChat,
         }, children: children }));
 }
+const isChatEmpty = (chat) => chat?.messages.length === 0;
 function useChats() {
     const context = useContext(ChatContext);
     if (context === undefined) {
@@ -264,17 +265,21 @@ function useChats() {
 }
 function useChat(scopeId, chatId) {
     const { getChatsForScopeId } = useChats();
-    if (!scopeId || !chatId)
-        return null;
-    const list = getChatsForScopeId(scopeId);
-    return list.find(chat => chat.session_id === chatId) ?? null;
+    return useMemo(() => {
+        if (!scopeId || !chatId)
+            return null;
+        return (getChatsForScopeId(scopeId)?.find(chat => chat.session_id === chatId) ??
+            null);
+    }, [scopeId, chatId, getChatsForScopeId]);
 }
 function useChatsForScopeId(scopeId) {
     const { getChatsForScopeId, getCurrentChatId, setCurrentChatId, newChat, addMessage, removeMessageById, sendMessage, deleteChat, } = useChats();
     const chats = getChatsForScopeId(scopeId);
     const currentChatId = getCurrentChatId(scopeId);
+    const currentChat = useChat(scopeId, currentChatId ?? undefined);
     return {
         chats,
+        currentChat,
         currentChatId,
         setCurrentChatId: (targetId) => setCurrentChatId(scopeId, targetId),
         newChat: () => newChat(scopeId),
@@ -294,4 +299,4 @@ function useCurrentChat(scopeId) {
     return useChat(scopeId, chatId ?? undefined);
 }
 
-export { ChatContext, ChatProvider, useChat, useChats, useChatsForDataset, useChatsForScopeId, useCurrentChat };
+export { ChatContext, ChatProvider, isChatEmpty, useChat, useChats, useChatsForDataset, useChatsForScopeId, useCurrentChat };

package/dist/esm/index.js

@@ -4,7 +4,7 @@ export { DEFAULT_THEME_ACTIVE_COLOR } from './docs/lib/theme.js';
 export { SybilionAuthProvider, createSybilionApiFetch, getSybilionApiOriginFromSdk, sybilionApiFetch, useSybilionApiFetch, useSybilionAuth } from './sybilion-auth/SybilionAuthProvider.js';
 export { SYBILION_AUTH_LOGIN_PATH, normalizeApiBaseUrl } from './sybilion-auth/authPaths.js';
 export { exchangeAuth0AccessTokenForSybilionJwt } from './sybilion-auth/exchangeSybilionToken.js';
-export { ChatContext, ChatProvider, useChat, useChats, useChatsForDataset, useChatsForScopeId, useCurrentChat } from './contexts/chat-context.js';
+export { ChatContext, ChatProvider, isChatEmpty, useChat, useChats, useChatsForDataset, useChatsForScopeId, useCurrentChat } from './contexts/chat-context.js';
 export { AnalysesSelector } from './components/ui/AnalysesSelector/AnalysesSelector.js';
 export { AnalysisLineIcon } from './components/ui/AnalysisLineIcon/AnalysisLineIcon.js';
 export { AppHeaderHost, AppHeaderPortal } from './components/ui/AppHeader/AppHeader.js';

package/dist/esm/types/src/components/ui/Chat/ChatEmptyState/ChatEmptyState.d.ts

@@ -1,3 +1,3 @@
 import { PropsWithChildren } from 'react';
 import type { ChatEmptyStateProps } from './ChatEmptyState.types';
-export declare function ChatEmptyState({ icon, title, description, children, }: PropsWithChildren<ChatEmptyStateProps>): import("react/jsx-runtime").JSX.Element;
+export declare function ChatEmptyState({ icon, title, description, additionalContent, children, }: PropsWithChildren<ChatEmptyStateProps>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/ui/Chat/ChatEmptyState/ChatEmptyState.types.d.ts

@@ -2,4 +2,6 @@ export interface ChatEmptyStateProps {
     icon?: React.ReactNode;
     title?: string;
     description?: string;
+    /** Extra block below description (works when passed via `ChatChrome` / `ChatSheet` `emptyState`). */
+    additionalContent?: React.ReactNode;
 }

package/dist/esm/types/src/components/ui/Chat/ChatSheet/ChatSheet.d.ts

@@ -19,4 +19,4 @@ export interface ChatSheetProps extends Omit<UseChatPanelChromeModelInput, 'embe
      */
     inline?: boolean;
 }
-export declare function ChatSheet({ triggerLabel, triggerAriaLabel, actionsRef, renderTrigger, presets, scopeId, onMessage, onScriptComplete, onGenerateDashboard, renderMessageChart, inline, }: ChatSheetProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatSheet({ triggerLabel, triggerAriaLabel, actionsRef, renderTrigger, presets, scopeId, onMessage, onScriptComplete, onGenerateDashboard, renderMessageChart, emptyState, inline, }: ChatSheetProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/ui/Chat/ChatSheet/useChatPanelChromeModel.d.ts

@@ -1,5 +1,6 @@
 import { ChatPreset, type ScriptCompletePayload } from '#uilib/components/ui/Chat/Chat.types';
 import type { ChatChromeProps } from '../ChatChrome';
+import type { ChatEmptyStateProps } from '../ChatEmptyState/ChatEmptyState.types';
 export type UseChatPanelChromeModelInput = {
     /** When true, skip sidebar chat slot, URL `?chat=`, and portal behavior (e.g. page main content). */
     embedAsPage: boolean;
@@ -13,6 +14,8 @@ export type UseChatPanelChromeModelInput = {
     onGenerateDashboard?: (transcript: string) => void | Promise<void>;
     /** Renders `[CHART]` tokens in assistant messages. */
     renderMessageChart?: () => React.ReactNode;
+    /** Forwarded to `ChatChrome` when the thread is empty. */
+    emptyState?: ChatEmptyStateProps;
 };
 export type UseChatPanelChromeModelResult = {
     chromeProps: ChatChromeProps;
@@ -22,4 +25,4 @@ export type UseChatPanelChromeModelResult = {
     newChat: () => void;
     chatPanelContainer: HTMLElement | null;
 };
-export declare function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onScriptComplete, onGenerateDashboard, renderMessageChart, }: UseChatPanelChromeModelInput): UseChatPanelChromeModelResult;
+export declare function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onScriptComplete, onGenerateDashboard, renderMessageChart, emptyState, }: UseChatPanelChromeModelInput): UseChatPanelChromeModelResult;

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

@@ -21,10 +21,12 @@ export interface ChatProviderProps {
     sendChatMessage: SendChatMessageFn;
 }
 export declare function ChatProvider({ children, userSwitchKey, sendChatMessage: sendChatMessageFn, }: ChatProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare const isChatEmpty: (chat: Chat | null) => boolean;
 export declare function useChats(): ChatContextType;
 export declare function useChat(scopeId: string | undefined, chatId: string | undefined): Chat | null;
 export declare function useChatsForScopeId(scopeId: string): {
     chats: Chat[];
+    currentChat: Chat;
     currentChatId: string;
     setCurrentChatId: (targetId: string) => void;
     newChat: () => string;
@@ -36,6 +38,7 @@ export declare function useChatsForScopeId(scopeId: string): {
 /** @deprecated Use useChatsForScopeId */
 export declare function useChatsForDataset(scopeId: string): {
     chats: Chat[];
+    currentChat: Chat;
     currentChatId: string;
     setCurrentChatId: (targetId: string) => void;
     newChat: () => string;

package/package.json

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

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

@@ -10,7 +10,8 @@
   padding var(--p-6)
 
   text-align center
-  text-size var(--text-sm)
+  text-wrap balance
+  font-size var(--text-sm)
   color var(--text-secondary)
 
 .icon

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

@@ -8,6 +8,7 @@ export function ChatEmptyState({
   icon = <SparklesIcon />,
   title = 'Start a conversation',
   description,
+  additionalContent,
   children,
 }: PropsWithChildren<ChatEmptyStateProps>) {
   return (
@@ -15,6 +16,7 @@ export function ChatEmptyState({
       {icon && <div className={S.icon}>{icon}</div>}
       {title && <h2>{title}</h2>}
       {description && <p>{description}</p>}
+      {additionalContent}
       {children}
     </div>
   );

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

@@ -2,4 +2,6 @@ export interface ChatEmptyStateProps {
   icon?: React.ReactNode;
   title?: string;
   description?: string;
+  /** Extra block below description (works when passed via `ChatChrome` / `ChatSheet` `emptyState`). */
+  additionalContent?: React.ReactNode;
 }

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

@@ -43,6 +43,7 @@ export function ChatSheet({
   onScriptComplete,
   onGenerateDashboard,
   renderMessageChart,
+  emptyState,
   inline = false,
 }: ChatSheetProps) {
   const model = useChatPanelChromeModel({
@@ -53,6 +54,7 @@ export function ChatSheet({
     onScriptComplete,
     onGenerateDashboard,
     renderMessageChart,
+    emptyState,
   });
 
   if (actionsRef) {

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

@@ -23,7 +23,11 @@ import {
   formatChatTranscript,
   usedPresetIdsFromMessages,
 } from '#uilib/components/ui/Chat/chat-preset-utils';
-import { useChat, useChatsForScopeId } from '#uilib/contexts/chat-context';
+import {
+  isChatEmpty,
+  useChat,
+  useChatsForScopeId,
+} from '#uilib/contexts/chat-context';
 import useEvent from '#uilib/hooks/useEvent';
 import { useIsMobile } from '#uilib/hooks/useIsMobile';
 import { useQueryParams } from '#uilib/hooks/useQueryParams';
@@ -34,6 +38,7 @@ import { ScrollRef } from '@homecode/ui';
 import { useSidebar } from '../../Sidebar/Sidebar';
 import { Chat } from '../Chat';
 import type { ChatChromeProps } from '../ChatChrome';
+import type { ChatEmptyStateProps } from '../ChatEmptyState/ChatEmptyState.types';
 
 export type UseChatPanelChromeModelInput = {
   /** When true, skip sidebar chat slot, URL `?chat=`, and portal behavior (e.g. page main content). */
@@ -48,6 +53,8 @@ export type UseChatPanelChromeModelInput = {
   onGenerateDashboard?: (transcript: string) => void | Promise<void>;
   /** Renders `[CHART]` tokens in assistant messages. */
   renderMessageChart?: () => React.ReactNode;
+  /** Forwarded to `ChatChrome` when the thread is empty. */
+  emptyState?: ChatEmptyStateProps;
 };
 
 export type UseChatPanelChromeModelResult = {
@@ -92,6 +99,7 @@ export function useChatPanelChromeModel({
   onScriptComplete,
   onGenerateDashboard,
   renderMessageChart,
+  emptyState,
 }: UseChatPanelChromeModelInput): UseChatPanelChromeModelResult {
   const effectiveScopeId = scopeId ?? NO_SCOPE_FALLBACK;
   const isMobile = useIsMobile();
@@ -264,6 +272,8 @@ export function useChatPanelChromeModel({
     }
   };
 
+  const isEmpty = isChatEmpty(chat) && !isLoading;
+
   /**
    * App link: `?prompt=…` — open panel, pre-fill composer, strip param (read once on mount
    * from `location.search`). If the selected session already has messages, `newChat()` first.
@@ -290,13 +300,9 @@ export function useChatPanelChromeModel({
     }
     promptParamHandledInEffectRef.current = true;
 
-    const selected = currentChatId
-      ? chats.find(c => c.session_id === currentChatId)
-      : undefined;
-    const selectedHasMessages = (selected?.messages?.length ?? 0) > 0;
     const needsFirstSession = chats.length === 0;
 
-    if (selectedHasMessages || needsFirstSession) {
+    if (!isEmpty || needsFirstSession) {
       const sessionId = newChat();
       if (sessionId == null) {
         logger.warn('Chat prompt link: sign in to use the assistant.');
@@ -816,8 +822,6 @@ export function useChatPanelChromeModel({
     chat?.messages.length > 0 &&
     chat.messages[chat.messages.length - 1]?.role === MessageRole.USER;
 
-  const isEmpty = !chat?.messages?.length && !isLoading;
-
   const linearScriptActive = Boolean(
     currentChatId && scriptByChatId[currentChatId],
   );
@@ -993,6 +997,7 @@ export function useChatPanelChromeModel({
     onPromptSubmit: handlePromptSubmit,
     onChatDeleted: endLocalDemoFlow,
     promptPrefill: promptLinkPrefill,
+    emptyState,
   };
 
   const toggleOpen = () => onOpenChange(!isOpen);

package/src/components/ui/Page/PageContent/PageContent.styl

@@ -7,7 +7,6 @@
   min-height 0
   width 100%
   max-width var(--page-width)
-  padding-bottom var(--page-y-padding)
 
 .section
   pageXPadding()

package/src/contexts/chat-context.tsx

@@ -4,6 +4,7 @@ import {
   useCallback,
   useContext,
   useEffect,
+  useMemo,
   useState,
 } from 'react';
 
@@ -383,6 +384,9 @@ export function ChatProvider({
   );
 }
 
+export const isChatEmpty = (chat: Chat | null): boolean =>
+  chat?.messages.length === 0;
+
 export function useChats() {
   const context = useContext(ChatContext);
   if (context === undefined) {
@@ -396,9 +400,13 @@ export function useChat(
   chatId: string | undefined,
 ): Chat | null {
   const { getChatsForScopeId } = useChats();
-  if (!scopeId || !chatId) return null;
-  const list = getChatsForScopeId(scopeId);
-  return list.find(chat => chat.session_id === chatId) ?? null;
+  return useMemo(() => {
+    if (!scopeId || !chatId) return null;
+    return (
+      getChatsForScopeId(scopeId)?.find(chat => chat.session_id === chatId) ??
+      null
+    );
+  }, [scopeId, chatId, getChatsForScopeId]);
 }
 
 export function useChatsForScopeId(scopeId: string) {
@@ -414,9 +422,11 @@ export function useChatsForScopeId(scopeId: string) {
   } = useChats();
   const chats = getChatsForScopeId(scopeId);
   const currentChatId = getCurrentChatId(scopeId);
+  const currentChat = useChat(scopeId, currentChatId ?? undefined);
 
   return {
     chats,
+    currentChat,
     currentChatId,
     setCurrentChatId: (targetId: string) => setCurrentChatId(scopeId, targetId),
     newChat: () => newChat(scopeId),

package/src/docs/docsHeaderActions.tsx

@@ -13,6 +13,14 @@ export function DocsHeaderActions() {
         </>
       }
       scopeId={DOCS_CHAT_SCOPE_ID}
+      emptyState={{
+        title: 'Start a conversation',
+        description:
+          'Send a message below. This demo appends a canned reply after a short delay.',
+        additionalContent: (
+          <p>Optional empty-state slot via additionalContent.</p>
+        ),
+      }}
     />
   );
 }

package/src/docs/pages/CardPage.tsx

@@ -22,7 +22,7 @@ export default function CardPage() {
         actions={<DocsHeaderActions />}
       />
       <PageContentSection>
-        <Card style={{ maxWidth: 360 }}>
+        <Card paddingSize="s" style={{ maxWidth: 360 }}>
           <CardHeader>
             <CardTitle>Card title</CardTitle>
             <CardDescription>Supporting description text.</CardDescription>

package/src/docs/pages/ChatPage.tsx

@@ -101,6 +101,9 @@ export default function ChatPage() {
             title: 'Start a conversation',
             description:
               'Send a message below. This demo appends a canned reply after a short delay.',
+            additionalContent: (
+              <p>Optional empty-state slot via additionalContent.</p>
+            ),
           }}
         />
       </PageContentSection>