@jokkoo/sdk-react 0.1.0

package/dist/index.mjs

@@ -0,0 +1,2794 @@
+// src/context/JokkooProvider.tsx
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+  Jokkoo,
+  JokkooApiClient,
+  NEW_CONVERSATION_ID,
+  getTranslations
+} from "@jokkoo/sdk-web";
+import {
+  createContext,
+  useCallback as useCallback2,
+  useContext,
+  useEffect as useEffect2,
+  useMemo,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+
+// src/hooks/useGlobalRealtimeListener.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  REALTIME_EVENTS,
+  shouldCountMessageAsUnread
+} from "@jokkoo/sdk-web";
+
+// src/lib/realtime-cache-utils.ts
+import {
+  mapRealtimeConversationPayload,
+  normalizeRealtimeMessage
+} from "@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] = useState(realtimeClient.getStatus());
+  const [unreadConversationIds, setUnreadConversationIds] = useState(
+    () => /* @__PURE__ */ new Set()
+  );
+  const isChatOpenRef = useRef(isChatOpen);
+  const currentScreenRef = useRef(currentScreen);
+  isChatOpenRef.current = isChatOpen;
+  currentScreenRef.current = currentScreen;
+  const unreadCount = unreadConversationIds.size;
+  const isConversationUnread = useCallback(
+    (conversationId) => unreadConversationIds.has(conversationId),
+    [unreadConversationIds]
+  );
+  useEffect(() => {
+    return realtimeClient.onStatusChange(setStatus);
+  }, [realtimeClient]);
+  const markConversationRead = 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 = useCallback((conversationId) => {
+    setUnreadConversationIds((current) => {
+      if (current.has(conversationId)) {
+        return current;
+      }
+      const next = new Set(current);
+      next.add(conversationId);
+      return next;
+    });
+  }, []);
+  useEffect(() => {
+    let cancelled = false;
+    void apiClient.getUnreadCount().then((response) => {
+      if (cancelled) {
+        return;
+      }
+      setUnreadConversationIds(new Set(response.conversationIds));
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [apiClient]);
+  useEffect(() => {
+    if (status !== "connected") {
+      return;
+    }
+    const socket = realtimeClient.getSocket();
+    if (!socket) {
+      return;
+    }
+    const handleConversationCreated = (payload) => {
+      prependConversationToListCache(
+        queryClient,
+        mapRealtimeConversationPayload(payload.conversation)
+      );
+    };
+    const handleConversationUpdated = (payload) => {
+      const conversation = mapRealtimeConversationPayload(payload.conversation);
+      upsertConversationInListCache(queryClient, conversation);
+      if (conversation.status === "closed") {
+        markConversationRead(conversation.id);
+      }
+    };
+    const handleMessageCreated = (payload) => {
+      if (!payload?.message) {
+        return;
+      }
+      const message = 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 (shouldCountMessageAsUnread(message)) {
+        addUnreadConversation(message.conversationId);
+      }
+    };
+    socket.on(REALTIME_EVENTS.messageCreated, handleMessageCreated);
+    socket.on(REALTIME_EVENTS.conversationCreated, handleConversationCreated);
+    socket.on(REALTIME_EVENTS.conversationUpdated, handleConversationUpdated);
+    return () => {
+      socket.off(REALTIME_EVENTS.messageCreated, handleMessageCreated);
+      socket.off(REALTIME_EVENTS.conversationCreated, handleConversationCreated);
+      socket.off(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
+import { jsx } from "react/jsx-runtime";
+var initialScreen = { name: "requestList" };
+var JokkooContext = createContext(null);
+function createDefaultQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: 1,
+        refetchOnWindowFocus: false
+      }
+    }
+  });
+}
+function JokkooProvider({
+  children,
+  theme,
+  clientToken,
+  userTokenProvider,
+  baseUrl,
+  locale,
+  debug,
+  tokenRefreshBufferSeconds,
+  queryClient: externalQueryClient
+}) {
+  const [isChatOpen, setIsChatOpen] = useState2(false);
+  const [isExpanded, setIsExpanded] = useState2(false);
+  const [currentScreen, setCurrentScreen] = useState2(initialScreen);
+  const resolvedTheme = useMemo(() => mergeTheme(theme), [theme]);
+  const themeStyle = useMemo(
+    () => themeToCssVars(resolvedTheme),
+    [resolvedTheme]
+  );
+  const tokenProviderRef = useRef2(userTokenProvider);
+  tokenProviderRef.current = userTokenProvider;
+  const internalQueryClientRef = useRef2(null);
+  if (!externalQueryClient && !internalQueryClientRef.current) {
+    internalQueryClientRef.current = createDefaultQueryClient();
+  }
+  const queryClient = externalQueryClient ?? internalQueryClientRef.current;
+  const translations = useMemo(() => getTranslations(locale), [locale]);
+  const apiClient = useMemo(() => {
+    Jokkoo.init({
+      clientToken,
+      baseUrl,
+      locale,
+      debug,
+      tokenRefreshBufferSeconds,
+      userTokenProvider: () => tokenProviderRef.current()
+    });
+    void Jokkoo.getRealtimeClient().connect();
+    return new JokkooApiClient(Jokkoo.getConfig(), Jokkoo.getTokenManager());
+  }, [clientToken, baseUrl, locale, debug, tokenRefreshBufferSeconds]);
+  const realtimeClient = useMemo(() => Jokkoo.getRealtimeClient(), [apiClient]);
+  const { unreadCount, markConversationRead, isConversationUnread } = useGlobalRealtimeListener({
+    apiClient,
+    realtimeClient,
+    queryClient,
+    isChatOpen,
+    currentScreen
+  });
+  useEffect2(() => {
+    return () => {
+      Jokkoo.destroy();
+    };
+  }, []);
+  const resetNavigation = useCallback2(() => {
+    setCurrentScreen(initialScreen);
+    setIsExpanded(false);
+  }, []);
+  const openChat = useCallback2(() => {
+    if (!Jokkoo.isInitialized()) {
+      throw new Error(
+        "Jokkoo SDK is not initialized. Ensure <JokkooProvider> is mounted with valid config."
+      );
+    }
+    resetNavigation();
+    setIsChatOpen(true);
+  }, [resetNavigation]);
+  const closeChat = useCallback2(() => {
+    setIsChatOpen(false);
+    resetNavigation();
+  }, [resetNavigation]);
+  const toggleExpanded = useCallback2(() => {
+    setIsExpanded((current) => !current);
+  }, []);
+  const navigateTo = useCallback2((screen) => {
+    setCurrentScreen(screen);
+  }, []);
+  const goBack = useCallback2(() => {
+    setCurrentScreen(initialScreen);
+  }, []);
+  const value = 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__ */ jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx(JokkooContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { className: "jokkoo-widget", style: themeStyle, children }) }) });
+}
+function useJokkooContext() {
+  const context = useContext(JokkooContext);
+  if (!context) {
+    throw new Error("Jokkoo UI components must be wrapped in <JokkooProvider>.");
+  }
+  return context;
+}
+
+// src/hooks/useRealtimeConversations.ts
+import { useQueryClient } from "@tanstack/react-query";
+import {
+  REALTIME_EVENTS as REALTIME_EVENTS2
+} from "@jokkoo/sdk-web";
+import { useEffect as useEffect4 } from "react";
+
+// src/hooks/useRealtimeStatus.ts
+import { useEffect as useEffect3, useState as useState3 } from "react";
+function useRealtimeStatus() {
+  const { realtimeClient } = useJokkooContext();
+  const [status, setStatus] = useState3(realtimeClient.getStatus());
+  useEffect3(() => {
+    return realtimeClient.onStatusChange(setStatus);
+  }, [realtimeClient]);
+  return status;
+}
+
+// src/hooks/useRealtimeConversations.ts
+function useRealtimeConversations() {
+  const { realtimeClient } = useJokkooContext();
+  const queryClient = useQueryClient();
+  const status = useRealtimeStatus();
+  useEffect4(() => {
+    if (status !== "connected") {
+      return;
+    }
+    const socket = realtimeClient.getSocket();
+    if (!socket) {
+      return;
+    }
+    const handleConversationCreated = (payload) => {
+      prependConversationToListCache(
+        queryClient,
+        mapRealtimeConversationPayload(payload.conversation)
+      );
+    };
+    const handleConversationUpdated = (payload) => {
+      upsertConversationInListCache(
+        queryClient,
+        mapRealtimeConversationPayload(payload.conversation)
+      );
+    };
+    const handleMessageCreated = (payload) => {
+      const message = normalizeRealtimeMessage(payload.message);
+      updateConversationPreviewFromMessage(queryClient, message);
+    };
+    socket.on(REALTIME_EVENTS2.messageCreated, handleMessageCreated);
+    socket.on(REALTIME_EVENTS2.conversationCreated, handleConversationCreated);
+    socket.on(REALTIME_EVENTS2.conversationUpdated, handleConversationUpdated);
+    return () => {
+      socket.off(REALTIME_EVENTS2.messageCreated, handleMessageCreated);
+      socket.off(REALTIME_EVENTS2.conversationCreated, handleConversationCreated);
+      socket.off(REALTIME_EVENTS2.conversationUpdated, handleConversationUpdated);
+    };
+  }, [queryClient, realtimeClient, status]);
+}
+
+// src/components/ConversationScreen.tsx
+import { useQueryClient as useQueryClient3 } from "@tanstack/react-query";
+import {
+  JokkooApiError,
+  MESSAGE_CONTENT_MAX_LENGTH as MESSAGE_CONTENT_MAX_LENGTH2,
+  MESSAGE_CONTENT_MIN_LENGTH,
+  NEW_CONVERSATION_ID as NEW_CONVERSATION_ID4,
+  canReplyToClosedConversation,
+  conversationNeedsRating,
+  createWelcomeMessage,
+  formatMessageTimestamp,
+  getConversationDisplayName,
+  getSatisfactionSurveyMessage,
+  isSatisfactionRequestMessage as isSatisfactionRequestMessage2,
+  mapMessageToChatMessage
+} from "@jokkoo/sdk-web";
+import { useCallback as useCallback8, useEffect as useEffect10, useMemo as useMemo6, useRef as useRef8, useState as useState11 } from "react";
+
+// src/hooks/useClosedConversationPolicy.ts
+import { useQuery } from "@tanstack/react-query";
+function useClosedConversationPolicy() {
+  const { apiClient } = useJokkooContext();
+  return useQuery({
+    queryKey: jokkooQueryKeys.conversationPolicies,
+    queryFn: () => apiClient.getConversationPolicies(),
+    staleTime: 5 * 60 * 1e3
+  });
+}
+
+// src/hooks/useConversations.ts
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { useMemo as useMemo2 } from "react";
+var DEFAULT_PAGE_SIZE2 = 20;
+function useConversations(options) {
+  const { apiClient } = useJokkooContext();
+  const pageSize = options?.pageSize ?? DEFAULT_PAGE_SIZE2;
+  const query = 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 = useMemo2(
+    () => 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
+import {
+  canAddMoreAttachments,
+  createPendingAttachment,
+  uploadAttachmentFile
+} from "@jokkoo/sdk-web";
+import { useCallback as useCallback3, useRef as useRef3, useState as useState4 } from "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] = useState4([]);
+  const inputRef = useRef3(null);
+  const ensureInput = useCallback3(() => {
+    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 = useCallback3(
+    async (attachment) => {
+      setPendingAttachments(
+        (current) => current.map(
+          (item) => item.id === attachment.id ? { ...item, status: "uploading", progress: 5 } : item
+        )
+      );
+      try {
+        const uploaded = await 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 = useCallback3(
+    async (attachment) => {
+      if (!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 = useCallback3(() => {
+    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 = createPendingAttachment({
+          fileName: file.name,
+          mimeType: file.type || "application/octet-stream",
+          uri,
+          size: file.size
+        });
+        void appendAttachment(attachment);
+      }
+    };
+    input.click();
+  }, [appendAttachment, ensureInput]);
+  const retryAttachment = useCallback3(
+    (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 = useCallback3((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 = useCallback3(() => {
+    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
+import { useInfiniteQuery as useInfiniteQuery2 } from "@tanstack/react-query";
+import {
+  NEW_CONVERSATION_ID as NEW_CONVERSATION_ID2,
+  fetchMessagesPage,
+  getOlderMessagesPageParam
+} from "@jokkoo/sdk-web";
+import { useMemo as useMemo3 } from "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 !== NEW_CONVERSATION_ID2;
+  const query = useInfiniteQuery2({
+    queryKey: jokkooQueryKeys.messages(conversationId),
+    initialPageParam: "latest",
+    enabled,
+    staleTime: 0,
+    queryFn: ({ pageParam }) => fetchMessagesPage(apiClient, conversationId, pageSize, pageParam),
+    getNextPageParam: (lastPage) => getOlderMessagesPageParam(lastPage)
+  });
+  const messages = useMemo3(
+    () => 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
+import { useQueryClient as useQueryClient2 } from "@tanstack/react-query";
+import {
+  NEW_CONVERSATION_ID as NEW_CONVERSATION_ID3,
+  REALTIME_EVENTS as REALTIME_EVENTS3,
+  isSatisfactionRequestMessage
+} from "@jokkoo/sdk-web";
+import { useCallback as useCallback4, useEffect as useEffect5, useRef as useRef4, useState as useState5 } from "react";
+function useRealtimeMessages(conversationId) {
+  const { realtimeClient } = useJokkooContext();
+  const queryClient = useQueryClient2();
+  const status = useRealtimeStatus();
+  const [pendingNewMessages, setPendingNewMessages] = useState5(0);
+  const isAtBottomRef = useRef4(true);
+  const conversationIdRef = useRef4(conversationId);
+  conversationIdRef.current = conversationId;
+  const clearPendingNewMessages = useCallback4(() => {
+    setPendingNewMessages(0);
+  }, []);
+  const notifyScrolledToBottom = useCallback4(() => {
+    isAtBottomRef.current = true;
+    setPendingNewMessages(0);
+  }, []);
+  const notifyScrolledAwayFromBottom = useCallback4(() => {
+    isAtBottomRef.current = false;
+  }, []);
+  useEffect5(() => {
+    setPendingNewMessages(0);
+    isAtBottomRef.current = true;
+  }, [conversationId]);
+  useEffect5(() => {
+    if (status !== "connected" || conversationId === NEW_CONVERSATION_ID3) {
+      return;
+    }
+    const socket = realtimeClient.getSocket();
+    if (!socket) {
+      return;
+    }
+    const handleMessageCreated = (payload) => {
+      if (!payload?.message) {
+        return;
+      }
+      const message = normalizeRealtimeMessage(payload.message);
+      if (message.conversationId !== conversationIdRef.current) {
+        return;
+      }
+      appendMessageToCache(queryClient, message);
+      updateConversationPreviewFromMessage(queryClient, message);
+      if (isSatisfactionRequestMessage(message)) {
+        updateConversationStatusInListCache(queryClient, message.conversationId, "pending_closure");
+      }
+      if (message.senderType === "agent" || message.senderType === "system") {
+        if (!isAtBottomRef.current) {
+          setPendingNewMessages((count) => count + 1);
+        }
+      }
+    };
+    socket.on(REALTIME_EVENTS3.messageCreated, handleMessageCreated);
+    return () => {
+      socket.off(REALTIME_EVENTS3.messageCreated, handleMessageCreated);
+    };
+  }, [conversationId, queryClient, realtimeClient, status]);
+  return {
+    pendingNewMessages,
+    clearPendingNewMessages,
+    notifyScrolledToBottom,
+    notifyScrolledAwayFromBottom
+  };
+}
+
+// src/hooks/useVoiceRecorder.ts
+import {
+  applyLiveBarVariation,
+  blendLiveWaveformLevels,
+  createIdleMeteringLevels,
+  createVoiceMessageFileName,
+  shiftMeteringLevel,
+  smoothMeteringSample,
+  uploadVoiceBlob
+} from "@jokkoo/sdk-web";
+import { useCallback as useCallback5, useEffect as useEffect6, useRef as useRef5, useState as useState6 } from "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] = useState6("idle");
+  const [durationMs, setDurationMs] = useState6(0);
+  const [meteringLevels, setMeteringLevels] = useState6(() => createIdleMeteringLevels());
+  const [uploadProgress, setUploadProgress] = useState6(0);
+  const [confirmedFileId, setConfirmedFileId] = useState6(null);
+  const [audioDurationMs, setAudioDurationMs] = useState6(0);
+  const mediaRecorderRef = useRef5(null);
+  const mediaStreamRef = useRef5(null);
+  const chunksRef = useRef5([]);
+  const mimeTypeRef = useRef5("audio/webm");
+  const durationStartedAtRef = useRef5(null);
+  const durationTimerRef = useRef5(null);
+  const analyserRef = useRef5(null);
+  const audioContextRef = useRef5(null);
+  const meteringTimerRef = useRef5(null);
+  const smoothedMeteringRef = useRef5(createIdleMeteringLevels()[0]);
+  const sampleIndexRef = useRef5(0);
+  const clearTimers = useCallback5(() => {
+    if (durationTimerRef.current) {
+      clearInterval(durationTimerRef.current);
+      durationTimerRef.current = null;
+    }
+    if (meteringTimerRef.current) {
+      clearInterval(meteringTimerRef.current);
+      meteringTimerRef.current = null;
+    }
+  }, []);
+  const stopTracks = useCallback5(() => {
+    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 = useCallback5(() => {
+    clearTimers();
+    stopTracks();
+    chunksRef.current = [];
+    setState("idle");
+    setDurationMs(0);
+    setMeteringLevels(createIdleMeteringLevels());
+    setUploadProgress(0);
+    setConfirmedFileId(null);
+    setAudioDurationMs(0);
+    durationStartedAtRef.current = null;
+    smoothedMeteringRef.current = createIdleMeteringLevels()[0];
+    sampleIndexRef.current = 0;
+  }, [clearTimers, stopTracks]);
+  useEffect6(() => {
+    return () => {
+      clearTimers();
+      stopTracks();
+    };
+  }, [clearTimers, stopTracks]);
+  const startRecording = useCallback5(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(createIdleMeteringLevels());
+      setUploadProgress(0);
+      setConfirmedFileId(null);
+      setAudioDurationMs(0);
+      durationStartedAtRef.current = Date.now();
+      smoothedMeteringRef.current = 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 = smoothMeteringSample(smoothedMeteringRef.current, rawLevel);
+        const variedLevel = applyLiveBarVariation(
+          smoothedMeteringRef.current,
+          sampleIndexRef.current
+        );
+        sampleIndexRef.current += 1;
+        setMeteringLevels((previous) => {
+          const shifted = shiftMeteringLevel(previous, variedLevel);
+          const sized = shifted.length >= VOICE_METERING_HISTORY_SIZE ? shifted.slice(shifted.length - VOICE_METERING_HISTORY_SIZE) : [
+            ...createIdleMeteringLevels(VOICE_METERING_HISTORY_SIZE - shifted.length),
+            ...shifted
+          ];
+          return blendLiveWaveformLevels(sized);
+        });
+      }, METERING_SAMPLE_INTERVAL_MS);
+    } catch {
+      window.alert(t.microphonePermissionDenied);
+      reset();
+    }
+  }, [reset, state, t.microphonePermissionDenied]);
+  const cancelRecording = useCallback5(async () => {
+    if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
+      mediaRecorderRef.current.stop();
+    }
+    reset();
+  }, [reset]);
+  const stopAndUpload = useCallback5(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 uploadVoiceBlob(
+        apiClient,
+        blob,
+        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
+import { jsx as jsx2, jsxs } from "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__ */ jsx2("svg", { viewBox: "0 0 24 24", fill: "none", style: baseStyle(size, color), "aria-hidden": true, ...rest, children: /* @__PURE__ */ jsx2(
+    "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__ */ jsx2("svg", { viewBox: "0 0 24 24", fill: "none", style: baseStyle(size, color), "aria-hidden": true, ...rest, children: /* @__PURE__ */ jsx2(
+    "path",
+    {
+      d: "M18 6L6 18M6 6l12 12",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round"
+    }
+  ) });
+}
+function ExpandIcon({ color = "currentColor", size = 16, ...rest }) {
+  return /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 24 24", fill: "none", style: baseStyle(size, color), "aria-hidden": true, ...rest, children: /* @__PURE__ */ jsx2(
+    "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__ */ jsx2("svg", { viewBox: "0 0 24 24", fill: "none", style: baseStyle(size, color), "aria-hidden": true, ...rest, children: /* @__PURE__ */ jsx2(
+    "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__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", style: baseStyle(size, color), "aria-hidden": true, ...rest, children: [
+    /* @__PURE__ */ jsx2("rect", { x: "9", y: "2", width: "6", height: "12", rx: "3", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx2(
+      "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__ */ jsx2("svg", { viewBox: "0 0 24 24", fill: "none", style: baseStyle(size, color), "aria-hidden": true, ...rest, children: /* @__PURE__ */ jsx2(
+    "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__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", style: baseStyle(size, color), "aria-hidden": true, ...rest, children: [
+    /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx2("path", { d: "M12 7v5l3 2", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+  ] });
+}
+function CheckCircleIcon({ color = "currentColor", size = 14, ...rest }) {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", style: baseStyle(size, color), "aria-hidden": true, ...rest, children: [
+    /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx2(
+      "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__ */ jsx2("svg", { viewBox: "0 0 24 24", fill: "none", style: baseStyle(size, color), "aria-hidden": true, ...rest, children: /* @__PURE__ */ jsx2(
+    "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__ */ jsx2("svg", { viewBox: "0 0 24 24", fill: "currentColor", style: baseStyle(size, color), "aria-hidden": true, ...rest, children: /* @__PURE__ */ jsx2("path", { d: "M8 5v14l11-7L8 5z" }) });
+}
+function PauseIcon({ color = "currentColor", size = 16, ...rest }) {
+  return /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 24 24", fill: "currentColor", style: baseStyle(size, color), "aria-hidden": true, ...rest, children: /* @__PURE__ */ jsx2("path", { d: "M6 5h4v14H6V5zm8 0h4v14h-4V5z" }) });
+}
+function ArrowDownIcon({ color = "currentColor", size = 20, ...rest }) {
+  return /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 24 24", fill: "none", style: baseStyle(size, color), "aria-hidden": true, ...rest, children: /* @__PURE__ */ jsx2(
+    "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
+import { jsx as jsx3 } from "react/jsx-runtime";
+function StatusBadge({ status, t }) {
+  const info = getStatusBadgeInfo(status, t);
+  return /* @__PURE__ */ jsx3("span", { className: `jk-status-badge jk-status-badge--${info.variant}`, children: info.label });
+}
+
+// src/components/ConversationHeader.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function ConversationHeader({ title, status, t, onBack }) {
+  return /* @__PURE__ */ jsxs2("div", { className: "jk-conversation-header", children: [
+    /* @__PURE__ */ jsx4(
+      "button",
+      {
+        type: "button",
+        className: "jk-icon-btn jk-icon-btn--dark",
+        "aria-label": "Back",
+        onClick: onBack,
+        children: /* @__PURE__ */ jsx4(ArrowLeftIcon, { color: "currentColor", size: 16 })
+      }
+    ),
+    /* @__PURE__ */ jsx4("h2", { className: "jk-conversation-header__title", children: title }),
+    status ? /* @__PURE__ */ jsx4(StatusBadge, { status, t }) : null
+  ] });
+}
+
+// src/components/MessageInput.tsx
+import {
+  MESSAGE_CONTENT_MAX_LENGTH
+} from "@jokkoo/sdk-web";
+
+// src/components/PendingAttachmentList.tsx
+import {
+  isImageMimeType
+} from "@jokkoo/sdk-web";
+import { jsx as jsx5, jsxs as jsxs3 } from "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__ */ jsx5("div", { className: "jk-pending-list", children: attachments.map((attachment) => /* @__PURE__ */ jsxs3("div", { className: "jk-pending-item", children: [
+    /* @__PURE__ */ jsx5("div", { className: "jk-pending-item__thumb", children: isImageMimeType(attachment.mimeType) ? /* @__PURE__ */ jsx5("img", { src: attachment.uri, alt: attachment.fileName }) : /* @__PURE__ */ jsx5("span", { children: attachment.mimeType.startsWith("video/") ? "\u25B6" : "\u{1F4C4}" }) }),
+    /* @__PURE__ */ jsxs3("div", { className: "jk-pending-item__details", children: [
+      /* @__PURE__ */ jsx5("div", { className: "jk-pending-item__name", children: attachment.fileName }),
+      /* @__PURE__ */ jsx5(
+        "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__ */ jsx5("div", { className: "jk-pending-item__progress", children: /* @__PURE__ */ jsx5(
+        "div",
+        {
+          className: "jk-pending-item__progress-fill",
+          style: { width: `${Math.max(attachment.progress, 8)}%` }
+        }
+      ) }) : null
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "jk-pending-item__actions", children: [
+      attachment.status === "error" ? /* @__PURE__ */ jsx5("button", { type: "button", onClick: () => onRetry(attachment.id), children: t.retryUpload }) : attachment.status === "uploading" || attachment.status === "confirming" ? /* @__PURE__ */ jsx5("div", { className: "jk-spinner", style: { width: 16, height: 16 } }) : null,
+      /* @__PURE__ */ jsx5("button", { type: "button", onClick: () => onRemove(attachment.id), children: t.cancel })
+    ] })
+  ] }, attachment.id)) });
+}
+
+// src/components/MessageInput.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function MessageInput({
+  t,
+  apiClient,
+  value,
+  onChange,
+  pendingAttachments,
+  onRemoveAttachment,
+  onRetryAttachment,
+  onPickAttachments,
+  canSend,
+  canRecordVoice,
+  onSend,
+  onStartRecording
+}) {
+  const isOverLimit = value.length > MESSAGE_CONTENT_MAX_LENGTH;
+  return /* @__PURE__ */ jsxs4("div", { className: "jk-input-bar", children: [
+    pendingAttachments.length > 0 ? /* @__PURE__ */ jsx6(
+      PendingAttachmentList,
+      {
+        attachments: pendingAttachments,
+        apiClient,
+        t,
+        onRemove: onRemoveAttachment,
+        onRetry: onRetryAttachment
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs4("div", { className: "jk-input-shell", children: [
+      /* @__PURE__ */ jsx6(
+        "button",
+        {
+          type: "button",
+          className: "jk-input-shell__icon",
+          "aria-label": t.attachFile,
+          onClick: onPickAttachments,
+          children: /* @__PURE__ */ jsx6(PaperclipIcon, { color: "currentColor", size: 16 })
+        }
+      ),
+      /* @__PURE__ */ jsxs4("div", { className: "jk-input-shell__field", children: [
+        /* @__PURE__ */ jsx6(
+          "textarea",
+          {
+            rows: 1,
+            maxLength: 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__ */ jsxs4(
+          "div",
+          {
+            className: `jk-input-shell__counter${isOverLimit ? " jk-input-shell__counter--error" : ""}`,
+            children: [
+              value.length,
+              "/",
+              MESSAGE_CONTENT_MAX_LENGTH
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx6(
+        "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__ */ jsx6(SendIcon, { color: "currentColor", size: 22 }) : /* @__PURE__ */ jsx6(MicIcon, { color: "currentColor", size: 22 })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/MessageList.tsx
+import { useEffect as useEffect9, useRef as useRef7 } from "react";
+
+// src/components/ActivityEvent.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function ActivityEvent({ text, timestamp }) {
+  const trimmed = text.trim();
+  if (trimmed.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs5("div", { className: "jk-activity", children: [
+    /* @__PURE__ */ jsx7("div", { children: trimmed }),
+    timestamp ? /* @__PURE__ */ jsx7("div", { className: "jk-activity__time", children: timestamp }) : null
+  ] });
+}
+
+// src/components/MessageBubble.tsx
+import {
+  isVoiceMessageMetadata
+} from "@jokkoo/sdk-web";
+
+// src/components/Avatar.tsx
+import { useState as useState7 } from "react";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function Avatar({
+  initials,
+  size = 40,
+  showUnreadIndicator = false,
+  imageUrl
+}) {
+  const [imgError, setImgError] = useState7(false);
+  const showImage = Boolean(imageUrl) && !imgError;
+  const indicatorSize = Math.max(10, Math.round(size * 0.25));
+  return /* @__PURE__ */ jsxs6("div", { className: "jk-avatar", children: [
+    /* @__PURE__ */ jsx8(
+      "div",
+      {
+        className: "jk-avatar__circle",
+        style: { width: size, height: size, fontSize: size * 0.34 },
+        children: showImage ? /* @__PURE__ */ jsx8(
+          "img",
+          {
+            className: "jk-avatar__img",
+            src: imageUrl,
+            alt: "",
+            onError: () => setImgError(true)
+          }
+        ) : initials
+      }
+    ),
+    showUnreadIndicator ? /* @__PURE__ */ jsx8(
+      "span",
+      {
+        className: "jk-avatar__unread",
+        style: { width: indicatorSize, height: indicatorSize }
+      }
+    ) : null
+  ] });
+}
+
+// src/components/MessageAttachments.tsx
+import {
+  canPreviewInApp,
+  isImageMimeType as isImageMimeType2,
+  isVideoMimeType
+} from "@jokkoo/sdk-web";
+import { useEffect as useEffect7, useState as useState8 } from "react";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+function AttachmentDoc({
+  attachment,
+  onPress
+}) {
+  return /* @__PURE__ */ jsxs7("button", { type: "button", className: "jk-attachments__doc", onClick: onPress, children: [
+    /* @__PURE__ */ jsx9("div", { children: isVideoMimeType(attachment.mimeType) ? "Video" : "Document" }),
+    /* @__PURE__ */ jsx9("div", { className: "jk-attachments__doc-name", children: attachment.fileName })
+  ] });
+}
+function AttachmentRow({
+  attachment,
+  apiClient,
+  onPress
+}) {
+  const [downloadUrl, setDownloadUrl] = useState8(null);
+  useEffect7(() => {
+    if (!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 (isImageMimeType2(attachment.mimeType)) {
+    return /* @__PURE__ */ jsx9("button", { type: "button", onClick: onPress, style: { padding: 0, background: "none", border: "none" }, children: downloadUrl ? /* @__PURE__ */ jsx9("img", { className: "jk-attachments__img", src: downloadUrl, alt: attachment.fileName }) : /* @__PURE__ */ jsx9("div", { className: "jk-attachments__img", style: { display: "flex", alignItems: "center", justifyContent: "center", background: "var(--jk-color-surface)" }, children: /* @__PURE__ */ jsx9("div", { className: "jk-spinner" }) }) });
+  }
+  return /* @__PURE__ */ jsx9(AttachmentDoc, { attachment, onPress });
+}
+function MessageAttachments({
+  attachments,
+  apiClient
+}) {
+  return /* @__PURE__ */ jsx9("div", { className: "jk-attachments", children: attachments.map((attachment) => /* @__PURE__ */ jsx9(
+    AttachmentRow,
+    {
+      attachment,
+      apiClient,
+      onPress: () => {
+        void apiClient.getDownloadUrl(attachment.fileId).then((response) => {
+          window.open(response.downloadUrl, "_blank", "noopener,noreferrer");
+        });
+      }
+    },
+    attachment.fileId
+  )) });
+}
+
+// src/components/VoiceMessagePlayer.tsx
+import { formatAudioDuration } from "@jokkoo/sdk-web";
+import { useCallback as useCallback6, useEffect as useEffect8, useMemo as useMemo5, useRef as useRef6, useState as useState9 } from "react";
+
+// src/components/VoiceWaveform.tsx
+import { createPlaybackBarHeights } from "@jokkoo/sdk-web";
+import { useMemo as useMemo4 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var DEFAULT_BAR_COUNT = 32;
+function VoiceWaveform({
+  barCount = DEFAULT_BAR_COUNT,
+  progress = 0,
+  levels,
+  activeColor,
+  inactiveColor,
+  height = 24
+}) {
+  const playbackHeights = useMemo4(() => createPlaybackBarHeights(barCount, 3), [barCount]);
+  const clampedProgress = Math.max(0, Math.min(1, progress));
+  const isLiveMode = levels !== void 0;
+  return /* @__PURE__ */ jsx10("div", { className: "jk-waveform", style: { height }, children: isLiveMode ? levels.map((level, index) => /* @__PURE__ */ jsx10(
+    "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__ */ jsx10(
+      "span",
+      {
+        className: "jk-waveform__bar",
+        style: {
+          height: Math.max(3, baseHeight * height),
+          backgroundColor: isActive ? activeColor : inactiveColor
+        }
+      },
+      `play-${index}`
+    );
+  }) });
+}
+
+// src/components/VoiceMessagePlayer.tsx
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+function VoiceMessagePlayerReady({
+  downloadUrl,
+  durationMs,
+  colors
+}) {
+  const audioRef = useRef6(null);
+  const [playing, setPlaying] = useState9(false);
+  const [currentMs, setCurrentMs] = useState9(0);
+  const [totalMs, setTotalMs] = useState9(durationMs);
+  useEffect8(() => {
+    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 = useCallback6(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__ */ jsxs8("div", { className: "jk-voice-player", children: [
+    /* @__PURE__ */ jsx11(
+      "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__ */ jsx11(PauseIcon, { color: colors.primary, size: 16 }) : /* @__PURE__ */ jsx11(PlayIcon, { color: colors.primary, size: 16 })
+      }
+    ),
+    /* @__PURE__ */ jsxs8("div", { className: "jk-voice-player__content", children: [
+      /* @__PURE__ */ jsx11(
+        VoiceWaveform,
+        {
+          progress,
+          activeColor: colors.primary,
+          inactiveColor: colors.secondary,
+          height: 22
+        }
+      ),
+      /* @__PURE__ */ jsxs8("span", { className: "jk-voice-player__duration", style: { color: colors.secondary }, children: [
+        formatAudioDuration(currentMs),
+        " / ",
+        formatAudioDuration(totalMs)
+      ] })
+    ] })
+  ] });
+}
+function VoiceMessagePlayer({
+  fileId,
+  durationMs,
+  apiClient,
+  variant
+}) {
+  const [downloadUrl, setDownloadUrl] = useState9(null);
+  const [isLoadingUrl, setIsLoadingUrl] = useState9(true);
+  useEffect8(() => {
+    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 = useMemo5(() => {
+    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__ */ jsxs8("div", { className: "jk-voice-player", children: [
+      /* @__PURE__ */ jsx11("div", { className: "jk-voice-player__btn", style: { background: colors.buttonBackground }, children: /* @__PURE__ */ jsx11("div", { className: "jk-spinner", style: { width: 16, height: 16 } }) }),
+      /* @__PURE__ */ jsxs8("div", { className: "jk-voice-player__content", children: [
+        /* @__PURE__ */ jsx11(VoiceWaveform, { progress: 0, activeColor: colors.primary, inactiveColor: colors.secondary, height: 22 }),
+        /* @__PURE__ */ jsxs8("span", { className: "jk-voice-player__duration", style: { color: colors.secondary }, children: [
+          formatAudioDuration(0),
+          " / ",
+          formatAudioDuration(durationMs)
+        ] })
+      ] })
+    ] });
+  }
+  if (!downloadUrl) {
+    return /* @__PURE__ */ jsx11("div", { className: "jk-voice-player", children: /* @__PURE__ */ jsx11("span", { style: { color: colors.secondary, fontSize: 12 }, children: "Unable to load voice message" }) });
+  }
+  return /* @__PURE__ */ jsx11(VoiceMessagePlayerReady, { downloadUrl, durationMs, colors });
+}
+
+// src/components/MessageBubble.tsx
+import { Fragment, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+function MessageBubble({
+  message,
+  apiClient,
+  showAgentMeta = true,
+  variant = "default"
+}) {
+  const isUser = message.sender === "user";
+  const isVoiceMessage = 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__ */ jsx12(
+        VoiceMessagePlayer,
+        {
+          fileId: voiceAttachment.fileId,
+          durationMs: voiceDurationMs,
+          apiClient,
+          variant: isUser ? "user" : "agent"
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs9(Fragment, { children: [
+      message.text.trim().length > 0 ? message.text : null,
+      message.attachments && message.attachments.length > 0 ? /* @__PURE__ */ jsx12(MessageAttachments, { attachments: message.attachments, apiClient }) : null
+    ] });
+  };
+  if (isUser) {
+    return /* @__PURE__ */ jsxs9("div", { className: "jk-bubble-row jk-bubble-row--user", children: [
+      /* @__PURE__ */ jsx12("div", { className: "jk-bubble jk-bubble--user", children: renderBody() }),
+      /* @__PURE__ */ jsx12("div", { className: "jk-bubble__time", children: message.timestamp })
+    ] });
+  }
+  if (variant === "welcome") {
+    return /* @__PURE__ */ jsxs9("div", { className: "jk-bubble-row jk-bubble-row--agent", children: [
+      message.agentInitials ? /* @__PURE__ */ jsx12(Avatar, { initials: message.agentInitials, size: 28, imageUrl: message.agentAvatarUrl }) : /* @__PURE__ */ jsx12("span", { style: { width: 28 } }),
+      /* @__PURE__ */ jsx12("div", { className: "jk-bubble jk-bubble--welcome", children: message.text })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs9("div", { className: "jk-bubble-row jk-bubble-row--agent", children: [
+    showAgentMeta && message.agentInitials ? /* @__PURE__ */ jsx12(Avatar, { initials: message.agentInitials, size: 28, imageUrl: message.agentAvatarUrl }) : /* @__PURE__ */ jsx12("span", { style: { width: 28 } }),
+    /* @__PURE__ */ jsxs9("div", { className: "jk-bubble-row__agent-body", children: [
+      showAgentMeta && message.agentName ? /* @__PURE__ */ jsx12("div", { className: "jk-bubble-row__agent-name", children: message.agentName }) : null,
+      /* @__PURE__ */ jsx12("div", { className: "jk-bubble jk-bubble--agent", children: renderBody() }),
+      /* @__PURE__ */ jsx12("div", { className: "jk-bubble__time", children: message.timestamp })
+    ] })
+  ] });
+}
+
+// src/components/NewMessageIndicator.tsx
+import { jsx as jsx13, jsxs as jsxs10 } from "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__ */ jsxs10(
+    "button",
+    {
+      type: "button",
+      className: "jk-new-msg-indicator",
+      style: { bottom: bottomOffset },
+      "aria-label": t.newMessageIndicator(count),
+      onClick: onPress,
+      children: [
+        /* @__PURE__ */ jsx13(ArrowDownIcon, { color: "currentColor", size: 20 }),
+        /* @__PURE__ */ jsx13("span", { className: "jk-new-msg-indicator__badge", children: formatBadgeLabel(count) })
+      ]
+    }
+  );
+}
+
+// src/components/MessageList.tsx
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+var SCROLL_BOTTOM_THRESHOLD = 48;
+function MessageList({
+  messages,
+  apiClient,
+  t,
+  isNewSupport,
+  isLoading,
+  isError,
+  isFetchingNextPage,
+  pendingNewMessages,
+  onLoadOlder,
+  onScrolledToBottom,
+  onScrolledAwayFromBottom,
+  onJumpToLatest
+}) {
+  const listRef = useRef7(null);
+  const stickToBottomRef = useRef7(true);
+  useEffect9(() => {
+    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__ */ jsxs11("div", { className: "jk-conversation__body", children: [
+    /* @__PURE__ */ jsxs11(
+      "div",
+      {
+        ref: listRef,
+        className: `jk-messages${isNewSupport ? " jk-messages--new" : ""}`,
+        onScroll: handleScroll,
+        children: [
+          isFetchingNextPage ? /* @__PURE__ */ jsx14("div", { style: { display: "flex", justifyContent: "center", padding: 8 }, children: /* @__PURE__ */ jsx14("div", { className: "jk-spinner", style: { width: 18, height: 18 } }) }) : null,
+          messages.length === 0 ? isLoading ? /* @__PURE__ */ jsx14("div", { className: "jk-empty", children: /* @__PURE__ */ jsx14("div", { className: "jk-spinner" }) }) : isError ? /* @__PURE__ */ jsx14("div", { className: "jk-empty", children: t.unableToLoadMessages }) : null : messages.map((item, index) => {
+            if (item.sender === "system") {
+              return /* @__PURE__ */ jsx14(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__ */ jsx14(
+              MessageBubble,
+              {
+                message: item,
+                apiClient,
+                showAgentMeta,
+                variant: isNewSupport && item.id === "welcome" ? "welcome" : "default"
+              },
+              item.id
+            );
+          })
+        ]
+      }
+    ),
+    !isNewSupport ? /* @__PURE__ */ jsx14(
+      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
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+function ResolvedBanner({
+  t,
+  onNewRequest,
+  canReplyInConversation = false
+}) {
+  return /* @__PURE__ */ jsxs12("div", { className: "jk-resolved-banner", children: [
+    /* @__PURE__ */ jsxs12("div", { className: "jk-resolved-banner__row", children: [
+      /* @__PURE__ */ jsx15("span", { className: "jk-resolved-banner__icon", children: /* @__PURE__ */ jsx15(CheckCircleIcon, { color: "currentColor", size: 14 }) }),
+      /* @__PURE__ */ jsx15("span", { children: canReplyInConversation ? t.discussionClosedCanReply : t.ticketResolved })
+    ] }),
+    !canReplyInConversation ? /* @__PURE__ */ jsxs12(
+      "button",
+      {
+        type: "button",
+        className: "jk-resolved-banner__cta",
+        "aria-label": t.newSupportRequest,
+        onClick: onNewRequest,
+        children: [
+          /* @__PURE__ */ jsx15(ChatIcon, { color: "currentColor", size: 16 }),
+          t.newSupportRequest
+        ]
+      }
+    ) : null
+  ] });
+}
+
+// src/components/SatisfactionRating.tsx
+import { useCallback as useCallback7, useState as useState10 } from "react";
+import { jsx as jsx16, jsxs as jsxs13 } from "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] = useState10(null);
+  const [isSubmitting, setIsSubmitting] = useState10(false);
+  const [isSubmitted, setIsSubmitted] = useState10(false);
+  const handleSelect = useCallback7(
+    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__ */ jsx16("div", { className: "jk-satisfaction", children: /* @__PURE__ */ jsx16("div", { className: "jk-satisfaction__card", children: /* @__PURE__ */ jsx16("p", { className: "jk-satisfaction__title", children: t.thankYouForRating }) }) });
+  }
+  return /* @__PURE__ */ jsx16("div", { className: "jk-satisfaction", children: /* @__PURE__ */ jsxs13("div", { className: "jk-satisfaction__card", children: [
+    /* @__PURE__ */ jsx16("p", { className: "jk-satisfaction__title", children: message ?? t.rateConversation }),
+    !message ? /* @__PURE__ */ jsx16("p", { className: "jk-satisfaction__desc", children: t.rateConversationDescription }) : null,
+    /* @__PURE__ */ jsx16("div", { className: "jk-satisfaction__row", children: RATING_OPTIONS.map((option) => /* @__PURE__ */ jsx16(
+      "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__ */ jsx16("div", { className: "jk-spinner", style: { margin: "4px auto 0" } }) : null
+  ] }) });
+}
+
+// src/components/VoiceRecordingOverlay.tsx
+import { formatAudioDuration as formatAudioDuration2 } from "@jokkoo/sdk-web";
+import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
+function VoiceRecordingOverlay({
+  t,
+  durationMs,
+  meteringLevels,
+  isUploading,
+  uploadProgress,
+  onCancel,
+  onSend
+}) {
+  return /* @__PURE__ */ jsx17("div", { className: "jk-voice-overlay", children: /* @__PURE__ */ jsxs14("div", { className: "jk-voice-overlay__panel", children: [
+    /* @__PURE__ */ jsx17(
+      "button",
+      {
+        type: "button",
+        className: "jk-input-shell__icon",
+        "aria-label": t.cancelRecording,
+        disabled: isUploading,
+        onClick: onCancel,
+        children: /* @__PURE__ */ jsx17(CloseIcon, { color: "currentColor", size: 14 })
+      }
+    ),
+    isUploading ? /* @__PURE__ */ jsxs14("div", { className: "jk-voice-overlay__uploading", children: [
+      /* @__PURE__ */ jsx17("div", { className: "jk-spinner", style: { width: 16, height: 16 } }),
+      `${t.uploadingAttachment} ${uploadProgress}%`
+    ] }) : /* @__PURE__ */ jsxs14(Fragment2, { children: [
+      /* @__PURE__ */ jsxs14("div", { className: "jk-voice-overlay__rec", children: [
+        /* @__PURE__ */ jsx17("span", { className: "jk-voice-overlay__dot" }),
+        formatAudioDuration2(durationMs)
+      ] }),
+      /* @__PURE__ */ jsx17(
+        VoiceWaveform,
+        {
+          levels: meteringLevels,
+          activeColor: "var(--jk-color-primary)",
+          inactiveColor: "rgba(28,28,28,0.2)",
+          height: 28
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx17(
+      "button",
+      {
+        type: "button",
+        className: "jk-input-shell__icon",
+        "aria-label": t.sendRecording,
+        disabled: isUploading,
+        onClick: onSend,
+        children: isUploading ? /* @__PURE__ */ jsx17("div", { className: "jk-spinner", style: { width: 16, height: 16 } }) : /* @__PURE__ */ jsx17(SendIcon, { color: "currentColor", size: 22 })
+      }
+    )
+  ] }) });
+}
+
+// src/components/ConversationScreen.tsx
+import { Fragment as Fragment3, jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
+function ConversationScreen({ conversationId }) {
+  const { t, locale, goBack, navigateTo, apiClient, markConversationRead } = useJokkooContext();
+  const queryClient = useQueryClient3();
+  const [message, setMessage] = useState11("");
+  const [isSending, setIsSending] = useState11(false);
+  const [optimisticMessages, setOptimisticMessages] = useState11([]);
+  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 === NEW_CONVERSATION_ID4;
+  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 = useMemo6(
+    () => conversations.find((item) => item.id === conversationId),
+    [conversations, conversationId]
+  );
+  const isClosed = conversation?.status === "closed";
+  const canReplyInClosedConversation = useMemo6(
+    () => canReplyToClosedConversation(conversation ?? { status: "open" }, closedConversationPolicy),
+    [closedConversationPolicy, conversation]
+  );
+  const isEnded = Boolean(isClosed && !canReplyInClosedConversation);
+  const isAwaitingRating = conversationNeedsRating(conversation?.status, fetchedMessages);
+  const satisfactionMessage = useMemo6(
+    () => getSatisfactionSurveyMessage(fetchedMessages),
+    [fetchedMessages]
+  );
+  const headerTitle = isNewSupport ? t.newSupportRequestHeader : conversation ? 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 > MESSAGE_CONTENT_MAX_LENGTH2;
+  const attachmentsReady = pendingAttachments.length === 0 || pendingAttachments.every((item) => item.status === "confirmed");
+  const canSend = attachmentsReady && (trimmedLength >= 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 = useMemo6(() => {
+    const visibleFetchedMessages = fetchedMessages.filter(
+      (item) => !isSatisfactionRequestMessage2(item)
+    );
+    const baseMessages = isNewSupport ? [createWelcomeMessage(t)] : visibleFetchedMessages.map(
+      (item) => 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 = useRef8(cancelRecording);
+  const resetVoiceRecorderRef = useRef8(resetVoiceRecorder);
+  cancelRecordingRef.current = cancelRecording;
+  resetVoiceRecorderRef.current = resetVoiceRecorder;
+  useEffect10(() => {
+    setMessage("");
+    setOptimisticMessages([]);
+    clearAttachments();
+    void cancelRecordingRef.current();
+    resetVoiceRecorderRef.current();
+  }, [clearAttachments, conversationId]);
+  useEffect10(() => {
+    if (!isNewSupport) {
+      markConversationRead(conversationId);
+    }
+  }, [conversationId, isNewSupport, markConversationRead]);
+  useEffect10(() => {
+    if (!isNewSupport && isEnded) {
+      markConversationRead(conversationId);
+    }
+  }, [conversationId, isEnded, isNewSupport, markConversationRead]);
+  const handleEndReached = useCallback8(() => {
+    if (!isNewSupport && hasNextPage && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  }, [fetchNextPage, hasNextPage, isFetchingNextPage, isNewSupport]);
+  const handleSend = useCallback8(async () => {
+    const trimmed = message.trim();
+    const content = trimmed.length >= MESSAGE_CONTENT_MIN_LENGTH ? trimmed : t.sharedFiles;
+    if (trimmed.length < MESSAGE_CONTENT_MIN_LENGTH && confirmedFileIds.length === 0) {
+      return;
+    }
+    if (content.length > MESSAGE_CONTENT_MAX_LENGTH2 || isSending) {
+      return;
+    }
+    const optimisticId = `optimistic-${Date.now()}`;
+    const optimisticMessage = {
+      id: optimisticId,
+      sender: "user",
+      text: content,
+      timestamp: 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 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 = useCallback8(async () => {
+    const uploaded = await stopAndUpload();
+    if (!uploaded) {
+      return;
+    }
+    const optimisticId = `optimistic-voice-${Date.now()}`;
+    const optimisticMessage = {
+      id: optimisticId,
+      sender: "user",
+      text: t.voiceMessage,
+      timestamp: 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 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 = useCallback8(
+    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__ */ jsxs15("div", { className: "jk-conversation", children: [
+    /* @__PURE__ */ jsx18(
+      ConversationHeader,
+      {
+        title: headerTitle,
+        status: isNewSupport ? void 0 : conversation?.status,
+        t,
+        onBack: goBack
+      }
+    ),
+    /* @__PURE__ */ jsx18(
+      MessageList,
+      {
+        messages,
+        apiClient,
+        t,
+        isNewSupport,
+        isLoading,
+        isError,
+        isFetchingNextPage,
+        pendingNewMessages,
+        onLoadOlder: handleEndReached,
+        onScrolledToBottom: notifyScrolledToBottom,
+        onScrolledAwayFromBottom: notifyScrolledAwayFromBottom,
+        onJumpToLatest: notifyScrolledToBottom
+      }
+    ),
+    isAwaitingRating ? /* @__PURE__ */ jsx18(
+      SatisfactionRating,
+      {
+        t,
+        message: satisfactionMessage,
+        onSubmit: handleSatisfactionSubmit
+      }
+    ) : isRecordingActive ? /* @__PURE__ */ jsx18(
+      VoiceRecordingOverlay,
+      {
+        t,
+        durationMs: voiceDurationMs,
+        meteringLevels: voiceMeteringLevels,
+        isUploading: voiceRecorderState === "uploading",
+        uploadProgress: voiceUploadProgress,
+        onCancel: () => {
+          void cancelRecording();
+        },
+        onSend: () => {
+          void handleSendVoiceMessage();
+        }
+      }
+    ) : isEnded ? /* @__PURE__ */ jsx18(
+      ResolvedBanner,
+      {
+        t,
+        onNewRequest: () => navigateTo({ name: "conversation", conversationId: NEW_CONVERSATION_ID4 })
+      }
+    ) : /* @__PURE__ */ jsxs15(Fragment3, { children: [
+      canReplyInClosedConversation ? /* @__PURE__ */ jsx18(
+        ResolvedBanner,
+        {
+          t,
+          canReplyInConversation: true,
+          onNewRequest: () => navigateTo({ name: "conversation", conversationId: NEW_CONVERSATION_ID4 })
+        }
+      ) : null,
+      /* @__PURE__ */ jsx18(
+        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
+import { jsx as jsx19, jsxs as jsxs16 } from "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__ */ jsxs16(
+    "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__ */ jsx19("span", { className: "jk-floating-btn__icon", children: /* @__PURE__ */ jsx19(ChatIcon, { color: "currentColor", size: 20 }) }),
+        /* @__PURE__ */ jsx19("span", { className: "jk-floating-btn__label", children: displayLabel }),
+        badgeVisible ? /* @__PURE__ */ jsx19("span", { className: "jk-floating-btn__badge", children: formatBadgeLabel2(unreadCount) }) : null
+      ]
+    }
+  );
+}
+
+// src/components/RequestListScreen.tsx
+import { NEW_CONVERSATION_ID as NEW_CONVERSATION_ID5 } from "@jokkoo/sdk-web";
+import { useCallback as useCallback9 } from "react";
+
+// src/components/RequestCard.tsx
+import {
+  formatRelativeTimestamp,
+  getAgentInitials,
+  getConversationDisplayName as getConversationDisplayName2
+} from "@jokkoo/sdk-web";
+import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
+function RequestCard({
+  conversation,
+  t,
+  locale,
+  isUnread = false,
+  onPress,
+  apiClient
+}) {
+  const title = getConversationDisplayName2(conversation, t);
+  const avatarInitials = getAgentInitials(conversation.assignedAgentName, "SP");
+  const avatarUrl = conversation.assignedAgentAvatarUrl ? apiClient.resolveUrl(conversation.assignedAgentAvatarUrl) : null;
+  return /* @__PURE__ */ jsxs17(
+    "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__ */ jsx20(
+          Avatar,
+          {
+            initials: avatarInitials,
+            size: 48,
+            showUnreadIndicator: isUnread,
+            imageUrl: avatarUrl
+          }
+        ),
+        /* @__PURE__ */ jsxs17("div", { className: "jk-request-card__content", children: [
+          /* @__PURE__ */ jsxs17("div", { className: "jk-request-card__row", children: [
+            /* @__PURE__ */ jsx20("p", { className: "jk-request-card__title", children: title }),
+            /* @__PURE__ */ jsx20(StatusBadge, { status: conversation.status, t })
+          ] }),
+          /* @__PURE__ */ jsx20(
+            "p",
+            {
+              className: `jk-request-card__preview${isUnread ? " jk-request-card__preview--unread" : ""}`,
+              children: conversation.lastMessageText ?? t.noMessagesYet
+            }
+          ),
+          /* @__PURE__ */ jsxs17("div", { className: "jk-request-card__time", children: [
+            /* @__PURE__ */ jsx20(ClockIcon, { color: "currentColor", size: 11 }),
+            formatRelativeTimestamp(conversation.updatedAt, {
+              locale,
+              nowLabel: t.now
+            })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/RequestListScreen.tsx
+import { jsx as jsx21, jsxs as jsxs18 } from "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 = useCallback9(
+    (event) => {
+      const target = event.currentTarget;
+      const nearBottom = target.scrollHeight - target.scrollTop - target.clientHeight < 80;
+      if (nearBottom && hasNextPage && !isFetchingNextPage) {
+        fetchNextPage();
+      }
+    },
+    [fetchNextPage, hasNextPage, isFetchingNextPage]
+  );
+  return /* @__PURE__ */ jsxs18("div", { className: "jk-request-list", children: [
+    /* @__PURE__ */ jsxs18("div", { className: "jk-request-list__header", children: [
+      /* @__PURE__ */ jsx21("h2", { className: "jk-request-list__title", children: t.supportCenter }),
+      /* @__PURE__ */ jsx21("p", { className: "jk-request-list__subtitle", children: t.activeConversation(activeCount) }),
+      /* @__PURE__ */ jsx21("p", { className: "jk-request-list__section", children: t.myRequests })
+    ] }),
+    /* @__PURE__ */ jsxs18("div", { className: "jk-request-list__items", onScroll: handleScroll, children: [
+      conversations.length === 0 ? isLoading ? /* @__PURE__ */ jsx21("div", { className: "jk-empty", children: /* @__PURE__ */ jsx21("div", { className: "jk-spinner" }) }) : isError ? /* @__PURE__ */ jsxs18("div", { className: "jk-empty", children: [
+        /* @__PURE__ */ jsx21("span", { children: t.unableToLoadConversations }),
+        /* @__PURE__ */ jsx21("button", { type: "button", className: "jk-empty__retry", onClick: refetch, children: t.retry })
+      ] }) : /* @__PURE__ */ jsx21("div", { className: "jk-empty", children: t.noConversationsYet }) : conversations.map((item) => /* @__PURE__ */ jsx21(
+        RequestCard,
+        {
+          conversation: item,
+          t,
+          locale,
+          isUnread: isConversationUnread(item.id),
+          onPress: (conversationId) => navigateTo({ name: "conversation", conversationId }),
+          apiClient
+        },
+        item.id
+      )),
+      isFetchingNextPage ? /* @__PURE__ */ jsx21("div", { className: "jk-empty", style: { paddingTop: 16 }, children: /* @__PURE__ */ jsx21("div", { className: "jk-spinner" }) }) : null
+    ] }),
+    /* @__PURE__ */ jsx21("div", { className: "jk-request-list__footer", children: /* @__PURE__ */ jsxs18(
+      "button",
+      {
+        type: "button",
+        className: "jk-floating-btn",
+        style: { position: "static" },
+        "aria-label": t.newSupportRequest,
+        onClick: () => navigateTo({ name: "conversation", conversationId: NEW_CONVERSATION_ID5 }),
+        children: [
+          /* @__PURE__ */ jsx21("span", { className: "jk-floating-btn__icon", children: /* @__PURE__ */ jsx21(ChatIcon, { color: "currentColor", size: 20 }) }),
+          /* @__PURE__ */ jsx21("span", { className: "jk-floating-btn__label", children: t.newSupportRequest })
+        ]
+      }
+    ) })
+  ] });
+}
+
+// src/components/PanelHeader.tsx
+import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
+function PanelHeader({
+  variant = "light",
+  onExpand,
+  onClose,
+  expandLabel = "Expand",
+  closeLabel = "Close"
+}) {
+  const dark = variant === "dark";
+  return /* @__PURE__ */ jsxs19("div", { className: `jk-panel-header${dark ? " jk-panel-header--dark" : ""}`, children: [
+    /* @__PURE__ */ jsx22(
+      "button",
+      {
+        type: "button",
+        className: `jk-icon-btn${dark ? " jk-icon-btn--dark" : ""}`,
+        "aria-label": expandLabel,
+        onClick: onExpand,
+        children: /* @__PURE__ */ jsx22(ExpandIcon, { color: "currentColor", size: 14 })
+      }
+    ),
+    /* @__PURE__ */ jsx22(
+      "button",
+      {
+        type: "button",
+        className: `jk-icon-btn${dark ? " jk-icon-btn--dark" : ""}`,
+        "aria-label": closeLabel,
+        onClick: onClose,
+        children: /* @__PURE__ */ jsx22(CloseIcon, { color: "currentColor", size: 14 })
+      }
+    )
+  ] });
+}
+
+// src/components/WidgetPanel.tsx
+import { jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
+function WidgetPanel({ children, headerVariant = "light" }) {
+  const { isExpanded, toggleExpanded, closeChat } = useJokkooContext();
+  return /* @__PURE__ */ jsxs20("div", { className: `jk-panel${isExpanded ? " jk-panel--expanded" : ""}`, role: "dialog", "aria-modal": true, children: [
+    /* @__PURE__ */ jsx23(
+      PanelHeader,
+      {
+        variant: headerVariant,
+        onExpand: toggleExpanded,
+        onClose: closeChat
+      }
+    ),
+    /* @__PURE__ */ jsx23("div", { className: "jk-panel-body", children })
+  ] });
+}
+
+// src/components/JokkooWidget.tsx
+import { jsx as jsx24 } from "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__ */ jsx24(FloatingButton, { position, label: launcherLabel });
+  }
+  return /* @__PURE__ */ jsx24(WidgetPanel, { headerVariant, children: currentScreen.name === "requestList" ? /* @__PURE__ */ jsx24(RequestListScreen, {}) : /* @__PURE__ */ jsx24(
+    ConversationScreen,
+    {
+      conversationId: currentScreen.conversationId
+    },
+    currentScreen.conversationId
+  ) });
+}
+
+// src/hooks/useSendMessage.ts
+import { useMutation, useQueryClient as useQueryClient4 } from "@tanstack/react-query";
+function useSendMessage() {
+  const { apiClient } = useJokkooContext();
+  const queryClient = useQueryClient4();
+  return 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;
+}
+export {
+  ConversationScreen,
+  FloatingButton,
+  FloatingButton as JokkooButton,
+  JokkooProvider,
+  JokkooWidget,
+  NEW_CONVERSATION_ID,
+  RequestListScreen,
+  WidgetPanel,
+  defaultTheme,
+  jokkooQueryKeys,
+  mergeTheme,
+  themeToCssVars,
+  useConversations,
+  useFileUpload,
+  useJokkooContext,
+  useMessages,
+  useRealtimeStatus,
+  useSendMessage,
+  useUnreadCount,
+  useVoiceRecorder
+};
+//# sourceMappingURL=index.mjs.map