@adia-ai/web-components 0.0.1

package/components/chat/chat-input.js

@@ -0,0 +1,242 @@
+import { AdiaElement } from '@core/element.js';
+
+/**
+ * <chat-input-ui> — Composable chat input bar.
+ *
+ * Structure (stamped by default):
+ *   <chat-input-ui>
+ *     <textarea-ui placeholder="Type a message..." rows="1"></textarea-ui>
+ *     <div slot="toolbar">
+ *       <select-ui slot="model" placeholder="Model">...</select-ui>
+ *       <button-ui icon="paper-plane-right" variant="primary" slot="send"></button-ui>
+ *     </div>
+ *   </chat-input-ui>
+ *
+ * Layout:
+ *   ┌──────────────────────────────────┐
+ *   │  textarea (grows vertically)     │
+ *   ├──────────────────────────────────┤
+ *   │  [model ▾]           [⏎ send]   │  ← toolbar
+ *   └──────────────────────────────────┘
+ *
+ * Properties:
+ *   models       — JSON array of model options: [{value, label}] or [{label, options: [...]}]
+ *   model        — currently selected model value (reflected, two-way with select)
+ *   placeholder  — textarea placeholder
+ *   disabled     — disable entire input
+ *
+ * Events:
+ *   submit   — user pressed Enter or clicked send (detail: { text, model })
+ *
+ * Note:
+ *   Composite wrapper, not a form field itself. The inner textarea-ui is
+ *   form-associated via AdiaFormElement and submits through the parent
+ *   form. `chat-input-ui`'s `disabled` / `placeholder` props propagate to
+ *   the inner textarea.
+ */
+class AdiaChatInput extends AdiaElement {
+  static properties = {
+    disabled:    { type: Boolean, default: false, reflect: true },
+    placeholder: { type: String,  default: 'Type a message...', reflect: true },
+    model:       { type: String,  default: '', reflect: true },
+  };
+
+  static template = () => null;
+
+  #textareaEl = null;
+  #sendEl = null;
+  #modelEl = null;
+  #attachBtn = null;
+  #models = [];
+
+  #attachments = []; // [{ type: 'image', dataUrl, name }]
+  #previewEl = null;
+  #fileInput = null;
+
+  #onAttachPress = () => this.#fileInput?.click();
+  #onFileInputChange = () => {
+    if (this.#fileInput?.files?.length) this.#addImages(this.#fileInput.files);
+    if (this.#fileInput) this.#fileInput.value = '';
+  };
+
+  get value() { return this.#textareaEl?.value?.trim() ?? ''; }
+  get attachments() { return [...this.#attachments]; }
+
+  /** Set model options programmatically: [{value, label}] or [{label, options: [...]}] */
+  set models(list) {
+    this.#models = list || [];
+    if (this.#modelEl) {
+      this.#modelEl.options = this.#models;
+      // Set value after options so the display text resolves
+      if (this.model) {
+        this.#modelEl.value = this.model;
+      }
+    }
+  }
+
+  get models() { return this.#models; }
+
+  connected() {
+    if (!this.querySelector('[slot="toolbar"]')) {
+      this.innerHTML = `
+        <textarea-ui placeholder="${this.placeholder}" rows="1"></textarea-ui>
+        <div slot="toolbar">
+          <select-ui slot="model" placeholder="Model" divider></select-ui>
+          <button-ui icon="paper-plane-right" variant="ghost" slot="send"></button-ui>
+        </div>
+      `;
+    }
+
+    this.#textareaEl = this.querySelector('textarea-ui');
+    this.#sendEl = this.querySelector('[slot="send"]');
+    this.#modelEl = this.querySelector('[slot="model"]');
+
+    // Apply models if set before connected (options first, then value)
+    if (this.#models.length && this.#modelEl) {
+      this.#modelEl.options = this.#models;
+      if (this.model) this.#modelEl.value = this.model;
+    }
+
+    // Image attach button + hidden file input
+    const toolbar = this.querySelector('[slot="toolbar"]');
+    if (toolbar && !toolbar.querySelector('[slot="attach"]')) {
+      this.#fileInput = document.createElement('input');
+      this.#fileInput.type = 'file';
+      this.#fileInput.accept = 'image/*';
+      this.#fileInput.multiple = true;
+      this.#fileInput.style.display = 'none';
+      this.appendChild(this.#fileInput);
+
+      this.#attachBtn = document.createElement('button-ui');
+      this.#attachBtn.setAttribute('icon', 'image');
+      this.#attachBtn.setAttribute('variant', 'ghost');
+      this.#attachBtn.setAttribute('slot', 'attach');
+      this.#attachBtn.setAttribute('size', 'sm');
+      const sendBtn = toolbar.querySelector('[slot="send"]');
+      toolbar.insertBefore(this.#attachBtn, sendBtn);
+      this.#attachBtn.addEventListener('press', this.#onAttachPress);
+      this.#fileInput.addEventListener('change', this.#onFileInputChange);
+    }
+
+    // Preview strip for attached images
+    this.#previewEl = document.createElement('div');
+    this.#previewEl.setAttribute('slot', 'preview');
+    this.#previewEl.hidden = true;
+    this.insertBefore(this.#previewEl, this.querySelector('[slot="toolbar"]'));
+
+    // Paste handler for images
+    this.addEventListener('paste', this.#onPaste);
+
+    this.#sendEl?.addEventListener('press', this.#onSubmit);
+    this.#textareaEl?.addEventListener('submit', this.#onSubmit);
+    this.#modelEl?.addEventListener('change', this.#onModelChange);
+    this.addEventListener('pointerdown', this.#onPointerDown);
+  }
+
+  render() {
+    if (this.#textareaEl) {
+      this.#textareaEl.disabled = this.disabled;
+      this.#textareaEl.placeholder = this.placeholder;
+    }
+    // Sync model value to select (handles late upgrades)
+    if (this.#modelEl && this.model && this.#modelEl.value !== this.model) {
+      this.#modelEl.value = this.model;
+    }
+  }
+
+  #onPointerDown = (e) => {
+    if (e.target.closest('button-ui, select-ui, input-ui, a')) return;
+    requestAnimationFrame(() => this.#textareaEl?.focus());
+  };
+
+  #onModelChange = () => {
+    this.model = this.#modelEl?.value || '';
+  };
+
+  #onSubmit = () => {
+    if (this.disabled) return;
+    const text = this.value;
+    if (!text && !this.#attachments.length) return;
+    this.dispatchEvent(new CustomEvent('submit', {
+      bubbles: true,
+      detail: { text, model: this.model, attachments: this.attachments },
+    }));
+  };
+
+  // ── Image handling ──
+
+  #onPaste = (e) => {
+    const items = e.clipboardData?.items;
+    if (!items) return;
+    const images = [...items].filter(i => i.type.startsWith('image/'));
+    if (images.length === 0) return;
+    e.preventDefault();
+    const files = images.map(i => i.getAsFile()).filter(Boolean);
+    if (files.length) this.#addImages(files);
+  };
+
+  #addImages(files) {
+    for (const file of files) {
+      const reader = new FileReader();
+      reader.onload = () => {
+        this.#attachments.push({ type: 'image', dataUrl: reader.result, name: file.name });
+        this.#renderPreviews();
+      };
+      reader.readAsDataURL(file);
+    }
+  }
+
+  #removeAttachment(index) {
+    this.#attachments.splice(index, 1);
+    this.#renderPreviews();
+  }
+
+  #renderPreviews() {
+    if (!this.#previewEl) return;
+    this.#previewEl.innerHTML = '';
+    this.#previewEl.hidden = this.#attachments.length === 0;
+    this.#attachments.forEach((a, i) => {
+      const wrap = document.createElement('div');
+      wrap.setAttribute('data-preview-item', '');
+      const img = document.createElement('img');
+      img.src = a.dataUrl;
+      img.alt = a.name || 'attachment';
+      const btn = document.createElement('button');
+      btn.textContent = '×';
+      btn.setAttribute('data-preview-remove', '');
+      btn.addEventListener('click', () => this.#removeAttachment(i));
+      wrap.appendChild(img);
+      wrap.appendChild(btn);
+      this.#previewEl.appendChild(wrap);
+    });
+  }
+
+  clear() {
+    this.#textareaEl?.clear();
+    this.#attachments = [];
+    if (this.#previewEl) { this.#previewEl.innerHTML = ''; this.#previewEl.hidden = true; }
+  }
+
+  focus() {
+    this.#textareaEl?.focus();
+  }
+
+  disconnected() {
+    this.removeEventListener('paste', this.#onPaste);
+    this.#sendEl?.removeEventListener('press', this.#onSubmit);
+    this.#textareaEl?.removeEventListener('submit', this.#onSubmit);
+    this.#modelEl?.removeEventListener('change', this.#onModelChange);
+    this.#attachBtn?.removeEventListener('press', this.#onAttachPress);
+    this.#fileInput?.removeEventListener('change', this.#onFileInputChange);
+    this.removeEventListener('pointerdown', this.#onPointerDown);
+    this.#textareaEl = null;
+    this.#sendEl = null;
+    this.#modelEl = null;
+    this.#attachBtn = null;
+    this.#previewEl = null;
+    this.#fileInput = null;
+  }
+}
+customElements.define('chat-input-ui', AdiaChatInput);
+
+export { AdiaChatInput };

package/components/chat/chat.a2ui.json

@@ -0,0 +1,181 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Chat.json",
+  "title": "Chat",
+  "description": "Minimal chat container.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "Chat"
+    },
+    "streaming": {
+      "description": "Component property: streaming.",
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "agent",
+    "events": {
+      "chat-submit": {
+        "description": "Fired on chat-submit."
+      }
+    },
+    "examples": [
+      {
+        "description": "Basic Chat usage",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"comp\"\n    ]\n  },\n  {\n    \"id\": \"comp\",\n    \"component\": \"Chat\"\n  }\n]",
+        "name": "basic-chat"
+      },
+      {
+        "description": "Chat transcript with user and assistant messages; role attribute styles turns.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Chat\",\n    \"children\": [\n      \"m1\",\n      \"m2\"\n    ]\n  },\n  {\n    \"id\": \"m1\",\n    \"component\": \"Text\",\n    \"role\": \"user\",\n    \"textContent\": \"What's the capital of France?\"\n  },\n  {\n    \"id\": \"m2\",\n    \"component\": \"Text\",\n    \"role\": \"assistant\",\n    \"textContent\": \"The capital of France is Paris.\"\n  }\n]",
+        "name": "basic"
+      },
+      {
+        "description": "Chat with streaming cursor on an in-progress assistant message.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Chat\",\n    \"streaming\": true,\n    \"children\": [\n      \"m1\",\n      \"m2\"\n    ]\n  },\n  {\n    \"id\": \"m1\",\n    \"component\": \"Text\",\n    \"role\": \"user\",\n    \"textContent\": \"Explain black holes briefly.\"\n  },\n  {\n    \"id\": \"m2\",\n    \"component\": \"Text\",\n    \"role\": \"assistant\",\n    \"streaming\": true,\n    \"textContent\": \"A black hole is a region of spacetime where gravity is so strong that\"\n  }\n]",
+        "name": "streaming"
+      },
+      {
+        "description": "Chat transcript composed with ChatInput for a full conversation surface.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Column\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"chat\",\n      \"input\"\n    ]\n  },\n  {\n    \"id\": \"chat\",\n    \"component\": \"Chat\",\n    \"children\": [\n      \"m1\",\n      \"m2\"\n    ]\n  },\n  {\n    \"id\": \"m1\",\n    \"component\": \"Text\",\n    \"role\": \"user\",\n    \"textContent\": \"Give me a short haiku about the ocean.\"\n  },\n  {\n    \"id\": \"m2\",\n    \"component\": \"Text\",\n    \"role\": \"assistant\",\n    \"textContent\": \"Waves whisper secrets — the tide retreats then returns, carrying the moon.\"\n  },\n  {\n    \"id\": \"input\",\n    \"component\": \"ChatInput\",\n    \"placeholder\": \"Type a message...\"\n  }\n]",
+        "name": "with-input"
+      }
+    ],
+    "keywords": [
+      "chat",
+      "message",
+      "messaging",
+      "sms",
+      "chatbot",
+      "conversation",
+      "ai-chat",
+      "messenger",
+      "assistant",
+      "copilot",
+      "gpt",
+      "llm",
+      "ai",
+      "bot",
+      "prompt",
+      "comment",
+      "support"
+    ],
+    "name": "AdiaChat",
+    "related": [],
+    "slots": {
+      "default": {
+        "description": "Default slot — primary child content."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "ai": [
+        "chat",
+        "streaming",
+        "response",
+        "command"
+      ],
+      "ai-chat": [
+        "chat",
+        "streaming",
+        "response"
+      ],
+      "assistant": [
+        "chat",
+        "streaming",
+        "response",
+        "command"
+      ],
+      "bot": [
+        "chat",
+        "streaming",
+        "response"
+      ],
+      "chatbot": [
+        "chat",
+        "streaming",
+        "response"
+      ],
+      "comment": [
+        "social",
+        "post",
+        "chat"
+      ],
+      "conversation": [
+        "chat",
+        "streaming",
+        "response"
+      ],
+      "copilot": [
+        "chat",
+        "streaming",
+        "response",
+        "command"
+      ],
+      "gpt": [
+        "chat",
+        "streaming",
+        "response"
+      ],
+      "llm": [
+        "chat",
+        "streaming",
+        "response"
+      ],
+      "message": [
+        "chat",
+        "notification",
+        "toast",
+        "alert"
+      ],
+      "messaging": [
+        "chat",
+        "notification",
+        "streaming"
+      ],
+      "messenger": [
+        "chat",
+        "streaming"
+      ],
+      "prompt": [
+        "chat",
+        "streaming",
+        "command",
+        "palette"
+      ],
+      "sms": [
+        "chat",
+        "notification"
+      ],
+      "support": [
+        "faq",
+        "accordion",
+        "chat"
+      ]
+    },
+    "tag": "chat-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/chat/chat.css

@@ -0,0 +1,193 @@
+@scope (chat-ui) {
+  :where(:scope) {
+    /* ── Layout ── */
+    --chat-border-color:          var(--a-border-subtle);
+    --chat-radius:                var(--a-radius-lg);
+    --chat-bg:                    var(--a-bg);
+    --chat-gap:                   var(--a-space-2);
+    --chat-padding-y:             var(--a-space-3);
+    --chat-padding-x:             var(--a-space-4);
+    --chat-messages-padding:      var(--a-space-4);
+    --chat-messages-gap:          var(--a-space-3);
+    --chat-footer-padding:        var(--a-space-3);
+    /* Component-intrinsic measurement; no --a-space-* equivalent */
+    --chat-footer-min-height:     36px;
+
+    /* ── Motion ── */
+    --chat-cursor-duration:       0.8s;
+
+    /* ── Header avatar ── */
+    --chat-header-avatar-size:    var(--a-size-md);
+    --chat-header-avatar-radius:  var(--a-radius-full);
+    --chat-header-avatar-bg:      var(--a-bg-muted);
+    --chat-header-avatar-fg:      var(--a-fg-subtle);
+
+    /* ── Message avatar ── */
+    --chat-msg-avatar-radius:     var(--a-radius-full);
+    --chat-msg-avatar-bg:         var(--a-bg-muted);
+    --chat-msg-avatar-fg:         var(--a-fg-subtle);
+
+    /* ── Bubble ── */
+    --chat-bubble-padding-y:      var(--a-space-2);
+    --chat-bubble-padding-x:      var(--a-space-3);
+    --chat-bubble-radius:         var(--a-radius-lg);
+    --chat-bubble-tail-radius:    var(--a-radius-sm);
+
+    /* ── Bubble: user ── */
+    --chat-user-bg:               var(--a-primary);
+    --chat-user-fg:               var(--a-primary-fg);
+
+    /* ── Bubble: assistant ── */
+    --chat-assistant-bg:          var(--a-bg-subtle);
+    --chat-assistant-fg:          var(--a-fg);
+
+    /* ── Typography ── */
+    --chat-header-avatar-size-font: var(--a-ui-md);
+    --chat-header-avatar-weight:  var(--a-weight-semibold);
+    --chat-header-name-size:      var(--a-ui-lg);
+    --chat-header-name-weight:    var(--a-weight-semibold);
+    --chat-header-status-size:    var(--a-ui-md);
+    --chat-header-status-fg:      var(--a-fg-muted);
+    --chat-msg-avatar-size-font:  var(--a-ui-sm);
+    --chat-msg-avatar-weight:     var(--a-weight-semibold);
+    --chat-bubble-font-size:      var(--a-body-size);
+    --chat-bubble-line-height:    var(--a-leading-normal);
+  }
+
+  :scope {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+    border: 1px solid var(--chat-border-color);
+    border-radius: var(--chat-radius);
+    background: var(--chat-bg);
+  }
+
+  /* -- Header -- */
+  > header {
+    display: flex;
+    align-items: center;
+    gap: var(--chat-gap);
+    padding: var(--chat-padding-y) var(--chat-padding-x);
+    border-bottom: 1px solid var(--chat-border-color);
+  }
+
+  > header [slot="avatar"] {
+    width: var(--chat-header-avatar-size);
+    height: var(--chat-header-avatar-size);
+    border-radius: var(--chat-header-avatar-radius);
+    background: var(--chat-header-avatar-bg);
+    color: var(--chat-header-avatar-fg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--chat-header-avatar-size-font);
+    font-weight: var(--chat-header-avatar-weight);
+    flex-shrink: 0;
+  }
+
+  > header [slot="name"] {
+    font-weight: var(--chat-header-name-weight);
+    font-size: var(--chat-header-name-size);
+  }
+
+  > header [slot="status"] {
+    font-size: var(--chat-header-status-size);
+    color: var(--chat-header-status-fg);
+    margin-inline-start: auto;
+  }
+
+  /* -- Messages -- */
+  > section {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--chat-messages-padding);
+    display: flex;
+    flex-direction: column;
+    gap: var(--chat-messages-gap);
+  }
+
+  /* -- Message -- */
+  [data-role] {
+    display: flex;
+    gap: var(--chat-gap);
+    align-items: flex-end;
+    max-width: 85%;
+  }
+
+  [data-role="user"] {
+    align-self: flex-end;
+    flex-direction: row-reverse;
+  }
+
+  [data-role="assistant"] {
+    align-self: flex-start;
+  }
+
+  [data-role] [slot="avatar"] {
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: var(--chat-msg-avatar-radius);
+    background: var(--chat-msg-avatar-bg);
+    color: var(--chat-msg-avatar-fg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--chat-msg-avatar-size-font);
+    font-weight: var(--chat-msg-avatar-weight);
+    flex-shrink: 0;
+  }
+
+  [data-role] [slot="bubble"] {
+    padding: var(--chat-bubble-padding-y) var(--chat-bubble-padding-x);
+    border-radius: var(--chat-bubble-radius);
+    font-size: var(--chat-bubble-font-size);
+    line-height: var(--chat-bubble-line-height);
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  [data-role] [slot="bubble"] > :first-child { margin-block-start: 0; }
+  [data-role] [slot="bubble"] > :last-child { margin-block-end: 0; }
+
+  [data-role="user"] [slot="bubble"] {
+    background: var(--chat-user-bg);
+    color: var(--chat-user-fg);
+    border-bottom-right-radius: var(--chat-bubble-tail-radius);
+  }
+
+  [data-role="assistant"] [slot="bubble"] {
+    background: var(--chat-assistant-bg);
+    color: var(--chat-assistant-fg);
+    border-bottom-left-radius: var(--chat-bubble-tail-radius);
+  }
+
+  /* -- Streaming cursor -- */
+  [slot="cursor"] {
+    display: inline-block;
+    width: 2px;
+    height: 1em;
+    background: currentColor;
+    margin-inline-start: 1px;
+    vertical-align: text-bottom;
+    animation: ui-blink var(--chat-cursor-duration) step-end infinite;
+  }
+
+  /* -- Footer -- */
+  > footer {
+    min-height: var(--chat-footer-min-height);
+    display: flex;
+    align-items: center;
+    padding: var(--chat-footer-padding);
+  }
+}
+
+@keyframes ui-blink {
+  50% { opacity: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  chat-ui [slot="cursor"] { animation: none; opacity: 0.7; }
+}