@sybilion/uilib 1.3.20 → 1.3.22

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

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 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 { isGraphIntakeAssistantStepComplete, matchUserTextToQuickReply, isPresetScriptGraph, branchesFromPresetScriptGraph, parseScriptLine, textHasQuickReplyMarkers, branchKeysUsedFromChatHistory, branchKeysUsedByUserMessages, extractQuickReplyLabelKeyPairsFromText, entryBranchKeyBeforeLastAssistant } from '../ChatMessage/presetScript.js';
 import { buildChatSendMessagePayload, displayTextFromSendPayload } from '../buildChatSendMessagePayload.js';
 import { usedPresetIdsFromMessages, formatChatTranscript } from '../chat-preset-utils.js';
 import { useChatsForScopeId, useChat, useChatOutboundPending, useSyncChatPanelBusy, isChatEmpty } from '../../../../contexts/chat-context.js';
@@ -425,7 +425,7 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
         onMessage,
         onScriptComplete,
     ]);
-    const submitPreset = async (preset) => {
+    const submitPreset = useCallback(async (preset) => {
         const script = preset.script;
         const scriptGraph = isPresetScriptGraph(script);
         const hasLinearScript = Array.isArray(script) && script.length > 0;
@@ -518,7 +518,24 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
         finally {
             setLocalUiBusy(false);
         }
-    };
+    }, [
+        currentChatId,
+        endLocalDemoFlow,
+        handlePromptSubmit,
+        addMessage,
+        presetsWithFreeform,
+    ]);
+    const resolvedEmptyState = useMemo(() => {
+        if (!emptyState)
+            return undefined;
+        const { additionalContent, ...rest } = emptyState;
+        return {
+            ...rest,
+            additionalContent: typeof additionalContent === 'function'
+                ? additionalContent({ submitPreset })
+                : additionalContent,
+        };
+    }, [emptyState, submitPreset]);
     const activeScript = currentChatId
         ? scriptByChatId[currentChatId]
         : undefined;
@@ -765,7 +782,7 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
         onPromptSubmit: handlePromptSubmit,
         onChatDeleted: endLocalDemoFlow,
         promptPrefill: promptLinkPrefill,
-        emptyState,
+        emptyState: resolvedEmptyState,
         allowedAttachments,
         allowPdfAttachments,
         onAttachmentsDropped,

package/dist/esm/components/ui/Dialog/Dialog.js

@@ -1,13 +1,15 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import cn from 'classnames';
-import React__default, { useState, useRef, useId, useEffect } from 'react';
+import React__default, { useState, useRef, useId, useEffect, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { Card, CardHeader, CardContent, CardFooter } from '../Card/Card.js';
+import { APP_MODAL_ID } from '../../../constants/appMount.js';
 import { XIcon } from '@phosphor-icons/react';
 import S from './Dialog.styl.js';
 
 function Dialog({ open, onOpenChange, disabled, trigger, title, subtitle, disableCloseButton, icon, content, contentClassName, footer, footerClassName, footerAlignment = 'center', size = 'default', className, noScroll, maxHeight, autoScrollBottom, width, }) {
     const [isMounted, setIsMounted] = useState(false);
+    const [modalContainer, setModalContainer] = useState(null);
     const [isAnimating, setIsAnimating] = useState(false);
     const dialogRef = useRef(null);
     const triggerRef = useRef(null);
@@ -19,6 +21,9 @@ function Dialog({ open, onOpenChange, disabled, trigger, title, subtitle, disabl
         setIsMounted(true);
         return () => setIsMounted(false);
     }, []);
+    useLayoutEffect(() => {
+        setModalContainer(document.getElementById(APP_MODAL_ID));
+    }, []);
     // Handle open/close animations
     useEffect(() => {
         if (open) {
@@ -120,7 +125,10 @@ function Dialog({ open, onOpenChange, disabled, trigger, title, subtitle, disabl
                         : null,
                 }, children: [(title || subtitle || icon) && (jsx(CardHeader, { icon: icon, title: title, description: subtitle })), !disableCloseButton && (jsx("button", { className: S.dialogClose, onClick: handleCloseClick, "aria-label": "Close dialog", type: "button", children: jsx(XIcon, { size: 16 }) })), content && (jsx(CardContent, { className: contentClassName, noScroll: noScroll, autoScrollBottom: autoScrollBottom, children: content })), footer && (jsx(CardFooter, { className: cn(S.footer, S[`align-${footerAlignment}`], footerClassName), children: footer }))] })] }));
     const onTriggerClick = !disabled ? () => onOpenChange(true) : undefined;
-    return (jsxs(Fragment, { children: [trigger && jsx("div", { onClick: onTriggerClick, children: trigger }), open && !disabled && createPortal(dialogContent, document.body)] }));
+    return (jsxs(Fragment, { children: [trigger && jsx("div", { onClick: onTriggerClick, children: trigger }), open &&
+                !disabled &&
+                modalContainer &&
+                createPortal(dialogContent, modalContainer)] }));
 }
 
 export { Dialog, S as DialogStyles };

package/dist/esm/constants/appMount.js

@@ -0,0 +1,5 @@
+/** DOM id for the main React root mount (`#app-root`). */
+/** DOM id for modal/dialog portals (`#app-modal`). */
+const APP_MODAL_ID = 'app-modal';
+
+export { APP_MODAL_ID };

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

@@ -1,7 +1,15 @@
+import type { ChatPreset } from '#uilib/components/ui/Chat/Chat.types';
+export type ChatEmptyStateContext = {
+    submitPreset: (preset: ChatPreset) => void | Promise<void>;
+};
 export interface ChatEmptyStateProps {
     icon?: React.ReactNode;
     title?: string;
     description?: string;
-    /** Extra block below description (works when passed via `ChatChrome` / `ChatSheet` `emptyState`). */
+    /** Extra block below description (resolved before render in `ChatEmptyState`). */
     additionalContent?: React.ReactNode;
 }
+/** Passed to `ChatSheet` / `useChatPanelChromeModel`; function form resolved before render. */
+export interface ChatEmptyStateConfig extends Omit<ChatEmptyStateProps, 'additionalContent'> {
+    additionalContent?: React.ReactNode | ((ctx: ChatEmptyStateContext) => React.ReactNode);
+}

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

@@ -1,7 +1,7 @@
 import { ChatPreset, type ScriptCompletePayload } from '#uilib/components/ui/Chat/Chat.types';
 import type { ChatChromeProps } from '../ChatChrome';
 import type { ChatAttachmentDropItem } from '../ChatChrome/ChatChrome.types';
-import type { ChatEmptyStateProps } from '../ChatEmptyState/ChatEmptyState.types';
+import type { ChatEmptyStateConfig } 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;
@@ -16,7 +16,7 @@ export type UseChatPanelChromeModelInput = {
     /** Renders `[CHART]` tokens in assistant messages. */
     renderMessageChart?: () => React.ReactNode;
     /** Forwarded to `ChatChrome` when the thread is empty. */
-    emptyState?: ChatEmptyStateProps;
+    emptyState?: ChatEmptyStateConfig;
     /** MIME types / extensions for text-only chat attachments (filtered by uilib allowlist). */
     allowedAttachments?: readonly string[];
     /** When true, PDF drops are accepted and parsed to plain text. */

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

@@ -12,6 +12,7 @@ export type { UseChatPanelChromeModelInput, UseChatPanelChromeModelResult, } fro
 export { ChatMessage } from './ChatMessage';
 export { ChatPrompt } from './ChatPrompt';
 export { ChatPresets } from './ChatPresets';
+export type { ChatEmptyStateConfig, ChatEmptyStateContext, ChatEmptyStateProps, } from './ChatEmptyState/ChatEmptyState.types';
 export type { Chat as ChatType, ChatAttachmentDropItem, ChatSendMessagePayload, ChatProps, ChatPreset as ChatPresetType, Message, UserTextFileAttachment, } from './Chat.types';
 export { MessageRole } from './Chat.types';
 export { CsvIcon } from '../../icons/CsvIcon/CsvIcon';

package/dist/esm/types/src/constants/appMount.d.ts

@@ -0,0 +1,4 @@
+/** DOM id for the main React root mount (`#app-root`). */
+export declare const APP_ROOT_ID = "app-root";
+/** DOM id for modal/dialog portals (`#app-modal`). */
+export declare const APP_MODAL_ID = "app-modal";

package/package.json

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

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

@@ -1,7 +1,23 @@
+import type { ChatPreset } from '#uilib/components/ui/Chat/Chat.types';
+
+export type ChatEmptyStateContext = {
+  submitPreset: (preset: ChatPreset) => void | Promise<void>;
+};
+
 export interface ChatEmptyStateProps {
   icon?: React.ReactNode;
   title?: string;
   description?: string;
-  /** Extra block below description (works when passed via `ChatChrome` / `ChatSheet` `emptyState`). */
+  /** Extra block below description (resolved before render in `ChatEmptyState`). */
   additionalContent?: React.ReactNode;
 }
+
+/** Passed to `ChatSheet` / `useChatPanelChromeModel`; function form resolved before render. */
+export interface ChatEmptyStateConfig extends Omit<
+  ChatEmptyStateProps,
+  'additionalContent'
+> {
+  additionalContent?:
+    | React.ReactNode
+    | ((ctx: ChatEmptyStateContext) => React.ReactNode);
+}

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

@@ -45,6 +45,7 @@ import { useSidebar } from '../../Sidebar/Sidebar';
 import { Chat } from '../Chat';
 import type { ChatChromeProps } from '../ChatChrome';
 import type { ChatAttachmentDropItem } from '../ChatChrome/ChatChrome.types';
+import type { ChatEmptyStateConfig } from '../ChatEmptyState/ChatEmptyState.types';
 import type { ChatEmptyStateProps } from '../ChatEmptyState/ChatEmptyState.types';
 
 export type UseChatPanelChromeModelInput = {
@@ -61,7 +62,7 @@ export type UseChatPanelChromeModelInput = {
   /** Renders `[CHART]` tokens in assistant messages. */
   renderMessageChart?: () => React.ReactNode;
   /** Forwarded to `ChatChrome` when the thread is empty. */
-  emptyState?: ChatEmptyStateProps;
+  emptyState?: ChatEmptyStateConfig;
   /** MIME types / extensions for text-only chat attachments (filtered by uilib allowlist). */
   allowedAttachments?: readonly string[];
   /** When true, PDF drops are accepted and parsed to plain text. */
@@ -615,7 +616,7 @@ export function useChatPanelChromeModel({
     ],
   );
 
-  const submitPreset = async (preset: ChatPreset) => {
+  const submitPreset = useCallback(async (preset: ChatPreset) => {
     const script = preset.script;
     const scriptGraph = isPresetScriptGraph(script);
     const hasLinearScript = Array.isArray(script) && script.length > 0;
@@ -705,7 +706,25 @@ export function useChatPanelChromeModel({
     } finally {
       setLocalUiBusy(false);
     }
-  };
+  }, [
+    currentChatId,
+    endLocalDemoFlow,
+    handlePromptSubmit,
+    addMessage,
+    presetsWithFreeform,
+  ]);
+
+  const resolvedEmptyState = useMemo((): ChatEmptyStateProps | undefined => {
+    if (!emptyState) return undefined;
+    const { additionalContent, ...rest } = emptyState;
+    return {
+      ...rest,
+      additionalContent:
+        typeof additionalContent === 'function'
+          ? additionalContent({ submitPreset })
+          : additionalContent,
+    };
+  }, [emptyState, submitPreset]);
 
   const activeScript = currentChatId
     ? scriptByChatId[currentChatId]
@@ -1017,7 +1036,7 @@ export function useChatPanelChromeModel({
     onPromptSubmit: handlePromptSubmit,
     onChatDeleted: endLocalDemoFlow,
     promptPrefill: promptLinkPrefill,
-    emptyState,
+    emptyState: resolvedEmptyState,
     allowedAttachments,
     allowPdfAttachments,
     onAttachmentsDropped,

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

@@ -25,6 +25,11 @@ export type {
 export { ChatMessage } from './ChatMessage';
 export { ChatPrompt } from './ChatPrompt';
 export { ChatPresets } from './ChatPresets';
+export type {
+  ChatEmptyStateConfig,
+  ChatEmptyStateContext,
+  ChatEmptyStateProps,
+} from './ChatEmptyState/ChatEmptyState.types';
 export type {
   Chat as ChatType,
   ChatAttachmentDropItem,

package/src/components/ui/Dialog/Dialog.tsx

@@ -1,5 +1,11 @@
 import cn from 'classnames';
-import React, { useEffect, useId, useRef, useState } from 'react';
+import React, {
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
 import { createPortal } from 'react-dom';
 
 import {
@@ -8,6 +14,7 @@ import {
   CardFooter,
   CardHeader,
 } from '#uilib/components/ui/Card/Card';
+import { APP_MODAL_ID } from '#uilib/constants/appMount';
 import { XIcon } from '@phosphor-icons/react';
 
 import S from './Dialog.styl';
@@ -35,6 +42,9 @@ export function Dialog({
   width,
 }: DialogProps) {
   const [isMounted, setIsMounted] = useState(false);
+  const [modalContainer, setModalContainer] = useState<HTMLElement | null>(
+    null,
+  );
   const [isAnimating, setIsAnimating] = useState(false);
   const dialogRef = useRef<HTMLDivElement>(null);
   const triggerRef = useRef<HTMLElement | null>(null);
@@ -48,6 +58,10 @@ export function Dialog({
     return () => setIsMounted(false);
   }, []);
 
+  useLayoutEffect(() => {
+    setModalContainer(document.getElementById(APP_MODAL_ID));
+  }, []);
+
   // Handle open/close animations
   useEffect(() => {
     if (open) {
@@ -228,7 +242,10 @@ export function Dialog({
   return (
     <>
       {trigger && <div onClick={onTriggerClick}>{trigger}</div>}
-      {open && !disabled && createPortal(dialogContent, document.body)}
+      {open &&
+        !disabled &&
+        modalContainer &&
+        createPortal(dialogContent, modalContainer)}
     </>
   );
 }

package/src/constants/appMount.ts

@@ -0,0 +1,5 @@
+/** DOM id for the main React root mount (`#app-root`). */
+export const APP_ROOT_ID = 'app-root';
+
+/** DOM id for modal/dialog portals (`#app-modal`). */
+export const APP_MODAL_ID = 'app-modal';

package/src/docs/index.tsx

@@ -1,12 +1,13 @@
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 
+import { APP_ROOT_ID } from '#uilib/constants/appMount';
 import { DEFAULT_THEME_ACTIVE_COLOR } from '#uilib/docs/lib/theme';
 
 import App from './App/App';
 import { ThemeProvider } from './contexts/theme-context';
 
-const elem = document.getElementById('app-root') as HTMLElement;
+const elem = document.getElementById(APP_ROOT_ID) as HTMLElement;
 const root = createRoot(elem);
 
 root.render(