@cognitiondesk/widget 1.1.0

package/src/widget.js

@@ -0,0 +1,752 @@
+/**
+ * CognitionDesk Chat Widget — vanilla JS core
+ *
+ * Usage:
+ *   import CognitionDeskWidget from '@cognitiondesk/widget';
+ *   const widget = new CognitionDeskWidget({ apiKey: 'xxx', assistantId: 'yyy' });
+ *   widget.mount(); // mounts into document.body
+ *
+ * Or use the global UMD build:
+ *   CognitionDesk.init({ apiKey: 'xxx' });
+ */
+
+const DEFAULT_BACKEND = 'https://mounaji-backendv3.onrender.com'; // overrideable
+
+const STYLES = `
+  :host {
+    all: initial;
+    font-family: system-ui, sans-serif;
+    --cd-offset: clamp(12px, 4vw, 24px);
+    --cd-launcher-size: clamp(56px, 14vw, 64px);
+    --cd-launcher-gap: 12px;
+    --cd-viewport-height: 100vh;
+    --cd-safe-top: env(safe-area-inset-top, 0px);
+    --cd-safe-right: env(safe-area-inset-right, 0px);
+    --cd-safe-bottom: env(safe-area-inset-bottom, 0px);
+    --cd-safe-left: env(safe-area-inset-left, 0px);
+  }
+
+  .cd-root {
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 2147483000;
+  }
+
+  .cd-root > * {
+    pointer-events: auto;
+  }
+
+  .cd-widget-btn {
+    position: fixed;
+    bottom: calc(var(--cd-offset) + var(--cd-safe-bottom));
+    right: calc(var(--cd-offset) + var(--cd-safe-right));
+    z-index: 2147483647;
+    width: var(--cd-launcher-size);
+    height: var(--cd-launcher-size);
+    border-radius: 50%;
+    background: var(--cd-primary, #2563eb);
+    color: #fff;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 20px rgba(37,99,235,.45);
+    transition: transform .2s, box-shadow .2s;
+    touch-action: manipulation;
+  }
+  .cd-widget-btn:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(37,99,235,.55); }
+  .cd-widget-btn svg { width: 26px; height: 26px; }
+
+  .cd-panel {
+    position: fixed;
+    bottom: calc(var(--cd-offset) + var(--cd-safe-bottom) + var(--cd-launcher-size) + var(--cd-launcher-gap));
+    right: calc(var(--cd-offset) + var(--cd-safe-right));
+    z-index: 2147483646;
+    width: min(380px, calc(100vw - (var(--cd-offset) * 2) - var(--cd-safe-left) - var(--cd-safe-right)));
+    height: min(560px, calc(var(--cd-viewport-height) - (var(--cd-offset) * 2) - var(--cd-safe-top) - var(--cd-safe-bottom) - var(--cd-launcher-size) - var(--cd-launcher-gap)));
+    max-height: calc(var(--cd-viewport-height) - (var(--cd-offset) * 2) - var(--cd-safe-top) - var(--cd-safe-bottom));
+    background: #fff;
+    border-radius: 16px;
+    box-shadow: 0 12px 40px rgba(0,0,0,.18);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    transform: scale(.96) translateY(8px);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity .2s, transform .2s;
+    overscroll-behavior: contain;
+  }
+  .cd-panel.open {
+    transform: scale(1) translateY(0);
+    opacity: 1;
+    pointer-events: all;
+  }
+
+  .cd-header {
+    background: var(--cd-primary, #2563eb);
+    color: #fff;
+    padding: 14px 16px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-shrink: 0;
+  }
+  .cd-header-avatar {
+    width: 36px; height: 36px; border-radius: 50%;
+    background: rgba(255,255,255,.25);
+    display: flex; align-items: center; justify-content: center;
+    font-size: 18px;
+  }
+  .cd-header-info { flex: 1; min-width: 0; }
+  .cd-header-name { font-size: 14px; font-weight: 600; }
+  .cd-header-status { font-size: 11px; opacity: .85; display: flex; align-items: center; gap: 4px; }
+  .cd-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; }
+  .cd-close-btn {
+    background: none; border: none; color: rgba(255,255,255,.75);
+    cursor: pointer; padding: 4px; border-radius: 6px;
+    display: flex; align-items: center; justify-content: center;
+  }
+  .cd-close-btn:hover { color: #fff; background: rgba(255,255,255,.15); }
+  .cd-close-btn svg { width: 18px; height: 18px; }
+
+  .cd-messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    background: #f8fafc;
+  }
+  .cd-msg {
+    max-width: 78%;
+    padding: 10px 13px;
+    border-radius: 14px;
+    font-size: 13.5px;
+    line-height: 1.5;
+    word-break: break-word;
+  }
+  .cd-msg.user {
+    align-self: flex-end;
+    background: var(--cd-primary, #2563eb);
+    color: #fff;
+    border-bottom-right-radius: 4px;
+  }
+  .cd-msg.assistant {
+    align-self: flex-start;
+    background: #fff;
+    color: #1e293b;
+    border-bottom-left-radius: 4px;
+    box-shadow: 0 1px 4px rgba(0,0,0,.08);
+  }
+  .cd-msg.error {
+    align-self: flex-start;
+    background: #fef2f2;
+    color: #b91c1c;
+    border-bottom-left-radius: 4px;
+  }
+  .cd-typing { display: flex; gap: 4px; align-items: center; padding: 4px 0; }
+  .cd-typing span {
+    width: 7px; height: 7px; background: #94a3b8; border-radius: 50%;
+    animation: cd-bounce .9s infinite;
+  }
+  .cd-typing span:nth-child(2) { animation-delay: .15s; }
+  .cd-typing span:nth-child(3) { animation-delay: .3s; }
+  @keyframes cd-bounce {
+    0%,60%,100% { transform: translateY(0); }
+    30% { transform: translateY(-5px); }
+  }
+
+  .cd-input-area {
+    border-top: 1px solid #e2e8f0;
+    padding: 12px;
+    padding-bottom: calc(12px + (var(--cd-safe-bottom) * 0.35));
+    display: flex;
+    gap: 8px;
+    align-items: flex-end;
+    background: #fff;
+    flex-shrink: 0;
+  }
+  .cd-textarea {
+    flex: 1;
+    border: 1px solid #e2e8f0;
+    border-radius: 10px;
+    padding: 9px 12px;
+    font-size: 13.5px;
+    font-family: inherit;
+    resize: none;
+    outline: none;
+    max-height: 120px;
+    line-height: 1.5;
+    background: #f8fafc;
+    color: #1e293b;
+    transition: border-color .15s;
+  }
+  .cd-textarea:focus { border-color: var(--cd-primary, #2563eb); background: #fff; }
+  .cd-send-btn {
+    width: 36px; height: 36px;
+    background: var(--cd-primary, #2563eb);
+    color: #fff;
+    border: none;
+    border-radius: 10px;
+    cursor: pointer;
+    display: flex; align-items: center; justify-content: center;
+    flex-shrink: 0;
+    transition: opacity .15s;
+  }
+  .cd-send-btn:disabled { opacity: .45; cursor: not-allowed; }
+  .cd-send-btn svg { width: 16px; height: 16px; }
+
+  .cd-powered {
+    text-align: center;
+    font-size: 10px;
+    color: #94a3b8;
+    padding: 6px 0;
+    background: #fff;
+    flex-shrink: 0;
+  }
+  .cd-powered a { color: #94a3b8; text-decoration: none; }
+  .cd-powered a:hover { color: #64748b; }
+
+  /* Dark theme */
+  .cd-dark .cd-panel { background: #1e293b; }
+  .cd-dark .cd-messages { background: #0f172a; }
+  .cd-dark .cd-msg.assistant { background: #1e293b; color: #f1f5f9; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
+  .cd-dark .cd-input-area { background: #1e293b; border-color: #334155; }
+  .cd-dark .cd-textarea { background: #0f172a; border-color: #334155; color: #f1f5f9; }
+  .cd-dark .cd-textarea:focus { border-color: var(--cd-primary, #3b82f6); }
+  .cd-dark .cd-powered { background: #1e293b; }
+
+  @media (max-width: 640px) {
+    .cd-panel {
+      left: calc(var(--cd-offset) + var(--cd-safe-left));
+      right: calc(var(--cd-offset) + var(--cd-safe-right));
+      width: auto;
+      height: min(540px, calc(var(--cd-viewport-height) - (var(--cd-offset) * 2) - var(--cd-safe-top) - var(--cd-safe-bottom) - 12px));
+    }
+  }
+
+  @media (max-width: 480px) {
+    .cd-panel {
+      top: var(--cd-safe-top);
+      right: 0;
+      bottom: 0;
+      left: 0;
+      width: auto;
+      height: calc(var(--cd-viewport-height) - var(--cd-safe-top));
+      max-height: calc(var(--cd-viewport-height) - var(--cd-safe-top));
+      border-radius: 18px 18px 0 0;
+    }
+
+    .cd-header {
+      padding: 16px;
+    }
+
+    .cd-messages {
+      padding: 14px;
+    }
+
+    .cd-input-area {
+      padding: 10px;
+      padding-bottom: calc(10px + var(--cd-safe-bottom));
+    }
+
+    .cd-textarea {
+      font-size: 16px;
+    }
+  }
+`;
+
+const ICONS = {
+  chat: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>`,
+  close: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>`,
+  send: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>`,
+};
+
+function generateSessionId() {
+  return 'cd_' + Math.random().toString(36).slice(2) + Date.now().toString(36);
+}
+
+export default class CognitionDeskWidget {
+  constructor(config = {}) {
+    if (!config.apiKey) throw new Error('[CognitionDesk] apiKey is required');
+
+    this._cfg = {
+      apiKey:         config.apiKey,
+      widgetId:       config.widgetId       || null,
+      assistantId:    config.assistantId    || null,
+      backendUrl:     config.backendUrl     || DEFAULT_BACKEND,
+      primaryColor:   config.primaryColor   || '#2563eb',
+      theme:          config.theme          || 'light',  // 'light' | 'dark' | 'auto'
+      botName:        config.botName        || 'AI Assistant',
+      botEmoji:       config.botEmoji       || '🤖',
+      welcomeMessage: config.welcomeMessage || 'Hello! How can I help you today?',
+      placeholder:    config.placeholder    || 'Type a message…',
+      position:       config.position       || 'bottom-right',
+      streaming:      config.streaming      !== false,   // default: true
+    };
+
+    this._sessionId = generateSessionId();
+    this._messages  = [];   // { role: 'user'|'assistant', content: string }[]
+    this._open      = false;
+    this._loading   = false;
+    this._container = null;
+    this._shadow    = null;
+    this._panel     = null;
+    this._messagesEl = null;
+    this._textarea  = null;
+    this._sendBtn   = null;
+    this._viewportHandler = null;
+  }
+
+  // ── Public API ──────────────────────────────────────────────────────────────
+
+  /**
+   * Mount the widget.
+   * If `widgetId` was provided, fetches the server-side config first (async).
+   * Returns a Promise so callers can await full initialisation.
+   */
+  mount(target) {
+    const _mount = () => {
+      const host = target || document.body;
+      this._container = document.createElement('div');
+      this._container.setAttribute('data-cognitiondesk', '');
+      host.appendChild(this._container);
+
+      this._shadow = this._container.attachShadow({ mode: 'open' });
+      const style = document.createElement('style');
+      style.textContent = STYLES;
+      this._shadow.appendChild(style);
+
+      this._buildDOM();
+      this._applyTheme();
+      this._syncViewportMetrics();
+      this._bindViewportMetrics();
+      this._bindEvents();
+
+      if (this._cfg.welcomeMessage) {
+        this._appendMessage('assistant', this._cfg.welcomeMessage, false);
+      }
+    };
+
+    if (this._cfg.widgetId) {
+      return this._fetchWidgetConfig()
+        .then(() => _mount())
+        .catch(() => _mount()); // fallback to inline config on network error
+    }
+
+    _mount();
+    return Promise.resolve(this);
+  }
+
+  /**
+   * Fetch public widget config from the platform and merge into this._cfg.
+   * Only fields not already overridden by the constructor are applied.
+   */
+  async _fetchWidgetConfig() {
+    const url = `${this._cfg.backendUrl}/platforms/web-widget/public/${this._cfg.widgetId}`;
+    try {
+      const res = await fetch(url);
+      if (!res.ok) return;
+      const { config } = await res.json();
+      if (!config) return;
+      // Merge — explicit constructor overrides take precedence
+      if (config.botName        && !this._userSet('botName'))        this._cfg.botName        = config.botName;
+      if (config.welcomeMessage && !this._userSet('welcomeMessage')) this._cfg.welcomeMessage = config.welcomeMessage;
+      if (config.primaryColor   && !this._userSet('primaryColor'))   this._cfg.primaryColor   = config.primaryColor;
+      if (config.placeholder    && !this._userSet('placeholder'))    this._cfg.placeholder    = config.placeholder;
+      if (config.assistantId    && !this._cfg.assistantId)           this._cfg.assistantId    = config.assistantId;
+      if (config.avatar?.value  && !this._userSet('botEmoji'))       this._cfg.botEmoji       = config.avatar.value;
+    } catch {
+      // Silently ignore — widget falls back to inline config
+    }
+  }
+
+  // eslint-disable-next-line no-unused-vars
+  _userSet(_key) {
+    // In production use, explicit constructor props shadow defaults.
+    // This is a simple passthrough — override in subclasses if needed.
+    return false;
+  }
+
+  unmount() {
+    this._unbindViewportMetrics();
+    if (this._container) {
+      this._container.remove();
+      this._container = null;
+    }
+  }
+
+  open() {
+    this._open = true;
+    this._syncViewportMetrics();
+    this._panel?.classList.add('open');
+    this._textarea?.focus();
+  }
+
+  close() {
+    this._open = false;
+    this._panel?.classList.remove('open');
+  }
+
+  toggle() {
+    this._open ? this.close() : this.open();
+  }
+
+  clearHistory() {
+    this._messages = [];
+    if (this._messagesEl) this._messagesEl.innerHTML = '';
+    if (this._cfg.welcomeMessage) this._appendMessage('assistant', this._cfg.welcomeMessage);
+  }
+
+  // ── DOM ─────────────────────────────────────────────────────────────────────
+
+  _buildDOM() {
+    const root = document.createElement('div');
+    root.className = 'cd-root';
+
+    // Floating toggle button
+    const btn = document.createElement('button');
+    btn.className = 'cd-widget-btn';
+    btn.innerHTML = ICONS.chat;
+    btn.setAttribute('aria-label', 'Open chat');
+    btn.style.setProperty('--cd-primary', this._cfg.primaryColor);
+    this._toggleBtn = btn;
+
+    // Panel
+    const panel = document.createElement('div');
+    panel.className = 'cd-panel';
+    this._panel = panel;
+
+    // Header
+    const header = document.createElement('div');
+    header.className = 'cd-header';
+    header.innerHTML = `
+      <div class="cd-header-avatar">${this._cfg.botEmoji}</div>
+      <div class="cd-header-info">
+        <div class="cd-header-name">${this._escHtml(this._cfg.botName)}</div>
+        <div class="cd-header-status">
+          <span class="cd-status-dot"></span> Online
+        </div>
+      </div>
+    `;
+    const closeBtn = document.createElement('button');
+    closeBtn.className = 'cd-close-btn';
+    closeBtn.innerHTML = ICONS.close;
+    closeBtn.setAttribute('aria-label', 'Close chat');
+    header.appendChild(closeBtn);
+    this._closeBtn = closeBtn;
+
+    // Messages
+    const messages = document.createElement('div');
+    messages.className = 'cd-messages';
+    messages.setAttribute('role', 'log');
+    messages.setAttribute('aria-live', 'polite');
+    this._messagesEl = messages;
+
+    // Input area
+    const inputArea = document.createElement('div');
+    inputArea.className = 'cd-input-area';
+
+    const textarea = document.createElement('textarea');
+    textarea.className = 'cd-textarea';
+    textarea.rows = 1;
+    textarea.placeholder = this._cfg.placeholder;
+    this._textarea = textarea;
+
+    const sendBtn = document.createElement('button');
+    sendBtn.className = 'cd-send-btn';
+    sendBtn.innerHTML = ICONS.send;
+    sendBtn.setAttribute('aria-label', 'Send');
+    this._sendBtn = sendBtn;
+
+    inputArea.appendChild(textarea);
+    inputArea.appendChild(sendBtn);
+
+    // Powered-by
+    const powered = document.createElement('div');
+    powered.className = 'cd-powered';
+    powered.innerHTML = `Powered by <a href="https://cognitiondesk.com" target="_blank" rel="noopener">CognitionDesk</a>`;
+
+    panel.appendChild(header);
+    panel.appendChild(messages);
+    panel.appendChild(inputArea);
+    panel.appendChild(powered);
+
+    root.appendChild(btn);
+    root.appendChild(panel);
+    this._shadow.appendChild(root);
+    this._root = root;
+  }
+
+  _applyTheme() {
+    const theme = this._cfg.theme === 'auto'
+      ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+      : this._cfg.theme;
+    if (theme === 'dark') this._root?.classList.add('cd-dark');
+    this._root?.style.setProperty('--cd-primary', this._cfg.primaryColor);
+    this._panel?.style.setProperty('--cd-primary', this._cfg.primaryColor);
+  }
+
+  // ── Events ──────────────────────────────────────────────────────────────────
+
+  _bindEvents() {
+    this._toggleBtn.addEventListener('click', () => this.toggle());
+    this._closeBtn.addEventListener('click', () => this.close());
+    this._sendBtn.addEventListener('click', () => this._sendMessage());
+
+    this._textarea.addEventListener('keydown', e => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        this._sendMessage();
+      }
+    });
+
+    // Auto-grow textarea
+    this._textarea.addEventListener('input', () => {
+      this._textarea.style.height = 'auto';
+      this._textarea.style.height = Math.min(this._textarea.scrollHeight, 120) + 'px';
+    });
+
+    this._textarea.addEventListener('focus', () => {
+      this._syncViewportMetrics();
+    });
+  }
+
+  _bindViewportMetrics() {
+    if (this._viewportHandler) return;
+
+    this._viewportHandler = () => this._syncViewportMetrics();
+
+    window.addEventListener('resize', this._viewportHandler, { passive: true });
+    window.addEventListener('orientationchange', this._viewportHandler);
+
+    if (window.visualViewport) {
+      window.visualViewport.addEventListener('resize', this._viewportHandler);
+      window.visualViewport.addEventListener('scroll', this._viewportHandler);
+    }
+  }
+
+  _unbindViewportMetrics() {
+    if (!this._viewportHandler) return;
+
+    window.removeEventListener('resize', this._viewportHandler);
+    window.removeEventListener('orientationchange', this._viewportHandler);
+
+    if (window.visualViewport) {
+      window.visualViewport.removeEventListener('resize', this._viewportHandler);
+      window.visualViewport.removeEventListener('scroll', this._viewportHandler);
+    }
+
+    this._viewportHandler = null;
+  }
+
+  _syncViewportMetrics() {
+    const target = this._root || this._container;
+    if (!target) return;
+
+    const visualViewport = window.visualViewport;
+    const viewportHeight = visualViewport ? visualViewport.height : window.innerHeight;
+
+    target.style.setProperty('--cd-viewport-height', `${Math.round(viewportHeight)}px`);
+  }
+
+  // ── Chat ────────────────────────────────────────────────────────────────────
+
+  async _sendMessage() {
+    const text = this._textarea.value.trim();
+    if (!text || this._loading) return;
+
+    this._textarea.value = '';
+    this._textarea.style.height = 'auto';
+    this._loading = true;
+    this._sendBtn.disabled = true;
+
+    this._messages.push({ role: 'user', content: text });
+    this._appendMessage('user', text, false);
+
+    try {
+      if (this._cfg.streaming) {
+        await this._callApiStream();
+      } else {
+        const typingEl = this._showTyping();
+        const response = await this._callApi();
+        this._removeTyping(typingEl);
+        this._messages.push({ role: 'assistant', content: response });
+        this._appendMessage('assistant', response, true);
+      }
+    } catch (err) {
+      this._appendMessage('error', 'Sorry, something went wrong. Please try again.', false);
+      console.error('[CognitionDesk]', err);
+    } finally {
+      this._loading = false;
+      this._sendBtn.disabled = false;
+      this._textarea.focus();
+    }
+  }
+
+  _buildRequestBody() {
+    return {
+      messages: this._messages,
+      assistantId: this._cfg.assistantId || undefined,
+      userContext: {
+        sessionId:   this._sessionId,
+        assistantId: this._cfg.assistantId || undefined,
+        widgetId:    this._cfg.widgetId    || undefined,
+        platform:    'cognitiondesk-widget',
+      },
+    };
+  }
+
+  /** Streaming path — uses SSE endpoint */
+  async _callApiStream() {
+    const endpoint = `${this._cfg.backendUrl}/chat-apiKeyAuth/stream`;
+
+    const res = await fetch(endpoint, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'x-api-key': this._cfg.apiKey },
+      body: JSON.stringify({ ...this._buildRequestBody(), stream: true }),
+    });
+
+    if (!res.ok) {
+      const errData = await res.json().catch(() => ({}));
+      throw new Error(errData.message || `HTTP ${res.status}`);
+    }
+
+    // Create an empty assistant bubble to stream into
+    const bubble = document.createElement('div');
+    bubble.className = 'cd-msg assistant';
+    bubble.innerHTML = `<div class="cd-typing"><span></span><span></span><span></span></div>`;
+    this._messagesEl.appendChild(bubble);
+    this._scrollToBottom();
+
+    const reader  = res.body.getReader();
+    const decoder = new TextDecoder();
+    let fullText  = '';
+    let started   = false;
+
+    try {
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        const chunk = decoder.decode(value, { stream: true });
+        for (const line of chunk.split('\n')) {
+          if (!line.startsWith('data: ')) continue;
+          const raw = line.slice(6).trim();
+          if (raw === '[DONE]') break;
+
+          let parsed;
+          try { parsed = JSON.parse(raw); } catch { continue; }
+
+          if (parsed.type === 'content' && parsed.data) {
+            if (!started) {
+              bubble.innerHTML = '';  // remove typing dots
+              started = true;
+            }
+            fullText += parsed.data;
+            bubble.innerHTML = this._renderMarkdown(fullText);
+            this._scrollToBottom();
+          }
+        }
+      }
+    } finally {
+      reader.releaseLock();
+    }
+
+    if (!started) bubble.innerHTML = this._renderMarkdown('No response');
+    if (fullText) this._messages.push({ role: 'assistant', content: fullText });
+  }
+
+  /** Non-streaming fallback path */
+  async _callApi() {
+    const endpoint = `${this._cfg.backendUrl}/chat-apiKeyAuth/chat`;
+
+    const res = await fetch(endpoint, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'x-api-key': this._cfg.apiKey },
+      body: JSON.stringify(this._buildRequestBody()),
+    });
+
+    if (!res.ok) {
+      const errData = await res.json().catch(() => ({}));
+      throw new Error(errData.message || `HTTP ${res.status}`);
+    }
+
+    const data = await res.json();
+    return (
+      data.response   ||
+      data.message    ||
+      data.content    ||
+      data.choices?.[0]?.message?.content ||
+      'No response'
+    );
+  }
+
+  // ── DOM helpers ─────────────────────────────────────────────────────────────
+
+  _appendMessage(role, content, isMarkdown = true) {
+    const el = document.createElement('div');
+    el.className = `cd-msg ${role}`;
+    if (isMarkdown && role !== 'user') {
+      el.innerHTML = this._renderMarkdown(content);
+    } else {
+      el.textContent = content;
+    }
+    this._messagesEl.appendChild(el);
+    this._scrollToBottom();
+  }
+
+  /** Minimal, safe markdown → HTML renderer (no dependencies). */
+  _renderMarkdown(text) {
+    if (!text) return '';
+    let html = this._escHtml(text);
+
+    // Code blocks (```...```)
+    html = html.replace(/```[\w]*\n?([\s\S]*?)```/g, (_, code) =>
+      `<pre style="background:#0f172a;color:#e2e8f0;padding:10px;border-radius:6px;font-size:12px;overflow-x:auto;margin:6px 0;white-space:pre-wrap">${code.trim()}</pre>`
+    );
+    // Inline code
+    html = html.replace(/`([^`]+)`/g, '<code style="background:rgba(0,0,0,.08);padding:1px 5px;border-radius:4px;font-size:.9em">$1</code>');
+    // Bold
+    html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+    html = html.replace(/__([^_]+)__/g,       '<strong>$1</strong>');
+    // Italic
+    html = html.replace(/\*([^*]+)\*/g, '<em>$1</em>');
+    html = html.replace(/_([^_]+)_/g,   '<em>$1</em>');
+    // Links
+    html = html.replace(/\[([^\]]+)\]\((https?:\/\/[^)]+)\)/g,
+      '<a href="$2" target="_blank" rel="noopener" style="color:var(--cd-primary,#2563eb)">$1</a>'
+    );
+    // Newlines
+    html = html.replace(/\n/g, '<br>');
+
+    return html;
+  }
+
+  _showTyping() {
+    const el = document.createElement('div');
+    el.className = 'cd-msg assistant';
+    el.innerHTML = `<div class="cd-typing"><span></span><span></span><span></span></div>`;
+    this._messagesEl.appendChild(el);
+    this._scrollToBottom();
+    return el;
+  }
+
+  _removeTyping(el) {
+    el?.remove();
+  }
+
+  _scrollToBottom() {
+    if (this._messagesEl) {
+      this._messagesEl.scrollTop = this._messagesEl.scrollHeight;
+    }
+  }
+
+  _escHtml(str) {
+    return String(str).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+  }
+}