@adia-ai/web-components 0.4.5 → 0.4.7

package/components/chat-thread/class.js

@@ -0,0 +1,176 @@
+/**
+ * Non-side-effect class export for `<chat-thread-ui>`.
+ *
+ * Importing this file gives you the class(es) without auto-registering the tag.
+ * Useful for test isolation, subclassing with tag-name override, or selective
+ * composition.
+ *
+ * The auto-register path stays at `@adia-ai/web-components/components/chat-thread`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+import { UIElement } from '../../core/element.js';
+import { renderMarkdown } from '../../core/markdown.js';
+
+function escapeHTML(s) {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+/**
+ * <chat-thread-ui> — Minimal chat-thread container.
+ *
+ * Structure:
+ *   <chat-thread-ui>
+ *     <header>
+ *       <span slot="avatar">AI</span>
+ *       <span slot="name">Assistant</span>
+ *     </header>
+ *     <section>
+ *       <!-- messages rendered here -->
+ *     </section>
+ *     <footer>
+ *       <chat-input-ui placeholder="Type a message..."></chat-input-ui>
+ *     </footer>
+ *   </chat-thread-ui>
+ *
+ * JS API:
+ *   chat.appendMessage({ role: 'user', content: 'Hello' })
+ *   chat.appendMessage({ role: 'assistant', content: 'Hi!' })
+ *   chat.appendChunk('token')       // append to last assistant message
+ *   chat.startStreaming()            // show cursor, disable input
+ *   chat.stopStreaming()             // hide cursor, enable input
+ *   chat.clear()
+ *   chat.messages                   // read all messages
+ *
+ * Events:
+ *   submit       — user pressed send (detail: { text, model })
+ */
+export class UIChatThread extends UIElement {
+  static properties = {
+    streaming: { type: Boolean, default: false, reflect: true },
+  };
+
+  static template = () => null; // wrapper mode
+
+  #messages = [];
+  #messagesEl = null;
+  #inputEl = null;
+  #scrollRaf = null;
+
+  get messages() { return [...this.#messages]; }
+
+  connected() {
+    // Stamp default structure if empty
+    if (!this.querySelector('header') && !this.querySelector('section')) {
+      this.innerHTML = `
+        <header>
+          <span slot="avatar">AI</span>
+          <span slot="name">Assistant</span>
+        </header>
+        <section></section>
+        <footer>
+          <chat-input-ui placeholder="Type a message..."></chat-input-ui>
+        </footer>
+      `;
+    }
+
+    this.#messagesEl = this.querySelector('section');
+    this.#inputEl = this.querySelector('chat-input-ui');
+
+    this.#inputEl?.addEventListener('submit', this.#onSubmit);
+  }
+
+  disconnected() {
+    if (this.#scrollRaf != null) {
+      cancelAnimationFrame(this.#scrollRaf);
+      this.#scrollRaf = null;
+    }
+    this.#inputEl?.removeEventListener('submit', this.#onSubmit);
+    this.#messagesEl = null;
+    this.#inputEl = null;
+  }
+
+  #onSubmit = (e) => {
+    if (this.streaming) return;
+    const { text, model } = e.detail || {};
+    if (!text) return;
+    this.#inputEl.clear();
+    this.dispatchEvent(new CustomEvent('submit', { bubbles: true, detail: { text, model } }));
+  };
+
+  appendMessage({ role, content = '', render = false }) {
+    this.#messages.push({ role, content });
+    const el = document.createElement('div');
+    el.setAttribute('data-role', role);
+
+    const body = render ? renderMarkdown(content) : escapeHTML(content);
+
+    if (role === 'user') {
+      el.innerHTML = `<div slot="bubble">${body}</div>`;
+    } else {
+      const cursor = render ? '' : '<span slot="cursor"></span>';
+      el.innerHTML = `
+        <span slot="avatar">${role === 'assistant' ? 'AI' : role[0].toUpperCase()}</span>
+        <div slot="bubble">${body}${cursor}</div>
+      `;
+    }
+
+    this.#messagesEl?.appendChild(el);
+    this.#scrollToBottom();
+    return el;
+  }
+
+  appendChunk(text) {
+    const last = this.#messages[this.#messages.length - 1];
+    if (!last || last.role === 'user') return;
+    last.content += text;
+
+    const bubble = this.#messagesEl?.querySelector('[data-role]:last-child [slot="bubble"]');
+    if (bubble) {
+      const cursor = bubble.querySelector('[slot="cursor"]');
+      if (cursor) cursor.remove();
+      bubble.insertAdjacentText('beforeend', text);
+      bubble.insertAdjacentHTML('beforeend', '<span slot="cursor"></span>');
+    }
+    this.#scrollToBottom();
+  }
+
+  startStreaming() {
+    this.streaming = true;
+    if (this.#inputEl) this.#inputEl.disabled = true;
+  }
+
+  stopStreaming() {
+    this.streaming = false;
+    if (this.#inputEl) this.#inputEl.disabled = false;
+    // Remove cursor from last message
+    this.#messagesEl?.querySelector('[data-role]:last-child [slot="cursor"]')?.remove();
+
+    // Render markdown in the last assistant bubble
+    const last = this.#messages[this.#messages.length - 1];
+    if (last && last.role === 'assistant' && last.content) {
+      const bubble = this.#messagesEl?.querySelector('[data-role]:last-child [slot="bubble"]');
+      if (bubble) bubble.innerHTML = renderMarkdown(last.content);
+    }
+
+    this.#inputEl?.focus();
+  }
+
+  clear() {
+    this.#messages.length = 0;
+    if (this.#messagesEl) this.#messagesEl.innerHTML = '';
+  }
+
+  #scrollToBottom() {
+    const el = this.#messagesEl;
+    if (!el) return;
+    if (this.#scrollRaf != null) cancelAnimationFrame(this.#scrollRaf);
+    this.#scrollRaf = requestAnimationFrame(() => {
+      this.#scrollRaf = null;
+      if (!this.isConnected) return;
+      el.scrollTop = el.scrollHeight;
+    });
+  }
+}

package/components/check/check.d.ts

@@ -0,0 +1,30 @@
+/**
+ * `<check-ui>` — Checkbox (boolean-semantic form control).
+ *
+ * @see https://ui-kit.exe.xyz/site/components/check
+ */
+
+import { UIFormElement } from '../../core/form.js';
+
+export interface CheckChangeEventDetail {
+  /** Submitted value (defaults to `"on"` when checked). */
+  value: string;
+  /** Current checked state. */
+  checked: boolean;
+}
+export type CheckChangeEvent = CustomEvent<CheckChangeEventDetail>;
+
+export class UICheck extends UIFormElement {
+  /** Checked state — reflected, toggles on click/Space/Enter. */
+  checked: boolean;
+  /** Indeterminate (mixed) state — visual only; cleared on click. */
+  indeterminate: boolean;
+  label: string;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UICheck, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'change', listener: (ev: CheckChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

package/components/check/check.js

@@ -1,58 +1,17 @@
 /**
- * <check-ui> — Checkbox. The host IS the control.
- * Pure CSS checkmark via border trick on [slot="box"]::after. No SVG.
+ * `<check-ui>` — auto-registers the tag on import.
+ *
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
+ *
+ *   import { UICheck } from '@adia-ai/web-components/components/check/class';
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-import { UIFormElement } from '../../core/form.js';
-import { html } from '../../core/element.js';
+import { defineIfFree } from '../../core/register.js';
+import { UICheck } from './class.js';
 
-class UICheck extends UIFormElement {
-  static properties = {
-    ...UIFormElement.properties,
-    checked:       { type: Boolean, default: false, reflect: true },
-    indeterminate: { type: Boolean, default: false, reflect: true },
-    label:         { type: String,  default: '', reflect: true },
-  };
-
-  static template = () => html`<span slot="box"></span>`;
-
-  connected() {
-    super.connected();
-    this.setAttribute('role', 'checkbox');
-    this.setAttribute('tabindex', '0');
-    this.addEventListener('click', this.#toggle);
-    this.addEventListener('keydown', this.#onKey);
-  }
-
-  render() {
-    if (this.indeterminate) {
-      this.setAttribute('aria-checked', 'mixed');
-    } else {
-      this.setAttribute('aria-checked', String(this.checked));
-    }
-    if (this.disabled) this.setAttribute('aria-disabled', 'true');
-    else this.removeAttribute('aria-disabled');
-    if (this.label) this.setAttribute('aria-label', this.label);
-    this.syncValue(this.checked ? (this.value || 'on') : '');
-  }
-
-  #toggle = () => {
-    if (this.disabled) return;
-    this.checked = !this.checked;
-    this.indeterminate = false;
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value, checked: this.checked } }));
-  };
-
-  #onKey = (e) => {
-    if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); this.#toggle(); }
-  };
-
-  disconnected() {
-    super.disconnected();
-    this.removeEventListener('click', this.#toggle);
-    this.removeEventListener('keydown', this.#onKey);
-  }
-}
-customElements.define('check-ui', UICheck);
+defineIfFree('check-ui', UICheck);
 
 export { UICheck };

package/components/check/class.js

@@ -0,0 +1,68 @@
+/**
+ * Non-side-effect class export for `<check-ui>`.
+ *
+ * Importing this file gives you the class(es) without auto-registering the tag.
+ * Useful for test isolation, subclassing with tag-name override, or selective
+ * composition.
+ *
+ * The auto-register path stays at `@adia-ai/web-components/components/check`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+/**
+ * <check-ui> — Checkbox. The host IS the control.
+ * Pure CSS checkmark via border trick on [slot="box"]::after. No SVG.
+ */
+
+import { UIFormElement } from '../../core/form.js';
+import { html } from '../../core/element.js';
+
+export class UICheck extends UIFormElement {
+  static properties = {
+    ...UIFormElement.properties,
+    checked:       { type: Boolean, default: false, reflect: true },
+    indeterminate: { type: Boolean, default: false, reflect: true },
+    label:         { type: String,  default: '', reflect: true },
+  };
+
+  static template = () => html`<span slot="box"></span>`;
+
+  connected() {
+    super.connected();
+    this.setAttribute('role', 'checkbox');
+    this.setAttribute('tabindex', '0');
+    this.addEventListener('click', this.#toggle);
+    this.addEventListener('keydown', this.#onKey);
+  }
+
+  render() {
+    if (this.indeterminate) {
+      this.setAttribute('aria-checked', 'mixed');
+    } else {
+      this.setAttribute('aria-checked', String(this.checked));
+    }
+    if (this.disabled) this.setAttribute('aria-disabled', 'true');
+    else this.removeAttribute('aria-disabled');
+    if (this.label) this.setAttribute('aria-label', this.label);
+    this.syncValue(this.checked ? (this.value || 'on') : '');
+  }
+
+  #toggle = () => {
+    if (this.disabled) return;
+    this.checked = !this.checked;
+    this.indeterminate = false;
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value, checked: this.checked } }));
+  };
+
+  #onKey = (e) => {
+    if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); this.#toggle(); }
+  };
+
+  disconnected() {
+    super.disconnected();
+    this.removeEventListener('click', this.#toggle);
+    this.removeEventListener('keydown', this.#onKey);
+  }
+}