@homecode/ui 5.9.1 → 5.9.2

package/dist/esm/src/components/Chat/ChatPrompt.js

@@ -14,6 +14,7 @@ const DEFAULT_MODELS = [
 ];
 function ChatPrompt({ value, onChange, onSubmit, disabled, isPrompting, placeholder = 'Message', className, showAttach = true, onAttach, attachAccept, showModelSelector = true, models = DEFAULT_MODELS, model, onModelChange, }) {
     const fileInputRef = useRef(null);
+    const composerRef = useRef(null);
     const [uncontrolledModel, setUncontrolledModel] = useState(model ?? models[0]?.id ?? 'auto');
     const modelId = model ?? uncontrolledModel;
     const canSubmit = !disabled && Boolean(value.trim());
@@ -22,12 +23,19 @@ function ChatPrompt({ value, onChange, onSubmit, disabled, isPrompting, placehol
             setUncontrolledModel(id);
         onModelChange?.(id);
     };
-    return (jsxs("div", { className: cn(S.root, className), children: [jsx(ThinkingOutline, { active: isPrompting }), jsx(PromptComposer, { className: S.composer, disabled: disabled, placeholder: placeholder, prefillMessage: value, allowEnterSubmit: true, onChange: onChange, onSubmit: text => {
+    const onButtonsWrapperClick = (e) => {
+        const target = e.target;
+        if (target instanceof HTMLElement &&
+            (target.classList.contains(S.buttons) || target.classList.contains(S.gap))) {
+            composerRef.current?.focus();
+        }
+    };
+    return (jsxs("div", { className: cn(S.root, className), children: [jsx(ThinkingOutline, { active: isPrompting }), jsx(PromptComposer, { ref: composerRef, className: S.composer, disabled: disabled, placeholder: placeholder, prefillMessage: value, allowEnterSubmit: true, onChange: onChange, onSubmit: text => {
                     const next = text.trim();
                     if (!next || disabled)
                         return;
                     onSubmit(next);
-                } }), jsxs("div", { className: S.buttons, children: [jsx(Button, { className: cn(S.button, S.submit), variant: "text", type: "submit", round: true, square: true, disabled: !canSubmit, "aria-label": "Send", onClick: () => {
+                } }), jsxs("div", { className: S.buttons, onClick: onButtonsWrapperClick, children: [jsx(Button, { className: cn(S.button, S.submit), variant: "text", type: "submit", round: true, square: true, disabled: !canSubmit, "aria-label": "Send", onClick: () => {
                             const next = value.trim();
                             if (!next || disabled)
                                 return;

package/dist/esm/src/components/Chat/ChatView.js

@@ -8,7 +8,7 @@ import cn from 'classnames';
 import { isPlanMessageContent } from './content.js';
 import { scrollTo } from '../../tools/scroll.js';
 
-function ChatView({ messages, isPrompting, promptingLabel = 'Thinking…', emptyLabel = 'Start the conversation', className, messagesClassName, footer, onButtonClick, }) {
+function ChatView({ messages, isPrompting, promptingLabel = 'Thinking…', emptyLabel = 'Start the conversation', className, messagesClassName, footer, onButtonClick, footerClassName, }) {
     const listRef = useRef(null);
     const visible = messages.filter(message => !isPlanMessageContent(message.content));
     useEffect(() => {
@@ -24,7 +24,7 @@ function ChatView({ messages, isPrompting, promptingLabel = 'Thinking…', empty
                             prev.role === message.role &&
                             message.role !== 'SYSTEM';
                         return (jsx(ChatMessage, { data: message, isStacked: isStacked, isLastMessage: index === visible.length - 1, onButtonClick: onButtonClick }, message.id || `${message.role}-${index}`));
-                    })] }), footer && (jsxs("div", { className: S.footer, children: [isPrompting && (jsx("div", { className: S.status, children: jsx(TextShimmer, { children: promptingLabel }) })), footer] })), !footer && isPrompting && (jsx("div", { className: S.status, children: jsx(TextShimmer, { children: promptingLabel }) }))] }));
+                    })] }), footer && (jsxs("div", { className: cn(S.footer, footerClassName), children: [isPrompting && (jsx("div", { className: S.status, children: jsx(TextShimmer, { children: promptingLabel }) })), footer] })), !footer && isPrompting && (jsx("div", { className: S.status, children: jsx(TextShimmer, { children: promptingLabel }) }))] }));
 }
 
 export { ChatView };

package/dist/esm/src/components/Chat/ChatView.styl.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".ChatView_root__fRLUe{--prompt-height:80px;display:flex;flex-direction:column;height:100%;min-height:0;position:relative;width:100%}.ChatView_messages__XjC53{flex:1;min-height:0}.ChatView_messagesInner__oRfmN{display:flex;flex-direction:column;height:-moz-fit-content;height:fit-content;min-height:100%;padding:var(--p-10) calc(50% - 300px) 0}.ChatView_messagesInnerWithPrompt__AuC8M{padding-bottom:20px}.ChatView_empty__5yGXV{margin:auto;opacity:.6;padding:24px;text-align:center}.ChatView_status__PpDvZ{font-size:13px;padding:4px 8px 0}.ChatView_footer__huDww{height:-moz-fit-content;height:fit-content;margin-top:calc(var(--p-5)*-1);overflow:visible;padding:0 0 10px}.ChatView_footer__huDww .ChatView_status__PpDvZ{display:flex;font-size:12.8px;font-size:calc(12.8px*var(--dialogue-text-scale, 1));justify-content:center;left:0;padding:6px 14px;pointer-events:none;position:absolute;right:0;top:-32px}";
+var css_248z = ".ChatView_root__fRLUe{--prompt-height:80px;display:flex;flex-direction:column;height:100%;min-height:0;position:relative;width:100%}.ChatView_messages__XjC53{flex:1;min-height:0}.ChatView_messagesInner__oRfmN{display:flex;flex-direction:column;height:-moz-fit-content;height:fit-content;min-height:100%;padding:var(--p-10) calc(50% - 300px) 0}.ChatView_messagesInnerWithPrompt__AuC8M{padding-bottom:20px}.ChatView_empty__5yGXV{margin:auto;opacity:.6;padding:24px;text-align:center}.ChatView_status__PpDvZ{font-size:13px;padding:4px 8px 0}.ChatView_footer__huDww{height:-moz-fit-content;height:fit-content;margin-top:calc(var(--p-5)*-1);overflow:visible;padding:0}.ChatView_footer__huDww .ChatView_status__PpDvZ{display:flex;font-size:12.8px;font-size:calc(12.8px*var(--dialogue-text-scale, 1));justify-content:center;left:0;padding:6px 14px;pointer-events:none;position:absolute;right:0;top:-32px}";
 var S = {"root":"ChatView_root__fRLUe","messages":"ChatView_messages__XjC53","messagesInner":"ChatView_messagesInner__oRfmN","messagesInnerWithPrompt":"ChatView_messagesInnerWithPrompt__AuC8M","empty":"ChatView_empty__5yGXV","status":"ChatView_status__PpDvZ","footer":"ChatView_footer__huDww"};
 styleInject(css_248z);
 

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

@@ -51,6 +51,7 @@ export type ChatViewProps = {
     className?: string;
     messagesClassName?: string;
     footer?: ReactNode;
+    footerClassName?: string;
     onButtonClick?: ChatFormattedTextProps['onButtonClick'];
 };
 export type ChatPromptModel = {

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

@@ -1,2 +1,2 @@
 import type { ChatViewProps } from './types';
-export declare function ChatView({ messages, isPrompting, promptingLabel, emptyLabel, className, messagesClassName, footer, onButtonClick, }: ChatViewProps): import("react").JSX.Element;
+export declare function ChatView({ messages, isPrompting, promptingLabel, emptyLabel, className, messagesClassName, footer, onButtonClick, footerClassName, }: ChatViewProps): import("react").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "5.9.1",
+  "version": "5.9.2",
   "description": "React UI components library",
   "scripts": {
     "tests": "jest",