acecoderz-chat-ui 1.0.0

package/dist/browser/chatbot-ui.js

@@ -0,0 +1,878 @@
+"use strict";
+(() => {
+  // core/src/urlWhitelist.ts
+  async function checkUrlWhitelist(apiUrl) {
+    try {
+      if (typeof window === "undefined" || !window.location) {
+        return { isWhitelisted: true };
+      }
+      const currentOrigin = window.location.origin;
+      if (!currentOrigin) {
+        return { isWhitelisted: true };
+      }
+      const checkUrl = `${apiUrl}/url-whitelist/check?url=${encodeURIComponent(currentOrigin)}`;
+      const response = await fetch(checkUrl, {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json"
+        }
+      });
+      if (!response.ok) {
+        if (response.status === 404) {
+          return { isWhitelisted: true };
+        }
+        const errorData = await response.json().catch(() => ({ message: "Unknown error" }));
+        return {
+          isWhitelisted: false,
+          error: errorData.error?.message || errorData.message || "Failed to check URL whitelist"
+        };
+      }
+      const data = await response.json();
+      const result = data.data || data;
+      if (result.isWhitelisted) {
+        return { isWhitelisted: true };
+      }
+      return {
+        isWhitelisted: false,
+        error: `This chatbot is not authorized for ${currentOrigin}. Please contact the administrator.`
+      };
+    } catch (error) {
+      console.warn("URL whitelist check failed:", error);
+      return { isWhitelisted: true };
+    }
+  }
+  function getWhitelistErrorMessage(origin) {
+    return `This chatbot is not authorized to work on ${origin}. Please contact the administrator to add this URL to the whitelist.`;
+  }
+
+  // core/src/apiLogger.ts
+  var ApiLogger = class {
+    constructor() {
+      this.logs = [];
+      this.maxLogs = 1e3;
+      // Maximum number of logs to keep in memory
+      this.enabled = true;
+    }
+    /**
+     * Enable or disable logging
+     */
+    setEnabled(enabled) {
+      this.enabled = enabled;
+    }
+    /**
+     * Log an API call
+     */
+    log(entry) {
+      if (!this.enabled) return;
+      this.logs.push(entry);
+      if (this.logs.length > this.maxLogs) {
+        this.logs.shift();
+      }
+      let isDev = false;
+      if (typeof window !== "undefined") {
+        isDev = window.location?.hostname === "localhost" || window.location?.hostname === "127.0.0.1";
+      }
+      if (!isDev) {
+        try {
+          const proc = globalThis.process;
+          if (proc && proc.env && proc.env.NODE_ENV === "development") {
+            isDev = true;
+          }
+        } catch {
+        }
+      }
+      if (isDev) {
+        console.log("[API Logger]", entry);
+      }
+    }
+    /**
+     * Get all logs
+     */
+    getLogs() {
+      return [...this.logs];
+    }
+    /**
+     * Clear all logs
+     */
+    clearLogs() {
+      this.logs = [];
+    }
+    /**
+     * Export logs to a file
+     */
+    async exportToFile(filename = `api-logs-${(/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-")}.json`) {
+      if (this.logs.length === 0) {
+        console.warn("[API Logger] No logs to export");
+        return;
+      }
+      const logData = {
+        exportedAt: (/* @__PURE__ */ new Date()).toISOString(),
+        totalLogs: this.logs.length,
+        logs: this.logs
+      };
+      const jsonString = JSON.stringify(logData, null, 2);
+      const blob = new Blob([jsonString], { type: "application/json" });
+      if ("showSaveFilePicker" in window) {
+        try {
+          const fileHandle = await window.showSaveFilePicker({
+            suggestedName: filename,
+            types: [{
+              description: "JSON files",
+              accept: { "application/json": [".json"] }
+            }]
+          });
+          const writable = await fileHandle.createWritable();
+          await writable.write(blob);
+          await writable.close();
+          console.log(`[API Logger] Logs saved to file: ${filename}`);
+          return;
+        } catch (err) {
+          if (err.name !== "AbortError") {
+            console.warn("[API Logger] File System Access API failed, falling back to download:", err);
+          } else {
+            return;
+          }
+        }
+      }
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+      console.log(`[API Logger] Logs downloaded as: ${filename}`);
+    }
+    /**
+     * Export logs as text file (human-readable format)
+     */
+    async exportToTextFile(filename = `api-logs-${(/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-")}.txt`) {
+      if (this.logs.length === 0) {
+        console.warn("[API Logger] No logs to export");
+        return;
+      }
+      let textContent = `API Call Logs
+`;
+      textContent += `Exported at: ${(/* @__PURE__ */ new Date()).toISOString()}
+`;
+      textContent += `Total logs: ${this.logs.length}
+`;
+      textContent += `${"=".repeat(80)}
+
+`;
+      this.logs.forEach((log, index) => {
+        textContent += `[${index + 1}] ${log.timestamp}
+`;
+        textContent += `URL: ${log.method} ${log.url}
+`;
+        if (log.requestHeaders) {
+          textContent += `Request Headers:
+`;
+          Object.entries(log.requestHeaders).forEach(([key, value]) => {
+            if (key.toLowerCase() === "authorization") {
+              textContent += `  ${key}: ${value.substring(0, 20)}...
+`;
+            } else {
+              textContent += `  ${key}: ${value}
+`;
+            }
+          });
+        }
+        if (log.requestBody) {
+          textContent += `Request Body:
+${JSON.stringify(log.requestBody, null, 2)}
+`;
+        }
+        if (log.error) {
+          textContent += `Error: ${log.error}
+`;
+        } else if (log.responseStatus) {
+          textContent += `Response Status: ${log.responseStatus}
+`;
+          if (log.responseBody) {
+            textContent += `Response Body:
+${JSON.stringify(log.responseBody, null, 2)}
+`;
+          }
+        }
+        if (log.duration !== void 0) {
+          textContent += `Duration: ${log.duration}ms
+`;
+        }
+        textContent += `${"-".repeat(80)}
+
+`;
+      });
+      const blob = new Blob([textContent], { type: "text/plain" });
+      if ("showSaveFilePicker" in window) {
+        try {
+          const fileHandle = await window.showSaveFilePicker({
+            suggestedName: filename,
+            types: [{
+              description: "Text files",
+              accept: { "text/plain": [".txt"] }
+            }]
+          });
+          const writable = await fileHandle.createWritable();
+          await writable.write(blob);
+          await writable.close();
+          console.log(`[API Logger] Logs saved to file: ${filename}`);
+          return;
+        } catch (err) {
+          if (err.name !== "AbortError") {
+            console.warn("[API Logger] File System Access API failed, falling back to download:", err);
+          } else {
+            return;
+          }
+        }
+      }
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+      console.log(`[API Logger] Logs downloaded as: ${filename}`);
+    }
+  };
+  var apiLogger = new ApiLogger();
+
+  // core/src/ChatEngine.ts
+  var ChatEngine = class {
+    // Track conversation ID for context
+    constructor(config) {
+      this.messages = [];
+      this.input = "";
+      this.isLoading = false;
+      this.error = null;
+      this.ws = null;
+      this.listeners = /* @__PURE__ */ new Map();
+      this.abortController = null;
+      this.conversationId = null;
+      this.config = config;
+      this.initializeWebSocket();
+    }
+    // Event emitter pattern for reactivity
+    on(event, callback) {
+      if (!this.listeners.has(event)) {
+        this.listeners.set(event, /* @__PURE__ */ new Set());
+      }
+      this.listeners.get(event).add(callback);
+      return () => this.off(event, callback);
+    }
+    off(event, callback) {
+      this.listeners.get(event)?.delete(callback);
+    }
+    emit(event, data) {
+      this.listeners.get(event)?.forEach((callback) => callback(data));
+    }
+    // Getters
+    getMessages() {
+      return [...this.messages];
+    }
+    getInput() {
+      return this.input;
+    }
+    getIsLoading() {
+      return this.isLoading;
+    }
+    getError() {
+      return this.error;
+    }
+    getConversationId() {
+      return this.conversationId;
+    }
+    // Methods
+    setInput(value) {
+      this.input = value;
+      this.emit("inputChange", value);
+    }
+    async sendMessage(content) {
+      console.log("[ChatEngine] sendMessage called", { content, input: this.input, isLoading: this.isLoading });
+      const message = (content || this.input).trim();
+      console.log("[ChatEngine] Message after trim:", message);
+      if (!message || this.isLoading) {
+        console.log("[ChatEngine] Early return - message empty or loading", { message, isLoading: this.isLoading });
+        return;
+      }
+      const userMessage = {
+        id: Date.now().toString(),
+        content: message,
+        role: "user",
+        timestamp: /* @__PURE__ */ new Date()
+      };
+      this.messages.push(userMessage);
+      this.input = "";
+      this.emit("inputChange", "");
+      this.emit("messagesChange", this.messages);
+      this.emit("message", userMessage);
+      this.config.onMessage?.(userMessage);
+      this.isLoading = true;
+      this.error = null;
+      this.emit("loadingChange", true);
+      this.emit("error", null);
+      if (this.abortController) {
+        this.abortController.abort();
+      }
+      this.abortController = new AbortController();
+      try {
+        console.log("[ChatEngine] Starting API call process", {
+          enableUrlWhitelistCheck: this.config.enableUrlWhitelistCheck,
+          apiUrl: this.config.apiUrl,
+          enableWebSocket: this.config.enableWebSocket,
+          wsReadyState: this.ws?.readyState
+        });
+        if (this.config.enableUrlWhitelistCheck !== false && this.config.apiUrl) {
+          console.log("[ChatEngine] Checking URL whitelist...", this.config.apiUrl);
+          try {
+            const whitelistCheck = await checkUrlWhitelist(this.config.apiUrl);
+            console.log("[ChatEngine] Whitelist check result:", whitelistCheck);
+            if (!whitelistCheck.isWhitelisted) {
+              const origin = typeof window !== "undefined" ? window.location.origin : "unknown";
+              const errorMessage = whitelistCheck.error || getWhitelistErrorMessage(origin);
+              console.error("[ChatEngine] URL not whitelisted:", errorMessage);
+              const error = new Error(errorMessage);
+              this.error = error;
+              this.emit("error", error);
+              this.config.onError?.(error);
+              this.isLoading = false;
+              this.emit("loadingChange", false);
+              return;
+            }
+          } catch (whitelistError) {
+            console.error("[ChatEngine] Whitelist check failed with error:", whitelistError);
+            console.warn("[ChatEngine] Proceeding despite whitelist check error");
+          }
+        } else {
+          console.log("[ChatEngine] Skipping URL whitelist check", {
+            enableUrlWhitelistCheck: this.config.enableUrlWhitelistCheck,
+            hasApiUrl: !!this.config.apiUrl
+          });
+        }
+        if (this.config.enableWebSocket && this.ws?.readyState === WebSocket.OPEN) {
+          console.log("[ChatEngine] Sending via WebSocket");
+          this.ws.send(JSON.stringify({
+            type: "message",
+            content: message,
+            role: "user"
+          }));
+          this.isLoading = false;
+          this.emit("loadingChange", false);
+          return;
+        }
+        console.log("[ChatEngine] Sending message to backend:", message);
+        const response = await this.sendToBackend(message);
+        console.log("[ChatEngine] Backend response:", response);
+        if (response.conversationId) {
+          this.conversationId = response.conversationId;
+        }
+        const assistantMessage = {
+          id: response.id || Date.now().toString(),
+          content: response.message || response.content || "",
+          role: "assistant",
+          timestamp: new Date(response.timestamp || Date.now()),
+          metadata: response.metadata
+        };
+        this.messages.push(assistantMessage);
+        this.emit("messagesChange", this.messages);
+        this.emit("message", assistantMessage);
+        this.config.onMessage?.(assistantMessage);
+      } catch (err) {
+        if (err instanceof Error && err.name === "AbortError") {
+          return;
+        }
+        this.error = err instanceof Error ? err : new Error("Failed to send message");
+        this.emit("error", this.error);
+        this.config.onError?.(this.error);
+      } finally {
+        this.isLoading = false;
+        this.emit("loadingChange", false);
+      }
+    }
+    async sendToBackend(message) {
+      if (!this.config.apiUrl) {
+        throw new Error("API URL is required");
+      }
+      const url = `${this.config.apiUrl}/chat`;
+      console.log("[ChatEngine] Making API call to:", url);
+      const startTime = Date.now();
+      const requestBody = {
+        message,
+        conversationId: this.conversationId || void 0
+        // Use stored conversation ID for context
+      };
+      const headers = {
+        "Content-Type": "application/json",
+        ...this.config.headers
+      };
+      if (this.config.apiKey) {
+        headers["Authorization"] = `Bearer ${this.config.apiKey}`;
+      }
+      const logEntry = {
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        url,
+        method: "POST",
+        requestHeaders: { ...headers },
+        requestBody: { ...requestBody }
+      };
+      if (logEntry.requestHeaders && logEntry.requestHeaders["Authorization"]) {
+        logEntry.requestHeaders["Authorization"] = logEntry.requestHeaders["Authorization"].substring(0, 20) + "...";
+      }
+      try {
+        console.log("[ChatEngine] About to fetch:", {
+          url,
+          method: "POST",
+          headers,
+          body: requestBody
+        });
+        const response = await fetch(url, {
+          method: "POST",
+          headers,
+          body: JSON.stringify(requestBody),
+          signal: this.abortController?.signal
+        });
+        console.log("[ChatEngine] Fetch completed, status:", response.status);
+        const duration = Date.now() - startTime;
+        logEntry.duration = duration;
+        let responseBody = null;
+        const contentType = response.headers.get("content-type");
+        try {
+          if (contentType && contentType.includes("application/json")) {
+            responseBody = await response.json();
+          } else {
+            const text = await response.text();
+            try {
+              responseBody = JSON.parse(text);
+            } catch {
+              responseBody = text;
+            }
+          }
+        } catch (err) {
+          responseBody = null;
+        }
+        logEntry.responseStatus = response.status;
+        logEntry.responseHeaders = Object.fromEntries(response.headers.entries());
+        logEntry.responseBody = responseBody;
+        if (!response.ok) {
+          let errorMessage = `HTTP error! status: ${response.status}`;
+          if (response.status === 403) {
+            try {
+              const errorData = responseBody;
+              if (errorData?.error?.message) {
+                errorMessage = errorData.error.message;
+              } else {
+                const origin = typeof window !== "undefined" ? window.location.origin : "unknown";
+                errorMessage = getWhitelistErrorMessage(origin);
+              }
+            } catch {
+              const origin = typeof window !== "undefined" ? window.location.origin : "unknown";
+              errorMessage = getWhitelistErrorMessage(origin);
+            }
+          } else if (responseBody?.error?.message) {
+            errorMessage = responseBody.error.message;
+          } else if (typeof responseBody === "string") {
+            errorMessage = responseBody;
+          }
+          logEntry.error = errorMessage;
+          apiLogger.log(logEntry);
+          throw new Error(errorMessage);
+        }
+        apiLogger.log(logEntry);
+        return responseBody;
+      } catch (err) {
+        const duration = Date.now() - startTime;
+        logEntry.duration = duration;
+        logEntry.error = err instanceof Error ? err.message : String(err);
+        apiLogger.log(logEntry);
+        throw err;
+      }
+    }
+    initializeWebSocket() {
+      if (this.config.enableWebSocket && this.config.websocketUrl) {
+        try {
+          this.ws = new WebSocket(this.config.websocketUrl);
+          this.ws.onmessage = (event) => {
+            try {
+              const data = JSON.parse(event.data);
+              if (data.type === "message") {
+                const message = {
+                  id: data.id || Date.now().toString(),
+                  content: data.content,
+                  role: data.role || "assistant",
+                  timestamp: new Date(data.timestamp || Date.now()),
+                  metadata: data.metadata
+                };
+                this.messages.push(message);
+                this.emit("messagesChange", this.messages);
+                this.emit("message", message);
+                this.config.onMessage?.(message);
+                this.isLoading = false;
+                this.emit("loadingChange", false);
+              }
+            } catch (err) {
+              const error = err instanceof Error ? err : new Error("Failed to parse WebSocket message");
+              this.error = error;
+              this.emit("error", error);
+              this.config.onError?.(error);
+            }
+          };
+          this.ws.onerror = () => {
+            const error = new Error("WebSocket error");
+            this.error = error;
+            this.emit("error", error);
+            this.config.onError?.(error);
+          };
+          this.ws.onclose = () => {
+          };
+        } catch (err) {
+          const error = err instanceof Error ? err : new Error("Failed to initialize WebSocket");
+          this.error = error;
+          this.emit("error", error);
+          this.config.onError?.(error);
+        }
+      }
+    }
+    addMessage(message) {
+      this.messages.push(message);
+      this.emit("messagesChange", this.messages);
+      this.emit("message", message);
+      this.config.onMessage?.(message);
+    }
+    clearMessages() {
+      this.messages = [];
+      this.conversationId = null;
+      this.error = null;
+      this.emit("messagesChange", this.messages);
+      this.emit("error", null);
+    }
+    retryLastMessage() {
+      const lastUserMessage = [...this.messages].reverse().find((m) => m.role === "user");
+      if (lastUserMessage) {
+        const index = this.messages.findIndex((m) => m.id === lastUserMessage.id);
+        if (index >= 0) {
+          this.messages = this.messages.slice(0, index);
+          this.emit("messagesChange", this.messages);
+        }
+        return this.sendMessage(lastUserMessage.content);
+      }
+      return Promise.resolve();
+    }
+    destroy() {
+      this.ws?.close();
+      this.abortController?.abort();
+      this.listeners.clear();
+    }
+  };
+
+  // adapters/vanilla/index.ts
+  function escapeHtml(text) {
+    const div = document.createElement("div");
+    div.textContent = text;
+    return div.innerHTML;
+  }
+  function formatText(text, enableMarkdown) {
+    if (!enableMarkdown) {
+      return escapeHtml(text);
+    }
+    let formatted = escapeHtml(text);
+    formatted = formatted.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>");
+    formatted = formatted.replace(/__(.+?)__/g, "<strong>$1</strong>");
+    formatted = formatted.replace(/\*(.+?)\*/g, "<em>$1</em>");
+    formatted = formatted.replace(/_(.+?)_/g, "<em>$1</em>");
+    formatted = formatted.replace(/`([^`]+)`/g, "<code>$1</code>");
+    formatted = formatted.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
+    formatted = formatted.replace(/\n/g, "<br>");
+    return formatted;
+  }
+  function getContainerElement(container) {
+    if (typeof container === "string") {
+      const element = document.querySelector(container);
+      if (!element) {
+        throw new Error(`Chatbot container not found: ${container}`);
+      }
+      if (!(element instanceof HTMLElement)) {
+        throw new Error(`Chatbot container is not an HTMLElement: ${container}`);
+      }
+      return element;
+    }
+    return container;
+  }
+  function createChatUI(options) {
+    const {
+      config,
+      theme = {},
+      container,
+      placeholder = "Type your message...",
+      showTimestamp = true,
+      showAvatar = true,
+      userAvatar,
+      assistantAvatar,
+      maxHeight = "600px",
+      disabled = false,
+      autoScroll = true,
+      enableMarkdown = true,
+      showClearButton = true,
+      emptyStateMessage = "Start a conversation...",
+      loadingMessage = "Thinking...",
+      customMessageRenderer,
+      onInit
+    } = options;
+    const containerElement = getContainerElement(container);
+    const engine = new ChatEngine(config);
+    let messagesContainer = null;
+    let inputElement = null;
+    let formElement = null;
+    let sendButtonElement = null;
+    let clearButtonElement = null;
+    let isUpdatingInputProgrammatically = false;
+    const applyTheme = () => {
+      const root = containerElement;
+      root.style.setProperty("--chat-primary-color", theme.primaryColor || "#3b82f6");
+      root.style.setProperty("--chat-secondary-color", theme.secondaryColor || "#64748b");
+      root.style.setProperty("--chat-background-color", theme.backgroundColor || "#ffffff");
+      root.style.setProperty("--chat-text-color", theme.textColor || "#1e293b");
+      root.style.setProperty("--chat-user-message-color", theme.userMessageColor || "#3b82f6");
+      root.style.setProperty("--chat-assistant-message-color", theme.assistantMessageColor || "#f1f5f9");
+      root.style.setProperty("--chat-input-background-color", theme.inputBackgroundColor || "#f8fafc");
+      root.style.setProperty("--chat-input-text-color", theme.inputTextColor || "#1e293b");
+      root.style.setProperty("--chat-border-radius", theme.borderRadius || "0.5rem");
+      root.style.setProperty("--chat-font-family", theme.fontFamily || "system-ui, sans-serif");
+      root.style.setProperty("--chat-font-size", theme.fontSize || "1rem");
+      root.style.setProperty("--chat-max-height", maxHeight);
+    };
+    const scrollToBottom = () => {
+      if (messagesContainer && autoScroll) {
+        messagesContainer.scrollTop = messagesContainer.scrollHeight;
+      }
+    };
+    const formatTimestamp = (date) => {
+      return new Intl.DateTimeFormat("en-US", {
+        hour: "2-digit",
+        minute: "2-digit"
+      }).format(date);
+    };
+    const renderAvatar = (role) => {
+      if (!showAvatar) return "";
+      const avatar = role === "user" ? userAvatar : assistantAvatar;
+      if (avatar) {
+        return `<div class="chat-avatar"><img src="${escapeHtml(avatar)}" alt="${role}" /></div>`;
+      }
+      return `<div class="chat-avatar">${role === "user" ? "U" : "A"}</div>`;
+    };
+    const renderMessage = (message) => {
+      if (customMessageRenderer) {
+        return customMessageRenderer(message);
+      }
+      const isUser = message.role === "user";
+      const isSystem = message.role === "system";
+      const role = isUser ? "user" : "assistant";
+      const avatarHtml = !isSystem ? renderAvatar(role) : "";
+      const messageContent = enableMarkdown ? `<div class="chat-markdown">${formatText(message.content, enableMarkdown)}</div>` : `<div class="chat-message-text">${formatText(message.content, false)}</div>`;
+      return `
+      <div class="chat-message ${isUser ? "chat-message-user" : isSystem ? "chat-message-system" : "chat-message-assistant"}" data-message-id="${escapeHtml(message.id)}">
+        ${!isUser && !isSystem ? avatarHtml : ""}
+        <div class="chat-message-content ${isUser ? "chat-message-content-user" : isSystem ? "chat-message-content-system" : "chat-message-content-assistant"}">
+          ${messageContent}
+          ${showTimestamp ? `<div class="chat-message-timestamp">${formatTimestamp(message.timestamp)}</div>` : ""}
+        </div>
+        ${isUser ? avatarHtml : ""}
+      </div>
+    `;
+    };
+    const render = () => {
+      const messages = engine.getMessages();
+      const input = engine.getInput();
+      const isLoading = engine.getIsLoading();
+      const error = engine.getError();
+      const wasInputFocused = inputElement && document.activeElement === inputElement;
+      const inputCursorPosition = inputElement ? inputElement.selectionStart || 0 : 0;
+      applyTheme();
+      containerElement.className = `chat-container ${containerElement.className || ""}`.trim();
+      containerElement.setAttribute("data-chat-ui", "true");
+      containerElement.innerHTML = `
+      <div class="chat-messages-container">
+        ${messages.length === 0 ? `<div class="chat-empty-state">${escapeHtml(emptyStateMessage)}</div>` : ""}
+        ${messages.map(renderMessage).join("")}
+        ${isLoading ? `
+          <div class="chat-message chat-message-assistant chat-message-loading">
+            ${renderAvatar("assistant")}
+            <div class="chat-message-content chat-message-content-assistant">
+              <div class="chat-message-text">${escapeHtml(loadingMessage)}</div>
+            </div>
+          </div>
+        ` : ""}
+      </div>
+      ${error ? `<div class="chat-error">
+        <div class="chat-error-message">Error: ${escapeHtml(error.message)}</div>
+        <button class="chat-retry-button" type="button">Retry</button>
+      </div>` : ""}
+      ${showClearButton && messages.length > 0 ? `
+        <div class="chat-actions">
+          <button class="chat-clear-button" type="button" title="Clear conversation">Clear</button>
+        </div>
+      ` : ""}
+      <div class="chat-input-container">
+        <form class="chat-input-form">
+          <input 
+            type="text" 
+            class="chat-input" 
+            value="${escapeHtml(input)}" 
+            placeholder="${escapeHtml(placeholder)}" 
+            ${disabled || isLoading ? "disabled" : ""}
+            aria-label="Chat input"
+          />
+          <button 
+            type="submit" 
+            class="chat-send-button"
+            ${disabled || isLoading || !input.trim() ? "disabled" : ""}
+            aria-label="Send message"
+          >
+            Send
+          </button>
+        </form>
+      </div>
+    `;
+      messagesContainer = containerElement.querySelector(".chat-messages-container");
+      inputElement = containerElement.querySelector(".chat-input");
+      formElement = containerElement.querySelector(".chat-input-form");
+      sendButtonElement = containerElement.querySelector(".chat-send-button");
+      clearButtonElement = containerElement.querySelector(".chat-clear-button");
+      const retryButton = containerElement.querySelector(".chat-retry-button");
+      if (wasInputFocused && inputElement) {
+        requestAnimationFrame(() => {
+          if (inputElement) {
+            inputElement.focus();
+            const newCursorPosition = Math.min(inputCursorPosition, inputElement.value.length);
+            inputElement.setSelectionRange(newCursorPosition, newCursorPosition);
+          }
+        });
+      }
+      if (formElement) {
+        formElement.addEventListener("submit", (e) => {
+          e.preventDefault();
+          if (!disabled && !isLoading && input.trim()) {
+            engine.sendMessage();
+          }
+        });
+      }
+      if (inputElement) {
+        inputElement.addEventListener("input", (e) => {
+          if (isUpdatingInputProgrammatically) {
+            return;
+          }
+          const target = e.target;
+          engine.setInput(target.value);
+        });
+        inputElement.addEventListener("keydown", (e) => {
+          if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            if (!disabled && !isLoading && input.trim()) {
+              engine.sendMessage();
+            }
+          }
+        });
+      }
+      if (clearButtonElement) {
+        clearButtonElement.addEventListener("click", () => {
+          if (confirm("Are you sure you want to clear the conversation?")) {
+            engine.clearMessages();
+          }
+        });
+      }
+      if (retryButton) {
+        retryButton.addEventListener("click", () => {
+          engine.retryLastMessage();
+        });
+      }
+      setTimeout(() => {
+        scrollToBottom();
+      }, 0);
+    };
+    engine.on("messagesChange", () => {
+      render();
+      setTimeout(() => {
+        scrollToBottom();
+      }, 100);
+    });
+    const updateSendButtonState = () => {
+      if (sendButtonElement) {
+        const input = engine.getInput();
+        const isLoading = engine.getIsLoading();
+        const shouldDisable = disabled || isLoading || !input.trim();
+        sendButtonElement.disabled = shouldDisable;
+      }
+    };
+    engine.on("inputChange", (value) => {
+      if (inputElement && inputElement.isConnected) {
+        const wasFocused = document.activeElement === inputElement;
+        const cursorPosition = inputElement.selectionStart || 0;
+        isUpdatingInputProgrammatically = true;
+        inputElement.value = value || "";
+        isUpdatingInputProgrammatically = false;
+        updateSendButtonState();
+        if (wasFocused) {
+          requestAnimationFrame(() => {
+            if (inputElement) {
+              inputElement.focus();
+              const newCursorPosition = Math.min(cursorPosition, inputElement.value.length);
+              inputElement.setSelectionRange(newCursorPosition, newCursorPosition);
+            }
+          });
+        }
+      } else {
+        render();
+      }
+    });
+    engine.on("loadingChange", () => {
+      updateSendButtonState();
+      render();
+      setTimeout(() => {
+        scrollToBottom();
+      }, 100);
+    });
+    engine.on("error", render);
+    render();
+    const instance = {
+      engine,
+      render,
+      destroy: () => {
+        engine.destroy();
+        containerElement.innerHTML = "";
+        messagesContainer = null;
+        inputElement = null;
+        formElement = null;
+        sendButtonElement = null;
+        clearButtonElement = null;
+      },
+      clear: () => {
+        engine.clearMessages();
+      },
+      scrollToBottom,
+      getContainer: () => containerElement
+    };
+    if (onInit) {
+      onInit(instance);
+    }
+    return instance;
+  }
+  if (typeof window !== "undefined") {
+    window.ChatbotUI = {
+      create: createChatUI,
+      init: (containerId, options) => {
+        const container = typeof containerId === "string" ? document.getElementById(containerId) || document.querySelector(containerId) : containerId;
+        if (!container) {
+          console.error(`Chatbot container not found: ${containerId}`);
+          return null;
+        }
+        return createChatUI({
+          container,
+          ...options
+        });
+      }
+    };
+  }
+})();
+//# sourceMappingURL=chatbot-ui.js.map