create-amoxi-app 0.6.0 → 0.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-amoxi-app",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Create an Amoxi app: npx create-amoxi-app@latest my-app",
   "keywords": [
     "amoxi",

package/templates/agent/src/islands/Assistant.tsx

@@ -1,4 +1,4 @@
-import { agentChat, For, mountComponent, type ChatItem } from 'amoxi';
+import { agentChat, For, mountComponent, onMount, type ChatItem } from 'amoxi';
 
 /**
  * A chat with the `assistant` agent. Answers stream in token by token; tool steps, approvals and
@@ -7,8 +7,36 @@ import { agentChat, For, mountComponent, type ChatItem } from 'amoxi';
 export default function Assistant(props: { examples: string[] }) {
   const chat = agentChat('assistant');
   let input: HTMLInputElement | undefined;
+  let log!: HTMLElement;
+
+  // Text the agent writes just before using a tool ("Let me check that.") is narration, not an
+  // answer: it is shown as a quiet status line next to the step, and only answers get a bubble.
+  const isNarration = (item: ChatItem): boolean => {
+    const items = chat.items();
+    const next = items[items.findIndex((i) => i.id === item.id) + 1];
+    return next !== undefined && (next.kind === 'tool' || next.kind === 'approval' || next.kind === 'ui');
+  };
+
+  // Keep the newest message in view while answers stream in, unless the reader scrolled up.
+  let pinned = true;
+  onMount(() => {
+    const onScroll = (): void => {
+      pinned = log.scrollHeight - log.scrollTop - log.clientHeight < 80;
+    };
+    const follow = (): void => {
+      if (pinned) log.scrollTop = log.scrollHeight;
+    };
+    const watcher = new MutationObserver(follow);
+    watcher.observe(log, { childList: true, subtree: true, characterData: true });
+    log.addEventListener('scroll', onScroll, { passive: true });
+    return () => {
+      watcher.disconnect();
+      log.removeEventListener('scroll', onScroll);
+    };
+  });
 
   const send = (text: string): void => {
+    pinned = true;
     void chat.send(text);
     if (input) input.value = '';
   };
@@ -18,7 +46,7 @@ export default function Assistant(props: { examples: string[] }) {
       case 'user':
         return <p class="msg user">{item.text}</p>;
       case 'assistant':
-        return <p class="msg assistant">{item.text}</p>;
+        return <p class={() => (isNarration(item) ? 'msg narration' : 'msg answer')}>{item.text}</p>;
       case 'tool':
         return <p class="msg step">{item.status === 'running' ? 'Working: ' : 'Used '}{item.tool.replace(/_/g, ' ')}</p>;
       case 'ui':
@@ -43,8 +71,8 @@ export default function Assistant(props: { examples: string[] }) {
   };
 
   return (
-    <section class="assistant" aria-label="Assistant">
-      <div class="conversation" aria-live="polite">
+    <section class="chat" aria-label="Assistant">
+      <div class="conversation" aria-live="polite" ref={(el: HTMLElement) => (log = el)}>
         <For each={chat.items} key={(i) => i.id}>{render}</For>
         {() => (chat.status() === 'working' ? <p class="msg step">Thinking…</p> : null)}
       </div>

package/templates/agent/src/styles/assistant.css

@@ -1,5 +1,5 @@
 /* The assistant chat: uses the colours defined in app.css. */
-.assistant {
+.chat {
   display: grid;
   gap: 0.75rem;
   background: var(--surface);
@@ -12,7 +12,9 @@
 .conversation { display: grid; gap: 0.6rem; max-height: 60vh; overflow-y: auto; }
 .msg { margin: 0; padding: 0.6rem 0.8rem; border-radius: 10px; max-width: 85%; white-space: pre-wrap; line-height: 1.5; }
 .msg.user { justify-self: end; background: var(--accent); color: var(--accent-text); }
-.msg.assistant { background: var(--bg); }
+.msg.answer { background: var(--bg); }
+/* What the agent says just before using a tool: a status line, not an answer. */
+.msg.narration { color: var(--muted); font-size: 0.875rem; padding-block: 0.1rem; }
 .msg.step, .msg.progress { color: var(--muted); font-size: 0.875rem; padding-block: 0.1rem; }
 .msg.error { color: var(--danger); }
 .msg.ui { max-width: 100%; padding: 0; }