aizek-chatbot 1.0.26 → 1.0.28

package/dist/index.mjs

@@ -2,8 +2,14 @@ import { useRef, useState, useEffect } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
+import sanitizeHtml from 'sanitize-html';
 
-// src/utils/cx.ts
+// src/utils/global.ts
+var SESSION_TTL_MS = 60 * 60 * 1e3;
+var MAX_SESSIONS = 3;
+var DEVICE_KEY = "aizek_device_id_v1";
+var ACTIVE_SESSION_KEY = "aizek_active_session_v1";
+var LOCAL_SESSIONS_KEY = "aizek_sessions_v1";
 function validateHeaders(headers, authConfig, opts = {}) {
   if (headers && (!authConfig || Object.keys(authConfig).length === 0)) {
     return {
@@ -32,6 +38,65 @@ function validateHeaders(headers, authConfig, opts = {}) {
   const isValid = hasAllRequired && !hasExtraKeys && emptyValueKeys.length === 0;
   return { isValid, missingKeys, extraKeys, emptyValueKeys };
 }
+function getOrCreateDeviceId() {
+  if (typeof window === "undefined") return "";
+  const existing = localStorage.getItem(DEVICE_KEY);
+  if (existing) return existing;
+  const id = crypto.randomUUID();
+  localStorage.setItem(DEVICE_KEY, id);
+  return id;
+}
+function now() {
+  return Date.now();
+}
+function readStoredSessions() {
+  try {
+    const raw = localStorage.getItem(LOCAL_SESSIONS_KEY);
+    const parsed = JSON.parse(raw ?? "[]");
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter((x) => x && typeof x.sessionId === "string" && typeof x.lastActive === "number").slice(0, MAX_SESSIONS);
+  } catch {
+    return [];
+  }
+}
+function writeStoredSessions(list) {
+  localStorage.setItem(LOCAL_SESSIONS_KEY, JSON.stringify(list.slice(0, MAX_SESSIONS)));
+}
+function purgeExpiredLocalSessions(setActiveSessionIdState) {
+  const list = readStoredSessions();
+  const filtered = list.filter((s) => now() - s.lastActive <= SESSION_TTL_MS);
+  if (filtered.length !== list.length) writeStoredSessions(filtered);
+  const active = getActiveSessionId();
+  if (active && !filtered.some((s) => s.sessionId === active)) {
+    setActiveSessionId(null);
+    setActiveSessionIdState(null);
+  }
+  return filtered;
+}
+function getActiveSessionId() {
+  return localStorage.getItem(ACTIVE_SESSION_KEY);
+}
+function setActiveSessionId(id) {
+  if (!id) localStorage.removeItem(ACTIVE_SESSION_KEY);
+  else localStorage.setItem(ACTIVE_SESSION_KEY, id);
+}
+function touchSession(sessionId) {
+  const list = readStoredSessions();
+  const next = list.map((s) => s.sessionId === sessionId ? { ...s, lastActive: now() } : s);
+  if (!next.some((s) => s.sessionId === sessionId)) next.unshift({ sessionId, lastActive: now() });
+  writeStoredSessions(next.slice(0, MAX_SESSIONS));
+}
+function upsertSessionsFromServer(serverSessionIds, setSessions) {
+  const local = readStoredSessions();
+  const map = new Map(local.map((s) => [s.sessionId, s.lastActive]));
+  const merged = serverSessionIds.slice(0, MAX_SESSIONS).map((sid) => ({
+    sessionId: sid,
+    lastActive: map.get(sid) ?? now()
+  }));
+  writeStoredSessions(merged);
+  setSessions(merged.map((x) => x.sessionId));
+  return merged;
+}
 var HeaderAlert = ({ headerValidation, showAlert, setShowAlert }) => {
   if (!headerValidation || !showAlert) return null;
   const { isValid, missingKeys, extraKeys, emptyValueKeys, warning } = headerValidation;
@@ -422,7 +487,17 @@ var extractUIJsonFromText = (text) => {
     uiData
   };
 };
-var AizekChatBot = ({ clientId, headers, onMounted, onReady, onOpen, onClose, onMessage, onToolCall, onDisconnect }) => {
+var AizekChatBot = ({
+  clientId,
+  headers,
+  onMounted,
+  onReady,
+  onOpen,
+  onClose,
+  onMessage,
+  onToolCall,
+  onDisconnect
+}) => {
   const messagesEndRef = useRef(null);
   const [config, setConfig] = useState();
   const [messages, setMessages] = useState([]);
@@ -431,78 +506,169 @@ var AizekChatBot = ({ clientId, headers, onMounted, onReady, onOpen, onClose, on
   const [isOpen, setIsOpen] = useState(false);
   const [headerValidation, setHeaderValidation] = useState(null);
   const [showAlert, setShowAlert] = useState(true);
+  const [sessions, setSessions] = useState([]);
+  const [activeSessionId, setActiveSessionIdState] = useState(null);
+  const [activeTab, setActiveTab] = useState("home");
+  const [messageView, setMessageView] = useState("list");
   const PROXY_BASE_URL = "https://proxy.aizek.ai/api";
+  const createNewSession = async () => {
+    const deviceId = getOrCreateDeviceId();
+    if (sessions.length >= MAX_SESSIONS) {
+      throw new Error(`You can open up to ${MAX_SESSIONS} sessions.`);
+    }
+    const res = await fetch(`${PROXY_BASE_URL}/aizek-sessions/new?clientId=${clientId}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "x-device-id": deviceId,
+        "x-alternate": JSON.stringify(headers)
+      }
+    });
+    const data = await res.json();
+    if (!data.success) throw new Error(data.message || "session create failed");
+    const sid = data.data.sessionId;
+    const updatedSessions = data.data.sessions ?? [sid];
+    upsertSessionsFromServer(updatedSessions, setSessions);
+    setActiveSessionIdState(sid);
+    setActiveSessionId(sid);
+    setActiveTab("messages");
+    setMessageView("detail");
+    touchSession(sid);
+    setMessages([]);
+    return sid;
+  };
   const loadConfig = async () => {
     try {
       setIsConfigLoading(true);
-      const response = await fetch(`${PROXY_BASE_URL}/aizek-connect`, {
+      const deviceId = getOrCreateDeviceId();
+      purgeExpiredLocalSessions(setActiveSessionIdState);
+      const localActive = getActiveSessionId();
+      const response = await fetch(`${PROXY_BASE_URL}/aizek-connect?clientId=${clientId}`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
+          "x-device-id": deviceId,
           "x-alternate": JSON.stringify(headers)
-        },
-        credentials: "include",
-        body: JSON.stringify({ clientId })
+        }
       });
       const data = await response.json();
-      if (data.success) {
-        setIsOpen(data.data.widget_config.initial_open);
-        setConfig(data.data);
-        if (headers) {
-          const validationResult = validateHeaders(
-            headers,
-            data.data.auth_config,
-            {
-              allowExtra: false,
-              caseSensitive: true
-            }
-          );
-          setHeaderValidation(validationResult);
-        }
-        onReady?.({ config: { ...data.data } });
-      } else {
+      if (!data.success) {
         setIsOpen(false);
+        return;
+      }
+      setIsOpen(!!data.data.widget_config.initial_open);
+      setConfig(data.data);
+      const serverSessions = data.data.sessions ?? [];
+      const merged = upsertSessionsFromServer(serverSessions, setSessions);
+      if (merged.length === 0) {
+        const newSid = await createNewSession();
+        setActiveSessionIdState(newSid);
+        setActiveSessionId(newSid);
+        return;
+      }
+      const mergedIds = merged.map((s) => s.sessionId);
+      const nextActive = (localActive && mergedIds.includes(localActive) ? localActive : null) ?? mergedIds[0] ?? null;
+      setActiveSessionIdState(nextActive);
+      setActiveSessionId(nextActive);
+      if (headers) {
+        const validationResult = validateHeaders(headers, data.data.auth_config, {
+          allowExtra: false,
+          caseSensitive: true
+        });
+        setHeaderValidation(validationResult);
       }
+      onReady?.({ config: { ...data.data } });
     } catch (error) {
       console.error("Failed to load chat widget config:", error);
     } finally {
       setIsConfigLoading(false);
     }
   };
-  const disconnect = async () => {
+  const getHistoryMessageBySessionId = async (sid) => {
     try {
-      setIsConfigLoading(true);
-      await fetch(`${PROXY_BASE_URL}/aizek-disconnect`, {
-        method: "POST",
+      const deviceId = getOrCreateDeviceId();
+      const response = await fetch(`${PROXY_BASE_URL}/aizek-messages`, {
+        method: "GET",
         headers: {
           "Content-Type": "application/json",
+          "x-device-id": deviceId,
+          "x-session-id": sid,
           "x-alternate": JSON.stringify(headers)
-        },
-        credentials: "include"
+        }
       });
-      onDisconnect?.();
+      const data = await response.json();
+      if (!data.success) {
+        throw new Error(data.message || "Failed to fetch messages");
+      }
+      const historyMessages = [];
+      if (data.data?.messages && Array.isArray(data.data.messages)) {
+        for (const msg of data.data.messages) {
+          let textContent = "";
+          let uiData = null;
+          if (typeof msg.content === "string") {
+            textContent = msg.content;
+          } else if (Array.isArray(msg.content)) {
+            const textParts = [];
+            for (const item of msg.content) {
+              if (item.type === "text" && item.text) {
+                textParts.push(item.text);
+              }
+            }
+            textContent = textParts.join("\n");
+          }
+          if (textContent) {
+            const extracted = extractUIJsonFromText(textContent);
+            textContent = extracted.cleanedText;
+            uiData = extracted.uiData;
+          }
+          if (textContent.trim() || uiData) {
+            historyMessages.push({
+              text: textContent.trim() || void 0,
+              ui: uiData,
+              role: msg.role === "user" ? "user" : msg.role === "assistant" ? "assistant" : "user",
+              timestamp: /* @__PURE__ */ new Date()
+            });
+          }
+        }
+      }
+      return historyMessages;
     } catch (error) {
-      console.error("Failed to load chat widget config:", error);
-    } finally {
-      setIsConfigLoading(false);
+      console.error("Error fetching message history:", error);
+      return [];
     }
   };
   useEffect(() => {
     onMounted?.();
     loadConfig();
-    return () => {
-      disconnect();
-    };
   }, []);
   useEffect(() => {
-    const newIsOpen = !isOpen;
-    setIsOpen(newIsOpen);
-    if (newIsOpen) onOpen?.();
-    else onClose?.();
+    const t = setInterval(() => {
+      purgeExpiredLocalSessions(setActiveSessionIdState);
+    }, 1e3);
+    return () => clearInterval(t);
+  }, []);
+  useEffect(() => {
+    if (typeof config?.widget_config.initial_open === "boolean") {
+      const open = config.widget_config.initial_open;
+      setIsOpen(open);
+      if (open) onOpen?.();
+      else onClose?.();
+    }
   }, [config?.widget_config.initial_open]);
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
+  useEffect(() => {
+    if (activeSessionId && !isConfigLoading) {
+      getHistoryMessageBySessionId(activeSessionId).then((historyMessages) => {
+        setMessages(historyMessages);
+      }).catch((error) => {
+        console.error("Failed to load message history:", error);
+      });
+    } else if (!activeSessionId) {
+      setMessages([]);
+    }
+  }, [activeSessionId, isConfigLoading]);
   const addMessage = (payload) => {
     const newMessage = {
       text: payload.text,
@@ -517,24 +683,51 @@ var AizekChatBot = ({ clientId, headers, onMounted, onReady, onOpen, onClose, on
   };
   const sendMessage = async (message, approval) => {
     if (!message.trim() || isLoading) return;
-    const newMessage = {
-      text: message,
-      ui: void 0,
-      role: approval ? "approval" : "user",
-      timestamp: /* @__PURE__ */ new Date()
-    };
-    setMessages((prev) => [...prev, newMessage]);
+    setMessages((prev) => [
+      ...prev,
+      { text: message, ui: void 0, role: approval ? "approval" : "user", timestamp: /* @__PURE__ */ new Date() }
+    ]);
     setIsLoading(true);
     try {
-      const response = await fetch(`${PROXY_BASE_URL}/aizek-chat`, {
+      const deviceId = getOrCreateDeviceId();
+      purgeExpiredLocalSessions(setActiveSessionIdState);
+      let sid = activeSessionId;
+      if (!sid) sid = await createNewSession();
+      const response = await fetch(`${PROXY_BASE_URL}/aizek-chat?clientId=${clientId}`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
+          "x-device-id": deviceId,
+          "x-session-id": sid,
           "x-alternate": JSON.stringify(headers)
         },
-        body: JSON.stringify({ message }),
-        credentials: "include"
+        body: JSON.stringify({ message })
       });
+      if (response.status === 401) {
+        const local = readStoredSessions().filter((s) => s.sessionId !== sid);
+        writeStoredSessions(local);
+        setSessions(local.map((x) => x.sessionId));
+        setActiveSessionId(null);
+        setActiveSessionIdState(null);
+        const newSid = await createNewSession();
+        const retry = await fetch(`${PROXY_BASE_URL}/aizek-chat?clientId=${clientId}`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "x-device-id": deviceId,
+            "x-session-id": newSid,
+            "x-alternate": JSON.stringify(headers)
+          },
+          body: JSON.stringify({ message })
+        });
+        if (!retry.ok) throw new Error(`HTTP error ${retry.status}`);
+        const retryJson = await retry.json();
+        const text = JSON.stringify(retryJson.data);
+        const { cleanedText, uiData } = extractUIJsonFromText(text);
+        addMessage({ text: cleanedText, ui: uiData, role: "assistant" });
+        touchSession(newSid);
+        return;
+      }
       if (!response.ok) {
         throw new Error(`HTTP error ${response.status}`);
       }
@@ -578,87 +771,359 @@ var AizekChatBot = ({ clientId, headers, onMounted, onReady, onOpen, onClose, on
           }
         }
       }
+      touchSession(sid);
     } catch (error) {
       console.error("Error sending message:", error);
-      addMessage({ text: "\xDCzg\xFCn\xFCm, bir hata olu\u015Ftu. L\xFCtfen tekrar deneyin.", role: "assistant" });
+      addMessage({ text: "Sorry, something went wrong. Please try again.", role: "assistant" });
     } finally {
       setIsLoading(false);
     }
   };
+  const disconnectActiveSession = async () => {
+    try {
+      const deviceId = getOrCreateDeviceId();
+      const sid = activeSessionId;
+      if (!sid) return;
+      await fetch(`${PROXY_BASE_URL}/aizek-disconnect?clientId=${clientId}`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "x-device-id": deviceId,
+          "x-session-id": sid,
+          "x-alternate": JSON.stringify(headers)
+        },
+        body: JSON.stringify({ sessionId: sid })
+      });
+      const nextStored = readStoredSessions().filter((s) => s.sessionId !== sid);
+      writeStoredSessions(nextStored);
+      const nextSessions = nextStored.map((x) => x.sessionId);
+      setSessions(nextSessions);
+      const nextActive = nextSessions[0] ?? null;
+      setActiveSessionIdState(nextActive);
+      setActiveSessionId(nextActive);
+      setMessages([]);
+      onDisconnect?.();
+    } catch (e) {
+      console.error(e);
+    }
+  };
+  const handleSelectSession = (sid) => {
+    setActiveSessionIdState(sid);
+    setActiveSessionId(sid);
+    setActiveTab("messages");
+    setMessageView("detail");
+  };
+  const getSessionLabel = (sid) => {
+    const idx = sessions.indexOf(sid);
+    return idx >= 0 ? `Chat ${idx + 1}` : "Chat";
+  };
   const toggleChat = () => {
     const newIsOpen = !isOpen;
     setIsOpen(newIsOpen);
     if (newIsOpen) onOpen?.();
     else onClose?.();
   };
+  const clean = sanitizeHtml(config?.widget_config.welcome_message ?? "", {
+    allowedTags: ["b", "i", "em", "strong", "a", "p", "br"],
+    allowedAttributes: {
+      a: ["href", "target", "rel"]
+    }
+  });
   return /* @__PURE__ */ jsx(Fragment, { children: isConfigLoading ? /* @__PURE__ */ jsx(
     "button",
     {
       className: "floating-button bottom-right button-sizes medium loading-state",
       style: { background: "#4f46e5" },
-      "aria-label": "Y\xFCkleniyor",
+      "aria-label": "Loading",
       children: /* @__PURE__ */ jsx("div", { className: "loading-spinner" })
     }
   ) : /* @__PURE__ */ jsxs(Fragment, { children: [
     isOpen && /* @__PURE__ */ jsx("div", { className: `overlay floating-chat-overlay ${isOpen ? "is-open" : ""}`, onClick: toggleChat }),
-    /* @__PURE__ */ jsx("div", { className: `chat-container ${config?.widget_config.button_position} ${isOpen ? "is-open" : ""}`, style: { width: config?.widget_config.chat_width, height: config?.widget_config.chat_height }, children: /* @__PURE__ */ jsxs("div", { className: "chatbot-container", children: [
-      /* @__PURE__ */ jsxs("div", { className: "header", style: { background: config?.widget_config.header_background }, children: [
-        /* @__PURE__ */ jsx("div", { className: "logo-container", children: config?.widget_config.company_logo ? config?.widget_config.company_logo.startsWith("http") || config?.widget_config.company_logo.startsWith("data:") ? /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: config?.widget_config.company_logo,
-            alt: "Company Logo",
-            className: "logo-image"
-          }
-        ) : /* @__PURE__ */ jsx("span", { className: "logo-text", children: config?.widget_config.company_logo }) : "\u{1F916}" }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("h3", { className: "company-name", children: config?.widget_config.company_name }),
-          /* @__PURE__ */ jsx("p", { className: "status-text", children: isLoading ? "Yaz\u0131yor..." : "\xC7evrimi\xE7i" })
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `chat-container ${config?.widget_config.button_position} ${isOpen ? "is-open" : ""}`,
+        style: { width: config?.widget_config.chat_width, height: config?.widget_config.chat_height },
+        children: /* @__PURE__ */ jsxs("div", { className: "chatbot-container", children: [
+          /* @__PURE__ */ jsxs("div", { className: "header", style: { background: config?.widget_config.header_background }, children: [
+            /* @__PURE__ */ jsx("div", { className: "logo-container", children: config?.widget_config.company_logo ? config?.widget_config.company_logo.startsWith("http") || config?.widget_config.company_logo.startsWith("data:") ? /* @__PURE__ */ jsx("img", { src: config?.widget_config.company_logo, alt: "Company Logo", className: "logo-image" }) : /* @__PURE__ */ jsx("span", { className: "logo-text", children: config?.widget_config.company_logo }) : "\u{1F916}" }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h3", { className: "company-name", children: config?.widget_config.company_name }),
+              /* @__PURE__ */ jsx("p", { className: "status-text", children: isLoading ? "Typing..." : "Online" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "chat-content", children: [
+            activeTab === "home" && /* @__PURE__ */ jsxs("div", { className: "home-panel", children: [
+              /* @__PURE__ */ jsx("p", { className: "eyebrow", children: "Welcome" }),
+              /* @__PURE__ */ jsx("h3", { className: "panel-title", children: config?.widget_config.company_name }),
+              /* @__PURE__ */ jsx("p", { className: "panel-subtitle", children: "Ask anything. We keep your history and respond instantly." }),
+              /* @__PURE__ */ jsxs("div", { className: "home-actions", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    className: "primary-button",
+                    onClick: async () => {
+                      try {
+                        await createNewSession();
+                      } catch (e) {
+                        console.error(e);
+                      }
+                    },
+                    disabled: isLoading || sessions.length >= MAX_SESSIONS,
+                    children: "Start a new conversation"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    className: "ghost-button",
+                    onClick: () => {
+                      setActiveTab("messages");
+                      setMessageView("list");
+                    },
+                    children: "View conversations"
+                  }
+                )
+              ] })
+            ] }),
+            activeTab === "messages" && /* @__PURE__ */ jsx(Fragment, { children: messageView === "list" ? /* @__PURE__ */ jsxs("div", { className: "conversation-list", children: [
+              /* @__PURE__ */ jsxs("div", { className: "list-header", children: [
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("p", { className: "eyebrow", children: "Conversations" }),
+                  /* @__PURE__ */ jsx("h4", { className: "panel-title", children: "Inbox" })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    className: "session-new-button",
+                    onClick: async () => {
+                      try {
+                        await createNewSession();
+                      } catch (e) {
+                        console.error(e);
+                      }
+                    },
+                    disabled: sessions.length >= MAX_SESSIONS,
+                    children: /* @__PURE__ */ jsx("span", { children: "+ New" })
+                  }
+                )
+              ] }),
+              sessions.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "empty-list", children: [
+                /* @__PURE__ */ jsx("div", { className: "empty-state-icon", children: "\u{1F4AC}" }),
+                /* @__PURE__ */ jsx("h4", { className: "empty-state-title", children: "No conversations yet" }),
+                /* @__PURE__ */ jsx("p", { className: "empty-state-description", children: "Start a new conversation to see it appear here." })
+              ] }) : /* @__PURE__ */ jsx("div", { className: "conversation-items", children: sessions.map((sid) => /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  className: `conversation-item ${sid === activeSessionId ? "active" : ""}`,
+                  onClick: () => handleSelectSession(sid),
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "conversation-meta", children: [
+                      /* @__PURE__ */ jsx("p", { className: "conversation-title", children: getSessionLabel(sid) }),
+                      /* @__PURE__ */ jsxs("p", { className: "conversation-sub", children: [
+                        "Session ID: ",
+                        sid.slice(0, 8),
+                        "..."
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsx("span", { className: "conversation-pill", children: "Open" })
+                  ]
+                },
+                sid
+              )) })
+            ] }) : /* @__PURE__ */ jsxs("div", { className: "conversation-detail", children: [
+              /* @__PURE__ */ jsxs("div", { className: "detail-header", children: [
+                /* @__PURE__ */ jsx("div", { className: "detail-header-left", children: /* @__PURE__ */ jsx("button", { className: "icon-button", onClick: () => setMessageView("list"), "aria-label": "Back", children: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M15 18l-6-6 6-6",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
+                  }
+                ) }) }) }),
+                /* @__PURE__ */ jsxs("div", { className: "detail-header-center", children: [
+                  /* @__PURE__ */ jsx("div", { className: "detail-avatar", "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "M12 3c-4.418 0-8 3.134-8 7 0 2.382 1.362 4.486 3.5 5.737V21l4.07-2.13c.14.008.283.013.43.013 4.418 0 8-3.134 8-7s-3.582-7-8-7z",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinejoin: "round"
+                    }
+                  ) }) }),
+                  /* @__PURE__ */ jsxs("div", { className: "detail-title", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "detail-title-row", children: [
+                      /* @__PURE__ */ jsx("strong", { className: "detail-title-text", children: activeSessionId ? getSessionLabel(activeSessionId) : "Chat" }),
+                      /* @__PURE__ */ jsx("span", { className: `status-dot ${isLoading ? "typing" : "online"}`, "aria-hidden": "true" })
+                    ] }),
+                    /* @__PURE__ */ jsx("p", { className: "detail-subtitle", children: isLoading ? "Yaz\u0131yor\u2026" : "Online" })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "detail-header-right", children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      className: "icon-button",
+                      onClick: () => {
+                        setActiveTab("info");
+                        setMessageView("list");
+                      },
+                      "aria-label": "Bilgi",
+                      children: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: [
+                        /* @__PURE__ */ jsx(
+                          "path",
+                          {
+                            d: "M12 17v-6",
+                            stroke: "currentColor",
+                            strokeWidth: "2",
+                            strokeLinecap: "round"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "path",
+                          {
+                            d: "M12 8h.01",
+                            stroke: "currentColor",
+                            strokeWidth: "2.5",
+                            strokeLinecap: "round"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "circle",
+                          {
+                            cx: "12",
+                            cy: "12",
+                            r: "9",
+                            stroke: "currentColor",
+                            strokeWidth: "2"
+                          }
+                        )
+                      ] })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      className: "icon-button danger",
+                      onClick: disconnectActiveSession,
+                      disabled: !activeSessionId,
+                      "aria-label": "End conversation",
+                      children: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: [
+                        /* @__PURE__ */ jsx(
+                          "path",
+                          {
+                            d: "M3 6h18",
+                            stroke: "currentColor",
+                            strokeWidth: "2",
+                            strokeLinecap: "round"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "path",
+                          {
+                            d: "M8 6V4h8v2",
+                            stroke: "currentColor",
+                            strokeWidth: "2",
+                            strokeLinejoin: "round"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "path",
+                          {
+                            d: "M6 6l1 16h10l1-16",
+                            stroke: "currentColor",
+                            strokeWidth: "2",
+                            strokeLinejoin: "round"
+                          }
+                        )
+                      ] })
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "messages-container", children: [
+                /* @__PURE__ */ jsx(HeaderAlert, { headerValidation, setShowAlert, showAlert }),
+                messages.length === 0 ? /* @__PURE__ */ jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: clean } }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  messages.map((message, index) => /* @__PURE__ */ jsx(MessageBubble, { message, onAction: sendMessage }, index)),
+                  config?.widget_config.show_typing_indicator && isLoading && /* @__PURE__ */ jsx(TypingDots, {})
+                ] }),
+                /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
+              ] }),
+              /* @__PURE__ */ jsx(
+                ChatInput,
+                {
+                  handleSendMessage: sendMessage,
+                  isLoading,
+                  placeholder: config?.widget_config.placeholder ?? ""
+                }
+              )
+            ] }) }),
+            activeTab === "info" && /* @__PURE__ */ jsxs("div", { className: "info-panel", children: [
+              /* @__PURE__ */ jsx("p", { className: "eyebrow", children: "Info" }),
+              /* @__PURE__ */ jsx("h4", { className: "panel-title", children: "Widget Details" }),
+              /* @__PURE__ */ jsxs("ul", { className: "info-list", children: [
+                /* @__PURE__ */ jsxs("li", { children: [
+                  /* @__PURE__ */ jsx("span", { children: "Company" }),
+                  /* @__PURE__ */ jsx("strong", { children: config?.widget_config.company_name })
+                ] }),
+                /* @__PURE__ */ jsxs("li", { children: [
+                  /* @__PURE__ */ jsx("span", { children: "Status" }),
+                  /* @__PURE__ */ jsx("strong", { children: isLoading ? "Typing..." : "Online" })
+                ] }),
+                /* @__PURE__ */ jsxs("li", { children: [
+                  /* @__PURE__ */ jsx("span", { children: "Conversations" }),
+                  /* @__PURE__ */ jsx("strong", { children: sessions.length })
+                ] })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "bottom-nav", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: `nav-button ${activeTab === "home" ? "active" : ""}`,
+                onClick: () => {
+                  setActiveTab("home");
+                  setMessageView("list");
+                },
+                children: "Home"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: `nav-button ${activeTab === "messages" ? "active" : ""}`,
+                onClick: () => {
+                  setActiveTab("messages");
+                  setMessageView("list");
+                },
+                children: "Messages"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: `nav-button ${activeTab === "info" ? "active" : ""}`,
+                onClick: () => {
+                  setActiveTab("info");
+                  setMessageView("list");
+                },
+                children: "Info"
+              }
+            )
+          ] })
         ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "messages-container", children: [
-        /* @__PURE__ */ jsx(
-          HeaderAlert,
-          {
-            headerValidation,
-            setShowAlert,
-            showAlert
-          }
-        ),
-        messages.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "empty-state", children: [
-          /* @__PURE__ */ jsx("div", { className: "empty-state-icon", children: "\u{1F4AC}" }),
-          /* @__PURE__ */ jsx("h4", { className: "empty-state-title", children: config?.widget_config.welcome_message }),
-          /* @__PURE__ */ jsx("p", { className: "empty-state-description", children: "A\u015Fa\u011F\u0131daki alana mesaj\u0131n\u0131z\u0131 yazarak ba\u015Flayabilirsiniz." })
-        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          messages.map((message, index) => /* @__PURE__ */ jsx(
-            MessageBubble,
-            {
-              message,
-              onAction: sendMessage
-            },
-            index
-          )),
-          config?.widget_config.show_typing_indicator && isLoading && /* @__PURE__ */ jsx(TypingDots, {})
-        ] }),
-        /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
-      ] }),
-      /* @__PURE__ */ jsx(
-        ChatInput,
-        {
-          handleSendMessage: sendMessage,
-          isLoading,
-          placeholder: config?.widget_config.placeholder ?? ""
-        }
-      )
-    ] }) }),
+      }
+    ),
     /* @__PURE__ */ jsx(
       "button",
       {
         onClick: toggleChat,
         className: `floating-button ${config?.widget_config.button_position} button-sizes ${config?.widget_config.button_size} ${isOpen ? "is-open" : ""}`,
         style: { background: config?.widget_config.button_background },
-        "aria-label": isOpen ? "Chati kapat" : "Chati a\xE7",
-        children: isOpen ? /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) : /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4l4 4 4-4h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" }) })
+        children: isOpen ? /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) : /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4l4 4 4-4h4c1.1 0-2 .9-2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" }) })
       }
     )
   ] }) });