@jokkoo/sdk-react 0.1.0

package/dist/index.js

@@ -0,0 +1,2772 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  ConversationScreen: () => ConversationScreen,
+  FloatingButton: () => FloatingButton,
+  JokkooButton: () => FloatingButton,
+  JokkooProvider: () => JokkooProvider,
+  JokkooWidget: () => JokkooWidget,
+  NEW_CONVERSATION_ID: () => import_sdk_web3.NEW_CONVERSATION_ID,
+  RequestListScreen: () => RequestListScreen,
+  WidgetPanel: () => WidgetPanel,
+  defaultTheme: () => defaultTheme,
+  jokkooQueryKeys: () => jokkooQueryKeys,
+  mergeTheme: () => mergeTheme,
+  themeToCssVars: () => themeToCssVars,
+  useConversations: () => useConversations,
+  useFileUpload: () => useFileUpload,
+  useJokkooContext: () => useJokkooContext,
+  useMessages: () => useMessages,
+  useRealtimeStatus: () => useRealtimeStatus,
+  useSendMessage: () => useSendMessage,
+  useUnreadCount: () => useUnreadCount,
+  useVoiceRecorder: () => useVoiceRecorder
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/context/JokkooProvider.tsx
+var import_react_query = require("@tanstack/react-query");
+var import_sdk_web3 = require("@jokkoo/sdk-web");
+var import_react2 = require("react");
+
+// src/hooks/useGlobalRealtimeListener.ts
+var import_react = require("react");
+var import_sdk_web2 = require("@jokkoo/sdk-web");
+
+// src/lib/realtime-cache-utils.ts
+var import_sdk_web = require("@jokkoo/sdk-web");
+
+// src/hooks/query-keys.ts
+var jokkooQueryKeys = {
+  conversations: ["jokkoo", "conversations"],
+  conversationPolicies: ["jokkoo", "conversation-policies"],
+  messages: (conversationId) => ["jokkoo", "conversations", conversationId, "messages"]
+};
+
+// src/lib/message-cache.ts
+var DEFAULT_PAGE_SIZE = 50;
+function createMessagesCacheWithMessage(message, pageSize = DEFAULT_PAGE_SIZE) {
+  return {
+    pages: [
+      {
+        data: [message],
+        total: 1,
+        limit: pageSize,
+        offset: 0
+      }
+    ],
+    pageParams: ["latest"]
+  };
+}
+function prependMessageToMessagesCache(data, message) {
+  if (!data || data.pages.length === 0) {
+    return createMessagesCacheWithMessage(message);
+  }
+  const alreadyExists = data.pages.some(
+    (page) => page.data.some((item) => item.id === message.id)
+  );
+  if (alreadyExists) {
+    return data;
+  }
+  const pages = [...data.pages];
+  const firstPage = pages[0];
+  if (!firstPage) {
+    return createMessagesCacheWithMessage(message);
+  }
+  pages[0] = {
+    ...firstPage,
+    data: [message, ...firstPage.data],
+    total: firstPage.total + 1
+  };
+  return {
+    ...data,
+    pages
+  };
+}
+
+// src/lib/realtime-cache-utils.ts
+function sortConversationsByUpdatedAt(conversations) {
+  return [...conversations].sort(
+    (a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
+  );
+}
+function prependConversationToListCache(queryClient, conversation) {
+  queryClient.setQueryData(
+    jokkooQueryKeys.conversations,
+    (current) => {
+      if (!current || current.pages.length === 0) {
+        return {
+          pages: [
+            {
+              data: [conversation],
+              total: 1,
+              limit: 20,
+              offset: 0
+            }
+          ],
+          pageParams: [0]
+        };
+      }
+      const firstPage = current.pages[0];
+      if (!firstPage) {
+        return current;
+      }
+      const withoutDuplicate = firstPage.data.filter((item) => item.id !== conversation.id);
+      const nextData = sortConversationsByUpdatedAt([conversation, ...withoutDuplicate]);
+      return {
+        ...current,
+        pages: [
+          {
+            ...firstPage,
+            data: nextData,
+            total: withoutDuplicate.length === firstPage.data.length ? firstPage.total + 1 : firstPage.total
+          },
+          ...current.pages.slice(1)
+        ]
+      };
+    }
+  );
+}
+function upsertConversationInListCache(queryClient, conversation) {
+  queryClient.setQueryData(
+    jokkooQueryKeys.conversations,
+    (current) => {
+      if (!current || current.pages.length === 0) {
+        return current;
+      }
+      let found = false;
+      const pages = current.pages.map((page) => {
+        const nextData = page.data.map((item) => {
+          if (item.id !== conversation.id) {
+            return item;
+          }
+          found = true;
+          return {
+            ...item,
+            ...conversation,
+            assignedAgentName: conversation.assignedAgentName ?? item.assignedAgentName ?? null
+          };
+        });
+        return {
+          ...page,
+          data: sortConversationsByUpdatedAt(nextData)
+        };
+      });
+      if (!found) {
+        return current;
+      }
+      return {
+        ...current,
+        pages
+      };
+    }
+  );
+}
+function updateConversationStatusInListCache(queryClient, conversationId, status) {
+  queryClient.setQueryData(
+    jokkooQueryKeys.conversations,
+    (current) => {
+      if (!current || current.pages.length === 0) {
+        return current;
+      }
+      let found = false;
+      const pages = current.pages.map((page) => {
+        const nextData = page.data.map((item) => {
+          if (item.id !== conversationId) {
+            return item;
+          }
+          found = true;
+          return {
+            ...item,
+            status
+          };
+        });
+        return {
+          ...page,
+          data: nextData
+        };
+      });
+      if (!found) {
+        return current;
+      }
+      return {
+        ...current,
+        pages
+      };
+    }
+  );
+}
+function updateConversationPreviewFromMessage(queryClient, message) {
+  queryClient.setQueryData(
+    jokkooQueryKeys.conversations,
+    (current) => {
+      if (!current || current.pages.length === 0) {
+        return current;
+      }
+      let found = false;
+      const pages = current.pages.map((page) => {
+        const nextData = page.data.map((item) => {
+          if (item.id !== message.conversationId) {
+            return item;
+          }
+          found = true;
+          return {
+            ...item,
+            lastMessageText: message.content,
+            lastMessageSenderType: message.senderType,
+            updatedAt: message.createdAt
+          };
+        });
+        return {
+          ...page,
+          data: sortConversationsByUpdatedAt(nextData)
+        };
+      });
+      if (!found) {
+        return current;
+      }
+      return {
+        ...current,
+        pages
+      };
+    }
+  );
+}
+function appendMessageToCache(queryClient, message) {
+  queryClient.setQueryData(
+    jokkooQueryKeys.messages(message.conversationId),
+    (current) => prependMessageToMessagesCache(current, message)
+  );
+}
+
+// src/hooks/useGlobalRealtimeListener.ts
+function isViewingConversation(isChatOpen, currentScreen, conversationId) {
+  return isChatOpen && currentScreen.name === "conversation" && currentScreen.conversationId === conversationId;
+}
+function useGlobalRealtimeListener(options) {
+  const { apiClient, realtimeClient, queryClient, isChatOpen, currentScreen } = options;
+  const [status, setStatus] = (0, import_react.useState)(realtimeClient.getStatus());
+  const [unreadConversationIds, setUnreadConversationIds] = (0, import_react.useState)(
+    () => /* @__PURE__ */ new Set()
+  );
+  const isChatOpenRef = (0, import_react.useRef)(isChatOpen);
+  const currentScreenRef = (0, import_react.useRef)(currentScreen);
+  isChatOpenRef.current = isChatOpen;
+  currentScreenRef.current = currentScreen;
+  const unreadCount = unreadConversationIds.size;
+  const isConversationUnread = (0, import_react.useCallback)(
+    (conversationId) => unreadConversationIds.has(conversationId),
+    [unreadConversationIds]
+  );
+  (0, import_react.useEffect)(() => {
+    return realtimeClient.onStatusChange(setStatus);
+  }, [realtimeClient]);
+  const markConversationRead = (0, import_react.useCallback)(
+    (conversationId) => {
+      setUnreadConversationIds((current) => {
+        if (!current.has(conversationId)) {
+          return current;
+        }
+        const next = new Set(current);
+        next.delete(conversationId);
+        return next;
+      });
+      void apiClient.markAsRead(conversationId).catch(() => {
+      });
+    },
+    [apiClient]
+  );
+  const addUnreadConversation = (0, import_react.useCallback)((conversationId) => {
+    setUnreadConversationIds((current) => {
+      if (current.has(conversationId)) {
+        return current;
+      }
+      const next = new Set(current);
+      next.add(conversationId);
+      return next;
+    });
+  }, []);
+  (0, import_react.useEffect)(() => {
+    let cancelled = false;
+    void apiClient.getUnreadCount().then((response) => {
+      if (cancelled) {
+        return;
+      }
+      setUnreadConversationIds(new Set(response.conversationIds));
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [apiClient]);
+  (0, import_react.useEffect)(() => {
+    if (status !== "connected") {
+      return;
+    }
+    const socket = realtimeClient.getSocket();
+    if (!socket) {
+      return;
+    }
+    const handleConversationCreated = (payload) => {
+      prependConversationToListCache(
+        queryClient,
+        (0, import_sdk_web.mapRealtimeConversationPayload)(payload.conversation)
+      );
+    };
+    const handleConversationUpdated = (payload) => {
+      const conversation = (0, import_sdk_web.mapRealtimeConversationPayload)(payload.conversation);
+      upsertConversationInListCache(queryClient, conversation);
+      if (conversation.status === "closed") {
+        markConversationRead(conversation.id);
+      }
+    };
+    const handleMessageCreated = (payload) => {
+      if (!payload?.message) {
+        return;
+      }
+      const message = (0, import_sdk_web.normalizeRealtimeMessage)(payload.message);
+      appendMessageToCache(queryClient, message);
+      updateConversationPreviewFromMessage(queryClient, message);
+      if (message.senderType === "end_user") {
+        markConversationRead(message.conversationId);
+        return;
+      }
+      if (isViewingConversation(
+        isChatOpenRef.current,
+        currentScreenRef.current,
+        message.conversationId
+      )) {
+        markConversationRead(message.conversationId);
+        return;
+      }
+      if ((0, import_sdk_web2.shouldCountMessageAsUnread)(message)) {
+        addUnreadConversation(message.conversationId);
+      }
+    };
+    socket.on(import_sdk_web2.REALTIME_EVENTS.messageCreated, handleMessageCreated);
+    socket.on(import_sdk_web2.REALTIME_EVENTS.conversationCreated, handleConversationCreated);
+    socket.on(import_sdk_web2.REALTIME_EVENTS.conversationUpdated, handleConversationUpdated);
+    return () => {
+      socket.off(import_sdk_web2.REALTIME_EVENTS.messageCreated, handleMessageCreated);
+      socket.off(import_sdk_web2.REALTIME_EVENTS.conversationCreated, handleConversationCreated);
+      socket.off(import_sdk_web2.REALTIME_EVENTS.conversationUpdated, handleConversationUpdated);
+    };
+  }, [addUnreadConversation, markConversationRead, queryClient, realtimeClient, status]);
+  return { unreadCount, markConversationRead, isConversationUnread };
+}
+
+// src/theme.ts
+var defaultTheme = {
+  colors: {
+    primary: "#1C1C1C",
+    background: "#FFFFFF",
+    surface: "#F5F6F8",
+    text: "#1C1C1C",
+    textMuted: "#8A8A9A",
+    border: "#E4E4E8",
+    onPrimary: "#FFFFFF",
+    chatHeaderBackground: "#1C1C1C",
+    chatHeaderText: "#FFFFFF",
+    chatHeaderButtonBackground: "#404040",
+    chatBackground: "#FFFFFF",
+    chatSurface: "#FFFFFF",
+    chatText: "#1C1C1C",
+    chatTextMuted: "#8A8A9A",
+    chatBorder: "#E4E4E8",
+    inputBackground: "#F5F6F8",
+    inputPlaceholder: "rgba(28, 28, 28, 0.5)",
+    userBubbleBackground: "#1C1C1C",
+    userBubbleText: "#FFFFFF",
+    agentBubbleBackground: "#F5F6F8",
+    agentBubbleText: "#1C1C1C",
+    statusActiveBackground: "#DBEAFE",
+    statusActiveText: "#3B82F6",
+    statusEndedBackground: "#D1FAE5",
+    statusEndedText: "#10B981",
+    discussionEndedBackground: "#ECFDF5",
+    resolvedBackground: "rgba(76, 175, 80, 0.08)",
+    resolvedText: "#4CAF50",
+    unreadIndicator: "#EF4444"
+  },
+  spacing: {
+    xs: 4,
+    sm: 8,
+    md: 16,
+    lg: 24,
+    xl: 32
+  },
+  borderRadius: 12,
+  cardBorderRadius: 16,
+  badgeBorderRadius: 8,
+  bubbleBorderRadius: 20,
+  panelBorderRadius: 20,
+  typography: {
+    headingSize: 24,
+    headingWeight: "600",
+    headingLetterSpacing: -1,
+    titleSize: 20,
+    titleWeight: "600",
+    smallSize: 14,
+    smallWeight: "600",
+    bodySize: 14,
+    bodyWeight: "400",
+    captionSize: 12,
+    captionWeight: "400",
+    messageSize: 12,
+    timestampSize: 10
+  }
+};
+function mergeTheme(partial) {
+  if (!partial) {
+    return defaultTheme;
+  }
+  return {
+    colors: { ...defaultTheme.colors, ...partial.colors },
+    spacing: { ...defaultTheme.spacing, ...partial.spacing },
+    borderRadius: partial.borderRadius ?? defaultTheme.borderRadius,
+    cardBorderRadius: partial.cardBorderRadius ?? defaultTheme.cardBorderRadius,
+    badgeBorderRadius: partial.badgeBorderRadius ?? defaultTheme.badgeBorderRadius,
+    bubbleBorderRadius: partial.bubbleBorderRadius ?? defaultTheme.bubbleBorderRadius,
+    panelBorderRadius: partial.panelBorderRadius ?? defaultTheme.panelBorderRadius,
+    typography: { ...defaultTheme.typography, ...partial.typography }
+  };
+}
+function themeToCssVars(theme) {
+  return {
+    "--jk-color-primary": theme.colors.primary,
+    "--jk-color-background": theme.colors.background,
+    "--jk-color-surface": theme.colors.surface,
+    "--jk-color-border": theme.colors.border,
+    "--jk-color-text": theme.colors.text,
+    "--jk-color-text-secondary": theme.colors.textMuted,
+    "--jk-color-on-primary": theme.colors.onPrimary,
+    "--jk-color-user-bubble": theme.colors.userBubbleBackground,
+    "--jk-color-agent-bubble": theme.colors.agentBubbleBackground,
+    "--jk-color-status-blue-bg": theme.colors.statusActiveBackground,
+    "--jk-color-status-blue-text": theme.colors.statusActiveText,
+    "--jk-color-status-green-bg": theme.colors.statusEndedBackground,
+    "--jk-color-status-green-text": theme.colors.statusEndedText,
+    "--jk-color-resolved-bg": theme.colors.resolvedBackground,
+    "--jk-color-resolved-text": theme.colors.resolvedText,
+    "--jk-color-header": theme.colors.chatHeaderBackground,
+    "--jk-color-header-text": theme.colors.chatHeaderText,
+    "--jk-color-unread": theme.colors.unreadIndicator,
+    "--jk-radius-panel": `${theme.panelBorderRadius}px`,
+    "--jk-radius-bubble": `${theme.bubbleBorderRadius}px`,
+    "--jk-radius-card": `${theme.cardBorderRadius}px`,
+    "--jk-radius-badge": `${theme.badgeBorderRadius}px`,
+    "--jk-radius-input": `${theme.bubbleBorderRadius}px`
+  };
+}
+
+// src/context/JokkooProvider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var initialScreen = { name: "requestList" };
+var JokkooContext = (0, import_react2.createContext)(null);
+function createDefaultQueryClient() {
+  return new import_react_query.QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: 1,
+        refetchOnWindowFocus: false
+      }
+    }
+  });
+}
+function JokkooProvider({
+  children,
+  theme,
+  clientToken,
+  userTokenProvider,
+  baseUrl,
+  locale,
+  debug,
+  tokenRefreshBufferSeconds,
+  queryClient: externalQueryClient
+}) {
+  const [isChatOpen, setIsChatOpen] = (0, import_react2.useState)(false);
+  const [isExpanded, setIsExpanded] = (0, import_react2.useState)(false);
+  const [currentScreen, setCurrentScreen] = (0, import_react2.useState)(initialScreen);
+  const resolvedTheme = (0, import_react2.useMemo)(() => mergeTheme(theme), [theme]);
+  const themeStyle = (0, import_react2.useMemo)(
+    () => themeToCssVars(resolvedTheme),
+    [resolvedTheme]
+  );
+  const tokenProviderRef = (0, import_react2.useRef)(userTokenProvider);
+  tokenProviderRef.current = userTokenProvider;
+  const internalQueryClientRef = (0, import_react2.useRef)(null);
+  if (!externalQueryClient && !internalQueryClientRef.current) {
+    internalQueryClientRef.current = createDefaultQueryClient();
+  }
+  const queryClient = externalQueryClient ?? internalQueryClientRef.current;
+  const translations = (0, import_react2.useMemo)(() => (0, import_sdk_web3.getTranslations)(locale), [locale]);
+  const apiClient = (0, import_react2.useMemo)(() => {
+    import_sdk_web3.Jokkoo.init({
+      clientToken,
+      baseUrl,
+      locale,
+      debug,
+      tokenRefreshBufferSeconds,
+      userTokenProvider: () => tokenProviderRef.current()
+    });
+    void import_sdk_web3.Jokkoo.getRealtimeClient().connect();
+    return new import_sdk_web3.JokkooApiClient(import_sdk_web3.Jokkoo.getConfig(), import_sdk_web3.Jokkoo.getTokenManager());
+  }, [clientToken, baseUrl, locale, debug, tokenRefreshBufferSeconds]);
+  const realtimeClient = (0, import_react2.useMemo)(() => import_sdk_web3.Jokkoo.getRealtimeClient(), [apiClient]);
+  const { unreadCount, markConversationRead, isConversationUnread } = useGlobalRealtimeListener({
+    apiClient,
+    realtimeClient,
+    queryClient,
+    isChatOpen,
+    currentScreen
+  });
+  (0, import_react2.useEffect)(() => {
+    return () => {
+      import_sdk_web3.Jokkoo.destroy();
+    };
+  }, []);
+  const resetNavigation = (0, import_react2.useCallback)(() => {
+    setCurrentScreen(initialScreen);
+    setIsExpanded(false);
+  }, []);
+  const openChat = (0, import_react2.useCallback)(() => {
+    if (!import_sdk_web3.Jokkoo.isInitialized()) {
+      throw new Error(
+        "Jokkoo SDK is not initialized. Ensure <JokkooProvider> is mounted with valid config."
+      );
+    }
+    resetNavigation();
+    setIsChatOpen(true);
+  }, [resetNavigation]);
+  const closeChat = (0, import_react2.useCallback)(() => {
+    setIsChatOpen(false);
+    resetNavigation();
+  }, [resetNavigation]);
+  const toggleExpanded = (0, import_react2.useCallback)(() => {
+    setIsExpanded((current) => !current);
+  }, []);
+  const navigateTo = (0, import_react2.useCallback)((screen) => {
+    setCurrentScreen(screen);
+  }, []);
+  const goBack = (0, import_react2.useCallback)(() => {
+    setCurrentScreen(initialScreen);
+  }, []);
+  const value = (0, import_react2.useMemo)(
+    () => ({
+      theme: resolvedTheme,
+      themeStyle,
+      t: translations,
+      locale,
+      isChatOpen,
+      isExpanded,
+      currentScreen,
+      apiClient,
+      realtimeClient,
+      openChat,
+      closeChat,
+      toggleExpanded,
+      navigateTo,
+      goBack,
+      unreadCount,
+      markConversationRead,
+      isConversationUnread
+    }),
+    [
+      resolvedTheme,
+      themeStyle,
+      translations,
+      locale,
+      isChatOpen,
+      isExpanded,
+      currentScreen,
+      apiClient,
+      realtimeClient,
+      openChat,
+      closeChat,
+      toggleExpanded,
+      navigateTo,
+      goBack,
+      unreadCount,
+      markConversationRead,
+      isConversationUnread
+    ]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(JokkooContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "jokkoo-widget", style: themeStyle, children }) }) });
+}
+function useJokkooContext() {
+  const context = (0, import_react2.useContext)(JokkooContext);
+  if (!context) {
+    throw new Error("Jokkoo UI components must be wrapped in <JokkooProvider>.");
+  }
+  return context;
+}
+
+// src/hooks/useRealtimeConversations.ts
+var import_react_query2 = require("@tanstack/react-query");
+var import_sdk_web4 = require("@jokkoo/sdk-web");
+var import_react4 = require("react");
+
+// src/hooks/useRealtimeStatus.ts
+var import_react3 = require("react");
+function useRealtimeStatus() {
+  const { realtimeClient } = useJokkooContext();
+  const [status, setStatus] = (0, import_react3.useState)(realtimeClient.getStatus());
+  (0, import_react3.useEffect)(() => {
+    return realtimeClient.onStatusChange(setStatus);
+  }, [realtimeClient]);
+  return status;
+}
+
+// src/hooks/useRealtimeConversations.ts
+function useRealtimeConversations() {
+  const { realtimeClient } = useJokkooContext();
+  const queryClient = (0, import_react_query2.useQueryClient)();
+  const status = useRealtimeStatus();
+  (0, import_react4.useEffect)(() => {
+    if (status !== "connected") {
+      return;
+    }
+    const socket = realtimeClient.getSocket();
+    if (!socket) {
+      return;
+    }
+    const handleConversationCreated = (payload) => {
+      prependConversationToListCache(
+        queryClient,
+        (0, import_sdk_web.mapRealtimeConversationPayload)(payload.conversation)
+      );
+    };
+    const handleConversationUpdated = (payload) => {
+      upsertConversationInListCache(
+        queryClient,
+        (0, import_sdk_web.mapRealtimeConversationPayload)(payload.conversation)
+      );
+    };
+    const handleMessageCreated = (payload) => {
+      const message = (0, import_sdk_web.normalizeRealtimeMessage)(payload.message);
+      updateConversationPreviewFromMessage(queryClient, message);
+    };
+    socket.on(import_sdk_web4.REALTIME_EVENTS.messageCreated, handleMessageCreated);
+    socket.on(import_sdk_web4.REALTIME_EVENTS.conversationCreated, handleConversationCreated);
+    socket.on(import_sdk_web4.REALTIME_EVENTS.conversationUpdated, handleConversationUpdated);
+    return () => {
+      socket.off(import_sdk_web4.REALTIME_EVENTS.messageCreated, handleMessageCreated);
+      socket.off(import_sdk_web4.REALTIME_EVENTS.conversationCreated, handleConversationCreated);
+      socket.off(import_sdk_web4.REALTIME_EVENTS.conversationUpdated, handleConversationUpdated);
+    };
+  }, [queryClient, realtimeClient, status]);
+}
+
+// src/components/ConversationScreen.tsx
+var import_react_query7 = require("@tanstack/react-query");
+var import_sdk_web16 = require("@jokkoo/sdk-web");
+var import_react16 = require("react");
+
+// src/hooks/useClosedConversationPolicy.ts
+var import_react_query3 = require("@tanstack/react-query");
+function useClosedConversationPolicy() {
+  const { apiClient } = useJokkooContext();
+  return (0, import_react_query3.useQuery)({
+    queryKey: jokkooQueryKeys.conversationPolicies,
+    queryFn: () => apiClient.getConversationPolicies(),
+    staleTime: 5 * 60 * 1e3
+  });
+}
+
+// src/hooks/useConversations.ts
+var import_react_query4 = require("@tanstack/react-query");
+var import_react5 = require("react");
+var DEFAULT_PAGE_SIZE2 = 20;
+function useConversations(options) {
+  const { apiClient } = useJokkooContext();
+  const pageSize = options?.pageSize ?? DEFAULT_PAGE_SIZE2;
+  const query = (0, import_react_query4.useInfiniteQuery)({
+    queryKey: jokkooQueryKeys.conversations,
+    initialPageParam: 0,
+    staleTime: 3e4,
+    queryFn: ({ pageParam }) => apiClient.getConversations(pageSize, pageParam),
+    getNextPageParam: (lastPage) => {
+      const nextOffset = lastPage.offset + lastPage.limit;
+      return nextOffset < lastPage.total ? nextOffset : void 0;
+    }
+  });
+  const conversations = (0, import_react5.useMemo)(
+    () => query.data?.pages.flatMap((page) => page.data) ?? [],
+    [query.data]
+  );
+  return {
+    conversations,
+    fetchNextPage: () => {
+      void query.fetchNextPage();
+    },
+    hasNextPage: query.hasNextPage,
+    isFetchingNextPage: query.isFetchingNextPage,
+    isLoading: query.isLoading,
+    isError: query.isError,
+    refetch: () => {
+      void query.refetch();
+    }
+  };
+}
+
+// src/hooks/useFileUpload.ts
+var import_sdk_web5 = require("@jokkoo/sdk-web");
+var import_react6 = require("react");
+var ACCEPT = "image/jpeg,image/png,image/gif,image/webp,video/mp4,video/quicktime,video/webm,application/pdf,application/vnd.openxmlformats-officedocument.wordprocessingml.document";
+function useFileUpload() {
+  const { apiClient, t } = useJokkooContext();
+  const [pendingAttachments, setPendingAttachments] = (0, import_react6.useState)([]);
+  const inputRef = (0, import_react6.useRef)(null);
+  const ensureInput = (0, import_react6.useCallback)(() => {
+    if (inputRef.current) {
+      return inputRef.current;
+    }
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = ACCEPT;
+    input.multiple = true;
+    input.style.display = "none";
+    document.body.appendChild(input);
+    inputRef.current = input;
+    return input;
+  }, []);
+  const uploadPendingAttachment = (0, import_react6.useCallback)(
+    async (attachment) => {
+      setPendingAttachments(
+        (current) => current.map(
+          (item) => item.id === attachment.id ? { ...item, status: "uploading", progress: 5 } : item
+        )
+      );
+      try {
+        const uploaded = await (0, import_sdk_web5.uploadAttachmentFile)(apiClient, attachment, (progress, status) => {
+          setPendingAttachments(
+            (current) => current.map(
+              (item) => item.id === attachment.id ? { ...item, progress, status } : item
+            )
+          );
+        });
+        setPendingAttachments(
+          (current) => current.map((item) => item.id === attachment.id ? uploaded : item)
+        );
+      } catch {
+        setPendingAttachments(
+          (current) => current.map(
+            (item) => item.id === attachment.id ? {
+              ...item,
+              status: "error",
+              progress: 0,
+              error: t.uploadFailed
+            } : item
+          )
+        );
+      }
+    },
+    [apiClient, t.uploadFailed]
+  );
+  const appendAttachment = (0, import_react6.useCallback)(
+    async (attachment) => {
+      if (!(0, import_sdk_web5.canAddMoreAttachments)(pendingAttachments.length)) {
+        window.alert(t.maxAttachmentsReached);
+        return;
+      }
+      setPendingAttachments((current) => [...current, attachment]);
+      if (attachment.status === "pending") {
+        await uploadPendingAttachment(attachment);
+      }
+    },
+    [pendingAttachments.length, t.maxAttachmentsReached, uploadPendingAttachment]
+  );
+  const pickAttachments = (0, import_react6.useCallback)(() => {
+    const input = ensureInput();
+    input.onchange = () => {
+      const files = Array.from(input.files ?? []);
+      input.value = "";
+      for (const file of files) {
+        const uri = URL.createObjectURL(file);
+        const attachment = (0, import_sdk_web5.createPendingAttachment)({
+          fileName: file.name,
+          mimeType: file.type || "application/octet-stream",
+          uri,
+          size: file.size
+        });
+        void appendAttachment(attachment);
+      }
+    };
+    input.click();
+  }, [appendAttachment, ensureInput]);
+  const retryAttachment = (0, import_react6.useCallback)(
+    (id) => {
+      const attachment = pendingAttachments.find((item) => item.id === id);
+      if (!attachment || attachment.status !== "error") {
+        return;
+      }
+      const resetAttachment = {
+        ...attachment,
+        status: "pending",
+        progress: 0,
+        error: void 0
+      };
+      setPendingAttachments(
+        (current) => current.map((item) => item.id === id ? resetAttachment : item)
+      );
+      void uploadPendingAttachment(resetAttachment);
+    },
+    [pendingAttachments, uploadPendingAttachment]
+  );
+  const removeAttachment = (0, import_react6.useCallback)((id) => {
+    setPendingAttachments((current) => {
+      const target = current.find((item) => item.id === id);
+      if (target?.uri.startsWith("blob:")) {
+        URL.revokeObjectURL(target.uri);
+      }
+      return current.filter((item) => item.id !== id);
+    });
+  }, []);
+  const clearAttachments = (0, import_react6.useCallback)(() => {
+    setPendingAttachments((current) => {
+      for (const item of current) {
+        if (item.uri.startsWith("blob:")) {
+          URL.revokeObjectURL(item.uri);
+        }
+      }
+      return [];
+    });
+  }, []);
+  const confirmedFileIds = pendingAttachments.filter((item) => item.status === "confirmed" && item.confirmedFileId).map((item) => item.confirmedFileId);
+  const isUploading = pendingAttachments.some(
+    (item) => item.status === "uploading" || item.status === "confirming" || item.status === "pending"
+  );
+  return {
+    pendingAttachments,
+    isUploading,
+    confirmedFileIds,
+    pickAttachments,
+    removeAttachment,
+    retryAttachment,
+    clearAttachments
+  };
+}
+
+// src/hooks/useMessages.ts
+var import_react_query5 = require("@tanstack/react-query");
+var import_sdk_web6 = require("@jokkoo/sdk-web");
+var import_react7 = require("react");
+var DEFAULT_PAGE_SIZE3 = 50;
+function useMessages(conversationId, options) {
+  const { apiClient } = useJokkooContext();
+  const pageSize = options?.pageSize ?? DEFAULT_PAGE_SIZE3;
+  const enabled = (options?.enabled ?? true) && conversationId !== import_sdk_web6.NEW_CONVERSATION_ID;
+  const query = (0, import_react_query5.useInfiniteQuery)({
+    queryKey: jokkooQueryKeys.messages(conversationId),
+    initialPageParam: "latest",
+    enabled,
+    staleTime: 0,
+    queryFn: ({ pageParam }) => (0, import_sdk_web6.fetchMessagesPage)(apiClient, conversationId, pageSize, pageParam),
+    getNextPageParam: (lastPage) => (0, import_sdk_web6.getOlderMessagesPageParam)(lastPage)
+  });
+  const messages = (0, import_react7.useMemo)(
+    () => query.data?.pages.flatMap((page) => page.data) ?? [],
+    [query.data]
+  );
+  return {
+    messages,
+    fetchNextPage: () => {
+      void query.fetchNextPage();
+    },
+    hasNextPage: query.hasNextPage,
+    isFetchingNextPage: query.isFetchingNextPage,
+    isLoading: query.isLoading,
+    isError: query.isError
+  };
+}
+
+// src/hooks/useRealtimeMessages.ts
+var import_react_query6 = require("@tanstack/react-query");
+var import_sdk_web7 = require("@jokkoo/sdk-web");
+var import_react8 = require("react");
+function useRealtimeMessages(conversationId) {
+  const { realtimeClient } = useJokkooContext();
+  const queryClient = (0, import_react_query6.useQueryClient)();
+  const status = useRealtimeStatus();
+  const [pendingNewMessages, setPendingNewMessages] = (0, import_react8.useState)(0);
+  const isAtBottomRef = (0, import_react8.useRef)(true);
+  const conversationIdRef = (0, import_react8.useRef)(conversationId);
+  conversationIdRef.current = conversationId;
+  const clearPendingNewMessages = (0, import_react8.useCallback)(() => {
+    setPendingNewMessages(0);
+  }, []);
+  const notifyScrolledToBottom = (0, import_react8.useCallback)(() => {
+    isAtBottomRef.current = true;
+    setPendingNewMessages(0);
+  }, []);
+  const notifyScrolledAwayFromBottom = (0, import_react8.useCallback)(() => {
+    isAtBottomRef.current = false;
+  }, []);
+  (0, import_react8.useEffect)(() => {
+    setPendingNewMessages(0);
+    isAtBottomRef.current = true;
+  }, [conversationId]);
+  (0, import_react8.useEffect)(() => {
+    if (status !== "connected" || conversationId === import_sdk_web7.NEW_CONVERSATION_ID) {
+      return;
+    }
+    const socket = realtimeClient.getSocket();
+    if (!socket) {
+      return;
+    }
+    const handleMessageCreated = (payload) => {
+      if (!payload?.message) {
+        return;
+      }
+      const message = (0, import_sdk_web.normalizeRealtimeMessage)(payload.message);
+      if (message.conversationId !== conversationIdRef.current) {
+        return;
+      }
+      appendMessageToCache(queryClient, message);
+      updateConversationPreviewFromMessage(queryClient, message);
+      if ((0, import_sdk_web7.isSatisfactionRequestMessage)(message)) {
+        updateConversationStatusInListCache(queryClient, message.conversationId, "pending_closure");
+      }
+      if (message.senderType === "agent" || message.senderType === "system") {
+        if (!isAtBottomRef.current) {
+          setPendingNewMessages((count) => count + 1);
+        }
+      }
+    };
+    socket.on(import_sdk_web7.REALTIME_EVENTS.messageCreated, handleMessageCreated);
+    return () => {
+      socket.off(import_sdk_web7.REALTIME_EVENTS.messageCreated, handleMessageCreated);
+    };
+  }, [conversationId, queryClient, realtimeClient, status]);
+  return {
+    pendingNewMessages,
+    clearPendingNewMessages,
+    notifyScrolledToBottom,
+    notifyScrolledAwayFromBottom
+  };
+}
+
+// src/hooks/useVoiceRecorder.ts
+var import_sdk_web8 = require("@jokkoo/sdk-web");
+var import_react9 = require("react");
+var MIN_VOICE_DURATION_MS = 500;
+var METERING_SAMPLE_INTERVAL_MS = 55;
+var VOICE_METERING_HISTORY_SIZE = 32;
+function pickMimeType() {
+  if (typeof MediaRecorder === "undefined") {
+    return "audio/webm";
+  }
+  if (MediaRecorder.isTypeSupported("audio/webm;codecs=opus")) {
+    return "audio/webm;codecs=opus";
+  }
+  if (MediaRecorder.isTypeSupported("audio/webm")) {
+    return "audio/webm";
+  }
+  if (MediaRecorder.isTypeSupported("audio/mp4")) {
+    return "audio/mp4";
+  }
+  return "audio/webm";
+}
+function useVoiceRecorder() {
+  const { apiClient, t } = useJokkooContext();
+  const [state, setState] = (0, import_react9.useState)("idle");
+  const [durationMs, setDurationMs] = (0, import_react9.useState)(0);
+  const [meteringLevels, setMeteringLevels] = (0, import_react9.useState)(() => (0, import_sdk_web8.createIdleMeteringLevels)());
+  const [uploadProgress, setUploadProgress] = (0, import_react9.useState)(0);
+  const [confirmedFileId, setConfirmedFileId] = (0, import_react9.useState)(null);
+  const [audioDurationMs, setAudioDurationMs] = (0, import_react9.useState)(0);
+  const mediaRecorderRef = (0, import_react9.useRef)(null);
+  const mediaStreamRef = (0, import_react9.useRef)(null);
+  const chunksRef = (0, import_react9.useRef)([]);
+  const mimeTypeRef = (0, import_react9.useRef)("audio/webm");
+  const durationStartedAtRef = (0, import_react9.useRef)(null);
+  const durationTimerRef = (0, import_react9.useRef)(null);
+  const analyserRef = (0, import_react9.useRef)(null);
+  const audioContextRef = (0, import_react9.useRef)(null);
+  const meteringTimerRef = (0, import_react9.useRef)(null);
+  const smoothedMeteringRef = (0, import_react9.useRef)((0, import_sdk_web8.createIdleMeteringLevels)()[0]);
+  const sampleIndexRef = (0, import_react9.useRef)(0);
+  const clearTimers = (0, import_react9.useCallback)(() => {
+    if (durationTimerRef.current) {
+      clearInterval(durationTimerRef.current);
+      durationTimerRef.current = null;
+    }
+    if (meteringTimerRef.current) {
+      clearInterval(meteringTimerRef.current);
+      meteringTimerRef.current = null;
+    }
+  }, []);
+  const stopTracks = (0, import_react9.useCallback)(() => {
+    mediaStreamRef.current?.getTracks().forEach((track) => track.stop());
+    mediaStreamRef.current = null;
+    void audioContextRef.current?.close().catch(() => void 0);
+    audioContextRef.current = null;
+    analyserRef.current = null;
+    mediaRecorderRef.current = null;
+  }, []);
+  const reset = (0, import_react9.useCallback)(() => {
+    clearTimers();
+    stopTracks();
+    chunksRef.current = [];
+    setState("idle");
+    setDurationMs(0);
+    setMeteringLevels((0, import_sdk_web8.createIdleMeteringLevels)());
+    setUploadProgress(0);
+    setConfirmedFileId(null);
+    setAudioDurationMs(0);
+    durationStartedAtRef.current = null;
+    smoothedMeteringRef.current = (0, import_sdk_web8.createIdleMeteringLevels)()[0];
+    sampleIndexRef.current = 0;
+  }, [clearTimers, stopTracks]);
+  (0, import_react9.useEffect)(() => {
+    return () => {
+      clearTimers();
+      stopTracks();
+    };
+  }, [clearTimers, stopTracks]);
+  const startRecording = (0, import_react9.useCallback)(async () => {
+    if (state === "recording" || state === "uploading") {
+      return;
+    }
+    if (typeof navigator === "undefined" || !navigator.mediaDevices?.getUserMedia) {
+      window.alert(t.microphonePermissionDenied);
+      return;
+    }
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      mediaStreamRef.current = stream;
+      mimeTypeRef.current = pickMimeType();
+      const audioContext = new AudioContext();
+      audioContextRef.current = audioContext;
+      const source = audioContext.createMediaStreamSource(stream);
+      const analyser = audioContext.createAnalyser();
+      analyser.fftSize = 256;
+      source.connect(analyser);
+      analyserRef.current = analyser;
+      const recorder = new MediaRecorder(stream, { mimeType: mimeTypeRef.current });
+      mediaRecorderRef.current = recorder;
+      chunksRef.current = [];
+      recorder.ondataavailable = (event) => {
+        if (event.data.size > 0) {
+          chunksRef.current.push(event.data);
+        }
+      };
+      setDurationMs(0);
+      setMeteringLevels((0, import_sdk_web8.createIdleMeteringLevels)());
+      setUploadProgress(0);
+      setConfirmedFileId(null);
+      setAudioDurationMs(0);
+      durationStartedAtRef.current = Date.now();
+      smoothedMeteringRef.current = (0, import_sdk_web8.createIdleMeteringLevels)()[0];
+      sampleIndexRef.current = 0;
+      recorder.start(100);
+      setState("recording");
+      durationTimerRef.current = setInterval(() => {
+        if (durationStartedAtRef.current) {
+          setDurationMs(Date.now() - durationStartedAtRef.current);
+        }
+      }, 200);
+      meteringTimerRef.current = setInterval(() => {
+        const analyserNode = analyserRef.current;
+        if (!analyserNode) {
+          return;
+        }
+        const data = new Uint8Array(analyserNode.frequencyBinCount);
+        analyserNode.getByteTimeDomainData(data);
+        let sum = 0;
+        for (let i = 0; i < data.length; i += 1) {
+          const centered = (data[i] - 128) / 128;
+          sum += centered * centered;
+        }
+        const rms = Math.sqrt(sum / data.length);
+        const rawLevel = Math.max(0.14, Math.min(1, rms * 4));
+        smoothedMeteringRef.current = (0, import_sdk_web8.smoothMeteringSample)(smoothedMeteringRef.current, rawLevel);
+        const variedLevel = (0, import_sdk_web8.applyLiveBarVariation)(
+          smoothedMeteringRef.current,
+          sampleIndexRef.current
+        );
+        sampleIndexRef.current += 1;
+        setMeteringLevels((previous) => {
+          const shifted = (0, import_sdk_web8.shiftMeteringLevel)(previous, variedLevel);
+          const sized = shifted.length >= VOICE_METERING_HISTORY_SIZE ? shifted.slice(shifted.length - VOICE_METERING_HISTORY_SIZE) : [
+            ...(0, import_sdk_web8.createIdleMeteringLevels)(VOICE_METERING_HISTORY_SIZE - shifted.length),
+            ...shifted
+          ];
+          return (0, import_sdk_web8.blendLiveWaveformLevels)(sized);
+        });
+      }, METERING_SAMPLE_INTERVAL_MS);
+    } catch {
+      window.alert(t.microphonePermissionDenied);
+      reset();
+    }
+  }, [reset, state, t.microphonePermissionDenied]);
+  const cancelRecording = (0, import_react9.useCallback)(async () => {
+    if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
+      mediaRecorderRef.current.stop();
+    }
+    reset();
+  }, [reset]);
+  const stopAndUpload = (0, import_react9.useCallback)(async () => {
+    if (state !== "recording" || !mediaRecorderRef.current) {
+      return null;
+    }
+    const recorder = mediaRecorderRef.current;
+    const elapsedMs = durationStartedAtRef.current ? Date.now() - durationStartedAtRef.current : durationMs;
+    clearTimers();
+    const blob = await new Promise((resolve) => {
+      recorder.onstop = () => {
+        const type = mimeTypeRef.current.split(";")[0] ?? "audio/webm";
+        resolve(new Blob(chunksRef.current, { type }));
+      };
+      recorder.stop();
+    });
+    stopTracks();
+    if (!blob || elapsedMs < MIN_VOICE_DURATION_MS) {
+      window.alert(t.voiceMessageTooShort);
+      reset();
+      return null;
+    }
+    setAudioDurationMs(elapsedMs);
+    setState("uploading");
+    setUploadProgress(5);
+    const extension = blob.type.includes("mp4") ? "m4a" : "webm";
+    try {
+      const fileId = await (0, import_sdk_web8.uploadVoiceBlob)(
+        apiClient,
+        blob,
+        (0, import_sdk_web8.createVoiceMessageFileName)(extension),
+        blob.type || "audio/webm",
+        setUploadProgress
+      );
+      setConfirmedFileId(fileId);
+      setState("confirmed");
+      return {
+        fileId,
+        audioDurationMs: elapsedMs
+      };
+    } catch {
+      window.alert(t.uploadFailed);
+      reset();
+      return null;
+    }
+  }, [
+    apiClient,
+    clearTimers,
+    durationMs,
+    reset,
+    state,
+    stopTracks,
+    t.uploadFailed,
+    t.voiceMessageTooShort
+  ]);
+  return {
+    state,
+    durationMs,
+    meteringLevels,
+    uploadProgress,
+    confirmedFileId,
+    audioDurationMs,
+    isRecordingActive: state === "recording" || state === "uploading",
+    startRecording,
+    cancelRecording,
+    stopAndUpload,
+    reset
+  };
+}
+
+// src/icons/index.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function baseStyle(size, color) {
+  return { width: size, height: size, color, display: "block", flexShrink: 0 };
+}
+function ArrowLeftIcon({ color = "currentColor", size = 20, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", style: baseStyle(size, color), "aria-hidden": true, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      d: "M15 18l-6-6 6-6",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function CloseIcon({ color = "currentColor", size = 16, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", style: baseStyle(size, color), "aria-hidden": true, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      d: "M18 6L6 18M6 6l12 12",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round"
+    }
+  ) });
+}
+function ExpandIcon({ color = "currentColor", size = 16, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", style: baseStyle(size, color), "aria-hidden": true, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      d: "M9 3H3v6M15 3h6v6M9 21H3v-6M21 15v6h-6",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function PaperclipIcon({ color = "currentColor", size = 16, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", style: baseStyle(size, color), "aria-hidden": true, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      d: "M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function MicIcon({ color = "currentColor", size = 24, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", style: baseStyle(size, color), "aria-hidden": true, ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "9", y: "2", width: "6", height: "12", rx: "3", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "path",
+      {
+        d: "M5 10a7 7 0 0014 0M12 17v4M8 21h8",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round"
+      }
+    )
+  ] });
+}
+function ChatIcon({ color = "currentColor", size = 20, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", style: baseStyle(size, color), "aria-hidden": true, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      d: "M21 12a8.5 8.5 0 01-8.5 8.5H5l-2 2V12A8.5 8.5 0 0111.5 3.5 8.5 8.5 0 0121 12z",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function ClockIcon({ color = "currentColor", size = 11, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", style: baseStyle(size, color), "aria-hidden": true, ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 7v5l3 2", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+  ] });
+}
+function CheckCircleIcon({ color = "currentColor", size = 14, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", style: baseStyle(size, color), "aria-hidden": true, ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "path",
+      {
+        d: "M8 12l2.5 2.5L16 9",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] });
+}
+function SendIcon({ color = "currentColor", size = 22, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", style: baseStyle(size, color), "aria-hidden": true, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      d: "M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function PlayIcon({ color = "currentColor", size = 16, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", style: baseStyle(size, color), "aria-hidden": true, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M8 5v14l11-7L8 5z" }) });
+}
+function PauseIcon({ color = "currentColor", size = 16, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", style: baseStyle(size, color), "aria-hidden": true, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M6 5h4v14H6V5zm8 0h4v14h-4V5z" }) });
+}
+function ArrowDownIcon({ color = "currentColor", size = 20, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", style: baseStyle(size, color), "aria-hidden": true, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "path",
+    {
+      d: "M12 5v14M5 12l7 7 7-7",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+
+// src/lib/status-badge.ts
+function getStatusBadgeInfo(status, t) {
+  switch (status) {
+    case "pending":
+      return { variant: "new", label: t.statusNew };
+    case "open":
+    case "snoozed":
+      return { variant: "in-progress", label: t.statusInProgress };
+    case "pending_closure":
+      return { variant: "resolved", label: t.statusResolved };
+    case "closed":
+      return { variant: "ended", label: t.statusEnded };
+    default:
+      return { variant: "in-progress", label: t.statusInProgress };
+  }
+}
+
+// src/components/StatusBadge.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function StatusBadge({ status, t }) {
+  const info = getStatusBadgeInfo(status, t);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: `jk-status-badge jk-status-badge--${info.variant}`, children: info.label });
+}
+
+// src/components/ConversationHeader.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function ConversationHeader({ title, status, t, onBack }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "jk-conversation-header", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "jk-icon-btn jk-icon-btn--dark",
+        "aria-label": "Back",
+        onClick: onBack,
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ArrowLeftIcon, { color: "currentColor", size: 16 })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h2", { className: "jk-conversation-header__title", children: title }),
+    status ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StatusBadge, { status, t }) : null
+  ] });
+}
+
+// src/components/MessageInput.tsx
+var import_sdk_web10 = require("@jokkoo/sdk-web");
+
+// src/components/PendingAttachmentList.tsx
+var import_sdk_web9 = require("@jokkoo/sdk-web");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function getStatusLabel(attachment, t) {
+  switch (attachment.status) {
+    case "uploading":
+    case "confirming":
+      return `${t.uploadingAttachment} ${attachment.progress}%`;
+    case "confirmed":
+      return t.attachmentReady;
+    case "error":
+      return attachment.error ?? t.uploadFailed;
+    default:
+      return t.uploadingAttachment;
+  }
+}
+function PendingAttachmentList({
+  attachments,
+  t,
+  onRemove,
+  onRetry
+}) {
+  if (attachments.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "jk-pending-list", children: attachments.map((attachment) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "jk-pending-item", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "jk-pending-item__thumb", children: (0, import_sdk_web9.isImageMimeType)(attachment.mimeType) ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: attachment.uri, alt: attachment.fileName }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: attachment.mimeType.startsWith("video/") ? "\u25B6" : "\u{1F4C4}" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "jk-pending-item__details", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "jk-pending-item__name", children: attachment.fileName }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "div",
+        {
+          className: `jk-pending-item__status${attachment.status === "error" ? " jk-pending-item__status--error" : attachment.status === "confirmed" ? " jk-pending-item__status--ready" : ""}`,
+          children: getStatusLabel(attachment, t)
+        }
+      ),
+      attachment.status === "uploading" || attachment.status === "confirming" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "jk-pending-item__progress", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "div",
+        {
+          className: "jk-pending-item__progress-fill",
+          style: { width: `${Math.max(attachment.progress, 8)}%` }
+        }
+      ) }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "jk-pending-item__actions", children: [
+      attachment.status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", onClick: () => onRetry(attachment.id), children: t.retryUpload }) : attachment.status === "uploading" || attachment.status === "confirming" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "jk-spinner", style: { width: 16, height: 16 } }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", onClick: () => onRemove(attachment.id), children: t.cancel })
+    ] })
+  ] }, attachment.id)) });
+}
+
+// src/components/MessageInput.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function MessageInput({
+  t,
+  apiClient,
+  value,
+  onChange,
+  pendingAttachments,
+  onRemoveAttachment,
+  onRetryAttachment,
+  onPickAttachments,
+  canSend,
+  canRecordVoice,
+  onSend,
+  onStartRecording
+}) {
+  const isOverLimit = value.length > import_sdk_web10.MESSAGE_CONTENT_MAX_LENGTH;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "jk-input-bar", children: [
+    pendingAttachments.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      PendingAttachmentList,
+      {
+        attachments: pendingAttachments,
+        apiClient,
+        t,
+        onRemove: onRemoveAttachment,
+        onRetry: onRetryAttachment
+      }
+    ) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "jk-input-shell", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "jk-input-shell__icon",
+          "aria-label": t.attachFile,
+          onClick: onPickAttachments,
+          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaperclipIcon, { color: "currentColor", size: 16 })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "jk-input-shell__field", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "textarea",
+          {
+            rows: 1,
+            maxLength: import_sdk_web10.MESSAGE_CONTENT_MAX_LENGTH,
+            placeholder: t.typeYourMessage,
+            value,
+            onChange: (event) => onChange(event.target.value),
+            onKeyDown: (event) => {
+              if (event.key === "Enter" && !event.shiftKey) {
+                event.preventDefault();
+                if (canSend) {
+                  onSend();
+                }
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          "div",
+          {
+            className: `jk-input-shell__counter${isOverLimit ? " jk-input-shell__counter--error" : ""}`,
+            children: [
+              value.length,
+              "/",
+              import_sdk_web10.MESSAGE_CONTENT_MAX_LENGTH
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "jk-input-shell__icon",
+          "aria-label": canSend ? t.sendMessage : t.recordVoiceMessage,
+          disabled: !canSend && !canRecordVoice,
+          onClick: () => {
+            if (canSend) {
+              onSend();
+              return;
+            }
+            if (canRecordVoice) {
+              onStartRecording();
+            }
+          },
+          children: canSend ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SendIcon, { color: "currentColor", size: 22 }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MicIcon, { color: "currentColor", size: 22 })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/MessageList.tsx
+var import_react14 = require("react");
+
+// src/components/ActivityEvent.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function ActivityEvent({ text, timestamp }) {
+  const trimmed = text.trim();
+  if (trimmed.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "jk-activity", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: trimmed }),
+    timestamp ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "jk-activity__time", children: timestamp }) : null
+  ] });
+}
+
+// src/components/MessageBubble.tsx
+var import_sdk_web14 = require("@jokkoo/sdk-web");
+
+// src/components/Avatar.tsx
+var import_react10 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function Avatar({
+  initials,
+  size = 40,
+  showUnreadIndicator = false,
+  imageUrl
+}) {
+  const [imgError, setImgError] = (0, import_react10.useState)(false);
+  const showImage = Boolean(imageUrl) && !imgError;
+  const indicatorSize = Math.max(10, Math.round(size * 0.25));
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "jk-avatar", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "div",
+      {
+        className: "jk-avatar__circle",
+        style: { width: size, height: size, fontSize: size * 0.34 },
+        children: showImage ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "img",
+          {
+            className: "jk-avatar__img",
+            src: imageUrl,
+            alt: "",
+            onError: () => setImgError(true)
+          }
+        ) : initials
+      }
+    ),
+    showUnreadIndicator ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "span",
+      {
+        className: "jk-avatar__unread",
+        style: { width: indicatorSize, height: indicatorSize }
+      }
+    ) : null
+  ] });
+}
+
+// src/components/MessageAttachments.tsx
+var import_sdk_web11 = require("@jokkoo/sdk-web");
+var import_react11 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function AttachmentDoc({
+  attachment,
+  onPress
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("button", { type: "button", className: "jk-attachments__doc", onClick: onPress, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: (0, import_sdk_web11.isVideoMimeType)(attachment.mimeType) ? "Video" : "Document" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "jk-attachments__doc-name", children: attachment.fileName })
+  ] });
+}
+function AttachmentRow({
+  attachment,
+  apiClient,
+  onPress
+}) {
+  const [downloadUrl, setDownloadUrl] = (0, import_react11.useState)(null);
+  (0, import_react11.useEffect)(() => {
+    if (!(0, import_sdk_web11.canPreviewInApp)(attachment.mimeType)) {
+      return;
+    }
+    let cancelled = false;
+    void apiClient.getDownloadUrl(attachment.fileId).then((response) => {
+      if (!cancelled) {
+        setDownloadUrl(response.downloadUrl);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [apiClient, attachment.fileId, attachment.mimeType]);
+  if ((0, import_sdk_web11.isImageMimeType)(attachment.mimeType)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", onClick: onPress, style: { padding: 0, background: "none", border: "none" }, children: downloadUrl ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("img", { className: "jk-attachments__img", src: downloadUrl, alt: attachment.fileName }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "jk-attachments__img", style: { display: "flex", alignItems: "center", justifyContent: "center", background: "var(--jk-color-surface)" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "jk-spinner" }) }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AttachmentDoc, { attachment, onPress });
+}
+function MessageAttachments({
+  attachments,
+  apiClient
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "jk-attachments", children: attachments.map((attachment) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    AttachmentRow,
+    {
+      attachment,
+      apiClient,
+      onPress: () => {
+        void apiClient.getDownloadUrl(attachment.fileId).then((response) => {
+          window.open(response.downloadUrl, "_blank", "noopener,noreferrer");
+        });
+      }
+    },
+    attachment.fileId
+  )) });
+}
+
+// src/components/VoiceMessagePlayer.tsx
+var import_sdk_web13 = require("@jokkoo/sdk-web");
+var import_react13 = require("react");
+
+// src/components/VoiceWaveform.tsx
+var import_sdk_web12 = require("@jokkoo/sdk-web");
+var import_react12 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var DEFAULT_BAR_COUNT = 32;
+function VoiceWaveform({
+  barCount = DEFAULT_BAR_COUNT,
+  progress = 0,
+  levels,
+  activeColor,
+  inactiveColor,
+  height = 24
+}) {
+  const playbackHeights = (0, import_react12.useMemo)(() => (0, import_sdk_web12.createPlaybackBarHeights)(barCount, 3), [barCount]);
+  const clampedProgress = Math.max(0, Math.min(1, progress));
+  const isLiveMode = levels !== void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "jk-waveform", style: { height }, children: isLiveMode ? levels.map((level, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "span",
+    {
+      className: "jk-waveform__bar",
+      style: {
+        height: Math.max(3, level * height),
+        backgroundColor: activeColor
+      }
+    },
+    `live-${index}`
+  )) : playbackHeights.map((baseHeight, index) => {
+    const position = barCount <= 1 ? 0 : index / (barCount - 1);
+    const isActive = position <= clampedProgress;
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "span",
+      {
+        className: "jk-waveform__bar",
+        style: {
+          height: Math.max(3, baseHeight * height),
+          backgroundColor: isActive ? activeColor : inactiveColor
+        }
+      },
+      `play-${index}`
+    );
+  }) });
+}
+
+// src/components/VoiceMessagePlayer.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function VoiceMessagePlayerReady({
+  downloadUrl,
+  durationMs,
+  colors
+}) {
+  const audioRef = (0, import_react13.useRef)(null);
+  const [playing, setPlaying] = (0, import_react13.useState)(false);
+  const [currentMs, setCurrentMs] = (0, import_react13.useState)(0);
+  const [totalMs, setTotalMs] = (0, import_react13.useState)(durationMs);
+  (0, import_react13.useEffect)(() => {
+    const audio = new Audio(downloadUrl);
+    audioRef.current = audio;
+    const onTime = () => setCurrentMs(audio.currentTime * 1e3);
+    const onMeta = () => {
+      if (audio.duration && Number.isFinite(audio.duration)) {
+        setTotalMs(audio.duration * 1e3);
+      }
+    };
+    const onEnded = () => {
+      setPlaying(false);
+      setCurrentMs(0);
+    };
+    audio.addEventListener("timeupdate", onTime);
+    audio.addEventListener("loadedmetadata", onMeta);
+    audio.addEventListener("ended", onEnded);
+    return () => {
+      audio.pause();
+      audio.removeEventListener("timeupdate", onTime);
+      audio.removeEventListener("loadedmetadata", onMeta);
+      audio.removeEventListener("ended", onEnded);
+      audioRef.current = null;
+    };
+  }, [downloadUrl]);
+  const toggle = (0, import_react13.useCallback)(async () => {
+    const audio = audioRef.current;
+    if (!audio) {
+      return;
+    }
+    if (playing) {
+      audio.pause();
+      setPlaying(false);
+      return;
+    }
+    if (audio.currentTime >= audio.duration && audio.duration > 0) {
+      audio.currentTime = 0;
+    }
+    await audio.play();
+    setPlaying(true);
+  }, [playing]);
+  const progress = totalMs > 0 ? currentMs / totalMs : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "jk-voice-player", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "jk-voice-player__btn",
+        style: { background: colors.buttonBackground, color: colors.primary },
+        "aria-label": playing ? "Pause voice message" : "Play voice message",
+        onClick: () => {
+          void toggle();
+        },
+        children: playing ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PauseIcon, { color: colors.primary, size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PlayIcon, { color: colors.primary, size: 16 })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "jk-voice-player__content", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        VoiceWaveform,
+        {
+          progress,
+          activeColor: colors.primary,
+          inactiveColor: colors.secondary,
+          height: 22
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "jk-voice-player__duration", style: { color: colors.secondary }, children: [
+        (0, import_sdk_web13.formatAudioDuration)(currentMs),
+        " / ",
+        (0, import_sdk_web13.formatAudioDuration)(totalMs)
+      ] })
+    ] })
+  ] });
+}
+function VoiceMessagePlayer({
+  fileId,
+  durationMs,
+  apiClient,
+  variant
+}) {
+  const [downloadUrl, setDownloadUrl] = (0, import_react13.useState)(null);
+  const [isLoadingUrl, setIsLoadingUrl] = (0, import_react13.useState)(true);
+  (0, import_react13.useEffect)(() => {
+    let cancelled = false;
+    void (async () => {
+      try {
+        const response = await apiClient.getDownloadUrl(fileId);
+        if (!cancelled) {
+          setDownloadUrl(response.downloadUrl);
+        }
+      } catch {
+        if (!cancelled) {
+          setDownloadUrl(null);
+        }
+      } finally {
+        if (!cancelled) {
+          setIsLoadingUrl(false);
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [apiClient, fileId]);
+  const colors = (0, import_react13.useMemo)(() => {
+    if (variant === "user") {
+      return {
+        primary: "#ffffff",
+        secondary: "rgba(255, 255, 255, 0.5)",
+        buttonBackground: "rgba(255, 255, 255, 0.18)"
+      };
+    }
+    return {
+      primary: "var(--jk-color-text)",
+      secondary: "var(--jk-color-text-secondary)",
+      buttonBackground: "var(--jk-color-background)"
+    };
+  }, [variant]);
+  if (isLoadingUrl) {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "jk-voice-player", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "jk-voice-player__btn", style: { background: colors.buttonBackground }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "jk-spinner", style: { width: 16, height: 16 } }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "jk-voice-player__content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(VoiceWaveform, { progress: 0, activeColor: colors.primary, inactiveColor: colors.secondary, height: 22 }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "jk-voice-player__duration", style: { color: colors.secondary }, children: [
+          (0, import_sdk_web13.formatAudioDuration)(0),
+          " / ",
+          (0, import_sdk_web13.formatAudioDuration)(durationMs)
+        ] })
+      ] })
+    ] });
+  }
+  if (!downloadUrl) {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "jk-voice-player", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { style: { color: colors.secondary, fontSize: 12 }, children: "Unable to load voice message" }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(VoiceMessagePlayerReady, { downloadUrl, durationMs, colors });
+}
+
+// src/components/MessageBubble.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function MessageBubble({
+  message,
+  apiClient,
+  showAgentMeta = true,
+  variant = "default"
+}) {
+  const isUser = message.sender === "user";
+  const isVoiceMessage = (0, import_sdk_web14.isVoiceMessageMetadata)(message.metadata);
+  const voiceAttachment = message.attachments?.find(
+    (attachment) => attachment.mimeType.startsWith("audio/")
+  );
+  const voiceDurationMs = typeof message.metadata?.audioDurationMs === "number" ? message.metadata.audioDurationMs : 0;
+  const renderBody = () => {
+    if (isVoiceMessage && voiceAttachment) {
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        VoiceMessagePlayer,
+        {
+          fileId: voiceAttachment.fileId,
+          durationMs: voiceDurationMs,
+          apiClient,
+          variant: isUser ? "user" : "agent"
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+      message.text.trim().length > 0 ? message.text : null,
+      message.attachments && message.attachments.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MessageAttachments, { attachments: message.attachments, apiClient }) : null
+    ] });
+  };
+  if (isUser) {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "jk-bubble-row jk-bubble-row--user", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "jk-bubble jk-bubble--user", children: renderBody() }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "jk-bubble__time", children: message.timestamp })
+    ] });
+  }
+  if (variant === "welcome") {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "jk-bubble-row jk-bubble-row--agent", children: [
+      message.agentInitials ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Avatar, { initials: message.agentInitials, size: 28, imageUrl: message.agentAvatarUrl }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { width: 28 } }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "jk-bubble jk-bubble--welcome", children: message.text })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "jk-bubble-row jk-bubble-row--agent", children: [
+    showAgentMeta && message.agentInitials ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Avatar, { initials: message.agentInitials, size: 28, imageUrl: message.agentAvatarUrl }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { width: 28 } }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "jk-bubble-row__agent-body", children: [
+      showAgentMeta && message.agentName ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "jk-bubble-row__agent-name", children: message.agentName }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "jk-bubble jk-bubble--agent", children: renderBody() }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "jk-bubble__time", children: message.timestamp })
+    ] })
+  ] });
+}
+
+// src/components/NewMessageIndicator.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function formatBadgeLabel(count) {
+  if (count > 99) {
+    return "99+";
+  }
+  return String(count);
+}
+function NewMessageIndicator({
+  count,
+  t,
+  onPress,
+  bottomOffset = 88
+}) {
+  if (count <= 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "button",
+    {
+      type: "button",
+      className: "jk-new-msg-indicator",
+      style: { bottom: bottomOffset },
+      "aria-label": t.newMessageIndicator(count),
+      onClick: onPress,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ArrowDownIcon, { color: "currentColor", size: 20 }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "jk-new-msg-indicator__badge", children: formatBadgeLabel(count) })
+      ]
+    }
+  );
+}
+
+// src/components/MessageList.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var SCROLL_BOTTOM_THRESHOLD = 48;
+function MessageList({
+  messages,
+  apiClient,
+  t,
+  isNewSupport,
+  isLoading,
+  isError,
+  isFetchingNextPage,
+  pendingNewMessages,
+  onLoadOlder,
+  onScrolledToBottom,
+  onScrolledAwayFromBottom,
+  onJumpToLatest
+}) {
+  const listRef = (0, import_react14.useRef)(null);
+  const stickToBottomRef = (0, import_react14.useRef)(true);
+  (0, import_react14.useEffect)(() => {
+    if (!stickToBottomRef.current || !listRef.current) {
+      return;
+    }
+    listRef.current.scrollTop = listRef.current.scrollHeight;
+  }, [messages.length]);
+  const handleScroll = () => {
+    const el = listRef.current;
+    if (!el || isNewSupport) {
+      return;
+    }
+    const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+    if (distanceFromBottom <= SCROLL_BOTTOM_THRESHOLD) {
+      stickToBottomRef.current = true;
+      onScrolledToBottom();
+    } else {
+      stickToBottomRef.current = false;
+      onScrolledAwayFromBottom();
+    }
+    if (el.scrollTop < 40) {
+      onLoadOlder();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "jk-conversation__body", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      "div",
+      {
+        ref: listRef,
+        className: `jk-messages${isNewSupport ? " jk-messages--new" : ""}`,
+        onScroll: handleScroll,
+        children: [
+          isFetchingNextPage ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "jk-spinner", style: { width: 18, height: 18 } }) }) : null,
+          messages.length === 0 ? isLoading ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "jk-empty", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "jk-spinner" }) }) : isError ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "jk-empty", children: t.unableToLoadMessages }) : null : messages.map((item, index) => {
+            if (item.sender === "system") {
+              return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ActivityEvent, { text: item.text, timestamp: item.timestamp }, item.id);
+            }
+            const olderMessage = index > 0 ? messages[index - 1] : void 0;
+            const showAgentMeta = item.sender === "agent" && olderMessage?.sender !== "agent";
+            return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              MessageBubble,
+              {
+                message: item,
+                apiClient,
+                showAgentMeta,
+                variant: isNewSupport && item.id === "welcome" ? "welcome" : "default"
+              },
+              item.id
+            );
+          })
+        ]
+      }
+    ),
+    !isNewSupport ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      NewMessageIndicator,
+      {
+        count: pendingNewMessages,
+        t,
+        bottomOffset: 96,
+        onPress: () => {
+          stickToBottomRef.current = true;
+          if (listRef.current) {
+            listRef.current.scrollTop = listRef.current.scrollHeight;
+          }
+          onJumpToLatest();
+        }
+      }
+    ) : null
+  ] });
+}
+
+// src/components/ResolvedBanner.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function ResolvedBanner({
+  t,
+  onNewRequest,
+  canReplyInConversation = false
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "jk-resolved-banner", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "jk-resolved-banner__row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "jk-resolved-banner__icon", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CheckCircleIcon, { color: "currentColor", size: 14 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: canReplyInConversation ? t.discussionClosedCanReply : t.ticketResolved })
+    ] }),
+    !canReplyInConversation ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: "jk-resolved-banner__cta",
+        "aria-label": t.newSupportRequest,
+        onClick: onNewRequest,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChatIcon, { color: "currentColor", size: 16 }),
+          t.newSupportRequest
+        ]
+      }
+    ) : null
+  ] });
+}
+
+// src/components/SatisfactionRating.tsx
+var import_react15 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var RATING_OPTIONS = [
+  { score: 1, emoji: "\u{1F61E}", labelKey: "ratingVeryUnsatisfied" },
+  { score: 2, emoji: "\u{1F61F}", labelKey: "ratingUnsatisfied" },
+  { score: 3, emoji: "\u{1F610}", labelKey: "ratingNeutral" },
+  { score: 4, emoji: "\u{1F60A}", labelKey: "ratingSatisfied" },
+  { score: 5, emoji: "\u{1F604}", labelKey: "ratingVerySatisfied" }
+];
+function SatisfactionRating({ t, message, onSubmit }) {
+  const [selectedScore, setSelectedScore] = (0, import_react15.useState)(null);
+  const [isSubmitting, setIsSubmitting] = (0, import_react15.useState)(false);
+  const [isSubmitted, setIsSubmitted] = (0, import_react15.useState)(false);
+  const handleSelect = (0, import_react15.useCallback)(
+    async (score) => {
+      if (isSubmitting || isSubmitted) {
+        return;
+      }
+      setSelectedScore(score);
+      setIsSubmitting(true);
+      try {
+        await onSubmit(score);
+        setIsSubmitted(true);
+      } catch {
+        setSelectedScore(null);
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [isSubmitted, isSubmitting, onSubmit]
+  );
+  if (isSubmitted) {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "jk-satisfaction", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "jk-satisfaction__card", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "jk-satisfaction__title", children: t.thankYouForRating }) }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "jk-satisfaction", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "jk-satisfaction__card", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "jk-satisfaction__title", children: message ?? t.rateConversation }),
+    !message ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "jk-satisfaction__desc", children: t.rateConversationDescription }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "jk-satisfaction__row", children: RATING_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "button",
+      {
+        type: "button",
+        className: `jk-satisfaction__btn${selectedScore === option.score ? " jk-satisfaction__btn--selected" : ""}`,
+        "aria-label": t[option.labelKey],
+        disabled: isSubmitting,
+        onClick: () => {
+          void handleSelect(option.score);
+        },
+        children: option.emoji
+      },
+      option.score
+    )) }),
+    isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "jk-spinner", style: { margin: "4px auto 0" } }) : null
+  ] }) });
+}
+
+// src/components/VoiceRecordingOverlay.tsx
+var import_sdk_web15 = require("@jokkoo/sdk-web");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function VoiceRecordingOverlay({
+  t,
+  durationMs,
+  meteringLevels,
+  isUploading,
+  uploadProgress,
+  onCancel,
+  onSend
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "jk-voice-overlay", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "jk-voice-overlay__panel", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "jk-input-shell__icon",
+        "aria-label": t.cancelRecording,
+        disabled: isUploading,
+        onClick: onCancel,
+        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CloseIcon, { color: "currentColor", size: 14 })
+      }
+    ),
+    isUploading ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "jk-voice-overlay__uploading", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "jk-spinner", style: { width: 16, height: 16 } }),
+      `${t.uploadingAttachment} ${uploadProgress}%`
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "jk-voice-overlay__rec", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "jk-voice-overlay__dot" }),
+        (0, import_sdk_web15.formatAudioDuration)(durationMs)
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        VoiceWaveform,
+        {
+          levels: meteringLevels,
+          activeColor: "var(--jk-color-primary)",
+          inactiveColor: "rgba(28,28,28,0.2)",
+          height: 28
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "jk-input-shell__icon",
+        "aria-label": t.sendRecording,
+        disabled: isUploading,
+        onClick: onSend,
+        children: isUploading ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "jk-spinner", style: { width: 16, height: 16 } }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SendIcon, { color: "currentColor", size: 22 })
+      }
+    )
+  ] }) });
+}
+
+// src/components/ConversationScreen.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function ConversationScreen({ conversationId }) {
+  const { t, locale, goBack, navigateTo, apiClient, markConversationRead } = useJokkooContext();
+  const queryClient = (0, import_react_query7.useQueryClient)();
+  const [message, setMessage] = (0, import_react16.useState)("");
+  const [isSending, setIsSending] = (0, import_react16.useState)(false);
+  const [optimisticMessages, setOptimisticMessages] = (0, import_react16.useState)([]);
+  const {
+    pendingAttachments,
+    isUploading,
+    confirmedFileIds,
+    pickAttachments,
+    removeAttachment,
+    retryAttachment,
+    clearAttachments
+  } = useFileUpload();
+  const {
+    state: voiceRecorderState,
+    durationMs: voiceDurationMs,
+    meteringLevels: voiceMeteringLevels,
+    uploadProgress: voiceUploadProgress,
+    isRecordingActive,
+    startRecording,
+    cancelRecording,
+    stopAndUpload,
+    reset: resetVoiceRecorder
+  } = useVoiceRecorder();
+  const isNewSupport = conversationId === import_sdk_web16.NEW_CONVERSATION_ID;
+  const {
+    pendingNewMessages,
+    notifyScrolledToBottom,
+    notifyScrolledAwayFromBottom
+  } = useRealtimeMessages(conversationId);
+  const {
+    messages: fetchedMessages,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isLoading,
+    isError
+  } = useMessages(conversationId, { enabled: !isNewSupport });
+  const { conversations } = useConversations();
+  const { data: closedConversationPolicy } = useClosedConversationPolicy();
+  const conversation = (0, import_react16.useMemo)(
+    () => conversations.find((item) => item.id === conversationId),
+    [conversations, conversationId]
+  );
+  const isClosed = conversation?.status === "closed";
+  const canReplyInClosedConversation = (0, import_react16.useMemo)(
+    () => (0, import_sdk_web16.canReplyToClosedConversation)(conversation ?? { status: "open" }, closedConversationPolicy),
+    [closedConversationPolicy, conversation]
+  );
+  const isEnded = Boolean(isClosed && !canReplyInClosedConversation);
+  const isAwaitingRating = (0, import_sdk_web16.conversationNeedsRating)(conversation?.status, fetchedMessages);
+  const satisfactionMessage = (0, import_react16.useMemo)(
+    () => (0, import_sdk_web16.getSatisfactionSurveyMessage)(fetchedMessages),
+    [fetchedMessages]
+  );
+  const headerTitle = isNewSupport ? t.newSupportRequestHeader : conversation ? (0, import_sdk_web16.getConversationDisplayName)(conversation, t) : t.support;
+  const assignedAgentName = conversation?.assignedAgentName ?? null;
+  const assignedAgentAvatarUrl = conversation?.assignedAgentAvatarUrl ? apiClient.resolveUrl(conversation.assignedAgentAvatarUrl) : null;
+  const trimmedLength = message.trim().length;
+  const isOverLimit = message.length > import_sdk_web16.MESSAGE_CONTENT_MAX_LENGTH;
+  const attachmentsReady = pendingAttachments.length === 0 || pendingAttachments.every((item) => item.status === "confirmed");
+  const canSend = attachmentsReady && (trimmedLength >= import_sdk_web16.MESSAGE_CONTENT_MIN_LENGTH || confirmedFileIds.length > 0) && !isOverLimit && !isSending && !isUploading && !isAwaitingRating && !isEnded && !isRecordingActive;
+  const canRecordVoice = !canSend && trimmedLength === 0 && pendingAttachments.length === 0 && !isSending && !isUploading && !isAwaitingRating && !isEnded && !isRecordingActive;
+  const messages = (0, import_react16.useMemo)(() => {
+    const visibleFetchedMessages = fetchedMessages.filter(
+      (item) => !(0, import_sdk_web16.isSatisfactionRequestMessage)(item)
+    );
+    const baseMessages = isNewSupport ? [(0, import_sdk_web16.createWelcomeMessage)(t)] : visibleFetchedMessages.map(
+      (item) => (0, import_sdk_web16.mapMessageToChatMessage)(item, t, locale, assignedAgentName, assignedAgentAvatarUrl)
+    );
+    const pendingOptimistic = optimisticMessages.filter(
+      (optimistic) => !baseMessages.some(
+        (base) => base.sender === optimistic.sender && base.text === optimistic.text
+      )
+    );
+    if (isNewSupport) {
+      return [...baseMessages, ...pendingOptimistic];
+    }
+    return [...baseMessages, ...pendingOptimistic];
+  }, [
+    assignedAgentName,
+    assignedAgentAvatarUrl,
+    fetchedMessages,
+    isNewSupport,
+    locale,
+    optimisticMessages,
+    t
+  ]);
+  const cancelRecordingRef = (0, import_react16.useRef)(cancelRecording);
+  const resetVoiceRecorderRef = (0, import_react16.useRef)(resetVoiceRecorder);
+  cancelRecordingRef.current = cancelRecording;
+  resetVoiceRecorderRef.current = resetVoiceRecorder;
+  (0, import_react16.useEffect)(() => {
+    setMessage("");
+    setOptimisticMessages([]);
+    clearAttachments();
+    void cancelRecordingRef.current();
+    resetVoiceRecorderRef.current();
+  }, [clearAttachments, conversationId]);
+  (0, import_react16.useEffect)(() => {
+    if (!isNewSupport) {
+      markConversationRead(conversationId);
+    }
+  }, [conversationId, isNewSupport, markConversationRead]);
+  (0, import_react16.useEffect)(() => {
+    if (!isNewSupport && isEnded) {
+      markConversationRead(conversationId);
+    }
+  }, [conversationId, isEnded, isNewSupport, markConversationRead]);
+  const handleEndReached = (0, import_react16.useCallback)(() => {
+    if (!isNewSupport && hasNextPage && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  }, [fetchNextPage, hasNextPage, isFetchingNextPage, isNewSupport]);
+  const handleSend = (0, import_react16.useCallback)(async () => {
+    const trimmed = message.trim();
+    const content = trimmed.length >= import_sdk_web16.MESSAGE_CONTENT_MIN_LENGTH ? trimmed : t.sharedFiles;
+    if (trimmed.length < import_sdk_web16.MESSAGE_CONTENT_MIN_LENGTH && confirmedFileIds.length === 0) {
+      return;
+    }
+    if (content.length > import_sdk_web16.MESSAGE_CONTENT_MAX_LENGTH || isSending) {
+      return;
+    }
+    const optimisticId = `optimistic-${Date.now()}`;
+    const optimisticMessage = {
+      id: optimisticId,
+      sender: "user",
+      text: content,
+      timestamp: (0, import_sdk_web16.formatMessageTimestamp)(/* @__PURE__ */ new Date(), locale),
+      attachments: pendingAttachments.filter((item) => item.status === "confirmed").map((item) => ({
+        fileId: item.confirmedFileId ?? item.id,
+        fileName: item.fileName,
+        mimeType: item.mimeType,
+        size: item.size
+      }))
+    };
+    setOptimisticMessages((previous) => [...previous, optimisticMessage]);
+    setMessage("");
+    clearAttachments();
+    setIsSending(true);
+    try {
+      const sentMessage = await apiClient.sendMessage({
+        content,
+        conversationId: isNewSupport ? void 0 : conversationId,
+        forceNew: isNewSupport ? true : void 0,
+        fileIds: confirmedFileIds.length > 0 ? confirmedFileIds : void 0
+      });
+      if (isNewSupport) {
+        queryClient.setQueryData(
+          jokkooQueryKeys.messages(sentMessage.conversationId),
+          createMessagesCacheWithMessage(sentMessage)
+        );
+        setOptimisticMessages((previous) => previous.filter((item) => item.id !== optimisticId));
+        navigateTo({
+          name: "conversation",
+          conversationId: sentMessage.conversationId
+        });
+      } else {
+        queryClient.setQueryData(
+          jokkooQueryKeys.messages(conversationId),
+          (current) => prependMessageToMessagesCache(current, sentMessage)
+        );
+        setOptimisticMessages((previous) => previous.filter((item) => item.id !== optimisticId));
+      }
+      void queryClient.invalidateQueries({ queryKey: jokkooQueryKeys.conversations });
+    } catch (error) {
+      setOptimisticMessages((previous) => previous.filter((item) => item.id !== optimisticId));
+      setMessage(trimmed);
+      const errorMessage = error instanceof import_sdk_web16.JokkooApiError && error.message.trim().length > 0 ? error.message : t.sendMessageError;
+      window.alert(errorMessage);
+    } finally {
+      setIsSending(false);
+    }
+  }, [
+    apiClient,
+    clearAttachments,
+    confirmedFileIds,
+    conversationId,
+    isNewSupport,
+    isSending,
+    locale,
+    message,
+    navigateTo,
+    pendingAttachments,
+    queryClient,
+    t
+  ]);
+  const handleSendVoiceMessage = (0, import_react16.useCallback)(async () => {
+    const uploaded = await stopAndUpload();
+    if (!uploaded) {
+      return;
+    }
+    const optimisticId = `optimistic-voice-${Date.now()}`;
+    const optimisticMessage = {
+      id: optimisticId,
+      sender: "user",
+      text: t.voiceMessage,
+      timestamp: (0, import_sdk_web16.formatMessageTimestamp)(/* @__PURE__ */ new Date(), locale),
+      metadata: {
+        isVoiceMessage: true,
+        audioDurationMs: uploaded.audioDurationMs
+      },
+      attachments: [
+        {
+          fileId: uploaded.fileId,
+          fileName: "voice.webm",
+          mimeType: "audio/webm"
+        }
+      ]
+    };
+    setOptimisticMessages((previous) => [...previous, optimisticMessage]);
+    setIsSending(true);
+    try {
+      const sentMessage = await apiClient.sendMessage({
+        content: t.voiceMessage,
+        conversationId: isNewSupport ? void 0 : conversationId,
+        forceNew: isNewSupport ? true : void 0,
+        fileIds: [uploaded.fileId],
+        metadata: {
+          isVoiceMessage: true,
+          audioDurationMs: uploaded.audioDurationMs
+        }
+      });
+      if (isNewSupport) {
+        queryClient.setQueryData(
+          jokkooQueryKeys.messages(sentMessage.conversationId),
+          createMessagesCacheWithMessage(sentMessage)
+        );
+        setOptimisticMessages((previous) => previous.filter((item) => item.id !== optimisticId));
+        navigateTo({
+          name: "conversation",
+          conversationId: sentMessage.conversationId
+        });
+      } else {
+        queryClient.setQueryData(
+          jokkooQueryKeys.messages(conversationId),
+          (current) => prependMessageToMessagesCache(current, sentMessage)
+        );
+        setOptimisticMessages((previous) => previous.filter((item) => item.id !== optimisticId));
+      }
+      void queryClient.invalidateQueries({ queryKey: jokkooQueryKeys.conversations });
+    } catch (error) {
+      setOptimisticMessages((previous) => previous.filter((item) => item.id !== optimisticId));
+      const errorMessage = error instanceof import_sdk_web16.JokkooApiError && error.message.trim().length > 0 ? error.message : t.sendMessageError;
+      window.alert(errorMessage);
+    } finally {
+      resetVoiceRecorder();
+      setIsSending(false);
+    }
+  }, [
+    apiClient,
+    conversationId,
+    isNewSupport,
+    locale,
+    navigateTo,
+    queryClient,
+    resetVoiceRecorder,
+    stopAndUpload,
+    t.sendMessageError,
+    t.voiceMessage
+  ]);
+  const handleSatisfactionSubmit = (0, import_react16.useCallback)(
+    async (score) => {
+      await apiClient.recordSatisfaction(conversationId, score);
+      markConversationRead(conversationId);
+      await queryClient.invalidateQueries({ queryKey: jokkooQueryKeys.conversations });
+      await queryClient.invalidateQueries({ queryKey: jokkooQueryKeys.messages(conversationId) });
+    },
+    [apiClient, conversationId, markConversationRead, queryClient]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "jk-conversation", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      ConversationHeader,
+      {
+        title: headerTitle,
+        status: isNewSupport ? void 0 : conversation?.status,
+        t,
+        onBack: goBack
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      MessageList,
+      {
+        messages,
+        apiClient,
+        t,
+        isNewSupport,
+        isLoading,
+        isError,
+        isFetchingNextPage,
+        pendingNewMessages,
+        onLoadOlder: handleEndReached,
+        onScrolledToBottom: notifyScrolledToBottom,
+        onScrolledAwayFromBottom: notifyScrolledAwayFromBottom,
+        onJumpToLatest: notifyScrolledToBottom
+      }
+    ),
+    isAwaitingRating ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      SatisfactionRating,
+      {
+        t,
+        message: satisfactionMessage,
+        onSubmit: handleSatisfactionSubmit
+      }
+    ) : isRecordingActive ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      VoiceRecordingOverlay,
+      {
+        t,
+        durationMs: voiceDurationMs,
+        meteringLevels: voiceMeteringLevels,
+        isUploading: voiceRecorderState === "uploading",
+        uploadProgress: voiceUploadProgress,
+        onCancel: () => {
+          void cancelRecording();
+        },
+        onSend: () => {
+          void handleSendVoiceMessage();
+        }
+      }
+    ) : isEnded ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      ResolvedBanner,
+      {
+        t,
+        onNewRequest: () => navigateTo({ name: "conversation", conversationId: import_sdk_web16.NEW_CONVERSATION_ID })
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+      canReplyInClosedConversation ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        ResolvedBanner,
+        {
+          t,
+          canReplyInConversation: true,
+          onNewRequest: () => navigateTo({ name: "conversation", conversationId: import_sdk_web16.NEW_CONVERSATION_ID })
+        }
+      ) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        MessageInput,
+        {
+          t,
+          apiClient,
+          value: message,
+          onChange: setMessage,
+          pendingAttachments,
+          onRemoveAttachment: removeAttachment,
+          onRetryAttachment: retryAttachment,
+          onPickAttachments: pickAttachments,
+          canSend,
+          canRecordVoice,
+          onSend: () => {
+            void handleSend();
+          },
+          onStartRecording: () => {
+            void startRecording();
+          }
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/FloatingButton.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function formatBadgeLabel2(count) {
+  if (count > 99) {
+    return "99+";
+  }
+  return String(count);
+}
+function FloatingButton({
+  position = "bottom-right",
+  label,
+  onClick,
+  showBadge = true,
+  className
+}) {
+  const { t, openChat, unreadCount } = useJokkooContext();
+  const displayLabel = label ?? t.newSupportRequest;
+  const badgeVisible = showBadge && unreadCount > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    "button",
+    {
+      type: "button",
+      className: `jk-floating-btn jk-floating-btn--${position}${className ? ` ${className}` : ""}`,
+      "aria-label": badgeVisible ? `Open Jokkoo support, ${unreadCount} unread conversations` : "Open Jokkoo support",
+      onClick: onClick ?? openChat,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "jk-floating-btn__icon", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChatIcon, { color: "currentColor", size: 20 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "jk-floating-btn__label", children: displayLabel }),
+        badgeVisible ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "jk-floating-btn__badge", children: formatBadgeLabel2(unreadCount) }) : null
+      ]
+    }
+  );
+}
+
+// src/components/RequestListScreen.tsx
+var import_sdk_web18 = require("@jokkoo/sdk-web");
+var import_react17 = require("react");
+
+// src/components/RequestCard.tsx
+var import_sdk_web17 = require("@jokkoo/sdk-web");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function RequestCard({
+  conversation,
+  t,
+  locale,
+  isUnread = false,
+  onPress,
+  apiClient
+}) {
+  const title = (0, import_sdk_web17.getConversationDisplayName)(conversation, t);
+  const avatarInitials = (0, import_sdk_web17.getAgentInitials)(conversation.assignedAgentName, "SP");
+  const avatarUrl = conversation.assignedAgentAvatarUrl ? apiClient.resolveUrl(conversation.assignedAgentAvatarUrl) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    "button",
+    {
+      type: "button",
+      className: `jk-request-card${isUnread ? " jk-request-card--unread" : ""}`,
+      "aria-label": isUnread ? `${title}, ${conversation.lastMessageText ?? t.noMessagesYet}, unread` : `${title}, ${conversation.lastMessageText ?? t.noMessagesYet}`,
+      onClick: () => onPress(conversation.id),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          Avatar,
+          {
+            initials: avatarInitials,
+            size: 48,
+            showUnreadIndicator: isUnread,
+            imageUrl: avatarUrl
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "jk-request-card__content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "jk-request-card__row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "jk-request-card__title", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StatusBadge, { status: conversation.status, t })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            "p",
+            {
+              className: `jk-request-card__preview${isUnread ? " jk-request-card__preview--unread" : ""}`,
+              children: conversation.lastMessageText ?? t.noMessagesYet
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "jk-request-card__time", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ClockIcon, { color: "currentColor", size: 11 }),
+            (0, import_sdk_web17.formatRelativeTimestamp)(conversation.updatedAt, {
+              locale,
+              nowLabel: t.now
+            })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/RequestListScreen.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function RequestListScreen() {
+  const { t, locale, navigateTo, isConversationUnread, apiClient } = useJokkooContext();
+  const {
+    conversations,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isLoading,
+    isError,
+    refetch
+  } = useConversations();
+  const activeCount = conversations.filter((conversation) => conversation.status === "open").length;
+  const handleScroll = (0, import_react17.useCallback)(
+    (event) => {
+      const target = event.currentTarget;
+      const nearBottom = target.scrollHeight - target.scrollTop - target.clientHeight < 80;
+      if (nearBottom && hasNextPage && !isFetchingNextPage) {
+        fetchNextPage();
+      }
+    },
+    [fetchNextPage, hasNextPage, isFetchingNextPage]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "jk-request-list", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "jk-request-list__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h2", { className: "jk-request-list__title", children: t.supportCenter }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "jk-request-list__subtitle", children: t.activeConversation(activeCount) }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "jk-request-list__section", children: t.myRequests })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "jk-request-list__items", onScroll: handleScroll, children: [
+      conversations.length === 0 ? isLoading ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "jk-empty", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "jk-spinner" }) }) : isError ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "jk-empty", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: t.unableToLoadConversations }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", className: "jk-empty__retry", onClick: refetch, children: t.retry })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "jk-empty", children: t.noConversationsYet }) : conversations.map((item) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        RequestCard,
+        {
+          conversation: item,
+          t,
+          locale,
+          isUnread: isConversationUnread(item.id),
+          onPress: (conversationId) => navigateTo({ name: "conversation", conversationId }),
+          apiClient
+        },
+        item.id
+      )),
+      isFetchingNextPage ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "jk-empty", style: { paddingTop: 16 }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "jk-spinner" }) }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "jk-request-list__footer", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: "jk-floating-btn",
+        style: { position: "static" },
+        "aria-label": t.newSupportRequest,
+        onClick: () => navigateTo({ name: "conversation", conversationId: import_sdk_web18.NEW_CONVERSATION_ID }),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "jk-floating-btn__icon", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChatIcon, { color: "currentColor", size: 20 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "jk-floating-btn__label", children: t.newSupportRequest })
+        ]
+      }
+    ) })
+  ] });
+}
+
+// src/components/PanelHeader.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function PanelHeader({
+  variant = "light",
+  onExpand,
+  onClose,
+  expandLabel = "Expand",
+  closeLabel = "Close"
+}) {
+  const dark = variant === "dark";
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: `jk-panel-header${dark ? " jk-panel-header--dark" : ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      "button",
+      {
+        type: "button",
+        className: `jk-icon-btn${dark ? " jk-icon-btn--dark" : ""}`,
+        "aria-label": expandLabel,
+        onClick: onExpand,
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ExpandIcon, { color: "currentColor", size: 14 })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      "button",
+      {
+        type: "button",
+        className: `jk-icon-btn${dark ? " jk-icon-btn--dark" : ""}`,
+        "aria-label": closeLabel,
+        onClick: onClose,
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CloseIcon, { color: "currentColor", size: 14 })
+      }
+    )
+  ] });
+}
+
+// src/components/WidgetPanel.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function WidgetPanel({ children, headerVariant = "light" }) {
+  const { isExpanded, toggleExpanded, closeChat } = useJokkooContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: `jk-panel${isExpanded ? " jk-panel--expanded" : ""}`, role: "dialog", "aria-modal": true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      PanelHeader,
+      {
+        variant: headerVariant,
+        onExpand: toggleExpanded,
+        onClose: closeChat
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "jk-panel-body", children })
+  ] });
+}
+
+// src/components/JokkooWidget.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function JokkooWidget({ position = "bottom-right", launcherLabel }) {
+  const { isChatOpen, currentScreen } = useJokkooContext();
+  useRealtimeConversations();
+  const headerVariant = currentScreen.name === "conversation" ? "dark" : "light";
+  if (!isChatOpen) {
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(FloatingButton, { position, label: launcherLabel });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(WidgetPanel, { headerVariant, children: currentScreen.name === "requestList" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(RequestListScreen, {}) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    ConversationScreen,
+    {
+      conversationId: currentScreen.conversationId
+    },
+    currentScreen.conversationId
+  ) });
+}
+
+// src/hooks/useSendMessage.ts
+var import_react_query8 = require("@tanstack/react-query");
+function useSendMessage() {
+  const { apiClient } = useJokkooContext();
+  const queryClient = (0, import_react_query8.useQueryClient)();
+  return (0, import_react_query8.useMutation)({
+    mutationFn: (payload) => apiClient.sendMessage(payload),
+    onSuccess: (message) => {
+      void queryClient.invalidateQueries({ queryKey: jokkooQueryKeys.conversations });
+      void queryClient.invalidateQueries({
+        queryKey: jokkooQueryKeys.messages(message.conversationId)
+      });
+    }
+  });
+}
+
+// src/hooks/useUnreadCount.ts
+function useUnreadCount() {
+  return useJokkooContext().unreadCount;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ConversationScreen,
+  FloatingButton,
+  JokkooButton,
+  JokkooProvider,
+  JokkooWidget,
+  NEW_CONVERSATION_ID,
+  RequestListScreen,
+  WidgetPanel,
+  defaultTheme,
+  jokkooQueryKeys,
+  mergeTheme,
+  themeToCssVars,
+  useConversations,
+  useFileUpload,
+  useJokkooContext,
+  useMessages,
+  useRealtimeStatus,
+  useSendMessage,
+  useUnreadCount,
+  useVoiceRecorder
+});
+//# sourceMappingURL=index.js.map