@homecode/ui 5.9.0 → 5.9.2

package/dist/esm/src/components/Autocomplete/Autocomplete.js

@@ -36,10 +36,10 @@ import '../Chat/ChatFormattedText.styl.js';
 import '../Expand/Expand.styl.js';
 import '../Chat/ChatMessage.styl.js';
 import '../PromptComposer/PromptComposer.js';
-import '../ThinkingOutline/ThinkingOutline.styl.js';
 import '../Chat/ChatPrompt.styl.js';
-import '../TextShimmer/TextShimmer.js';
+import '../ThinkingOutline/ThinkingOutline.styl.js';
 import '../Chat/ChatView.styl.js';
+import '../TextShimmer/TextShimmer.js';
 import '../Container/Container.js';
 import '../DatePicker/DatePicker.styl.js';
 import 'moment';

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

@@ -1,19 +1,20 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import cn from 'classnames';
 import { useRef, useState } from 'react';
 import { Button } from '../Button/Button.js';
 import { Icon } from '../Icon/Icon.js';
 import { PromptComposer } from '../PromptComposer/PromptComposer.js';
+import S from './ChatPrompt.styl.js';
 import { Select2 } from '../Select/Select2.js';
 import { ThinkingOutline } from '../ThinkingOutline/ThinkingOutline.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
-import S from './ChatPrompt.styl.js';
+import cn from 'classnames';
 
 const DEFAULT_MODELS = [
     { id: 'auto', label: 'Auto Router' },
 ];
 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,17 +23,24 @@ 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;
                             onSubmit(next);
-                        }, children: jsx(Icon, { type: "arrowUp", className: S.submitIcon }) }), showModelSelector && (jsx(Select2, { className: S.promptModelSelector, label: "", size: "s", disableLabel: true, hideRequiredStar: true, round: true, options: models, value: modelId, disabled: disabled, popupProps: {
+                        }, children: jsx(Icon, { type: "arrowUp", className: S.submitIcon }) }), showModelSelector && (jsx(Select2, { className: S.promptModelSelector, label: "", size: "s", disableLabel: true, hideRequiredStar: true, round: true, options: models, value: modelId, disabled: disabled, triggerProps: { variant: 'clear' }, popupProps: {
                             direction: 'top-right',
                             round: true,
                         }, onChange: next => {

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

@@ -1,14 +1,14 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import cn from 'classnames';
 import { useRef, useEffect } from 'react';
-import { Scroll } from '../Scroll/Scroll.js';
-import { TextShimmer } from '../TextShimmer/TextShimmer.js';
-import { scrollTo } from '../../tools/scroll.js';
 import { ChatMessage } from './ChatMessage.js';
 import S from './ChatView.styl.js';
+import { Scroll } from '../Scroll/Scroll.js';
+import { TextShimmer } from '../TextShimmer/TextShimmer.js';
+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(() => {
@@ -16,7 +16,7 @@ function ChatView({ messages, isPrompting, promptingLabel = 'Thinking…', empty
         if (scroller)
             scrollTo(scroller, 0, scroller.scrollHeight + 80);
     }, [visible.length, isPrompting]);
-    return (jsxs("div", { className: cn(S.root, className), children: [jsxs(Scroll, { y: true, fadeSize: "l", autoHide: true, className: S.messages, innerClassName: cn(S.messagesInner, messagesClassName), onInnerRef: elem => {
+    return (jsxs("div", { className: cn(S.root, className), children: [jsxs(Scroll, { y: true, fadeSize: "l", autoHide: true, offset: { y: { after: 30 } }, className: S.messages, innerClassName: cn(S.messagesInner, footer && S.messagesInnerWithPrompt, messagesClassName), onInnerRef: elem => {
                     listRef.current = elem;
                 }, children: [visible.length === 0 && jsx("div", { className: S.empty, children: emptyLabel }), visible.map((message, index) => {
                         const prev = visible[index - 1];
@@ -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}`));
-                    })] }), isPrompting && (jsx("div", { className: S.status, children: jsx(TextShimmer, { children: promptingLabel }) })), footer && jsx("div", { className: S.footer, children: footer })] }));
+                    })] }), 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,7 +1,7 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".ChatView_root__fRLUe{display:flex;flex-direction:column;height:100%;min-height:0;width:100%}.ChatView_messages__XjC53{flex:1;min-height:0}.ChatView_messagesInner__oRfmN{display:flex;flex-direction:column;padding:var(--p-10) calc(50% - 300px) 0}.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{flex-shrink:0;overflow:visible;padding-top:0}";
-var S = {"root":"ChatView_root__fRLUe","messages":"ChatView_messages__XjC53","messagesInner":"ChatView_messagesInner__oRfmN","empty":"ChatView_empty__5yGXV","status":"ChatView_status__PpDvZ","footer":"ChatView_footer__huDww"};
+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);
 
 export { S as default };

package/dist/esm/src/components/InputFile/InputFile.js

@@ -39,10 +39,10 @@ import '../Chat/ChatFormattedText.styl.js';
 import '../Expand/Expand.styl.js';
 import '../Chat/ChatMessage.styl.js';
 import '../PromptComposer/PromptComposer.js';
-import '../ThinkingOutline/ThinkingOutline.styl.js';
 import '../Chat/ChatPrompt.styl.js';
-import '../TextShimmer/TextShimmer.js';
+import '../ThinkingOutline/ThinkingOutline.styl.js';
 import '../Chat/ChatView.styl.js';
+import '../TextShimmer/TextShimmer.js';
 import '../Container/Container.js';
 import '../DatePicker/DatePicker.styl.js';
 import 'moment';

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.0",
+  "version": "5.9.2",
   "description": "React UI components library",
   "scripts": {
     "tests": "jest",