@sybilion/uilib 1.3.76 → 1.3.77

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

@@ -53,22 +53,30 @@ function ChatChrome({ showResizeHandle, resizeHandle, onClose, isEmpty, renderPr
     useEffect(() => {
         if (isEmpty)
             return;
-        const scrollToBottom = () => {
+        const scrollToBottom = (behavior) => {
             const inner = scrollRef.current?.innerElem;
-            if (inner) {
-                inner.scrollTo({
-                    top: inner.scrollHeight + 1000,
-                    behavior: 'smooth',
-                });
-            }
+            if (!inner)
+                return;
+            inner.scrollTo({
+                top: inner.scrollHeight + 1000,
+                behavior,
+            });
         };
-        const inner = scrollRef.current?.innerElem;
-        if (inner)
-            setTimeout(scrollToBottom, 100);
-    }, [isEmpty, messages.length]);
+        const behavior = loadingLabel ? 'instant' : 'smooth';
+        const frameId = requestAnimationFrame(() => {
+            requestAnimationFrame(() => scrollToBottom(behavior));
+        });
+        return () => cancelAnimationFrame(frameId);
+    }, [
+        isEmpty,
+        messages.length,
+        loadingLabel,
+        showInlinePresets,
+        showSyntheticBranchButtons,
+    ]);
     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: promptDisabled, className: S.attachmentDropzone, onFiles: handleAttachmentFiles })) : null, jsxs(Chat, { isEmpty: isEmpty, scopeId: effectiveScopeId, onChatDeleted: onChatDeleted, onNewChat: onNewChat, 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, inProgress: msg.inProgress, 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, quickReplyHidden: Boolean(loadingLabel), isLastMessage: isLast, scriptContinue: isLast && scriptContinueLabel
                                                     ? { label: scriptContinueLabel }
                                                     : undefined, onScriptContinue: isLast && scriptContinueLabel
                                                     ? onScriptContinue

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

@@ -13,7 +13,7 @@ import S from './ChatMessage.styl.js';
 import { DocIcon } from './icons/DocIcon.js';
 import { XlsIcon } from './icons/XlsIcon.js';
 
-function AgentMessageContent({ text, onQuickReply, suppressedQuickReplyKeys, quickReplyDisabled, isLastMessage = true, scriptContinue, onScriptContinue, renderMessageChart, }) {
+function AgentMessageContent({ text, onQuickReply, suppressedQuickReplyKeys, quickReplyDisabled, quickReplyHidden, isLastMessage = true, scriptContinue, onScriptContinue, renderMessageChart, }) {
     const [showRaw, setShowRaw] = useState(false);
     const parts = useMemo(() => {
         // Convert markdown tables to HTML first
@@ -97,7 +97,7 @@ function AgentMessageContent({ text, onQuickReply, suppressedQuickReplyKeys, qui
                 const displayLabel = pipeIdx >= 0 ? inner.slice(0, pipeIdx).trim() : inner;
                 const branchKey = pipeIdx >= 0 ? inner.slice(pipeIdx + 1).trim() : inner;
                 if (branchKey && displayLabel) {
-                    const suppressed = suppressedQuickReplyKeys?.has(branchKey);
+                    const suppressed = quickReplyHidden || suppressedQuickReplyKeys?.has(branchKey);
                     if (!suppressed && onQuickReply) {
                         result.push(jsx("span", { className: S.quickReplyWrap, children: jsxs(Button, { type: "button", variant: "outline", size: "sm", disabled: quickReplyDisabled, onClick: () => onQuickReply(branchKey, displayLabel), children: [jsx(PaperPlaneRightIcon, {}), displayLabel] }) }, `quick-${match.index}`));
                     }
@@ -121,10 +121,12 @@ function AgentMessageContent({ text, onQuickReply, suppressedQuickReplyKeys, qui
         onQuickReply,
         suppressedQuickReplyKeys,
         quickReplyDisabled,
+        quickReplyHidden,
         isLastMessage,
         renderMessageChart,
     ]);
     return (jsxs("div", { className: S.text, children: [showRaw ? text : parts, !showRaw &&
+                !quickReplyHidden &&
                 isLastMessage &&
                 scriptContinue &&
                 onScriptContinue &&

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

@@ -10,13 +10,13 @@ import { AgentMessageContent } from './AgentMessageContent.js';
 import S from './ChatMessage.styl.js';
 import { UserTextFileAttachmentBubble } from './UserTextFileAttachmentBubble.js';
 
-function ChatMessage({ role, text, inProgress, userTextFileAttachments, onQuickReply, suppressedQuickReplyKeys, quickReplyDisabled, isLastMessage = true, scriptContinue, onScriptContinue, renderMessageChart, }) {
+function ChatMessage({ role, text, inProgress, userTextFileAttachments, onQuickReply, suppressedQuickReplyKeys, quickReplyDisabled, quickReplyHidden, 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: 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}`)))] })) }));
+    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, quickReplyHidden: quickReplyHidden, 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/components/ui/Chat/ChatSheet/useChatPanelChromeModel.js

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import { MessageRole } from '../Chat.types.js';
 import { isGraphIntakeAssistantStepComplete, matchUserTextToQuickReply, isPresetScriptGraph, branchesFromPresetScriptGraph, parseScriptLine, textHasQuickReplyMarkers, branchKeysUsedFromChatHistory, branchKeysUsedByUserMessages, extractQuickReplyLabelKeyPairsFromText, entryBranchKeyBeforeLastAssistant } from '../ChatMessage/presetScript.js';
-import { displayTextFromSendPayload, buildChatSendMessagePayload, loadingLabelFromSendPayload } from '../buildChatSendMessagePayload.js';
+import { loadingLabelFromSendPayload, displayTextFromSendPayload, buildChatSendMessagePayload } from '../buildChatSendMessagePayload.js';
 import { usedPresetIdsFromMessages } from '../chat-preset-utils.js';
 import { useChatsForScopeId, useChat, useChatOutboundPending, useSyncChatPanelBusy, isChatEmpty } from '../../../../contexts/chat-context.js';
 import { shellFitsSidebarsLayout } from '../../../../hooks/panelWidth.js';
@@ -18,7 +18,7 @@ import { shouldOpenChatFromUrl, shouldHealChatShellDesync, shouldCloseStaleLocal
 /** Fallback when `scopeId` prop omitted; apps should pass an explicit composite scope (e.g. `${userId}-dashboard`). */
 const NO_SCOPE_FALLBACK = '__uilib_chat_scope_unset__';
 const SCRIPT_STEP_DELAY_MS = 1200;
-const CHAT_NEW_SHORTCUT_KEY = '0';
+const CHAT_NEW_SHORTCUT_KEY = 'o';
 const CHAT_QUERY_PARAM = 'chat';
 const CHAT_OPEN_VALUE = 'open';
 const PROMPT_QUERY_PARAM = 'prompt';
@@ -246,11 +246,12 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
     }, []);
     useEvent({
         event: 'keydown',
+        isCapture: true,
         callback: (e) => {
             const ke = e;
-            if (ke.key !== CHAT_NEW_SHORTCUT_KEY ||
+            if (ke.key.toLowerCase() !== CHAT_NEW_SHORTCUT_KEY ||
                 !(ke.metaKey || ke.ctrlKey) ||
-                ke.shiftKey ||
+                !ke.shiftKey ||
                 ke.altKey) {
                 return;
             }
@@ -333,8 +334,14 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
                 if (transformSendPayload) {
                     payload = await transformSendPayload(displayLabel, undefined, displayLabel);
                 }
-                const assistantResponse = await sendMessage(payload);
-                onMessage?.(displayTextFromSendPayload(payload), assistantResponse);
+                setOutboundLoadingLabel(loadingLabelFromSendPayload(payload));
+                try {
+                    const assistantResponse = await sendMessage(payload);
+                    onMessage?.(displayTextFromSendPayload(payload), assistantResponse);
+                }
+                finally {
+                    setOutboundLoadingLabel(undefined);
+                }
             }
             catch (error) {
                 logger.error('Error sending chat message:', error);
@@ -865,12 +872,15 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
     }, [usedBranchSet, lastAssistantQuickPairs, entryBranchKeyBeforeLast]);
     const unusedBranchKeys = allBranchKeys.filter(k => !usedBranchSet.has(k));
     const unsuppressedInlineKeysOnLast = useMemo(() => lastAssistantQuickPairs.filter(p => !suppressedQuickReplyKeys.has(p.key)), [lastAssistantQuickPairs, suppressedQuickReplyKeys]);
-    const showSyntheticBranchButtons = lastMsg?.role === MessageRole.ASSISTANT &&
+    const hideChatChromeDuringOutboundAction = Boolean(outboundLoadingLabel);
+    const showSyntheticBranchButtons = !hideChatChromeDuringOutboundAction &&
+        lastMsg?.role === MessageRole.ASSISTANT &&
         !linearScriptActive &&
         graphActive &&
         (!lastHasQuickMarkers || unsuppressedInlineKeysOnLast.length === 0) &&
         unusedBranchKeys.length > 0;
-    const showInlinePresets = Boolean(presetsWithFreeform?.length) &&
+    const showInlinePresets = !hideChatChromeDuringOutboundAction &&
+        Boolean(presetsWithFreeform?.length) &&
         lastMsg?.role === MessageRole.ASSISTANT &&
         !linearScriptActive &&
         (!graphActive || (!lastHasQuickMarkers && unusedBranchKeys.length === 0));

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

@@ -100,6 +100,8 @@ export interface ChatMessageProps {
     /** Branch keys already taken (e.g. from chat history); hide quick-reply buttons for these. */
     suppressedQuickReplyKeys?: ReadonlySet<string>;
     quickReplyDisabled?: boolean;
+    /** Hide bracket quick-reply buttons (e.g. while a custom outbound status is shown). */
+    quickReplyHidden?: boolean;
     /** When false, bracket quick-replies render as plain text (no button). */
     isLastMessage?: boolean;
     /** Preset script continuation (last message only); not sent to LLM. */

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

@@ -1,9 +1,10 @@
 import { type ReactNode } from 'react';
-export declare function AgentMessageContent({ text, onQuickReply, suppressedQuickReplyKeys, quickReplyDisabled, isLastMessage, scriptContinue, onScriptContinue, renderMessageChart, }: {
+export declare function AgentMessageContent({ text, onQuickReply, suppressedQuickReplyKeys, quickReplyDisabled, quickReplyHidden, isLastMessage, scriptContinue, onScriptContinue, renderMessageChart, }: {
     text: string;
     onQuickReply?: (branchKey: string, displayLabel: string) => void;
     suppressedQuickReplyKeys?: ReadonlySet<string>;
     quickReplyDisabled?: boolean;
+    quickReplyHidden?: boolean;
     isLastMessage?: boolean;
     scriptContinue?: {
         label: string;

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, inProgress, 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, quickReplyHidden, isLastMessage, scriptContinue, onScriptContinue, renderMessageChart, }: ChatMessageProps): import("react/jsx-runtime").JSX.Element;

package/package.json

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

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

@@ -115,6 +115,8 @@ export interface ChatMessageProps {
   /** Branch keys already taken (e.g. from chat history); hide quick-reply buttons for these. */
   suppressedQuickReplyKeys?: ReadonlySet<string>;
   quickReplyDisabled?: boolean;
+  /** Hide bracket quick-reply buttons (e.g. while a custom outbound status is shown). */
+  quickReplyHidden?: boolean;
   /** When false, bracket quick-replies render as plain text (no button). */
   isLastMessage?: boolean;
   /** Preset script continuation (last message only); not sent to LLM. */

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

@@ -118,19 +118,28 @@ export function ChatChrome({
   useEffect(() => {
     if (isEmpty) return;
 
-    const scrollToBottom = () => {
+    const scrollToBottom = (behavior: ScrollBehavior) => {
       const inner = scrollRef.current?.innerElem as HTMLDivElement | undefined;
-      if (inner) {
-        inner.scrollTo({
-          top: inner.scrollHeight + 1000,
-          behavior: 'smooth',
-        });
-      }
+      if (!inner) return;
+      inner.scrollTo({
+        top: inner.scrollHeight + 1000,
+        behavior,
+      });
     };
 
-    const inner = scrollRef.current?.innerElem as HTMLDivElement | undefined;
-    if (inner) setTimeout(scrollToBottom, 100);
-  }, [isEmpty, messages.length]);
+    const behavior: ScrollBehavior = loadingLabel ? 'instant' : 'smooth';
+    const frameId = requestAnimationFrame(() => {
+      requestAnimationFrame(() => scrollToBottom(behavior));
+    });
+
+    return () => cancelAnimationFrame(frameId);
+  }, [
+    isEmpty,
+    messages.length,
+    loadingLabel,
+    showInlinePresets,
+    showSyntheticBranchButtons,
+  ]);
 
   return (
     <div className={S.root}>
@@ -207,6 +216,7 @@ export function ChatChrome({
                       onQuickReply={onQuickReply}
                       suppressedQuickReplyKeys={suppressedQuickReplyKeys}
                       quickReplyDisabled={isLoading}
+                      quickReplyHidden={Boolean(loadingLabel)}
                       isLastMessage={isLast}
                       scriptContinue={
                         isLast && scriptContinueLabel

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

@@ -18,6 +18,7 @@ export function AgentMessageContent({
   onQuickReply,
   suppressedQuickReplyKeys,
   quickReplyDisabled,
+  quickReplyHidden,
   isLastMessage = true,
   scriptContinue,
   onScriptContinue,
@@ -27,6 +28,7 @@ export function AgentMessageContent({
   onQuickReply?: (branchKey: string, displayLabel: string) => void;
   suppressedQuickReplyKeys?: ReadonlySet<string>;
   quickReplyDisabled?: boolean;
+  quickReplyHidden?: boolean;
   isLastMessage?: boolean;
   scriptContinue?: { label: string };
   onScriptContinue?: () => void;
@@ -156,7 +158,8 @@ export function AgentMessageContent({
         const branchKey =
           pipeIdx >= 0 ? inner.slice(pipeIdx + 1).trim() : inner;
         if (branchKey && displayLabel) {
-          const suppressed = suppressedQuickReplyKeys?.has(branchKey);
+          const suppressed =
+            quickReplyHidden || suppressedQuickReplyKeys?.has(branchKey);
           if (!suppressed && onQuickReply) {
             result.push(
               <span key={`quick-${match.index}`} className={S.quickReplyWrap}>
@@ -201,6 +204,7 @@ export function AgentMessageContent({
     onQuickReply,
     suppressedQuickReplyKeys,
     quickReplyDisabled,
+    quickReplyHidden,
     isLastMessage,
     renderMessageChart,
   ]);
@@ -212,6 +216,7 @@ export function AgentMessageContent({
     >
       {showRaw ? text : parts}
       {!showRaw &&
+        !quickReplyHidden &&
         isLastMessage &&
         scriptContinue &&
         onScriptContinue &&

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

@@ -17,6 +17,7 @@ export function ChatMessage({
   onQuickReply,
   suppressedQuickReplyKeys,
   quickReplyDisabled,
+  quickReplyHidden,
   isLastMessage = true,
   scriptContinue,
   onScriptContinue,
@@ -40,6 +41,7 @@ export function ChatMessage({
           onQuickReply={onQuickReply}
           suppressedQuickReplyKeys={suppressedQuickReplyKeys}
           quickReplyDisabled={quickReplyDisabled}
+          quickReplyHidden={quickReplyHidden}
           isLastMessage={isLastMessage}
           scriptContinue={scriptContinue}
           onScriptContinue={onScriptContinue}

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

@@ -131,7 +131,7 @@ type PresetScriptState = {
 };
 
 const SCRIPT_STEP_DELAY_MS = 1200;
-const CHAT_NEW_SHORTCUT_KEY = '0';
+const CHAT_NEW_SHORTCUT_KEY = 'o';
 
 const CHAT_QUERY_PARAM = 'chat';
 const CHAT_OPEN_VALUE = 'open';
@@ -450,12 +450,13 @@ export function useChatPanelChromeModel({
 
   useEvent({
     event: 'keydown',
+    isCapture: true,
     callback: (e: Event) => {
       const ke = e as KeyboardEvent;
       if (
-        ke.key !== CHAT_NEW_SHORTCUT_KEY ||
+        ke.key.toLowerCase() !== CHAT_NEW_SHORTCUT_KEY ||
         !(ke.metaKey || ke.ctrlKey) ||
-        ke.shiftKey ||
+        !ke.shiftKey ||
         ke.altKey
       ) {
         return;
@@ -554,8 +555,13 @@ export function useChatPanelChromeModel({
               displayLabel,
             );
           }
-          const assistantResponse = await sendMessage(payload);
-          onMessage?.(displayTextFromSendPayload(payload), assistantResponse);
+          setOutboundLoadingLabel(loadingLabelFromSendPayload(payload));
+          try {
+            const assistantResponse = await sendMessage(payload);
+            onMessage?.(displayTextFromSendPayload(payload), assistantResponse);
+          } finally {
+            setOutboundLoadingLabel(undefined);
+          }
         } catch (error) {
           logger.error('Error sending chat message:', error);
         }
@@ -1176,7 +1182,10 @@ export function useChatPanelChromeModel({
     [lastAssistantQuickPairs, suppressedQuickReplyKeys],
   );
 
+  const hideChatChromeDuringOutboundAction = Boolean(outboundLoadingLabel);
+
   const showSyntheticBranchButtons =
+    !hideChatChromeDuringOutboundAction &&
     lastMsg?.role === MessageRole.ASSISTANT &&
     !linearScriptActive &&
     graphActive &&
@@ -1184,6 +1193,7 @@ export function useChatPanelChromeModel({
     unusedBranchKeys.length > 0;
 
   const showInlinePresets =
+    !hideChatChromeDuringOutboundAction &&
     Boolean(presetsWithFreeform?.length) &&
     lastMsg?.role === MessageRole.ASSISTANT &&
     !linearScriptActive &&