@natoe/colab 0.1.31 → 0.1.36

package/dist/index.mjs

@@ -601,6 +601,7 @@ function CollabProvider({ config, apiBaseUrl, children }) {
   });
   const [unreadCounts, setUnreadCounts] = useState({});
   const [unreadCountsByOrder, setUnreadCountsByOrder] = useState({});
+  const [unreadUpdateSeq, setUnreadUpdateSeq] = useState(0);
   const pendingKeys = useRef(/* @__PURE__ */ new Set());
   const pendingResolvers = useRef(/* @__PURE__ */ new Map());
   const previewCache = useRef(/* @__PURE__ */ new Map());
@@ -619,6 +620,7 @@ function CollabProvider({ config, apiBaseUrl, children }) {
       setUnreadCounts(counts.conversation);
       setUnreadCountsByOrder(counts.order);
       previewCache.current.clear();
+      setUnreadUpdateSeq((n) => n + 1);
     });
     if (!s.isConnected()) {
       s.connect(config);
@@ -852,6 +854,7 @@ function CollabProvider({ config, apiBaseUrl, children }) {
         config,
         apiBaseUrl,
         totalUnread,
+        unreadUpdateSeq,
         unreadCounts,
         unreadCountsByOrder,
         requestPreview,
@@ -1639,7 +1642,7 @@ function PatientHeader({
       }
     )
   ] }) : null;
-  const settingsButton = onOpenSettings ? /* @__PURE__ */ jsxs(
+  const settingsButton = onOpenSettings && !isSupportChannel ? /* @__PURE__ */ jsxs(
     "button",
     {
       onClick: onOpenSettings,
@@ -3931,6 +3934,7 @@ function fallbackName(role) {
       return "User";
   }
 }
+var FALLBACK_ROLE_COLOR = { bg: "#f1f5f9", text: "#64748b" };
 function RoleBadge({ role }) {
   const colors = {
     radiologist: { bg: "#eef2ff", text: "#4f46e5" },
@@ -3942,8 +3946,8 @@ function RoleBadge({ role }) {
     admin: { bg: "#f1f5f9", text: "#64748b" }
     // slate
   };
-  const color = colors[role];
-  return /* @__PURE__ */ jsx("span", { style: { ...styles9.roleBadge, backgroundColor: color.bg, color: color.text }, children: role });
+  const color = colors[role] ?? FALLBACK_ROLE_COLOR;
+  return /* @__PURE__ */ jsx("span", { style: { ...styles9.roleBadge, backgroundColor: color.bg, color: color.text }, children: fallbackName(role) });
 }
 var styles9 = {
   list: {
@@ -4857,6 +4861,7 @@ function CollabPopup({
   const previouslyFocused = useRef(null);
   const titleId = useId();
   const titleText = cleanChannelName(loadedConversation?.name) || (patientData ? buildChannelName(patientData) : "Natoe Support");
+  const isSupportChannel = !patientData;
   const handleMouseDown = useCallback(
     (e) => {
       if (!e.target.closest("[data-drag-handle]")) return;
@@ -4975,7 +4980,7 @@ function CollabPopup({
             })()
           ] }),
           /* @__PURE__ */ jsxs("div", { style: styles13.titleActions, children: [
-            loadedConversation && /* @__PURE__ */ jsxs(
+            loadedConversation && !isSupportChannel && /* @__PURE__ */ jsxs(
               "button",
               {
                 type: "button",
@@ -5868,7 +5873,7 @@ var styles14 = {
   }};
 function useConversationList(options) {
   const enabled = options?.enabled ?? true;
-  const { fetchConversationList, config, totalUnread: serverTotalUnread } = useCollab();
+  const { fetchConversationList, config, unreadUpdateSeq } = useCollab();
   const [conversations, setConversations] = useState([]);
   const [isLoading, setIsLoading] = useState(enabled);
   const [error, setError] = useState(null);
@@ -5906,15 +5911,16 @@ function useConversationList(options) {
     if (!enabled) return;
     refresh();
   }, [enabled, refresh]);
-  const hasHandledInitialUnreadRef = useRef(false);
+  const hasHandledInitialSeqRef = useRef(false);
   useEffect(() => {
     if (!enabled) return;
-    if (!hasHandledInitialUnreadRef.current) {
-      hasHandledInitialUnreadRef.current = true;
+    if (!hasHandledInitialSeqRef.current) {
+      hasHandledInitialSeqRef.current = true;
       return;
     }
-    silentRefresh();
-  }, [serverTotalUnread, enabled]);
+    const t = setTimeout(silentRefresh, 250);
+    return () => clearTimeout(t);
+  }, [unreadUpdateSeq, enabled]);
   const filter = useCallback(
     (query) => {
       const q = query.trim().toLowerCase();
@@ -6681,6 +6687,143 @@ var styles17 = {
     maxWidth: "320px"
   }
 };
+ensureGlobalStyles();
+function HelpPanel({
+  conversation,
+  showSeenBy = true,
+  composerAccessory,
+  className,
+  style
+}) {
+  const { config } = useCollab();
+  const { handleDeepLink } = useDeepLinks();
+  const messageListRef = useRef(null);
+  const {
+    messages,
+    typingUsers,
+    isLoading,
+    hasMore,
+    error,
+    replyTo,
+    setReplyTo,
+    sendMessage,
+    retryMessage,
+    sendAudioMessage,
+    sendFileMessage,
+    sendTyping,
+    markAsRead,
+    loadMoreMessages
+  } = useConversation({ conversation, kind: "help_lab" });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: [ROOT_CLASS, className].filter(Boolean).join(" "),
+      style: { ...styles18.container, ...style },
+      children: [
+        /* @__PURE__ */ jsxs("header", { style: styles18.header, children: [
+          /* @__PURE__ */ jsx("span", { style: styles18.avatar, "aria-hidden": "true", children: "N" }),
+          /* @__PURE__ */ jsxs("span", { style: styles18.headerText, children: [
+            /* @__PURE__ */ jsx("span", { style: styles18.title, children: "Natoe Support" }),
+            /* @__PURE__ */ jsx("span", { style: styles18.subtitle, children: "Questions about your account, billing or a case" })
+          ] })
+        ] }),
+        error && /* @__PURE__ */ jsx("div", { style: styles18.error, role: "alert", children: error }),
+        isLoading && messages.length === 0 ? /* @__PURE__ */ jsx("div", { style: styles18.loading, children: /* @__PURE__ */ jsx(Spinner, {}) }) : /* @__PURE__ */ jsx(
+          MessageList,
+          {
+            ref: messageListRef,
+            messages,
+            currentUserId: config.userId,
+            showSeenBy,
+            typingUsers,
+            hasMore,
+            isLoading,
+            onLoadMore: loadMoreMessages,
+            onDeepLinkClick: handleDeepLink,
+            onMessageVisible: markAsRead,
+            onReply: setReplyTo,
+            onRetry: retryMessage,
+            pinDisabled: true
+          }
+        ),
+        composerAccessory,
+        /* @__PURE__ */ jsx(
+          MessageInput,
+          {
+            onSendText: sendMessage,
+            onSendAudio: sendAudioMessage,
+            onSendFile: sendFileMessage,
+            onTyping: sendTyping,
+            replyTo,
+            onCancelReply: () => setReplyTo(null),
+            placeholder: "Ask Natoe support\u2026"
+          }
+        )
+      ]
+    }
+  );
+}
+var styles18 = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    minHeight: 0,
+    fontFamily: FONT_STACK,
+    background: COLOR.white
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    gap: SPACE.S3,
+    padding: `${SPACE.S3} ${SPACE.S4}`,
+    borderBottom: `1px solid ${COLOR.neutral200}`,
+    flex: "0 0 auto"
+  },
+  avatar: {
+    flex: "0 0 auto",
+    width: 32,
+    height: 32,
+    borderRadius: RADIUS.full,
+    background: COLOR.primary,
+    color: COLOR.white,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: FONT_SIZE.md,
+    fontWeight: FONT_WEIGHT.semibold
+  },
+  headerText: {
+    display: "flex",
+    flexDirection: "column",
+    minWidth: 0
+  },
+  title: {
+    fontSize: FONT_SIZE.md,
+    fontWeight: FONT_WEIGHT.semibold,
+    color: COLOR.neutral900
+  },
+  subtitle: {
+    fontSize: FONT_SIZE.sm,
+    color: COLOR.neutral500,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  error: {
+    padding: `${SPACE.S2} ${SPACE.S4}`,
+    fontSize: FONT_SIZE.sm,
+    color: COLOR.danger,
+    background: COLOR.dangerBg,
+    flex: "0 0 auto"
+  },
+  loading: {
+    flex: "1 1 auto",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  }
+};
 function useMessages({
   conversationId,
   initialLimit = MESSAGES_PAGE_SIZE
@@ -6886,6 +7029,6 @@ function usePinnedMessages({
   };
 }
 
-export { AUDIO_MIME_TYPE, ChannelSettings, CollabInbox, CollabInline, CollabPanel, CollabPopup, CollabProvider, CollabSocket, ConversationList, ConversationListItem, DEEP_LINK_PREFIX, EVENTS, MAX_FILE_SIZE, MAX_PINNED_MESSAGES, MESSAGES_PAGE_SIZE, MESSAGE_TYPES, MessageActionsMenu, MessageBubble, MessageInput, MessageList, ParticipantsList, PatientHeader, PinnedMessagesBar, ReplyPreview, ReplyQuoteBlock, SUPPORTED_IMAGE_TYPES, SeenByIndicator, THEME_DEFAULTS, THEME_VAR, TYPING_DEBOUNCE_MS, applyThemeOverrides, isCaseKind, isHelpKind, useAudioRecorder, useChannelSettings, useCollab, useConversation, useConversationList, useDeepLinks, useInlineCollab, useMessages, usePinnedMessages, useUnreadCount };
+export { AUDIO_MIME_TYPE, ChannelSettings, CollabInbox, CollabInline, CollabPanel, CollabPopup, CollabProvider, CollabSocket, ConversationList, ConversationListItem, DEEP_LINK_PREFIX, EVENTS, HelpPanel, MAX_FILE_SIZE, MAX_PINNED_MESSAGES, MESSAGES_PAGE_SIZE, MESSAGE_TYPES, MessageActionsMenu, MessageBubble, MessageInput, MessageList, ParticipantsList, PatientHeader, PinnedMessagesBar, ReplyPreview, ReplyQuoteBlock, SUPPORTED_IMAGE_TYPES, SeenByIndicator, THEME_DEFAULTS, THEME_VAR, TYPING_DEBOUNCE_MS, applyThemeOverrides, isCaseKind, isHelpKind, useAudioRecorder, useChannelSettings, useCollab, useConversation, useConversationList, useDeepLinks, useInlineCollab, useMessages, usePinnedMessages, useUnreadCount };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map