@homecode/ui 5.19.0 → 5.20.2

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

@@ -8,10 +8,12 @@ import S from './ChatMessage.styl.js';
 import { parseSystemEvent, getDisplayParts, getDisplayContent } from './content.js';
 
 function ChatMessage({ data, isStacked, className, onButtonClick, }) {
-    const { content, role, createdAt } = data;
+    const { content, role, createdAt, author } = data;
     const id = data.id;
     const isSystem = role === 'SYSTEM';
     const date = createdAt ? new Date(createdAt) : null;
+    const hasDate = Boolean(date) && !Number.isNaN(date.getTime());
+    const hasAuthor = author != null && author !== '' && !isStacked;
     const systemEvent = useMemo(() => (isSystem ? parseSystemEvent(content) : null), [isSystem, content]);
     const parts = useMemo(() => (isSystem ? null : getDisplayParts(content)), [content, isSystem]);
     const body = useMemo(() => {
@@ -41,10 +43,11 @@ function ChatMessage({ data, isStacked, className, onButtonClick, }) {
             : getDisplayContent(content);
         return jsx(ChatFormattedText, { text: text, onButtonClick: onButtonClick });
     }, [content, isSystem, onButtonClick, parts, systemEvent]);
-    return (jsxs("div", { className: cn(S.root, S[role], isStacked && S.stacked, className), "data-id": id, children: [date && !Number.isNaN(date.getTime()) && (jsx("div", { className: S.meta, children: date.toLocaleTimeString(undefined, {
-                    hour: 'numeric',
-                    minute: '2-digit',
-                }) })), jsx("div", { className: S.text, children: jsx("div", { className: S.textContent, children: isSystem ? (jsx(Expand, { className: S.systemFold, headerClassName: S.systemFoldTrigger, size: "s", isOpen: false, header: systemEvent?.summary || getDisplayContent(content), content: () => (jsx("div", { className: S.systemFoldContent, children: body })) })) : (body) }) })] }));
+    return (jsxs("div", { className: cn(S.root, S[role], isStacked && S.stacked, className), "data-id": id, children: [(hasAuthor || hasDate) && (jsxs("div", { className: S.meta, children: [hasAuthor && jsx("span", { className: S.author, children: author }), hasDate &&
+                        date.toLocaleTimeString(undefined, {
+                            hour: 'numeric',
+                            minute: '2-digit',
+                        })] })), jsx("div", { className: S.text, children: jsx("div", { className: S.textContent, children: isSystem ? (jsx(Expand, { className: S.systemFold, headerClassName: S.systemFoldTrigger, size: "s", isOpen: false, header: systemEvent?.summary || getDisplayContent(content), content: () => (jsx("div", { className: S.systemFoldContent, children: body })) })) : (body) }) })] }));
 }
 
 export { ChatMessage };

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

@@ -1,5 +1,5 @@
-var css_248z = ".ChatMessage_root__JkQi6{align-items:flex-start;display:flex;flex-direction:column;max-width:100%;padding:0 var(--p-5) var(--p-2)}.ChatMessage_root__JkQi6:last-child:after{content:\"\";display:block;height:20vh;width:100%}@media (max-width:768px){.ChatMessage_root__JkQi6{padding:0 var(--p-2) var(--p-2)}}.ChatMessage_root__JkQi6+.ChatMessage_root__JkQi6{margin-top:20px}.ChatMessage_root__JkQi6 .ChatMessage_textContent__O-pxi{padding:0}.ChatMessage_root__JkQi6.ChatMessage_USER__UEEuA{align-items:flex-end;padding-right:var(--p-5)}.ChatMessage_root__JkQi6.ChatMessage_USER__UEEuA .ChatMessage_text__CNGXE{background-color:var(--active-color-alpha-500);padding:6px var(--p-2)}.ChatMessage_root__JkQi6.ChatMessage_AGENT__fvHxv .ChatMessage_textContent__O-pxi,.ChatMessage_root__JkQi6.ChatMessage_AGENT__fvHxv .ChatMessage_text__CNGXE{width:100%!important}.ChatMessage_root__JkQi6.ChatMessage_AGENT__fvHxv .ChatMessage_text__CNGXE{padding-top:4px}.ChatMessage_root__JkQi6.ChatMessage_SYSTEM__bkOnf{align-items:stretch}.ChatMessage_root__JkQi6.ChatMessage_SYSTEM__bkOnf+.ChatMessage_root__JkQi6.ChatMessage_SYSTEM__bkOnf{margin-top:-6px!important}.ChatMessage_root__JkQi6.ChatMessage_SYSTEM__bkOnf .ChatMessage_text__CNGXE{font-size:90%;opacity:.8;padding:0;width:100%}.ChatMessage_root__JkQi6.ChatMessage_stacked__LoLL0 .ChatMessage_meta__lMww1{display:none}.ChatMessage_text__CNGXE{border-radius:14px;display:flex;flex-direction:row;max-width:100%;overflow:hidden;padding:var(--p-2);width:-moz-fit-content;width:fit-content}.ChatMessage_textContent__O-pxi{max-width:100%;text-align:left;white-space:pre-line;word-break:break-word}.ChatMessage_textContent__O-pxi h1,.ChatMessage_textContent__O-pxi h2,.ChatMessage_textContent__O-pxi h3,.ChatMessage_textContent__O-pxi h4,.ChatMessage_textContent__O-pxi h5,.ChatMessage_textContent__O-pxi h6{margin-top:1em}.ChatMessage_textContent__O-pxi a{margin-bottom:-.1em;margin-top:-.3em;padding:0 .3em .1em .4em!important}.ChatMessage_SYSTEM__bkOnf .ChatMessage_textContent__O-pxi a{margin-bottom:0;margin-top:0}.ChatMessage_meta__lMww1{font-size:11px;margin-bottom:4px;opacity:.5;padding:0 4px}.ChatMessage_parts__z7LHI{display:flex;flex-direction:column;gap:var(--p-2)}.ChatMessage_mediaPart__A67rQ{border-radius:var(--p-2);max-height:320px;max-width:100%}.ChatMessage_systemFold__FUSrL{width:100%}.ChatMessage_systemFoldTrigger__35Hnd{max-width:100%;overflow:hidden;padding:2px 10px;text-overflow:ellipsis;white-space:nowrap}.ChatMessage_systemFoldContent__0G-uw{padding:0 10px}";
-var S = {"root":"ChatMessage_root__JkQi6","textContent":"ChatMessage_textContent__O-pxi","USER":"ChatMessage_USER__UEEuA","text":"ChatMessage_text__CNGXE","AGENT":"ChatMessage_AGENT__fvHxv","SYSTEM":"ChatMessage_SYSTEM__bkOnf","stacked":"ChatMessage_stacked__LoLL0","meta":"ChatMessage_meta__lMww1","parts":"ChatMessage_parts__z7LHI","mediaPart":"ChatMessage_mediaPart__A67rQ","systemFold":"ChatMessage_systemFold__FUSrL","systemFoldTrigger":"ChatMessage_systemFoldTrigger__35Hnd","systemFoldContent":"ChatMessage_systemFoldContent__0G-uw"};
+var css_248z = ".ChatMessage_root__JkQi6{align-items:flex-start;display:flex;flex-direction:column;max-width:100%;padding:0 var(--p-5) var(--p-2)}.ChatMessage_root__JkQi6:last-child:after{content:\"\";display:block;height:20vh;width:100%}@media (max-width:768px){.ChatMessage_root__JkQi6{padding:0 var(--p-2) var(--p-2)}}.ChatMessage_root__JkQi6+.ChatMessage_root__JkQi6{margin-top:20px}.ChatMessage_root__JkQi6 .ChatMessage_textContent__O-pxi{padding:0}.ChatMessage_root__JkQi6.ChatMessage_USER__UEEuA{align-items:flex-end;padding-right:var(--p-5)}.ChatMessage_root__JkQi6.ChatMessage_USER__UEEuA .ChatMessage_text__CNGXE{background-color:var(--active-color-alpha-500);padding:6px var(--p-2)}.ChatMessage_root__JkQi6.ChatMessage_AGENT__fvHxv .ChatMessage_textContent__O-pxi,.ChatMessage_root__JkQi6.ChatMessage_AGENT__fvHxv .ChatMessage_text__CNGXE{width:100%!important}.ChatMessage_root__JkQi6.ChatMessage_AGENT__fvHxv .ChatMessage_text__CNGXE{padding-top:4px}.ChatMessage_root__JkQi6.ChatMessage_SYSTEM__bkOnf{align-items:stretch}.ChatMessage_root__JkQi6.ChatMessage_SYSTEM__bkOnf+.ChatMessage_root__JkQi6.ChatMessage_SYSTEM__bkOnf{margin-top:-6px!important}.ChatMessage_root__JkQi6.ChatMessage_SYSTEM__bkOnf .ChatMessage_text__CNGXE{font-size:90%;opacity:.8;padding:0;width:100%}.ChatMessage_root__JkQi6.ChatMessage_stacked__LoLL0 .ChatMessage_meta__lMww1{display:none}.ChatMessage_text__CNGXE{border-radius:14px;display:flex;flex-direction:row;max-width:100%;overflow:hidden;padding:var(--p-2);width:-moz-fit-content;width:fit-content}.ChatMessage_textContent__O-pxi{max-width:100%;text-align:left;white-space:pre-line;word-break:break-word}.ChatMessage_textContent__O-pxi h1,.ChatMessage_textContent__O-pxi h2,.ChatMessage_textContent__O-pxi h3,.ChatMessage_textContent__O-pxi h4,.ChatMessage_textContent__O-pxi h5,.ChatMessage_textContent__O-pxi h6{margin-top:1em}.ChatMessage_textContent__O-pxi a{margin-bottom:-.1em;margin-top:-.3em;padding:0 .3em .1em .4em!important}.ChatMessage_SYSTEM__bkOnf .ChatMessage_textContent__O-pxi a{margin-bottom:0;margin-top:0}.ChatMessage_meta__lMww1{align-items:baseline;display:flex;font-size:11px;gap:6px;margin-bottom:4px;max-width:100%;opacity:.5;padding:0 4px}.ChatMessage_author__084lv{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ChatMessage_parts__z7LHI{display:flex;flex-direction:column;gap:var(--p-2)}.ChatMessage_mediaPart__A67rQ{border-radius:var(--p-2);max-height:320px;max-width:100%}.ChatMessage_systemFold__FUSrL{width:100%}.ChatMessage_systemFoldTrigger__35Hnd{max-width:100%;overflow:hidden;padding:2px 10px;text-overflow:ellipsis;white-space:nowrap}.ChatMessage_systemFoldContent__0G-uw{padding:0 10px}";
+var S = {"root":"ChatMessage_root__JkQi6","textContent":"ChatMessage_textContent__O-pxi","USER":"ChatMessage_USER__UEEuA","text":"ChatMessage_text__CNGXE","AGENT":"ChatMessage_AGENT__fvHxv","SYSTEM":"ChatMessage_SYSTEM__bkOnf","stacked":"ChatMessage_stacked__LoLL0","meta":"ChatMessage_meta__lMww1","author":"ChatMessage_author__084lv","parts":"ChatMessage_parts__z7LHI","mediaPart":"ChatMessage_mediaPart__A67rQ","systemFold":"ChatMessage_systemFold__FUSrL","systemFoldTrigger":"ChatMessage_systemFoldTrigger__35Hnd","systemFoldContent":"ChatMessage_systemFoldContent__0G-uw"};
             if (typeof document !== 'undefined') {
               var __uilibHead = document.head || document.getElementsByTagName('head')[0];
               if (__uilibHead) {

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

@@ -32,6 +32,7 @@ function ChatView({ messages, isPrompting, emptyLabel = 'Start the conversation'
                         const prev = visible[index - 1];
                         const isStacked = Boolean(prev) &&
                             prev.role === message.role &&
+                            prev.author === message.author &&
                             message.role !== 'SYSTEM';
                         return (jsx(ChatMessage, { data: message, isStacked: isStacked, isLastMessage: index === visible.length - 1, onButtonClick: onButtonClick }, message.id || `${message.role}-${index}`));
                     })] }), footer && (jsx("div", { className: cn(S.footer, footerClassName), children: footer }))] }));

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

@@ -82,15 +82,27 @@ function NestedMenuComponent({ trigger, items, open, onOpenChange, align = 'end'
     }
     function renderItemButton(item) {
         return (jsxs("button", { type: "button", className: cn(S.item, activeId === item.id && S.itemActive, item.danger && S.itemDanger, item.disabled && S.itemDisabled, item.wrap && S.wrap, item.className), role: "menuitem", disabled: item.disabled, "aria-haspopup": item.submenu ? 'menu' : undefined, "aria-expanded": item.submenu ? activeId === item.id : undefined, onPointerDown: e => {
+                // Touch/pen are handled on click: acting on pointerdown opens a
+                // Dialog under the finger, and the synthesized click then lands on
+                // its overlay and closes it immediately.
+                if (e.button === 0 && e.pointerType === 'mouse') {
+                    handleItemClick(item.id, e);
+                }
                 // Keep focus off underlying inputs (e.g. ChatSelector search).
+                // After the handler: it reads `defaultPrevented` to let an item's
+                // onClick keep the menu open.
                 e.preventDefault();
-                if (e.button === 0)
-                    handleItemClick(item.id, e);
+            }, onClick: e => {
+                // Mouse is handled on pointerdown; keyboard on keydown (detail 0).
+                const { pointerType } = e.nativeEvent;
+                if (e.detail === 0 || pointerType === 'mouse')
+                    return;
+                handleItemClick(item.id, e);
             }, onKeyDown: e => {
                 if (e.key !== 'Enter' && e.key !== ' ')
                     return;
-                e.preventDefault();
                 handleItemClick(item.id, e);
+                e.preventDefault();
             }, children: [item.icon && (jsx("span", { className: S.icon, "aria-hidden": true, children: item.icon })), item.hint != null && item.hint !== '' ? (jsxs("span", { className: S.text, children: [jsx("span", { className: S.label, children: item.label }), jsx("span", { className: S.hint, children: item.hint })] })) : (jsx("span", { className: S.label, children: item.label })), item.submenu && (jsx(Icon, { className: S.chevron, type: "chevronRight", size: iconSize }))] }));
     }
     function renderItems() {

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

@@ -28,6 +28,8 @@ export type ChatMessageData = {
     role: ChatRole;
     content: string;
     createdAt?: string | Date;
+    /** Sender display name, shown above the bubble. Hidden when `isStacked`. */
+    author?: ReactNode;
 };
 export type ChatFormattedTextProps = FormattedTextProps;
 export type ChatMessageProps = {

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

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/package.json

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