@nonoun/native-chat 0.5.7 → 0.5.8

package/README.md

@@ -0,0 +1,332 @@
+# @nonoun/native-chat
+
+Chat UI components for `@nonoun/native-ui` — message feed, composer input, streaming transport, and a top-level panel with imperative host-integration APIs.
+
+## Install
+
+```bash
+npm install @nonoun/native-chat @nonoun/native-ui
+```
+
+## Quick Start
+
+```html
+<link rel="stylesheet" href="node_modules/@nonoun/native-ui/dist/native-ui.css" />
+<link rel="stylesheet" href="node_modules/@nonoun/native-chat/dist/native-chat.css" />
+
+<script type="module">
+  import '@nonoun/native-ui/register';
+  import '@nonoun/native-chat/register';
+</script>
+
+<native-chat-panel auto-focus-policy="open-request">
+  <!-- panel stamps its own children: header, feed, composer -->
+</native-chat-panel>
+```
+
+## Components
+
+| Element | Description |
+|---------|-------------|
+| `native-chat-panel` | Top-level panel — owns lifecycle, focus policy, header actions |
+| `n-chat-feed` | Scrollable message feed with optional virtualization |
+| `n-chat-messages` | Message list wrapper (inside feed) |
+| `n-chat-message` | Single message container with role, status, actions |
+| `n-chat-message-text` | Markdown-rendered text bubble |
+| `n-chat-message-activity` | Typing / system activity indicator |
+| `n-chat-message-seed` | Seed prompt card |
+| `n-chat-message-genui` | Generative UI node renderer |
+| `n-chat-avatar` | Message avatar |
+| `n-chat-input` | Composer with submit, formatting, slash commands |
+| `n-chat-input-structured` | Multi-option structured input picker |
+
+---
+
+## Embedding Guide
+
+### Panel Host API
+
+`native-chat-panel` exposes three imperative methods for host orchestration:
+
+#### `open(options?)`
+
+```ts
+panel.open();
+panel.open({ focusComposer: true, reason: 'deeplink' });
+```
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `focusComposer` | `boolean` | `false` | Request composer focus after opening |
+| `reason` | `string` | — | Why the panel opened (telemetry / debugging) |
+
+Sets the `[open]` attribute. Idempotent — calling `open()` when already open does not re-emit events.
+
+#### `close(reason?)`
+
+```ts
+panel.close();
+panel.close('user-dismiss');
+```
+
+Removes the `[open]` attribute. Idempotent.
+
+#### `focusComposer(options?, by?)`
+
+```ts
+panel.focusComposer();
+panel.focusComposer({ cursor: 'end' }, 'api');
+```
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `cursor` | `'start' \| 'end' \| 'preserve'` | `'end'` | Caret placement after focus |
+| `by` | `'api' \| 'user' \| 'policy'` | `'api'` | Focus source (included in events) |
+
+Retries up to 3 times via microtask if the composer is not yet available or disabled. On success dispatches `native:composer-focused`; on failure dispatches `native:composer-focus-failed`.
+
+---
+
+### Lifecycle Events
+
+All events bubble and are composed (cross shadow DOM). Listen on the panel or any ancestor:
+
+```ts
+const panel = document.querySelector('native-chat-panel');
+
+panel.addEventListener('native:chat-opened', (e) => {
+  console.log('opened', e.detail.source, e.detail.focusComposer);
+});
+
+panel.addEventListener('native:chat-closed', (e) => {
+  console.log('closed', e.detail.reason);
+});
+
+panel.addEventListener('native:send', (e) => {
+  console.log('user sent:', e.detail.value);
+  // Call e.preventDefault() to block auto-clear
+});
+```
+
+| Event | Detail | Notes |
+|-------|--------|-------|
+| `native:chat-opened` | `{ source?: string, focusComposer: boolean }` | After panel opens |
+| `native:chat-closed` | `{ reason?: string }` | After panel closes |
+| `native:composer-focused` | `{ by: 'api' \| 'user' \| 'policy' }` | Composer received focus |
+| `native:composer-focus-failed` | `{ reason: string, attempts: number }` | All focus retries exhausted |
+| `native:send` | `{ value: string }` | User submitted message (**cancelable**) |
+| `native:chat-stop` | — | User clicked stop button |
+| `native:chat-restart` | — | User clicked restart button |
+| `native:message-action` | `{ action: string, messageId: string }` | Message action triggered |
+
+---
+
+### Focus Policy
+
+The `auto-focus-policy` attribute controls when the composer auto-focuses:
+
+| Value | Behavior |
+|-------|----------|
+| `open-request` (default) | Focus composer only when `open({ focusComposer: true })` is called |
+| `ready` | Auto-focus once at panel initialization |
+| `never` | Never auto-focus — host must call `focusComposer()` explicitly |
+
+**Recommended default:** `open-request` — gives the host full control over focus timing.
+
+#### Focus Failure Handling
+
+When `focusComposer()` cannot reach the textarea (not rendered, disabled, or blocked), the panel emits `native:composer-focus-failed` after 3 retry attempts:
+
+```ts
+panel.addEventListener('native:composer-focus-failed', (e) => {
+  const { reason, attempts } = e.detail;
+  // reason: 'composer-unavailable' | 'disabled' | 'blocked'
+  // Show a fallback hint or retry button
+});
+```
+
+**Recommended UX:** Keep the panel open, show a subtle status hint, and let the user retry manually.
+
+---
+
+### Host Orchestration Patterns
+
+#### Deeplink
+
+```ts
+// Parse URL: ?openChat=1
+if (new URLSearchParams(location.search).has('openChat')) {
+  panel.open({ focusComposer: true, reason: 'deeplink' });
+}
+```
+
+#### Notification or External Action
+
+```ts
+notificationButton.addEventListener('click', () => {
+  panel.open({ focusComposer: false, reason: 'notification' });
+});
+```
+
+#### Intercepting Send
+
+```ts
+panel.addEventListener('native:send', (e) => {
+  const { value } = e.detail;
+  if (!value.trim()) {
+    e.preventDefault(); // block auto-clear, ignore empty
+    return;
+  }
+  myTransport.send(value);
+});
+```
+
+---
+
+### Transport Error & Retry
+
+`createChatTransport()` provides a streaming transport layer with built-in error classification and retry logic.
+
+#### Transport States
+
+```
+idle → sending → streaming → ready
+                 ↘ retrying → sending (retry loop)
+                 ↘ rate-limited     (429)
+                 ↘ auth-required    (401/403)
+                 ↘ server-error     (5xx / network)
+                 ↘ offline          (DNS / TypeError)
+```
+
+#### Usage
+
+```ts
+import { createChatTransport } from '@nonoun/native-chat';
+
+const transport = createChatTransport({
+  baseUrl: '/api/chat',
+  format: 'sse',
+  retry: { maxAttempts: 3, baseDelayMs: 1000, maxDelayMs: 30000 },
+  onStateChange(status) {
+    // status: { state, statusCode?, retryInMs?, attempt?, maxAttempts?, error? }
+    switch (status.state) {
+      case 'sending':     showSpinner(); break;
+      case 'streaming':   hideSpinner(); break;
+      case 'retrying':    showRetryBanner(status.retryInMs); break;
+      case 'rate-limited': showRateLimitNotice(status.retryInMs); break;
+      case 'auth-required': redirectToLogin(); break;
+      case 'server-error': showErrorBanner(status.error); break;
+      case 'offline':     showOfflineBanner(); break;
+      case 'ready':       clearAllBanners(); break;
+    }
+  },
+});
+```
+
+#### Defaults & Behavior
+
+| Behavior | Default |
+|----------|---------|
+| Retry | Disabled (`maxAttempts: 1`) |
+| Retryable errors | 429 (rate-limited), 5xx (server error) |
+| Non-retryable | 401/403 (auth-required) — never retried |
+| 429 delay | Respects `Retry-After` header (seconds or HTTP-date) |
+| Backoff | Exponential: `min(maxDelay, baseDelay * 2^attempt + jitter)` |
+| Stream formats | `'sse'`, `'ndjson'`, `'json'` (auto-detected via `detectFormat()`) |
+
+#### Stream End Classification
+
+```ts
+import { classifyStreamEnd } from '@nonoun/native-chat';
+
+// Returns: 'complete' | 'partial' | 'error' | 'stopped'
+```
+
+| Reason | Meaning |
+|--------|---------|
+| `complete` | Server sent explicit done signal |
+| `partial` | Stream ended without completion (truncated) |
+| `error` | Transport or parse error |
+| `stopped` | Consumer aborted (user clicked stop) |
+
+Use `partial` status on messages to offer a "Continue" action.
+
+---
+
+### Message Actions
+
+Messages show contextual action buttons (copy, regenerate, edit, feedback):
+
+```html
+<n-chat-message role="assistant" actions="copy,regenerate,thumbs-up,thumbs-down">
+  <n-chat-message-text>Hello!</n-chat-message-text>
+</n-chat-message>
+```
+
+| Attribute | Values | Default |
+|-----------|--------|---------|
+| `actions` | Comma-separated action IDs, or `"none"` | Role-based defaults |
+| `actions-style` | `'icon' \| 'label' \| 'icon-label'` | `'icon'` |
+| `actions-position` | `'below' \| 'inside'` | `'below'` |
+
+Listen for actions on any ancestor:
+
+```ts
+panel.addEventListener('native:message-action', (e) => {
+  const { action, messageId } = e.detail;
+  if (action === 'copy') navigator.clipboard.writeText(getMessageText(messageId));
+});
+```
+
+---
+
+### Feed Virtualization
+
+For long transcripts, enable virtual scrolling on the feed:
+
+```html
+<n-chat-feed virtual virtual-item-height="80" virtual-overscan="5">
+  <n-chat-messages>...</n-chat-messages>
+</n-chat-feed>
+```
+
+Only visible items (plus overscan buffer) are rendered. The feed emits `native:range-change` with `{ start, end, total }` as the viewport scrolls.
+
+---
+
+## Exports
+
+```ts
+// Components
+import {
+  NChatPanel, NChatInput, NChatFeed, NChatMessage,
+  NChatMessages, NChatMessageText, NChatMessageActivity,
+  NChatAvatar, NChatMessageSeed, NChatMessageGenUI,
+  NChatInputStructured,
+} from '@nonoun/native-chat';
+
+// Stream / Transport
+import {
+  createChatTransport, createChatStream,
+  parseSSE, parseNDJSON, parseJSON, detectFormat,
+  classifyHttpError, classifyStreamEnd, backoffDelay,
+} from '@nonoun/native-chat';
+
+// Types
+import type {
+  AutoFocusPolicy, ChatPanelOpenOptions, FocusComposerOptions,
+  ChatTransportOptions, TransportState, TransportStatus, RetryOptions,
+  ChatStreamEvent, ChatStreamChunk, StreamFormat, StreamEndReason,
+} from '@nonoun/native-chat';
+
+// Utilities
+import { renderMarkdown, renderInline, sanitizeHtml } from '@nonoun/native-chat';
+```
+
+## Peer Dependency
+
+Requires `@nonoun/native-ui >= 0.6.0`.
+
+## License
+
+MIT

package/dist/{chat-input-structured-element-Bt9nkgXp.js → chat-input-structured-element-DPKHlnRm.js}

@@ -594,6 +594,7 @@ var p = class extends e {
 	#o = null;
 	#s = !1;
 	#c = 0;
+	#l = 0;
 	constructor() {
 		super(), this.#e = this.attachInternals();
 	}
@@ -656,40 +657,42 @@ var p = class extends e {
 		}
 	}
 	setup() {
-		super.setup(), this.addEventListener("pointerenter", this.#l), this.addEventListener("pointerleave", this.#u), this.addEffect(() => {
+		super.setup(), this.addEventListener("pointerenter", this.#u), this.addEventListener("pointerleave", this.#d), this.addEffect(() => {
 			let e = this.#t.value, t = this.#r.value, n = this.#i.value, r = this.#a.value, i = this.#n.value;
-			this.#f(e, t, n, r, i);
+			this.#p(e, t, n, r, i);
 		}), this.#e.role = "article";
 	}
 	teardown() {
-		this.removeEventListener("pointerenter", this.#l), this.removeEventListener("pointerleave", this.#u), clearTimeout(this.#c), this.#o &&= (this.#d(), null), super.teardown();
+		this.removeEventListener("pointerenter", this.#u), this.removeEventListener("pointerleave", this.#d), clearTimeout(this.#c), clearTimeout(this.#l), this.#o &&= (this.#f(), null), super.teardown();
 	}
-	#l = () => {
-		if (clearTimeout(this.#c), this.#o && this.#s && this.#n.value !== "partial") try {
-			this.#o.showPopover();
-		} catch {}
-	};
 	#u = () => {
-		!this.#s || this.#n.value === "partial" || (clearTimeout(this.#c), this.#c = window.setTimeout(() => {
+		clearTimeout(this.#l), !(!this.#o || !this.#s || this.#n.value === "partial") && (clearTimeout(this.#c), this.#c = window.setTimeout(() => {
+			try {
+				this.#o?.showPopover();
+			} catch {}
+		}, 300));
+	};
+	#d = () => {
+		!this.#s || this.#n.value === "partial" || (clearTimeout(this.#c), clearTimeout(this.#l), this.#l = window.setTimeout(() => {
 			try {
 				this.#o?.hidePopover();
 			} catch {}
 		}, 150));
 	};
-	#d() {
+	#f() {
 		if (this.#o) {
 			if (this.#s) {
-				this.#o.removeEventListener("pointerenter", this.#l), this.#o.removeEventListener("pointerleave", this.#u), this.#o.removeEventListener("focusin", this.#l), this.#o.removeEventListener("focusout", this.#u);
+				this.#o.removeEventListener("pointerenter", this.#u), this.#o.removeEventListener("pointerleave", this.#d), this.#o.removeEventListener("focusin", this.#u), this.#o.removeEventListener("focusout", this.#d);
 				try {
 					this.#o.hidePopover();
 				} catch {}
 				this.style.removeProperty("anchor-name"), this.#s = !1;
 			}
-			this.#o.removeEventListener("native:press", this.#p), this.#o.remove();
+			this.#o.removeEventListener("native:press", this.#m), this.#o.remove();
 		}
 	}
-	#f(e, t, n, r, a) {
-		if (this.#o &&= (this.#d(), null), clearTimeout(this.#c), t === "none" || this.querySelector("[slot=\"actions\"]")) return;
+	#p(e, t, n, r, a) {
+		if (this.#o &&= (this.#f(), null), clearTimeout(this.#l), t === "none" || this.querySelector("[slot=\"actions\"]")) return;
 		let o;
 		if (o = t ? t.split(",").map((e) => e.trim()).filter(Boolean) : f[e] ?? [], a === "partial" && !o.includes("continue") && (o = [...o, "continue"]), o.length === 0) return;
 		let s = document.createElement("n-toolbar");
@@ -699,15 +702,15 @@ var p = class extends e {
 			t && s.appendChild(m(e, t, n));
 		}
 		if (s.children.length !== 0) {
-			if (s.addEventListener("native:press", this.#p), r === "below") {
+			if (s.addEventListener("native:press", this.#m), r === "below") {
 				s.setAttribute("popover", "manual");
 				let e = i("msg");
-				this.style.setProperty("anchor-name", `--${e}`), s.style.setProperty("position-anchor", `--${e}`), this.appendChild(s), this.#s = !0, s.addEventListener("pointerenter", this.#l), s.addEventListener("pointerleave", this.#u), s.addEventListener("focusin", this.#l), s.addEventListener("focusout", this.#u), a === "partial" && s.showPopover();
+				this.style.setProperty("anchor-name", `--${e}`), s.style.setProperty("position-anchor", `--${e}`), this.appendChild(s), this.#s = !0, s.addEventListener("pointerenter", this.#u), s.addEventListener("pointerleave", this.#d), s.addEventListener("focusin", this.#u), s.addEventListener("focusout", this.#d), a === "partial" && s.showPopover();
 			} else this.appendChild(s);
 			this.#o = s;
 		}
 	}
-	#p = (e) => {
+	#m = (e) => {
 		let t = e.target?.getAttribute("data-action");
 		if (t) {
 			if (e.stopPropagation(), t === "continue") {

package/dist/message/chat-message-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chat-message-element.d.ts","sourceRoot":"","sources":["../../src/message/chat-message-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAe,MAAM,mBAAmB,CAAC;AAI/D,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,oBAAoB,CAOhE,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAGlD,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,YAAa,SAAQ,aAAa;;IAC7C,MAAM,CAAC,kBAAkB,WAAiG;;IAmB1H,IAAI,IAAI,IAAI,MAAM,CAA6B;IAC/C,IAAI,IAAI,CAAC,GAAG,EAAE,MAAM,EAGnB;IAED,IAAI,SAAS,IAAI,MAAM,CAAkD;IAEzE,IAAI,SAAS,IAAI,MAAM,CAAwD;IAE/E,IAAI,MAAM,IAAI,MAAM,CAA+B;IACnD,IAAI,MAAM,CAAC,GAAG,EAAE,MAAM,EAGrB;IAED,IAAI,OAAO,IAAI,MAAM,GAAG,IAAI,CAAgC;IAC5D,IAAI,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,EAO7B;IAED,IAAI,YAAY,IAAI,MAAM,CAAqC;IAC/D,IAAI,YAAY,CAAC,GAAG,EAAE,MAAM,EAG3B;IAED,IAAI,eAAe,IAAI,MAAM,CAAwC;IACrE,IAAI,eAAe,CAAC,GAAG,EAAE,MAAM,EAG9B;IAID,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAcpF,KAAK,IAAI,IAAI;IAqBb,QAAQ,IAAI,IAAI;CAgJjB"}
+{"version":3,"file":"chat-message-element.d.ts","sourceRoot":"","sources":["../../src/message/chat-message-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAe,MAAM,mBAAmB,CAAC;AAI/D,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,oBAAoB,CAOhE,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAGlD,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,YAAa,SAAQ,aAAa;;IAC7C,MAAM,CAAC,kBAAkB,WAAiG;;IAoB1H,IAAI,IAAI,IAAI,MAAM,CAA6B;IAC/C,IAAI,IAAI,CAAC,GAAG,EAAE,MAAM,EAGnB;IAED,IAAI,SAAS,IAAI,MAAM,CAAkD;IAEzE,IAAI,SAAS,IAAI,MAAM,CAAwD;IAE/E,IAAI,MAAM,IAAI,MAAM,CAA+B;IACnD,IAAI,MAAM,CAAC,GAAG,EAAE,MAAM,EAGrB;IAED,IAAI,OAAO,IAAI,MAAM,GAAG,IAAI,CAAgC;IAC5D,IAAI,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,EAO7B;IAED,IAAI,YAAY,IAAI,MAAM,CAAqC;IAC/D,IAAI,YAAY,CAAC,GAAG,EAAE,MAAM,EAG3B;IAED,IAAI,eAAe,IAAI,MAAM,CAAwC;IACrE,IAAI,eAAe,CAAC,GAAG,EAAE,MAAM,EAG9B;IAID,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAcpF,KAAK,IAAI,IAAI;IAqBb,QAAQ,IAAI,IAAI;CAoJjB"}

package/dist/native-chat.css

@@ -384,7 +384,8 @@
 
   /* Popover toolbar: anchored below the message via CSS anchor positioning.
      Toolbar is a child of n-chat-message with popover="manual", rendered in the
-     top layer. JS shows/hides via pointerenter/pointerleave + showPopover(). */
+     top layer. JS shows/hides via pointerenter/pointerleave + showPopover().
+     Entry/exit transition mirrors n-listbox[popover] (perspective + scale). */
   :where(n-chat-message) > :where(n-toolbar[data-role="actions"][popover]) {
     position: fixed;
     inset: auto;
@@ -393,6 +394,28 @@
     translate: -50% 0;
     margin: 2px 0 0;
     width: max-content;
+
+    transform-origin: top center;
+    opacity: 0;
+    transform: perspective(800px) scale(0.96) rotateX(-20deg);
+
+    transition:
+      opacity var(--n-duration) var(--n-easing),
+      transform var(--n-duration) var(--n-easing),
+      display var(--n-duration) var(--n-easing) allow-discrete,
+      overlay var(--n-duration) var(--n-easing) allow-discrete;
+  }
+
+  :where(n-chat-message) > :where(n-toolbar[data-role="actions"][popover]):popover-open {
+    opacity: 1;
+    transform: none;
+  }
+
+  @starting-style {
+    :where(n-chat-message) > :where(n-toolbar[data-role="actions"][popover]):popover-open {
+      opacity: 0;
+      transform: perspective(800px) scale(0.96) rotateX(-20deg);
+    }
   }
 
   /* Override n-toolbar display to respect popover hidden state */

package/dist/native-chat.js

@@ -1,4 +1,4 @@
-import { a as e, c as t, d as n, f as r, g as i, h as a, i as o, l as s, m as c, n as l, o as u, p as d, r as f, s as p, t as m, u as h } from "./chat-input-structured-element-Bt9nkgXp.js";
+import { a as e, c as t, d as n, f as r, g as i, h as a, i as o, l as s, m as c, n as l, o as u, p as d, r as f, s as p, t as m, u as h } from "./chat-input-structured-element-DPKHlnRm.js";
 /**
 * Parse a Server-Sent Events (SSE) response stream into ChatStreamChunk values.
 *

package/dist/register.js

@@ -1,4 +1,4 @@
-import { a as e, d as t, g as n, h as r, i, l as a, m as o, n as s, p as c, r as l, t as u } from "./chat-input-structured-element-Bt9nkgXp.js";
+import { a as e, d as t, g as n, h as r, i, l as a, m as o, n as s, p as c, r as l, t as u } from "./chat-input-structured-element-DPKHlnRm.js";
 import { NButton as d, NCard as f, NDialog as p, NIcon as m, NTextarea as h, NToolbar as g, define as _, registerIcon as v } from "@nonoun/native-ui";
 _("n-chat-input", n), _("native-chat-panel", r), _("n-chat-feed", o), _("n-chat-avatar", c), _("n-chat-message", t), _("n-chat-messages", a), _("n-chat-message-text", e), _("n-chat-message-activity", i), _("n-chat-message-seed", l), _("n-chat-message-genui", s), _("n-chat-input-structured", u), _("n-textarea", h), _("n-button", d), _("n-icon", m), _("n-toolbar", g), _("n-dialog", p), _("n-card", f), v("chat-dots", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M116,128a12,12,0,1,1,12,12A12,12,0,0,1,116,128ZM84,140a12,12,0,1,0-12-12A12,12,0,0,0,84,140Zm88,0a12,12,0,1,0-12-12A12,12,0,0,0,172,140Zm60-76V192a16,16,0,0,1-16,16H83l-32.6,28.16-.09.07A15.89,15.89,0,0,1,40,240a16.13,16.13,0,0,1-6.8-1.52A15.85,15.85,0,0,1,24,224V64A16,16,0,0,1,40,48H216A16,16,0,0,1,232,64ZM40,224h0ZM216,64H40V224l34.77-30A8,8,0,0,1,80,192H216Z\"/></svg>"), v("user", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8C55.71,194.74,89.05,176,128,176s72.29,18.74,89.07,44a8,8,0,0,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z\"/></svg>"), v("stop", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M200,40H56A16,16,0,0,0,40,56V200a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm0,160H56V56H200V200Z\"/></svg>"), v("arrow-counter-clockwise", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M224,128a96,96,0,0,1-94.71,96H128A95.38,95.38,0,0,1,62.1,197.8a8,8,0,0,1,11-11.63A80,80,0,1,0,71.43,71.39a3.07,3.07,0,0,1-.26.25L44.59,96H72a8,8,0,0,1,0,16H24a8,8,0,0,1-8-8V56a8,8,0,0,1,16,0V85.8L60.25,60A96,96,0,0,1,224,128Z\"/></svg>"), v("copy", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z\"/></svg>"), v("arrow-clockwise", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M240,56v48a8,8,0,0,1-8,8H184a8,8,0,0,1,0-16H211.4L184.81,71.64l-.25-.24a80,80,0,1,0-1.67,114.78,8,8,0,0,1,11,11.63A95.44,95.44,0,0,1,128,224h-1.32A96,96,0,1,1,195.75,60L224,85.8V56a8,8,0,1,1,16,0Z\"/></svg>"), v("pencil-simple", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z\"/></svg>"), v("thumbs-up", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M234,80.12A24,24,0,0,0,216,72H160V56a40,40,0,0,0-40-40,8,8,0,0,0-7.16,4.42L75.06,96H32a16,16,0,0,0-16,16v88a16,16,0,0,0,16,16H204a24,24,0,0,0,23.82-21l12-96A24,24,0,0,0,234,80.12ZM32,112H72v88H32ZM223.94,97l-12,96a8,8,0,0,1-7.94,7H88V105.89l36.71-73.43A24,24,0,0,1,144,56V80a8,8,0,0,0,8,8h64a8,8,0,0,1,7.94,9Z\"/></svg>"), v("thumbs-down", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M239.82,157l-12-96A24,24,0,0,0,204,40H32A16,16,0,0,0,16,56v88a16,16,0,0,0,16,16H75.06l37.78,75.58A8,8,0,0,0,120,240a40,40,0,0,0,40-40V184h56a24,24,0,0,0,23.82-27ZM72,144H32V56H72Zm150,21.29a7.88,7.88,0,0,1-6,2.71H152a8,8,0,0,0-8,8v24a24,24,0,0,1-19.29,23.54L88,150.11V56H204a8,8,0,0,1,7.94,7l12,96A7.87,7.87,0,0,1,222,165.29Z\"/></svg>"), v("arrow-right", "<svg viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z\"/></svg>");
 export { c as NChatAvatar, o as NChatFeed, n as NChatInput, u as NChatInputStructured, t as NChatMessage, i as NChatMessageActivity, s as NChatMessageGenUI, l as NChatMessageSeed, e as NChatMessageText, a as NChatMessages, r as NChatPanel };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nonoun/native-chat",
-  "version": "0.5.7",
+  "version": "0.5.8",
   "description": "Chat input and message layout components for @nonoun/native-ui",
   "license": "MIT",
   "type": "module",