@adia-ai/web-components 0.0.1

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@adia-ai/web-components",
+  "version": "0.0.1",
+  "description": "AdiaUI web components — vanilla custom elements + A2UI runtime. Training corpus lives in @adia-ai/gen-ui-training.",
+  "type": "module",
+  "exports": {
+    ".":         "./index.js",
+    "./css":     "./index.css",
+    "./a2ui":    "./a2ui/index.js",
+    "./core":    "./core/index.js"
+  },
+  "files": [
+    "core/",
+    "components/",
+    "styles/",
+    "traits/",
+    "patterns/",
+    "a2ui/",
+    "index.js",
+    "index.css"
+  ],
+  "sideEffects": [
+    "*.css",
+    "./index.js",
+    "./components/**/*.js",
+    "./patterns/**/*.js",
+    "./core/provider.js"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/adiahealth/gen-ui-kit.git",
+    "directory": "packages/web-components"
+  }
+}

package/patterns/adia-chat/adia-chat.a2ui.json

@@ -0,0 +1,149 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Chat.json",
+  "title": "Chat",
+  "description": "Behavior-only chat orchestrator. Author supplies the DOM structure via\n[data-chat-messages], [data-chat-input], [data-chat-empty], [data-chat-status]\nelements; adia-chat wires message streaming, markdown rendering, code-block\nupgrades, and an LLM integration path via proxy-url (or via external submit).\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "Chat"
+    },
+    "model": {
+      "description": "Model identifier.",
+      "type": "string",
+      "default": ""
+    },
+    "provider": {
+      "description": "LLM provider name (anthropic | openai | google | stub).",
+      "type": "string",
+      "default": ""
+    },
+    "proxyUrl": {
+      "description": "API proxy endpoint for LLM calls; enables self-contained chat without external wiring.",
+      "type": "string",
+      "default": ""
+    },
+    "streaming": {
+      "description": "Active streaming indicator; toggled while a response is being received.",
+      "type": "boolean",
+      "default": false
+    },
+    "system": {
+      "description": "System prompt prepended to conversations.",
+      "type": "string",
+      "default": ""
+    },
+    "thinking": {
+      "description": "Enable Anthropic extended-thinking mode.",
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "container",
+    "events": {
+      "abort": {
+        "description": "Fired when the user aborts an in-flight request."
+      },
+      "chunk": {
+        "description": "Fired for each streaming chunk.",
+        "detail": {
+          "snapshot": "string",
+          "text": "string"
+        }
+      },
+      "clear": {
+        "description": "Fired when the conversation is cleared."
+      },
+      "done": {
+        "description": "Fired when a response completes.",
+        "detail": {
+          "stopReason": "string",
+          "text": "string",
+          "usage": "object"
+        }
+      },
+      "error": {
+        "description": "Fired on any LLM / network error.",
+        "detail": {
+          "error": "Error"
+        }
+      },
+      "message": {
+        "description": "Fired after each message (user or assistant) is appended.",
+        "detail": {
+          "content": "string",
+          "id": "string",
+          "role": "string"
+        }
+      },
+      "submit": {
+        "description": "Fired on user message submit (before LLM call begins).",
+        "detail": {
+          "model": "string",
+          "text": "string"
+        }
+      },
+      "thinking": {
+        "description": "Fired when the model emits extended-thinking content.",
+        "detail": {
+          "text": "string"
+        }
+      }
+    },
+    "examples": [],
+    "keywords": [
+      "adia-chat",
+      "chat",
+      "llm",
+      "streaming",
+      "conversation",
+      "agent"
+    ],
+    "name": "AdiaChatElement",
+    "related": [
+      "ChatInput",
+      "Code"
+    ],
+    "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": [
+      {
+        "description": "No active request.",
+        "name": "idle"
+      },
+      {
+        "description": "An LLM request is in-flight; [data-chat-status] visible.",
+        "attribute": "streaming",
+        "name": "streaming"
+      }
+    ],
+    "synonyms": {
+      "chat": [
+        "conversation",
+        "messages",
+        "thread"
+      ]
+    },
+    "tag": "adia-chat-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

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

@@ -0,0 +1,10 @@
+/* ═══════════════════════════════════════════════════════════════
+   adia-chat — Pattern component CSS
+   ═══════════════════════════════════════════════════════════════ */
+
+@import "./css/adia-chat.tokens.css";
+@import "./css/adia-chat.layout.css";
+@import "./css/adia-chat.messages.css";
+@import "./css/adia-chat.streaming.css";
+@import "./css/adia-chat.markdown.css";
+@import "./css/adia-chat.empty.css";

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

@@ -0,0 +1,297 @@
+import { AdiaElement } from '@core/element.js';
+import { renderMarkdown } from '@core/markdown.js';
+import { streamChat } from '@llm/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

@@ -0,0 +1,118 @@
+$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

@@ -0,0 +1,12 @@
+/* ═══════════════════════════════════════════════════════════════
+   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

@@ -0,0 +1,60 @@
+/* ═══════════════════════════════════════════════════════════════
+   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;
+}