@sybilion/uilib 1.3.39 → 1.3.40

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

@@ -68,7 +68,7 @@ function ChatChrome({ showResizeHandle, resizeHandle, onClose, isEmpty, renderPr
     }, [isEmpty, messages.length]);
     return (jsxs("div", { className: S.root, children: [showResizeHandle && resizeHandle ? (jsx(PanelResizeHandle, { edge: "leading", isActive: resizeHandle.isActive, startWidthPx: resizeHandle.startWidthPx, getShellWidth: resizeHandle.getShellWidth, onDragWidth: resizeHandle.onDragWidth, onDragComplete: resizeHandle.onDragComplete, className: cn(SidebarStem.sidebarResizeHandle, S.chatResizeHandle) })) : null, jsx("div", { className: S.panelHeader, children: onClose ? (jsx(Button, { type: "button", variant: "ghost", icon: true, className: S.panelClose, "aria-label": "Close chat", onClick: onClose, children: jsx(X, { className: "size-4" }) })) : null }), jsxs("div", { className: S.content, children: [attachmentsDropzoneEnabled ? (jsx(DropZone, { accept: attachmentAccept, label: "Drop text files to attach", multiple: true, ghost: true, overlayScope: "container", disabled: promptBusy, className: S.attachmentDropzone, onFiles: handleAttachmentFiles })) : null, jsxs(Chat, { isEmpty: isEmpty, scopeId: effectiveScopeId, onChatDeleted: onChatDeleted, children: [isEmpty ? (jsxs(Fragment, { children: [jsx(Chat.EmptyState, { ...emptyState }), renderPresets('fixed')] })) : (jsx("div", { className: S.scrollWrapper, children: jsxs(Scroll, { y: true, yScrollbarClassName: S.scrollbar, className: S.scroll, innerClassName: S.scrollInner, offset: { y: { before: 56, after: 180 } }, fadeSize: "m", autoHide: true, ref: scrollRef, children: [messages.map((msg, index, arr) => {
                                             const isLast = index === arr.length - 1;
-                                            return (jsx(Chat.Message, { role: msg.role, text: msg.text, userTextFileAttachments: msg.userTextFileAttachments, onQuickReply: onQuickReply, suppressedQuickReplyKeys: suppressedQuickReplyKeys, quickReplyDisabled: isLoading, isLastMessage: isLast, scriptContinue: isLast && scriptContinueLabel
+                                            return (jsx(Chat.Message, { role: msg.role, text: msg.text, inProgress: msg.inProgress, userTextFileAttachments: msg.userTextFileAttachments, onQuickReply: onQuickReply, suppressedQuickReplyKeys: suppressedQuickReplyKeys, quickReplyDisabled: isLoading, isLastMessage: isLast, scriptContinue: isLast && scriptContinueLabel
                                                     ? { label: scriptContinueLabel }
                                                     : undefined, onScriptContinue: isLast && scriptContinueLabel
                                                     ? onScriptContinue

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

@@ -3,19 +3,20 @@ import cn from 'classnames';
 import { InteractiveContent } from '../../InteractiveContent/InteractiveContent.js';
 import 'lucide-react';
 import '../../InteractiveContent/InteractiveContent.styl.js';
+import { TextShimmer } from '../../TextShimmer/TextShimmer.js';
 import { MessageRole } from '../Chat.types.js';
 import { userTextFileAttachmentsFromMessage } from '../userTextFileAttachments.js';
 import { AgentMessageContent } from './AgentMessageContent.js';
 import S from './ChatMessage.styl.js';
 import { UserTextFileAttachmentBubble } from './UserTextFileAttachmentBubble.js';
 
-function ChatMessage({ role, text, userTextFileAttachments, onQuickReply, suppressedQuickReplyKeys, quickReplyDisabled, isLastMessage = true, scriptContinue, onScriptContinue, renderMessageChart, }) {
+function ChatMessage({ role, text, inProgress, userTextFileAttachments, onQuickReply, suppressedQuickReplyKeys, quickReplyDisabled, isLastMessage = true, scriptContinue, onScriptContinue, renderMessageChart, }) {
     const fileAttachments = userTextFileAttachmentsFromMessage({
         userTextFileAttachments,
     });
     const isAssistant = role === MessageRole.ASSISTANT;
     const isSystem = role === MessageRole.SYSTEM;
-    return (jsx("div", { className: cn(S.root, S[`role-${role}`]), children: isSystem ? (jsx("div", { className: S.text, children: text })) : isAssistant ? (jsx(AgentMessageContent, { text: text, onQuickReply: onQuickReply, suppressedQuickReplyKeys: suppressedQuickReplyKeys, quickReplyDisabled: quickReplyDisabled, isLastMessage: isLastMessage, scriptContinue: scriptContinue, onScriptContinue: onScriptContinue, renderMessageChart: renderMessageChart })) : (jsxs("div", { className: S.userColumn, children: [jsx("div", { className: S.text, children: jsx(InteractiveContent, { text: text }) }), fileAttachments.map(attachment => (jsx(UserTextFileAttachmentBubble, { attachment: attachment }, `${attachment.displayName}:${attachment.filename}`)))] })) }));
+    return (jsx("div", { className: cn(S.root, S[`role-${role}`]), children: isSystem ? (jsx("div", { className: S.text, children: inProgress ? jsx(TextShimmer, { as: "span", children: text }) : text })) : isAssistant ? (jsx(AgentMessageContent, { text: text, onQuickReply: onQuickReply, suppressedQuickReplyKeys: suppressedQuickReplyKeys, quickReplyDisabled: quickReplyDisabled, isLastMessage: isLastMessage, scriptContinue: scriptContinue, onScriptContinue: onScriptContinue, renderMessageChart: renderMessageChart })) : (jsxs("div", { className: S.userColumn, children: [jsx("div", { className: S.text, children: jsx(InteractiveContent, { text: text }) }), fileAttachments.map(attachment => (jsx(UserTextFileAttachmentBubble, { attachment: attachment }, `${attachment.displayName}:${attachment.filename}`)))] })) }));
 }
 
 export { ChatMessage };

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

@@ -200,6 +200,7 @@ function ChatProvider({ children, userSwitchKey, sendChatMessage: sendChatMessag
             ...(attachments?.length
                 ? { userTextFileAttachments: attachments }
                 : {}),
+            ...(options?.inProgress ? { inProgress: true } : {}),
         };
         setChats(prev => {
             const scopeChats = prev[scopeId] ?? [];

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

@@ -24,6 +24,8 @@ export interface Message {
     text: string;
     timestamp: number;
     userTextFileAttachments?: UserTextFileAttachment[];
+    /** SYSTEM-only: transient progress placeholder while work is in flight. */
+    inProgress?: boolean;
 }
 export interface Chat {
     session_id: string;
@@ -88,6 +90,7 @@ export interface ChatPromptProps {
 export interface ChatMessageProps {
     role: MessageRole;
     text: string;
+    inProgress?: boolean;
     userTextFileAttachments?: UserTextFileAttachment[];
     onQuickReply?: (branchKey: string, displayLabel: string) => void;
     /** Branch keys already taken (e.g. from chat history); hide quick-reply buttons for these. */

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

@@ -1,2 +1,2 @@
 import { type ChatMessageProps } from '../Chat.types';
-export declare function ChatMessage({ role, text, userTextFileAttachments, onQuickReply, suppressedQuickReplyKeys, quickReplyDisabled, isLastMessage, scriptContinue, onScriptContinue, renderMessageChart, }: ChatMessageProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatMessage({ role, text, inProgress, userTextFileAttachments, onQuickReply, suppressedQuickReplyKeys, quickReplyDisabled, isLastMessage, scriptContinue, onScriptContinue, renderMessageChart, }: ChatMessageProps): import("react/jsx-runtime").JSX.Element;

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

@@ -5,6 +5,8 @@ export type SendChatMessageFn = (message: string, targetChatId: string) => Promi
 export type { ChatSendMessagePayload, UserTextFileAttachment, } from '#uilib/components/ui/Chat/Chat.types';
 export type AddChatMessageOptions = {
     userTextFileAttachments?: UserTextFileAttachment[];
+    /** SYSTEM-only: mark as transient progress placeholder (shimmer until removed). */
+    inProgress?: boolean;
 };
 export interface ChatContextType {
     /** Returns the new session id, or undefined if no user / not created. */

package/package.json

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

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

@@ -33,6 +33,8 @@ export interface Message {
   text: string;
   timestamp: number;
   userTextFileAttachments?: UserTextFileAttachment[];
+  /** SYSTEM-only: transient progress placeholder while work is in flight. */
+  inProgress?: boolean;
 }
 
 export interface Chat {
@@ -103,6 +105,7 @@ export interface ChatPromptProps {
 export interface ChatMessageProps {
   role: MessageRole;
   text: string;
+  inProgress?: boolean;
   userTextFileAttachments?: UserTextFileAttachment[];
   onQuickReply?: (branchKey: string, displayLabel: string) => void;
   /** Branch keys already taken (e.g. from chat history); hide quick-reply buttons for these. */

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

@@ -199,6 +199,7 @@ export function ChatChrome({
                       key={msg.id}
                       role={msg.role}
                       text={msg.text}
+                      inProgress={msg.inProgress}
                       userTextFileAttachments={msg.userTextFileAttachments}
                       onQuickReply={onQuickReply}
                       suppressedQuickReplyKeys={suppressedQuickReplyKeys}

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

@@ -1,6 +1,7 @@
 import cn from 'classnames';
 
 import { InteractiveContent } from '#uilib/components/ui/InteractiveContent';
+import { TextShimmer } from '#uilib/components/ui/TextShimmer';
 
 import { type ChatMessageProps, MessageRole } from '../Chat.types';
 import { userTextFileAttachmentsFromMessage } from '../userTextFileAttachments';
@@ -11,6 +12,7 @@ import { UserTextFileAttachmentBubble } from './UserTextFileAttachmentBubble';
 export function ChatMessage({
   role,
   text,
+  inProgress,
   userTextFileAttachments,
   onQuickReply,
   suppressedQuickReplyKeys,
@@ -29,7 +31,9 @@ export function ChatMessage({
   return (
     <div className={cn(S.root, S[`role-${role}`])}>
       {isSystem ? (
-        <div className={S.text}>{text}</div>
+        <div className={S.text}>
+          {inProgress ? <TextShimmer as="span">{text}</TextShimmer> : text}
+        </div>
       ) : isAssistant ? (
         <AgentMessageContent
           text={text}

package/src/contexts/chat-context.tsx

@@ -35,6 +35,8 @@ const CHAT_SCOPE_IDS_REGISTRY_KEY = 'chat-scope-ids';
 
 export type AddChatMessageOptions = {
   userTextFileAttachments?: UserTextFileAttachment[];
+  /** SYSTEM-only: mark as transient progress placeholder (shimmer until removed). */
+  inProgress?: boolean;
 };
 
 export interface ChatContextType {
@@ -326,6 +328,7 @@ export function ChatProvider({
         ...(attachments?.length
           ? { userTextFileAttachments: attachments }
           : {}),
+        ...(options?.inProgress ? { inProgress: true } : {}),
       };
 
       setChats(prev => {

package/src/docs/pages/ChatSlashCommandsPage.tsx

@@ -31,18 +31,25 @@ const DOCS_SAMPLE_SLASH_ITEMS: SlashCommandItem[] = [
 const SAMPLE_COMMAND_REPLY_TEXT =
   'Sample command ran via `onSlashItemCommand` — composer cleared, no mention inserted.';
 
-const ASSISTANT_REPLY_TEXT =
-  'Demo reply for a normal message. Slash picks with a custom handler skip mention insert.';
+const SAMPLE_COMMAND_PROGRESS_TEXT = 'Running sample command…';
 
-function makeMessage(role: MessageRole, text: string): Message {
+function makeMessage(
+  role: MessageRole,
+  text: string,
+  options?: { inProgress?: boolean },
+): Message {
   return {
     id: crypto.randomUUID(),
     role,
     text,
     timestamp: Date.now(),
+    ...(options?.inProgress ? { inProgress: true } : {}),
   };
 }
 
+const ASSISTANT_REPLY_TEXT =
+  'Demo reply for a normal message. Slash picks with a custom handler skip mention insert.';
+
 export default function ChatSlashCommandsPage() {
   const [messages, setMessages] = useState<Message[]>([]);
   const [isLoading, setIsLoading] = useState(false);
@@ -63,10 +70,30 @@ export default function ChatSlashCommandsPage() {
     messages[messages.length - 1]?.role === MessageRole.USER;
 
   const runSampleCommand = useCallback(() => {
+    const progressId = crypto.randomUUID();
+    setIsLoading(true);
     setMessages(prev => [
       ...prev,
-      makeMessage(MessageRole.ASSISTANT, SAMPLE_COMMAND_REPLY_TEXT),
+      {
+        id: progressId,
+        role: MessageRole.SYSTEM,
+        text: SAMPLE_COMMAND_PROGRESS_TEXT,
+        timestamp: Date.now(),
+        inProgress: true,
+      },
     ]);
+
+    if (replyTimeoutRef.current != null) {
+      clearTimeout(replyTimeoutRef.current);
+    }
+    replyTimeoutRef.current = setTimeout(() => {
+      replyTimeoutRef.current = null;
+      setMessages(prev => [
+        ...prev.filter(m => m.id !== progressId),
+        makeMessage(MessageRole.ASSISTANT, SAMPLE_COMMAND_REPLY_TEXT),
+      ]);
+      setIsLoading(false);
+    }, 1200);
   }, []);
 
   const onSlashItemCommand = useCallback(
@@ -113,7 +140,7 @@ export default function ChatSlashCommandsPage() {
       <AppPageHeader
         breadcrumbs={[{ label: 'Chat' }, { label: 'Chat slash commands' }]}
         title="Chat slash commands"
-        subheader={`Slash palette uses TipTap Mention with "/" as the trigger. Pass slashCommandItems from the app; optional onSlashItemCommand can clear the composer and run an action instead of inserting a mention.`}
+        subheader={`Slash palette uses TipTap Mention with "/" as the trigger. Pass slashCommandItems from the app; optional onSlashItemCommand can clear the composer and run an action instead of inserting a mention. Long-running handlers can append a SYSTEM message with inProgress while work is in flight, then remove it when done.`}
         actions={
           <DocsHeaderActions slashCommandItems={DOCS_SAMPLE_SLASH_ITEMS} />
         }
@@ -127,8 +154,10 @@ export default function ChatSlashCommandsPage() {
           shell below: scrolling history, empty state, disclaimer, composer.
           Type <kbd className="font-mono">/</kbd> at line start or after a
           space; pick <kbd className="font-mono">sample-command</kbd> to run the
-          custom handler, or send{' '}
-          <kbd className="font-mono">/sample-command</kbd> with Enter.
+          custom handler (shows a transient{' '}
+          <kbd className="font-mono">inProgress</kbd> shimmer while the demo
+          action runs), or send <kbd className="font-mono">/sample-command</kbd>{' '}
+          with Enter.
         </p>
         <ChatChrome
           showResizeHandle={false}
@@ -156,7 +185,7 @@ export default function ChatSlashCommandsPage() {
           emptyState={{
             title: 'Try a slash command',
             description:
-              'Pick sample-command from the palette or send /sample-command — onSlashItemCommand clears the composer and runs the demo action.',
+              'Pick sample-command from the palette or send /sample-command — onSlashItemCommand clears the composer, shows an inProgress placeholder, then posts the demo reply.',
           }}
         />
       </PageContentSection>