@diegoaltoworks/chatter 0.43.0 → 0.45.0

package/dist/client/index.js

@@ -0,0 +1,615 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Chat: () => Chat,
+  ChatBot: () => ChatBot,
+  ChatButton: () => ChatButton
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/ChatBot.ts
+var ChatBot = class {
+  constructor(config) {
+    if (!config.host) {
+      throw new Error("host is required");
+    }
+    if (!config.mode || !["public", "private"].includes(config.mode)) {
+      throw new Error('mode must be either "public" or "private"');
+    }
+    if (!config.apiKey) {
+      throw new Error("apiKey is required");
+    }
+    if (config.mode === "private" && !config.token) {
+      throw new Error("token is required for private mode");
+    }
+    let host = config.host.trim();
+    if (!host.startsWith("http://") && !host.startsWith("https://")) {
+      const isLocalhost = host.startsWith("localhost") || host.startsWith("127.0.0.1");
+      const protocol = isLocalhost ? "http://" : "https://";
+      host = `${protocol}${host}`;
+    }
+    this.baseUrl = host.replace(/\/$/, "");
+    this.mode = config.mode;
+    this.apiKey = config.apiKey;
+    this.token = config.token;
+    this.endpoint = `${this.baseUrl}/api/${this.mode}/chat`;
+  }
+  /**
+   * Get authentication headers based on mode
+   */
+  getHeaders(streaming = false) {
+    const headers = {
+      "Content-Type": "application/json"
+    };
+    if (this.apiKey) {
+      headers["x-api-key"] = this.apiKey;
+    }
+    if (this.mode === "private" && this.token) {
+      headers.Authorization = `Bearer ${this.token}`;
+    }
+    if (streaming) {
+      headers.Accept = "text/event-stream";
+    }
+    return headers;
+  }
+  /**
+   * Send a single message to the chatbot
+   */
+  async sendMessage(message) {
+    const response = await fetch(this.endpoint, {
+      method: "POST",
+      headers: this.getHeaders(),
+      body: JSON.stringify({ message })
+    });
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ error: "Unknown error" }));
+      throw new Error(`API Error: ${error.error || response.statusText}`);
+    }
+    const data = await response.json();
+    return data.reply;
+  }
+  /**
+   * Send a conversation history (multi-turn chat)
+   */
+  async sendConversation(messages) {
+    if (!Array.isArray(messages) || messages.length === 0) {
+      throw new Error("messages must be a non-empty array");
+    }
+    const response = await fetch(this.endpoint, {
+      method: "POST",
+      headers: this.getHeaders(),
+      body: JSON.stringify({ messages })
+    });
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ error: "Unknown error" }));
+      throw new Error(`API Error: ${error.error || response.statusText}`);
+    }
+    const data = await response.json();
+    return data.reply;
+  }
+  /**
+   * Stream a single message response
+   */
+  async streamMessage(message, callbacks) {
+    await this.stream({ message }, callbacks);
+  }
+  /**
+   * Stream a conversation response
+   */
+  async streamConversation(messages, callbacks) {
+    if (!Array.isArray(messages) || messages.length === 0) {
+      throw new Error("messages must be a non-empty array");
+    }
+    await this.stream({ messages }, callbacks);
+  }
+  /**
+   * Internal method to handle streaming
+   */
+  async stream(body, callbacks) {
+    const { onChunk, onEnd, onError } = callbacks;
+    try {
+      const response = await fetch(`${this.endpoint}?stream=1`, {
+        method: "POST",
+        headers: this.getHeaders(true),
+        body: JSON.stringify(body)
+      });
+      if (!response.ok) {
+        const error = await response.json().catch(() => ({ error: "Unknown error" }));
+        throw new Error(`API Error: ${error.error || response.statusText}`);
+      }
+      if (!response.body) {
+        throw new Error("Response body is null");
+      }
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = "";
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split("\n");
+        buffer = lines.pop() || "";
+        for (const line of lines) {
+          if (line.startsWith("data: ")) {
+            const data = line.slice(6);
+            try {
+              const parsed = JSON.parse(data);
+              if (parsed.delta) {
+                onChunk(parsed.delta);
+              }
+            } catch {
+            }
+          } else if (line.startsWith("event: end")) {
+            if (onEnd) onEnd();
+            return;
+          }
+        }
+      }
+      if (onEnd) onEnd();
+    } catch (error) {
+      if (onError) {
+        onError(error);
+      } else {
+        throw error;
+      }
+    }
+  }
+};
+
+// src/markdown.ts
+var SAFE_URL_RE = /^(https?:|mailto:|\/|#)/i;
+var CODE_PH_OPEN = "CODE";
+var CODE_PH_CLOSE = "ENDCODE";
+function escapeHtml(input) {
+  return input.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function sanitizeUrl(url) {
+  const trimmed = url.trim();
+  if (!SAFE_URL_RE.test(trimmed)) return "#";
+  return trimmed;
+}
+function renderInline(escaped) {
+  const codeSpans = [];
+  let out = escaped.replace(/`([^`\n]+)`/g, (_m, code) => {
+    const idx = codeSpans.push(code) - 1;
+    return `${CODE_PH_OPEN}${idx}${CODE_PH_CLOSE}`;
+  });
+  out = out.replace(
+    /\[([^\]]+)\]\(([^)\s]+)(?:\s+&quot;([^&]*)&quot;)?\)/g,
+    (_m, text, url, title) => {
+      const safeUrl = sanitizeUrl(url);
+      const titleAttr = title ? ` title="${title}"` : "";
+      return `<a href="${safeUrl}" target="_blank" rel="noopener noreferrer"${titleAttr}>${text}</a>`;
+    }
+  );
+  out = out.replace(/(\*\*|__)(?=\S)([\s\S]+?)(?<=\S)\1/g, "<strong>$2</strong>");
+  out = out.replace(/(?<!\*)\*(?!\*)(?=\S)([\s\S]+?)(?<=\S)\*(?!\*)/g, "<em>$1</em>");
+  out = out.replace(/(?<![A-Za-z0-9_])_(?=\S)([\s\S]+?)(?<=\S)_(?![A-Za-z0-9_])/g, "<em>$1</em>");
+  const placeholderRe = new RegExp(`${CODE_PH_OPEN}(\\d+)${CODE_PH_CLOSE}`, "g");
+  out = out.replace(placeholderRe, (_m, idx) => {
+    const code = codeSpans[Number(idx)] ?? "";
+    return `<code>${code}</code>`;
+  });
+  return out;
+}
+function flushParagraph(buffer, out) {
+  if (buffer.length === 0) return;
+  const text = buffer.join("\n");
+  const html = renderInline(escapeHtml(text)).replace(/\n/g, "<br>");
+  out.push(`<p>${html}</p>`);
+  buffer.length = 0;
+}
+function flushList(list, out) {
+  if (!list) return null;
+  const items = list.items.map((item) => `<li>${renderInline(escapeHtml(item))}</li>`).join("");
+  out.push(`<${list.type}>${items}</${list.type}>`);
+  return null;
+}
+function flushQuote(quote, out) {
+  if (quote.length === 0) return;
+  const inner = renderMarkdown(quote.join("\n"));
+  out.push(`<blockquote>${inner}</blockquote>`);
+  quote.length = 0;
+}
+function renderMarkdown(source) {
+  if (!source) return "";
+  const lines = source.replace(/\r\n?/g, "\n").split("\n");
+  const out = [];
+  const paragraph = [];
+  const quote = [];
+  let list = null;
+  let inFence = false;
+  let fenceLang = "";
+  let fenceBuf = [];
+  const closeBlocks = () => {
+    flushParagraph(paragraph, out);
+    list = flushList(list, out);
+    flushQuote(quote, out);
+  };
+  for (const line of lines) {
+    if (inFence) {
+      if (/^\s*```\s*$/.test(line)) {
+        const code = escapeHtml(fenceBuf.join("\n"));
+        const langClass = fenceLang ? ` class="language-${escapeHtml(fenceLang)}"` : "";
+        out.push(`<pre><code${langClass}>${code}</code></pre>`);
+        fenceBuf = [];
+        fenceLang = "";
+        inFence = false;
+      } else {
+        fenceBuf.push(line);
+      }
+      continue;
+    }
+    const fenceMatch = line.match(/^\s*```\s*([\w+-]*)\s*$/);
+    if (fenceMatch) {
+      closeBlocks();
+      inFence = true;
+      fenceLang = fenceMatch[1] || "";
+      continue;
+    }
+    if (/^\s*$/.test(line)) {
+      closeBlocks();
+      continue;
+    }
+    if (/^\s*(?:---|\*\*\*|___)\s*$/.test(line) && paragraph.length === 0) {
+      closeBlocks();
+      out.push("<hr>");
+      continue;
+    }
+    const headingMatch = line.match(/^(#{1,6})\s+(.*)$/);
+    if (headingMatch) {
+      closeBlocks();
+      const level = headingMatch[1].length;
+      const content = renderInline(escapeHtml(headingMatch[2].trim()));
+      out.push(`<h${level}>${content}</h${level}>`);
+      continue;
+    }
+    const quoteMatch = line.match(/^\s*>\s?(.*)$/);
+    if (quoteMatch) {
+      flushParagraph(paragraph, out);
+      list = flushList(list, out);
+      quote.push(quoteMatch[1]);
+      continue;
+    }
+    if (quote.length > 0) flushQuote(quote, out);
+    const ulMatch = line.match(/^\s*[-*+]\s+(.*)$/);
+    const olMatch = line.match(/^\s*\d+\.\s+(.*)$/);
+    if (ulMatch || olMatch) {
+      flushParagraph(paragraph, out);
+      const type = ulMatch ? "ul" : "ol";
+      const item = ulMatch ? ulMatch[1] : olMatch[1];
+      if (!list || list.type !== type) {
+        list = flushList(list, out);
+        list = { type, items: [] };
+      }
+      list.items.push(item);
+      continue;
+    }
+    if (list) list = flushList(list, out);
+    paragraph.push(line);
+  }
+  if (inFence) {
+    const code = escapeHtml(fenceBuf.join("\n"));
+    const langClass = fenceLang ? ` class="language-${escapeHtml(fenceLang)}"` : "";
+    out.push(`<pre><code${langClass}>${code}</code></pre>`);
+  }
+  closeBlocks();
+  return out.join("");
+}
+
+// src/Chat.ts
+var Chat = class {
+  constructor(config) {
+    this.messages = [];
+    this.bot = new ChatBot({
+      host: config.host,
+      mode: config.mode,
+      apiKey: config.apiKey,
+      token: config.token
+    });
+    if (typeof config.container === "string") {
+      const el = document.querySelector(config.container);
+      if (!el) {
+        throw new Error(`Container element not found: ${config.container}`);
+      }
+      this.container = el;
+    } else {
+      this.container = config.container;
+    }
+    this.placeholder = config.placeholder || "Type your message...";
+    this.title = config.title || "Chat";
+    this.subtitle = config.subtitle || "";
+    this.messages = config.initialMessages || [];
+    this.onClose = config.onClose;
+    this.render();
+    this.attachEventListeners();
+  }
+  render() {
+    this.container.innerHTML = `<div class="chatter-ui-chat"><div class="chatter-ui-chat-header"><button class="chatter-ui-chat-close" type="button" aria-label="Close chat">\xD7</button><div class="chatter-ui-chat-title">${this.title}</div>${this.subtitle ? `<div class="chatter-ui-chat-subtitle">${this.subtitle}</div>` : ""}</div><div class="chatter-ui-chat-messages"></div><div class="chatter-ui-chat-input-container"><textarea class="chatter-ui-chat-input" placeholder="${this.placeholder}" rows="1"></textarea><button class="chatter-ui-chat-send" type="button"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/></svg></button></div></div>`;
+    const messagesContainer = this.container.querySelector(".chatter-ui-chat-messages");
+    const inputElement = this.container.querySelector(".chatter-ui-chat-input");
+    const sendButton = this.container.querySelector(".chatter-ui-chat-send");
+    if (!messagesContainer || !inputElement || !sendButton) {
+      throw new Error("Required chat elements not found in container");
+    }
+    this.messagesContainer = messagesContainer;
+    this.inputElement = inputElement;
+    this.sendButton = sendButton;
+    for (const msg of this.messages) {
+      this.addMessageToUI(msg);
+    }
+  }
+  attachEventListeners() {
+    const closeButton = this.container.querySelector(".chatter-ui-chat-close");
+    if (closeButton && this.onClose) {
+      closeButton.addEventListener("click", () => {
+        this.onClose?.();
+      });
+    }
+    this.sendButton.addEventListener("click", () => this.handleSend());
+    this.inputElement.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        this.handleSend();
+      }
+    });
+    this.inputElement.addEventListener("input", () => {
+      this.inputElement.style.height = "auto";
+      this.inputElement.style.height = `${Math.min(this.inputElement.scrollHeight, 120)}px`;
+    });
+    if (this.isMobile()) {
+      this.inputElement.addEventListener("focus", () => {
+        setTimeout(() => {
+          this.inputElement.scrollIntoView({ behavior: "smooth", block: "nearest" });
+        }, 300);
+      });
+      this.sendButton.addEventListener(
+        "touchend",
+        (e) => {
+          e.preventDefault();
+          this.handleSend();
+        },
+        { passive: false }
+      );
+    }
+  }
+  async handleSend() {
+    const message = this.inputElement.value.trim();
+    if (!message) return;
+    const userMessage = { role: "user", content: message };
+    this.messages.push(userMessage);
+    this.addMessageToUI(userMessage);
+    this.inputElement.value = "";
+    this.inputElement.style.height = "auto";
+    this.setInputEnabled(false);
+    try {
+      const assistantMessage = { role: "assistant", content: "" };
+      this.messages.push(assistantMessage);
+      const messageEl = this.addMessageToUI(assistantMessage);
+      const contentEl = messageEl.querySelector(".chatter-ui-message-content");
+      if (!contentEl) {
+        throw new Error("Message content element not found");
+      }
+      await this.bot.streamConversation(this.messages, {
+        onChunk: (delta) => {
+          assistantMessage.content += delta;
+          this.renderMessageContent(contentEl, assistantMessage);
+          this.scrollToBottom();
+        },
+        onEnd: () => {
+          this.renderMessageContent(contentEl, assistantMessage);
+          this.setInputEnabled(true);
+          if (!this.isMobile()) {
+            this.inputElement.focus();
+          }
+        },
+        onError: (error) => {
+          console.error("Stream error:", error);
+          assistantMessage.content = "Sorry, an error occurred. Please try again.";
+          contentEl.textContent = assistantMessage.content;
+          contentEl.classList.add("chatter-ui-message-error");
+          this.setInputEnabled(true);
+        }
+      });
+    } catch (error) {
+      console.error("Send error:", error);
+      const errorMessage = {
+        role: "assistant",
+        content: "Sorry, an error occurred. Please try again."
+      };
+      this.messages.push(errorMessage);
+      const messageEl = this.addMessageToUI(errorMessage);
+      messageEl.querySelector(".chatter-ui-message-content")?.classList.add("chatter-ui-message-error");
+      this.setInputEnabled(true);
+    }
+  }
+  addMessageToUI(message) {
+    const messageEl = document.createElement("div");
+    messageEl.className = `chatter-ui-message chatter-ui-message-${message.role}`;
+    const contentEl = document.createElement("div");
+    contentEl.className = "chatter-ui-message-content";
+    messageEl.appendChild(contentEl);
+    this.renderMessageContent(contentEl, message);
+    this.messagesContainer.appendChild(messageEl);
+    this.scrollToBottom();
+    return messageEl;
+  }
+  renderMessageContent(target, message) {
+    if (message.role === "assistant") {
+      target.innerHTML = renderMarkdown(message.content);
+    } else {
+      target.innerHTML = escapeHtml(message.content).replace(/\n/g, "<br>");
+    }
+  }
+  setInputEnabled(enabled) {
+    this.inputElement.disabled = !enabled;
+    this.sendButton.disabled = !enabled;
+  }
+  scrollToBottom() {
+    this.messagesContainer.scrollTop = this.messagesContainer.scrollHeight;
+  }
+  /**
+   * Clear all messages
+   */
+  clear() {
+    this.messages = [];
+    this.messagesContainer.innerHTML = "";
+  }
+  /**
+   * Get current conversation
+   */
+  getMessages() {
+    return [...this.messages];
+  }
+  /**
+   * Destroy the chat instance
+   */
+  destroy() {
+    this.container.innerHTML = "";
+  }
+  /**
+   * Detect if the device is mobile based on screen width
+   */
+  isMobile() {
+    return window.innerWidth <= 768;
+  }
+};
+
+// src/ChatButton.ts
+var ChatButton = class {
+  constructor(config) {
+    this.chat = null;
+    this.isOpen = false;
+    this.config = {
+      position: "bottom-right",
+      label: "\u{1F4AC}",
+      ...config
+    };
+    this.render();
+    this.attachEventListeners();
+  }
+  render() {
+    this.buttonElement = document.createElement("button");
+    this.buttonElement.className = `chatter-ui-chat-button chatter-ui-chat-button-${this.config.position}`;
+    this.buttonElement.innerHTML = this.config.label || "\u{1F4AC}";
+    this.buttonElement.setAttribute("aria-label", "Open chat");
+    if (this.config.styles) {
+      Object.assign(this.buttonElement.style, this.config.styles);
+    }
+    this.chatContainer = document.createElement("div");
+    this.chatContainer.className = `chatter-ui-chat-popup chatter-ui-chat-popup-${this.config.position}`;
+    this.chatContainer.style.display = "none";
+    document.body.appendChild(this.buttonElement);
+    document.body.appendChild(this.chatContainer);
+  }
+  attachEventListeners() {
+    this.buttonElement.addEventListener("click", () => this.toggle());
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape" && this.isOpen) {
+        this.close();
+      }
+    });
+    document.addEventListener("click", (e) => {
+      if (this.isOpen && !this.chatContainer.contains(e.target) && !this.buttonElement.contains(e.target)) {
+        this.close();
+      }
+    });
+  }
+  toggle() {
+    if (this.isOpen) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+  open() {
+    if (this.isOpen) return;
+    if (!this.chat) {
+      this.chat = new Chat({
+        host: this.config.host,
+        mode: this.config.mode,
+        apiKey: this.config.apiKey,
+        token: this.config.token,
+        container: this.chatContainer,
+        onClose: () => this.close(),
+        ...this.config.chatConfig
+      });
+    }
+    this.chatContainer.style.display = "block";
+    this.buttonElement.classList.add("chatter-ui-chat-button-open");
+    this.buttonElement.setAttribute("aria-label", "Close chat");
+    this.isOpen = true;
+    if (this.isMobile()) {
+      document.body.style.overflow = "hidden";
+      document.body.style.position = "fixed";
+      document.body.style.width = "100%";
+    }
+    setTimeout(
+      () => {
+        const input = this.chatContainer.querySelector(
+          ".chatter-ui-chat-input"
+        );
+        if (input) {
+          input.focus();
+          if (this.isMobile()) {
+            setTimeout(() => {
+              input.scrollIntoView({ behavior: "smooth", block: "center" });
+            }, 300);
+          }
+        }
+      },
+      this.isMobile() ? 300 : 100
+    );
+  }
+  close() {
+    if (!this.isOpen) return;
+    this.chatContainer.style.display = "none";
+    this.buttonElement.classList.remove("chatter-ui-chat-button-open");
+    this.buttonElement.setAttribute("aria-label", "Open chat");
+    this.isOpen = false;
+    if (this.isMobile()) {
+      document.body.style.overflow = "";
+      document.body.style.position = "";
+      document.body.style.width = "";
+    }
+  }
+  /**
+   * Detect if the device is mobile based on screen width
+   */
+  isMobile() {
+    return window.innerWidth <= 768;
+  }
+  /**
+   * Destroy the chat button and cleanup
+   */
+  destroy() {
+    this.chat?.destroy();
+    this.buttonElement.remove();
+    this.chatContainer.remove();
+  }
+  /**
+   * Check if chat is open
+   */
+  isOpened() {
+    return this.isOpen;
+  }
+};