@sybilion/uilib 1.3.81 → 1.3.82

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, 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,7 +76,8 @@ 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
                                                     ? { label: scriptContinueLabel }
@@ -87,9 +88,10 @@ 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/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/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, 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

@@ -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;

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

package/package.json

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

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,
@@ -150,8 +151,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 +194,7 @@ export function ChatChrome({
           />
         ) : null}
         <Chat
+          className={isClean ? S.chatClean : undefined}
           isEmpty={isEmpty}
           scopeId={effectiveScopeId}
           onChatDeleted={onChatDeleted}
@@ -268,7 +272,8 @@ export function ChatChrome({
                   </div>
                 ) : null}
 
-                {showInlinePresets && renderPresets('inline')}
+                {showInlinePresets &&
+                  renderPresets('inline', { variant })}
 
                 {isLoading &&
                   !hasInProgressSystemMessage &&
@@ -282,16 +287,20 @@ export function ChatChrome({
           )}
 
           {isEmpty ? (
-            <div className={S.fixedPresets}>{renderPresets('fixed')}</div>
+            <div className={S.fixedPresets}>
+              {renderPresets('fixed', { variant })}
+            </div>
+          ) : null}
+
+          {isEmpty ? (
+            <div className={S.notice}>
+              Forecast Assistant can make mistakes.
+            </div>
           ) : null}
 
-          <div className={cn(S.footer, footerClassName)}>
-            {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

@@ -22,12 +22,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;

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

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}