@sybilion/uilib 1.2.16 → 1.2.17

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/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

@@ -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();
@@ -771,6 +771,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/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/package.json

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

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

@@ -34,6 +34,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 +49,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 +95,7 @@ export function useChatPanelChromeModel({
   onScriptComplete,
   onGenerateDashboard,
   renderMessageChart,
+  emptyState,
 }: UseChatPanelChromeModelInput): UseChatPanelChromeModelResult {
   const effectiveScopeId = scopeId ?? NO_SCOPE_FALLBACK;
   const isMobile = useIsMobile();
@@ -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/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/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>