aizek-chatbot 1.0.30 → 1.0.32

package/dist/index.cjs

@@ -12,12 +12,42 @@ var ReactMarkdown__default = /*#__PURE__*/_interopDefault(ReactMarkdown);
 var remarkGfm__default = /*#__PURE__*/_interopDefault(remarkGfm);
 var sanitizeHtml__default = /*#__PURE__*/_interopDefault(sanitizeHtml);
 
-// src/utils/global.ts
-var SESSION_TTL_MS = 60 * 60 * 1e3;
+// src/constants/index.ts
+var PROXY_BASE_URL = "http://localhost:3001/api";
+var DEVICE_STORAGE_KEY = "aizek_device_id_v1";
+var ACTIVE_SESSION_STORAGE_KEY = "aizek_active_session_v1";
 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";
+var SESSION_TITLE_MAX_LENGTH = 46;
+
+// src/utils/device.ts
+function getOrCreateDeviceId() {
+  if (typeof window === "undefined") return "";
+  const existing = localStorage.getItem(DEVICE_STORAGE_KEY);
+  if (existing) return existing;
+  const id = crypto.randomUUID();
+  localStorage.setItem(DEVICE_STORAGE_KEY, id);
+  return id;
+}
+function getActiveSessionId() {
+  if (typeof window === "undefined") return null;
+  return localStorage.getItem(ACTIVE_SESSION_STORAGE_KEY);
+}
+function setActiveSessionId(id) {
+  if (typeof window === "undefined") return;
+  if (!id) localStorage.removeItem(ACTIVE_SESSION_STORAGE_KEY);
+  else localStorage.setItem(ACTIVE_SESSION_STORAGE_KEY, id);
+}
+
+// src/utils/headers.ts
+function buildRequestHeaders(deviceId, alternateHeaders, sessionId) {
+  const headers = {
+    "Content-Type": "application/json",
+    "x-device-id": deviceId,
+    "x-alternate": JSON.stringify(alternateHeaders)
+  };
+  if (sessionId) headers["x-session-id"] = sessionId;
+  return headers;
+}
 function validateHeaders(headers, authConfig, opts = {}) {
   if (headers && (!authConfig || Object.keys(authConfig).length === 0)) {
     return {
@@ -30,82 +60,558 @@ function validateHeaders(headers, authConfig, opts = {}) {
   }
   const { caseSensitive = false, allowExtra = false } = opts;
   const normalize = (s) => caseSensitive ? s : s.toLowerCase();
-  const headerEntries = Object.entries(headers).map(([k, v]) => [normalize(k), v.trim()]);
-  const authEntries = Object.entries(authConfig).map(([k, v]) => [normalize(k), v.trim()]);
+  const headerEntries = Object.entries(headers).map(([k, v]) => [
+    normalize(k),
+    v.trim()
+  ]);
+  const authEntries = Object.entries(authConfig).map(([k, v]) => [
+    normalize(k),
+    v.trim()
+  ]);
   const headerKeys = headerEntries.map(([k]) => k);
   const authKeys = authEntries.map(([k]) => k);
   const requiredSet = new Set(authKeys);
   const missingKeys = authKeys.filter((k) => !headerKeys.includes(k));
   const extraKeys = headerKeys.filter((k) => !requiredSet.has(k));
-  const hasAllRequired = missingKeys.length === 0;
-  const hasExtraKeys = extraKeys.length > 0 && !allowExtra;
   const emptyValueKeys = authKeys.filter((k) => {
     const val = headerEntries.find(([key]) => key === k)?.[1];
     return !val || val.length === 0;
   });
+  const hasAllRequired = missingKeys.length === 0;
+  const hasExtraKeys = extraKeys.length > 0 && !allowExtra;
   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;
+
+// src/utils/message.ts
+function extractTextFromContent(content) {
+  if (typeof content === "string") return content;
+  if (Array.isArray(content)) {
+    return content.filter((item) => item.type === "text" && typeof item.text === "string").map((item) => item.text).join("\n");
+  }
+  return "";
 }
-function now() {
-  return Date.now();
+function normalizeComponent(component, index) {
+  const normalized = { ...component };
+  if (!normalized.id?.trim()) {
+    normalized.id = `ui-comp-${index}-${Date.now()}`;
+  }
+  if (normalized.type === "button" && !normalized.buttonType) {
+    normalized.buttonType = "click";
+  }
+  if (normalized.type === "input" && !normalized.fieldType) {
+    normalized.fieldType = "text";
+  }
+  if (normalized.type === "select" && Array.isArray(normalized.options)) {
+    normalized.options = normalizeStringArray(normalized.options);
+  }
+  if (normalized.type === "table") {
+    normalized.columns = normalizeTableColumns(normalized.columns);
+    normalized.rows = normalizeTableRows(normalized.rows);
+  }
+  if (normalized.type === "form" && Array.isArray(normalized.items)) {
+    normalized.items = normalized.items.map(normalizeFormField);
+  }
+  if (normalized.type === "list" && Array.isArray(normalized.items)) {
+    normalized.items = normalized.items.map(normalizeListItem);
+  }
+  return normalized;
 }
-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 normalizeStringArray(items) {
+  return items.map(
+    (item) => typeof item === "object" && item !== null ? item.label ?? item.value ?? String(item) : String(item)
+  );
+}
+function normalizeTableColumns(columns) {
+  if (!Array.isArray(columns)) return columns;
+  return columns.map(
+    (col) => typeof col === "object" && col !== null ? col.label ?? col.id ?? String(col) : String(col)
+  );
+}
+function normalizeTableRows(rows) {
+  if (!Array.isArray(rows)) return rows;
+  return rows.map((row) => {
+    if (Array.isArray(row)) {
+      return row.map((cell) => String(cell ?? ""));
+    }
+    return Object.values(row).map((val) => {
+      if (typeof val === "object" && val !== null && val.type === "image") {
+        return val.src;
+      }
+      const record = val;
+      return String(record?.value ?? val ?? "");
+    });
+  });
+}
+function normalizeFormField(field, fieldIndex) {
+  const normalized = { ...field };
+  if (!normalized.id?.trim()) {
+    normalized.id = `field-${fieldIndex}-${Date.now()}`;
+  }
+  const raw = field;
+  if ("optional" in raw) {
+    normalized.requiredField = !raw.optional;
+  }
+  if ("required" in raw) {
+    normalized.requiredField = !!raw.required;
+  }
+  if (normalized.type === "input" && !normalized.fieldType) {
+    normalized.fieldType = "text";
+  }
+  if (normalized.type === "select" && Array.isArray(normalized.options)) {
+    normalized.options = normalizeStringArray(normalized.options);
+  }
+  return normalized;
+}
+function normalizeListItem(item, itemIndex) {
+  if (typeof item === "string") {
+    return {
+      id: `list-item-${itemIndex}-${Date.now()}`,
+      type: "text",
+      label: item,
+      value: item
+    };
   }
+  const comp = item;
+  if (!comp.id?.trim()) {
+    comp.id = `list-item-${itemIndex}-${Date.now()}`;
+  }
+  return comp;
 }
-function writeStoredSessions(list) {
-  localStorage.setItem(LOCAL_SESSIONS_KEY, JSON.stringify(list.slice(0, MAX_SESSIONS)));
+function extractUIJsonFromText(text) {
+  const UI_COMPONENT_REGEX = /```ui-component\s*([\s\S]*?)```/g;
+  const matches = Array.from(text.matchAll(UI_COMPONENT_REGEX));
+  if (matches.length === 0) {
+    return { cleanedText: text.trim(), uiData: null };
+  }
+  let cleanedText = text;
+  let mergedUIData = null;
+  for (const match of matches) {
+    const fullBlock = match[0];
+    const jsonBlock = match[1]?.trim();
+    cleanedText = cleanedText.replace(fullBlock, "").trim();
+    try {
+      const parsed = JSON.parse(jsonBlock);
+      if (parsed && Array.isArray(parsed.components)) {
+        parsed.components = parsed.components.map(normalizeComponent);
+        if (!mergedUIData) {
+          mergedUIData = parsed;
+        } else {
+          mergedUIData.components = [
+            ...mergedUIData.components,
+            ...parsed.components
+          ];
+        }
+      }
+    } catch (err) {
+      console.error("Invalid ui-component JSON:", err, jsonBlock);
+    }
+  }
+  cleanedText = cleanedText.replace(/\n{3,}/g, "\n\n").trim();
+  return { cleanedText, uiData: mergedUIData };
 }
-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);
+function parseRawMessages(rawMessages) {
+  const result = [];
+  for (const msg of rawMessages) {
+    const textContent = extractTextFromContent(msg.content);
+    let cleanText = textContent;
+    let uiData = null;
+    if (textContent) {
+      const extracted = extractUIJsonFromText(textContent);
+      cleanText = extracted.cleanedText;
+      uiData = extracted.uiData;
+    }
+    if (cleanText.trim() || uiData) {
+      result.push({
+        text: cleanText.trim() || void 0,
+        ui: uiData ?? void 0,
+        role: msg.role === "user" ? "user" : "assistant",
+        timestamp: /* @__PURE__ */ new Date()
+      });
+    }
   }
-  return filtered;
+  return result;
 }
-function getActiveSessionId() {
-  return localStorage.getItem(ACTIVE_SESSION_KEY);
+
+// src/services/chat-api.ts
+async function fetchWidgetConfig(clientId, headers) {
+  const deviceId = getOrCreateDeviceId();
+  const response = await fetch(
+    `${PROXY_BASE_URL}/aizek-connect?clientId=${clientId}`,
+    {
+      method: "POST",
+      headers: buildRequestHeaders(deviceId, headers)
+    }
+  );
+  return response.json();
 }
-function setActiveSessionId(id) {
-  if (!id) localStorage.removeItem(ACTIVE_SESSION_KEY);
-  else localStorage.setItem(ACTIVE_SESSION_KEY, id);
+async function createSession(clientId, headers) {
+  const deviceId = getOrCreateDeviceId();
+  const response = await fetch(
+    `${PROXY_BASE_URL}/aizek-sessions/new?clientId=${clientId}`,
+    {
+      method: "POST",
+      headers: buildRequestHeaders(deviceId, headers)
+    }
+  );
+  return response.json();
+}
+async function sendChatMessage(clientId, sessionId, message, headers) {
+  const deviceId = getOrCreateDeviceId();
+  return fetch(`${PROXY_BASE_URL}/aizek-chat?clientId=${clientId}`, {
+    method: "POST",
+    headers: buildRequestHeaders(deviceId, headers, sessionId),
+    body: JSON.stringify({ message })
+  });
+}
+async function fetchMessageHistory(sessionId, headers) {
+  const deviceId = getOrCreateDeviceId();
+  const response = await fetch(`${PROXY_BASE_URL}/aizek-messages`, {
+    method: "GET",
+    headers: buildRequestHeaders(deviceId, headers, sessionId)
+  });
+  const data = await response.json();
+  if (!data.success)
+    throw new Error(data.message || "Failed to fetch messages");
+  return parseRawMessages(data.data?.messages ?? []);
 }
-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));
+async function fetchSessionTitle(sessionId, headers) {
+  const deviceId = getOrCreateDeviceId();
+  const res = await fetch(`${PROXY_BASE_URL}/aizek-last-message`, {
+    method: "GET",
+    headers: buildRequestHeaders(deviceId, headers, sessionId)
+  });
+  const json = await res.json();
+  if (!json?.success) return null;
+  const last = json.data?.lastMessage;
+  if (!last) return null;
+  const textContent = extractTextFromContent(last.content);
+  if (!textContent.trim()) return null;
+  const { cleanedText } = extractUIJsonFromText(textContent);
+  const firstLine = (cleanedText.split("\n").find((l) => l.trim()) || "").trim();
+  const title = firstLine || cleanedText;
+  if (!title) return null;
+  return title.length > SESSION_TITLE_MAX_LENGTH ? `${title.slice(0, SESSION_TITLE_MAX_LENGTH).trim()}\u2026` : title;
 }
-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;
+
+// src/hooks/use-chat-session.ts
+function useChatSession({
+  clientId,
+  headers,
+  onReady,
+  onToolCall
+}) {
+  const [config, setConfig] = react.useState();
+  const [messages, setMessages] = react.useState([]);
+  const [isLoading, setIsLoading] = react.useState(false);
+  const [isConfigLoading, setIsConfigLoading] = react.useState(true);
+  const [sessions, setSessions] = react.useState([]);
+  const [activeSession, setActiveSession] = react.useState(null);
+  const [headerValidation, setHeaderValidation] = react.useState(null);
+  const [sessionTitleById, setSessionTitleById] = react.useState({});
+  const messagesEndRef = react.useRef(null);
+  const loadConfig = react.useCallback(async () => {
+    try {
+      setIsConfigLoading(true);
+      const localActive = getActiveSessionId();
+      const data = await fetchWidgetConfig(clientId, headers);
+      if (!data.success) return;
+      setConfig(data.data);
+      const serverSessions = data.data.sessions ?? [];
+      setSessions(serverSessions);
+      if (serverSessions.length === 0) {
+        setActiveSession(null);
+        setActiveSessionId(null);
+      } else {
+        const nextActive = (localActive && serverSessions.includes(localActive) ? localActive : null) ?? serverSessions[0] ?? null;
+        setActiveSession(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);
+    }
+  }, [clientId]);
+  const createNewSession = react.useCallback(async () => {
+    if (sessions.length >= MAX_SESSIONS) {
+      throw new Error(`You can open up to ${MAX_SESSIONS} sessions.`);
+    }
+    const data = await createSession(clientId, headers);
+    if (!data.success) throw new Error(data.message || "Session create failed");
+    const sid = data.data.sessionId;
+    const updatedSessions = data.data.sessions ?? [sid];
+    setSessions(updatedSessions);
+    setActiveSession(sid);
+    setActiveSessionId(sid);
+    setMessages([]);
+    return sid;
+  }, [clientId, headers, sessions.length]);
+  const handleStreamResponse = react.useCallback(
+    async (response, onFinish) => {
+      if (!response.body) {
+        throw new Error("Streaming not supported (no response body)");
+      }
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let text = "";
+      let buffer = "";
+      try {
+        while (true) {
+          const { value, done } = await reader.read();
+          if (done) break;
+          buffer += decoder.decode(value, { stream: true });
+          const chunks = buffer.split("\n\n");
+          buffer = chunks.pop() ?? "";
+          for (const rawChunk of chunks) {
+            const line = rawChunk.split("\n").find((l) => l.startsWith("data:"));
+            if (!line) continue;
+            const jsonStr = line.replace(/^data:\s*/, "").trim();
+            if (!jsonStr) continue;
+            try {
+              const event = JSON.parse(jsonStr);
+              if (event.type === "response.output_text.delta" && event.delta) {
+                setIsLoading(false);
+                text += event.delta;
+                setMessages((prev) => {
+                  const lastMsg = prev[prev.length - 1];
+                  if (lastMsg?.role === "assistant") {
+                    return [...prev.slice(0, -1), { ...lastMsg, text }];
+                  }
+                  return [
+                    ...prev,
+                    { text, role: "assistant", timestamp: /* @__PURE__ */ new Date() }
+                  ];
+                });
+              }
+              if (event.type === "response.output_item.done" && event.item.type === "mcp_call") {
+                onToolCall?.({
+                  name: event.item.name,
+                  args: JSON.parse(event.item.arguments),
+                  result: JSON.parse(event.item.output)
+                });
+              }
+            } catch (e) {
+              console.error("Error parsing stream event", e);
+            }
+          }
+        }
+      } finally {
+        onFinish?.();
+      }
+    },
+    [onToolCall]
+  );
+  const sendMessage = react.useCallback(
+    async (message, approval) => {
+      if (!message.trim() || isLoading) return;
+      setIsLoading(true);
+      setMessages((prev) => [
+        ...prev,
+        {
+          text: message,
+          ui: void 0,
+          role: approval ? "approval" : "user",
+          timestamp: /* @__PURE__ */ new Date()
+        }
+      ]);
+      try {
+        let sid = activeSession;
+        if (!sid) sid = await createNewSession();
+        let response = await sendChatMessage(clientId, sid, message, headers);
+        if (response.status === 401) {
+          console.log("Session expired, renewing...");
+          const filtered = sessions.filter((s) => s !== sid);
+          setSessions(filtered);
+          setActiveSession(null);
+          setActiveSessionId(null);
+          const newSid = await createNewSession();
+          response = await sendChatMessage(clientId, newSid, message, headers);
+        }
+        if (!response.ok) throw new Error(`HTTP error ${response.status}`);
+        await handleStreamResponse(response);
+      } catch (error) {
+        console.error("Error sending message:", error);
+        setMessages((prev) => {
+          const last = prev[prev.length - 1];
+          const errorMessage = {
+            text: "Sorry, something went wrong. Please try again.",
+            role: "assistant",
+            timestamp: /* @__PURE__ */ new Date()
+          };
+          if (last?.role === "assistant" && !last.text) {
+            return [...prev.slice(0, -1), errorMessage];
+          }
+          return [...prev, errorMessage];
+        });
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [
+      activeSession,
+      clientId,
+      createNewSession,
+      handleStreamResponse,
+      headers,
+      isLoading,
+      sessions
+    ]
+  );
+  const selectSession = react.useCallback((sid) => {
+    setActiveSession(sid);
+    setActiveSessionId(sid);
+  }, []);
+  const getSessionTitle = react.useCallback(
+    (sid) => sessionTitleById[sid] ?? "New conversation",
+    [sessionTitleById]
+  );
+  react.useEffect(() => {
+    loadConfig();
+  }, [loadConfig]);
+  react.useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+  react.useEffect(() => {
+    if (activeSession && !isConfigLoading) {
+      fetchMessageHistory(activeSession, headers).then(setMessages).catch(
+        (error) => console.error("Failed to load message history:", error)
+      );
+    } else if (!activeSession) {
+      setMessages([]);
+    }
+  }, [activeSession, isConfigLoading]);
+  react.useEffect(() => {
+    if (!sessions.length) return;
+    const missing = sessions.filter((sid) => !sessionTitleById[sid]);
+    if (!missing.length) return;
+    let cancelled = false;
+    (async () => {
+      for (const sid of missing) {
+        if (cancelled) return;
+        const title = await fetchSessionTitle(sid, headers);
+        if (cancelled || !title) continue;
+        setSessionTitleById(
+          (prev) => prev[sid] ? prev : { ...prev, [sid]: title }
+        );
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [sessions]);
+  return {
+    config,
+    messages,
+    isLoading,
+    isConfigLoading,
+    sessions,
+    activeSessionId: activeSession,
+    headerValidation,
+    sessionTitleById,
+    createNewSession,
+    sendMessage,
+    selectSession,
+    getSessionTitle
+  };
 }
-var HeaderAlert = ({ headerValidation, showAlert, setShowAlert }) => {
+var IconClose = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.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" }) });
+var IconChat = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.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" }) });
+var IconBack = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 18l-6-6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var IconBubble = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.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" }) });
+var IconInfo = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 17v-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 8h.01", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeWidth: "2" })
+] });
+var IconTrash = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 6h18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 6V4h8v2", stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 6l1 16h10l1-16", stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round" })
+] });
+var HomePanel = ({
+  companyName,
+  isLoading,
+  sessionsCount,
+  onNewSession,
+  onViewConversations
+}) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "home-panel", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "eyebrow", children: "Welcome" }),
+  /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "panel-title", children: companyName }),
+  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "panel-subtitle", children: "Ask anything. We keep your history and respond instantly." }),
+  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "home-actions", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        className: "primary-button",
+        onClick: onNewSession,
+        disabled: isLoading || sessionsCount >= MAX_SESSIONS,
+        children: "Start a new conversation"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("button", { className: "ghost-button", onClick: onViewConversations, children: "View conversations" })
+  ] })
+] });
+var ConversationListPanel = ({
+  sessions,
+  activeSessionId,
+  getSessionTitle,
+  onNewSession,
+  onSelectSession
+}) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "conversation-list", children: [
+  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "list-header", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "eyebrow", children: "Conversations" }),
+      /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "panel-title", children: "Inbox" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        className: "session-new-button",
+        onClick: onNewSession,
+        disabled: sessions.length >= MAX_SESSIONS,
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "+ New" })
+      }
+    )
+  ] }),
+  sessions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "empty-list", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "empty-state-icon", children: "\u{1F4AC}" }),
+    /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "empty-state-title", children: "No conversations yet" }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "empty-state-description", children: "Start a new conversation to see it appear here." })
+  ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "conversation-items", children: sessions.map((sid) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      className: `conversation-item ${sid === activeSessionId ? "active" : ""}`,
+      onClick: () => onSelectSession(sid),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "conversation-meta", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "conversation-title", children: getSessionTitle(sid) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "conversation-sub", children: [
+            "Session ID: ",
+            sid.slice(0, 8),
+            "..."
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "conversation-pill", children: "Open" })
+      ]
+    },
+    sid
+  )) })
+] });
+var HeaderAlert = ({
+  headerValidation,
+  showAlert,
+  setShowAlert
+}) => {
   if (!headerValidation || !showAlert) return null;
   const { isValid, missingKeys, extraKeys, emptyValueKeys, warning } = headerValidation;
   if (isValid && missingKeys.length === 0 && extraKeys.length === 0 && emptyValueKeys.length === 0 && !warning) {
@@ -114,14 +620,14 @@ var HeaderAlert = ({ headerValidation, showAlert, setShowAlert }) => {
   const hasErrors = missingKeys.length > 0 || emptyValueKeys.length > 0;
   const hasWarnings = extraKeys.length > 0 || !!warning;
   const alertType = hasErrors ? "error" : "warning";
-  const getAlertIcon = () => {
+  const renderAlertIcon = () => {
     if (hasErrors) {
       return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" }) });
     }
     return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" }) });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `alert-container ${alertType}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "alert-icon-container", children: getAlertIcon() }),
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `alert-container ${alertType}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "alert-icon-container", children: renderAlertIcon() }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "alert-content", children: [
       /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "alert-title", children: hasErrors ? "Header Do\u011Frulama Hatas\u0131" : "Header Uyar\u0131s\u0131" }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "alert-message", children: hasErrors && hasWarnings ? "Header yap\u0131land\u0131rman\u0131zda hatalar ve uyar\u0131lar bulundu." : hasErrors ? "Header yap\u0131land\u0131rman\u0131zda hatalar bulundu." : "Header yap\u0131land\u0131rman\u0131zda fazla anahtarlar bulundu." }),
@@ -161,18 +667,22 @@ var HeaderAlert = ({ headerValidation, showAlert, setShowAlert }) => {
         children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.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" }) })
       }
     )
-  ] }) });
+  ] });
 };
 var LoadingSpinner = () => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "loading-spinner" });
 };
-var ChatInput = ({ isLoading, placeholder, handleSendMessage }) => {
+var ChatInput = ({
+  isLoading,
+  placeholder,
+  onSendMessage
+}) => {
   const [message, setMessage] = react.useState("");
   const textareaRef = react.useRef(null);
   const handleSubmit = (e) => {
     e.preventDefault();
     if (message.trim() && !isLoading) {
-      handleSendMessage(message.trim());
+      onSendMessage(message.trim());
       setMessage("");
       if (textareaRef.current) {
         textareaRef.current.style.height = "auto";
@@ -215,109 +725,130 @@ var ChatInput = ({ isLoading, placeholder, handleSendMessage }) => {
     )
   ] });
 };
-var GenericUIRenderer = ({ uiData, onInteraction }) => {
+var GenUIText = ({ component }) => /* @__PURE__ */ jsxRuntime.jsx("p", { className: "gen-ui-text", children: component.value ?? component.label }, component.id);
+var GenUIInput = ({ component }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gen-ui-input-wrapper", children: [
+  component.label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "gen-ui-input-label", children: component.label }),
+  component.fieldType === "textarea" ? /* @__PURE__ */ jsxRuntime.jsx(
+    "textarea",
+    {
+      name: component.id,
+      placeholder: component.placeholder,
+      className: "gen-ui-textarea"
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      name: component.id,
+      type: component.fieldType || "text",
+      placeholder: component.placeholder,
+      className: "gen-ui-input"
+    }
+  )
+] }, component.id);
+var GenUISelect = ({ component }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gen-ui-select-wrapper", children: [
+  component.label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "gen-ui-select-label", children: component.label }),
+  /* @__PURE__ */ jsxRuntime.jsx("select", { name: component.id, className: "gen-ui-select", children: component.options?.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt, children: opt }, opt)) })
+] }, component.id);
+var GenUIButton = ({
+  component,
+  onInteraction,
+  collectFormValues
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "button",
+  {
+    onClick: () => {
+      const formValues = collectFormValues();
+      onInteraction({
+        action: component.label ?? "",
+        buttonId: component.buttonType,
+        formData: formValues
+      });
+    },
+    className: "gen-ui-button",
+    children: component.label
+  },
+  component.id
+);
+var GenUICard = ({ component }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gen-ui-card", children: [
+  component.label && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "gen-ui-card-title", children: component.label }),
+  component.value && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "gen-ui-card-content", children: component.value })
+] }, component.id);
+var GenUIList = ({ component }) => /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "gen-ui-list", children: component.items?.map((item) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "gen-ui-list-item", children: item.label ?? String(item.value ?? "") }, item.id)) }, component.id);
+var GenUIImage = ({ component }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "img",
+  {
+    src: component.url,
+    alt: component.label || "",
+    className: "gen-ui-image"
+  },
+  component.id
+);
+var GenUILink = ({ component }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "a",
+  {
+    href: component.url,
+    className: "gen-ui-link",
+    children: component.label || component.url
+  },
+  component.id
+);
+var GenUITable = ({ component }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gen-ui-table-wrapper", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "gen-ui-table", children: [
+  component.columns && /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "gen-ui-table-header", children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: component.columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx("th", { className: "gen-ui-table-th", children: col }, col)) }) }),
+  component.rows && /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "gen-ui-table-body", children: component.rows.map((row, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx("tr", { children: row.map((cell, cellIndex) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: "gen-ui-table-td", children: cell }, cellIndex)) }, rowIndex)) })
+] }) }, component.id);
+var GenericUIRenderer = ({
+  uiData,
+  onInteraction
+}) => {
   const containerRef = react.useRef(null);
-  if (!uiData || !uiData.components) return null;
+  if (!uiData?.components) return null;
   const collectFormValues = () => {
     if (!containerRef.current) return {};
     const formData = {};
     const inputs = containerRef.current.querySelectorAll("input, textarea, select");
     inputs.forEach((element) => {
       const name = element.getAttribute("name");
-      if (name) {
-        if (element instanceof HTMLInputElement && element.type === "checkbox") {
-          formData[name] = element.checked;
-        } else if (element instanceof HTMLInputElement && element.type === "radio") {
-          if (element.checked) {
-            formData[name] = element.value;
-          }
-        } else {
-          formData[name] = element.value;
-        }
+      if (!name) return;
+      if (element instanceof HTMLInputElement && element.type === "checkbox") {
+        formData[name] = element.checked;
+      } else if (element instanceof HTMLInputElement && element.type === "radio") {
+        if (element.checked) formData[name] = element.value;
+      } else {
+        formData[name] = element.value;
       }
     });
     return formData;
   };
-  const renderComponent = (comp) => {
-    switch (comp.type) {
+  const renderComponent = (component) => {
+    switch (component.type) {
       case "text":
-        return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "gen-ui-text", children: comp.value ?? comp.label }, comp.id);
+        return /* @__PURE__ */ jsxRuntime.jsx(GenUIText, { component }, component.id);
       case "input":
-        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gen-ui-input-wrapper", children: [
-          comp.label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "gen-ui-input-label", children: comp.label }),
-          comp.fieldType === "textarea" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "textarea",
-            {
-              name: comp.id,
-              placeholder: comp.placeholder,
-              className: "gen-ui-textarea"
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              name: comp.id,
-              type: comp.fieldType || "text",
-              placeholder: comp.placeholder,
-              className: "gen-ui-input"
-            }
-          )
-        ] }, comp.id);
+        return /* @__PURE__ */ jsxRuntime.jsx(GenUIInput, { component }, component.id);
       case "select":
-        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gen-ui-select-wrapper", children: [
-          comp.label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "gen-ui-select-label", children: comp.label }),
-          /* @__PURE__ */ jsxRuntime.jsx("select", { name: comp.id, className: "gen-ui-select", children: comp.options?.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt, children: opt }, opt)) })
-        ] }, comp.id);
+        return /* @__PURE__ */ jsxRuntime.jsx(GenUISelect, { component }, component.id);
       case "button":
         return /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+          GenUIButton,
           {
-            onClick: () => {
-              const formValues = collectFormValues();
-              onInteraction({
-                action: comp.label,
-                buttonId: comp.buttonType,
-                formData: formValues
-              });
-            },
-            className: "gen-ui-button",
-            children: comp.label
+            component,
+            onInteraction,
+            collectFormValues
           },
-          comp.id
+          component.id
         );
       case "card":
-        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gen-ui-card", children: [
-          comp.label && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "gen-ui-card-title", children: comp.label }),
-          comp.value && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "gen-ui-card-content", children: comp.value })
-        ] }, comp.id);
+        return /* @__PURE__ */ jsxRuntime.jsx(GenUICard, { component }, component.id);
       case "list":
-        return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "gen-ui-list", children: comp.items?.map((item) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "gen-ui-list-item", children: item.label ?? String(item.value ?? "") }, item.id)) }, comp.id);
+        return /* @__PURE__ */ jsxRuntime.jsx(GenUIList, { component }, component.id);
       case "image":
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
-          {
-            src: comp.url,
-            alt: comp.label || "",
-            className: "gen-ui-image"
-          },
-          comp.id
-        );
+        return /* @__PURE__ */ jsxRuntime.jsx(GenUIImage, { component }, component.id);
       case "link":
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          "a",
-          {
-            href: comp.url,
-            className: "gen-ui-link",
-            children: comp.label || comp.url
-          },
-          comp.id
-        );
+        return /* @__PURE__ */ jsxRuntime.jsx(GenUILink, { component }, component.id);
       case "table":
-        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gen-ui-table-wrapper", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "gen-ui-table", children: [
-          comp.columns && /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "gen-ui-table-header", children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: comp.columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx("th", { className: "gen-ui-table-th", children: col }, col)) }) }),
-          comp.rows && /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "gen-ui-table-body", children: comp.rows.map((row, ridx) => /* @__PURE__ */ jsxRuntime.jsx("tr", { children: row.map((cell, cidx) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: "gen-ui-table-td", children: cell }, cidx)) }, ridx)) })
-        ] }) }, comp.id);
+        return /* @__PURE__ */ jsxRuntime.jsx(GenUITable, { component }, component.id);
       case "form":
-        return /* @__PURE__ */ jsxRuntime.jsx("form", { className: "gen-ui-form", children: comp.items?.map((field) => renderComponent(field)) }, comp.id);
+        return /* @__PURE__ */ jsxRuntime.jsx("form", { className: "gen-ui-form", children: component.items?.map((field) => renderComponent(field)) }, component.id);
       default:
         return null;
     }
@@ -331,12 +862,8 @@ var GenericUIRenderer = ({ uiData, onInteraction }) => {
   ] });
 };
 var MessageBubble = ({ message, onAction }) => {
-  console.log("MESSAGE", message);
   const isUser = message.role === "user";
-  const approval = message.role === "approval";
-  if (approval) {
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
-  }
+  if (message.role === "approval") return null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `message-container ${isUser ? "user" : "assistant"}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: `message-bubble ${isUser ? "user" : "assistant"}`, children: isUser ? message.text && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "markdown-content", children: message.text }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       message.text && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "markdown-content", children: /* @__PURE__ */ jsxRuntime.jsx(ReactMarkdown__default.default, { remarkPlugins: [remarkGfm__default.default], children: message.text }) }),
@@ -345,7 +872,6 @@ var MessageBubble = ({ message, onAction }) => {
         {
           uiData: message.ui,
           onInteraction: (event) => {
-            console.log("event", event);
             if (event.buttonId === "submit") {
               onAction(JSON.stringify(event.formData), true);
             } else {
@@ -374,277 +900,137 @@ var TypingDots = () => {
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "message-container assistant", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "message-bubble assistant", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "message-typing-indicator", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: dots }) }) }) });
 };
-
-// src/utils/chatbot.ts
-var extractUIJsonFromText = (text) => {
-  const regex = /```ui-component([\s\S]*?)```/g;
-  let cleaned = text;
-  let match;
-  let uiData = null;
-  while ((match = regex.exec(text)) !== null) {
-    const block = match[1].trim();
-    try {
-      const parsed = JSON.parse(block);
-      if (parsed && parsed.components && Array.isArray(parsed.components)) {
-        parsed.components = parsed.components.map((comp, index) => {
-          if (!comp.id || typeof comp.id !== "string" || !comp.id.trim()) {
-            comp.id = `ui-comp-${index}-${Date.now()}`;
-          }
-          if (comp.type === "button") {
-            if (!comp.buttonType) {
-              comp.buttonType = "click";
-            }
-          }
-          if (comp.type === "input") {
-            if (!comp.fieldType) {
-              comp.fieldType = "text";
-            }
-          }
-          if (comp.type === "select") {
-            if (comp.options && Array.isArray(comp.options)) {
-              const firstOption = comp.options[0];
-              if (typeof firstOption === "object" && firstOption !== null) {
-                if ("label" in firstOption || "value" in firstOption) {
-                  comp.options = comp.options.map(
-                    (opt) => opt.label || opt.value || String(opt)
-                  );
-                }
-              }
-            }
-          }
-          if (comp.type === "table") {
-            if (comp.columns && Array.isArray(comp.columns)) {
-              const firstCol = comp.columns[0];
-              if (typeof firstCol === "object" && firstCol !== null) {
-                comp.columns = comp.columns.map(
-                  (col) => col.label || col.id || String(col)
-                );
-              }
-            }
-            if (comp.rows && Array.isArray(comp.rows)) {
-              const firstRow = comp.rows[0];
-              if (typeof firstRow === "object" && !Array.isArray(firstRow)) {
-                comp.rows = comp.rows.map((row) => {
-                  if (Array.isArray(row)) return row;
-                  return Object.values(row).map((val) => {
-                    if (typeof val === "object" && val !== null) {
-                      if (val.type === "image" && val.src) return val.src;
-                      if (val.value !== void 0) return String(val.value);
-                    }
-                    return String(val || "");
-                  });
-                });
-              }
+var ConversationDetailPanel = ({
+  activeSessionId,
+  isLoading,
+  messages,
+  headerValidation,
+  showAlert,
+  setShowAlert,
+  sanitizedWelcome,
+  messagesEndRef,
+  config,
+  getSessionTitle,
+  onBack,
+  onInfo,
+  onSendMessage,
+  placeholder
+}) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "conversation-detail", children: [
+  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "detail-header", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "detail-header-left", children: /* @__PURE__ */ jsxRuntime.jsx("button", { className: "icon-button", onClick: onBack, "aria-label": "Back", children: /* @__PURE__ */ jsxRuntime.jsx(IconBack, {}) }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "detail-header-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "detail-avatar", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(IconBubble, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "detail-title", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "detail-title-row", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "detail-title-text", children: activeSessionId ? getSessionTitle(activeSessionId) : "Chat" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: `status-dot ${isLoading ? "typing" : "online"}`,
+              "aria-hidden": "true"
             }
-          }
-          if (comp.type === "form" && comp.items && Array.isArray(comp.items)) {
-            comp.items = comp.items.map((field, fieldIndex) => {
-              if (!field.id || !field.id.trim()) {
-                field.id = `field-${fieldIndex}-${Date.now()}`;
-              }
-              if (field.optional !== void 0) {
-                field.requiredField = !field.optional;
-                delete field.optional;
-              }
-              if (field.required !== void 0) {
-                field.requiredField = field.required;
-                delete field.required;
-              }
-              if (field.type === "input" && !field.fieldType) {
-                field.fieldType = "text";
-              }
-              if (field.type === "select" && field.options && Array.isArray(field.options)) {
-                const firstOpt = field.options[0];
-                if (typeof firstOpt === "object" && firstOpt !== null) {
-                  field.options = field.options.map(
-                    (opt) => opt.label || opt.value || String(opt)
-                  );
-                }
-              }
-              return field;
-            });
-          }
-          if (comp.type === "list" && comp.items && Array.isArray(comp.items)) {
-            comp.items = comp.items.map((item, itemIndex) => {
-              if (typeof item === "string") {
-                return {
-                  id: `list-item-${itemIndex}-${Date.now()}`,
-                  type: "text",
-                  value: item,
-                  label: item
-                };
-              }
-              if (!item.id || !item.id.trim()) {
-                item.id = `list-item-${itemIndex}-${Date.now()}`;
-              }
-              return item;
-            });
-          }
-          return comp;
-        });
-        uiData = parsed;
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "detail-subtitle", children: isLoading ? "Typing..." : "Online" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "detail-header-right", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("button", { className: "icon-button", onClick: onInfo, "aria-label": "Bilgi", children: /* @__PURE__ */ jsxRuntime.jsx(IconInfo, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          className: "icon-button danger",
+          disabled: !activeSessionId,
+          "aria-label": "End conversation",
+          children: /* @__PURE__ */ jsxRuntime.jsx(IconTrash, {})
+        }
+      )
+    ] })
+  ] }),
+  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "messages-container", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      HeaderAlert,
+      {
+        headerValidation,
+        setShowAlert,
+        showAlert
       }
-      cleaned = cleaned.replace(match[0], "").trim();
-      break;
-    } catch (e) {
-      console.error("Invalid ui-component JSON:", e, block);
+    ),
+    messages.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsxRuntime.jsx("span", { dangerouslySetInnerHTML: { __html: sanitizedWelcome } }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      messages.map((message, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        MessageBubble,
+        {
+          message,
+          onAction: onSendMessage
+        },
+        index
+      )),
+      config?.widget_config.show_typing_indicator && isLoading && /* @__PURE__ */ jsxRuntime.jsx(TypingDots, {})
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: messagesEndRef })
+  ] }),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    ChatInput,
+    {
+      onSendMessage,
+      isLoading,
+      placeholder
     }
-  }
-  return {
-    cleanedText: cleaned,
-    uiData
-  };
-};
-var AizekChatBot = ({ clientId, headers, onMounted, onReady, onOpen, onClose, onMessage, onToolCall, onDisconnect }) => {
+  )
+] });
+var InfoPanel = ({
+  companyName,
+  isLoading,
+  sessionsCount
+}) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "info-panel", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "eyebrow", children: "Info" }),
+  /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "panel-title", children: "Widget Details" }),
+  /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "info-list", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Company" }),
+      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: companyName })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Status" }),
+      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: isLoading ? "Typing..." : "Online" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Conversations" }),
+      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: sessionsCount })
+    ] })
+  ] })
+] });
+var AizekChatBot = ({
+  clientId,
+  headers,
+  onMounted,
+  onReady,
+  onOpen,
+  onClose,
+  onMessage,
+  onToolCall,
+  onDisconnect
+}) => {
   const messagesEndRef = react.useRef(null);
-  const [config, setConfig] = react.useState();
-  const [messages, setMessages] = react.useState([]);
-  const [isLoading, setIsLoading] = react.useState(false);
-  const [isConfigLoading, setIsConfigLoading] = react.useState(true);
+  const {
+    config,
+    messages,
+    isLoading,
+    isConfigLoading,
+    sessions,
+    activeSessionId,
+    headerValidation,
+    createNewSession,
+    sendMessage,
+    selectSession,
+    getSessionTitle
+  } = useChatSession({ clientId, headers, onReady, onToolCall, onDisconnect });
   const [isOpen, setIsOpen] = react.useState(false);
-  const [headerValidation, setHeaderValidation] = react.useState(null);
   const [showAlert, setShowAlert] = react.useState(true);
-  const [sessions, setSessions] = react.useState([]);
-  const [activeSessionId, setActiveSessionIdState] = react.useState(null);
   const [activeTab, setActiveTab] = react.useState("home");
   const [messageView, setMessageView] = react.useState("list");
-  const [sessionTitleById, setSessionTitleById] = react.useState({});
-  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 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)
-        }
-      });
-      const data = await response.json();
-      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 getHistoryMessageBySessionId = async (sid) => {
-    try {
-      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)
-        }
-      });
-      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("Error fetching message history:", error);
-      return [];
-    }
-  };
   react.useEffect(() => {
     onMounted?.();
-    loadConfig();
-  }, []);
-  react.useEffect(() => {
-    const t = setInterval(() => {
-      purgeExpiredLocalSessions(setActiveSessionIdState);
-    }, 1e3);
-    return () => clearInterval(t);
   }, []);
   react.useEffect(() => {
     if (typeof config?.widget_config.initial_open === "boolean") {
@@ -657,519 +1043,147 @@ var AizekChatBot = ({ clientId, headers, onMounted, onReady, onOpen, onClose, on
   react.useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
-  react.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]);
-  react.useEffect(() => {
-    if (!sessions.length) return;
-    const missing = sessions.filter((sid) => !sessionTitleById[sid]);
-    if (!missing.length) return;
-    let cancelled = false;
-    (async () => {
-      for (const sid of missing) {
-        if (cancelled) return;
-        const title = await fetchLastMessageTitle(sid);
-        if (cancelled) return;
-        if (!title) continue;
-        setSessionTitleById((prev) => prev[sid] ? prev : { ...prev, [sid]: title });
-      }
-    })();
-    return () => {
-      cancelled = true;
-    };
-  }, [sessions]);
-  const addMessage = (payload) => {
-    const newMessage = {
-      text: payload.text,
-      ui: payload.ui,
-      role: payload.role,
-      timestamp: /* @__PURE__ */ new Date()
-    };
-    onMessage?.(newMessage);
-    setMessages((prev) => [...prev, newMessage]);
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-    return newMessage;
-  };
-  const sendMessage = async (message, approval) => {
-    if (!message.trim() || isLoading) return;
-    setMessages((prev) => [
-      ...prev,
-      { text: message, ui: void 0, role: approval ? "approval" : "user", timestamp: /* @__PURE__ */ new Date() }
-    ]);
-    setIsLoading(true);
-    try {
-      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 })
-      });
-      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}`);
-      }
-      if (!response.body) {
-        throw new Error("Streaming desteklenmiyor (response.body yok)");
-      }
-      const reader = response.body.getReader();
-      const decoder = new TextDecoder();
-      let buffer = "";
-      while (true) {
-        const { value, done } = await reader.read();
-        if (done) break;
-        buffer += decoder.decode(value, { stream: true });
-        const chunks = buffer.split("\n\n");
-        buffer = chunks.pop() ?? "";
-        for (const rawChunk of chunks) {
-          const line = rawChunk.split("\n").find((l) => l.startsWith("data:"));
-          if (!line) continue;
-          const jsonStr = line.replace(/^data:\s*/, "").trim();
-          if (!jsonStr) continue;
-          const event = JSON.parse(jsonStr);
-          if (event.type === "assistant_text" && event.content) {
-            const { cleanedText, uiData } = extractUIJsonFromText(event.content);
-            addMessage({
-              text: cleanedText,
-              ui: uiData,
-              role: "assistant"
-            });
-          }
-          if (event.type === "assistant_tool_result" && event.content) {
-            const toolInfoParsed = JSON.parse(event.content);
-            onToolCall?.(toolInfoParsed);
-          }
-          if (event.type === "error" && event.content) {
-            const { cleanedText, uiData } = extractUIJsonFromText(event.content);
-            addMessage({
-              text: cleanedText,
-              ui: uiData,
-              role: "assistant"
-            });
-          }
-        }
-      }
-      touchSession(sid);
-    } catch (error) {
-      console.error("Error sending message:", error);
-      addMessage({ text: "Sorry, something went wrong. Please try again.", role: "assistant" });
-    } finally {
-      setIsLoading(false);
-    }
+  const toggleChat = () => {
+    const next = !isOpen;
+    setIsOpen(next);
+    next ? onOpen?.() : onClose?.();
   };
-  const disconnectActiveSession = async () => {
+  const handleCreateSession = 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?.();
+      await createNewSession();
+      setActiveTab("messages");
+      setMessageView("detail");
     } catch (e) {
       console.error(e);
     }
   };
   const handleSelectSession = (sid) => {
-    setActiveSessionIdState(sid);
-    setActiveSessionId(sid);
+    selectSession(sid);
     setActiveTab("messages");
     setMessageView("detail");
   };
-  const getSessionTitle = (sid) => {
-    if (sessionTitleById[sid]) return sessionTitleById[sid];
-    return "New conversation";
-  };
-  const fetchLastMessageTitle = async (sid) => {
-    try {
-      const deviceId = getOrCreateDeviceId();
-      const res = await fetch(`${PROXY_BASE_URL}/aizek-last-message`, {
-        method: "GET",
-        headers: {
-          "Content-Type": "application/json",
-          "x-device-id": deviceId,
-          "x-session-id": sid,
-          "x-alternate": JSON.stringify(headers)
-        }
-      });
-      const json = await res.json();
-      if (!json?.success) return null;
-      const last = json?.data?.lastMessage;
-      if (!last) return null;
-      let textContent = "";
-      if (typeof last.content === "string") {
-        textContent = last.content;
-      } else if (Array.isArray(last.content)) {
-        const parts = [];
-        for (const item of last.content) {
-          if (item?.type === "text" && typeof item.text === "string") parts.push(item.text);
-        }
-        textContent = parts.join("\n");
-      }
-      if (!textContent.trim()) return null;
-      const extracted = extractUIJsonFromText(textContent);
-      const cleaned = (extracted.cleanedText || "").trim();
-      const firstLine = (cleaned.split("\n").find((l) => l.trim()) || "").trim();
-      const title = firstLine || cleaned;
-      if (!title) return null;
-      const compact = title.length > 46 ? `${title.slice(0, 46).trim()}\u2026` : title;
-      return compact;
-    } catch (e) {
-      console.error("Failed to fetch last message title:", e);
-      return null;
-    }
-  };
-  const toggleChat = () => {
-    const newIsOpen = !isOpen;
-    setIsOpen(newIsOpen);
-    if (newIsOpen) onOpen?.();
-    else onClose?.();
-  };
-  const clean = sanitizeHtml__default.default(config?.widget_config.welcome_message ?? "", {
-    allowedTags: ["b", "i", "em", "strong", "a", "p", "br"],
-    allowedAttributes: {
-      a: ["href", "target", "rel"]
-    }
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: isConfigLoading ? /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
+  const sanitizedWelcome = sanitizeHtml__default.default(
+    config?.widget_config.welcome_message ?? "",
     {
-      className: "floating-button bottom-right button-sizes medium loading-state",
-      style: { background: "#4f46e5" },
-      "aria-label": "Loading",
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "loading-spinner" })
+      allowedTags: ["b", "i", "em", "strong", "a", "p", "br"],
+      allowedAttributes: { a: ["href", "target", "rel"] }
     }
-  ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `overlay floating-chat-overlay ${isOpen ? "is-open" : ""}`, onClick: toggleChat }),
+  );
+  if (isConfigLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        className: "floating-button bottom-right button-sizes medium loading-state",
+        style: { background: "#4f46e5" },
+        "aria-label": "Loading",
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "loading-spinner" })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `overlay floating-chat-overlay ${isOpen ? "is-open" : ""}`,
+        onClick: toggleChat
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.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 },
+        style: {
+          width: config?.widget_config.chat_width,
+          height: config?.widget_config.chat_height
+        },
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "chatbot-container", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "header", style: { background: config?.widget_config.header_background }, children: [
-            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("img", { src: config?.widget_config.company_logo, alt: "Company Logo", className: "logo-image" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "logo-text", children: config?.widget_config.company_logo }) : "\u{1F916}" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "company-name", children: config?.widget_config.company_name }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "status-text", children: isLoading ? "Typing..." : "Online" })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "chat-content", children: [
-            activeTab === "home" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "home-panel", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "eyebrow", children: "Welcome" }),
-              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "panel-title", children: config?.widget_config.company_name }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "panel-subtitle", children: "Ask anything. We keep your history and respond instantly." }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "home-actions", children: [
-                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                  "button",
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "header",
+              style: { background: config?.widget_config.header_background },
+              children: [
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                  "img",
                   {
-                    className: "ghost-button",
-                    onClick: () => {
-                      setActiveTab("messages");
-                      setMessageView("list");
-                    },
-                    children: "View conversations"
+                    src: config.widget_config.company_logo,
+                    alt: "Company Logo",
+                    className: "logo-image"
                   }
-                )
-              ] })
-            ] }),
-            activeTab === "messages" && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: messageView === "list" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "conversation-list", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "list-header", children: [
+                ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "logo-text", children: config.widget_config.company_logo }) : "\u{1F916}" }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "eyebrow", children: "Conversations" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "panel-title", children: "Inbox" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    className: "session-new-button",
-                    onClick: async () => {
-                      try {
-                        await createNewSession();
-                      } catch (e) {
-                        console.error(e);
-                      }
-                    },
-                    disabled: sessions.length >= MAX_SESSIONS,
-                    children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "+ New" })
-                  }
-                )
-              ] }),
-              sessions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "empty-list", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "empty-state-icon", children: "\u{1F4AC}" }),
-                /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "empty-state-title", children: "No conversations yet" }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "empty-state-description", children: "Start a new conversation to see it appear here." })
-              ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "conversation-items", children: sessions.map((sid) => /* @__PURE__ */ jsxRuntime.jsxs(
-                "button",
-                {
-                  className: `conversation-item ${sid === activeSessionId ? "active" : ""}`,
-                  onClick: () => handleSelectSession(sid),
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "conversation-meta", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "conversation-title", children: getSessionTitle(sid) }),
-                      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "conversation-sub", children: [
-                        "Session ID: ",
-                        sid.slice(0, 8),
-                        "..."
-                      ] })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "conversation-pill", children: "Open" })
-                  ]
-                },
-                sid
-              )) })
-            ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "conversation-detail", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "detail-header", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "detail-header-left", children: /* @__PURE__ */ jsxRuntime.jsx("button", { className: "icon-button", onClick: () => setMessageView("list"), "aria-label": "Back", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "path",
-                  {
-                    d: "M15 18l-6-6 6-6",
-                    stroke: "currentColor",
-                    strokeWidth: "2",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round"
-                  }
-                ) }) }) }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "detail-header-center", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "detail-avatar", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "detail-title", children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "detail-title-row", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "detail-title-text", children: activeSessionId ? getSessionTitle(activeSessionId) : "Chat" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: `status-dot ${isLoading ? "typing" : "online"}`, "aria-hidden": "true" })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "detail-subtitle", children: isLoading ? "Yaz\u0131yor\u2026" : "Online" })
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "detail-header-right", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "button",
-                    {
-                      className: "icon-button",
-                      onClick: () => {
-                        setActiveTab("info");
-                        setMessageView("list");
-                      },
-                      "aria-label": "Bilgi",
-                      children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          "path",
-                          {
-                            d: "M12 17v-6",
-                            stroke: "currentColor",
-                            strokeWidth: "2",
-                            strokeLinecap: "round"
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          "path",
-                          {
-                            d: "M12 8h.01",
-                            stroke: "currentColor",
-                            strokeWidth: "2.5",
-                            strokeLinecap: "round"
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          "circle",
-                          {
-                            cx: "12",
-                            cy: "12",
-                            r: "9",
-                            stroke: "currentColor",
-                            strokeWidth: "2"
-                          }
-                        )
-                      ] })
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "button",
-                    {
-                      className: "icon-button danger",
-                      onClick: disconnectActiveSession,
-                      disabled: !activeSessionId,
-                      "aria-label": "End conversation",
-                      children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          "path",
-                          {
-                            d: "M3 6h18",
-                            stroke: "currentColor",
-                            strokeWidth: "2",
-                            strokeLinecap: "round"
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          "path",
-                          {
-                            d: "M8 6V4h8v2",
-                            stroke: "currentColor",
-                            strokeWidth: "2",
-                            strokeLinejoin: "round"
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          "path",
-                          {
-                            d: "M6 6l1 16h10l1-16",
-                            stroke: "currentColor",
-                            strokeWidth: "2",
-                            strokeLinejoin: "round"
-                          }
-                        )
-                      ] })
-                    }
-                  )
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "messages-container", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(HeaderAlert, { headerValidation, setShowAlert, showAlert }),
-                messages.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsxRuntime.jsx("span", { dangerouslySetInnerHTML: { __html: clean } }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  messages.map((message, index) => /* @__PURE__ */ jsxRuntime.jsx(MessageBubble, { message, onAction: sendMessage }, index)),
-                  config?.widget_config.show_typing_indicator && isLoading && /* @__PURE__ */ jsxRuntime.jsx(TypingDots, {})
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { ref: messagesEndRef })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                ChatInput,
-                {
-                  handleSendMessage: sendMessage,
-                  isLoading,
-                  placeholder: config?.widget_config.placeholder ?? ""
-                }
-              )
-            ] }) }),
-            activeTab === "info" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "info-panel", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "eyebrow", children: "Info" }),
-              /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "panel-title", children: "Widget Details" }),
-              /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "info-list", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Company" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("strong", { children: config?.widget_config.company_name })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Status" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("strong", { children: isLoading ? "Typing..." : "Online" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Conversations" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("strong", { children: sessions.length })
+                  /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "company-name", children: config?.widget_config.company_name }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "status-text", children: isLoading ? "Typing..." : "Online" })
                 ] })
-              ] })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bottom-nav", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "chat-content", children: [
+            activeTab === "home" && /* @__PURE__ */ jsxRuntime.jsx(
+              HomePanel,
               {
-                className: `nav-button ${activeTab === "home" ? "active" : ""}`,
-                onClick: () => {
-                  setActiveTab("home");
+                companyName: config?.widget_config.company_name ?? "",
+                isLoading,
+                sessionsCount: sessions.length,
+                onNewSession: handleCreateSession,
+                onViewConversations: () => {
+                  setActiveTab("messages");
                   setMessageView("list");
-                },
-                children: "Home"
+                }
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
+            activeTab === "messages" && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: messageView === "list" ? /* @__PURE__ */ jsxRuntime.jsx(
+              ConversationListPanel,
               {
-                className: `nav-button ${activeTab === "messages" ? "active" : ""}`,
-                onClick: () => {
-                  setActiveTab("messages");
-                  setMessageView("list");
-                },
-                children: "Messages"
+                sessions,
+                activeSessionId,
+                getSessionTitle,
+                onNewSession: handleCreateSession,
+                onSelectSession: handleSelectSession
               }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              ConversationDetailPanel,
               {
-                className: `nav-button ${activeTab === "info" ? "active" : ""}`,
-                onClick: () => {
+                activeSessionId,
+                isLoading,
+                messages,
+                headerValidation,
+                showAlert,
+                setShowAlert,
+                sanitizedWelcome,
+                messagesEndRef,
+                config,
+                getSessionTitle,
+                onBack: () => setMessageView("list"),
+                onInfo: () => {
                   setActiveTab("info");
                   setMessageView("list");
                 },
-                children: "Info"
+                onSendMessage: sendMessage,
+                placeholder: config?.widget_config.placeholder ?? ""
+              }
+            ) }),
+            activeTab === "info" && /* @__PURE__ */ jsxRuntime.jsx(
+              InfoPanel,
+              {
+                companyName: config?.widget_config.company_name ?? "",
+                isLoading,
+                sessionsCount: sessions.length
               }
             )
-          ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bottom-nav", children: ["home", "messages", "info"].map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              className: `nav-button ${activeTab === tab ? "active" : ""}`,
+              onClick: () => {
+                setActiveTab(tab);
+                setMessageView("list");
+              },
+              children: tab.charAt(0).toUpperCase() + tab.slice(1)
+            },
+            tab
+          )) })
         ] })
       }
     ),
@@ -1179,10 +1193,10 @@ var AizekChatBot = ({ clientId, headers, onMounted, onReady, onOpen, onClose, on
         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 },
-        children: isOpen ? /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(IconClose, {}) : /* @__PURE__ */ jsxRuntime.jsx(IconChat, {})
       }
     )
-  ] }) });
+  ] });
 };
 
 exports.AizekChatBot = AizekChatBot;