@sybilion/uilib 1.3.81 → 1.3.83

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

@@ -15,7 +15,7 @@ import { filterToTextAttachments, isAttachmentsDropzoneEnabled, buildAcceptAttr
 import { extractChatAttachmentItems } from '../chatAttachmentExtract.js';
 import S from './ChatChrome.styl.js';
 
-function ChatChrome({ showResizeHandle, resizeHandle, onClose, isEmpty, renderPresets, messages, onQuickReply, suppressedQuickReplyKeys, isLoading, loadingLabel, scriptContinueLabel, onScriptContinue, renderMessageChart, renderSystemMessage, showSyntheticBranchButtons, unusedBranchKeys, showInlinePresets, isLastMessageFromUser, scrollRef, effectiveScopeId, onPromptSubmit, onChatDeleted, onNewChat, promptPrefill, footerClassName, emptyState, allowedAttachments, allowPdfAttachments = false, onAttachmentsDropped, slashCommandItems, onSlashItemCommand, promptPlaceholder, hideChatSelector = false, }) {
+function ChatChrome({ variant = 'default', showResizeHandle, resizeHandle, onClose, isEmpty, renderPresets, messages, onQuickReply, suppressedQuickReplyKeys, isLoading, loadingLabel, scriptContinueLabel, onScriptContinue, renderMessageChart, renderSystemMessage, showSyntheticBranchButtons, unusedBranchKeys, showInlinePresets, isLastMessageFromUser, scrollRef, effectiveScopeId, onPromptSubmit, onChatDeleted, onNewChat, promptPrefill, footerClassName, messageClassNames, messageTextClassNames, emptyState, allowedAttachments, allowPdfAttachments = false, onAttachmentsDropped, slashCommandItems, onSlashItemCommand, promptPlaceholder, hideChatSelector = false, }) {
     const filteredAllowedAttachments = useMemo(() => filterToTextAttachments(allowedAttachments), [allowedAttachments]);
     const attachmentsDropzoneEnabled = isAttachmentsDropzoneEnabled(allowedAttachments, allowPdfAttachments);
     const attachmentAccept = useMemo(() => buildAcceptAttr(filteredAllowedAttachments, allowPdfAttachments), [filteredAllowedAttachments, allowPdfAttachments]);
@@ -76,9 +76,24 @@ function ChatChrome({ showResizeHandle, resizeHandle, onClose, isEmpty, renderPr
         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, hideChatSelector: hideChatSelector, children: [isEmpty ? (jsx("div", { className: S.emptyBody, children: jsx(Chat.EmptyState, { ...emptyState }) })) : (jsx("div", { className: S.scrollWrapper, children: jsxs(Scroll, { y: true, yScrollbarClassName: S.scrollbar, className: S.scroll, innerClassName: S.scrollInner, offset: { y: { before: 56, after: 24 } }, fadeSize: "m", autoHide: true, ref: scrollRef, children: [messages.map((msg, index, arr) => {
+    const isClean = variant === 'clean';
+    return (jsxs("div", { className: cn(S.root, isClean && S.rootClean), 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, { className: isClean ? S.chatClean : undefined, isEmpty: isEmpty, scopeId: effectiveScopeId, onChatDeleted: onChatDeleted, onNewChat: onNewChat, hideChatSelector: hideChatSelector, children: [isEmpty ? (jsx("div", { className: S.emptyBody, children: jsx(Chat.EmptyState, { ...emptyState }) })) : (jsx("div", { className: S.scrollWrapper, children: jsxs(Scroll, { y: true, yScrollbarClassName: S.scrollbar, className: S.scroll, innerClassName: S.scrollInner, offset: { y: { before: 56, after: 24 } }, fadeSize: "m", autoHide: true, ref: scrollRef, children: [messages.map((msg, index, arr) => {
                                             const isLast = index === arr.length - 1;
-                                            return (jsx(Chat.Message, { message: msg, 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
+                                            const messageClassName = messageClassNames
+                                                ? {
+                                                    [MessageRole.USER]: messageClassNames.user,
+                                                    [MessageRole.ASSISTANT]: messageClassNames.assistant,
+                                                    [MessageRole.SYSTEM]: messageClassNames.system,
+                                                }[msg.role]
+                                                : undefined;
+                                            const messageTextClassName = messageTextClassNames
+                                                ? {
+                                                    [MessageRole.USER]: messageTextClassNames.user,
+                                                    [MessageRole.ASSISTANT]: messageTextClassNames.assistant,
+                                                    [MessageRole.SYSTEM]: messageTextClassNames.system,
+                                                }[msg.role]
+                                                : undefined;
+                                            return (jsx(Chat.Message, { message: msg, className: messageClassName, textClassName: messageTextClassName, 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
@@ -87,9 +102,9 @@ function ChatChrome({ showResizeHandle, resizeHandle, onClose, isEmpty, renderPr
                                                 const label = displayLabelForBranchKeyFromMessages(key, messages) ??
                                                     humanizeBranchKey(key);
                                                 return (jsx("span", { className: S.branchBtnWrap, children: jsxs(Button, { type: "button", variant: "outline", size: "sm", disabled: isLoading, onClick: () => onQuickReply(key, label), children: [jsx(PaperPlaneRightIcon, {}), label] }) }, key));
-                                            }) })) : null, showInlinePresets && renderPresets('inline'), isLoading &&
+                                            }) })) : null, showInlinePresets && renderPresets('inline', { variant }), isLoading &&
                                             !hasInProgressSystemMessage &&
-                                            (isLastMessageFromUser || loadingLabel) && (jsx(TextShimmer, { duration: 1, spread: 5, className: S.loader, children: loadingLabel ?? 'Thinking...' }))] }) })), isEmpty ? (jsx("div", { className: S.fixedPresets, children: renderPresets('fixed') })) : null, jsxs("div", { className: cn(S.footer, footerClassName), children: [isEmpty ? (jsx("div", { className: S.notice, children: "Forecast Assistant can make mistakes." })) : null, jsx(Chat.Prompt, { onSubmit: handlePromptSubmitWithAttachments, disabled: promptDisabled, attachments: pendingAttachments, onRemoveAttachment: handleRemoveAttachment, prefillMessage: promptPrefill ?? undefined, placeholder: promptPlaceholder, slashCommandItems: slashCommandItems, onSlashItemCommand: onSlashItemCommand, attachmentAccept: attachmentsDropzoneEnabled ? attachmentAccept : undefined, onAttachmentFiles: attachmentsDropzoneEnabled ? handleAttachmentFiles : undefined })] })] })] })] }));
+                                            (isLastMessageFromUser || loadingLabel) && (jsx(TextShimmer, { duration: 1, spread: 5, className: S.loader, children: loadingLabel ?? 'Thinking...' }))] }) })), isEmpty ? (jsx("div", { className: S.fixedPresets, children: renderPresets('fixed', { variant }) })) : null, isEmpty ? (jsx("div", { className: S.notice, children: "Forecast Assistant can make mistakes." })) : null, jsx("div", { className: cn(S.footer, isClean && S.footerClean, footerClassName), children: jsx(Chat.Prompt, { className: isClean ? S.promptClean : undefined, onSubmit: handlePromptSubmitWithAttachments, disabled: promptDisabled, attachments: pendingAttachments, onRemoveAttachment: handleRemoveAttachment, prefillMessage: promptPrefill ?? undefined, placeholder: promptPlaceholder, slashCommandItems: slashCommandItems, onSlashItemCommand: onSlashItemCommand, attachmentAccept: attachmentsDropzoneEnabled ? attachmentAccept : undefined, onAttachmentFiles: attachmentsDropzoneEnabled ? handleAttachmentFiles : undefined }) })] })] })] }));
 }
 
 export { ChatChrome };

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

@@ -1,7 +1,7 @@
 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)}}.ChatChrome_root__oh4Ay{border-radius:var(--p-4);display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;position:relative}.ChatChrome_chatResizeHandle__epfiT{background-color:var(--page-color);border-radius:2.5px;height:calc(100vh + 200px);left:0;opacity:0;position:absolute;right:auto;top:-200px;touch-action:none;transition:opacity .15s ease-out;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:5px;z-index:30}.ChatChrome_chatResizeHandle__epfiT:before{left:0;right:auto}.ChatChrome_panelHeader__Hkfit{align-items:center;display:flex;flex-shrink:0;justify-content:flex-end;min-height:70px;padding:var(--p-2) var(--p-3);position:absolute;width:100%;z-index:100}.ChatChrome_panelClose__DbKxz{flex-shrink:0}.ChatChrome_content__5qFEi{display:flex;flex:1;flex-direction:column;min-height:0;position:relative}.ChatChrome_attachmentDropzone__OC8UI{inset:0;position:absolute;z-index:200}.ChatChrome_scrollWrapper__m4HMu{flex:1;min-height:0;position:relative}.ChatChrome_scroll__oCxoJ{align-items:flex-end;height:100%;max-height:100%;max-width:100%;padding-bottom:var(--p-2);position:absolute;width:100%;z-index:3}.ChatChrome_scrollbar__Hu0aG{right:0!important}.ChatChrome_scrollInner__K9hIy{min-height:100%;padding-top:var(--p-10)}.ChatChrome_emptyBody__f2NE8{display:flex;flex:1;flex-direction:column;min-height:0;overflow:hidden}.ChatChrome_emptyBody__f2NE8>*{flex:1;min-height:0;overflow:auto}.ChatChrome_footer__a5Bpp{backdrop-filter:blur(30px);background-color:var(--background-alpha-800);border-top:1px solid var(--border);box-shadow:0 8px 24px 0 var(--background);display:flex;flex-direction:column;flex-shrink:0;position:relative;width:100%;z-index:50}.ChatChrome_fixedPresets__bONhR{flex-shrink:0;position:relative;width:100%;z-index:10}.ChatChrome_notice__JACIw{color:var(--muted-foreground);font-size:var(--text-xs);left:0;margin-bottom:var(--p-1);pointer-events:none;position:absolute;right:0;text-align:center;top:calc(var(--p-7)*-1)}@media (max-width:768px){.ChatChrome_notice__JACIw{font-size:10px}}.ChatChrome_loader__9-lnf{color:var(--muted-foreground);margin:var(--p-2) var(--p-6) var(--p-10)}.ChatChrome_branchRow__NMDNv{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--p-6);padding:0 var(--p-6);width:100%}.ChatChrome_branchBtnWrap__aOSVP{display:inline-flex;vertical-align:middle}";
-var S = {"root":"ChatChrome_root__oh4Ay","chatResizeHandle":"ChatChrome_chatResizeHandle__epfiT","panelHeader":"ChatChrome_panelHeader__Hkfit","panelClose":"ChatChrome_panelClose__DbKxz","content":"ChatChrome_content__5qFEi","attachmentDropzone":"ChatChrome_attachmentDropzone__OC8UI","scrollWrapper":"ChatChrome_scrollWrapper__m4HMu","scroll":"ChatChrome_scroll__oCxoJ","scrollbar":"ChatChrome_scrollbar__Hu0aG","scrollInner":"ChatChrome_scrollInner__K9hIy","emptyBody":"ChatChrome_emptyBody__f2NE8","footer":"ChatChrome_footer__a5Bpp","fixedPresets":"ChatChrome_fixedPresets__bONhR","notice":"ChatChrome_notice__JACIw","loader":"ChatChrome_loader__9-lnf","branchRow":"ChatChrome_branchRow__NMDNv","branchBtnWrap":"ChatChrome_branchBtnWrap__aOSVP"};
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.ChatChrome_root__oh4Ay{border-radius:var(--p-4);display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;position:relative}.ChatChrome_rootClean__WXM91{border-radius:0}.ChatChrome_chatResizeHandle__epfiT{background-color:var(--page-color);border-radius:2.5px;height:calc(100vh + 200px);left:0;opacity:0;position:absolute;right:auto;top:-200px;touch-action:none;transition:opacity .15s ease-out;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:5px;z-index:30}.ChatChrome_chatResizeHandle__epfiT:before{left:0;right:auto}.ChatChrome_panelHeader__Hkfit{align-items:center;display:flex;flex-shrink:0;justify-content:flex-end;min-height:70px;padding:var(--p-2) var(--p-3);position:absolute;width:100%;z-index:100}.ChatChrome_panelClose__DbKxz{flex-shrink:0}.ChatChrome_content__5qFEi{display:flex;flex:1;flex-direction:column;min-height:0;position:relative}.ChatChrome_chatClean__hM9yS{background-color:transparent}.ChatChrome_attachmentDropzone__OC8UI{inset:0;position:absolute;z-index:200}.ChatChrome_scrollWrapper__m4HMu{flex:1;min-height:0;position:relative}.ChatChrome_scroll__oCxoJ{align-items:flex-end;height:100%;max-height:100%;max-width:100%;padding-bottom:var(--p-2);position:absolute;width:100%;z-index:3}.ChatChrome_scrollbar__Hu0aG{right:0!important}.ChatChrome_scrollInner__K9hIy{min-height:100%;padding-top:var(--p-10)}.ChatChrome_emptyBody__f2NE8{display:flex;flex:1;flex-direction:column;min-height:0;overflow:hidden}.ChatChrome_emptyBody__f2NE8>*{flex:1;min-height:0;overflow:auto}.ChatChrome_footer__a5Bpp{backdrop-filter:blur(30px);background-color:var(--background-alpha-800);border-top:1px solid var(--border);box-shadow:0 8px 24px 0 var(--background);display:flex;flex-direction:column;flex-shrink:0;position:relative;width:100%;z-index:50}.ChatChrome_footerClean__xRDdB{backdrop-filter:none;background-color:transparent;border-top:none;border:1px solid var(--border);border-radius:var(--p-4);box-shadow:none}.ChatChrome_promptClean__Hv43Z{background-color:var(--background);border-radius:inherit}.ChatChrome_fixedPresets__bONhR,.ChatChrome_notice__JACIw{flex-shrink:0;position:relative;width:100%;z-index:10}.ChatChrome_notice__JACIw{color:var(--muted-foreground);font-size:var(--text-xs);margin-bottom:var(--p-1);pointer-events:none;text-align:center}@media (max-width:768px){.ChatChrome_notice__JACIw{font-size:10px}}.ChatChrome_loader__9-lnf{color:var(--muted-foreground);margin:var(--p-2) var(--p-6) var(--p-10)}.ChatChrome_branchRow__NMDNv{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--p-6);padding:0 var(--p-6);width:100%}.ChatChrome_branchBtnWrap__aOSVP{display:inline-flex;vertical-align:middle}";
+var S = {"root":"ChatChrome_root__oh4Ay","rootClean":"ChatChrome_rootClean__WXM91","chatResizeHandle":"ChatChrome_chatResizeHandle__epfiT","panelHeader":"ChatChrome_panelHeader__Hkfit","panelClose":"ChatChrome_panelClose__DbKxz","content":"ChatChrome_content__5qFEi","chatClean":"ChatChrome_chatClean__hM9yS","attachmentDropzone":"ChatChrome_attachmentDropzone__OC8UI","scrollWrapper":"ChatChrome_scrollWrapper__m4HMu","scroll":"ChatChrome_scroll__oCxoJ","scrollbar":"ChatChrome_scrollbar__Hu0aG","scrollInner":"ChatChrome_scrollInner__K9hIy","emptyBody":"ChatChrome_emptyBody__f2NE8","footer":"ChatChrome_footer__a5Bpp","footerClean":"ChatChrome_footerClean__xRDdB","promptClean":"ChatChrome_promptClean__Hv43Z","fixedPresets":"ChatChrome_fixedPresets__bONhR","notice":"ChatChrome_notice__JACIw","loader":"ChatChrome_loader__9-lnf","branchRow":"ChatChrome_branchRow__NMDNv","branchBtnWrap":"ChatChrome_branchBtnWrap__aOSVP"};
 styleInject(css_248z);
 
 export { S as default };

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

@@ -1,4 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
+import cn from 'classnames';
 import { useState, useMemo } from 'react';
 import { Button } from '../../Button/Button.js';
 import { InteractiveContent } from '../../InteractiveContent/InteractiveContent.js';
@@ -13,7 +14,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, quickReplyHidden, isLastMessage = true, scriptContinue, onScriptContinue, renderMessageChart, }) {
+function AgentMessageContent({ text, textClassName, onQuickReply, suppressedQuickReplyKeys, quickReplyDisabled, quickReplyHidden, isLastMessage = true, scriptContinue, onScriptContinue, renderMessageChart, }) {
     const [showRaw, setShowRaw] = useState(false);
     const parts = useMemo(() => {
         // Convert markdown tables to HTML first
@@ -125,7 +126,7 @@ function AgentMessageContent({ text, onQuickReply, suppressedQuickReplyKeys, qui
         isLastMessage,
         renderMessageChart,
     ]);
-    return (jsxs("div", { className: S.text, children: [showRaw ? text : parts, !showRaw &&
+    return (jsxs("div", { className: cn(S.text, textClassName), children: [showRaw ? text : parts, !showRaw &&
                 !quickReplyHidden &&
                 isLastMessage &&
                 scriptContinue &&

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, quickReplyHidden, isLastMessage = true, scriptContinue, onScriptContinue, renderMessageChart, message, renderSystemMessage, }) {
+function ChatMessage({ role, text, inProgress, userTextFileAttachments, onQuickReply, suppressedQuickReplyKeys, quickReplyDisabled, quickReplyHidden, isLastMessage = true, scriptContinue, onScriptContinue, renderMessageChart, message, renderSystemMessage, className, textClassName, }) {
     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 })) : renderSystemMessage && message ? (renderSystemMessage(message)) : (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}`)))] })) }));
+    return (jsx("div", { className: cn(S.root, S[`role-${role}`], className), children: isSystem ? (jsx("div", { className: cn(S.text, textClassName), children: inProgress ? (jsx(TextShimmer, { as: "span", children: text })) : renderSystemMessage && message ? (renderSystemMessage(message)) : (text) })) : isAssistant ? (jsx(AgentMessageContent, { text: text, textClassName: textClassName, 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: cn(S.text, textClassName && S.textCustom, textClassName), children: jsx(InteractiveContent, { text: text }) }), fileAttachments.map(attachment => (jsx(UserTextFileAttachmentBubble, { attachment: attachment }, `${attachment.displayName}:${attachment.filename}`)))] })) }));
 }
 
 export { ChatMessage };

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

@@ -1,7 +1,7 @@
 import styleInject from 'style-inject';
 
-var css_248z = ".ChatMessage_root__6rnsF{background:var(--bg-secondary);display:flex;flex-direction:column;gap:var(--p-1);padding:var(--p-4);padding-bottom:var(--p-1)}.ChatMessage_text__Y1XNR{color:var(--text-secondary);font-size:var(--text-sm);max-width:100%;min-width:0;overflow-wrap:anywhere;-webkit-user-select:text;-moz-user-select:text;user-select:text;width:-moz-fit-content;width:fit-content;word-break:break-word}.ChatMessage_role-assistant__wketE+.ChatMessage_role-assistant__wketE,.ChatMessage_role-system__g13OP+.ChatMessage_role-system__g13OP,.ChatMessage_role-user__u4JPV+.ChatMessage_role-user__u4JPV{padding-top:var(--p-1)}.ChatMessage_role-user__u4JPV{align-items:flex-end;max-width:100%;min-width:0}.ChatMessage_role-user__u4JPV .ChatMessage_userColumn__cQM6-{align-items:flex-end;display:flex;flex-direction:column;gap:var(--p-2);max-width:100%;min-width:0}.ChatMessage_role-user__u4JPV .ChatMessage_text__Y1XNR{background-color:var(--sb-slate-100);border-radius:var(--p-4);border-bottom-right-radius:0;box-sizing:border-box;overflow:hidden;padding:var(--p-3) var(--p-4);white-space:pre-wrap}.dark .ChatMessage_role-user__u4JPV .ChatMessage_text__Y1XNR{background-color:var(--sb-gray-900)}.ChatMessage_role-system__g13OP{align-items:center}.ChatMessage_role-system__g13OP .ChatMessage_text__Y1XNR{color:var(--muted-foreground);width:100%}.ChatMessage_role-assistant__wketE .ChatMessage_text__Y1XNR{width:100%}.ChatMessage_role-assistant__wketE h3{line-height:2.4}.ChatMessage_role-assistant__wketE h4{font-size:1.1em;font-weight:600;line-height:2.2}.ChatMessage_role-assistant__wketE .ChatMessage_bullet__6vAhq{display:inline-block;margin-left:4px;margin-right:6px}.ChatMessage_role-assistant__wketE .ChatMessage_bullet__6vAhq:before{color:var(--text-secondary);content:\"•\";display:inline-block}.ChatMessage_role-assistant__wketE .ChatMessage_scrollHorizontal__Rms9n{max-width:100%}.ChatMessage_role-assistant__wketE table{border:1px solid var(--border);border-collapse:collapse;border-radius:var(--p-2);border-spacing:0;margin:var(--p-4) 0;overflow:hidden}.ChatMessage_role-assistant__wketE table td,.ChatMessage_role-assistant__wketE table th{border:1px solid var(--border);min-width:100px;padding:var(--p-1)}.ChatMessage_role-assistant__wketE table th{text-align:left}.ChatMessage_role-assistant__wketE ol,.ChatMessage_role-assistant__wketE ul{padding-left:var(--p-4)}.ChatMessage_role-assistant__wketE ul{list-style-type:disc}.ChatMessage_role-assistant__wketE ol{list-style-type:decimal}.ChatMessage_role-assistant__wketE .ChatMessage_datasetAppLink__Pxy-T{align-items:center;border:1px dashed var(--sb-slate-300);border-radius:8px;color:var(--foreground);display:inline-flex;font-size:var(--text-xs);gap:6px;margin:1px;max-width:100%;padding:2px 6px 2px 4px;text-decoration:none;vertical-align:middle}.ChatMessage_role-assistant__wketE .ChatMessage_datasetAppLink__Pxy-T:hover{background-color:var(--sb-slate-50);border-color:var(--sb-slate-400);border-style:solid}.dark .ChatMessage_role-assistant__wketE .ChatMessage_datasetAppLink__Pxy-T{border-color:var(--sb-gray-600)}.dark .ChatMessage_role-assistant__wketE .ChatMessage_datasetAppLink__Pxy-T:hover{background-color:var(--sb-gray-900)}.ChatMessage_role-assistant__wketE .ChatMessage_datasetAppLinkLabel__PMU7e{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ChatMessage_role-assistant__wketE .ChatMessage_quickReplyWrap__1UFyD{display:inline-block;margin:var(--p-1) var(--p-1) var(--p-1) 0;vertical-align:middle;width:100%}.ChatMessage_role-assistant__wketE .ChatMessage_downloadButtons__RygM-{display:flex;gap:var(--p-2);margin-top:var(--p-4)}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCard__NsNRa{align-items:center;background-color:var(--background);border-radius:var(--p-3);box-shadow:0 0 0 1px var(--border);cursor:pointer;display:flex;gap:var(--p-4);margin-top:var(--p-3);padding:var(--p-3);padding-right:var(--p-4);transition:all .15s;width:-moz-fit-content;width:fit-content}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCard__NsNRa:hover{background-color:var(--sb-gray-50);border-color:var(--border)}.dark .ChatMessage_role-assistant__wketE .ChatMessage_downloadCard__NsNRa{background-color:var(--sb-gray-900);border-color:var(--border)}.dark .ChatMessage_role-assistant__wketE .ChatMessage_downloadCard__NsNRa:hover{background-color:var(--sb-gray-800)}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCardIcon__jkxDJ{align-items:center;border-radius:var(--p-2);display:flex;flex-shrink:0;height:32px;justify-content:center;width:32px}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCardContent__PTPwz{display:flex;flex:1;flex-direction:column;min-width:0}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCardTitle__K1wqr{font-size:var(--text-base);font-weight:600;line-height:1.4}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCardSubtitle__fVeF2{color:var(--muted-foreground);font-size:var(--text-sm);line-height:1.4}";
-var S = {"root":"ChatMessage_root__6rnsF","text":"ChatMessage_text__Y1XNR","role-user":"ChatMessage_role-user__u4JPV","role-assistant":"ChatMessage_role-assistant__wketE","role-system":"ChatMessage_role-system__g13OP","userColumn":"ChatMessage_userColumn__cQM6-","bullet":"ChatMessage_bullet__6vAhq","scrollHorizontal":"ChatMessage_scrollHorizontal__Rms9n","datasetAppLink":"ChatMessage_datasetAppLink__Pxy-T","datasetAppLinkLabel":"ChatMessage_datasetAppLinkLabel__PMU7e","quickReplyWrap":"ChatMessage_quickReplyWrap__1UFyD","downloadButtons":"ChatMessage_downloadButtons__RygM-","downloadCard":"ChatMessage_downloadCard__NsNRa","downloadCardIcon":"ChatMessage_downloadCardIcon__jkxDJ","downloadCardContent":"ChatMessage_downloadCardContent__PTPwz","downloadCardTitle":"ChatMessage_downloadCardTitle__K1wqr","downloadCardSubtitle":"ChatMessage_downloadCardSubtitle__fVeF2"};
+var css_248z = ".ChatMessage_root__6rnsF{background:var(--bg-secondary);display:flex;flex-direction:column;gap:var(--p-1);padding:var(--p-4);padding-bottom:var(--p-1)}.ChatMessage_text__Y1XNR{color:var(--text-secondary);font-size:var(--text-sm);max-width:100%;min-width:0;overflow-wrap:anywhere;-webkit-user-select:text;-moz-user-select:text;user-select:text;width:-moz-fit-content;width:fit-content;word-break:break-word}.ChatMessage_role-assistant__wketE+.ChatMessage_role-assistant__wketE,.ChatMessage_role-system__g13OP+.ChatMessage_role-system__g13OP,.ChatMessage_role-user__u4JPV+.ChatMessage_role-user__u4JPV{padding-top:var(--p-1)}.ChatMessage_role-user__u4JPV{align-items:flex-end;max-width:100%;min-width:0}.ChatMessage_role-user__u4JPV .ChatMessage_userColumn__cQM6-{align-items:flex-end;display:flex;flex-direction:column;gap:var(--p-2);max-width:100%;min-width:0}.ChatMessage_role-user__u4JPV .ChatMessage_text__Y1XNR{border-radius:var(--p-4);border-bottom-right-radius:0;box-sizing:border-box;overflow:hidden;padding:var(--p-3) var(--p-4);white-space:pre-wrap}.ChatMessage_role-user__u4JPV .ChatMessage_text__Y1XNR:not(.ChatMessage_textCustom__C8Tts){background-color:var(--sb-slate-100)}.dark .ChatMessage_role-user__u4JPV .ChatMessage_text__Y1XNR:not(.ChatMessage_textCustom__C8Tts){background-color:var(--sb-gray-900)}.ChatMessage_role-system__g13OP{align-items:center}.ChatMessage_role-system__g13OP .ChatMessage_text__Y1XNR{color:var(--muted-foreground);width:100%}.ChatMessage_role-assistant__wketE .ChatMessage_text__Y1XNR{width:100%}.ChatMessage_role-assistant__wketE h3{line-height:2.4}.ChatMessage_role-assistant__wketE h4{font-size:1.1em;font-weight:600;line-height:2.2}.ChatMessage_role-assistant__wketE .ChatMessage_bullet__6vAhq{display:inline-block;margin-left:4px;margin-right:6px}.ChatMessage_role-assistant__wketE .ChatMessage_bullet__6vAhq:before{color:var(--text-secondary);content:\"•\";display:inline-block}.ChatMessage_role-assistant__wketE .ChatMessage_scrollHorizontal__Rms9n{max-width:100%}.ChatMessage_role-assistant__wketE table{border:1px solid var(--border);border-collapse:collapse;border-radius:var(--p-2);border-spacing:0;margin:var(--p-4) 0;overflow:hidden}.ChatMessage_role-assistant__wketE table td,.ChatMessage_role-assistant__wketE table th{border:1px solid var(--border);min-width:100px;padding:var(--p-1)}.ChatMessage_role-assistant__wketE table th{text-align:left}.ChatMessage_role-assistant__wketE ol,.ChatMessage_role-assistant__wketE ul{padding-left:var(--p-4)}.ChatMessage_role-assistant__wketE ul{list-style-type:disc}.ChatMessage_role-assistant__wketE ol{list-style-type:decimal}.ChatMessage_role-assistant__wketE .ChatMessage_datasetAppLink__Pxy-T{align-items:center;border:1px dashed var(--sb-slate-300);border-radius:8px;color:var(--foreground);display:inline-flex;font-size:var(--text-xs);gap:6px;margin:1px;max-width:100%;padding:2px 6px 2px 4px;text-decoration:none;vertical-align:middle}.ChatMessage_role-assistant__wketE .ChatMessage_datasetAppLink__Pxy-T:hover{background-color:var(--sb-slate-50);border-color:var(--sb-slate-400);border-style:solid}.dark .ChatMessage_role-assistant__wketE .ChatMessage_datasetAppLink__Pxy-T{border-color:var(--sb-gray-600)}.dark .ChatMessage_role-assistant__wketE .ChatMessage_datasetAppLink__Pxy-T:hover{background-color:var(--sb-gray-900)}.ChatMessage_role-assistant__wketE .ChatMessage_datasetAppLinkLabel__PMU7e{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ChatMessage_role-assistant__wketE .ChatMessage_quickReplyWrap__1UFyD{display:inline-block;margin:var(--p-1) var(--p-1) var(--p-1) 0;vertical-align:middle;width:100%}.ChatMessage_role-assistant__wketE .ChatMessage_downloadButtons__RygM-{display:flex;gap:var(--p-2);margin-top:var(--p-4)}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCard__NsNRa{align-items:center;background-color:var(--background);border-radius:var(--p-3);box-shadow:0 0 0 1px var(--border);cursor:pointer;display:flex;gap:var(--p-4);margin-top:var(--p-3);padding:var(--p-3);padding-right:var(--p-4);transition:all .15s;width:-moz-fit-content;width:fit-content}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCard__NsNRa:hover{background-color:var(--sb-gray-50);border-color:var(--border)}.dark .ChatMessage_role-assistant__wketE .ChatMessage_downloadCard__NsNRa{background-color:var(--sb-gray-900);border-color:var(--border)}.dark .ChatMessage_role-assistant__wketE .ChatMessage_downloadCard__NsNRa:hover{background-color:var(--sb-gray-800)}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCardIcon__jkxDJ{align-items:center;border-radius:var(--p-2);display:flex;flex-shrink:0;height:32px;justify-content:center;width:32px}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCardContent__PTPwz{display:flex;flex:1;flex-direction:column;min-width:0}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCardTitle__K1wqr{font-size:var(--text-base);font-weight:600;line-height:1.4}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCardSubtitle__fVeF2{color:var(--muted-foreground);font-size:var(--text-sm);line-height:1.4}";
+var S = {"root":"ChatMessage_root__6rnsF","text":"ChatMessage_text__Y1XNR","role-user":"ChatMessage_role-user__u4JPV","role-assistant":"ChatMessage_role-assistant__wketE","role-system":"ChatMessage_role-system__g13OP","userColumn":"ChatMessage_userColumn__cQM6-","textCustom":"ChatMessage_textCustom__C8Tts","bullet":"ChatMessage_bullet__6vAhq","scrollHorizontal":"ChatMessage_scrollHorizontal__Rms9n","datasetAppLink":"ChatMessage_datasetAppLink__Pxy-T","datasetAppLinkLabel":"ChatMessage_datasetAppLinkLabel__PMU7e","quickReplyWrap":"ChatMessage_quickReplyWrap__1UFyD","downloadButtons":"ChatMessage_downloadButtons__RygM-","downloadCard":"ChatMessage_downloadCard__NsNRa","downloadCardIcon":"ChatMessage_downloadCardIcon__jkxDJ","downloadCardContent":"ChatMessage_downloadCardContent__PTPwz","downloadCardTitle":"ChatMessage_downloadCardTitle__K1wqr","downloadCardSubtitle":"ChatMessage_downloadCardSubtitle__fVeF2"};
 styleInject(css_248z);
 
 export { S as default };

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

@@ -4,7 +4,7 @@ import { useState, useEffect } from 'react';
 import { Button } from '../../Button/Button.js';
 import S from './ChatPresets.styl.js';
 
-function ChatPresets({ chatId, items, usedItemIds = [], layout = 'fixed', onSelect, onItemUsed, }) {
+function ChatPresets({ chatId, items, usedItemIds = [], layout = 'fixed', variant = 'default', onSelect, onItemUsed, }) {
     const [localUsedItems, setLocalUsedItems] = useState([]);
     useEffect(() => {
         setLocalUsedItems([]);
@@ -13,7 +13,7 @@ function ChatPresets({ chatId, items, usedItemIds = [], layout = 'fixed', onSele
     const availableItems = items.filter(item => !usedItems.includes(item.id));
     if (availableItems.length === 0)
         return null;
-    return (jsx("div", { className: layout === 'inline' ? S.inlineRoot : S.root, children: jsx("div", { className: cn(S.inner, layout === 'inline' && S.innerInline), children: availableItems.map(preset => (jsx(Button, { type: "button", variant: "outline", size: "sm", className: cn(S.item), onClick: () => {
+    return (jsx("div", { className: layout === 'inline' ? S.inlineRoot : S.root, children: jsx("div", { className: cn(S.inner, layout === 'inline' && S.innerInline, variant === 'clean' && S.innerClean), children: availableItems.map(preset => (jsx(Button, { type: "button", variant: "outline", size: "sm", className: cn(S.item), onClick: () => {
                     onSelect?.(preset);
                     onItemUsed?.(preset.id);
                     setLocalUsedItems(prev => [...prev, preset.id]);

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

@@ -1,7 +1,7 @@
 import styleInject from 'style-inject';
 
-var css_248z = ".ChatPresets_root__Cj42o{flex-shrink:0;position:relative;width:100%}.ChatPresets_inlineRoot__WXVnu{margin-top:var(--p-6);position:relative;width:100%}.ChatPresets_inner__h14-q{background-color:var(--background);display:flex;flex-wrap:wrap;gap:8px;min-width:0;padding:var(--p-2) var(--p-6) var(--p-3)}.ChatPresets_innerInline__iPM2b{background-color:transparent}.ChatPresets_item__LfX5b{flex:0 1 auto;font-size:var(--text-xs);height:auto;line-height:1.4;max-width:min(300px,100%);min-height:auto;min-width:0;overflow-wrap:anywhere;padding:var(--p-3);text-align:left;white-space:break-spaces!important}";
-var S = {"root":"ChatPresets_root__Cj42o","inlineRoot":"ChatPresets_inlineRoot__WXVnu","inner":"ChatPresets_inner__h14-q","innerInline":"ChatPresets_innerInline__iPM2b","item":"ChatPresets_item__LfX5b"};
+var css_248z = ".ChatPresets_root__Cj42o{flex-shrink:0;position:relative;width:100%}.ChatPresets_inlineRoot__WXVnu{margin-top:var(--p-6);position:relative;width:100%}.ChatPresets_inner__h14-q{background-color:var(--background);display:flex;flex-wrap:wrap;gap:8px;min-width:0;padding:var(--p-2) var(--p-6) var(--p-3)}.ChatPresets_innerClean__U-sL0,.ChatPresets_innerInline__iPM2b{background-color:transparent}.ChatPresets_item__LfX5b{flex:0 1 auto;font-size:var(--text-xs);height:auto;line-height:1.4;max-width:min(300px,100%);min-height:auto;min-width:0;overflow-wrap:anywhere;padding:var(--p-3);text-align:left;white-space:break-spaces!important}";
+var S = {"root":"ChatPresets_root__Cj42o","inlineRoot":"ChatPresets_inlineRoot__WXVnu","inner":"ChatPresets_inner__h14-q","innerInline":"ChatPresets_innerInline__iPM2b","innerClean":"ChatPresets_innerClean__U-sL0","item":"ChatPresets_item__LfX5b"};
 styleInject(css_248z);
 
 export { S as default };

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

@@ -813,10 +813,10 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
         sidebarWidthPx,
         chatWidthPx,
     ]);
-    const renderPresets = (layout = 'fixed') => {
+    const renderPresets = (layout = 'fixed', options) => {
         if (!presetsWithFreeform?.length)
             return null;
-        return (jsx(Chat.Presets, { chatId: currentChatId ?? '', items: presetsWithFreeform, layout: layout, usedItemIds: usedPresetIds, onSelect: preset => {
+        return (jsx(Chat.Presets, { chatId: currentChatId ?? '', items: presetsWithFreeform, layout: layout, variant: options?.variant, usedItemIds: usedPresetIds, onSelect: preset => {
                 void submitPreset(preset);
             } }));
     };

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

@@ -97,9 +97,23 @@ export interface ChatPromptProps {
     /** Custom slash pick handler; return true to skip default mention insert and insert via composer API. */
     onSlashItemCommand?: SlashOnItemCommand;
 }
+export type ChatMessageClassNames = {
+    user?: string;
+    assistant?: string;
+    system?: string;
+};
+export type ChatMessageTextClassNames = {
+    user?: string;
+    assistant?: string;
+    system?: string;
+};
 export interface ChatMessageProps {
     role: MessageRole;
     text: string;
+    /** Extra class on the message root wrapper (role layout + defaults still apply). */
+    className?: string;
+    /** Extra class on the inner text bubble (merged with built-in `.text` styles). */
+    textClassName?: string;
     inProgress?: boolean;
     userTextFileAttachments?: UserTextFileAttachment[];
     onQuickReply?: (branchKey: string, displayLabel: string) => void;

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

@@ -1,2 +1,2 @@
 import type { ChatChromeProps } from './ChatChrome.types';
-export declare function ChatChrome({ showResizeHandle, resizeHandle, onClose, isEmpty, renderPresets, messages, onQuickReply, suppressedQuickReplyKeys, isLoading, loadingLabel, scriptContinueLabel, onScriptContinue, renderMessageChart, renderSystemMessage, showSyntheticBranchButtons, unusedBranchKeys, showInlinePresets, isLastMessageFromUser, scrollRef, effectiveScopeId, onPromptSubmit, onChatDeleted, onNewChat, promptPrefill, footerClassName, emptyState, allowedAttachments, allowPdfAttachments, onAttachmentsDropped, slashCommandItems, onSlashItemCommand, promptPlaceholder, hideChatSelector, }: ChatChromeProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatChrome({ variant, showResizeHandle, resizeHandle, onClose, isEmpty, renderPresets, messages, onQuickReply, suppressedQuickReplyKeys, isLoading, loadingLabel, scriptContinueLabel, onScriptContinue, renderMessageChart, renderSystemMessage, showSyntheticBranchButtons, unusedBranchKeys, showInlinePresets, isLastMessageFromUser, scrollRef, effectiveScopeId, onPromptSubmit, onChatDeleted, onNewChat, promptPrefill, footerClassName, messageClassNames, messageTextClassNames, emptyState, allowedAttachments, allowPdfAttachments, onAttachmentsDropped, slashCommandItems, onSlashItemCommand, promptPlaceholder, hideChatSelector, }: ChatChromeProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
 import type { RefObject } from 'react';
-import type { ChatAttachmentDropItem, Message } from '#uilib/components/ui/Chat/Chat.types';
+import type { ChatAttachmentDropItem, ChatMessageClassNames, ChatMessageTextClassNames, Message } from '#uilib/components/ui/Chat/Chat.types';
 import type { ChatEmptyStateProps } from '#uilib/components/ui/Chat/ChatEmptyState/ChatEmptyState.types';
 import type { ChatPresetsLayout } from '#uilib/components/ui/Chat/ChatPresets';
 import type { SlashCommandItem, SlashOnItemCommand } from '#uilib/tiptap/slash-mention/types';
@@ -12,12 +12,17 @@ export type ChatChromeResizeHandleConfig = {
     onDragComplete: (finalRawPx: number) => void;
 };
 export type { ChatAttachmentDropItem };
+export type ChatChromeVariant = 'default' | 'clean';
+export type ChatPresetsRenderOptions = {
+    variant?: ChatChromeVariant;
+};
 export interface ChatChromeProps {
+    variant?: ChatChromeVariant;
     showResizeHandle: boolean;
     resizeHandle: ChatChromeResizeHandleConfig | undefined;
     onClose: (() => void) | undefined;
     isEmpty: boolean;
-    renderPresets: (layout: ChatPresetsLayout) => React.ReactNode;
+    renderPresets: (layout: ChatPresetsLayout, options?: ChatPresetsRenderOptions) => React.ReactNode;
     /** Message list for the scroll area; use `[]` when empty. */
     messages: Message[];
     onQuickReply: (branchKey: string, displayLabel: string) => void;
@@ -43,6 +48,10 @@ export interface ChatChromeProps {
     /** `?prompt=` deep link text for one-shot composer pre-fill. */
     promptPrefill?: string | null;
     footerClassName?: string;
+    /** Per-role extra classes on message root wrappers (merged with built-in role styles). */
+    messageClassNames?: ChatMessageClassNames;
+    /** Per-role extra classes on inner text bubbles (merged with built-in `.text` styles). */
+    messageTextClassNames?: ChatMessageTextClassNames;
     emptyState?: ChatEmptyStateProps;
     /** MIME types / extensions (filtered to text-only allowlist). Enables dropzone when non-empty. */
     allowedAttachments?: readonly string[];

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

@@ -1,2 +1,2 @@
 export { ChatChrome } from './ChatChrome';
-export type { ChatAttachmentDropItem, ChatChromeProps, ChatChromeResizeHandleConfig, } from './ChatChrome.types';
+export type { ChatAttachmentDropItem, ChatChromeProps, ChatChromeResizeHandleConfig, ChatChromeVariant, } from './ChatChrome.types';

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

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

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, quickReplyHidden, isLastMessage, scriptContinue, onScriptContinue, renderMessageChart, message, renderSystemMessage, }: ChatMessageProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatMessage({ role, text, inProgress, userTextFileAttachments, onQuickReply, suppressedQuickReplyKeys, quickReplyDisabled, quickReplyHidden, isLastMessage, scriptContinue, onScriptContinue, renderMessageChart, message, renderSystemMessage, className, textClassName, }: ChatMessageProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,4 @@
+import type { ChatChromeVariant } from '../ChatChrome/ChatChrome.types';
 import type { ChatPreset } from '../Chat.types';
 export type ChatPresetsLayout = 'fixed' | 'inline';
 export interface ChatPresetsProps {
@@ -5,7 +6,8 @@ export interface ChatPresetsProps {
     items: ChatPreset[];
     usedItemIds?: string[];
     layout?: ChatPresetsLayout;
+    variant?: ChatChromeVariant;
     onSelect?: (preset: ChatPreset) => void;
     onItemUsed?: (id: string) => void;
 }
-export declare function ChatPresets({ chatId, items, usedItemIds, layout, onSelect, onItemUsed, }: ChatPresetsProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatPresets({ chatId, items, usedItemIds, layout, variant, onSelect, onItemUsed, }: ChatPresetsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
 export { Chat } from './Chat';
 export { formatChatTranscript, usedPresetIdsFromMessages, } from './chat-preset-utils';
 export { ChatChrome } from './ChatChrome';
-export type { ChatChromeProps, ChatChromeResizeHandleConfig, } from './ChatChrome';
+export type { ChatChromeProps, ChatChromeResizeHandleConfig, ChatChromeVariant, } from './ChatChrome';
 export { TEXT_ATTACHMENT_ACCEPT_PARTS, filterToTextAttachments, } from './chatAttachmentAccept';
 export { buildChatSendMessagePayload, displayTextFromSendPayload, normalizeUserTextFileAttachments, } from './buildChatSendMessagePayload';
 export { sanitizeAttachmentFilename } from './sanitizeAttachmentFilename';
@@ -18,7 +18,7 @@ export { CHAT_PROMPT_COMMAND_CHIP_CLASS, chatPromptChipHtml, createChatPromptCom
 export type { ChatPromptComposerInsertOptions } from './ChatPrompt/ChatPromptComposer.types';
 export { ChatPresets } from './ChatPresets';
 export type { ChatEmptyStateConfig, ChatEmptyStateContext, ChatEmptyStateProps, } from './ChatEmptyState/ChatEmptyState.types';
-export type { Chat as ChatType, ChatAttachmentDropItem, ChatMeta, ChatMetaValue, ChatSendMessagePayload, ChatProps, ChatPreset as ChatPresetType, Message, UserTextFileAttachment, } from './Chat.types';
+export type { Chat as ChatType, ChatAttachmentDropItem, ChatMessageClassNames, ChatMessageTextClassNames, ChatMeta, ChatMetaValue, ChatSendMessagePayload, ChatMessageProps, ChatProps, ChatPreset as ChatPresetType, Message, UserTextFileAttachment, } from './Chat.types';
 export { MessageRole } from './Chat.types';
 export type { SlashCommandItem, SlashItemCommandContext, SlashOnItemCommand, } from '#uilib/tiptap/slash-mention/types';
 export { CsvIcon } from '../../icons/CsvIcon/CsvIcon';

package/package.json

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

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

@@ -114,9 +114,25 @@ export interface ChatPromptProps {
   onSlashItemCommand?: SlashOnItemCommand;
 }
 
+export type ChatMessageClassNames = {
+  user?: string;
+  assistant?: string;
+  system?: string;
+};
+
+export type ChatMessageTextClassNames = {
+  user?: string;
+  assistant?: string;
+  system?: string;
+};
+
 export interface ChatMessageProps {
   role: MessageRole;
   text: string;
+  /** Extra class on the message root wrapper (role layout + defaults still apply). */
+  className?: string;
+  /** Extra class on the inner text bubble (merged with built-in `.text` styles). */
+  textClassName?: string;
   inProgress?: boolean;
   userTextFileAttachments?: UserTextFileAttachment[];
   onQuickReply?: (branchKey: string, displayLabel: string) => void;

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

@@ -9,6 +9,9 @@
   overflow hidden
   border-radius var(--p-4)
 
+.rootClean
+  border-radius 0
+
 .chatResizeHandle
   position: absolute;
   // top 0 !important
@@ -57,6 +60,9 @@
   flex-direction column
   position relative
 
+.chatClean
+  background-color transparent
+
 .attachmentDropzone
   position absolute
   inset 0
@@ -111,6 +117,18 @@
   border-top 1px solid var(--border)
   box-shadow 0 8px 24px 0 var(--background)
 
+.footerClean
+  backdrop-filter none
+  background-color transparent
+  border-top none
+  box-shadow none
+  border 1px solid var(--border)
+  border-radius var(--p-4)
+
+.promptClean
+  background-color var(--background)
+  border-radius inherit
+
 .fixedPresets
   position relative
   z-index 10
@@ -118,10 +136,10 @@
   width 100%
 
 .notice
-  position absolute
-  top calc(-1 * var(--p-7))
-  left 0
-  right 0
+  position relative
+  z-index 10
+  flex-shrink 0
+  width 100%
   margin-bottom var(--p-1)
 
   font-size var(--text-xs)

package/src/components/ui/Chat/ChatChrome/ChatChrome.styl.d.ts

@@ -4,16 +4,20 @@ interface CssExports {
   'attachmentDropzone': string;
   'branchBtnWrap': string;
   'branchRow': string;
+  'chatClean': string;
   'chatResizeHandle': string;
   'content': string;
   'emptyBody': string;
   'fixedPresets': string;
   'footer': string;
+  'footerClean': string;
   'loader': string;
   'notice': string;
   'panelClose': string;
   'panelHeader': string;
+  'promptClean': string;
   'root': string;
+  'rootClean': string;
   'scroll': string;
   'scrollInner': string;
   'scrollWrapper': string;

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

@@ -25,6 +25,7 @@ import S from './ChatChrome.styl';
 import type { ChatChromeProps } from './ChatChrome.types';
 
 export function ChatChrome({
+  variant = 'default',
   showResizeHandle,
   resizeHandle,
   onClose,
@@ -50,6 +51,8 @@ export function ChatChrome({
   onNewChat,
   promptPrefill,
   footerClassName,
+  messageClassNames,
+  messageTextClassNames,
   emptyState,
   allowedAttachments,
   allowPdfAttachments = false,
@@ -150,8 +153,10 @@ export function ChatChrome({
     showSyntheticBranchButtons,
   ]);
 
+  const isClean = variant === 'clean';
+
   return (
-    <div className={S.root}>
+    <div className={cn(S.root, isClean && S.rootClean)}>
       {showResizeHandle && resizeHandle ? (
         <PanelResizeHandle
           edge="leading"
@@ -191,6 +196,7 @@ export function ChatChrome({
           />
         ) : null}
         <Chat
+          className={isClean ? S.chatClean : undefined}
           isEmpty={isEmpty}
           scopeId={effectiveScopeId}
           onChatDeleted={onChatDeleted}
@@ -215,10 +221,27 @@ export function ChatChrome({
               >
                 {messages.map((msg, index, arr) => {
                   const isLast = index === arr.length - 1;
+                  const messageClassName = messageClassNames
+                    ? {
+                        [MessageRole.USER]: messageClassNames.user,
+                        [MessageRole.ASSISTANT]: messageClassNames.assistant,
+                        [MessageRole.SYSTEM]: messageClassNames.system,
+                      }[msg.role]
+                    : undefined;
+                  const messageTextClassName = messageTextClassNames
+                    ? {
+                        [MessageRole.USER]: messageTextClassNames.user,
+                        [MessageRole.ASSISTANT]:
+                          messageTextClassNames.assistant,
+                        [MessageRole.SYSTEM]: messageTextClassNames.system,
+                      }[msg.role]
+                    : undefined;
                   return (
                     <Chat.Message
                       key={msg.id}
                       message={msg}
+                      className={messageClassName}
+                      textClassName={messageTextClassName}
                       role={msg.role}
                       text={msg.text}
                       inProgress={msg.inProgress}
@@ -268,7 +291,7 @@ export function ChatChrome({
                   </div>
                 ) : null}
 
-                {showInlinePresets && renderPresets('inline')}
+                {showInlinePresets && renderPresets('inline', { variant })}
 
                 {isLoading &&
                   !hasInProgressSystemMessage &&
@@ -282,16 +305,22 @@ export function ChatChrome({
           )}
 
           {isEmpty ? (
-            <div className={S.fixedPresets}>{renderPresets('fixed')}</div>
+            <div className={S.fixedPresets}>
+              {renderPresets('fixed', { variant })}
+            </div>
           ) : null}
 
-          <div className={cn(S.footer, footerClassName)}>
-            {isEmpty ? (
-              <div className={S.notice}>
-                Forecast Assistant can make mistakes.
-              </div>
-            ) : null}
+          {isEmpty ? (
+            <div className={S.notice}>
+              Forecast Assistant can make mistakes.
+            </div>
+          ) : null}
+
+          <div
+            className={cn(S.footer, isClean && S.footerClean, footerClassName)}
+          >
             <Chat.Prompt
+              className={isClean ? S.promptClean : undefined}
               onSubmit={handlePromptSubmitWithAttachments}
               disabled={promptDisabled}
               attachments={pendingAttachments}

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

@@ -2,6 +2,8 @@ import type { RefObject } from 'react';
 
 import type {
   ChatAttachmentDropItem,
+  ChatMessageClassNames,
+  ChatMessageTextClassNames,
   Message,
 } from '#uilib/components/ui/Chat/Chat.types';
 import type { ChatEmptyStateProps } from '#uilib/components/ui/Chat/ChatEmptyState/ChatEmptyState.types';
@@ -22,12 +24,22 @@ export type ChatChromeResizeHandleConfig = {
 
 export type { ChatAttachmentDropItem };
 
+export type ChatChromeVariant = 'default' | 'clean';
+
+export type ChatPresetsRenderOptions = {
+  variant?: ChatChromeVariant;
+};
+
 export interface ChatChromeProps {
+  variant?: ChatChromeVariant;
   showResizeHandle: boolean;
   resizeHandle: ChatChromeResizeHandleConfig | undefined;
   onClose: (() => void) | undefined;
   isEmpty: boolean;
-  renderPresets: (layout: ChatPresetsLayout) => React.ReactNode;
+  renderPresets: (
+    layout: ChatPresetsLayout,
+    options?: ChatPresetsRenderOptions,
+  ) => React.ReactNode;
   /** Message list for the scroll area; use `[]` when empty. */
   messages: Message[];
   onQuickReply: (branchKey: string, displayLabel: string) => void;
@@ -56,6 +68,10 @@ export interface ChatChromeProps {
   /** `?prompt=` deep link text for one-shot composer pre-fill. */
   promptPrefill?: string | null;
   footerClassName?: string;
+  /** Per-role extra classes on message root wrappers (merged with built-in role styles). */
+  messageClassNames?: ChatMessageClassNames;
+  /** Per-role extra classes on inner text bubbles (merged with built-in `.text` styles). */
+  messageTextClassNames?: ChatMessageTextClassNames;
   emptyState?: ChatEmptyStateProps;
   /** MIME types / extensions (filtered to text-only allowlist). Enables dropzone when non-empty. */
   allowedAttachments?: readonly string[];

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

@@ -3,4 +3,5 @@ export type {
   ChatAttachmentDropItem,
   ChatChromeProps,
   ChatChromeResizeHandleConfig,
+  ChatChromeVariant,
 } from './ChatChrome.types';

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

@@ -1,3 +1,4 @@
+import cn from 'classnames';
 import { type ReactNode, useMemo, useState } from 'react';
 
 import { Button } from '#uilib/components/ui/Button';
@@ -15,6 +16,7 @@ import { XlsIcon } from './icons/XlsIcon';
 
 export function AgentMessageContent({
   text,
+  textClassName,
   onQuickReply,
   suppressedQuickReplyKeys,
   quickReplyDisabled,
@@ -25,6 +27,7 @@ export function AgentMessageContent({
   renderMessageChart,
 }: {
   text: string;
+  textClassName?: string;
   onQuickReply?: (branchKey: string, displayLabel: string) => void;
   suppressedQuickReplyKeys?: ReadonlySet<string>;
   quickReplyDisabled?: boolean;
@@ -211,7 +214,7 @@ export function AgentMessageContent({
 
   return (
     <div
-      className={S.text}
+      className={cn(S.text, textClassName)}
       // onClick={() => setShowRaw(!showRaw)}
     >
       {showRaw ? text : parts}

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

@@ -39,7 +39,6 @@
   .text
     padding var(--p-3) var(--p-4)
 
-    background-color var(--sb-slate-100)
     border-radius var(--p-4)
     border-bottom-right-radius 0
 
@@ -47,8 +46,11 @@
     overflow hidden
     box-sizing border-box
 
-    :global(.dark) &
-      background-color var(--sb-gray-900)
+    &:not(.textCustom)
+      background-color var(--sb-slate-100)
+
+      :global(.dark) &
+        background-color var(--sb-gray-900)
 
 .role-system
   align-items center

package/src/components/ui/Chat/ChatMessage/ChatMessage.styl.d.ts

@@ -17,6 +17,7 @@ interface CssExports {
   'root': string;
   'scrollHorizontal': string;
   'text': string;
+  'textCustom': string;
   'userColumn': string;
 }
 export const cssExports: CssExports;

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

@@ -24,6 +24,8 @@ export function ChatMessage({
   renderMessageChart,
   message,
   renderSystemMessage,
+  className,
+  textClassName,
 }: ChatMessageProps) {
   const fileAttachments = userTextFileAttachmentsFromMessage({
     userTextFileAttachments,
@@ -32,9 +34,9 @@ export function ChatMessage({
   const isSystem = role === MessageRole.SYSTEM;
 
   return (
-    <div className={cn(S.root, S[`role-${role}`])}>
+    <div className={cn(S.root, S[`role-${role}`], className)}>
       {isSystem ? (
-        <div className={S.text}>
+        <div className={cn(S.text, textClassName)}>
           {inProgress ? (
             <TextShimmer as="span">{text}</TextShimmer>
           ) : renderSystemMessage && message ? (
@@ -46,6 +48,7 @@ export function ChatMessage({
       ) : isAssistant ? (
         <AgentMessageContent
           text={text}
+          textClassName={textClassName}
           onQuickReply={onQuickReply}
           suppressedQuickReplyKeys={suppressedQuickReplyKeys}
           quickReplyDisabled={quickReplyDisabled}
@@ -57,7 +60,9 @@ export function ChatMessage({
         />
       ) : (
         <div className={S.userColumn}>
-          <div className={S.text}>
+          <div
+            className={cn(S.text, textClassName && S.textCustom, textClassName)}
+          >
             <InteractiveContent text={text} />
           </div>
           {fileAttachments.map(attachment => (

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

@@ -16,7 +16,8 @@
   padding var(--p-2) var(--p-6) var(--p-3)
   background-color var(--background)
 
-.innerInline
+.innerInline,
+.innerClean
   background-color transparent
 
 .item

package/src/components/ui/Chat/ChatPresets/ChatPresets.styl.d.ts

@@ -3,6 +3,7 @@
 interface CssExports {
   'inlineRoot': string;
   'inner': string;
+  'innerClean': string;
   'innerInline': string;
   'item': string;
   'root': string;

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

@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react';
 
 import { Button } from '#uilib/components/ui/Button';
 
+import type { ChatChromeVariant } from '../ChatChrome/ChatChrome.types';
 import type { ChatPreset } from '../Chat.types';
 import S from './ChatPresets.styl';
 
@@ -13,6 +14,7 @@ export interface ChatPresetsProps {
   items: ChatPreset[];
   usedItemIds?: string[];
   layout?: ChatPresetsLayout;
+  variant?: ChatChromeVariant;
   onSelect?: (preset: ChatPreset) => void;
   onItemUsed?: (id: string) => void;
 }
@@ -22,6 +24,7 @@ export function ChatPresets({
   items,
   usedItemIds = [],
   layout = 'fixed',
+  variant = 'default',
   onSelect,
   onItemUsed,
 }: ChatPresetsProps) {
@@ -38,7 +41,13 @@ export function ChatPresets({
 
   return (
     <div className={layout === 'inline' ? S.inlineRoot : S.root}>
-      <div className={cn(S.inner, layout === 'inline' && S.innerInline)}>
+      <div
+        className={cn(
+          S.inner,
+          layout === 'inline' && S.innerInline,
+          variant === 'clean' && S.innerClean,
+        )}
+      >
         {availableItems.map(preset => (
           <Button
             key={preset.id}

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

@@ -51,7 +51,7 @@ import {
 } from '../../Sidebar/Sidebar';
 import { Chat } from '../Chat';
 import type { ChatChromeProps } from '../ChatChrome';
-import type { ChatAttachmentDropItem } from '../ChatChrome/ChatChrome.types';
+import type { ChatAttachmentDropItem, ChatPresetsRenderOptions } from '../ChatChrome/ChatChrome.types';
 import type { ChatEmptyStateConfig } from '../ChatEmptyState/ChatEmptyState.types';
 import type { ChatEmptyStateProps } from '../ChatEmptyState/ChatEmptyState.types';
 import {
@@ -1106,7 +1106,10 @@ export function useChatPanelChromeModel({
     chatWidthPx,
   ]);
 
-  const renderPresets = (layout: ChatPresetsLayout = 'fixed') => {
+  const renderPresets = (
+    layout: ChatPresetsLayout = 'fixed',
+    options?: ChatPresetsRenderOptions,
+  ) => {
     if (!presetsWithFreeform?.length) return null;
 
     return (
@@ -1114,6 +1117,7 @@ export function useChatPanelChromeModel({
         chatId={currentChatId ?? ''}
         items={presetsWithFreeform}
         layout={layout}
+        variant={options?.variant}
         usedItemIds={usedPresetIds}
         onSelect={preset => {
           void submitPreset(preset);

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

@@ -7,6 +7,7 @@ export { ChatChrome } from './ChatChrome';
 export type {
   ChatChromeProps,
   ChatChromeResizeHandleConfig,
+  ChatChromeVariant,
 } from './ChatChrome';
 export {
   TEXT_ATTACHMENT_ACCEPT_PARTS,
@@ -47,9 +48,12 @@ export type {
 export type {
   Chat as ChatType,
   ChatAttachmentDropItem,
+  ChatMessageClassNames,
+  ChatMessageTextClassNames,
   ChatMeta,
   ChatMetaValue,
   ChatSendMessagePayload,
+  ChatMessageProps,
   ChatProps,
   ChatPreset as ChatPresetType,
   Message,

package/src/docs/pages/ChartAreaInteractivePage.tsx

@@ -1,20 +1,19 @@
-import { useCallback, useMemo, useState } from 'react';
-
-import { ChartAreaInteractive } from '#uilib/components/ui/ChartAreaInteractive';
 import type {
   ChartDataPoint,
   OverlayMode,
 } from '#uilib/components/ui/ChartAreaInteractive/ChartAreaInteractive.types';
+import { Tabs, TabsList, TabsTrigger } from '#uilib/components/ui/Tabs';
+import { useCallback, useMemo, useState } from 'react';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { ChartAreaInteractive } from '#uilib/components/ui/ChartAreaInteractive';
+import { DocsHeaderActions } from '../docsHeaderActions';
+import type { ForecastData } from '#uilib/types/forecast-data';
 import { ForecastItemData } from '#uilib/components/ui/ChartAreaInteractive/ChartLines';
 import { Label } from '#uilib/components/ui/Label';
 import { PageContentSection } from '#uilib/components/ui/Page';
 import { Switch } from '#uilib/components/ui/Switch';
-import { Tabs, TabsList, TabsTrigger } from '#uilib/components/ui/Tabs';
 import { useTheme } from '#uilib/contexts/theme-context';
-import type { ForecastData } from '#uilib/types/forecast-data';
-
-import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
-import { DocsHeaderActions } from '../docsHeaderActions';
 
 const DEMO_FORECAST_ID = 1;
 

package/src/docs/pages/ChatAttachmentsDropzonePage.tsx

@@ -109,6 +109,7 @@ export default function ChatAttachmentsDropzonePage() {
           those types; PDF also requires <code>allowPdfAttachments</code>.
         </p>
         <ChatChrome
+          variant="clean"
           showResizeHandle={false}
           resizeHandle={undefined}
           onClose={undefined}

package/src/docs/pages/ChatComposerPrefillPage.tsx

@@ -170,6 +170,7 @@ export default function ChatComposerPrefillPage() {
           </li>
         </ul>
         <ChatChrome
+          variant="clean"
           showResizeHandle={false}
           resizeHandle={undefined}
           onClose={undefined}

package/src/docs/pages/ChatPage.tsx

@@ -42,7 +42,7 @@ export default function ChatPage() {
           used chips hide for the session.
         </p>
         <div className={S.chatDemoHost}>
-          <ChatChrome {...chromeProps} />
+          <ChatChrome {...chromeProps} variant="clean" />
         </div>
       </PageContentSection>
     </>

package/src/docs/pages/ChatSlashCommandsPage.tsx

@@ -115,6 +115,7 @@ export default function ChatSlashCommandsPage() {
           }
         `}</style>
         <ChatChrome
+          variant="clean"
           showResizeHandle={false}
           resizeHandle={undefined}
           onClose={undefined}

package/src/docs/pages/ChatUserCsvAttachmentPage.tsx

@@ -137,6 +137,7 @@ export default function ChatUserCsvAttachmentPage() {
           </Button>
         </p>
         <ChatChrome
+          variant="clean"
           showResizeHandle={false}
           resizeHandle={undefined}
           onClose={undefined}