@adia-ai/web-modules 0.0.4

package/chat/chat-shell/chat-shell.js

@@ -0,0 +1,297 @@
+import { UIElement } from '../../../web-components/core/element.js';
+import { renderMarkdown } from '../../../web-components/core/markdown.js';
+import { streamChat } from '../../../a2ui/compose/llm/adapters/index.js';
+
+function escapeHTML(s) {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+let msgId = 0;
+
+/**
+ * <chat-shell> — LLM-streaming chat module.
+ *
+ * Behavior-only orchestrator: stamps no HTML of its own.
+ * The author writes the structure; chat-shell wires the behaviors.
+ *
+ * Structure:
+ *   <chat-shell proxy-url="/api/chat" model="claude-sonnet-4-20250514">
+ *     <header>
+ *       <span data-chat-name>Claude</span>
+ *       <span data-chat-status></span>
+ *     </header>
+ *     <section data-chat-messages>
+ *       <empty-state-ui data-chat-empty icon="chat-circle"
+ *         heading="Hello!" description="Ask me anything.">
+ *       </empty-state-ui>
+ *     </section>
+ *     <footer>
+ *       <chat-input-ui data-chat-input placeholder="Message..."></chat-input-ui>
+ *     </footer>
+ *   </chat-shell>
+ *
+ * Two modes:
+ *   1. Built-in: set proxy-url + model, chat-shell streams via LLM adapters
+ *   2. External: listen for 'submit', call your API, use appendChunk() etc.
+ *
+ * Events: submit, chunk, thinking, done, error, abort, clear
+ */
+class ChatShell extends UIElement {
+  static properties = {
+    streaming:  { type: Boolean, default: false, reflect: true },
+    provider:   { type: String,  default: '',    reflect: true },
+    model:      { type: String,  default: '',    reflect: true },
+    system:     { type: String,  default: '',    reflect: true },
+    proxyUrl:   { type: String,  default: '',    attribute: 'proxy-url', reflect: true },
+    thinking:   { type: Boolean, default: false, reflect: true },
+  };
+
+  static template = () => null;
+
+  #messages = [];
+  #abortController = null;
+  #messagesEl = null;
+  #inputEl = null;
+  #emptyEl = null;
+  #statusEl = null;
+  #apiKey = '';
+
+  // ── Accessors ──
+
+  get messages() { return [...this.#messages]; }
+
+  get conversation() {
+    return this.#messages
+      .filter(m => m.role === 'user' || m.role === 'assistant')
+      .map(m => ({ role: m.role, content: m.content }));
+  }
+
+  set conversation(msgs) {
+    this.clear();
+    for (const m of msgs) {
+      this.appendMessage({ role: m.role, content: m.content, render: true });
+    }
+  }
+
+  set apiKey(key) { this.#apiKey = key; }
+
+  // ── Lifecycle ──
+
+  connected() {
+    this.#messagesEl = this.querySelector('[data-chat-messages]') || this.querySelector('section');
+    this.#inputEl = this.querySelector('[data-chat-input]') || this.querySelector('chat-input-ui');
+    this.#emptyEl = this.querySelector('[data-chat-empty]');
+    this.#statusEl = this.querySelector('[data-chat-status]');
+
+    this.#inputEl?.addEventListener('submit', this.#onSubmit);
+  }
+
+  disconnected() {
+    this.#inputEl?.removeEventListener('submit', this.#onSubmit);
+    this.abort();
+  }
+
+  // ── Events ──
+
+  #emit(name, detail) {
+    this.dispatchEvent(new CustomEvent(name, { bubbles: true, detail }));
+  }
+
+  #onSubmit = (e) => {
+    if (this.streaming) return;
+    const { text, model } = e.detail || {};
+    if (!text) return;
+    this.#inputEl.clear();
+
+    this.#emit('submit', { text, model });
+
+    // If proxy-url or apiKey is set, auto-send
+    if (this.proxyUrl || this.#apiKey) {
+      this.send(text, model ? { model } : {});
+    }
+  };
+
+  // ── Message management ──
+
+  appendMessage({ role, content = '', render: renderMd = false }) {
+    const id = `msg_${++msgId}`;
+    this.#messages.push({ id, role, content });
+
+    const el = document.createElement('div');
+    el.setAttribute('data-role', role);
+    el.setAttribute('data-id', id);
+
+    if (role === 'user') {
+      el.innerHTML = `<div data-bubble>${escapeHTML(content)}</div>`;
+    } else if (role === 'assistant') {
+      const rendered = renderMd && content ? renderMarkdown(content) : escapeHTML(content);
+      el.innerHTML = `
+        <span data-avatar>AI</span>
+        <div data-bubble><div data-content>${rendered}</div>${!renderMd ? '<span data-cursor></span>' : ''}</div>
+      `;
+    } else if (role === 'error') {
+      el.innerHTML = `<icon-ui name="warning"></icon-ui><span>${escapeHTML(content)}</span>`;
+    }
+
+    this.#messagesEl?.appendChild(el);
+    this.#scrollToBottom();
+    this.#emit('message', { id, role, content });
+    return el;
+  }
+
+  appendChunk(text) {
+    const last = this.#messages[this.#messages.length - 1];
+    if (!last || last.role !== 'assistant') return;
+    last.content += text;
+
+    const contentEl = this.#messagesEl?.querySelector('[data-role]:last-child [data-content]');
+    if (contentEl) {
+      contentEl.insertAdjacentText('beforeend', text);
+    }
+    this.#scrollToBottom();
+  }
+
+  deleteMessage(id) {
+    const idx = this.#messages.findIndex(m => m.id === id);
+    if (idx === -1) return;
+    this.#messages.splice(idx, 1);
+    this.#messagesEl?.querySelector(`[data-id="${id}"]`)?.remove();
+  }
+
+  clear() {
+    this.#messages.length = 0;
+    if (this.#messagesEl) {
+      // Preserve empty state element
+      const empty = this.#emptyEl;
+      this.#messagesEl.innerHTML = '';
+      if (empty) this.#messagesEl.appendChild(empty);
+    }
+    this.#emit('clear');
+  }
+
+  // ── Streaming control ──
+
+  startStreaming() {
+    this.streaming = true;
+    if (this.#inputEl) this.#inputEl.disabled = true;
+    if (this.#statusEl) this.#statusEl.textContent = 'Typing...';
+  }
+
+  stopStreaming() {
+    this.streaming = false;
+    if (this.#inputEl) this.#inputEl.disabled = false;
+    if (this.#statusEl) this.#statusEl.textContent = '';
+
+    // Remove cursor
+    this.#messagesEl?.querySelector('[data-role]:last-child [data-cursor]')?.remove();
+
+    // Render markdown in last assistant bubble
+    const last = this.#messages[this.#messages.length - 1];
+    if (last?.role === 'assistant' && last.content) {
+      const contentEl = this.#messagesEl?.querySelector('[data-role]:last-child [data-content]');
+      if (contentEl) {
+        contentEl.innerHTML = renderMarkdown(last.content);
+        // Upgrade code blocks to code-ui
+        this.#upgradeCodeBlocks(contentEl);
+      }
+    }
+
+    this.#inputEl?.focus();
+  }
+
+  abort() {
+    if (this.#abortController) {
+      this.#abortController.abort();
+      this.#abortController = null;
+      this.#emit('abort');
+    }
+    if (this.streaming) this.stopStreaming();
+  }
+
+  // ── LLM send ──
+
+  async send(text, opts = {}) {
+    const model = opts.model || this.model || this.#inputEl?.model;
+    if (!model) throw new Error('No model specified');
+
+    this.appendMessage({ role: 'user', content: text });
+    this.appendMessage({ role: 'assistant', content: '' });
+    this.startStreaming();
+
+    this.#abortController = new AbortController();
+
+    try {
+      const streamOpts = {
+        provider: this.provider || undefined,
+        apiKey: this.#apiKey || undefined,
+        model,
+        system: this.system || undefined,
+        proxyUrl: this.proxyUrl || undefined,
+        thinking: this.thinking || undefined,
+        messages: this.conversation.slice(0, -1), // exclude empty assistant
+        signal: this.#abortController.signal,
+        ...opts,
+      };
+
+      for await (const chunk of streamChat(streamOpts)) {
+        if (chunk.type === 'text') {
+          this.appendChunk(chunk.text);
+          this.#emit('chunk', { text: chunk.text, snapshot: chunk.snapshot });
+        } else if (chunk.type === 'thinking') {
+          this.#emit('thinking', { text: chunk.text });
+        } else if (chunk.type === 'done') {
+          this.#emit('done', { text: chunk.text, usage: chunk.usage, stopReason: chunk.stopReason });
+        } else if (chunk.type === 'error') {
+          this.appendMessage({ role: 'error', content: chunk.error.message });
+          this.#emit('error', { error: chunk.error });
+        }
+      }
+    } catch (err) {
+      if (err.name !== 'AbortError') {
+        this.appendMessage({ role: 'error', content: err.message });
+        this.#emit('error', { error: err });
+      }
+    }
+
+    this.#abortController = null;
+    this.stopStreaming();
+  }
+
+  // ── Export / import ──
+
+  export() {
+    return {
+      messages: this.#messages.map(m => ({ role: m.role, content: m.content })),
+      model: this.model,
+      system: this.system,
+    };
+  }
+
+  import(data) {
+    if (data.model) this.model = data.model;
+    if (data.system) this.system = data.system;
+    if (data.messages) this.conversation = data.messages;
+  }
+
+  // ── Private ──
+
+  #scrollToBottom() {
+    const el = this.#messagesEl;
+    if (el) requestAnimationFrame(() => { el.scrollTop = el.scrollHeight; });
+  }
+
+  #upgradeCodeBlocks(container) {
+    for (const pre of container.querySelectorAll('pre')) {
+      const code = pre.querySelector('code');
+      if (!code) continue;
+      const lang = code.getAttribute('data-lang') || '';
+      const codeN = document.createElement('code-ui');
+      if (lang) codeN.setAttribute('language', lang);
+      codeN.textContent = code.textContent;
+      pre.replaceWith(codeN);
+    }
+  }
+}
+
+customElements.define('chat-shell', ChatShell);
+export { ChatShell };

package/chat/chat-shell/chat-shell.yaml

@@ -0,0 +1,119 @@
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: ChatShell
+tag: chat-shell
+component: ChatShell
+category: container
+version: 1
+description: |
+  Behavior-only chat orchestrator (LLM-streaming module). Author supplies the
+  DOM structure via [data-chat-messages], [data-chat-input], [data-chat-empty],
+  [data-chat-status] elements; chat-shell wires message streaming, markdown
+  rendering, code-block upgrades, and an LLM integration path via proxy-url
+  (or via external submit).
+
+props:
+  streaming:
+    type: boolean
+    default: false
+    reflect: true
+    description: Active streaming indicator; toggled while a response is being received.
+
+  provider:
+    type: string
+    default: ""
+    reflect: true
+    description: LLM provider name (anthropic | openai | google | stub).
+
+  model:
+    type: string
+    default: ""
+    reflect: true
+    description: Model identifier.
+
+  system:
+    type: string
+    default: ""
+    reflect: true
+    description: System prompt prepended to conversations.
+
+  proxyUrl:
+    type: string
+    default: ""
+    reflect: true
+    attribute: proxy-url
+    description: API proxy endpoint for LLM calls; enables self-contained chat without external wiring.
+
+  thinking:
+    type: boolean
+    default: false
+    reflect: true
+    description: Enable Anthropic extended-thinking mode.
+
+events:
+  submit:
+    description: Fired on user message submit (before LLM call begins).
+    detail:
+      text: string
+      model: string
+
+  chunk:
+    description: Fired for each streaming chunk.
+    detail:
+      text: string
+      snapshot: string
+
+  thinking:
+    description: Fired when the model emits extended-thinking content.
+    detail:
+      text: string
+
+  done:
+    description: Fired when a response completes.
+    detail:
+      text: string
+      usage: object
+      stopReason: string
+
+  error:
+    description: Fired on any LLM / network error.
+    detail:
+      error: Error
+
+  abort:
+    description: Fired when the user aborts an in-flight request.
+
+  clear:
+    description: Fired when the conversation is cleared.
+
+  message:
+    description: Fired after each message (user or assistant) is appended.
+    detail:
+      id: string
+      role: string
+      content: string
+
+slots:
+  default:
+    description: >-
+      Author provides the structural DOM. Expected markers —
+      [data-chat-messages] (message list), [data-chat-input] (input surface),
+      [data-chat-empty] (empty state), [data-chat-status] (streaming indicator).
+
+states:
+  - name: idle
+    description: No active request.
+  - name: streaming
+    attribute: streaming
+    description: An LLM request is in-flight; [data-chat-status] visible.
+
+traits: []
+
+a2ui:
+  rules:
+    - chat-shell is a behavior wrapper; don't nest col-ui/row-ui inside it directly —
+      author the structural DOM using [data-chat-*] markers instead.
+
+keywords: [chat-shell, chat, llm, streaming, conversation, agent]
+synonyms:
+  chat: [conversation, messages, thread]
+related: [ChatInput, Code]

package/chat/chat-shell/css/chat-shell.empty.css

@@ -0,0 +1,12 @@
+/* ═══════════════════════════════════════════════════════════════
+   chat-shell — Empty state
+   ═══════════════════════════════════════════════════════════════ */
+
+chat-shell [data-chat-empty] {
+  margin: auto;
+}
+
+chat-shell[streaming] [data-chat-empty],
+chat-shell:has([data-role]) [data-chat-empty] {
+  display: none;
+}

package/chat/chat-shell/css/chat-shell.layout.css

@@ -0,0 +1,60 @@
+/* ═══════════════════════════════════════════════════════════════
+   chat-shell — Root layout
+   ═══════════════════════════════════════════════════════════════ */
+
+chat-shell {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  border: var(--chat-border);
+  border-radius: var(--chat-radius);
+  background: var(--chat-bg);
+}
+
+/* Header */
+chat-shell > header {
+  display: flex;
+  align-items: center;
+  gap: var(--chat-header-gap);
+  min-height: var(--chat-header-height);
+  padding: 0 var(--chat-header-px);
+  border-bottom: var(--chat-header-border);
+  flex-shrink: 0;
+}
+
+chat-shell > header [data-chat-name] {
+  font-weight: var(--chat-weight-semibold);
+  font-size: var(--chat-header-name-font);
+}
+
+chat-shell > header [data-chat-status] {
+  font-size: var(--chat-header-status-font);
+  color: var(--chat-header-status-fg);
+  margin-inline-start: auto;
+}
+
+/* Messages scroll container */
+chat-shell > [data-chat-messages],
+chat-shell > section {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--chat-messages-py) var(--chat-messages-px);
+  display: flex;
+  flex-direction: column;
+  gap: var(--chat-messages-gap);
+  min-height: 0;
+}
+
+/* Footer */
+chat-shell > footer {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  padding: var(--chat-footer-py) var(--chat-footer-px);
+}
+
+chat-shell > footer chat-input-ui {
+  flex: 1;
+}

package/chat/chat-shell/css/chat-shell.markdown.css

@@ -0,0 +1,74 @@
+/* ═══════════════════════════════════════════════════════════════
+   chat-shell — Markdown prose inside bubbles
+   ═══════════════════════════════════════════════════════════════ */
+
+chat-shell [data-bubble] [data-content] {
+  white-space: normal;
+}
+
+chat-shell [data-bubble] [data-content] p {
+  margin: 0 0 0.5em;
+}
+
+chat-shell [data-bubble] [data-content] p:last-child {
+  margin-bottom: 0;
+}
+
+chat-shell [data-bubble] [data-content] strong {
+  font-weight: var(--chat-weight-semibold);
+}
+
+chat-shell [data-bubble] [data-content] code {
+  background: var(--chat-code-bg);
+  padding: 0.1em 0.15em;
+  border-radius: var(--chat-code-inline-radius);
+  font-family: var(--chat-code-inline-family);
+  font-size: 0.875em;
+}
+
+chat-shell [data-bubble] [data-content] pre {
+  background: var(--chat-code-bg);
+  border-radius: var(--chat-code-radius);
+  padding: var(--chat-code-block-px);
+  overflow-x: auto;
+  margin: var(--chat-code-block-my) 0;
+  font-size: var(--chat-code-block-font);
+  line-height: 1.5;
+}
+
+chat-shell [data-bubble] [data-content] pre code {
+  background: none;
+  padding: 0;
+  border-radius: 0;
+  font-size: inherit;
+}
+
+chat-shell [data-bubble] [data-content] ul,
+chat-shell [data-bubble] [data-content] ol {
+  margin: 0.25em 0;
+  padding-inline-start: 1.25em;
+}
+
+chat-shell [data-bubble] [data-content] li {
+  margin-bottom: 0.15em;
+}
+
+chat-shell [data-bubble] [data-content] a {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+chat-shell [data-bubble] [data-content] h1,
+chat-shell [data-bubble] [data-content] h2,
+chat-shell [data-bubble] [data-content] h3,
+chat-shell [data-bubble] [data-content] h4 {
+  font-weight: var(--chat-weight-semibold);
+  margin: 0.75em 0 0.25em;
+}
+
+chat-shell [data-bubble] [data-content] h1:first-child,
+chat-shell [data-bubble] [data-content] h2:first-child,
+chat-shell [data-bubble] [data-content] h3:first-child {
+  margin-top: 0;
+}

package/chat/chat-shell/css/chat-shell.messages.css

@@ -0,0 +1,87 @@
+/* ═══════════════════════════════════════════════════════════════
+   chat-shell — Message bubbles
+   ═══════════════════════════════════════════════════════════════ */
+
+/* Message row */
+chat-shell [data-role] {
+  display: flex;
+  gap: var(--chat-header-gap);
+  align-items: flex-end;
+  max-width: var(--chat-message-max-width);
+}
+
+chat-shell [data-role="user"] {
+  align-self: flex-end;
+  flex-direction: row-reverse;
+}
+
+chat-shell [data-role="assistant"] {
+  align-self: flex-start;
+}
+
+/* Avatar */
+chat-shell [data-role] [data-avatar] {
+  width: var(--chat-avatar-size);
+  height: var(--chat-avatar-size);
+  border-radius: var(--chat-avatar-radius);
+  background: var(--chat-avatar-bg);
+  color: var(--chat-avatar-fg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--chat-avatar-font);
+  font-weight: var(--chat-avatar-weight);
+  flex-shrink: 0;
+}
+
+/* Bubble */
+chat-shell [data-role] [data-bubble] {
+  padding: var(--chat-assistant-py) var(--chat-assistant-px);
+  border-radius: var(--chat-assistant-radius);
+  font-size: var(--chat-font-size);
+  line-height: var(--chat-line-height);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+chat-shell [data-role] [data-bubble] > :first-child { margin-block-start: 0; }
+chat-shell [data-role] [data-bubble] > :last-child { margin-block-end: 0; }
+
+/* User bubble */
+chat-shell [data-role="user"] [data-bubble] {
+  background: var(--chat-user-bg);
+  color: var(--chat-user-fg);
+  padding: var(--chat-user-py) var(--chat-user-px);
+  border-radius: var(--chat-user-radius);
+  border-bottom-right-radius: var(--chat-user-tail-radius);
+}
+
+/* Assistant bubble */
+chat-shell [data-role="assistant"] [data-bubble] {
+  background: var(--chat-assistant-bg);
+  color: var(--chat-assistant-fg);
+  border-bottom-left-radius: var(--chat-assistant-tail-radius);
+}
+
+/* Error message */
+chat-shell [data-role="error"] {
+  align-self: center;
+  max-width: none;
+  display: flex;
+  align-items: center;
+  gap: var(--chat-error-gap);
+  color: var(--chat-error-fg);
+  font-size: var(--chat-error-font);
+}
+
+/* Message actions (copy, regenerate) */
+chat-shell [data-role] [data-actions] {
+  display: flex;
+  gap: var(--chat-actions-gap);
+  opacity: 0;
+  transition: opacity var(--chat-actions-duration) var(--chat-actions-easing);
+}
+
+chat-shell [data-role]:hover [data-actions] {
+  opacity: 1;
+}

package/chat/chat-shell/css/chat-shell.streaming.css

@@ -0,0 +1,30 @@
+/* ═══════════════════════════════════════════════════════════════
+   chat-shell — Streaming states (cursor, thinking)
+   ═══════════════════════════════════════════════════════════════ */
+
+/* Blinking cursor during streaming */
+chat-shell [data-cursor] {
+  display: inline-block;
+  width: var(--chat-cursor-width);
+  height: 1em;
+  background: var(--chat-cursor-color);
+  margin-inline-start: 1px;
+  vertical-align: text-bottom;
+  animation: chat-shell-blink var(--chat-cursor-speed) step-end infinite;
+}
+
+@keyframes chat-shell-blink {
+  50% { opacity: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  chat-shell [data-cursor] {
+    animation: none;
+    opacity: 0.7;
+  }
+}
+
+/* Thinking indicator */
+chat-shell [data-role="assistant"][data-thinking] [data-bubble] {
+  color: var(--chat-thinking-fg);
+}