@alashi/cli 0.1.1 → 0.2.1

package/assets/v1/chat.js

@@ -0,0 +1,296 @@
+/* alashi chat component v1
+ *
+ * The system chat UI, served by the host. Apps drop in:
+ *
+ *   <script src="/assets/v1/chat.js"></script>
+ *   <alashi-chat></alashi-chat>
+ *
+ * and get conversations, SSE streaming, markdown rendering, tool-use status,
+ * and cost display. Renders into light DOM using system.css classes, so it
+ * inherits the app's theme tokens.
+ *
+ * Attributes:
+ *   app          app name (default: derived from /app/<name>/ in the URL)
+ *   placeholder  input placeholder text
+ *
+ * Methods:
+ *   adoptSession(sessionId, title)  create a conversation resuming an
+ *                                   existing engine session, then open it
+ *   openConversation(id)            open a conversation by id
+ *   newChat()                       start a fresh conversation
+ *
+ * Events (bubble):
+ *   alashi-chat:turn          detail: { ok, costUsd, error, conversationId }
+ *   alashi-chat:conversation  detail: { conversationId }
+ *
+ * Breaking changes ship as /assets/v2/chat.js. */
+
+(() => {
+  if (customElements.get('alashi-chat')) return;
+
+  const escapeHtml = (s) =>
+    s
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;');
+
+  const safeHref = (url) => (/^https?:\/\//i.test(url) ? url : null);
+  // Images may also be same-origin paths (app-served artifacts, e.g.
+  // /app/<name>/api/chart.png) — but not protocol-relative //host URLs.
+  const safeSrc = (url) =>
+    safeHref(url) ?? (url.startsWith('/') && !url.startsWith('//') ? url : null);
+
+  /* Minimal markdown for chat: escape-first, then rebuild known-safe tags.
+   * Supports fenced code, inline code, bold, italic, links, images,
+   * headings, unordered/ordered lists, paragraphs. */
+  function renderMarkdown(text) {
+    // NUL delimits internal placeholders; never allow it in from outside.
+    const escaped = escapeHtml(text.replaceAll('\u0000', ''));
+    const blocks = [];
+    // Pull out fenced code blocks first so nothing inside is transformed.
+    const withoutFences = escaped.replace(/```(\w*)\n?([\s\S]*?)```/g, (_m, _lang, code) => {
+      blocks.push(`<pre><code>${code.replace(/\n$/, '')}</code></pre>`);
+      return `\u0000${blocks.length - 1}\u0000`;
+    });
+
+    const inline = (s) =>
+      s
+        .replace(/`([^`]+)`/g, '<code>$1</code>')
+        .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
+        .replace(/(^|\W)\*([^*\s][^*]*)\*/g, '$1<em>$2</em>')
+        // Images before links: ![alt](url) contains a link-shaped tail.
+        .replace(/!\[([^\]]*)\]\(([^)\s]+)\)/g, (m, alt, url) => {
+          const src = safeSrc(url);
+          return src ? `<img src="${src}" alt="${alt}" loading="lazy">` : m;
+        })
+        .replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, (m, label, url) => {
+          const href = safeHref(url);
+          return href
+            ? `<a href="${href}" target="_blank" rel="noopener noreferrer">${label}</a>`
+            : m;
+        });
+
+    const html = withoutFences
+      .split(/\n{2,}/)
+      .map((chunk) => {
+        const t = chunk.trim();
+        if (t === '') return '';
+        // biome-ignore lint/suspicious/noControlCharactersInRegex: NUL is the internal placeholder delimiter
+        if (/^\u0000\d+\u0000$/.test(t)) return t; // fenced block placeholder
+        const heading = t.match(/^(#{1,4})\s+(.*)$/);
+        if (heading && !t.includes('\n')) {
+          const level = heading[1].length + 2; // h3..h6 inside a bubble
+          return `<h${level}>${inline(heading[2])}</h${level}>`;
+        }
+        const lines = t.split('\n');
+        if (lines.every((l) => /^\s*[-*]\s+/.test(l))) {
+          return `<ul>${lines.map((l) => `<li>${inline(l.replace(/^\s*[-*]\s+/, ''))}</li>`).join('')}</ul>`;
+        }
+        if (lines.every((l) => /^\s*\d+\.\s+/.test(l))) {
+          return `<ol>${lines.map((l) => `<li>${inline(l.replace(/^\s*\d+\.\s+/, ''))}</li>`).join('')}</ol>`;
+        }
+        return `<p>${lines.map(inline).join('<br>')}</p>`;
+      })
+      .join('');
+
+    // biome-ignore lint/suspicious/noControlCharactersInRegex: NUL is the internal placeholder delimiter
+    return html.replace(/\u0000(\d+)\u0000/g, (_m, i) => blocks[Number(i)]);
+  }
+
+  function el(tag, props = {}, children = []) {
+    const node = document.createElement(tag);
+    Object.assign(node, props);
+    for (const child of children) node.append(child);
+    return node;
+  }
+
+  class AlashiChat extends HTMLElement {
+    connectedCallback() {
+      if (this._initialized) return;
+      this._initialized = true;
+      this.conversationId = null;
+      this._render();
+      this._loadConversations()
+        .then((conversations) => {
+          if (conversations.length > 0) this.openConversation(conversations[0].id);
+        })
+        .catch(() => {});
+    }
+
+    get app() {
+      return this.getAttribute('app') ?? decodeURIComponent(window.location.pathname.split('/')[2]);
+    }
+
+    _hostApi(path) {
+      return `/api/apps/${encodeURIComponent(this.app)}${path}`;
+    }
+
+    _render() {
+      this._log = el('div', { className: 'chat-log' });
+      this._input = el('input', {
+        type: 'text',
+        placeholder: this.getAttribute('placeholder') ?? 'Say something',
+        autocomplete: 'off',
+      });
+      this._send = el('button', { className: 'primary', type: 'submit', textContent: 'Send' });
+      this._status = el('div', { className: 'chat-status' });
+      this._list = el('ul', { className: 'conversations' });
+      const form = el('form', { className: 'chat-form' }, [this._input, this._send]);
+      form.addEventListener('submit', (event) => {
+        event.preventDefault();
+        this._submit();
+      });
+      const newChat = el('button', { type: 'button', textContent: '+ New chat' });
+      newChat.addEventListener('click', () => this.newChat());
+      this.append(
+        el('div', { className: 'chat-layout' }, [
+          el('div', { className: 'panel conversations-panel' }, [newChat, this._list]),
+          el('div', { className: 'panel chat-main' }, [this._log, form, this._status]),
+        ]),
+      );
+    }
+
+    _appendMsg(text, role) {
+      const div = el('div', { className: `msg ${role}` });
+      this._setMsgText(div, text, role);
+      this._log.appendChild(div);
+      this._log.scrollTop = this._log.scrollHeight;
+      return div;
+    }
+
+    _setMsgText(div, text, role) {
+      // User text stays plain; assistant text is markdown-rendered from an
+      // escape-first pipeline (renderMarkdown escapes before rebuilding tags).
+      if (role === 'assistant') div.innerHTML = renderMarkdown(text);
+      else div.textContent = text;
+    }
+
+    async _loadConversations() {
+      const res = await fetch(this._hostApi('/chat/conversations'));
+      const { conversations } = await res.json();
+      this._list.replaceChildren(
+        ...conversations.map((conv) => {
+          const li = el('li', {
+            textContent: conv.title || conv.id,
+            title: conv.title || conv.id,
+            className: conv.id === this.conversationId ? 'active' : '',
+          });
+          li.addEventListener('click', () => this.openConversation(conv.id));
+          return li;
+        }),
+      );
+      return conversations;
+    }
+
+    async openConversation(id) {
+      this.conversationId = id;
+      this._log.replaceChildren();
+      this._status.textContent = 'loading history…';
+      try {
+        const res = await fetch(this._hostApi(`/chat/${encodeURIComponent(id)}/history`));
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        const { messages } = await res.json();
+        for (const message of messages) this._appendMsg(message.text, message.role);
+        this._status.textContent = '';
+      } catch (err) {
+        this._status.textContent = String(err);
+      }
+      this._loadConversations().catch(() => {});
+      this._emit('conversation', { conversationId: id });
+      this._input.focus();
+    }
+
+    async adoptSession(sessionId, title) {
+      const res = await fetch(this._hostApi('/chat/conversations'), {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ sessionId, ...(title ? { title } : {}) }),
+      });
+      if (!res.ok) throw new Error(`HTTP ${res.status}: ${await res.text()}`);
+      const { conversation } = await res.json();
+      await this.openConversation(conversation.id);
+      return conversation;
+    }
+
+    newChat() {
+      this.conversationId = null;
+      this._log.replaceChildren();
+      this._status.textContent = '';
+      this._loadConversations().catch(() => {});
+      this._emit('conversation', { conversationId: null });
+      this._input.focus();
+    }
+
+    _emit(name, detail) {
+      this.dispatchEvent(new CustomEvent(`alashi-chat:${name}`, { detail, bubbles: true }));
+    }
+
+    async _submit() {
+      const message = this._input.value.trim();
+      if (!message) return;
+      this._input.value = '';
+      this._send.disabled = true;
+      this._appendMsg(message, 'user');
+      const reply = this._appendMsg('', 'assistant');
+      this._status.textContent = 'thinking…';
+      let replyText = '';
+
+      try {
+        const res = await fetch(this._hostApi('/chat'), {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({
+            message,
+            ...(this.conversationId ? { conversationId: this.conversationId } : {}),
+          }),
+        });
+        if (!res.ok) throw new Error(`HTTP ${res.status}: ${await res.text()}`);
+        const isNew = !this.conversationId;
+        this.conversationId = res.headers.get('x-conversation-id') || this.conversationId;
+
+        const reader = res.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = '';
+        for (;;) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          buffer += decoder.decode(value, { stream: true });
+          const frames = buffer.split('\n\n');
+          buffer = frames.pop();
+          for (const frame of frames) {
+            const dataLine = frame.split('\n').find((line) => line.startsWith('data: '));
+            if (!dataLine) continue;
+            const event = JSON.parse(dataLine.slice(6));
+            if (event.type === 'text') {
+              replyText += event.text;
+              this._setMsgText(reply, replyText, 'assistant');
+              this._log.scrollTop = this._log.scrollHeight;
+            }
+            if (event.type === 'tool_use') this._status.textContent = `using tool: ${event.name}`;
+            if (event.type === 'result') {
+              this._status.textContent = event.ok
+                ? `done${event.costUsd ? ` ($${event.costUsd.toFixed(4)})` : ''}`
+                : `error: ${event.error}`;
+              this._emit('turn', {
+                ok: event.ok,
+                costUsd: event.costUsd,
+                error: event.error,
+                conversationId: this.conversationId,
+              });
+            }
+          }
+        }
+        if (isNew) this._loadConversations().catch(() => {});
+      } catch (err) {
+        this._status.textContent = String(err);
+      } finally {
+        this._send.disabled = false;
+        this._input.focus();
+      }
+    }
+  }
+
+  customElements.define('alashi-chat', AlashiChat);
+})();