@natoe/colab 0.1.30 → 0.1.34

package/dist/index.mjs

@@ -1639,7 +1639,7 @@ function PatientHeader({
       }
     )
   ] }) : null;
-  const settingsButton = onOpenSettings ? /* @__PURE__ */ jsxs(
+  const settingsButton = onOpenSettings && !isSupportChannel ? /* @__PURE__ */ jsxs(
     "button",
     {
       onClick: onOpenSettings,
@@ -3931,6 +3931,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 +3943,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: {
@@ -4829,6 +4830,7 @@ ensureGlobalStyles();
 var FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
 function CollabPopup({
   orderId,
+  conversation: providedConversation,
   patientData,
   participantIds,
   kind,
@@ -4855,7 +4857,8 @@ function CollabPopup({
   const containerRef = useRef(null);
   const previouslyFocused = useRef(null);
   const titleId = useId();
-  const titleText = cleanChannelName(loadedConversation?.name) || buildChannelName(patientData);
+  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;
@@ -4960,8 +4963,9 @@ function CollabPopup({
             }
           ),
           /* @__PURE__ */ jsxs("div", { style: styles13.titleCenter, children: [
-            /* @__PURE__ */ jsx("h2", { id: titleId, style: styles13.patientName, children: patientData.patientName || titleText }),
+            /* @__PURE__ */ jsx("h2", { id: titleId, style: styles13.patientName, children: patientData?.patientName || titleText }),
             (() => {
+              if (!patientData) return /* @__PURE__ */ jsx("div", { style: styles13.subRow, children: /* @__PURE__ */ jsx("span", { style: styles13.metaText, children: "Help and support" }) });
               const parts = [];
               if (patientData.patientAge) parts.push(String(patientData.patientAge));
               if (patientData.patientSex) parts.push(String(patientData.patientSex));
@@ -4973,7 +4977,7 @@ function CollabPopup({
             })()
           ] }),
           /* @__PURE__ */ jsxs("div", { style: styles13.titleActions, children: [
-            loadedConversation && /* @__PURE__ */ jsxs(
+            loadedConversation && !isSupportChannel && /* @__PURE__ */ jsxs(
               "button",
               {
                 type: "button",
@@ -5018,6 +5022,7 @@ function CollabPopup({
           CollabPanel,
           {
             orderId,
+            conversation: providedConversation,
             patientData,
             participantIds,
             kind,
@@ -6678,6 +6683,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
@@ -6883,6 +7025,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