@hissuno/widget 0.1.0

package/dist/index.mjs

@@ -0,0 +1,2902 @@
+// src/HissunoWidget.tsx
+import { useState as useState3, useCallback as useCallback5, useEffect as useEffect7, Component } from "react";
+
+// src/shared/Icons.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function CloseIcon({ size = 20 }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+      ]
+    }
+  );
+}
+function NewThreadIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M12 20h9" }),
+        /* @__PURE__ */ jsx("path", { d: "M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" })
+      ]
+    }
+  );
+}
+function SpinnerIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      style: { animation: "hissuno-spin 1s linear infinite" },
+      children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+    }
+  );
+}
+function ChatIcon({ size = 24 }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })
+    }
+  );
+}
+function TrashIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("polyline", { points: "3 6 5 6 21 6" }),
+        /* @__PURE__ */ jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
+      ]
+    }
+  );
+}
+function HistoryIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+        /* @__PURE__ */ jsx("path", { d: "M3 3v5h5" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 7v5l4 2" })
+      ]
+    }
+  );
+}
+
+// src/triggers/ChatBubble.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function getPositionStyles(position, offset) {
+  const x = offset.x ?? 20;
+  const y = offset.y ?? 20;
+  switch (position) {
+    case "bottom-left":
+      return { bottom: y, left: x };
+    case "top-right":
+      return { top: y, right: x };
+    case "top-left":
+      return { top: y, left: x };
+    case "bottom-right":
+    default:
+      return { bottom: y, right: x };
+  }
+}
+function ChatBubble({
+  isOpen,
+  onClick,
+  position = "bottom-right",
+  offset = {},
+  theme = "light"
+}) {
+  const positionStyles = getPositionStyles(position, offset);
+  const isDark = theme === "dark";
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: "hissuno-bubble",
+      style: {
+        position: "fixed",
+        ...positionStyles,
+        width: 56,
+        height: 56,
+        borderRadius: "50%",
+        border: "none",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+        transition: "transform 0.2s ease, box-shadow 0.2s ease",
+        zIndex: 9998,
+        backgroundColor: isDark ? "#1a1a1a" : "#2563eb",
+        color: "#ffffff"
+      },
+      "aria-label": isOpen ? "Close chat" : "Open chat",
+      children: isOpen ? /* @__PURE__ */ jsx2(CloseIcon, { size: 24 }) : /* @__PURE__ */ jsx2(ChatIcon, { size: 24 })
+    }
+  );
+}
+
+// src/triggers/DrawerBadge.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function DrawerBadge({
+  isOpen,
+  onClick,
+  label = "Support",
+  theme = "light"
+}) {
+  const isDark = theme === "dark";
+  return /* @__PURE__ */ jsx3(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: "hissuno-drawer-badge",
+      style: {
+        position: "fixed",
+        right: 0,
+        top: "50%",
+        transform: "translateY(-50%)",
+        width: 40,
+        minHeight: 100,
+        padding: "16px 8px",
+        border: "none",
+        borderRadius: "8px 0 0 8px",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        boxShadow: "-2px 0 8px rgba(0, 0, 0, 0.15)",
+        transition: "transform 0.2s ease, box-shadow 0.2s ease",
+        zIndex: 9998,
+        backgroundColor: isDark ? "#1a1a1a" : "#2563eb",
+        color: "#ffffff",
+        writingMode: "vertical-rl",
+        textOrientation: "mixed",
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        fontSize: 14,
+        fontWeight: 500,
+        letterSpacing: "0.02em"
+      },
+      "aria-label": isOpen ? "Close chat" : "Open chat",
+      onMouseEnter: (e) => {
+        e.currentTarget.style.transform = "translateY(-50%) translateX(-4px)";
+        e.currentTarget.style.boxShadow = "-4px 0 12px rgba(0, 0, 0, 0.2)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.transform = "translateY(-50%)";
+        e.currentTarget.style.boxShadow = "-2px 0 8px rgba(0, 0, 0, 0.15)";
+      },
+      children: isOpen ? /* @__PURE__ */ jsx3(CloseIcon, { size: 16 }) : /* @__PURE__ */ jsxs2("span", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+        /* @__PURE__ */ jsx3("span", { style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx3(ChatIcon, { size: 16 }) }),
+        label
+      ] })
+    }
+  );
+}
+
+// src/shared/ChatMessages.tsx
+import { useEffect, useRef } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function MessageBubble({ message, theme = "light" }) {
+  const isUser = message.role === "user";
+  const isHumanAgent = message.senderType === "human_agent";
+  const isDark = theme === "dark";
+  const userBg = "#2563eb";
+  const userColor = "#ffffff";
+  const assistantBg = isDark ? "#2a2a2a" : "#f3f4f6";
+  const assistantColor = isDark ? "#e5e5e5" : "#1f2937";
+  const humanAgentBg = isDark ? "#4c1d95" : "#ede9fe";
+  const humanAgentColor = isDark ? "#e5e5e5" : "#1f2937";
+  const humanAgentBorder = "#8b5cf6";
+  const senderLabel = isUser ? "You" : isHumanAgent ? "Support agent" : "Assistant";
+  return /* @__PURE__ */ jsx4(
+    "article",
+    {
+      role: "article",
+      "aria-label": `Message from ${senderLabel}`,
+      style: {
+        display: "flex",
+        justifyContent: isUser ? "flex-end" : "flex-start",
+        marginBottom: 12
+      },
+      children: /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          style: {
+            maxWidth: "80%",
+            padding: "10px 14px",
+            borderRadius: 12,
+            backgroundColor: isUser ? userBg : isHumanAgent ? humanAgentBg : assistantBg,
+            color: isUser ? userColor : isHumanAgent ? humanAgentColor : assistantColor,
+            fontSize: 14,
+            lineHeight: 1.5,
+            whiteSpace: "pre-wrap",
+            wordBreak: "break-word",
+            border: isHumanAgent ? `1px solid ${humanAgentBorder}` : "none"
+          },
+          children: [
+            isHumanAgent && /* @__PURE__ */ jsxs3(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 4,
+                  marginBottom: 6,
+                  fontSize: 11,
+                  fontWeight: 600,
+                  color: "#8b5cf6",
+                  textTransform: "uppercase",
+                  letterSpacing: "0.05em"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs3(
+                    "svg",
+                    {
+                      width: "12",
+                      height: "12",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      children: [
+                        /* @__PURE__ */ jsx4("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }),
+                        /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "7", r: "4" })
+                      ]
+                    }
+                  ),
+                  "Human Agent"
+                ]
+              }
+            ),
+            message.content
+          ]
+        }
+      )
+    }
+  );
+}
+function LoadingIndicator({ theme = "light" }) {
+  const isDark = theme === "dark";
+  const dotColor = isDark ? "#666666" : "#9ca3af";
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      "aria-label": "Assistant is typing",
+      style: { display: "flex", justifyContent: "flex-start", marginBottom: 12 },
+      children: /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 4,
+            padding: "10px 14px",
+            borderRadius: 12,
+            backgroundColor: isDark ? "#2a2a2a" : "#f3f4f6"
+          },
+          children: [
+            /* @__PURE__ */ jsx4(
+              "span",
+              {
+                className: "hissuno-loading-dot",
+                style: {
+                  width: 8,
+                  height: 8,
+                  borderRadius: "50%",
+                  backgroundColor: dotColor,
+                  animation: "hissuno-bounce 1s infinite",
+                  animationDelay: "-0.3s"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx4(
+              "span",
+              {
+                className: "hissuno-loading-dot",
+                style: {
+                  width: 8,
+                  height: 8,
+                  borderRadius: "50%",
+                  backgroundColor: dotColor,
+                  animation: "hissuno-bounce 1s infinite",
+                  animationDelay: "-0.15s"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx4(
+              "span",
+              {
+                className: "hissuno-loading-dot",
+                style: {
+                  width: 8,
+                  height: 8,
+                  borderRadius: "50%",
+                  backgroundColor: dotColor,
+                  animation: "hissuno-bounce 1s infinite"
+                }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function ChatMessages({
+  messages,
+  isLoading,
+  isStreaming = false,
+  streamingContent = "",
+  theme = "light"
+}) {
+  const messagesEndRef = useRef(null);
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages, isLoading, streamingContent]);
+  const showLoading = isLoading && messages.length > 0 && messages[messages.length - 1].role === "user" && !streamingContent;
+  const showStreamingBubble = isStreaming && streamingContent;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: "hissuno-messages",
+      role: "log",
+      "aria-label": "Chat messages",
+      "aria-live": "polite",
+      "aria-relevant": "additions",
+      style: {
+        flex: 1,
+        overflowY: "auto",
+        padding: 16
+      },
+      children: [
+        messages.map((message) => /* @__PURE__ */ jsx4(MessageBubble, { message, theme }, message.id)),
+        showLoading && /* @__PURE__ */ jsx4(LoadingIndicator, { theme }),
+        showStreamingBubble && /* @__PURE__ */ jsx4("div", { "aria-live": "polite", "aria-atomic": "false", children: /* @__PURE__ */ jsx4(
+          MessageBubble,
+          {
+            message: {
+              id: "streaming",
+              role: "assistant",
+              content: streamingContent
+            },
+            theme
+          }
+        ) }),
+        /* @__PURE__ */ jsx4("div", { ref: messagesEndRef })
+      ]
+    }
+  );
+}
+
+// src/shared/ConversationHistory.tsx
+import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function formatDate(dateString) {
+  const date = new Date(dateString);
+  const now = /* @__PURE__ */ new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffDays = Math.floor(diffMs / (1e3 * 60 * 60 * 24));
+  if (diffDays === 0) {
+    return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  } else if (diffDays === 1) {
+    return "Yesterday";
+  } else if (diffDays < 7) {
+    return date.toLocaleDateString([], { weekday: "short" });
+  } else {
+    return date.toLocaleDateString([], { month: "short", day: "numeric" });
+  }
+}
+function ConversationHistory({
+  isOpen,
+  onClose,
+  sessions,
+  onSelectSession,
+  onDeleteSession,
+  currentSessionId,
+  theme = "light"
+}) {
+  const isDark = theme === "dark";
+  const bgColor = isDark ? "#1a1a1a" : "#ffffff";
+  const borderColor = isDark ? "#333333" : "#e5e7eb";
+  const textColor = isDark ? "#e5e5e5" : "#1f2937";
+  const secondaryTextColor = isDark ? "#999999" : "#6b7280";
+  const hoverBg = isDark ? "#2a2a2a" : "#f3f4f6";
+  const activeBg = isDark ? "#333333" : "#e5e7eb";
+  const backdropColor = "rgba(0, 0, 0, 0.3)";
+  const handleBackdropClick = (e) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+  const handleSessionClick = (sessionId) => {
+    onSelectSession(sessionId);
+    onClose();
+  };
+  const handleDeleteClick = (e, sessionId) => {
+    e.stopPropagation();
+    onDeleteSession(sessionId);
+  };
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+    /* @__PURE__ */ jsx5(
+      "div",
+      {
+        onClick: handleBackdropClick,
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: backdropColor,
+          opacity: isOpen ? 1 : 0,
+          visibility: isOpen ? "visible" : "hidden",
+          transition: "opacity 0.2s ease-in-out, visibility 0.2s ease-in-out",
+          zIndex: 1
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          bottom: 0,
+          width: "80%",
+          maxWidth: 300,
+          backgroundColor: bgColor,
+          borderRight: `1px solid ${borderColor}`,
+          transform: isOpen ? "translateX(0)" : "translateX(-100%)",
+          transition: "transform 0.25s ease-in-out",
+          zIndex: 2,
+          display: "flex",
+          flexDirection: "column",
+          overflow: "hidden"
+        },
+        children: [
+          /* @__PURE__ */ jsxs4(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                padding: "16px 16px",
+                borderBottom: `1px solid ${borderColor}`
+              },
+              children: [
+                /* @__PURE__ */ jsx5(
+                  "h3",
+                  {
+                    style: {
+                      margin: 0,
+                      fontSize: 15,
+                      fontWeight: 600,
+                      color: textColor,
+                      fontFamily: "system-ui, -apple-system, sans-serif"
+                    },
+                    children: "Conversations"
+                  }
+                ),
+                /* @__PURE__ */ jsx5(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onClose,
+                    style: {
+                      background: "none",
+                      border: "none",
+                      cursor: "pointer",
+                      padding: 4,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      color: secondaryTextColor,
+                      borderRadius: 4
+                    },
+                    "aria-label": "Close history",
+                    children: /* @__PURE__ */ jsx5(CloseIcon, { size: 18 })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx5(
+            "div",
+            {
+              style: {
+                flex: 1,
+                overflowY: "auto",
+                padding: "8px 0"
+              },
+              children: sessions.length === 0 ? /* @__PURE__ */ jsx5(
+                "div",
+                {
+                  style: {
+                    padding: "24px 16px",
+                    textAlign: "center",
+                    color: secondaryTextColor,
+                    fontSize: 14,
+                    fontFamily: "system-ui, -apple-system, sans-serif"
+                  },
+                  children: "No previous conversations"
+                }
+              ) : sessions.map((session) => {
+                const isActive = session.sessionId === currentSessionId;
+                return /* @__PURE__ */ jsxs4(
+                  "div",
+                  {
+                    onClick: () => handleSessionClick(session.sessionId),
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      padding: "12px 16px",
+                      cursor: "pointer",
+                      backgroundColor: isActive ? activeBg : "transparent",
+                      borderLeft: isActive ? "3px solid #2563eb" : "3px solid transparent",
+                      transition: "background-color 0.15s ease"
+                    },
+                    onMouseEnter: (e) => {
+                      if (!isActive) {
+                        e.currentTarget.style.backgroundColor = hoverBg;
+                      }
+                    },
+                    onMouseLeave: (e) => {
+                      if (!isActive) {
+                        e.currentTarget.style.backgroundColor = "transparent";
+                      }
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs4("div", { style: { flex: 1, minWidth: 0 }, children: [
+                        /* @__PURE__ */ jsx5(
+                          "div",
+                          {
+                            style: {
+                              fontSize: 14,
+                              fontWeight: 500,
+                              color: textColor,
+                              fontFamily: "system-ui, -apple-system, sans-serif",
+                              whiteSpace: "nowrap",
+                              overflow: "hidden",
+                              textOverflow: "ellipsis"
+                            },
+                            children: session.title
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs4(
+                          "div",
+                          {
+                            style: {
+                              fontSize: 12,
+                              color: secondaryTextColor,
+                              fontFamily: "system-ui, -apple-system, sans-serif",
+                              marginTop: 2
+                            },
+                            children: [
+                              formatDate(session.lastMessageAt),
+                              " \xB7 ",
+                              session.messageCount,
+                              " messages"
+                            ]
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsx5(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: (e) => handleDeleteClick(e, session.sessionId),
+                          style: {
+                            background: "none",
+                            border: "none",
+                            cursor: "pointer",
+                            padding: 4,
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            color: secondaryTextColor,
+                            borderRadius: 4,
+                            opacity: 0.6,
+                            marginLeft: 8,
+                            flexShrink: 0
+                          },
+                          "aria-label": "Delete conversation",
+                          title: "Delete conversation",
+                          onMouseEnter: (e) => {
+                            e.currentTarget.style.opacity = "1";
+                            e.currentTarget.style.color = "#dc2626";
+                          },
+                          onMouseLeave: (e) => {
+                            e.currentTarget.style.opacity = "0.6";
+                            e.currentTarget.style.color = secondaryTextColor;
+                          },
+                          children: /* @__PURE__ */ jsx5(TrashIcon, {})
+                        }
+                      )
+                    ]
+                  },
+                  session.sessionId
+                );
+              })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+// src/displays/ChatPopup.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function getPopupPositionStyles(position, offset) {
+  const x = offset.x ?? 20;
+  const y = offset.y ?? 20;
+  const popupOffset = 70;
+  switch (position) {
+    case "bottom-left":
+      return { bottom: y + popupOffset, left: x };
+    case "top-right":
+      return { top: y + popupOffset, right: x };
+    case "top-left":
+      return { top: y + popupOffset, left: x };
+    case "bottom-right":
+    default:
+      return { bottom: y + popupOffset, right: x };
+  }
+}
+function ChatPopup({
+  isOpen,
+  onClose,
+  messages,
+  input,
+  setInput,
+  handleSubmit,
+  isLoading,
+  isStreaming = false,
+  streamingContent = "",
+  error,
+  title = "Support",
+  placeholder = "Ask a question or report an issue...",
+  theme = "light",
+  position = "bottom-right",
+  offset = {},
+  onClearHistory,
+  onCancelChat,
+  onOpenHistory,
+  isHistoryOpen = false,
+  sessionHistory = [],
+  currentSessionId,
+  onCloseHistory,
+  onSelectSession,
+  onDeleteSession
+}) {
+  if (!isOpen) return null;
+  const isDark = theme === "dark";
+  const positionStyles = getPopupPositionStyles(position, offset);
+  const bgColor = isDark ? "#1a1a1a" : "#ffffff";
+  const borderColor = isDark ? "#333333" : "#e5e7eb";
+  const textColor = isDark ? "#e5e5e5" : "#1f2937";
+  const secondaryTextColor = isDark ? "#999999" : "#6b7280";
+  const inputBg = isDark ? "#2a2a2a" : "#f9fafb";
+  const inputBorder = isDark ? "#444444" : "#d1d5db";
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+  const onSubmit = (e) => {
+    e.preventDefault();
+    handleSubmit(e);
+  };
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: "hissuno-popup",
+      style: {
+        position: "fixed",
+        ...positionStyles,
+        width: 380,
+        height: 520,
+        display: "flex",
+        flexDirection: "column",
+        borderRadius: 12,
+        boxShadow: "0 10px 40px rgba(0, 0, 0, 0.15)",
+        backgroundColor: bgColor,
+        border: `1px solid ${borderColor}`,
+        zIndex: 9999,
+        overflow: "hidden",
+        animation: "hissuno-scale-in 0.2s ease-out"
+      },
+      children: [
+        onCloseHistory && onSelectSession && onDeleteSession && /* @__PURE__ */ jsx6(
+          ConversationHistory,
+          {
+            isOpen: isHistoryOpen,
+            onClose: onCloseHistory,
+            sessions: sessionHistory,
+            onSelectSession,
+            onDeleteSession,
+            currentSessionId,
+            theme
+          }
+        ),
+        /* @__PURE__ */ jsxs5(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              padding: "16px 20px",
+              borderBottom: `1px solid ${borderColor}`
+            },
+            children: [
+              /* @__PURE__ */ jsxs5("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                onOpenHistory && /* @__PURE__ */ jsx6(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onOpenHistory,
+                    style: {
+                      background: "none",
+                      border: "none",
+                      cursor: "pointer",
+                      padding: 4,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      color: secondaryTextColor,
+                      borderRadius: 4
+                    },
+                    "aria-label": "Conversation history",
+                    title: "Conversation history",
+                    children: /* @__PURE__ */ jsx6(HistoryIcon, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx6(
+                  "h2",
+                  {
+                    style: {
+                      margin: 0,
+                      fontSize: 16,
+                      fontWeight: 600,
+                      color: textColor,
+                      fontFamily: "system-ui, -apple-system, sans-serif"
+                    },
+                    children: title
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs5("div", { style: { display: "flex", gap: 8 }, children: [
+                onClearHistory && /* @__PURE__ */ jsx6(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onClearHistory,
+                    style: {
+                      background: "none",
+                      border: "none",
+                      cursor: "pointer",
+                      padding: 4,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      color: secondaryTextColor,
+                      borderRadius: 4
+                    },
+                    "aria-label": "New conversation",
+                    title: "New conversation",
+                    children: /* @__PURE__ */ jsx6(NewThreadIcon, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx6(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onClose,
+                    style: {
+                      background: "none",
+                      border: "none",
+                      cursor: "pointer",
+                      padding: 4,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      color: secondaryTextColor,
+                      borderRadius: 4
+                    },
+                    "aria-label": "Close",
+                    children: /* @__PURE__ */ jsx6(CloseIcon, {})
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          ChatMessages,
+          {
+            messages,
+            isLoading,
+            isStreaming,
+            streamingContent,
+            theme
+          }
+        ),
+        error && /* @__PURE__ */ jsx6(
+          "div",
+          {
+            role: "alert",
+            "aria-live": "assertive",
+            style: {
+              margin: "0 16px 12px",
+              padding: "8px 12px",
+              borderRadius: 8,
+              backgroundColor: isDark ? "#3b1515" : "#fef2f2",
+              border: `1px solid ${isDark ? "#5c2020" : "#fecaca"}`,
+              color: isDark ? "#fca5a5" : "#dc2626",
+              fontSize: 13
+            },
+            children: error.message || "Something went wrong. Please try again."
+          }
+        ),
+        /* @__PURE__ */ jsxs5(
+          "form",
+          {
+            onSubmit,
+            style: {
+              display: "flex",
+              gap: 8,
+              padding: 16,
+              borderTop: `1px solid ${borderColor}`
+            },
+            children: [
+              /* @__PURE__ */ jsx6(
+                "input",
+                {
+                  type: "text",
+                  value: input,
+                  onChange: (e) => setInput(e.target.value),
+                  onKeyDown: handleKeyDown,
+                  placeholder,
+                  disabled: isLoading,
+                  "aria-label": "Type your message",
+                  style: {
+                    flex: 1,
+                    padding: "10px 14px",
+                    borderRadius: 8,
+                    border: `1px solid ${inputBorder}`,
+                    backgroundColor: inputBg,
+                    color: textColor,
+                    fontSize: 14,
+                    outline: "none",
+                    fontFamily: "system-ui, -apple-system, sans-serif"
+                  }
+                }
+              ),
+              isStreaming && onCancelChat ? /* @__PURE__ */ jsx6(
+                "button",
+                {
+                  type: "button",
+                  onClick: onCancelChat,
+                  style: {
+                    padding: "10px 16px",
+                    borderRadius: 8,
+                    border: "none",
+                    backgroundColor: "#dc2626",
+                    color: "#ffffff",
+                    fontSize: 14,
+                    fontWeight: 500,
+                    cursor: "pointer",
+                    fontFamily: "system-ui, -apple-system, sans-serif",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    minWidth: 60
+                  },
+                  children: "Cancel"
+                }
+              ) : /* @__PURE__ */ jsx6(
+                "button",
+                {
+                  type: "submit",
+                  disabled: isLoading || !input.trim(),
+                  style: {
+                    padding: "10px 16px",
+                    borderRadius: 8,
+                    border: "none",
+                    backgroundColor: "#2563eb",
+                    color: "#ffffff",
+                    fontSize: 14,
+                    fontWeight: 500,
+                    cursor: isLoading || !input.trim() ? "not-allowed" : "pointer",
+                    opacity: isLoading || !input.trim() ? 0.5 : 1,
+                    fontFamily: "system-ui, -apple-system, sans-serif",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    minWidth: 60
+                  },
+                  children: isLoading ? /* @__PURE__ */ jsx6(SpinnerIcon, {}) : "Send"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/displays/ChatSidepanel.tsx
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function ChatSidepanel({
+  isOpen,
+  onClose,
+  messages,
+  input,
+  setInput,
+  handleSubmit,
+  isLoading,
+  isStreaming = false,
+  streamingContent = "",
+  error,
+  title = "Support",
+  placeholder = "Ask a question or report an issue...",
+  theme = "light",
+  onClearHistory,
+  onCancelChat,
+  onOpenHistory,
+  isHistoryOpen = false,
+  sessionHistory = [],
+  currentSessionId,
+  onCloseHistory,
+  onSelectSession,
+  onDeleteSession
+}) {
+  if (!isOpen) return null;
+  const isDark = theme === "dark";
+  const bgColor = isDark ? "#1a1a1a" : "#ffffff";
+  const borderColor = isDark ? "#333333" : "#e5e7eb";
+  const textColor = isDark ? "#e5e5e5" : "#1f2937";
+  const secondaryTextColor = isDark ? "#999999" : "#6b7280";
+  const inputBg = isDark ? "#2a2a2a" : "#f9fafb";
+  const inputBorder = isDark ? "#444444" : "#d1d5db";
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+  const onSubmit = (e) => {
+    e.preventDefault();
+    handleSubmit(e);
+  };
+  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    /* @__PURE__ */ jsx7(
+      "div",
+      {
+        className: "hissuno-backdrop",
+        onClick: onClose,
+        style: {
+          position: "fixed",
+          inset: 0,
+          backgroundColor: "rgba(0, 0, 0, 0.5)",
+          zIndex: 9998
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        className: "hissuno-sidepanel",
+        style: {
+          position: "fixed",
+          top: 0,
+          right: 0,
+          width: 400,
+          height: "100vh",
+          display: "flex",
+          flexDirection: "column",
+          backgroundColor: bgColor,
+          borderLeft: `1px solid ${borderColor}`,
+          boxShadow: "-4px 0 20px rgba(0, 0, 0, 0.15)",
+          zIndex: 9999,
+          overflow: "hidden",
+          animation: "hissuno-slide-in-right 0.25s ease-out"
+        },
+        children: [
+          onCloseHistory && onSelectSession && onDeleteSession && /* @__PURE__ */ jsx7(
+            ConversationHistory,
+            {
+              isOpen: isHistoryOpen,
+              onClose: onCloseHistory,
+              sessions: sessionHistory,
+              onSelectSession,
+              onDeleteSession,
+              currentSessionId,
+              theme
+            }
+          ),
+          /* @__PURE__ */ jsxs6(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                padding: "16px 20px",
+                borderBottom: `1px solid ${borderColor}`
+              },
+              children: [
+                /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                  onOpenHistory && /* @__PURE__ */ jsx7(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: onOpenHistory,
+                      style: {
+                        background: "none",
+                        border: "none",
+                        cursor: "pointer",
+                        padding: 4,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        color: secondaryTextColor,
+                        borderRadius: 4
+                      },
+                      "aria-label": "Conversation history",
+                      title: "Conversation history",
+                      children: /* @__PURE__ */ jsx7(HistoryIcon, {})
+                    }
+                  ),
+                  /* @__PURE__ */ jsx7(
+                    "h2",
+                    {
+                      style: {
+                        margin: 0,
+                        fontSize: 16,
+                        fontWeight: 600,
+                        color: textColor,
+                        fontFamily: "system-ui, -apple-system, sans-serif"
+                      },
+                      children: title
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs6("div", { style: { display: "flex", gap: 8 }, children: [
+                  onClearHistory && /* @__PURE__ */ jsx7(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: onClearHistory,
+                      style: {
+                        background: "none",
+                        border: "none",
+                        cursor: "pointer",
+                        padding: 4,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        color: secondaryTextColor,
+                        borderRadius: 4
+                      },
+                      "aria-label": "New conversation",
+                      title: "New conversation",
+                      children: /* @__PURE__ */ jsx7(NewThreadIcon, {})
+                    }
+                  ),
+                  /* @__PURE__ */ jsx7(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: onClose,
+                      style: {
+                        background: "none",
+                        border: "none",
+                        cursor: "pointer",
+                        padding: 4,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        color: secondaryTextColor,
+                        borderRadius: 4
+                      },
+                      "aria-label": "Close",
+                      children: /* @__PURE__ */ jsx7(CloseIcon, {})
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx7(
+            ChatMessages,
+            {
+              messages,
+              isLoading,
+              isStreaming,
+              streamingContent,
+              theme
+            }
+          ),
+          error && /* @__PURE__ */ jsx7(
+            "div",
+            {
+              role: "alert",
+              "aria-live": "assertive",
+              style: {
+                margin: "0 16px 12px",
+                padding: "8px 12px",
+                borderRadius: 8,
+                backgroundColor: isDark ? "#3b1515" : "#fef2f2",
+                border: `1px solid ${isDark ? "#5c2020" : "#fecaca"}`,
+                color: isDark ? "#fca5a5" : "#dc2626",
+                fontSize: 13
+              },
+              children: error.message || "Something went wrong. Please try again."
+            }
+          ),
+          /* @__PURE__ */ jsxs6(
+            "form",
+            {
+              onSubmit,
+              style: {
+                display: "flex",
+                gap: 8,
+                padding: 16,
+                borderTop: `1px solid ${borderColor}`
+              },
+              children: [
+                /* @__PURE__ */ jsx7(
+                  "input",
+                  {
+                    type: "text",
+                    value: input,
+                    onChange: (e) => setInput(e.target.value),
+                    onKeyDown: handleKeyDown,
+                    placeholder,
+                    disabled: isLoading,
+                    "aria-label": "Type your message",
+                    style: {
+                      flex: 1,
+                      padding: "10px 14px",
+                      borderRadius: 8,
+                      border: `1px solid ${inputBorder}`,
+                      backgroundColor: inputBg,
+                      color: textColor,
+                      fontSize: 14,
+                      outline: "none",
+                      fontFamily: "system-ui, -apple-system, sans-serif"
+                    }
+                  }
+                ),
+                isStreaming && onCancelChat ? /* @__PURE__ */ jsx7(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onCancelChat,
+                    style: {
+                      padding: "10px 16px",
+                      borderRadius: 8,
+                      border: "none",
+                      backgroundColor: "#dc2626",
+                      color: "#ffffff",
+                      fontSize: 14,
+                      fontWeight: 500,
+                      cursor: "pointer",
+                      fontFamily: "system-ui, -apple-system, sans-serif",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      minWidth: 60
+                    },
+                    children: "Cancel"
+                  }
+                ) : /* @__PURE__ */ jsx7(
+                  "button",
+                  {
+                    type: "submit",
+                    disabled: isLoading || !input.trim(),
+                    style: {
+                      padding: "10px 16px",
+                      borderRadius: 8,
+                      border: "none",
+                      backgroundColor: "#2563eb",
+                      color: "#ffffff",
+                      fontSize: 14,
+                      fontWeight: 500,
+                      cursor: isLoading || !input.trim() ? "not-allowed" : "pointer",
+                      opacity: isLoading || !input.trim() ? 0.5 : 1,
+                      fontFamily: "system-ui, -apple-system, sans-serif",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      minWidth: 60
+                    },
+                    children: isLoading ? /* @__PURE__ */ jsx7(SpinnerIcon, {}) : "Send"
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+// src/displays/ChatDialog.tsx
+import { useEffect as useEffect3, useCallback as useCallback2 } from "react";
+
+// src/hooks/useFocusTrap.ts
+import { useEffect as useEffect2, useRef as useRef2, useCallback } from "react";
+var FOCUSABLE_SELECTORS = [
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "a[href]",
+  '[tabindex]:not([tabindex="-1"])'
+].join(", ");
+function useFocusTrap(isActive) {
+  const containerRef = useRef2(null);
+  const previousActiveElement = useRef2(null);
+  const getFocusableElements = useCallback(() => {
+    if (!containerRef.current) return [];
+    return Array.from(
+      containerRef.current.querySelectorAll(FOCUSABLE_SELECTORS)
+    ).filter((el) => el.offsetParent !== null);
+  }, []);
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (!isActive || event.key !== "Tab") return;
+      const focusableElements = getFocusableElements();
+      if (focusableElements.length === 0) return;
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+      if (event.shiftKey && document.activeElement === firstElement) {
+        event.preventDefault();
+        lastElement.focus();
+      } else if (!event.shiftKey && document.activeElement === lastElement) {
+        event.preventDefault();
+        firstElement.focus();
+      }
+    },
+    [isActive, getFocusableElements]
+  );
+  useEffect2(() => {
+    if (!isActive) return;
+    previousActiveElement.current = document.activeElement;
+    const focusableElements = getFocusableElements();
+    if (focusableElements.length > 0) {
+      requestAnimationFrame(() => {
+        focusableElements[0].focus();
+      });
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      if (previousActiveElement.current && previousActiveElement.current instanceof HTMLElement) {
+        previousActiveElement.current.focus();
+      }
+    };
+  }, [isActive, getFocusableElements, handleKeyDown]);
+  return containerRef;
+}
+
+// src/displays/ChatDialog.tsx
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function ChatDialog({
+  isOpen,
+  onClose,
+  messages,
+  input,
+  setInput,
+  handleSubmit,
+  isLoading,
+  isStreaming = false,
+  streamingContent = "",
+  error,
+  title = "Support",
+  placeholder = "Ask a question or report an issue...",
+  theme = "light",
+  width = 600,
+  height = 500,
+  onClearHistory,
+  onCancelChat,
+  onOpenHistory,
+  isHistoryOpen = false,
+  sessionHistory = [],
+  currentSessionId,
+  onCloseHistory,
+  onSelectSession,
+  onDeleteSession
+}) {
+  const isDark = theme === "dark";
+  const bgColor = isDark ? "#1a1a1a" : "#ffffff";
+  const borderColor = isDark ? "#333333" : "#e5e7eb";
+  const textColor = isDark ? "#e5e5e5" : "#1f2937";
+  const secondaryTextColor = isDark ? "#999999" : "#6b7280";
+  const inputBg = isDark ? "#2a2a2a" : "#f9fafb";
+  const inputBorder = isDark ? "#444444" : "#d1d5db";
+  const dialogRef = useFocusTrap(isOpen);
+  const handleEscapeKey = useCallback2((e) => {
+    if (e.key === "Escape" && isOpen) {
+      onClose();
+    }
+  }, [isOpen, onClose]);
+  useEffect3(() => {
+    document.addEventListener("keydown", handleEscapeKey);
+    return () => document.removeEventListener("keydown", handleEscapeKey);
+  }, [handleEscapeKey]);
+  const handleBackdropClick = useCallback2((e) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  }, [onClose]);
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+  const onSubmit = (e) => {
+    e.preventDefault();
+    handleSubmit(e);
+  };
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxs7(Fragment3, { children: [
+    /* @__PURE__ */ jsx8(
+      "div",
+      {
+        className: "hissuno-dialog-backdrop",
+        onClick: handleBackdropClick,
+        style: {
+          position: "fixed",
+          inset: 0,
+          backgroundColor: "rgba(0, 0, 0, 0.5)",
+          backdropFilter: "blur(4px)",
+          WebkitBackdropFilter: "blur(4px)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          zIndex: 9998
+        },
+        children: /* @__PURE__ */ jsxs7(
+          "div",
+          {
+            ref: dialogRef,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": "hissuno-dialog-title",
+            className: "hissuno-dialog",
+            style: {
+              width,
+              height,
+              maxWidth: "calc(100vw - 40px)",
+              maxHeight: "calc(100vh - 40px)",
+              display: "flex",
+              flexDirection: "column",
+              borderRadius: 16,
+              boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+              backgroundColor: bgColor,
+              border: `1px solid ${borderColor}`,
+              overflow: "hidden",
+              animation: "hissuno-dialog-scale-in 0.2s ease-out"
+            },
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              onCloseHistory && onSelectSession && onDeleteSession && /* @__PURE__ */ jsx8(
+                ConversationHistory,
+                {
+                  isOpen: isHistoryOpen,
+                  onClose: onCloseHistory,
+                  sessions: sessionHistory,
+                  onSelectSession,
+                  onDeleteSession,
+                  currentSessionId,
+                  theme
+                }
+              ),
+              /* @__PURE__ */ jsxs7(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    padding: "16px 24px",
+                    borderBottom: `1px solid ${borderColor}`
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs7("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                      onOpenHistory && /* @__PURE__ */ jsx8(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: onOpenHistory,
+                          style: {
+                            background: "none",
+                            border: "none",
+                            cursor: "pointer",
+                            padding: 4,
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            color: secondaryTextColor,
+                            borderRadius: 4
+                          },
+                          "aria-label": "Conversation history",
+                          title: "Conversation history",
+                          children: /* @__PURE__ */ jsx8(HistoryIcon, {})
+                        }
+                      ),
+                      /* @__PURE__ */ jsx8(
+                        "h2",
+                        {
+                          id: "hissuno-dialog-title",
+                          style: {
+                            margin: 0,
+                            fontSize: 18,
+                            fontWeight: 600,
+                            color: textColor,
+                            fontFamily: "system-ui, -apple-system, sans-serif"
+                          },
+                          children: title
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs7("div", { style: { display: "flex", gap: 8 }, children: [
+                      onClearHistory && /* @__PURE__ */ jsx8(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: onClearHistory,
+                          style: {
+                            background: "none",
+                            border: "none",
+                            cursor: "pointer",
+                            padding: 4,
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            color: secondaryTextColor,
+                            borderRadius: 4
+                          },
+                          "aria-label": "New conversation",
+                          title: "New conversation",
+                          children: /* @__PURE__ */ jsx8(NewThreadIcon, {})
+                        }
+                      ),
+                      /* @__PURE__ */ jsx8(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: onClose,
+                          style: {
+                            background: "none",
+                            border: "none",
+                            cursor: "pointer",
+                            padding: 4,
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            color: secondaryTextColor,
+                            borderRadius: 4
+                          },
+                          "aria-label": "Close",
+                          children: /* @__PURE__ */ jsx8(CloseIcon, {})
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx8(
+                ChatMessages,
+                {
+                  messages,
+                  isLoading,
+                  isStreaming,
+                  streamingContent,
+                  theme
+                }
+              ),
+              error && /* @__PURE__ */ jsx8(
+                "div",
+                {
+                  role: "alert",
+                  "aria-live": "assertive",
+                  style: {
+                    margin: "0 16px 12px",
+                    padding: "8px 12px",
+                    borderRadius: 8,
+                    backgroundColor: isDark ? "#3b1515" : "#fef2f2",
+                    border: `1px solid ${isDark ? "#5c2020" : "#fecaca"}`,
+                    color: isDark ? "#fca5a5" : "#dc2626",
+                    fontSize: 13
+                  },
+                  children: error.message || "Something went wrong. Please try again."
+                }
+              ),
+              /* @__PURE__ */ jsxs7(
+                "form",
+                {
+                  onSubmit,
+                  style: {
+                    display: "flex",
+                    gap: 8,
+                    padding: 16,
+                    borderTop: `1px solid ${borderColor}`
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx8(
+                      "input",
+                      {
+                        type: "text",
+                        value: input,
+                        onChange: (e) => setInput(e.target.value),
+                        onKeyDown: handleKeyDown,
+                        placeholder,
+                        disabled: isLoading,
+                        autoFocus: true,
+                        "aria-label": "Type your message",
+                        style: {
+                          flex: 1,
+                          padding: "12px 16px",
+                          borderRadius: 8,
+                          border: `1px solid ${inputBorder}`,
+                          backgroundColor: inputBg,
+                          color: textColor,
+                          fontSize: 14,
+                          outline: "none",
+                          fontFamily: "system-ui, -apple-system, sans-serif"
+                        }
+                      }
+                    ),
+                    isStreaming && onCancelChat ? /* @__PURE__ */ jsx8(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: onCancelChat,
+                        style: {
+                          padding: "12px 20px",
+                          borderRadius: 8,
+                          border: "none",
+                          backgroundColor: "#dc2626",
+                          color: "#ffffff",
+                          fontSize: 14,
+                          fontWeight: 500,
+                          cursor: "pointer",
+                          fontFamily: "system-ui, -apple-system, sans-serif",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          minWidth: 70
+                        },
+                        children: "Cancel"
+                      }
+                    ) : /* @__PURE__ */ jsx8(
+                      "button",
+                      {
+                        type: "submit",
+                        disabled: isLoading || !input.trim(),
+                        style: {
+                          padding: "12px 20px",
+                          borderRadius: 8,
+                          border: "none",
+                          backgroundColor: "#2563eb",
+                          color: "#ffffff",
+                          fontSize: 14,
+                          fontWeight: 500,
+                          cursor: isLoading || !input.trim() ? "not-allowed" : "pointer",
+                          opacity: isLoading || !input.trim() ? 0.5 : 1,
+                          fontFamily: "system-ui, -apple-system, sans-serif",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          minWidth: 70
+                        },
+                        children: isLoading ? /* @__PURE__ */ jsx8(SpinnerIcon, {}) : "Send"
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx8("style", { children: `
+        @keyframes hissuno-dialog-scale-in {
+          from {
+            opacity: 0;
+            transform: scale(0.95);
+          }
+          to {
+            opacity: 1;
+            transform: scale(1);
+          }
+        }
+      ` })
+  ] });
+}
+
+// src/hooks/useHissunoChat.ts
+import { useCallback as useCallback3, useEffect as useEffect4, useMemo, useRef as useRef3, useState } from "react";
+
+// src/utils/validation.ts
+var MAX_MESSAGE_LENGTH = 4096;
+var SENSITIVE_PARAMS = [
+  "token",
+  "access_token",
+  "api_key",
+  "apikey",
+  "key",
+  "secret",
+  "password",
+  "pwd",
+  "auth",
+  "authorization",
+  "session",
+  "sessionid",
+  "session_id",
+  "jwt",
+  "bearer",
+  "refresh_token",
+  "code",
+  "state",
+  "nonce"
+];
+function validateMessageContent(content) {
+  if (typeof content !== "string") {
+    return null;
+  }
+  const byteLength = new TextEncoder().encode(content).length;
+  if (byteLength > MAX_MESSAGE_LENGTH) {
+    return null;
+  }
+  return content;
+}
+var VALID_CHAT_SSE_TYPES = ["connected", "message-start", "message-chunk", "message-complete", "error"];
+var VALID_UPDATE_SSE_TYPES = ["connected", "message", "status-change", "error", "heartbeat"];
+var VALID_MESSAGE_ROLES = ["user", "assistant"];
+var VALID_SENDER_TYPES = ["ai", "human_agent", "system"];
+function validateChatSSEEvent(data) {
+  if (!data || typeof data !== "object") {
+    return null;
+  }
+  const obj = data;
+  if (typeof obj.type !== "string" || !VALID_CHAT_SSE_TYPES.includes(obj.type)) {
+    return null;
+  }
+  if (obj.content !== void 0 && typeof obj.content !== "string") {
+    return null;
+  }
+  if (obj.message !== void 0 && typeof obj.message !== "string") {
+    return null;
+  }
+  if (typeof obj.timestamp !== "string") {
+    return {
+      type: obj.type,
+      content: obj.content,
+      message: obj.message,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    };
+  }
+  return {
+    type: obj.type,
+    content: obj.content,
+    message: obj.message,
+    timestamp: obj.timestamp
+  };
+}
+function validateUpdateSSEEvent(data) {
+  if (!data || typeof data !== "object") {
+    return null;
+  }
+  const obj = data;
+  if (typeof obj.type !== "string" || !VALID_UPDATE_SSE_TYPES.includes(obj.type)) {
+    return null;
+  }
+  let validatedMessage;
+  if (obj.message !== void 0) {
+    if (typeof obj.message !== "object" || obj.message === null) {
+      return null;
+    }
+    const msg = obj.message;
+    if (typeof msg.id !== "string" || !msg.id) {
+      return null;
+    }
+    if (typeof msg.role !== "string" || !VALID_MESSAGE_ROLES.includes(msg.role)) {
+      return null;
+    }
+    if (typeof msg.content !== "string") {
+      return null;
+    }
+    if (typeof msg.createdAt !== "string") {
+      return null;
+    }
+    if (msg.senderType !== void 0) {
+      if (typeof msg.senderType !== "string" || !VALID_SENDER_TYPES.includes(msg.senderType)) {
+        return null;
+      }
+    }
+    validatedMessage = {
+      id: msg.id,
+      role: msg.role,
+      content: msg.content,
+      createdAt: msg.createdAt,
+      senderType: msg.senderType
+    };
+  }
+  if (obj.status !== void 0 && typeof obj.status !== "string") {
+    return null;
+  }
+  const timestamp = typeof obj.timestamp === "string" ? obj.timestamp : (/* @__PURE__ */ new Date()).toISOString();
+  return {
+    type: obj.type,
+    message: validatedMessage,
+    status: obj.status,
+    timestamp
+  };
+}
+function sanitizePageUrl(url) {
+  if (typeof url !== "string" || !url) {
+    return "";
+  }
+  try {
+    const parsed = new URL(url);
+    for (const param of SENSITIVE_PARAMS) {
+      parsed.searchParams.delete(param);
+      parsed.searchParams.delete(param.toLowerCase());
+      parsed.searchParams.delete(param.toUpperCase());
+    }
+    const paramsToRemove = [];
+    parsed.searchParams.forEach((_, key) => {
+      const lowerKey = key.toLowerCase();
+      if (SENSITIVE_PARAMS.some((p) => lowerKey.includes(p))) {
+        paramsToRemove.push(key);
+      }
+    });
+    for (const key of paramsToRemove) {
+      parsed.searchParams.delete(key);
+    }
+    return parsed.toString();
+  } catch {
+    return "";
+  }
+}
+var VALID_TRIGGERS = ["bubble", "drawer-badge", "headless"];
+var VALID_DISPLAYS = ["popup", "sidepanel", "dialog"];
+var VALID_POSITIONS = ["bottom-right", "bottom-left", "top-right", "top-left"];
+var VALID_THEMES = ["light", "dark", "auto"];
+function validateTrigger(value, fallback = "bubble") {
+  if (typeof value === "string" && VALID_TRIGGERS.includes(value)) {
+    return value;
+  }
+  return fallback;
+}
+function validateDisplay(value, fallback = "sidepanel") {
+  if (typeof value === "string" && VALID_DISPLAYS.includes(value)) {
+    return value;
+  }
+  return fallback;
+}
+function validatePosition(value, fallback = "bottom-right") {
+  if (typeof value === "string" && VALID_POSITIONS.includes(value)) {
+    return value;
+  }
+  return fallback;
+}
+function validateTheme(value, fallback = "light") {
+  if (typeof value === "string" && VALID_THEMES.includes(value)) {
+    return value;
+  }
+  return fallback;
+}
+
+// src/hooks/useHissunoChat.ts
+var STORAGE_KEY_PREFIX = "hissuno_chat_";
+var SESSIONS_REGISTRY_PREFIX = "hissuno_sessions_";
+var DEFAULT_INACTIVITY_TIMEOUT = 30 * 60 * 1e3;
+function generateMessageId() {
+  return `msg_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
+}
+function generateSessionId() {
+  const timestamp = Date.now().toString(36);
+  const random = Math.random().toString(36).slice(2, 9);
+  return `session_${timestamp}_${random}`;
+}
+function getStorageKey(projectId, sessionId) {
+  if (sessionId) {
+    return `${STORAGE_KEY_PREFIX}${projectId}_${sessionId}`;
+  }
+  return `${STORAGE_KEY_PREFIX}${projectId}`;
+}
+function loadMessagesFromStorage(projectId, sessionId) {
+  if (typeof window === "undefined") return [];
+  try {
+    const stored = localStorage.getItem(getStorageKey(projectId, sessionId));
+    if (!stored) return [];
+    const parsed = JSON.parse(stored);
+    return parsed.map((msg) => ({
+      id: msg.id,
+      role: msg.role,
+      content: msg.content,
+      createdAt: msg.createdAt ? new Date(msg.createdAt) : void 0,
+      senderType: msg.senderType
+    }));
+  } catch {
+    return [];
+  }
+}
+function saveMessagesToStorage(projectId, messages, sessionId) {
+  if (typeof window === "undefined") return;
+  try {
+    const toStore = messages.map((msg) => ({
+      id: msg.id,
+      role: msg.role,
+      content: msg.content,
+      createdAt: msg.createdAt?.toISOString(),
+      senderType: msg.senderType
+    }));
+    localStorage.setItem(getStorageKey(projectId, sessionId), JSON.stringify(toStore));
+  } catch {
+  }
+}
+function clearMessagesFromStorage(projectId, sessionId) {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.removeItem(getStorageKey(projectId, sessionId));
+  } catch {
+  }
+}
+function getSessionsRegistryKey(projectId, userId) {
+  return `${SESSIONS_REGISTRY_PREFIX}${projectId}_${userId}`;
+}
+function loadSessionsRegistry(projectId, userId) {
+  if (typeof window === "undefined" || !userId) return [];
+  try {
+    const stored = localStorage.getItem(getSessionsRegistryKey(projectId, userId));
+    if (!stored) return [];
+    return JSON.parse(stored);
+  } catch {
+    return [];
+  }
+}
+function saveSessionToRegistry(projectId, userId, sessionId, messages) {
+  if (typeof window === "undefined" || !userId) return;
+  try {
+    const registry = loadSessionsRegistry(projectId, userId);
+    const firstUserMessage = messages.find((m) => m.role === "user");
+    const title = firstUserMessage?.content?.slice(0, 50) || "New conversation";
+    const lastMessage = messages[messages.length - 1];
+    const lastMessageAt = lastMessage?.createdAt?.toISOString() || (/* @__PURE__ */ new Date()).toISOString();
+    const existingIndex = registry.findIndex((s) => s.sessionId === sessionId);
+    const entry = {
+      sessionId,
+      userId,
+      title: title.length >= 50 ? title + "..." : title,
+      lastMessageAt,
+      messageCount: messages.length
+    };
+    if (existingIndex >= 0) {
+      registry[existingIndex] = entry;
+    } else {
+      registry.unshift(entry);
+    }
+    const trimmed = registry.slice(0, 50);
+    localStorage.setItem(getSessionsRegistryKey(projectId, userId), JSON.stringify(trimmed));
+  } catch {
+  }
+}
+function deleteSessionFromRegistry(projectId, userId, sessionId) {
+  if (typeof window === "undefined" || !userId) return;
+  try {
+    const registry = loadSessionsRegistry(projectId, userId);
+    const filtered = registry.filter((s) => s.sessionId !== sessionId);
+    localStorage.setItem(getSessionsRegistryKey(projectId, userId), JSON.stringify(filtered));
+    clearMessagesFromStorage(projectId, sessionId);
+  } catch {
+  }
+}
+function useHissunoChat({
+  projectId,
+  widgetToken,
+  apiUrl = "/api/agent",
+  initialMessage,
+  headers = {},
+  userId,
+  userMetadata,
+  sessionId: providedSessionId,
+  inactivityTimeout = DEFAULT_INACTIVITY_TIMEOUT,
+  onSessionClose
+}) {
+  const hasInitialized = useRef3(false);
+  const inactivityTimerRef = useRef3(null);
+  const sessionClosedRef = useRef3(false);
+  const eventSourceRef = useRef3(null);
+  const updatesEventSourceRef = useRef3(null);
+  const mountedRef = useRef3(true);
+  const isConnectingRef = useRef3(false);
+  const seenMessageIds = useRef3(/* @__PURE__ */ new Set());
+  const streamingContentRef = useRef3("");
+  const pendingMessageRef = useRef3(null);
+  const [currentSessionId, setCurrentSessionId] = useState(() => providedSessionId || generateSessionId());
+  const sessionId = currentSessionId;
+  const [messages, setMessages] = useState(() => {
+    const stored = loadMessagesFromStorage(projectId, sessionId);
+    if (stored.length > 0) {
+      return stored;
+    }
+    if (initialMessage) {
+      return [
+        {
+          id: generateMessageId(),
+          role: "assistant",
+          content: initialMessage,
+          createdAt: /* @__PURE__ */ new Date(),
+          senderType: "ai"
+        }
+      ];
+    }
+    return [];
+  });
+  const [input, setInput] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [streamingContent, setStreamingContent] = useState("");
+  const [error, setError] = useState(void 0);
+  const pageUrl = typeof window !== "undefined" ? sanitizePageUrl(window.location.href) : "";
+  const pageTitle = typeof window !== "undefined" ? document.title : "";
+  useEffect4(() => {
+    if (hasInitialized.current && messages.length > 0) {
+      saveMessagesToStorage(projectId, messages, sessionId);
+    }
+    hasInitialized.current = true;
+  }, [messages, projectId, sessionId]);
+  useEffect4(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      if (eventSourceRef.current) {
+        eventSourceRef.current.close();
+        eventSourceRef.current = null;
+      }
+      if (updatesEventSourceRef.current) {
+        updatesEventSourceRef.current.close();
+        updatesEventSourceRef.current = null;
+      }
+    };
+  }, []);
+  const connectToStream = useCallback3(() => {
+    if (isConnectingRef.current || eventSourceRef.current) {
+      return;
+    }
+    isConnectingRef.current = true;
+    streamingContentRef.current = "";
+    pendingMessageRef.current = null;
+    setStreamingContent("");
+    setIsStreaming(true);
+    const streamUrl = `${apiUrl}/stream?projectId=${encodeURIComponent(projectId)}&sessionId=${encodeURIComponent(sessionId)}`;
+    const eventSource = new EventSource(streamUrl);
+    eventSourceRef.current = eventSource;
+    eventSource.onmessage = (event) => {
+      if (!mountedRef.current) return;
+      try {
+        const rawData = JSON.parse(event.data);
+        const data = validateChatSSEEvent(rawData);
+        if (!data) {
+          console.warn("[useHissunoChat] Received invalid SSE event, skipping");
+          return;
+        }
+        if (data.type === "message-chunk" && data.content) {
+          const newContent = streamingContentRef.current + data.content;
+          if (new TextEncoder().encode(newContent).length <= MAX_MESSAGE_LENGTH * 10) {
+            streamingContentRef.current = newContent;
+            setStreamingContent(streamingContentRef.current);
+          }
+        }
+        if (data.type === "message-complete") {
+          eventSource.close();
+          eventSourceRef.current = null;
+          isConnectingRef.current = false;
+          const completedContent = streamingContentRef.current;
+          streamingContentRef.current = "";
+          setStreamingContent("");
+          if (completedContent && mountedRef.current && pendingMessageRef.current !== completedContent) {
+            pendingMessageRef.current = completedContent;
+            setMessages((prev) => [
+              ...prev,
+              {
+                id: generateMessageId(),
+                role: "assistant",
+                content: completedContent,
+                createdAt: /* @__PURE__ */ new Date()
+              }
+            ]);
+          }
+          setIsStreaming(false);
+          setIsLoading(false);
+        }
+        if (data.type === "error") {
+          eventSource.close();
+          eventSourceRef.current = null;
+          isConnectingRef.current = false;
+          setError(new Error(data.message ?? "Chat failed"));
+          setIsStreaming(false);
+          setIsLoading(false);
+          setStreamingContent("");
+        }
+      } catch (err) {
+        console.error("[useHissunoChat] Failed to parse SSE event:", err);
+      }
+    };
+    eventSource.onerror = () => {
+      if (eventSource.readyState === EventSource.CLOSED) {
+        eventSourceRef.current = null;
+        isConnectingRef.current = false;
+        if (mountedRef.current) {
+          setIsStreaming(false);
+          setIsLoading(false);
+        }
+      }
+    };
+  }, [apiUrl, projectId, sessionId]);
+  useEffect4(() => {
+    const checkRunningChat = async () => {
+      try {
+        const statusUrl = `${apiUrl}?projectId=${encodeURIComponent(projectId)}&sessionId=${encodeURIComponent(sessionId)}`;
+        const response = await fetch(statusUrl);
+        if (!response.ok) return;
+        const status = await response.json();
+        if (status.isRunning) {
+          setIsLoading(true);
+          connectToStream();
+        }
+      } catch (err) {
+        console.error("[useHissunoChat] Failed to check running chat:", err);
+      }
+    };
+    checkRunningChat();
+  }, [apiUrl, projectId, sessionId, connectToStream]);
+  useEffect4(() => {
+    if (sessionClosedRef.current || !sessionId) return;
+    const updatesUrl = `${apiUrl}/session/updates?sessionId=${encodeURIComponent(sessionId)}&projectId=${encodeURIComponent(projectId)}`;
+    const connectUpdates = () => {
+      if (updatesEventSourceRef.current) return;
+      const eventSource = new EventSource(updatesUrl);
+      updatesEventSourceRef.current = eventSource;
+      eventSource.onmessage = (event) => {
+        if (!mountedRef.current) return;
+        try {
+          const rawData = JSON.parse(event.data);
+          const data = validateUpdateSSEEvent(rawData);
+          if (!data) {
+            console.warn("[useHissunoChat] Received invalid updates SSE event, skipping");
+            return;
+          }
+          if (data.type === "message" && data.message) {
+            const validContent = validateMessageContent(data.message.content);
+            if (!validContent) {
+              console.warn("[useHissunoChat] Message content invalid or too long, skipping");
+              return;
+            }
+            if (!seenMessageIds.current.has(data.message.id)) {
+              seenMessageIds.current.add(data.message.id);
+              setMessages((prev) => [
+                ...prev,
+                {
+                  id: data.message.id,
+                  role: data.message.role,
+                  content: validContent,
+                  createdAt: new Date(data.message.createdAt),
+                  senderType: data.message.senderType || "human_agent"
+                }
+              ]);
+            }
+          }
+          if (data.type === "status-change" && data.status === "closed") {
+            sessionClosedRef.current = true;
+            eventSource.close();
+            updatesEventSourceRef.current = null;
+            onSessionClose?.();
+          }
+        } catch (err) {
+          console.error("[useHissunoChat] Failed to parse updates SSE event:", err);
+        }
+      };
+      eventSource.onerror = () => {
+        if (eventSource.readyState === EventSource.CLOSED && mountedRef.current && !sessionClosedRef.current) {
+          updatesEventSourceRef.current = null;
+          setTimeout(connectUpdates, 5e3);
+        }
+      };
+    };
+    if (messages.length > 1) {
+      connectUpdates();
+    }
+    return () => {
+      if (updatesEventSourceRef.current) {
+        updatesEventSourceRef.current.close();
+        updatesEventSourceRef.current = null;
+      }
+    };
+  }, [apiUrl, projectId, sessionId, messages.length, onSessionClose]);
+  const chatMessages = useMemo(() => {
+    return messages.map((msg) => ({
+      id: msg.id,
+      role: msg.role,
+      content: msg.content,
+      createdAt: msg.createdAt,
+      senderType: msg.senderType
+    }));
+  }, [messages]);
+  const clearHistory = useCallback3(() => {
+    if (userId && messages.length > 0) {
+      const hasUserMessages = messages.some((m) => m.role === "user");
+      if (hasUserMessages) {
+        saveSessionToRegistry(projectId, userId, sessionId, messages);
+      }
+    }
+    const newSessionId = generateSessionId();
+    setCurrentSessionId(newSessionId);
+    sessionClosedRef.current = false;
+    seenMessageIds.current = /* @__PURE__ */ new Set();
+    if (eventSourceRef.current) {
+      eventSourceRef.current.close();
+      eventSourceRef.current = null;
+    }
+    if (updatesEventSourceRef.current) {
+      updatesEventSourceRef.current.close();
+      updatesEventSourceRef.current = null;
+    }
+    if (initialMessage) {
+      setMessages([
+        {
+          id: generateMessageId(),
+          role: "assistant",
+          content: initialMessage,
+          createdAt: /* @__PURE__ */ new Date(),
+          senderType: "ai"
+        }
+      ]);
+    } else {
+      setMessages([]);
+    }
+    setError(void 0);
+    setStreamingContent("");
+  }, [projectId, userId, initialMessage, sessionId, messages]);
+  const loadSession = useCallback3((newSessionId, sessionMessages) => {
+    sessionClosedRef.current = false;
+    seenMessageIds.current = /* @__PURE__ */ new Set();
+    if (eventSourceRef.current) {
+      eventSourceRef.current.close();
+      eventSourceRef.current = null;
+    }
+    if (updatesEventSourceRef.current) {
+      updatesEventSourceRef.current.close();
+      updatesEventSourceRef.current = null;
+    }
+    setCurrentSessionId(newSessionId);
+    if (sessionMessages && sessionMessages.length > 0) {
+      setMessages(sessionMessages);
+      saveMessagesToStorage(projectId, sessionMessages, newSessionId);
+    } else {
+      const storedMessages = loadMessagesFromStorage(projectId, newSessionId);
+      if (storedMessages.length > 0) {
+        setMessages(storedMessages);
+      } else if (initialMessage) {
+        setMessages([
+          {
+            id: generateMessageId(),
+            role: "assistant",
+            content: initialMessage,
+            createdAt: /* @__PURE__ */ new Date(),
+            senderType: "ai"
+          }
+        ]);
+      } else {
+        setMessages([]);
+      }
+    }
+    setError(void 0);
+    setStreamingContent("");
+  }, [projectId, initialMessage]);
+  const getSessionHistory = useCallback3(() => {
+    if (!userId) return [];
+    return loadSessionsRegistry(projectId, userId);
+  }, [projectId, userId]);
+  const deleteSession = useCallback3((sessionIdToDelete) => {
+    if (!userId) return;
+    deleteSessionFromRegistry(projectId, userId, sessionIdToDelete);
+  }, [projectId, userId]);
+  const closeSession = useCallback3(async () => {
+    if (!sessionId || sessionClosedRef.current) return;
+    sessionClosedRef.current = true;
+    if (inactivityTimerRef.current) {
+      clearTimeout(inactivityTimerRef.current);
+      inactivityTimerRef.current = null;
+    }
+    try {
+      await fetch(`${apiUrl}/session/close`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...headers
+        },
+        body: JSON.stringify({ sessionId, projectId })
+      });
+      onSessionClose?.();
+    } catch (error2) {
+      console.error("[HissunoWidget] Failed to close session:", error2);
+    }
+  }, [sessionId, apiUrl, projectId, headers, onSessionClose]);
+  const cancelChat = useCallback3(async () => {
+    try {
+      const cancelUrl = `${apiUrl}/cancel`;
+      const response = await fetch(cancelUrl, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...headers
+        },
+        body: JSON.stringify({
+          projectId,
+          sessionId
+        })
+      });
+      if (!response.ok) {
+        const data = await response.json();
+        throw new Error(data.error ?? "Failed to cancel");
+      }
+      if (eventSourceRef.current) {
+        eventSourceRef.current.close();
+        eventSourceRef.current = null;
+      }
+      setIsLoading(false);
+      setIsStreaming(false);
+      setStreamingContent("");
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Failed to cancel";
+      setError(new Error(message));
+    }
+  }, [apiUrl, projectId, sessionId, headers]);
+  useEffect4(() => {
+    if (inactivityTimerRef.current) {
+      clearTimeout(inactivityTimerRef.current);
+    }
+    if (messages.length > 0 && !sessionClosedRef.current && inactivityTimeout > 0) {
+      inactivityTimerRef.current = setTimeout(() => {
+        closeSession();
+      }, inactivityTimeout);
+    }
+    return () => {
+      if (inactivityTimerRef.current) {
+        clearTimeout(inactivityTimerRef.current);
+      }
+    };
+  }, [messages, inactivityTimeout, closeSession]);
+  useEffect4(() => {
+    const handleBeforeUnload = () => {
+      if (!sessionId || sessionClosedRef.current) return;
+      const url = `${apiUrl}/session/close`;
+      const data = JSON.stringify({ sessionId, projectId });
+      navigator.sendBeacon(url, data);
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => window.removeEventListener("beforeunload", handleBeforeUnload);
+  }, [sessionId, apiUrl, projectId]);
+  const handleSubmit = useCallback3(
+    async (e) => {
+      if (e) {
+        e.preventDefault();
+      }
+      const messageContent = input.trim();
+      if (!messageContent) return;
+      const validatedContent = validateMessageContent(messageContent);
+      if (!validatedContent) {
+        setError(new Error(`Message too long. Maximum ${MAX_MESSAGE_LENGTH} bytes allowed.`));
+        return;
+      }
+      setError(void 0);
+      setIsLoading(true);
+      setInput("");
+      const userMessage = {
+        id: generateMessageId(),
+        role: "user",
+        content: messageContent,
+        createdAt: /* @__PURE__ */ new Date()
+      };
+      setMessages((prev) => [...prev, userMessage]);
+      try {
+        const allMessages = [...messages, userMessage].map((msg) => ({
+          role: msg.role,
+          content: msg.content
+        }));
+        const response = await fetch(apiUrl, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            ...headers
+          },
+          body: JSON.stringify({
+            messages: allMessages,
+            projectId,
+            userId,
+            userMetadata,
+            pageUrl,
+            pageTitle,
+            sessionId,
+            widgetToken
+          })
+        });
+        if (!response.ok) {
+          const data = await response.json();
+          if (response.status === 409) {
+            connectToStream();
+            return;
+          }
+          throw new Error(data.error ?? "Failed to send message");
+        }
+        connectToStream();
+      } catch (err) {
+        const message = err instanceof Error ? err.message : "Failed to send message";
+        setError(new Error(message));
+        setIsLoading(false);
+      }
+    },
+    [input, messages, apiUrl, headers, projectId, widgetToken, userId, userMetadata, pageUrl, pageTitle, sessionId, connectToStream]
+  );
+  return useMemo(
+    () => ({
+      messages: chatMessages,
+      input,
+      setInput,
+      handleSubmit,
+      isLoading,
+      isStreaming,
+      streamingContent,
+      error,
+      clearHistory,
+      currentSessionId: sessionId || null,
+      loadSession,
+      closeSession,
+      cancelChat,
+      getSessionHistory,
+      deleteSession
+    }),
+    [chatMessages, input, setInput, handleSubmit, isLoading, isStreaming, streamingContent, error, clearHistory, sessionId, loadSession, closeSession, cancelChat, getSessionHistory, deleteSession]
+  );
+}
+
+// src/hooks/useKeyboardShortcut.ts
+import { useCallback as useCallback4, useEffect as useEffect5 } from "react";
+function isMac() {
+  if (typeof window === "undefined") return false;
+  return navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+}
+function parseShortcut(shortcut) {
+  const parts = shortcut.toLowerCase().split("+");
+  const key = parts[parts.length - 1];
+  const modifiers = parts.slice(0, -1);
+  const mac = isMac();
+  return {
+    key,
+    ctrl: modifiers.includes("ctrl") || !mac && modifiers.includes("mod"),
+    meta: modifiers.includes("cmd") || modifiers.includes("meta") || mac && modifiers.includes("mod"),
+    alt: modifiers.includes("alt") || modifiers.includes("option"),
+    shift: modifiers.includes("shift")
+  };
+}
+function matchesShortcut(event, parsed) {
+  const keyMatch = event.key.toLowerCase() === parsed.key.toLowerCase();
+  const ctrlMatch = event.ctrlKey === parsed.ctrl;
+  const metaMatch = event.metaKey === parsed.meta;
+  const altMatch = event.altKey === parsed.alt;
+  const shiftMatch = event.shiftKey === parsed.shift;
+  return keyMatch && ctrlMatch && metaMatch && altMatch && shiftMatch;
+}
+function useKeyboardShortcut({
+  shortcut,
+  onTrigger,
+  enabled = true
+}) {
+  const handleKeyDown = useCallback4(
+    (event) => {
+      if (!shortcut || !enabled) return;
+      const parsed = parseShortcut(shortcut);
+      if (matchesShortcut(event, parsed)) {
+        event.preventDefault();
+        event.stopPropagation();
+        onTrigger();
+      }
+    },
+    [shortcut, enabled, onTrigger]
+  );
+  useEffect5(() => {
+    if (!shortcut || !enabled) return;
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [shortcut, enabled, handleKeyDown]);
+}
+function formatShortcut(shortcut) {
+  const mac = isMac();
+  const parts = shortcut.split("+");
+  return parts.map((part) => {
+    const lower = part.toLowerCase();
+    switch (lower) {
+      case "mod":
+        return mac ? "\u2318" : "Ctrl";
+      // Command symbol or Ctrl
+      case "ctrl":
+        return mac ? "\u2303" : "Ctrl";
+      // Control symbol or Ctrl
+      case "cmd":
+      case "meta":
+        return mac ? "\u2318" : "Win";
+      // Command symbol or Win
+      case "alt":
+      case "option":
+        return mac ? "\u2325" : "Alt";
+      // Option symbol or Alt
+      case "shift":
+        return mac ? "\u21E7" : "Shift";
+      // Shift symbol
+      default:
+        return part.toUpperCase();
+    }
+  }).join(mac ? "" : "+");
+}
+
+// src/hooks/useResolvedTheme.ts
+import { useState as useState2, useEffect as useEffect6 } from "react";
+function useResolvedTheme(theme) {
+  const [resolved, setResolved] = useState2(() => {
+    if (theme !== "auto") return theme;
+    if (typeof window === "undefined") return "light";
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  });
+  useEffect6(() => {
+    if (theme !== "auto") {
+      setResolved(theme);
+      return;
+    }
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = (e) => {
+      setResolved(e.matches ? "dark" : "light");
+    };
+    setResolved(mediaQuery.matches ? "dark" : "light");
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [theme]);
+  return resolved;
+}
+
+// src/HissunoWidget.tsx
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var DEFAULT_API_URL = "/api/agent";
+function HissunoWidget({
+  projectId,
+  widgetToken,
+  trigger: propTrigger,
+  display: propDisplay,
+  shortcut: propShortcut,
+  fetchDefaults = true,
+  userId,
+  userMetadata,
+  apiUrl = DEFAULT_API_URL,
+  theme: propTheme,
+  bubblePosition: propBubblePosition,
+  bubbleOffset,
+  drawerBadgeLabel: propDrawerBadgeLabel,
+  dialogWidth: propDialogWidth,
+  dialogHeight: propDialogHeight,
+  renderTrigger,
+  title: propTitle,
+  placeholder = "Ask a question or report an issue...",
+  initialMessage: propInitialMessage,
+  defaultOpen = false,
+  onOpen,
+  onClose,
+  className,
+  headers = {}
+}) {
+  const [isOpen, setIsOpen] = useState3(defaultOpen);
+  const [isHistoryOpen, setIsHistoryOpen] = useState3(false);
+  const [sessionHistory, setSessionHistory] = useState3([]);
+  const {
+    settings: serverSettings,
+    blocked,
+    loading: settingsLoading,
+    error: settingsError
+  } = useWidgetSettings(projectId || "", fetchDefaults && !!projectId, apiUrl, widgetToken);
+  const resolveTrigger = () => {
+    if (propTrigger) return propTrigger;
+    if (renderTrigger) return "headless";
+    if (serverSettings?.trigger) return serverSettings.trigger;
+    return "bubble";
+  };
+  const resolvedTrigger = resolveTrigger();
+  const resolveDisplay = () => {
+    if (propDisplay) return propDisplay;
+    if (serverSettings?.display) return serverSettings.display;
+    return "sidepanel";
+  };
+  const resolvedDisplay = resolveDisplay();
+  const resolvedShortcut = propShortcut !== void 0 ? propShortcut : serverSettings?.shortcut !== void 0 ? serverSettings.shortcut : "mod+k";
+  const resolvedBaseTheme = propTheme ?? serverSettings?.theme ?? "light";
+  const resolvedBubblePosition = propBubblePosition ?? serverSettings?.position ?? "bottom-right";
+  const resolvedTitle = propTitle ?? serverSettings?.title ?? "Support";
+  const resolvedInitialMessage = propInitialMessage ?? serverSettings?.initialMessage ?? "Hi! How can I help you today?";
+  const resolvedDrawerBadgeLabel = propDrawerBadgeLabel ?? serverSettings?.drawerBadgeLabel ?? "Support";
+  const resolvedDialogWidth = propDialogWidth ?? 600;
+  const resolvedDialogHeight = propDialogHeight ?? 500;
+  const {
+    messages,
+    input,
+    setInput,
+    handleSubmit,
+    isLoading,
+    isStreaming,
+    streamingContent,
+    error,
+    clearHistory,
+    closeSession,
+    cancelChat,
+    currentSessionId,
+    loadSession,
+    getSessionHistory,
+    deleteSession
+  } = useHissunoChat({
+    projectId: projectId || "",
+    widgetToken,
+    apiUrl,
+    initialMessage: resolvedInitialMessage,
+    headers,
+    userId,
+    userMetadata
+  });
+  const canShowHistory = !!userId;
+  const handleOpenHistory = useCallback5(() => {
+    if (!canShowHistory) return;
+    setSessionHistory(getSessionHistory());
+    setIsHistoryOpen(true);
+  }, [canShowHistory, getSessionHistory]);
+  const handleCloseHistory = useCallback5(() => {
+    setIsHistoryOpen(false);
+  }, []);
+  const handleSelectSession = useCallback5(
+    (sessionId) => {
+      loadSession(sessionId);
+      setIsHistoryOpen(false);
+    },
+    [loadSession]
+  );
+  const handleDeleteSession = useCallback5(
+    (sessionId) => {
+      deleteSession(sessionId);
+      setSessionHistory(getSessionHistory());
+    },
+    [deleteSession, getSessionHistory]
+  );
+  const open = useCallback5(() => {
+    setIsOpen(true);
+    onOpen?.();
+  }, [onOpen]);
+  const close = useCallback5(() => {
+    setIsOpen(false);
+    closeSession();
+    onClose?.();
+  }, [onClose, closeSession]);
+  const toggle = useCallback5(() => {
+    if (isOpen) {
+      close();
+    } else {
+      open();
+    }
+  }, [isOpen, open, close]);
+  useKeyboardShortcut({
+    shortcut: resolvedShortcut,
+    onTrigger: toggle,
+    enabled: true
+  });
+  useEffect7(() => {
+    if (defaultOpen && !isOpen) {
+      setIsOpen(true);
+    }
+  }, [defaultOpen]);
+  useEffect7(() => {
+    const styleId = "hissuno-widget-styles";
+    if (document.getElementById(styleId)) return;
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.textContent = `
+      @keyframes hissuno-bounce {
+        0%, 80%, 100% { transform: translateY(0); }
+        40% { transform: translateY(-6px); }
+      }
+      @keyframes hissuno-spin {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+      }
+      @keyframes hissuno-scale-in {
+        from { opacity: 0; transform: scale(0.95); }
+        to { opacity: 1; transform: scale(1); }
+      }
+      @keyframes hissuno-slide-in-right {
+        from { transform: translateX(100%); }
+        to { transform: translateX(0); }
+      }
+    `;
+    document.head.appendChild(style);
+  }, []);
+  const resolvedTheme = useResolvedTheme(resolvedBaseTheme);
+  if (!projectId) {
+    console.error("[HissunoWidget] projectId is required");
+    return null;
+  }
+  if (settingsLoading) {
+    return /* @__PURE__ */ jsx9("div", { className: "hissuno-widget hissuno-widget-loading" });
+  }
+  if (blocked) {
+    console.warn("[HissunoWidget] Widget blocked: origin not allowed for this project");
+    return null;
+  }
+  if (settingsError && !serverSettings) {
+    console.warn("[HissunoWidget] Widget not rendered: failed to fetch settings");
+    return null;
+  }
+  if (serverSettings?.tokenRequired && !widgetToken) {
+    console.warn(
+      "[HissunoWidget] This project requires a widgetToken for secure authentication. Requests may fail."
+    );
+  }
+  const renderWidgetTrigger = () => {
+    if (renderTrigger) {
+      return renderTrigger({ open, close, toggle, isOpen });
+    }
+    switch (resolvedTrigger) {
+      case "bubble":
+        return /* @__PURE__ */ jsx9(
+          ChatBubble,
+          {
+            isOpen,
+            onClick: toggle,
+            position: resolvedBubblePosition,
+            offset: bubbleOffset,
+            theme: resolvedTheme
+          }
+        );
+      case "drawer-badge":
+        return /* @__PURE__ */ jsx9(
+          DrawerBadge,
+          {
+            isOpen,
+            onClick: toggle,
+            label: resolvedDrawerBadgeLabel,
+            theme: resolvedTheme
+          }
+        );
+      case "headless":
+      default:
+        return null;
+    }
+  };
+  const displayProps = {
+    isOpen,
+    onClose: close,
+    messages,
+    input,
+    setInput,
+    handleSubmit,
+    isLoading,
+    isStreaming,
+    streamingContent,
+    error,
+    title: resolvedTitle,
+    placeholder,
+    theme: resolvedTheme,
+    onClearHistory: clearHistory,
+    onCancelChat: cancelChat,
+    onOpenHistory: canShowHistory ? handleOpenHistory : void 0,
+    isHistoryOpen,
+    sessionHistory,
+    currentSessionId,
+    onCloseHistory: handleCloseHistory,
+    onSelectSession: handleSelectSession,
+    onDeleteSession: handleDeleteSession
+  };
+  const renderDisplay = () => {
+    switch (resolvedDisplay) {
+      case "popup":
+        return /* @__PURE__ */ jsx9(
+          ChatPopup,
+          {
+            ...displayProps,
+            position: resolvedBubblePosition,
+            offset: bubbleOffset
+          }
+        );
+      case "dialog":
+        return /* @__PURE__ */ jsx9(
+          ChatDialog,
+          {
+            ...displayProps,
+            width: resolvedDialogWidth,
+            height: resolvedDialogHeight
+          }
+        );
+      case "sidepanel":
+      default:
+        return /* @__PURE__ */ jsx9(ChatSidepanel, { ...displayProps });
+    }
+  };
+  return /* @__PURE__ */ jsx9(WidgetErrorBoundary, { children: /* @__PURE__ */ jsxs8("div", { className: `hissuno-widget ${className ?? ""}`, children: [
+    renderWidgetTrigger(),
+    renderDisplay()
+  ] }) });
+}
+function useWidgetSettings(projectId, enabled, apiUrl, widgetToken) {
+  const [settings, setSettings] = useState3(null);
+  const [blocked, setBlocked] = useState3(false);
+  const [loading, setLoading] = useState3(enabled);
+  const [error, setError] = useState3(false);
+  useEffect7(() => {
+    if (!enabled || !projectId) {
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    setError(false);
+    const settingsUrl = `${apiUrl.replace(/\/api\/agent\/?$/, "/api/integrations/widget")}?projectId=${encodeURIComponent(projectId)}`;
+    const controller = new AbortController();
+    fetch(settingsUrl, {
+      signal: controller.signal
+    }).then((res) => {
+      if (res.status === 403) {
+        console.warn("[HissunoWidget] Origin not allowed for this project");
+        setBlocked(true);
+        return null;
+      }
+      if (!res.ok) {
+        console.warn("[HissunoWidget] Failed to fetch widget settings:", res.status);
+        return null;
+      }
+      return res.json();
+    }).then((data) => {
+      if (data) {
+        const mappedSettings = {
+          trigger: validateTrigger(data.trigger, "bubble"),
+          display: validateDisplay(data.display, "sidepanel"),
+          shortcut: data.shortcut ?? "mod+k",
+          theme: validateTheme(data.theme, "light"),
+          position: validatePosition(data.position, "bottom-right"),
+          title: typeof data.title === "string" ? data.title : "Support",
+          initialMessage: typeof data.initialMessage === "string" ? data.initialMessage : "Hi! How can I help you today?",
+          drawerBadgeLabel: typeof data.drawerBadgeLabel === "string" ? data.drawerBadgeLabel : "Support",
+          tokenRequired: Boolean(data.tokenRequired),
+          blocked: Boolean(data.blocked)
+        };
+        setSettings(mappedSettings);
+        if (data.blocked) {
+          setBlocked(true);
+        }
+      }
+    }).catch((err) => {
+      if (err.name !== "AbortError") {
+        console.warn("[HissunoWidget] Failed to fetch widget settings:", err);
+        setError(true);
+      }
+    }).finally(() => {
+      setLoading(false);
+    });
+    return () => controller.abort();
+  }, [projectId, enabled, apiUrl]);
+  const effectiveLoading = loading || enabled && !settings && !error && !blocked;
+  return { settings, blocked, loading: effectiveLoading, error };
+}
+var WidgetErrorBoundary = class extends Component {
+  constructor() {
+    super(...arguments);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error("[HissunoWidget] Error:", error, errorInfo);
+  }
+  render() {
+    if (this.state.hasError) {
+      return null;
+    }
+    return this.props.children;
+  }
+};
+export {
+  ChatBubble,
+  ChatDialog,
+  ChatMessages,
+  ChatPopup,
+  ChatSidepanel,
+  ConversationHistory,
+  DrawerBadge,
+  HissunoWidget,
+  HistoryIcon,
+  HissunoWidget as SupportWidget,
+  formatShortcut,
+  useFocusTrap,
+  useHissunoChat,
+  useKeyboardShortcut,
+  useResolvedTheme
+};