@adia-ai/web-components 0.0.28 → 0.0.29

package/patterns/adia-chat/adia-chat.js

@@ -1,297 +0,0 @@
-import { AdiaElement } from '../../core/element.js';
-import { renderMarkdown } from '../../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;
-
-/**
- * <adia-chat-ui> — Chat pattern component.
- *
- * Behavior-only orchestrator: stamps no HTML of its own.
- * The author writes the structure; adia-chat wires the behaviors.
- *
- * Structure:
- *   <adia-chat-ui 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>
- *   </adia-chat-ui>
- *
- * Two modes:
- *   1. Built-in: set proxy-url + model, adia-chat streams via LLM adapters
- *   2. External: listen for 'submit', call your API, use appendChunk() etc.
- *
- * Events: submit, chunk, thinking, done, error, abort, clear
- */
-class AdiaChatElement extends AdiaElement {
-  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('adia-chat-ui', AdiaChatElement);
-export { AdiaChatElement };

package/patterns/adia-chat/adia-chat.yaml

@@ -1,118 +0,0 @@
-$schema: ../../../../scripts/schemas/component.yaml.schema.json
-name: AdiaChatElement
-tag: adia-chat-ui
-component: Chat
-category: container
-version: 1
-description: |
-  Behavior-only chat orchestrator. Author supplies the DOM structure via
-  [data-chat-messages], [data-chat-input], [data-chat-empty], [data-chat-status]
-  elements; adia-chat 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:
-    - adia-chat is a behavior wrapper; don't nest col-ui/row-ui inside it directly —
-      author the structural DOM using [data-chat-*] markers instead.
-
-keywords: [adia-chat, chat, llm, streaming, conversation, agent]
-synonyms:
-  chat: [conversation, messages, thread]
-related: [ChatInput, Code]

package/patterns/adia-chat/css/adia-chat.empty.css

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

package/patterns/adia-chat/css/adia-chat.layout.css

@@ -1,60 +0,0 @@
-/* ═══════════════════════════════════════════════════════════════
-   adia-chat-ui — Root layout
-   ═══════════════════════════════════════════════════════════════ */
-
-adia-chat-ui {
-  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 */
-adia-chat-ui > 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;
-}
-
-adia-chat-ui > header [data-chat-name] {
-  font-weight: var(--chat-weight-semibold);
-  font-size: var(--chat-header-name-font);
-}
-
-adia-chat-ui > header [data-chat-status] {
-  font-size: var(--chat-header-status-font);
-  color: var(--chat-header-status-fg);
-  margin-inline-start: auto;
-}
-
-/* Messages scroll container */
-adia-chat-ui > [data-chat-messages],
-adia-chat-ui > 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 */
-adia-chat-ui > footer {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  padding: var(--chat-footer-py) var(--chat-footer-px);
-}
-
-adia-chat-ui > footer chat-input-ui {
-  flex: 1;
-}

package/patterns/adia-chat/css/adia-chat.markdown.css

@@ -1,74 +0,0 @@
-/* ═══════════════════════════════════════════════════════════════
-   adia-chat-ui — Markdown prose inside bubbles
-   ═══════════════════════════════════════════════════════════════ */
-
-adia-chat-ui [data-bubble] [data-content] {
-  white-space: normal;
-}
-
-adia-chat-ui [data-bubble] [data-content] p {
-  margin: 0 0 0.5em;
-}
-
-adia-chat-ui [data-bubble] [data-content] p:last-child {
-  margin-bottom: 0;
-}
-
-adia-chat-ui [data-bubble] [data-content] strong {
-  font-weight: var(--chat-weight-semibold);
-}
-
-adia-chat-ui [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;
-}
-
-adia-chat-ui [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;
-}
-
-adia-chat-ui [data-bubble] [data-content] pre code {
-  background: none;
-  padding: 0;
-  border-radius: 0;
-  font-size: inherit;
-}
-
-adia-chat-ui [data-bubble] [data-content] ul,
-adia-chat-ui [data-bubble] [data-content] ol {
-  margin: 0.25em 0;
-  padding-inline-start: 1.25em;
-}
-
-adia-chat-ui [data-bubble] [data-content] li {
-  margin-bottom: 0.15em;
-}
-
-adia-chat-ui [data-bubble] [data-content] a {
-  color: inherit;
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
-
-adia-chat-ui [data-bubble] [data-content] h1,
-adia-chat-ui [data-bubble] [data-content] h2,
-adia-chat-ui [data-bubble] [data-content] h3,
-adia-chat-ui [data-bubble] [data-content] h4 {
-  font-weight: var(--chat-weight-semibold);
-  margin: 0.75em 0 0.25em;
-}
-
-adia-chat-ui [data-bubble] [data-content] h1:first-child,
-adia-chat-ui [data-bubble] [data-content] h2:first-child,
-adia-chat-ui [data-bubble] [data-content] h3:first-child {
-  margin-top: 0;
-}

package/patterns/adia-chat/css/adia-chat.messages.css

@@ -1,87 +0,0 @@
-/* ═══════════════════════════════════════════════════════════════
-   adia-chat-ui — Message bubbles
-   ═══════════════════════════════════════════════════════════════ */
-
-/* Message row */
-adia-chat-ui [data-role] {
-  display: flex;
-  gap: var(--chat-header-gap);
-  align-items: flex-end;
-  max-width: var(--chat-message-max-width);
-}
-
-adia-chat-ui [data-role="user"] {
-  align-self: flex-end;
-  flex-direction: row-reverse;
-}
-
-adia-chat-ui [data-role="assistant"] {
-  align-self: flex-start;
-}
-
-/* Avatar */
-adia-chat-ui [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 */
-adia-chat-ui [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;
-}
-
-adia-chat-ui [data-role] [data-bubble] > :first-child { margin-block-start: 0; }
-adia-chat-ui [data-role] [data-bubble] > :last-child { margin-block-end: 0; }
-
-/* User bubble */
-adia-chat-ui [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 */
-adia-chat-ui [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 */
-adia-chat-ui [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) */
-adia-chat-ui [data-role] [data-actions] {
-  display: flex;
-  gap: var(--chat-actions-gap);
-  opacity: 0;
-  transition: opacity var(--chat-actions-duration) var(--chat-actions-easing);
-}
-
-adia-chat-ui [data-role]:hover [data-actions] {
-  opacity: 1;
-}

package/patterns/adia-chat/css/adia-chat.streaming.css

@@ -1,30 +0,0 @@
-/* ═══════════════════════════════════════════════════════════════
-   adia-chat-ui — Streaming states (cursor, thinking)
-   ═══════════════════════════════════════════════════════════════ */
-
-/* Blinking cursor during streaming */
-adia-chat-ui [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: adia-chat-blink var(--chat-cursor-speed) step-end infinite;
-}
-
-@keyframes adia-chat-blink {
-  50% { opacity: 0; }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  adia-chat-ui [data-cursor] {
-    animation: none;
-    opacity: 0.7;
-  }
-}
-
-/* Thinking indicator */
-adia-chat-ui [data-role="assistant"][data-thinking] [data-bubble] {
-  color: var(--chat-thinking-fg);
-}