whale-code 6.5.5 → 6.5.6

package/dist/webchat/widget.js

@@ -1,397 +1,244 @@
-"use strict";
 // Webchat Widget — embeddable chat bubble for any website
 // Usage: <script src="https://whale-agent.fly.dev/webchat/widget.js" data-channel="CHANNEL_ID"></script>
 //
 // Build: esbuild src/webchat/widget.ts --bundle --minify --outfile=dist/webchat/widget.js
 // This file uses no framework — pure vanilla JS for minimal bundle size.
 // TypeScript annotations are stripped at build time.
+
 (function () {
-    const WIDGET_VERSION = "1.0.0";
-    // Read config from script tag
-    const script = document.currentScript;
-    const channelId = script?.getAttribute("data-channel") || "";
-    const serverUrl = script?.getAttribute("data-server") ||
-        script?.src.replace(/\/webchat\/widget\.js.*$/, "") ||
-        "";
-    const position = script?.getAttribute("data-position") || "bottom-right";
-    const accentColor = script?.getAttribute("data-color") || "#0066FF";
-    const headerTitle = script?.getAttribute("data-title") || "Chat with us";
-    if (!channelId) {
-        console.error("[WhaleChat] Missing data-channel attribute");
-        return;
-    }
-    // Generate anonymous user ID (persisted in localStorage per channel)
-    const STORAGE_KEY = "whalechat_" + channelId;
-    let userId = localStorage.getItem(STORAGE_KEY + "_user");
-    if (!userId) {
-        userId = "anon_" + Math.random().toString(36).substring(2, 15);
-        localStorage.setItem(STORAGE_KEY + "_user", userId);
+  const WIDGET_VERSION = "1.0.0";
+
+  // Read config from script tag
+  const script = document.currentScript;
+  const channelId = script?.getAttribute("data-channel") || "";
+  const serverUrl = script?.getAttribute("data-server") || script?.src.replace(/\/webchat\/widget\.js.*$/, "") || "";
+  const position = script?.getAttribute("data-position") || "bottom-right";
+  const accentColor = script?.getAttribute("data-color") || "#0066FF";
+  const headerTitle = script?.getAttribute("data-title") || "Chat with us";
+  if (!channelId) {
+    console.error("[WhaleChat] Missing data-channel attribute");
+    return;
+  }
+
+  // Generate anonymous user ID (persisted in localStorage per channel)
+  const STORAGE_KEY = "whalechat_" + channelId;
+  let userId = localStorage.getItem(STORAGE_KEY + "_user");
+  if (!userId) {
+    userId = "anon_" + Math.random().toString(36).substring(2, 15);
+    localStorage.setItem(STORAGE_KEY + "_user", userId);
+  }
+
+  // Conversation ID — persists across page navigations within same session
+  let conversationId = sessionStorage.getItem(STORAGE_KEY + "_conv") || "";
+
+  // State
+  let isOpen = false;
+  let isSending = false;
+
+  // ─── Styles ───────────────────────────────────────────────
+  const posLeft = position === "bottom-left";
+  const styles = document.createElement("style");
+  styles.textContent = [".wc-bubble {", "  position: fixed;", posLeft ? "  left: 20px;" : "  right: 20px;", "  bottom: 20px;", "  width: 56px;", "  height: 56px;", "  border-radius: 50%;", "  background: " + accentColor + ";", "  color: white;", "  border: none;", "  cursor: pointer;", "  box-shadow: 0 4px 12px rgba(0,0,0,0.15);", "  display: flex;", "  align-items: center;", "  justify-content: center;", "  z-index: 99999;", "  transition: transform 0.2s;", "  font-size: 24px;", "}", ".wc-bubble:hover { transform: scale(1.1); }", "", ".wc-panel {", "  position: fixed;", posLeft ? "  left: 20px;" : "  right: 20px;", "  bottom: 88px;", "  width: 380px;", "  height: 520px;", "  background: white;", "  border-radius: 16px;", "  box-shadow: 0 8px 32px rgba(0,0,0,0.12);", "  display: none;", "  flex-direction: column;", "  z-index: 99998;", "  overflow: hidden;", "  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;", "}", ".wc-panel.open { display: flex; }", "", ".wc-header {", "  padding: 16px;", "  background: " + accentColor + ";", "  color: white;", "  font-weight: 600;", "  font-size: 15px;", "  display: flex;", "  align-items: center;", "  justify-content: space-between;", "}", ".wc-header-close {", "  background: none;", "  border: none;", "  color: white;", "  font-size: 20px;", "  cursor: pointer;", "  padding: 4px 8px;", "  line-height: 1;", "}", "", ".wc-messages {", "  flex: 1;", "  overflow-y: auto;", "  padding: 12px;", "  display: flex;", "  flex-direction: column;", "  gap: 8px;", "}", "", ".wc-msg {", "  max-width: 80%;", "  padding: 10px 14px;", "  border-radius: 16px;", "  font-size: 14px;", "  line-height: 1.4;", "  word-wrap: break-word;", "}", ".wc-msg.user {", "  align-self: flex-end;", "  background: " + accentColor + ";", "  color: white;", "  border-bottom-right-radius: 4px;", "}", ".wc-msg.agent {", "  align-self: flex-start;", "  background: #f0f0f0;", "  color: #333;", "  border-bottom-left-radius: 4px;", "}", ".wc-msg .wc-time {", "  font-size: 11px;", "  opacity: 0.6;", "  margin-top: 4px;", "}", "", ".wc-input-bar {", "  padding: 12px;", "  border-top: 1px solid #eee;", "  display: flex;", "  gap: 8px;", "}", ".wc-input-bar input {", "  flex: 1;", "  padding: 10px 14px;", "  border: 1px solid #ddd;", "  border-radius: 24px;", "  font-size: 14px;", "  outline: none;", "  font-family: inherit;", "}", ".wc-input-bar input:focus { border-color: " + accentColor + "; }", ".wc-input-bar button {", "  width: 40px;", "  height: 40px;", "  border-radius: 50%;", "  background: " + accentColor + ";", "  color: white;", "  border: none;", "  cursor: pointer;", "  font-size: 16px;", "  display: flex;", "  align-items: center;", "  justify-content: center;", "}", ".wc-input-bar button:disabled { opacity: 0.5; cursor: default; }", "", ".wc-typing {", "  align-self: flex-start;", "  padding: 10px 14px;", "  background: #f0f0f0;", "  border-radius: 16px;", "  font-size: 14px;", "  color: #999;", "  border-bottom-left-radius: 4px;", "}", "", ".wc-powered {", "  text-align: center;", "  font-size: 11px;", "  color: #bbb;", "  padding: 4px 0 8px;", "}", "", "@media (max-width: 420px) {", "  .wc-panel {", "    width: calc(100vw - 16px);", "    height: calc(100vh - 100px);", "    left: 8px;", "    right: 8px;", "    bottom: 80px;", "    border-radius: 12px;", "  }", "}"].join("\n");
+  document.head.appendChild(styles);
+
+  // ─── DOM ──────────────────────────────────────────────────
+  // Bubble button
+  const bubble = document.createElement("button");
+  bubble.className = "wc-bubble";
+  bubble.setAttribute("aria-label", "Open chat");
+  bubble.innerHTML = '<svg width="24" height="24" 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>';
+  bubble.addEventListener("click", togglePanel);
+  document.body.appendChild(bubble);
+
+  // Chat panel
+  const panel = document.createElement("div");
+  panel.className = "wc-panel";
+
+  // Header
+  const header = document.createElement("div");
+  header.className = "wc-header";
+  const headerSpan = document.createElement("span");
+  headerSpan.textContent = headerTitle;
+  const closeBtn = document.createElement("button");
+  closeBtn.className = "wc-header-close";
+  closeBtn.setAttribute("aria-label", "Close chat");
+  closeBtn.innerHTML = "&times;";
+  closeBtn.addEventListener("click", togglePanel);
+  header.appendChild(headerSpan);
+  header.appendChild(closeBtn);
+  panel.appendChild(header);
+
+  // Messages area
+  const msgsEl = document.createElement("div");
+  msgsEl.className = "wc-messages";
+  panel.appendChild(msgsEl);
+
+  // Input bar
+  const inputBar = document.createElement("div");
+  inputBar.className = "wc-input-bar";
+  const inputEl = document.createElement("input");
+  inputEl.type = "text";
+  inputEl.placeholder = "Type a message...";
+  inputEl.setAttribute("autocomplete", "off");
+  inputEl.addEventListener("keydown", function (e) {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      sendMessage();
     }
-    // Conversation ID — persists across page navigations within same session
-    let conversationId = sessionStorage.getItem(STORAGE_KEY + "_conv") || "";
-    // State
-    let isOpen = false;
-    let isSending = false;
-    // ─── Styles ───────────────────────────────────────────────
-    const posLeft = position === "bottom-left";
-    const styles = document.createElement("style");
-    styles.textContent = [
-        ".wc-bubble {",
-        "  position: fixed;",
-        posLeft ? "  left: 20px;" : "  right: 20px;",
-        "  bottom: 20px;",
-        "  width: 56px;",
-        "  height: 56px;",
-        "  border-radius: 50%;",
-        "  background: " + accentColor + ";",
-        "  color: white;",
-        "  border: none;",
-        "  cursor: pointer;",
-        "  box-shadow: 0 4px 12px rgba(0,0,0,0.15);",
-        "  display: flex;",
-        "  align-items: center;",
-        "  justify-content: center;",
-        "  z-index: 99999;",
-        "  transition: transform 0.2s;",
-        "  font-size: 24px;",
-        "}",
-        ".wc-bubble:hover { transform: scale(1.1); }",
-        "",
-        ".wc-panel {",
-        "  position: fixed;",
-        posLeft ? "  left: 20px;" : "  right: 20px;",
-        "  bottom: 88px;",
-        "  width: 380px;",
-        "  height: 520px;",
-        "  background: white;",
-        "  border-radius: 16px;",
-        "  box-shadow: 0 8px 32px rgba(0,0,0,0.12);",
-        "  display: none;",
-        "  flex-direction: column;",
-        "  z-index: 99998;",
-        "  overflow: hidden;",
-        "  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;",
-        "}",
-        ".wc-panel.open { display: flex; }",
-        "",
-        ".wc-header {",
-        "  padding: 16px;",
-        "  background: " + accentColor + ";",
-        "  color: white;",
-        "  font-weight: 600;",
-        "  font-size: 15px;",
-        "  display: flex;",
-        "  align-items: center;",
-        "  justify-content: space-between;",
-        "}",
-        ".wc-header-close {",
-        "  background: none;",
-        "  border: none;",
-        "  color: white;",
-        "  font-size: 20px;",
-        "  cursor: pointer;",
-        "  padding: 4px 8px;",
-        "  line-height: 1;",
-        "}",
-        "",
-        ".wc-messages {",
-        "  flex: 1;",
-        "  overflow-y: auto;",
-        "  padding: 12px;",
-        "  display: flex;",
-        "  flex-direction: column;",
-        "  gap: 8px;",
-        "}",
-        "",
-        ".wc-msg {",
-        "  max-width: 80%;",
-        "  padding: 10px 14px;",
-        "  border-radius: 16px;",
-        "  font-size: 14px;",
-        "  line-height: 1.4;",
-        "  word-wrap: break-word;",
-        "}",
-        ".wc-msg.user {",
-        "  align-self: flex-end;",
-        "  background: " + accentColor + ";",
-        "  color: white;",
-        "  border-bottom-right-radius: 4px;",
-        "}",
-        ".wc-msg.agent {",
-        "  align-self: flex-start;",
-        "  background: #f0f0f0;",
-        "  color: #333;",
-        "  border-bottom-left-radius: 4px;",
-        "}",
-        ".wc-msg .wc-time {",
-        "  font-size: 11px;",
-        "  opacity: 0.6;",
-        "  margin-top: 4px;",
-        "}",
-        "",
-        ".wc-input-bar {",
-        "  padding: 12px;",
-        "  border-top: 1px solid #eee;",
-        "  display: flex;",
-        "  gap: 8px;",
-        "}",
-        ".wc-input-bar input {",
-        "  flex: 1;",
-        "  padding: 10px 14px;",
-        "  border: 1px solid #ddd;",
-        "  border-radius: 24px;",
-        "  font-size: 14px;",
-        "  outline: none;",
-        "  font-family: inherit;",
-        "}",
-        ".wc-input-bar input:focus { border-color: " + accentColor + "; }",
-        ".wc-input-bar button {",
-        "  width: 40px;",
-        "  height: 40px;",
-        "  border-radius: 50%;",
-        "  background: " + accentColor + ";",
-        "  color: white;",
-        "  border: none;",
-        "  cursor: pointer;",
-        "  font-size: 16px;",
-        "  display: flex;",
-        "  align-items: center;",
-        "  justify-content: center;",
-        "}",
-        ".wc-input-bar button:disabled { opacity: 0.5; cursor: default; }",
-        "",
-        ".wc-typing {",
-        "  align-self: flex-start;",
-        "  padding: 10px 14px;",
-        "  background: #f0f0f0;",
-        "  border-radius: 16px;",
-        "  font-size: 14px;",
-        "  color: #999;",
-        "  border-bottom-left-radius: 4px;",
-        "}",
-        "",
-        ".wc-powered {",
-        "  text-align: center;",
-        "  font-size: 11px;",
-        "  color: #bbb;",
-        "  padding: 4px 0 8px;",
-        "}",
-        "",
-        "@media (max-width: 420px) {",
-        "  .wc-panel {",
-        "    width: calc(100vw - 16px);",
-        "    height: calc(100vh - 100px);",
-        "    left: 8px;",
-        "    right: 8px;",
-        "    bottom: 80px;",
-        "    border-radius: 12px;",
-        "  }",
-        "}",
-    ].join("\n");
-    document.head.appendChild(styles);
-    // ─── DOM ──────────────────────────────────────────────────
-    // Bubble button
-    const bubble = document.createElement("button");
-    bubble.className = "wc-bubble";
-    bubble.setAttribute("aria-label", "Open chat");
-    bubble.innerHTML =
-        '<svg width="24" height="24" 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>';
-    bubble.addEventListener("click", togglePanel);
-    document.body.appendChild(bubble);
-    // Chat panel
-    const panel = document.createElement("div");
-    panel.className = "wc-panel";
-    // Header
-    const header = document.createElement("div");
-    header.className = "wc-header";
-    const headerSpan = document.createElement("span");
-    headerSpan.textContent = headerTitle;
-    const closeBtn = document.createElement("button");
-    closeBtn.className = "wc-header-close";
-    closeBtn.setAttribute("aria-label", "Close chat");
-    closeBtn.innerHTML = "&times;";
-    closeBtn.addEventListener("click", togglePanel);
-    header.appendChild(headerSpan);
-    header.appendChild(closeBtn);
-    panel.appendChild(header);
-    // Messages area
-    const msgsEl = document.createElement("div");
-    msgsEl.className = "wc-messages";
-    panel.appendChild(msgsEl);
-    // Input bar
-    const inputBar = document.createElement("div");
-    inputBar.className = "wc-input-bar";
-    const inputEl = document.createElement("input");
-    inputEl.type = "text";
-    inputEl.placeholder = "Type a message...";
-    inputEl.setAttribute("autocomplete", "off");
-    inputEl.addEventListener("keydown", function (e) {
-        if (e.key === "Enter" && !e.shiftKey) {
-            e.preventDefault();
-            sendMessage();
-        }
-    });
-    const sendBtn = document.createElement("button");
-    sendBtn.setAttribute("aria-label", "Send");
-    sendBtn.innerHTML = "&#8593;";
-    sendBtn.addEventListener("click", sendMessage);
-    inputBar.appendChild(inputEl);
-    inputBar.appendChild(sendBtn);
-    panel.appendChild(inputBar);
-    // Powered-by
-    const powered = document.createElement("div");
-    powered.className = "wc-powered";
-    powered.textContent = "Powered by WhaleChat";
-    panel.appendChild(powered);
-    document.body.appendChild(panel);
-    // ─── Functions ────────────────────────────────────────────
-    function togglePanel() {
-        isOpen = !isOpen;
-        if (isOpen) {
-            panel.classList.add("open");
-            bubble.innerHTML =
-                '<svg width="24" height="24" 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>';
-            inputEl.focus();
-            // Load conversation history on first open
-            if (msgsEl.children.length === 0 && conversationId) {
-                loadHistory();
-            }
-        }
-        else {
-            panel.classList.remove("open");
-            bubble.innerHTML =
-                '<svg width="24" height="24" 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>';
-        }
+  });
+  const sendBtn = document.createElement("button");
+  sendBtn.setAttribute("aria-label", "Send");
+  sendBtn.innerHTML = "&#8593;";
+  sendBtn.addEventListener("click", sendMessage);
+  inputBar.appendChild(inputEl);
+  inputBar.appendChild(sendBtn);
+  panel.appendChild(inputBar);
+
+  // Powered-by
+  const powered = document.createElement("div");
+  powered.className = "wc-powered";
+  powered.textContent = "Powered by WhaleChat";
+  panel.appendChild(powered);
+  document.body.appendChild(panel);
+
+  // ─── Functions ────────────────────────────────────────────
+  function togglePanel() {
+    isOpen = !isOpen;
+    if (isOpen) {
+      panel.classList.add("open");
+      bubble.innerHTML = '<svg width="24" height="24" 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>';
+      inputEl.focus();
+      // Load conversation history on first open
+      if (msgsEl.children.length === 0 && conversationId) {
+        loadHistory();
+      }
+    } else {
+      panel.classList.remove("open");
+      bubble.innerHTML = '<svg width="24" height="24" 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>';
     }
-    async function loadHistory() {
-        try {
-            const res = await fetch(serverUrl +
-                "/webchat/channels/" +
-                channelId +
-                "/history?sender_id=" +
-                encodeURIComponent(userId) +
-                "&conversation_id=" +
-                encodeURIComponent(conversationId));
-            if (!res.ok)
-                return;
-            const data = await res.json();
-            if (data.messages && Array.isArray(data.messages)) {
-                for (const m of data.messages) {
-                    addMessageToUI({
-                        role: m.direction === "inbound" ? "user" : "agent",
-                        content: m.content || "",
-                        time: formatTime(m.created_at),
-                    });
-                }
-            }
-        }
-        catch {
-            // History load is best-effort
+  }
+  async function loadHistory() {
+    try {
+      const res = await fetch(serverUrl + "/webchat/channels/" + channelId + "/history?sender_id=" + encodeURIComponent(userId) + "&conversation_id=" + encodeURIComponent(conversationId));
+      if (!res.ok) return;
+      const data = await res.json();
+      if (data.messages && Array.isArray(data.messages)) {
+        for (const m of data.messages) {
+          addMessageToUI({
+            role: m.direction === "inbound" ? "user" : "agent",
+            content: m.content || "",
+            time: formatTime(m.created_at)
+          });
         }
+      }
+    } catch {
+      // History load is best-effort
     }
-    async function sendMessage() {
-        const text = inputEl.value.trim();
-        if (!text || isSending)
-            return;
-        inputEl.value = "";
-        isSending = true;
-        sendBtn.disabled = true;
-        // Add user message to UI immediately
+  }
+  async function sendMessage() {
+    const text = inputEl.value.trim();
+    if (!text || isSending) return;
+    inputEl.value = "";
+    isSending = true;
+    sendBtn.disabled = true;
+
+    // Add user message to UI immediately
+    addMessageToUI({
+      role: "user",
+      content: text,
+      time: formatTime(new Date().toISOString())
+    });
+
+    // Show typing indicator
+    const typingEl = document.createElement("div");
+    typingEl.className = "wc-typing";
+    typingEl.textContent = "Thinking...";
+    msgsEl.appendChild(typingEl);
+    msgsEl.scrollTop = msgsEl.scrollHeight;
+    try {
+      const res = await fetch(serverUrl + "/webchat/channels/" + channelId + "/messages", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          sender_id: userId,
+          sender_name: "Visitor",
+          content: text,
+          content_type: "text",
+          conversation_id: conversationId || undefined
+        })
+      });
+      const data = await res.json();
+      typingEl.remove();
+      if (!res.ok) {
         addMessageToUI({
-            role: "user",
-            content: text,
-            time: formatTime(new Date().toISOString()),
+          role: "agent",
+          content: data.error || "Something went wrong. Please try again.",
+          time: formatTime(new Date().toISOString())
         });
-        // Show typing indicator
-        const typingEl = document.createElement("div");
-        typingEl.className = "wc-typing";
-        typingEl.textContent = "Thinking...";
-        msgsEl.appendChild(typingEl);
-        msgsEl.scrollTop = msgsEl.scrollHeight;
-        try {
-            const res = await fetch(serverUrl + "/webchat/channels/" + channelId + "/messages", {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({
-                    sender_id: userId,
-                    sender_name: "Visitor",
-                    content: text,
-                    content_type: "text",
-                    conversation_id: conversationId || undefined,
-                }),
-            });
-            const data = await res.json();
-            typingEl.remove();
-            if (!res.ok) {
-                addMessageToUI({
-                    role: "agent",
-                    content: data.error || "Something went wrong. Please try again.",
-                    time: formatTime(new Date().toISOString()),
-                });
-                return;
-            }
-            // Persist conversation ID for session continuity
-            if (data.conversation_id) {
-                conversationId = data.conversation_id;
-                sessionStorage.setItem(STORAGE_KEY + "_conv", conversationId);
-            }
-            if (data.agent_response?.content) {
-                addMessageToUI({
-                    role: "agent",
-                    content: data.agent_response.content,
-                    time: formatTime(data.agent_response.created_at || new Date().toISOString()),
-                });
-            }
-        }
-        catch {
-            typingEl.textContent = "Failed to send. Try again.";
-            setTimeout(function () {
-                typingEl.remove();
-            }, 3000);
-        }
-        finally {
-            isSending = false;
-            sendBtn.disabled = false;
-        }
+        return;
+      }
+
+      // Persist conversation ID for session continuity
+      if (data.conversation_id) {
+        conversationId = data.conversation_id;
+        sessionStorage.setItem(STORAGE_KEY + "_conv", conversationId);
+      }
+      if (data.agent_response?.content) {
+        addMessageToUI({
+          role: "agent",
+          content: data.agent_response.content,
+          time: formatTime(data.agent_response.created_at || new Date().toISOString())
+        });
+      }
+    } catch {
+      typingEl.textContent = "Failed to send. Try again.";
+      setTimeout(function () {
+        typingEl.remove();
+      }, 3000);
+    } finally {
+      isSending = false;
+      sendBtn.disabled = false;
     }
-    function addMessageToUI(msg) {
-        const el = document.createElement("div");
-        el.className = "wc-msg " + msg.role;
-        const contentSpan = document.createElement("span");
-        contentSpan.textContent = msg.content;
-        el.appendChild(contentSpan);
-        const timeDiv = document.createElement("div");
-        timeDiv.className = "wc-time";
-        timeDiv.textContent = msg.time;
-        el.appendChild(timeDiv);
-        msgsEl.appendChild(el);
-        msgsEl.scrollTop = msgsEl.scrollHeight;
+  }
+  function addMessageToUI(msg) {
+    const el = document.createElement("div");
+    el.className = "wc-msg " + msg.role;
+    const contentSpan = document.createElement("span");
+    contentSpan.textContent = msg.content;
+    el.appendChild(contentSpan);
+    const timeDiv = document.createElement("div");
+    timeDiv.className = "wc-time";
+    timeDiv.textContent = msg.time;
+    el.appendChild(timeDiv);
+    msgsEl.appendChild(el);
+    msgsEl.scrollTop = msgsEl.scrollHeight;
+  }
+  function formatTime(isoString) {
+    try {
+      const d = new Date(isoString);
+      return d.toLocaleTimeString(undefined, {
+        hour: "numeric",
+        minute: "2-digit"
+      });
+    } catch {
+      return "";
     }
-    function formatTime(isoString) {
-        try {
-            const d = new Date(isoString);
-            return d.toLocaleTimeString(undefined, {
-                hour: "numeric",
-                minute: "2-digit",
-            });
-        }
-        catch {
-            return "";
-        }
+  }
+
+  // Expose API for programmatic control
+  window.WhaleChat = {
+    version: WIDGET_VERSION,
+    open: function () {
+      if (!isOpen) togglePanel();
+    },
+    close: function () {
+      if (isOpen) togglePanel();
+    },
+    isOpen: function () {
+      return isOpen;
     }
-    // Expose API for programmatic control
-    window.WhaleChat = {
-        version: WIDGET_VERSION,
-        open: function () {
-            if (!isOpen)
-                togglePanel();
-        },
-        close: function () {
-            if (isOpen)
-                togglePanel();
-        },
-        isOpen: function () {
-            return isOpen;
-        },
-    };
+  };
 })();
+//# sourceMappingURL=widget.js.map