anentrypoint-design 0.0.162 → 0.0.164

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.162",
+  "version": "0.0.164",
   "description": "247420 design system SDK — webjsx + modified ripple-ui, single-file ESM bundle for reproducible use of the AnEntrypoint design.",
   "type": "module",
   "main": "./dist/247420.js",

package/src/components/chat.js

@@ -140,8 +140,13 @@ export function ChatMessage({ role, who = 'them', avatar, text, parts, time, typ
 }
 
 export function ChatComposer({ value, onInput, onSend, onAttach, onEmoji, onMenu, placeholder = 'message…', disabled }) {
+    // Keep a handle to the live textarea so send() reads the actual DOM value
+    // (not the possibly-lagging `value` prop) and so we can sync the DOM value
+    // only when it genuinely differs — re-applying `value` on every parent
+    // re-render otherwise resets the caret and drops fast keystrokes.
+    let taEl = null;
     const send = () => {
-        const v = (value || '').trim();
+        const v = ((taEl && taEl.value) || value || '').trim();
         if (!v || disabled) return;
         if (onSend) onSend(v);
     };
@@ -161,11 +166,16 @@ export function ChatComposer({ value, onInput, onSend, onAttach, onEmoji, onMenu
     };
     const taRef = (el) => {
         if (!el) return;
+        taEl = el;
+        // Sync the controlled value into the DOM only when it actually differs,
+        // so a re-render mid-type does not clobber the caret or pending input.
+        const next = value || '';
+        if (el.value !== next) el.value = next;
         el.style.height = 'auto';
         el.style.height = Math.min(el.scrollHeight, 200) + 'px';
     };
     return h('div', { class: 'chat-composer' },
-        h('textarea', { ref: taRef, value: value || '', placeholder, rows: 1, 'aria-label': 'message input',
+        h('textarea', { ref: taRef, placeholder, rows: 1, 'aria-label': 'message input',
             oninput: autoGrow,
             onkeydown: (e) => {
                 if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); }
@@ -215,13 +225,16 @@ export function Chat({ title = 'chat', sub, messages = [], composer, header } =
         el.dataset.msgCount = String(messages.length);
         return () => obs.disconnect();
     };
+    const msgCount = messages.length;
     return h('div', { class: 'chat' },
         header || h('div', { class: 'chat-head', role: 'banner' },
             h('span', { class: 'dot', 'aria-hidden': 'true' }),
             h('h2', { class: 'ds-chat-title' }, title),
             sub ? h('span', { class: 'sub', 'aria-label': `subtitle: ${sub}` }, ' · ' + sub) : null,
             h('span', { class: 'spread' }),
-            h('span', { class: 'sub', 'aria-live': 'polite' }, String(messages.length).padStart(2, '0') + ' msgs')
+            msgCount > 0
+                ? h('span', { class: 'sub', 'aria-live': 'polite' }, msgCount + (msgCount === 1 ? ' message' : ' messages'))
+                : null
         ),
         h('div', { class: 'chat-thread', ref: threadRef, role: 'log', 'aria-label': 'chat messages' },
             messages.length === 0
@@ -289,7 +302,9 @@ export function AICat({ name = 'aicat', messages = [], thinking, composer, statu
             h('h2', { class: 'ds-chat-title' }, name),
             h('span', { class: 'sub', 'aria-label': `status: ${status}` }, ' · ' + status),
             h('span', { class: 'spread' }),
-            h('span', { class: 'sub', 'aria-live': 'polite' }, String(messages.length).padStart(2, '0') + ' turns')
+            messages.length > 0
+                ? h('span', { class: 'sub', 'aria-live': 'polite' }, messages.length + (messages.length === 1 ? ' turn' : ' turns'))
+                : null
         ),
         h('div', { class: 'chat-thread', ref: threadRef, role: 'log', 'aria-label': 'conversation turns' },
             ...all.map((m, i) => ChatMessage({ ...m, key: m.key != null ? m.key : i }))