@waysdrop/chat 1.0.0

package/dist/index.cjs

@@ -0,0 +1,1384 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ChatWidget: () => ChatWidget,
+  clearVisitorId: () => clearVisitorId,
+  loadVisitorId: () => loadVisitorId,
+  saveVisitorId: () => saveVisitorId,
+  useChat: () => useChat,
+  useChatStore: () => useChatStore
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/ChatWidget.tsx
+var import_react5 = require("react");
+var import_css8 = require("@emotion/css");
+
+// src/lib/upload.ts
+var VISITOR_ID_KEY = "waysdrop_visitor_id";
+var saveVisitorId = (id) => {
+  localStorage.setItem(VISITOR_ID_KEY, id);
+};
+var loadVisitorId = () => {
+  return localStorage.getItem(VISITOR_ID_KEY);
+};
+var clearVisitorId = () => {
+  localStorage.removeItem(VISITOR_ID_KEY);
+};
+var uploadFile = async (file, config) => {
+  var _a, _b;
+  const formData = new FormData();
+  formData.append("files", file);
+  const headers = {};
+  if (config.token) headers["Authorization"] = `Bearer ${config.token}`;
+  const res = await fetch(`${config.apiUrl}/file/bulk-upload`, {
+    method: "POST",
+    headers,
+    body: formData
+  });
+  if (!res.ok) {
+    throw new Error("File upload failed");
+  }
+  const json = await res.json();
+  if (!json.success || !((_b = (_a = json.data) == null ? void 0 : _a.urls) == null ? void 0 : _b.length)) {
+    throw new Error(json.message || "File upload failed");
+  }
+  const first = json.data.urls[0];
+  if (typeof first !== "string") {
+    throw new Error((first == null ? void 0 : first.error) || "File upload failed");
+  }
+  return first;
+};
+
+// src/hooks/useChat.ts
+var import_react = require("react");
+
+// src/lib/socket.ts
+var import_socket = require("socket.io-client");
+var socket = null;
+var getSocket = (config) => {
+  if (socket) return socket;
+  const { serverUrl, token, visitorId } = config;
+  socket = (0, import_socket.io)(serverUrl, {
+    transports: ["websocket", "polling"],
+    auth: __spreadValues(__spreadValues({}, token ? { token } : {}), visitorId ? { visitorId } : {}),
+    autoConnect: false
+  });
+  return socket;
+};
+var destroySocket = () => {
+  if (socket) {
+    socket.disconnect();
+    socket = null;
+  }
+};
+
+// src/store/chatStore.ts
+var import_zustand = require("zustand");
+var initialState = {
+  status: "idle",
+  role: null,
+  visitorId: null,
+  chatId: null,
+  messages: [],
+  error: null,
+  visitorInfo: null
+};
+var useChatStore = (0, import_zustand.create)((set) => __spreadProps(__spreadValues({}, initialState), {
+  setStatus: (status) => set({ status }),
+  setRole: (role) => set({ role }),
+  setVisitorId: (id) => set({ visitorId: id }),
+  setChatId: (id) => set({ chatId: id }),
+  addMessage: (message) => set((state) => ({
+    messages: [...state.messages, message]
+  })),
+  setError: (error) => set({ error }),
+  setVisitorInfo: (info) => set({ visitorInfo: info }),
+  reset: () => set(initialState)
+}));
+
+// src/hooks/useChat.ts
+var useChat = (config) => {
+  const {
+    status,
+    role,
+    visitorId,
+    chatId,
+    messages,
+    error,
+    visitorInfo,
+    setStatus,
+    setRole,
+    setVisitorId,
+    setChatId,
+    addMessage,
+    setError,
+    setVisitorInfo,
+    reset
+  } = useChatStore();
+  (0, import_react.useEffect)(() => {
+    const socket2 = getSocket(config);
+    setStatus("connecting");
+    socket2.connect();
+    socket2.on("connected", (payload) => {
+      setStatus("connected");
+      setRole(payload.role);
+      if (payload.role === "VISITOR") {
+        saveVisitorId(payload.visitorId);
+        setVisitorId(payload.visitorId);
+      }
+    });
+    socket2.on("support-message-sent", (payload) => {
+      setChatId(payload.chatId);
+      addMessage(payload.message);
+    });
+    socket2.on("support-new-message", (payload) => {
+      setChatId(payload.chatId);
+      addMessage(payload.message);
+    });
+    socket2.on("error", (err) => {
+      setError(err);
+      setStatus("error");
+    });
+    return () => {
+      destroySocket();
+      reset();
+    };
+  }, []);
+  const sendMessage = (0, import_react.useCallback)(
+    (content, info) => {
+      var _a, _b;
+      const socket2 = getSocket(config);
+      const dto = __spreadValues({
+        content,
+        externalId: `msg-${Date.now()}`
+      }, (info != null ? info : visitorInfo) ? {
+        email: (info != null ? info : visitorInfo).email,
+        name: (_a = info != null ? info : visitorInfo) == null ? void 0 : _a.name,
+        phone: (_b = info != null ? info : visitorInfo) == null ? void 0 : _b.phone
+      } : {});
+      socket2.emit("support-send-message", dto);
+    },
+    [config, visitorInfo]
+  );
+  const sendFile = (0, import_react.useCallback)(
+    async (file, info) => {
+      var _a, _b;
+      const url = await uploadFile(file, config);
+      const socket2 = getSocket(config);
+      const dto = __spreadValues({
+        file: url,
+        externalId: `file-${Date.now()}`
+      }, (info != null ? info : visitorInfo) ? {
+        email: (info != null ? info : visitorInfo).email,
+        name: (_a = info != null ? info : visitorInfo) == null ? void 0 : _a.name,
+        phone: (_b = info != null ? info : visitorInfo) == null ? void 0 : _b.phone
+      } : {});
+      socket2.emit("support-send-message", dto);
+    },
+    [config, visitorInfo]
+  );
+  return {
+    status,
+    role,
+    visitorId,
+    chatId,
+    messages,
+    error,
+    visitorInfo,
+    setVisitorInfo,
+    sendMessage,
+    sendFile
+  };
+};
+
+// src/components/FloatingButton.tsx
+var import_react2 = require("react");
+var import_css = require("@emotion/css");
+var import_jsx_runtime = require("react/jsx-runtime");
+var BUTTON_SIZE = 56;
+var FloatingButton = ({ isOpen, onToggle }) => {
+  const [isMobile, setIsMobile] = (0, import_react2.useState)(false);
+  (0, import_react2.useEffect)(() => {
+    const check = () => setIsMobile(window.innerWidth <= 480);
+    check();
+    window.addEventListener("resize", check);
+    return () => window.removeEventListener("resize", check);
+  }, []);
+  if (isMobile && isOpen) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        className: styles.mobileCloseBtn,
+        onClick: onToggle,
+        type: "button",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "svg",
+          {
+            width: "22",
+            height: "22",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2.5",
+            strokeLinecap: "round",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+            ]
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { className: styles.btn, onClick: onToggle, type: "button", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.icon(!isOpen), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M20 2H4a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.icon(isOpen), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "svg",
+      {
+        width: "20",
+        height: "20",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2.5",
+        strokeLinecap: "round",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+        ]
+      }
+    ) })
+  ] });
+};
+var styles = {
+  btn: import_css.css`
+    position: fixed;
+    right: 30px;
+    bottom: 20px;
+    width: ${BUTTON_SIZE}px;
+    height: ${BUTTON_SIZE}px;
+    border-radius: 50%;
+    background: var(--wds-primary);
+    color: #fff;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
+    z-index: 999999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+    -webkit-user-select: none;
+    &:hover {
+      opacity: 0.92;
+    }
+  `,
+  mobileCloseBtn: import_css.css`
+    position: fixed;
+    top: 16px;
+    right: 20px;
+    width: ${BUTTON_SIZE}px;
+    height: ${BUTTON_SIZE}px;
+    border-radius: 50%;
+    background: var(--wds-primary);
+    color: #fff;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
+    z-index: 999999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  `,
+  icon: (visible) => import_css.css`
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition:
+      opacity 0.2s,
+      transform 0.2s;
+    opacity: ${visible ? 1 : 0};
+    transform: ${visible ? "scale(1)" : "scale(0.6) rotate(30deg)"};
+    pointer-events: ${visible ? "auto" : "none"};
+  `
+};
+
+// src/components/ChatPanel.tsx
+var import_css2 = require("@emotion/css");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ChatPanel = ({ isOpen, isExpanded, children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { "data-wds-root": true, className: styles2.panel(isOpen, isExpanded), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: styles2.inner, children }) });
+};
+var styles2 = {
+  panel: (isOpen, isExpanded) => import_css2.css`
+    position: fixed;
+    bottom: 86px;
+    z-index: 999998;
+    transition: opacity 0.2s, transform 0.25s cubic-bezier(0.34, 1.2, 0.64, 1);
+    opacity: ${isOpen ? 1 : 0};
+    pointer-events: ${isOpen ? "auto" : "none"};
+
+    ${isExpanded ? `
+      width: min(760px, calc(100vw - 32px));
+      height: min(780px, calc(100vh - 120px));
+      border-radius: 20px;
+      box-shadow: 0 20px 60px rgba(0,0,0,0.2), 0 4px 16px rgba(0,0,0,0.1);
+      left: 50%;
+      right: auto;
+      translate: -50% 0;
+      transform: ${isOpen ? "scale(1)" : "scale(0.95)"};
+      transform-origin: bottom center;
+    ` : `
+      width: 400px;
+      height: 620px;
+      border-radius: 20px;
+      box-shadow: 0 12px 48px rgba(0,0,0,0.16), 0 2px 8px rgba(0,0,0,0.08);
+      right: 22px;
+      transform: ${isOpen ? "translateY(0) scale(1)" : "translateY(16px) scale(0.97)"};
+    `}
+
+    overflow: hidden;
+
+    @media (max-width: 480px) {
+      top: 0 !important;
+      left: 0 !important;
+      right: 0 !important;
+      bottom: 0 !important;
+      width: 100% !important;
+      height: 100% !important;
+      border-radius: 0 !important;
+      translate: none !important;
+    }
+  `,
+  inner: import_css2.css`
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    border-radius: inherit;
+  `
+};
+
+// src/components/HomeScreen.tsx
+var import_css3 = require("@emotion/css");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var HomeScreen = ({
+  onStartChat,
+  onContinueChat,
+  hasHistory,
+  onExpand,
+  isExpanded
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: styles3.wrapper, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: styles3.topBar, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: styles3.logoMark, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "img",
+        {
+          src: "https://cdn.waysdrop.com/bulk/horizon_20260411202129966_d25edae2.png",
+          alt: "Waysdrop",
+          style: { width: "100%", height: "100%", objectFit: "contain" }
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: styles3.expandBtn, onClick: onExpand, children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "4 14 10 14 10 20" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "20 10 14 10 14 4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "10", y1: "14", x2: "3", y2: "21" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "21", y1: "3", x2: "14", y2: "10" })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "15 3 21 3 21 9" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "9 21 3 21 3 15" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: styles3.hero, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { className: styles3.heroTitle, children: "Hi there! \u{1F44B}" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: styles3.heroSub, children: "We're here to help. Ask us anything or share your feedback." })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: styles3.section, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: styles3.sectionLabel, children: "Conversations" }),
+      hasHistory ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { className: styles3.conversationCard, onClick: onContinueChat, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: styles3.cardIcon, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime3.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" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: styles3.cardBody, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles3.cardTitle, children: "Continue conversation" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles3.cardSub, children: "Tap to resume your last chat" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "9 18 15 12 9 6" }) })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: styles3.emptyHistory, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", style: { opacity: 0.25 }, children: /* @__PURE__ */ (0, import_jsx_runtime3.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" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: "No previous conversations" })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: styles3.footer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { className: styles3.startBtn, onClick: onStartChat, children: [
+        "New conversation",
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "9 18 15 12 9 6" }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: styles3.poweredBy, children: "Powered by Waysdrop" })
+    ] })
+  ] });
+};
+var styles3 = {
+  wrapper: import_css3.css`
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: var(--wds-bg);
+    text-align: left;
+  `,
+  topBar: import_css3.css`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 18px 18px 0;
+    flex-shrink: 0;
+  `,
+  logoMark: import_css3.css`
+    width: 48px;
+    height: 48px;
+    flex-shrink: 0;
+  `,
+  expandBtn: import_css3.css`
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--wds-muted);
+    padding: 8px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: color 0.15s, background 0.15s;
+    &:hover {
+      color: var(--wds-fg);
+      background: var(--wds-muted-bg);
+    }
+    @media (max-width: 480px) {
+      display: none;
+    }
+  `,
+  hero: import_css3.css`
+    padding: 20px 20px 16px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+    flex-shrink: 0;
+  `,
+  heroTitle: import_css3.css`
+    font-size: 1.375rem;
+    font-weight: 700;
+    color: var(--wds-fg);
+    margin: 0;
+    line-height: 1.2;
+    text-align: left;
+  `,
+  heroSub: import_css3.css`
+    font-size: 0.9375rem;
+    color: var(--wds-muted);
+    margin: 0;
+    line-height: 1.6;
+    text-align: left;
+  `,
+  section: import_css3.css`
+    flex: 1;
+    padding: 4px 18px 0;
+    overflow-y: auto;
+  `,
+  sectionLabel: import_css3.css`
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.07em;
+    text-transform: uppercase;
+    color: var(--wds-muted);
+    margin: 0 0 12px 2px;
+    text-align: left;
+  `,
+  conversationCard: import_css3.css`
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    width: 100%;
+    padding: 14px 16px;
+    background: var(--wds-muted-bg);
+    border: 1px solid var(--wds-border);
+    border-radius: 14px;
+    cursor: pointer;
+    text-align: left;
+    transition: border-color 0.15s, background 0.15s;
+    color: var(--wds-fg);
+    &:hover {
+      border-color: var(--wds-primary);
+      background: var(--wds-primary-soft);
+    }
+  `,
+  cardIcon: import_css3.css`
+    width: 38px;
+    height: 38px;
+    border-radius: 10px;
+    background: var(--wds-primary-soft);
+    color: var(--wds-primary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  `,
+  cardBody: import_css3.css`
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+  `,
+  cardTitle: import_css3.css`
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--wds-fg);
+    text-align: left;
+  `,
+  cardSub: import_css3.css`
+    font-size: 12px;
+    color: var(--wds-muted);
+    text-align: left;
+  `,
+  emptyHistory: import_css3.css`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    padding: 40px 0;
+    color: var(--wds-muted);
+    font-size: 12px;
+  `,
+  footer: import_css3.css`
+    padding: 18px 18px 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    align-items: center;
+    flex-shrink: 0;
+    border-top: 1px solid var(--wds-border);
+  `,
+  startBtn: import_css3.css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    width: 100%;
+    padding: 13px 16px;
+    background: var(--wds-primary);
+    color: #fff;
+    border: none;
+    border-radius: 14px;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: opacity 0.15s;
+    font-family: inherit;
+    &:hover { opacity: 0.88; }
+  `,
+  poweredBy: import_css3.css`
+    font-size: 11px;
+    color: var(--wds-muted);
+    margin: 0;
+    opacity: 0.7;
+  `
+};
+
+// src/components/ChatScreen.tsx
+var import_react4 = require("react");
+var import_css7 = require("@emotion/css");
+
+// src/components/MessageBubble.tsx
+var import_css5 = require("@emotion/css");
+
+// src/components/MarkdownRenderer.tsx
+var import_react_markdown = __toESM(require("react-markdown"), 1);
+var import_css4 = require("@emotion/css");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var markdownStyle = import_css4.css`
+  font-size: 0.875rem;
+  line-height: 1.6;
+  color: inherit;
+  text-align: left;
+
+  p {
+    margin: 0 0 0.6rem 0;
+    text-align: left;
+  }
+  p:last-child {
+    margin-bottom: 0;
+  }
+  strong { font-weight: 600; }
+  em { font-style: italic; }
+
+  ul, ol {
+    margin: 0.4rem 0 0.6rem 0;
+    padding-left: 1.4rem;
+    text-align: left;
+  }
+  ul { list-style-type: disc; }
+  ol { list-style-type: decimal; }
+  li {
+    margin-bottom: 0.3rem;
+  }
+  li > ul, li > ol {
+    margin: 0.25rem 0 0.25rem 0;
+    padding-left: 1.2rem;
+  }
+  li:last-child { margin-bottom: 0; }
+
+  hr {
+    border: none;
+    border-top: 1px solid rgba(255, 255, 255, 0.25);
+    margin: 0.75rem 0;
+  }
+
+  code {
+    font-family: monospace;
+    font-size: 0.8rem;
+    background: rgba(255,255,255,0.15);
+    border-radius: 4px;
+    padding: 0.1rem 0.35rem;
+  }
+  pre {
+    background: rgba(255,255,255,0.1);
+    border-radius: 8px;
+    padding: 0.75rem 1rem;
+    overflow-x: auto;
+    margin: 0.5rem 0;
+  }
+  pre code {
+    background: none;
+    padding: 0;
+    font-size: 0.78rem;
+  }
+  blockquote {
+    border-left: 3px solid rgba(255,255,255,0.25);
+    margin: 0.5rem 0;
+    padding-left: 0.75rem;
+    opacity: 0.8;
+  }
+  a {
+    color: rgba(255,255,255,0.85);
+    text-decoration: underline;
+  }
+  h1, h2, h3 {
+    font-weight: 600;
+    margin: 0.6rem 0 0.3rem;
+    line-height: 1.3;
+    text-align: left;
+  }
+  h1 { font-size: 1rem; }
+  h2 { font-size: 0.95rem; }
+  h3 { font-size: 0.875rem; }
+`;
+var MarkdownRenderer = ({ content }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: markdownStyle, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_markdown.default, { children: content }) });
+};
+
+// src/components/MessageBubble.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function formatTime(iso) {
+  return new Date(iso).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+}
+var MessageBubble = ({ message }) => {
+  const isCustomer = message.direction === "OUTBOUND";
+  const isBot = message.senderRole === "BOT";
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: styles4.row(isCustomer), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: styles4.group(isCustomer), children: [
+    isBot && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: styles4.botLabel, children: "Ways AI" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: styles4.bubble(isCustomer), children: [
+      message.file && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("a", { href: message.file, target: "_blank", rel: "noreferrer", className: styles4.fileLink, children: "\u{1F4CE} View attachment" }),
+      message.content && (isBot ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MarkdownRenderer, { content: message.content }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: styles4.text, children: message.content }))
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: styles4.time, children: formatTime(message.createdAt) })
+  ] }) });
+};
+var styles4 = {
+  row: (isCustomer) => import_css5.css`
+    display: flex;
+    width: 100%;
+    justify-content: ${isCustomer ? "flex-start" : "flex-end"};
+  `,
+  group: (isCustomer) => import_css5.css`
+    display: flex;
+    flex-direction: column;
+    max-width: 78%;
+    gap: 4px;
+    align-items: ${isCustomer ? "flex-start" : "flex-end"};
+  `,
+  botLabel: import_css5.css`
+    font-size: 10px;
+    color: var(--wds-muted);
+    padding: 0 4px;
+    font-weight: 500;
+    letter-spacing: 0.03em;
+  `,
+  bubble: (isCustomer) => import_css5.css`
+    border-radius: 18px;
+    padding: 10px 14px;
+    word-break: break-word;
+    text-align: left;
+    border-top-left-radius: ${isCustomer ? "4px" : "18px"};
+    border-top-right-radius: ${isCustomer ? "18px" : "4px"};
+    background: ${isCustomer ? "var(--wds-muted-bg)" : "var(--wds-primary)"};
+    color: ${isCustomer ? "var(--wds-fg)" : "#fff"};
+  `,
+  text: import_css5.css`
+    font-size: 0.875rem;
+    line-height: 1.5;
+    margin: 0;
+    white-space: pre-wrap;
+    text-align: left;
+  `,
+  fileLink: import_css5.css`
+    font-size: 0.875rem;
+    color: inherit;
+    text-decoration: underline;
+    display: block;
+    text-align: left;
+  `,
+  time: import_css5.css`
+    font-size: 10px;
+    color: var(--wds-muted);
+    padding: 0 4px;
+  `
+};
+
+// src/components/ChatInput.tsx
+var import_react3 = require("react");
+var import_css6 = require("@emotion/css");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var spin = import_css6.keyframes`
+  to { transform: rotate(360deg); }
+`;
+var pulse = import_css6.keyframes`
+  0%, 100% { opacity: 0.4; transform: scaleY(0.6); }
+  50% { opacity: 1; transform: scaleY(1); }
+`;
+var ChatInput = ({ onSendText, onSendFile, disabled, isThinking }) => {
+  const [value, setValue] = (0, import_react3.useState)("");
+  const [uploading, setUploading] = (0, import_react3.useState)(false);
+  const [pendingFile, setPendingFile] = (0, import_react3.useState)(null);
+  const [pendingPreview, setPendingPreview] = (0, import_react3.useState)(null);
+  const textareaRef = (0, import_react3.useRef)(null);
+  const fileInputRef = (0, import_react3.useRef)(null);
+  const handleSend = (0, import_react3.useCallback)(() => {
+    var _a;
+    const trimmed = value.trim();
+    if (!trimmed && !pendingFile || disabled || uploading) return;
+    if (pendingFile) {
+      setUploading(true);
+      onSendFile(pendingFile).finally(() => {
+        setUploading(false);
+        setPendingFile(null);
+        setPendingPreview(null);
+      });
+    }
+    if (trimmed) {
+      onSendText(trimmed);
+      setValue("");
+    }
+    (_a = textareaRef.current) == null ? void 0 : _a.focus();
+  }, [value, pendingFile, disabled, uploading, onSendText, onSendFile]);
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+  const handleFileChange = (e) => {
+    var _a;
+    const file = (_a = e.target.files) == null ? void 0 : _a[0];
+    if (!file) return;
+    if (!file.type.startsWith("image/")) return;
+    setPendingFile(file);
+    const reader = new FileReader();
+    reader.onload = (ev) => {
+      var _a2;
+      return setPendingPreview((_a2 = ev.target) == null ? void 0 : _a2.result);
+    };
+    reader.readAsDataURL(file);
+    e.target.value = "";
+  };
+  const canSend = (value.trim() || pendingFile) && !disabled && !uploading;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: styles5.wrapper, children: [
+    isThinking && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: styles5.thinkingBar, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: styles5.thinkingDots, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: styles5.dot(0) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: styles5.dot(1) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: styles5.dot(2) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: styles5.thinkingLabel, children: "Ways AI is typing..." })
+    ] }),
+    pendingPreview && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: styles5.imagePreview, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("img", { src: pendingPreview, alt: "attachment", className: styles5.previewImg }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { className: styles5.removeFile, onClick: () => {
+        setPendingFile(null);
+        setPendingPreview(null);
+      }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: styles5.inputRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "button",
+        {
+          className: styles5.attachBtn,
+          onClick: () => {
+            var _a;
+            return (_a = fileInputRef.current) == null ? void 0 : _a.click();
+          },
+          disabled: disabled || uploading,
+          type: "button",
+          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("rect", { x: "3", y: "3", width: "18", height: "18", rx: "3" }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polyline", { points: "21 15 16 10 5 21" })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "input",
+        {
+          ref: fileInputRef,
+          type: "file",
+          accept: "image/*",
+          className: styles5.hiddenInput,
+          onChange: handleFileChange
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "textarea",
+        {
+          ref: textareaRef,
+          className: styles5.textarea,
+          value,
+          onChange: (e) => setValue(e.target.value),
+          onKeyDown: handleKeyDown,
+          placeholder: "Type a message...",
+          disabled: disabled || uploading,
+          rows: 1
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { className: styles5.sendBtn, onClick: handleSend, disabled: !canSend, type: "button", children: uploading ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: styles5.spinner }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "12", y1: "19", x2: "12", y2: "5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polyline", { points: "5 12 12 5 19 12" })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: styles5.hint, children: "Enter to send \xB7 Shift+Enter for new line" })
+  ] });
+};
+var styles5 = {
+  wrapper: import_css6.css`
+    padding: 8px 12px 10px;
+    border-top: 1px solid var(--wds-border);
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    background: var(--wds-bg);
+    flex-shrink: 0;
+  `,
+  thinkingBar: import_css6.css`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 2px 2px;
+  `,
+  thinkingDots: import_css6.css`
+    display: flex;
+    align-items: center;
+    gap: 3px;
+  `,
+  dot: (i) => import_css6.css`
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background: var(--wds-primary);
+    animation: ${pulse} 1.2s ease-in-out infinite;
+    animation-delay: ${i * 0.18}s;
+    display: inline-block;
+  `,
+  thinkingLabel: import_css6.css`
+    font-size: 11px;
+    color: var(--wds-muted);
+  `,
+  imagePreview: import_css6.css`
+    position: relative;
+    width: fit-content;
+    margin: 0 2px;
+  `,
+  previewImg: import_css6.css`
+    width: 72px;
+    height: 72px;
+    object-fit: cover;
+    border-radius: 10px;
+    border: 1px solid var(--wds-border);
+    display: block;
+  `,
+  removeFile: import_css6.css`
+    position: absolute;
+    top: -6px;
+    right: -6px;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: var(--wds-fg);
+    color: var(--wds-bg);
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+  `,
+  inputRow: import_css6.css`
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    background: var(--wds-muted-bg);
+    border: 1px solid var(--wds-border);
+    border-radius: 14px;
+    padding: 4px 4px 4px 8px;
+    transition: border-color 0.15s;
+    &:focus-within {
+      border-color: var(--wds-primary);
+      background: var(--wds-bg);
+    }
+  `,
+  attachBtn: import_css6.css`
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--wds-muted);
+    padding: 5px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    transition: color 0.15s;
+    &:hover:not(:disabled) {
+      color: var(--wds-primary);
+    }
+    &:disabled {
+      opacity: 0.35;
+      cursor: not-allowed;
+    }
+  `,
+  hiddenInput: import_css6.css`
+    display: none;
+  `,
+  textarea: import_css6.css`
+    flex: 1;
+    resize: none;
+    border: none;
+    padding: 6px 0;
+    font-size: 0.875rem;
+    font-family: inherit;
+    line-height: 1.5;
+    background: transparent;
+    color: var(--wds-fg);
+    outline: none;
+    max-height: 120px;
+    overflow-y: auto;
+    &::placeholder { color: var(--wds-muted); }
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  `,
+  sendBtn: import_css6.css`
+    background: var(--wds-primary);
+    border: none;
+    border-radius: 10px;
+    width: 34px;
+    height: 34px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: #fff;
+    flex-shrink: 0;
+    transition: opacity 0.15s;
+    &:disabled {
+      opacity: 0.35;
+      cursor: not-allowed;
+    }
+    &:hover:not(:disabled) { opacity: 0.85; }
+  `,
+  spinner: import_css6.css`
+    width: 14px;
+    height: 14px;
+    border: 2px solid rgba(255,255,255,0.3);
+    border-top-color: #fff;
+    border-radius: 50%;
+    animation: ${spin} 0.7s linear infinite;
+    display: block;
+  `,
+  hint: import_css6.css`
+    font-size: 10px;
+    color: var(--wds-muted);
+    margin: 0;
+    text-align: center;
+    opacity: 0.7;
+    text-align: center;
+  `
+};
+
+// src/components/ChatScreen.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ChatScreen = ({
+  messages,
+  onSendText,
+  onSendFile,
+  onBack,
+  onExpand,
+  isExpanded,
+  status,
+  error
+}) => {
+  const bottomRef = (0, import_react4.useRef)(null);
+  const scrollRef = (0, import_react4.useRef)(null);
+  const connected = status === "connected";
+  const [showScrollBtn, setShowScrollBtn] = (0, import_react4.useState)(false);
+  const lastMsg = messages[messages.length - 1];
+  const isThinking = connected && (lastMsg == null ? void 0 : lastMsg.direction) === "INBOUND";
+  (0, import_react4.useEffect)(() => {
+    var _a;
+    (_a = bottomRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+  const handleScroll = () => {
+    const el = scrollRef.current;
+    if (!el) return;
+    setShowScrollBtn(el.scrollHeight - el.scrollTop - el.clientHeight > 80);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: styles6.wrapper, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: styles6.header, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: styles6.iconBtn, onClick: onBack, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "15 18 9 12 15 6" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: styles6.headerCenter, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: styles6.headerTitle, children: "Support" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: styles6.statusDot(connected) }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: styles6.statusLabel, children: connected ? "Online" : "Connecting..." })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: styles6.expandBtn, onClick: onExpand, children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "4 14 10 14 10 20" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "20 10 14 10 14 4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "10", y1: "14", x2: "3", y2: "21" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "21", y1: "3", x2: "14", y2: "10" })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "15 3 21 3 21 9" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "9 21 3 21 3 15" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: styles6.messagesWrap, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: styles6.messages, ref: scrollRef, onScroll: handleScroll, children: [
+        error && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: styles6.errorBanner, children: error.message }),
+        messages.length === 0 && connected && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: styles6.emptyState, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: "Send a message to start the conversation." }) }),
+        messages.map((msg) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MessageBubble, { message: msg }, msg.id)),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: bottomRef })
+      ] }),
+      showScrollBtn && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: styles6.scrollBtn, onClick: () => {
+        var _a;
+        return (_a = bottomRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
+      }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "6 9 12 15 18 9" }) }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      ChatInput,
+      {
+        onSendText,
+        onSendFile,
+        disabled: !connected,
+        isThinking
+      }
+    )
+  ] });
+};
+var pulse2 = import_css7.keyframes`
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+`;
+var styles6 = {
+  wrapper: import_css7.css`
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: var(--wds-bg);
+  `,
+  header: import_css7.css`
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 14px;
+    border-bottom: 1px solid var(--wds-border);
+    flex-shrink: 0;
+  `,
+  headerCenter: import_css7.css`
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  `,
+  headerTitle: import_css7.css`
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--wds-fg);
+  `,
+  statusDot: (connected) => import_css7.css`
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    flex-shrink: 0;
+    background: ${connected ? "#22c55e" : "#f59e0b"};
+    animation: ${connected ? "none" : `${pulse2} 1.2s ease-in-out infinite`};
+  `,
+  statusLabel: import_css7.css`
+    font-size: 11px;
+    color: var(--wds-muted);
+  `,
+  iconBtn: import_css7.css`
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--wds-muted);
+    padding: 6px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    transition: color 0.15s, background 0.15s;
+    &:hover {
+      color: var(--wds-fg);
+      background: var(--wds-muted-bg);
+    }
+  `,
+  expandBtn: import_css7.css`
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--wds-muted);
+    padding: 6px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    transition: color 0.15s, background 0.15s;
+    &:hover {
+      color: var(--wds-fg);
+      background: var(--wds-muted-bg);
+    }
+    @media (max-width: 480px) {
+      display: none;
+    }
+  `,
+  messagesWrap: import_css7.css`
+    flex: 1;
+    position: relative;
+    overflow: hidden;
+  `,
+  messages: import_css7.css`
+    position: absolute;
+    inset: 0;
+    overflow-y: auto;
+    padding: 16px 14px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  `,
+  errorBanner: import_css7.css`
+    background: oklch(0.9705 0.0129 17.04);
+    color: oklch(0.5054 0.1905 27.51);
+    border: 1px solid oklch(0.8845 0.0592 18.27);
+    border-radius: 8px;
+    padding: 8px 12px;
+    font-size: 12px;
+    text-align: center;
+  `,
+  emptyState: import_css7.css`
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--wds-muted);
+    font-size: 13px;
+    text-align: center;
+    padding: 40px 20px;
+  `,
+  scrollBtn: import_css7.css`
+    position: absolute;
+    bottom: 12px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background: var(--wds-bg);
+    border: 1px solid var(--wds-border);
+    color: var(--wds-muted);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
+    transition: color 0.15s, border-color 0.15s;
+    &:hover {
+      color: var(--wds-primary);
+      border-color: var(--wds-primary);
+    }
+  `
+};
+
+// src/components/ChatWidget.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var ChatWidget = ({ config }) => {
+  var _a, _b;
+  const [isOpen, setIsOpen] = (0, import_react5.useState)(false);
+  const [isExpanded, setIsExpanded] = (0, import_react5.useState)(false);
+  const [view, setView] = (0, import_react5.useState)("home");
+  const reset = useChatStore((s) => s.reset);
+  const resolvedConfig = __spreadProps(__spreadValues({}, config), {
+    visitorId: (_b = (_a = config.visitorId) != null ? _a : loadVisitorId()) != null ? _b : void 0
+  });
+  const hasHistory = !!resolvedConfig.visitorId;
+  const { status, messages, error, sendMessage, sendFile } = useChat(resolvedConfig);
+  const handleNewConversation = () => {
+    reset();
+    setView("chat");
+  };
+  (0, import_react5.useEffect)(() => {
+    const isMobile = window.innerWidth <= 480;
+    if (isMobile) {
+      document.body.style.overflow = isOpen ? "hidden" : "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isOpen]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      FloatingButton,
+      {
+        isOpen,
+        onToggle: () => setIsOpen((p) => !p)
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      ChatPanel,
+      {
+        isOpen,
+        isExpanded,
+        children: view === "home" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          HomeScreen,
+          {
+            onStartChat: handleNewConversation,
+            onContinueChat: () => setView("chat"),
+            hasHistory,
+            onExpand: () => setIsExpanded((p) => !p),
+            isExpanded
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          ChatScreen,
+          {
+            messages,
+            onSendText: sendMessage,
+            onSendFile: sendFile,
+            onBack: () => setView("home"),
+            onExpand: () => setIsExpanded((p) => !p),
+            isExpanded,
+            status,
+            error
+          }
+        )
+      }
+    )
+  ] });
+};
+import_css8.injectGlobal`
+  :root {
+    --wds-primary: oklch(0.5811 0.2268 259.15);
+    --wds-primary-soft: oklch(0.5811 0.2268 259.15 / 0.12);
+    --wds-primary-border: oklch(0.7695 0.1177 255.22 / 0.4);
+    --wds-bg: oklch(1 0 0);
+    --wds-fg: oklch(0.145 0 0);
+    --wds-muted: oklch(0.556 0 0);
+    --wds-muted-bg: oklch(0.97 0 0);
+    --wds-border: oklch(0.922 0 0);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --wds-bg: oklch(0.145 0 0);
+      --wds-fg: oklch(0.985 0 0);
+      --wds-muted: oklch(0.708 0 0);
+      --wds-muted-bg: oklch(0.205 0 0);
+      --wds-border: oklch(1 0 0 / 10%);
+      --wds-primary-soft: oklch(0.5811 0.2268 259.15 / 0.15);
+    }
+  }
+
+  [data-wds-root] * {
+    box-sizing: border-box;
+    text-align: left;
+  }
+`;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ChatWidget,
+  clearVisitorId,
+  loadVisitorId,
+  saveVisitorId,
+  useChat,
+  useChatStore
+});
+//# sourceMappingURL=index.cjs.map