teko-chat-sdk 1.0.0

package/dist/index.js

@@ -0,0 +1,1722 @@
+// src/components/TekoChatWidget.tsx
+import { forwardRef, useCallback as useCallback4, useImperativeHandle, useState as useState5 } from "react";
+
+// src/utils/chatTheme.ts
+import { createContext, useContext } from "react";
+var DEFAULT_PRIMARY_COLOR = "#1a73e8";
+var ChatThemeContext = createContext({
+  primaryColor: DEFAULT_PRIMARY_COLOR
+});
+var useChatTheme = () => useContext(ChatThemeContext);
+function hexToRgba(hex, alpha) {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r},${g},${b},${alpha})`;
+}
+
+// src/components/ChatBubble.tsx
+import { jsx } from "react/jsx-runtime";
+var ChatBubble = ({
+  onClick,
+  offsetBottom = 0,
+  zIndex = 1031
+}) => {
+  const { primaryColor } = useChatTheme();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick,
+      style: {
+        position: "fixed",
+        bottom: `calc(2rem + ${offsetBottom}px)`,
+        right: "2.5rem",
+        width: 52,
+        height: 52,
+        borderRadius: "50%",
+        background: primaryColor,
+        border: "none",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        boxShadow: `0 4px 12px ${hexToRgba(primaryColor, 0.4)}`,
+        zIndex,
+        transition: "transform 0.2s ease, box-shadow 0.2s ease"
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.transform = "scale(1.08)";
+        e.currentTarget.style.boxShadow = `0 6px 16px ${hexToRgba(
+          primaryColor,
+          0.5
+        )}`;
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.transform = "scale(1)";
+        e.currentTarget.style.boxShadow = `0 4px 12px ${hexToRgba(
+          primaryColor,
+          0.4
+        )}`;
+      },
+      "aria-label": "M\u1EDF chat t\u01B0 v\u1EA5n",
+      children: /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M20 2H4C2.9 2 2 2.9 2 4V22L6 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2Z",
+          fill: "white"
+        }
+      ) })
+    }
+  );
+};
+
+// src/components/ChatMiniPopup.tsx
+import { useCallback, useState as useState2 } from "react";
+
+// src/components/MessageList.tsx
+import { useEffect, useRef } from "react";
+
+// src/components/MessageBubble.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var MessageBubble = ({
+  message,
+  onOptionClick
+}) => {
+  const isUser = message.role === "user";
+  const { primaryColor } = useChatTheme();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: isUser ? "flex-end" : "flex-start",
+        marginBottom: 8
+      },
+      children: [
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            style: {
+              maxWidth: "80%",
+              padding: "8px 12px",
+              borderRadius: isUser ? "16px 16px 4px 16px" : "16px 16px 16px 4px",
+              background: isUser ? primaryColor : "#f1f3f4",
+              color: isUser ? "#fff" : "#202124",
+              fontSize: 14,
+              lineHeight: 1.5,
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-word"
+            },
+            children: message.content
+          }
+        ),
+        !isUser && message.options && message.options.length > 0 && /* @__PURE__ */ jsx2(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexWrap: "wrap",
+              gap: 6,
+              marginTop: 6,
+              maxWidth: "80%"
+            },
+            children: message.options.map((opt) => /* @__PURE__ */ jsx2(
+              "button",
+              {
+                onClick: () => onOptionClick(opt),
+                style: {
+                  padding: "5px 12px",
+                  borderRadius: 16,
+                  border: `1px solid ${primaryColor}`,
+                  background: "#fff",
+                  color: primaryColor,
+                  fontSize: 13,
+                  cursor: "pointer",
+                  transition: "background 0.15s"
+                },
+                onMouseEnter: (e) => {
+                  e.currentTarget.style.background = hexToRgba(primaryColor, 0.1);
+                },
+                onMouseLeave: (e) => {
+                  e.currentTarget.style.background = "#fff";
+                },
+                children: opt.label
+              },
+              opt.key
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx2("span", { style: { fontSize: 11, color: "#9aa0a6", marginTop: 2 }, children: new Date(message.timestamp).toLocaleTimeString("vi-VN", {
+          hour: "2-digit",
+          minute: "2-digit"
+        }) })
+      ]
+    }
+  );
+};
+
+// src/components/MessageList.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var MessageList = ({
+  messages,
+  isLoading,
+  onOptionClick,
+  labels
+}) => {
+  const bottomRef = useRef(null);
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages, isLoading]);
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      style: {
+        flex: 1,
+        overflowY: "auto",
+        padding: "12px 16px",
+        display: "flex",
+        flexDirection: "column"
+      },
+      children: [
+        messages.length === 0 && /* @__PURE__ */ jsx3(
+          "div",
+          {
+            style: {
+              flex: 1,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color: "#9aa0a6",
+              fontSize: 14,
+              textAlign: "center"
+            },
+            children: labels.emptyState
+          }
+        ),
+        messages.map((msg) => /* @__PURE__ */ jsx3(
+          MessageBubble,
+          {
+            message: msg,
+            onOptionClick
+          },
+          msg.id
+        )),
+        isLoading && /* @__PURE__ */ jsx3(
+          "div",
+          {
+            style: { display: "flex", alignItems: "flex-start", marginBottom: 8 },
+            children: /* @__PURE__ */ jsx3(
+              "div",
+              {
+                style: {
+                  padding: "8px 14px",
+                  borderRadius: "16px 16px 16px 4px",
+                  background: "#f1f3f4",
+                  display: "flex",
+                  gap: 4,
+                  alignItems: "center"
+                },
+                children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx3(
+                  "span",
+                  {
+                    style: {
+                      width: 6,
+                      height: 6,
+                      borderRadius: "50%",
+                      background: "#9aa0a6",
+                      display: "inline-block",
+                      animation: `tekochat-bounce 1.2s ease-in-out ${i * 0.2}s infinite`
+                    }
+                  },
+                  i
+                ))
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx3("div", { ref: bottomRef }),
+        /* @__PURE__ */ jsx3("style", { children: `
+        @keyframes tekochat-bounce {
+          0%, 80%, 100% { transform: translateY(0); }
+          40% { transform: translateY(-6px); }
+        }
+      ` })
+      ]
+    }
+  );
+};
+
+// src/components/MessageInput.tsx
+import { useRef as useRef2, useState } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var MessageInput = ({
+  onSend,
+  disabled,
+  labels
+}) => {
+  const [value, setValue] = useState("");
+  const textareaRef = useRef2(null);
+  const { primaryColor } = useChatTheme();
+  const handleSend = () => {
+    const text = value.trim();
+    if (!text || disabled) return;
+    onSend(text);
+    setValue("");
+    if (textareaRef.current) textareaRef.current.style.height = "auto";
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+  const handleInput = (e) => {
+    setValue(e.target.value);
+    e.target.style.height = "auto";
+    e.target.style.height = `${Math.min(e.target.scrollHeight, 100)}px`;
+  };
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "flex-end",
+        gap: 8,
+        padding: "8px 12px",
+        borderTop: "1px solid #e8eaed",
+        background: "#fff"
+      },
+      children: [
+        /* @__PURE__ */ jsx4(
+          "textarea",
+          {
+            ref: textareaRef,
+            value,
+            onChange: handleInput,
+            onKeyDown: handleKeyDown,
+            disabled,
+            placeholder: labels.inputPlaceholder,
+            rows: 1,
+            style: {
+              flex: 1,
+              resize: "none",
+              border: "1px solid #e8eaed",
+              borderRadius: 20,
+              padding: "8px 12px",
+              fontSize: 14,
+              lineHeight: 1.4,
+              outline: "none",
+              fontFamily: "inherit",
+              background: disabled ? "#f8f9fa" : "#fff",
+              color: "#202124",
+              transition: "border-color 0.15s",
+              overflowY: "hidden"
+            },
+            onFocus: (e) => {
+              e.target.style.borderColor = primaryColor;
+            },
+            onBlur: (e) => {
+              e.target.style.borderColor = "#e8eaed";
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          "button",
+          {
+            onClick: handleSend,
+            disabled: !value.trim() || disabled,
+            style: {
+              width: 36,
+              height: 36,
+              borderRadius: "50%",
+              border: "none",
+              background: value.trim() && !disabled ? primaryColor : "#e8eaed",
+              cursor: value.trim() && !disabled ? "pointer" : "not-allowed",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0,
+              transition: "background 0.15s"
+            },
+            "aria-label": labels.send,
+            children: /* @__PURE__ */ jsx4("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx4("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z", fill: "white" }) })
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/ChatMiniPopup.tsx
+import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var ChatHeader = ({ onClose, labels, botAvatar }) => {
+  const { primaryColor } = useChatTheme();
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: "12px 16px",
+        background: primaryColor,
+        color: "#fff",
+        flexShrink: 0
+      },
+      children: [
+        /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+          /* @__PURE__ */ jsx5(
+            "div",
+            {
+              style: {
+                width: 32,
+                height: 32,
+                borderRadius: "50%",
+                background: "rgba(255,255,255,0.2)",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                overflow: "hidden"
+              },
+              children: botAvatar ? /* @__PURE__ */ jsx5(
+                "img",
+                {
+                  src: botAvatar,
+                  alt: labels.agentName,
+                  style: {
+                    width: 32,
+                    height: 32,
+                    borderRadius: "50%",
+                    objectFit: "cover"
+                  }
+                }
+              ) : /* @__PURE__ */ jsx5("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx5(
+                "path",
+                {
+                  d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z",
+                  fill: "white"
+                }
+              ) })
+            }
+          ),
+          /* @__PURE__ */ jsxs4("div", { children: [
+            /* @__PURE__ */ jsx5("div", { style: { fontSize: 14, fontWeight: 600 }, children: labels.agentName }),
+            /* @__PURE__ */ jsx5("div", { style: { fontSize: 11, opacity: 0.85 }, children: labels.agentStatus })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            onClick: onClose,
+            style: {
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              color: "#fff",
+              padding: 4,
+              display: "flex",
+              alignItems: "center"
+            },
+            "aria-label": labels.close,
+            children: /* @__PURE__ */ jsx5("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx5(
+              "path",
+              {
+                d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z",
+                fill: "white"
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  );
+};
+var ChatMiniPopup = ({
+  messages,
+  isLoading,
+  onSend,
+  onOptionClick,
+  onClose,
+  offsetBottom = 0,
+  zIndex = 1031,
+  miniWidth = 360,
+  miniHeight = 480,
+  layoutMode = "desktop",
+  labels,
+  botAvatar
+}) => {
+  const [isClosing, setIsClosing] = useState2(false);
+  const handleClose = useCallback(() => {
+    setIsClosing(true);
+    setTimeout(() => {
+      setIsClosing(false);
+      onClose();
+    }, 300);
+  }, [onClose]);
+  if (layoutMode === "mobile") {
+    return /* @__PURE__ */ jsxs4(Fragment, { children: [
+      /* @__PURE__ */ jsx5(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            inset: 0,
+            background: "rgba(0,0,0,0.4)",
+            zIndex: zIndex - 1,
+            animation: isClosing ? "tekochat-overlay-out 0.3s ease forwards" : "tekochat-overlay-in 0.3s ease"
+          },
+          onClick: handleClose
+        }
+      ),
+      /* @__PURE__ */ jsxs4(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            bottom: 0,
+            left: 0,
+            right: 0,
+            height: `calc(85vh - ${offsetBottom}px)`,
+            background: "#fff",
+            borderRadius: "16px 16px 0 0",
+            boxShadow: "0 -4px 24px rgba(0,0,0,0.15)",
+            display: "flex",
+            flexDirection: "column",
+            zIndex,
+            overflow: "hidden",
+            overscrollBehavior: "contain",
+            animation: isClosing ? "tekochat-sheet-out 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards" : "tekochat-sheet-in 0.3s cubic-bezier(0.32, 0.72, 0, 1)"
+          },
+          children: [
+            /* @__PURE__ */ jsx5(
+              ChatHeader,
+              {
+                onClose: handleClose,
+                labels,
+                botAvatar
+              }
+            ),
+            /* @__PURE__ */ jsx5(
+              MessageList,
+              {
+                messages,
+                isLoading,
+                onOptionClick,
+                labels
+              }
+            ),
+            /* @__PURE__ */ jsx5(MessageInput, { onSend, disabled: isLoading, labels }),
+            /* @__PURE__ */ jsx5("style", { children: `
+            @keyframes tekochat-sheet-in {
+              from { transform: translateY(100%); }
+              to   { transform: translateY(0); }
+            }
+            @keyframes tekochat-sheet-out {
+              from { transform: translateY(0); }
+              to   { transform: translateY(100%); }
+            }
+            @keyframes tekochat-overlay-in {
+              from { opacity: 0; }
+              to   { opacity: 1; }
+            }
+            @keyframes tekochat-overlay-out {
+              from { opacity: 1; }
+              to   { opacity: 0; }
+            }
+          ` })
+          ]
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        bottom: `calc(5.5rem + ${offsetBottom}px)`,
+        right: "2.5rem",
+        width: miniWidth,
+        height: miniHeight,
+        background: "#fff",
+        borderRadius: 16,
+        boxShadow: "0 8px 32px rgba(0,0,0,0.18)",
+        display: "flex",
+        flexDirection: "column",
+        zIndex,
+        overflow: "hidden",
+        animation: "tekochat-popup-in 0.25s cubic-bezier(0.4, 0, 0.2, 1)"
+      },
+      children: [
+        /* @__PURE__ */ jsx5(ChatHeader, { onClose, labels, botAvatar }),
+        /* @__PURE__ */ jsx5(
+          MessageList,
+          {
+            messages,
+            isLoading,
+            onOptionClick,
+            labels
+          }
+        ),
+        /* @__PURE__ */ jsx5(MessageInput, { onSend, disabled: isLoading, labels }),
+        /* @__PURE__ */ jsx5("style", { children: `
+        @keyframes tekochat-popup-in {
+          from { opacity: 0; transform: scale(0.85) translateY(16px); transform-origin: bottom right; }
+          to { opacity: 1; transform: scale(1) translateY(0); }
+        }
+      ` })
+      ]
+    }
+  );
+};
+
+// src/components/ChatFullscreen.tsx
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef3, useState as useState3 } from "react";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var EXIT_DURATION = 350;
+var ANCHOR_TO_POSITION = (anchor, offsetTop, offsetBottom) => {
+  switch (anchor) {
+    case "bottom-left":
+      return { bottom: `calc(2rem + ${offsetBottom}px)`, left: "2.5rem" };
+    case "top-right":
+      return { top: `calc(2rem + ${offsetTop}px)`, right: "2.5rem" };
+    case "top-left":
+      return { top: `calc(2rem + ${offsetTop}px)`, left: "2.5rem" };
+    default:
+      return { bottom: `calc(2rem + ${offsetBottom}px)`, right: "2.5rem" };
+  }
+};
+var ChatPanelHeader = ({ onClose, primaryColor, labels, botAvatar }) => /* @__PURE__ */ jsxs5(
+  "div",
+  {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: "12px 16px",
+      background: primaryColor,
+      color: "#fff",
+      flexShrink: 0
+    },
+    children: [
+      /* @__PURE__ */ jsxs5("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+        /* @__PURE__ */ jsx6(
+          "div",
+          {
+            style: {
+              width: 32,
+              height: 32,
+              borderRadius: "50%",
+              background: "rgba(255,255,255,0.2)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              overflow: "hidden"
+            },
+            children: botAvatar ? /* @__PURE__ */ jsx6(
+              "img",
+              {
+                src: botAvatar,
+                alt: labels.agentName,
+                style: {
+                  width: 32,
+                  height: 32,
+                  borderRadius: "50%",
+                  objectFit: "cover"
+                }
+              }
+            ) : /* @__PURE__ */ jsx6("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx6(
+              "path",
+              {
+                d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z",
+                fill: "white"
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ jsxs5("div", { children: [
+          /* @__PURE__ */ jsx6("div", { style: { fontSize: 14, fontWeight: 600 }, children: labels.agentName }),
+          /* @__PURE__ */ jsx6("div", { style: { fontSize: 11, opacity: 0.85 }, children: labels.agentStatus })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx6(
+        "button",
+        {
+          onClick: onClose,
+          style: {
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            color: "#fff",
+            padding: 4,
+            display: "flex",
+            alignItems: "center"
+          },
+          "aria-label": labels.close,
+          children: /* @__PURE__ */ jsx6("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx6(
+            "path",
+            {
+              d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z",
+              fill: "white"
+            }
+          ) })
+        }
+      )
+    ]
+  }
+);
+var ChatFullscreen = ({
+  messages,
+  isLoading,
+  componentKey,
+  onSend,
+  onOptionClick,
+  onClose,
+  onMinimize,
+  renderRightPanel,
+  transformOrigin = "bottom right",
+  bubbleAnchor = "bottom-right",
+  offsetTop = 0,
+  offsetBottom = 0,
+  zIndex = 1040,
+  layoutMode = "desktop",
+  showRightPanelTrigger = 0,
+  labels,
+  botAvatar
+}) => {
+  const { primaryColor } = useChatTheme();
+  const [isClosing, setIsClosing] = useState3(false);
+  const [activeMobilePanel, setActiveMobilePanel] = useState3("chat");
+  useEffect2(() => {
+    if (layoutMode === "mobile" && showRightPanelTrigger > 0) {
+      setActiveMobilePanel("rightPanel");
+    }
+  }, [showRightPanelTrigger, layoutMode]);
+  const [dragY, setDragY] = useState3(0);
+  const touchStartY = useRef3(0);
+  const isDragging = useRef3(false);
+  const handleDragStart = useCallback2((e) => {
+    touchStartY.current = e.touches[0].clientY;
+    isDragging.current = true;
+  }, []);
+  const handleDragMove = useCallback2((e) => {
+    if (!isDragging.current) return;
+    const delta = e.touches[0].clientY - touchStartY.current;
+    if (delta > 0) setDragY(delta);
+  }, []);
+  const handleDragEnd = useCallback2(() => {
+    isDragging.current = false;
+    if (dragY > 80) {
+      setDragY(0);
+      setActiveMobilePanel("chat");
+    } else {
+      setDragY(0);
+    }
+  }, [dragY]);
+  const triggerExit = useCallback2((callback) => {
+    setIsClosing(true);
+    setTimeout(() => {
+      setIsClosing(false);
+      callback();
+    }, EXIT_DURATION);
+  }, []);
+  const floatingIconPosition = ANCHOR_TO_POSITION(
+    bubbleAnchor,
+    offsetTop,
+    offsetBottom
+  );
+  if (layoutMode === "mobile") {
+    return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+      activeMobilePanel === "rightPanel" && /* @__PURE__ */ jsx6(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            top: offsetTop,
+            left: 0,
+            right: 0,
+            bottom: offsetBottom,
+            background: "rgba(0,0,0,0.35)",
+            zIndex: zIndex + 1
+          },
+          onClick: () => setActiveMobilePanel("chat")
+        }
+      ),
+      /* @__PURE__ */ jsxs5(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            top: offsetTop,
+            left: 0,
+            right: 0,
+            bottom: offsetBottom,
+            display: "flex",
+            flexDirection: "column",
+            background: "#fff",
+            zIndex,
+            animation: isClosing ? `tekochat-overlay-out ${EXIT_DURATION}ms ease forwards` : "tekochat-overlay-in 0.2s ease"
+          },
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsx6(
+              ChatPanelHeader,
+              {
+                primaryColor,
+                onClose: () => triggerExit(onClose),
+                labels,
+                botAvatar
+              }
+            ),
+            /* @__PURE__ */ jsx6(
+              MessageList,
+              {
+                messages,
+                isLoading,
+                onOptionClick,
+                labels
+              }
+            ),
+            /* @__PURE__ */ jsx6(MessageInput, { onSend, disabled: isLoading, labels })
+          ]
+        }
+      ),
+      componentKey && !isClosing && /* @__PURE__ */ jsx6(
+        "button",
+        {
+          onClick: () => setActiveMobilePanel(
+            (prev) => prev === "chat" ? "rightPanel" : "chat"
+          ),
+          style: {
+            position: "fixed",
+            ...floatingIconPosition,
+            zIndex: zIndex + 3,
+            width: 52,
+            height: 52,
+            borderRadius: "50%",
+            background: primaryColor,
+            border: "none",
+            cursor: "pointer",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            boxShadow: `0 4px 16px ${hexToRgba(primaryColor, 0.45)}`,
+            transition: "transform 0.2s ease"
+          },
+          "aria-label": activeMobilePanel === "rightPanel" ? labels.backToChat : labels.viewContent,
+          children: activeMobilePanel === "rightPanel" ? /* @__PURE__ */ jsx6("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx6(
+            "path",
+            {
+              d: "M20 2H4C2.9 2 2 2.9 2 4V22L6 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2Z",
+              fill: "white"
+            }
+          ) }) : /* @__PURE__ */ jsx6("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx6(
+            "path",
+            {
+              d: "M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z",
+              fill: "white"
+            }
+          ) })
+        }
+      ),
+      componentKey && /* @__PURE__ */ jsxs5(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            bottom: 0,
+            left: 0,
+            right: 0,
+            height: `calc(85vh - ${offsetBottom}px)`,
+            borderRadius: "16px 16px 0 0",
+            background: "#fff",
+            boxShadow: "0 -4px 24px rgba(0,0,0,0.15)",
+            zIndex: zIndex + 2,
+            display: "flex",
+            flexDirection: "column",
+            overflow: "hidden",
+            transform: activeMobilePanel === "rightPanel" ? `translateY(${dragY}px)` : "translateY(100%)",
+            transition: dragY > 0 ? "none" : `transform ${EXIT_DURATION}ms cubic-bezier(0.32, 0.72, 0, 1)`
+          },
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsx6(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  justifyContent: "center",
+                  padding: "10px 0 6px",
+                  flexShrink: 0,
+                  cursor: "grab",
+                  touchAction: "none"
+                },
+                onTouchStart: handleDragStart,
+                onTouchMove: handleDragMove,
+                onTouchEnd: handleDragEnd,
+                children: /* @__PURE__ */ jsx6(
+                  "div",
+                  {
+                    style: {
+                      width: 36,
+                      height: 4,
+                      borderRadius: 2,
+                      background: "#e0e0e0"
+                    }
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx6("div", { style: { flex: 1, overflow: "auto" }, children: renderRightPanel ? renderRightPanel(componentKey) : /* @__PURE__ */ jsx6(
+              "div",
+              {
+                style: {
+                  height: "100%",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  color: "#9aa0a6",
+                  fontSize: 14
+                },
+                children: labels.loadingContent
+              }
+            ) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx6("style", { children: `
+          @keyframes tekochat-overlay-in {
+            from { opacity: 0; }
+            to { opacity: 1; }
+          }
+          @keyframes tekochat-overlay-out {
+            from { opacity: 1; }
+            to { opacity: 0; }
+          }
+        ` })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        top: offsetTop,
+        left: 0,
+        right: 0,
+        bottom: offsetBottom,
+        background: "rgba(0,0,0,0.4)",
+        zIndex,
+        display: "flex",
+        flexDirection: "column",
+        animation: isClosing ? `tekochat-overlay-out ${EXIT_DURATION}ms ease forwards` : "tekochat-overlay-in 0.2s ease"
+      },
+      children: [
+        /* @__PURE__ */ jsxs5(
+          "div",
+          {
+            style: {
+              flex: 1,
+              display: "flex",
+              background: "#f8f9fa",
+              overflow: "hidden",
+              transformOrigin,
+              animation: isClosing ? `tekochat-fullscreen-out ${EXIT_DURATION}ms cubic-bezier(0.4, 0, 1, 1) forwards` : "tekochat-fullscreen-in 0.35s cubic-bezier(0, 0, 0.2, 1)"
+            },
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsxs5(
+                "div",
+                {
+                  style: {
+                    width: 380,
+                    flexShrink: 0,
+                    display: "flex",
+                    flexDirection: "column",
+                    background: "#fff",
+                    borderRight: "1px solid #e8eaed"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx6(
+                      ChatPanelHeader,
+                      {
+                        primaryColor,
+                        onClose: () => triggerExit(onClose),
+                        labels,
+                        botAvatar
+                      }
+                    ),
+                    /* @__PURE__ */ jsx6(
+                      MessageList,
+                      {
+                        messages,
+                        isLoading,
+                        onOptionClick,
+                        labels
+                      }
+                    ),
+                    /* @__PURE__ */ jsx6(MessageInput, { onSend, disabled: isLoading, labels })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs5(
+                "div",
+                {
+                  style: {
+                    flex: 1,
+                    display: "flex",
+                    flexDirection: "column",
+                    overflow: "hidden",
+                    background: "#fff"
+                  },
+                  children: [
+                    onMinimize && /* @__PURE__ */ jsx6(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "flex-end",
+                          padding: "8px 12px",
+                          borderBottom: "1px solid #e8eaed",
+                          flexShrink: 0
+                        },
+                        children: /* @__PURE__ */ jsx6(
+                          "button",
+                          {
+                            onClick: () => triggerExit(onMinimize),
+                            style: {
+                              background: "none",
+                              border: "1px solid #e8eaed",
+                              borderRadius: 6,
+                              padding: "4px 6px",
+                              color: "#5f6368",
+                              cursor: "pointer",
+                              display: "flex",
+                              alignItems: "center"
+                            },
+                            "aria-label": labels.minimize,
+                            title: labels.minimize,
+                            children: /* @__PURE__ */ jsx6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx6(
+                              "path",
+                              {
+                                d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z",
+                                fill: "currentColor"
+                              }
+                            ) })
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx6("div", { style: { flex: 1, overflow: "auto" }, children: renderRightPanel ? renderRightPanel(componentKey) : /* @__PURE__ */ jsx6(
+                      "div",
+                      {
+                        style: {
+                          height: "100%",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          color: "#9aa0a6",
+                          fontSize: 14
+                        },
+                        children: "\u0110ang t\u1EA3i n\u1ED9i dung..."
+                      }
+                    ) })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx6("style", { children: `
+        @keyframes tekochat-overlay-in {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+        @keyframes tekochat-overlay-out {
+          from { opacity: 1; }
+          to { opacity: 0; }
+        }
+        @keyframes tekochat-fullscreen-in {
+          from { transform: scale(0.05); opacity: 0; }
+          to { transform: scale(1); opacity: 1; }
+        }
+        @keyframes tekochat-fullscreen-out {
+          from { transform: scale(1); opacity: 1; }
+          to { transform: scale(0.05); opacity: 0; }
+        }
+      ` })
+      ]
+    }
+  );
+};
+
+// src/hooks/useChatSession.ts
+import { useCallback as useCallback3, useRef as useRef4, useState as useState4 } from "react";
+
+// src/transports/HttpStreamTransport.ts
+var HttpStreamTransport = class {
+  constructor(url, token) {
+    this.url = url;
+    this.token = token;
+  }
+  onChunk(cb) {
+    this.chunkCb = cb;
+  }
+  onDone(cb) {
+    this.doneCb = cb;
+  }
+  onError(cb) {
+    this.errorCb = cb;
+  }
+  connect() {
+    return Promise.resolve();
+  }
+  disconnect() {
+  }
+  async send(request) {
+    try {
+      const res = await fetch(this.url, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/x-ndjson",
+          ...this.token && { Authorization: `Bearer ${this.token}` }
+        },
+        body: JSON.stringify(request)
+      });
+      if (!res.ok || !res.body) {
+        throw new Error(`[HttpStreamTransport] HTTP ${res.status}`);
+      }
+      const reader = res.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = "";
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split("\n");
+        buffer = lines.pop() ?? "";
+        for (const line of lines) {
+          if (!line.trim()) continue;
+          try {
+            const frame = JSON.parse(line);
+            if (frame.type === "chunk") {
+              this.chunkCb?.(frame.text);
+            } else if (frame.type === "done") {
+              this.doneCb?.(frame.data);
+            } else if (frame.type === "error") {
+              this.errorCb?.(new Error(frame.message));
+            }
+          } catch {
+            this.errorCb?.(
+              new Error("[HttpStreamTransport] Failed to parse frame")
+            );
+          }
+        }
+      }
+    } catch (err) {
+      this.errorCb?.(err);
+    }
+  }
+};
+
+// src/utils/mockHandler.ts
+var MOCK_RESPONSES = [
+  {
+    keywords: [
+      "canh chua",
+      "s\u01B0\u1EDDn non",
+      "th\u1ECBt heo",
+      "th\u1ECBt l\u1EE3n",
+      "g\xE0",
+      "th\u1ECBt g\xE0",
+      "th\u1ECBt b\xF2",
+      "h\u1EA3i s\u1EA3n"
+    ],
+    response: () => ({
+      conversationId: "",
+      message: "T\xF4i \u0111\xE3 t\xECm th\u1EA5y m\u1ED9t s\u1ED1 s\u1EA3n ph\u1EA9m ph\xF9 h\u1EE3p! B\u1EA1n c\xF3 mu\u1ED1n xem gi\u1ECF h\xE0ng v\xE0 \u0111i\u1EC1u ch\u1EC9nh s\u1ED1 l\u01B0\u1EE3ng kh\xF4ng?",
+      intent: "addToCart",
+      action: "show_ui",
+      componentKey: "cart",
+      suggest: {
+        options: [
+          {
+            key: "view-cart",
+            label: "Xem gi\u1ECF h\xE0ng",
+            payload: { action: "view_cart" }
+          },
+          {
+            key: "continue",
+            label: "Ti\u1EBFp t\u1EE5c mua s\u1EAFm",
+            payload: { action: "continue" }
+          }
+        ]
+      },
+      timestamp: Date.now()
+    })
+  },
+  {
+    keywords: ["\u0111\u01A1n h\xE0ng", "\u0111\u01A1n c\u1EE7a t\xF4i", "theo d\xF5i \u0111\u01A1n", "tr\u1EA1ng th\xE1i \u0111\u01A1n"],
+    response: () => ({
+      conversationId: "",
+      message: "T\xF4i s\u1EBD gi\xFAp b\u1EA1n xem th\xF4ng tin \u0111\u01A1n h\xE0ng nh\xE9!",
+      intent: "viewOrder",
+      action: "show_ui",
+      componentKey: "order",
+      timestamp: Date.now()
+    })
+  },
+  {
+    keywords: ["gi\u1ECF h\xE0ng", "cart", "mua"],
+    response: () => ({
+      conversationId: "",
+      message: "\u0110\xE2y l\xE0 gi\u1ECF h\xE0ng c\u1EE7a b\u1EA1n!",
+      intent: "viewCart",
+      action: "show_ui",
+      componentKey: "cart",
+      timestamp: Date.now()
+    })
+  }
+];
+function handleCartUpdated(items) {
+  const total = items.reduce((sum, i) => sum + i.price * i.qty, 0);
+  const totalQty = items.reduce((sum, i) => sum + i.qty, 0);
+  const itemList = items.map((i) => `**${i.name}** \xD7${i.qty}`).join(", ");
+  return {
+    conversationId: "",
+    message: `Gi\u1ECF h\xE0ng \u0111\xE3 \u0111\u01B0\u1EE3c c\u1EADp nh\u1EADt! Hi\u1EC7n c\xF3 ${totalQty} s\u1EA3n ph\u1EA9m (${itemList}) \u2014 t\u1ED5ng **${total.toLocaleString(
+      "vi-VN"
+    )}\u0111**. B\u1EA1n c\xF3 mu\u1ED1n ti\u1EBFn h\xE0nh thanh to\xE1n kh\xF4ng?`,
+    intent: "cartUpdated",
+    action: "none",
+    suggest: {
+      options: [
+        {
+          key: "checkout",
+          label: "Thanh to\xE1n ngay",
+          payload: { action: "checkout" }
+        },
+        { key: "continue", label: "Mua th\xEAm", payload: { action: "continue" } }
+      ]
+    },
+    timestamp: Date.now()
+  };
+}
+function handleContext(context) {
+  if (context.type === "cart_updated" && Array.isArray(context.items)) {
+    return handleCartUpdated(context.items);
+  }
+  if (context.action === "view_cart") {
+    return {
+      conversationId: "",
+      message: "\u0110\xE2y l\xE0 gi\u1ECF h\xE0ng c\u1EE7a b\u1EA1n!",
+      intent: "viewCart",
+      action: "show_ui",
+      componentKey: "cart",
+      timestamp: Date.now()
+    };
+  }
+  return null;
+}
+var defaultResponse = (message) => ({
+  conversationId: "",
+  message: `T\xF4i ch\u01B0a hi\u1EC3u r\xF5 y\xEAu c\u1EA7u "${message}". B\u1EA1n c\xF3 th\u1EC3 h\u1ECFi t\xF4i v\u1EC1 s\u1EA3n ph\u1EA9m, gi\u1ECF h\xE0ng ho\u1EB7c \u0111\u01A1n h\xE0ng nh\xE9!`,
+  intent: "general",
+  action: "none",
+  timestamp: Date.now()
+});
+var mockHandler = (req, conversationId) => new Promise((resolve) => {
+  setTimeout(() => {
+    let data;
+    if (req.context) {
+      data = handleContext(req.context) ?? defaultResponse("");
+    } else {
+      const text = (req.message ?? "").toLowerCase();
+      const matched = MOCK_RESPONSES.find(
+        (r) => r.keywords.some((kw) => text.includes(kw))
+      );
+      data = matched ? matched.response(req) : defaultResponse(req.message ?? "");
+    }
+    data.conversationId = conversationId;
+    resolve({ code: 200, message: "ok", data });
+  }, 800);
+});
+
+// src/transports/MockTransport.ts
+var CHUNK_DELAY_MS = 50;
+function delay(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+var MockTransport = class {
+  constructor(conversationId) {
+    this.conversationId = conversationId;
+  }
+  onChunk(cb) {
+    this.chunkCb = cb;
+  }
+  onDone(cb) {
+    this.doneCb = cb;
+  }
+  onError(cb) {
+    this.errorCb = cb;
+  }
+  connect() {
+    return Promise.resolve();
+  }
+  disconnect() {
+  }
+  async send(request) {
+    try {
+      const response = await mockHandler(request, this.conversationId);
+      const { data } = response;
+      const words = data.message.split(" ");
+      for (const word of words) {
+        await delay(CHUNK_DELAY_MS);
+        this.chunkCb?.(word + " ");
+      }
+      this.doneCb?.(data);
+    } catch (err) {
+      this.errorCb?.(err);
+    }
+  }
+};
+
+// src/transports/WebSocketTransport.ts
+var MAX_RETRIES = 3;
+var BASE_RETRY_DELAY_MS = 1e3;
+var WebSocketTransport = class {
+  constructor(url, token) {
+    this.ws = null;
+    this.retryCount = 0;
+    this.url = url;
+    this.token = token;
+  }
+  onChunk(cb) {
+    this.chunkCb = cb;
+  }
+  onDone(cb) {
+    this.doneCb = cb;
+  }
+  onError(cb) {
+    this.errorCb = cb;
+  }
+  connect() {
+    return new Promise((resolve, reject) => {
+      const wsUrl = this.token ? `${this.url}?token=${this.token}` : this.url;
+      this.ws = new WebSocket(wsUrl);
+      this.ws.onopen = () => {
+        this.retryCount = 0;
+        resolve();
+      };
+      this.ws.onerror = () => {
+        reject(
+          new Error(`[WebSocketTransport] Failed to connect to ${this.url}`)
+        );
+      };
+      this.ws.onclose = () => {
+        if (this.retryCount < MAX_RETRIES) {
+          this.retryCount++;
+          const retryDelay = BASE_RETRY_DELAY_MS * this.retryCount;
+          setTimeout(() => this.connect(), retryDelay);
+        }
+      };
+      this.ws.onmessage = (event) => {
+        try {
+          const frame = JSON.parse(event.data);
+          if (frame.type === "chunk") {
+            this.chunkCb?.(frame.text);
+          } else if (frame.type === "done") {
+            this.doneCb?.(frame.data);
+          } else if (frame.type === "error") {
+            this.errorCb?.(new Error(frame.message));
+          }
+        } catch {
+          this.errorCb?.(
+            new Error("[WebSocketTransport] Failed to parse frame")
+          );
+        }
+      };
+    });
+  }
+  send(request) {
+    if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
+      this.errorCb?.(new Error("[WebSocketTransport] Connection not open"));
+      return;
+    }
+    this.ws.send(JSON.stringify(request));
+  }
+  disconnect() {
+    this.retryCount = MAX_RETRIES;
+    this.ws?.close();
+    this.ws = null;
+  }
+};
+
+// src/transports/createTransport.ts
+function createTransport(bffUrl, conversationId, token) {
+  if (!bffUrl) {
+    return new MockTransport(conversationId);
+  }
+  if (bffUrl.startsWith("wss://") || bffUrl.startsWith("ws://")) {
+    return new WebSocketTransport(bffUrl, token);
+  }
+  return new HttpStreamTransport(bffUrl, token);
+}
+
+// src/hooks/useChatSession.ts
+async function getTekoAuth() {
+  try {
+    const { default: TekoID } = await import("teko-oauth2");
+    if (!TekoID.user.isLoggedIn()) return {};
+    return {
+      userId: TekoID.user.getUserInfo().sub,
+      token: TekoID.user.getAccessToken()
+    };
+  } catch {
+    return {};
+  }
+}
+var generateId = () => Math.random().toString(36).slice(2, 10);
+var generateConversationId = () => `conv-${Date.now()}-${generateId()}`;
+var useChatSession = ({
+  chatBffUrl,
+  onIntent,
+  onDebugEvent,
+  getAppContext
+}) => {
+  const [messages, setMessages] = useState4([]);
+  const [isLoading, setIsLoading] = useState4(false);
+  const conversationIdRef = useRef4(generateConversationId());
+  const addMessage = (msg) => setMessages((prev) => [...prev, msg]);
+  const send = useCallback3(
+    async ({ message, context }) => {
+      if (!message && !context) return;
+      if (message) {
+        addMessage({
+          id: generateId(),
+          role: "user",
+          content: message,
+          timestamp: Date.now()
+        });
+      }
+      setIsLoading(true);
+      const { userId, token } = await getTekoAuth();
+      let appContext;
+      if (getAppContext) {
+        const resolved = await getAppContext();
+        if (Object.keys(resolved).length > 0) {
+          appContext = resolved;
+        }
+      }
+      const req = {
+        conversationId: conversationIdRef.current,
+        timestamp: Date.now(),
+        ...userId && { userId },
+        ...message && { message },
+        ...context && { context },
+        ...appContext && { appContext }
+      };
+      onDebugEvent?.({ type: "request", timestamp: Date.now(), payload: req });
+      const transport = createTransport(
+        chatBffUrl,
+        conversationIdRef.current,
+        token
+      );
+      const streamingIdRef = { current: generateId() };
+      let firstChunk = true;
+      transport.onChunk((text) => {
+        setMessages((prev) => {
+          if (firstChunk) {
+            firstChunk = false;
+            return [
+              ...prev,
+              {
+                id: streamingIdRef.current,
+                role: "ai",
+                content: text,
+                isStreaming: true,
+                timestamp: Date.now()
+              }
+            ];
+          }
+          const last = prev[prev.length - 1];
+          if (last?.id === streamingIdRef.current && last.isStreaming) {
+            return [
+              ...prev.slice(0, -1),
+              { ...last, content: last.content + text }
+            ];
+          }
+          return prev;
+        });
+      });
+      transport.onDone((data) => {
+        conversationIdRef.current = data.conversationId || conversationIdRef.current;
+        onDebugEvent?.({
+          type: "response",
+          timestamp: Date.now(),
+          payload: data
+        });
+        if (data.action !== "none") {
+          const componentKey = data.componentKey ?? data.path;
+          onDebugEvent?.({
+            type: "intent",
+            timestamp: Date.now(),
+            payload: { action: data.action, componentKey }
+          });
+          onIntent?.(data.action, componentKey);
+        }
+        setMessages((prev) => {
+          const last = prev[prev.length - 1];
+          if (last?.id === streamingIdRef.current) {
+            return [
+              ...prev.slice(0, -1),
+              {
+                ...last,
+                content: data.message,
+                isStreaming: false,
+                options: data.suggest?.options,
+                timestamp: data.timestamp
+              }
+            ];
+          }
+          if (data.message) {
+            return [
+              ...prev,
+              {
+                id: streamingIdRef.current,
+                role: "ai",
+                content: data.message,
+                isStreaming: false,
+                options: data.suggest?.options,
+                timestamp: data.timestamp
+              }
+            ];
+          }
+          return prev;
+        });
+        setIsLoading(false);
+        transport.disconnect();
+      });
+      transport.onError((err) => {
+        addMessage({
+          id: generateId(),
+          role: "ai",
+          content: "\u0110\xE3 x\u1EA3y ra l\u1ED7i khi k\u1EBFt n\u1ED1i. Vui l\xF2ng th\u1EED l\u1EA1i.",
+          timestamp: Date.now()
+        });
+        console.error("[TekoChatSDK] transport error:", err);
+        setIsLoading(false);
+        transport.disconnect();
+      });
+      try {
+        await transport.connect();
+        transport.send(req);
+      } catch (err) {
+        addMessage({
+          id: generateId(),
+          role: "ai",
+          content: "\u0110\xE3 x\u1EA3y ra l\u1ED7i khi k\u1EBFt n\u1ED1i. Vui l\xF2ng th\u1EED l\u1EA1i.",
+          timestamp: Date.now()
+        });
+        console.error("[TekoChatSDK] connect error:", err);
+        setIsLoading(false);
+      }
+    },
+    [chatBffUrl, onIntent, onDebugEvent, getAppContext]
+  );
+  const contextDebounceRef = useRef4(null);
+  const sendMessage = useCallback3(
+    (text, context) => send({ message: text, ...context && { context } }),
+    [send]
+  );
+  const sendContext = useCallback3(
+    (data) => {
+      onDebugEvent?.({
+        type: "context",
+        timestamp: Date.now(),
+        payload: data
+      });
+      if (contextDebounceRef.current) clearTimeout(contextDebounceRef.current);
+      contextDebounceRef.current = setTimeout(
+        () => send({ context: data }),
+        500
+      );
+    },
+    [send, onDebugEvent]
+  );
+  return { messages, isLoading, sendMessage, sendContext };
+};
+
+// src/locales/index.ts
+var BUILT_IN_LABELS = {
+  vi: {
+    agentName: "T\u01B0 v\u1EA5n vi\xEAn AI",
+    agentStatus: "\u25CF Tr\u1EF1c tuy\u1EBFn",
+    close: "\u0110\xF3ng",
+    minimize: "Thu g\u1ECDn",
+    backToChat: "Tr\u1EDF v\u1EC1 khung chat",
+    viewContent: "Xem n\u1ED9i dung",
+    loadingContent: "\u0110ang t\u1EA3i n\u1ED9i dung...",
+    inputPlaceholder: "Nh\u1EADp tin nh\u1EAFn...",
+    send: "G\u1EEDi",
+    emptyState: "Xin ch\xE0o! T\xF4i c\xF3 th\u1EC3 gi\xFAp b\u1EA1n."
+  },
+  en: {
+    agentName: "AI Assistant",
+    agentStatus: "\u25CF Online",
+    close: "Close",
+    minimize: "Minimize",
+    backToChat: "Back to chat",
+    viewContent: "View content",
+    loadingContent: "Loading...",
+    inputPlaceholder: "Type a message...",
+    send: "Send",
+    emptyState: "Hello! How can I help you?"
+  }
+};
+function resolveLabels(locale = "vi", overrides) {
+  return { ...BUILT_IN_LABELS[locale], ...overrides };
+}
+
+// src/types.ts
+var SDK_ACTIONS = {
+  SHOW_UI: "show_ui"
+};
+
+// src/components/TekoChatWidget.tsx
+import { Fragment as Fragment3, jsx as jsx7 } from "react/jsx-runtime";
+var ANCHOR_TO_ORIGIN = {
+  "bottom-right": "bottom right",
+  "bottom-left": "bottom left",
+  "top-right": "top right",
+  "top-left": "top left"
+};
+var SHOW_UI_TRANSITION_DELAY_MS = 1e3;
+var TekoChatWidget = forwardRef(
+  ({
+    appId,
+    chatBffUrl,
+    onIntent,
+    renderRightPanel,
+    renderBubble,
+    bubbleAnchor = "bottom-right",
+    onDebugEvent,
+    zIndex = 1031,
+    offsetTop = 0,
+    offsetBottom = 0,
+    miniWidth = 360,
+    miniHeight = 480,
+    primaryColor = DEFAULT_PRIMARY_COLOR,
+    layoutMode = "desktop",
+    locale = "vi",
+    labels,
+    botAvatar,
+    getAppContext
+  }, ref) => {
+    const resolvedLabels = resolveLabels(locale, labels);
+    const [chatState, setChatState] = useState5("bubble");
+    const [activeComponentKey, setActiveComponentKey] = useState5("");
+    const [showRightPanelTrigger, setShowRightPanelTrigger] = useState5(0);
+    const handleIntent = useCallback4(
+      (action, componentKey) => {
+        if (action === SDK_ACTIONS.SHOW_UI && componentKey) {
+          setActiveComponentKey(componentKey);
+          setTimeout(() => {
+            setChatState("fullscreen");
+            setShowRightPanelTrigger((n) => n + 1);
+            onIntent?.(action, componentKey);
+          }, SHOW_UI_TRANSITION_DELAY_MS);
+        } else {
+          onIntent?.(action, componentKey);
+        }
+      },
+      [onIntent]
+    );
+    const { messages, isLoading, sendMessage, sendContext } = useChatSession({
+      appId,
+      chatBffUrl,
+      onIntent: handleIntent,
+      onDebugEvent,
+      getAppContext
+    });
+    useImperativeHandle(ref, () => ({
+      sendContext,
+      sendMessage,
+      open: () => setChatState("mini"),
+      close: () => setChatState("bubble"),
+      openFullscreen: (componentKey) => {
+        setActiveComponentKey(componentKey);
+        setChatState("fullscreen");
+      },
+      closeFullscreen: () => setChatState("mini")
+    }));
+    const handleOptionClick = useCallback4(
+      (option) => sendMessage(
+        option.label,
+        option.payload
+      ),
+      [sendMessage]
+    );
+    const handleOpen = () => setChatState("mini");
+    let content;
+    if (chatState === "bubble") {
+      content = renderBubble ? /* @__PURE__ */ jsx7(Fragment3, { children: renderBubble(handleOpen) }) : /* @__PURE__ */ jsx7(
+        ChatBubble,
+        {
+          onClick: handleOpen,
+          offsetBottom,
+          zIndex
+        }
+      );
+    } else if (chatState === "mini") {
+      content = /* @__PURE__ */ jsx7(
+        ChatMiniPopup,
+        {
+          messages,
+          isLoading,
+          onSend: sendMessage,
+          onOptionClick: handleOptionClick,
+          onClose: () => setChatState("bubble"),
+          offsetBottom,
+          zIndex,
+          miniWidth,
+          miniHeight,
+          layoutMode,
+          labels: resolvedLabels,
+          botAvatar
+        }
+      );
+    } else {
+      content = /* @__PURE__ */ jsx7(
+        ChatFullscreen,
+        {
+          messages,
+          isLoading,
+          componentKey: activeComponentKey,
+          onSend: sendMessage,
+          onOptionClick: handleOptionClick,
+          onClose: () => setChatState("bubble"),
+          onMinimize: () => setChatState("mini"),
+          renderRightPanel,
+          transformOrigin: ANCHOR_TO_ORIGIN[bubbleAnchor],
+          bubbleAnchor,
+          offsetTop,
+          offsetBottom,
+          zIndex: zIndex + 9,
+          layoutMode,
+          showRightPanelTrigger,
+          labels: resolvedLabels,
+          botAvatar
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx7(ChatThemeContext.Provider, { value: { primaryColor }, children: content });
+  }
+);
+TekoChatWidget.displayName = "TekoChatWidget";
+export {
+  TekoChatWidget
+};