@natoe/colab 0.1.30 → 0.1.34

package/dist/index.d.mts

@@ -369,10 +369,13 @@ interface CollabPanelProps {
 declare function CollabPanel({ orderId, conversation: providedConversation, patientData, participantIds, kind, showSeenBy, onBack, hidePatientName, hideOpenCase, onConversationChange, themeMode, showSettings: controlledShowSettings, onSettingsChange, className, style, }: CollabPanelProps): react_jsx_runtime.JSX.Element;
 
 interface CollabPopupProps {
-    /** Order ID for this conversation */
-    orderId: string;
+    /** Order this thread belongs to. Required for a `case` thread; omitted for a
+     *  help channel, which belongs to a lab rather than an order. */
+    orderId?: string;
+    /** A thread the caller already resolved — how a help channel is opened. */
+    conversation?: Conversation | null;
     /** Patient/study data */
-    patientData: PatientData;
+    patientData?: PatientData;
     /** Participant user IDs — only used when creating a brand-new conversation */
     participantIds?: string[];
     /** Which thread on the case. Defaults to the shared `case` thread. */
@@ -406,7 +409,7 @@ interface CollabPopupProps {
  * Draggable floating chat popup — drop-in replacement for DraggableChatPopup.
  * Renders a CollabPanel inside a movable, resizable container.
  */
-declare function CollabPopup({ orderId, patientData, participantIds, kind, isOpen, onClose, onBack, onMinimize, initialPosition, width, height, className, }: CollabPopupProps): react_jsx_runtime.JSX.Element | null;
+declare function CollabPopup({ orderId, conversation: providedConversation, patientData, participantIds, kind, isOpen, onClose, onBack, onMinimize, initialPosition, width, height, className, }: CollabPopupProps): react_jsx_runtime.JSX.Element | null;
 
 type ColabInlineMode = 'light' | 'dark';
 interface CollabInlineProps {
@@ -462,6 +465,49 @@ interface CollabInboxProps {
  */
 declare function CollabInbox({ initialConversationId, onSelectConversation, className, style, }: CollabInboxProps): react_jsx_runtime.JSX.Element;
 
+interface HelpPanelProps {
+    /**
+     * The lab's help channel, already resolved by the host from
+     * `GET /help_channel`. Required — unlike a case thread there is nothing to
+     * look up and nothing to lazily create, so a HelpPanel without a channel has
+     * nothing to render.
+     */
+    conversation: Conversation;
+    /** Show "seen by" under own messages (default true) */
+    showSeenBy?: boolean;
+    /** Rendered above the composer — the host's case-reference control lives here. */
+    composerAccessory?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * The imaging centre's support thread.
+ *
+ * A deliberately SEPARATE shell from CollabPanel rather than CollabPanel with
+ * flags. The two surfaces only look similar — CollabPanel is case-shaped, and
+ * serving support through it meant suppressing the patient header, the DICOM
+ * button, the open-case action, the participant roster and channel settings one
+ * at a time. Every case-oriented feature added another thing to suppress, and
+ * missing one is not cosmetic: a roster control that slipped through crashed
+ * the whole tree on an unmapped participant role.
+ *
+ * Building additively instead means a support thread can never inherit a
+ * case affordance by accident. What IS shared is the part worth sharing — the
+ * engine. useConversation, MessageList and MessageInput are identical here, so
+ * socket lifecycle, optimistic sends, read receipts, typing, attachments,
+ * audio and pagination all behave exactly as they do on a case thread, with no
+ * second implementation to drift.
+ *
+ * Deliberately absent, and none of it by oversight:
+ *   - patient / study header  — there is no patient
+ *   - View DICOM, Open case   — there is no order
+ *   - participant roster      — the roster is fixed by the backend (this lab
+ *                               plus Natoe support) and is not editable
+ *   - channel settings        — invite / remove / leave do not apply
+ *   - pinned messages         — a support thread is chronological
+ */
+declare function HelpPanel({ conversation, showSeenBy, composerAccessory, className, style, }: HelpPanelProps): react_jsx_runtime.JSX.Element;
+
 type MessageCallback = (message: Message) => void;
 type TypingCallback = (event: TypingEvent) => void;
 type ParticipantCallback = (participant: Participant) => void;
@@ -1277,4 +1323,4 @@ declare const SUPPORTED_IMAGE_TYPES: string[];
 /** Max file size in bytes (20MB) */
 declare const MAX_FILE_SIZE: number;
 
-export { AUDIO_MIME_TYPE, type ChannelEvent, ChannelSettings, type ChannelUpdatePayload, type CollabConfig, type CollabError, CollabInbox, CollabInline, CollabPanel, CollabPopup, CollabProvider, CollabSocket, type Conversation, type ConversationKind, ConversationList, ConversationListItem, type ConversationListItem$1 as ConversationListItemData, type ConversationPreview, type CreateConversationResponse, DEEP_LINK_PREFIX, EVENTS, type InviteUserPayload, MAX_FILE_SIZE, MAX_PINNED_MESSAGES, MESSAGES_PAGE_SIZE, MESSAGE_TYPES, type Message, MessageActionsMenu, MessageBubble, MessageInput, MessageList, type MessageListHandle, type MessageSnapshot, type MessageType, type Participant, ParticipantsList, type PatientData, PatientHeader, PinnedMessagesBar, type PreviewBatchResponse, ReplyPreview, ReplyQuoteBlock, SUPPORTED_IMAGE_TYPES, SeenByIndicator, type SendMessagePayload, THEME_DEFAULTS, THEME_VAR, TYPING_DEBOUNCE_MS, type Theme, type TypingEvent, type UserRole, applyThemeOverrides, isCaseKind, isHelpKind, useAudioRecorder, useChannelSettings, useCollab, useConversation, useConversationList, useDeepLinks, useInlineCollab, useMessages, usePinnedMessages, useUnreadCount };
+export { AUDIO_MIME_TYPE, type ChannelEvent, ChannelSettings, type ChannelUpdatePayload, type CollabConfig, type CollabError, CollabInbox, CollabInline, CollabPanel, CollabPopup, CollabProvider, CollabSocket, type Conversation, type ConversationKind, ConversationList, ConversationListItem, type ConversationListItem$1 as ConversationListItemData, type ConversationPreview, type CreateConversationResponse, DEEP_LINK_PREFIX, EVENTS, HelpPanel, type InviteUserPayload, MAX_FILE_SIZE, MAX_PINNED_MESSAGES, MESSAGES_PAGE_SIZE, MESSAGE_TYPES, type Message, MessageActionsMenu, MessageBubble, MessageInput, MessageList, type MessageListHandle, type MessageSnapshot, type MessageType, type Participant, ParticipantsList, type PatientData, PatientHeader, PinnedMessagesBar, type PreviewBatchResponse, ReplyPreview, ReplyQuoteBlock, SUPPORTED_IMAGE_TYPES, SeenByIndicator, type SendMessagePayload, THEME_DEFAULTS, THEME_VAR, TYPING_DEBOUNCE_MS, type Theme, type TypingEvent, type UserRole, applyThemeOverrides, isCaseKind, isHelpKind, useAudioRecorder, useChannelSettings, useCollab, useConversation, useConversationList, useDeepLinks, useInlineCollab, useMessages, usePinnedMessages, useUnreadCount };

package/dist/index.d.ts

@@ -369,10 +369,13 @@ interface CollabPanelProps {
 declare function CollabPanel({ orderId, conversation: providedConversation, patientData, participantIds, kind, showSeenBy, onBack, hidePatientName, hideOpenCase, onConversationChange, themeMode, showSettings: controlledShowSettings, onSettingsChange, className, style, }: CollabPanelProps): react_jsx_runtime.JSX.Element;
 
 interface CollabPopupProps {
-    /** Order ID for this conversation */
-    orderId: string;
+    /** Order this thread belongs to. Required for a `case` thread; omitted for a
+     *  help channel, which belongs to a lab rather than an order. */
+    orderId?: string;
+    /** A thread the caller already resolved — how a help channel is opened. */
+    conversation?: Conversation | null;
     /** Patient/study data */
-    patientData: PatientData;
+    patientData?: PatientData;
     /** Participant user IDs — only used when creating a brand-new conversation */
     participantIds?: string[];
     /** Which thread on the case. Defaults to the shared `case` thread. */
@@ -406,7 +409,7 @@ interface CollabPopupProps {
  * Draggable floating chat popup — drop-in replacement for DraggableChatPopup.
  * Renders a CollabPanel inside a movable, resizable container.
  */
-declare function CollabPopup({ orderId, patientData, participantIds, kind, isOpen, onClose, onBack, onMinimize, initialPosition, width, height, className, }: CollabPopupProps): react_jsx_runtime.JSX.Element | null;
+declare function CollabPopup({ orderId, conversation: providedConversation, patientData, participantIds, kind, isOpen, onClose, onBack, onMinimize, initialPosition, width, height, className, }: CollabPopupProps): react_jsx_runtime.JSX.Element | null;
 
 type ColabInlineMode = 'light' | 'dark';
 interface CollabInlineProps {
@@ -462,6 +465,49 @@ interface CollabInboxProps {
  */
 declare function CollabInbox({ initialConversationId, onSelectConversation, className, style, }: CollabInboxProps): react_jsx_runtime.JSX.Element;
 
+interface HelpPanelProps {
+    /**
+     * The lab's help channel, already resolved by the host from
+     * `GET /help_channel`. Required — unlike a case thread there is nothing to
+     * look up and nothing to lazily create, so a HelpPanel without a channel has
+     * nothing to render.
+     */
+    conversation: Conversation;
+    /** Show "seen by" under own messages (default true) */
+    showSeenBy?: boolean;
+    /** Rendered above the composer — the host's case-reference control lives here. */
+    composerAccessory?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * The imaging centre's support thread.
+ *
+ * A deliberately SEPARATE shell from CollabPanel rather than CollabPanel with
+ * flags. The two surfaces only look similar — CollabPanel is case-shaped, and
+ * serving support through it meant suppressing the patient header, the DICOM
+ * button, the open-case action, the participant roster and channel settings one
+ * at a time. Every case-oriented feature added another thing to suppress, and
+ * missing one is not cosmetic: a roster control that slipped through crashed
+ * the whole tree on an unmapped participant role.
+ *
+ * Building additively instead means a support thread can never inherit a
+ * case affordance by accident. What IS shared is the part worth sharing — the
+ * engine. useConversation, MessageList and MessageInput are identical here, so
+ * socket lifecycle, optimistic sends, read receipts, typing, attachments,
+ * audio and pagination all behave exactly as they do on a case thread, with no
+ * second implementation to drift.
+ *
+ * Deliberately absent, and none of it by oversight:
+ *   - patient / study header  — there is no patient
+ *   - View DICOM, Open case   — there is no order
+ *   - participant roster      — the roster is fixed by the backend (this lab
+ *                               plus Natoe support) and is not editable
+ *   - channel settings        — invite / remove / leave do not apply
+ *   - pinned messages         — a support thread is chronological
+ */
+declare function HelpPanel({ conversation, showSeenBy, composerAccessory, className, style, }: HelpPanelProps): react_jsx_runtime.JSX.Element;
+
 type MessageCallback = (message: Message) => void;
 type TypingCallback = (event: TypingEvent) => void;
 type ParticipantCallback = (participant: Participant) => void;
@@ -1277,4 +1323,4 @@ declare const SUPPORTED_IMAGE_TYPES: string[];
 /** Max file size in bytes (20MB) */
 declare const MAX_FILE_SIZE: number;
 
-export { AUDIO_MIME_TYPE, type ChannelEvent, ChannelSettings, type ChannelUpdatePayload, type CollabConfig, type CollabError, CollabInbox, CollabInline, CollabPanel, CollabPopup, CollabProvider, CollabSocket, type Conversation, type ConversationKind, ConversationList, ConversationListItem, type ConversationListItem$1 as ConversationListItemData, type ConversationPreview, type CreateConversationResponse, DEEP_LINK_PREFIX, EVENTS, type InviteUserPayload, MAX_FILE_SIZE, MAX_PINNED_MESSAGES, MESSAGES_PAGE_SIZE, MESSAGE_TYPES, type Message, MessageActionsMenu, MessageBubble, MessageInput, MessageList, type MessageListHandle, type MessageSnapshot, type MessageType, type Participant, ParticipantsList, type PatientData, PatientHeader, PinnedMessagesBar, type PreviewBatchResponse, ReplyPreview, ReplyQuoteBlock, SUPPORTED_IMAGE_TYPES, SeenByIndicator, type SendMessagePayload, THEME_DEFAULTS, THEME_VAR, TYPING_DEBOUNCE_MS, type Theme, type TypingEvent, type UserRole, applyThemeOverrides, isCaseKind, isHelpKind, useAudioRecorder, useChannelSettings, useCollab, useConversation, useConversationList, useDeepLinks, useInlineCollab, useMessages, usePinnedMessages, useUnreadCount };
+export { AUDIO_MIME_TYPE, type ChannelEvent, ChannelSettings, type ChannelUpdatePayload, type CollabConfig, type CollabError, CollabInbox, CollabInline, CollabPanel, CollabPopup, CollabProvider, CollabSocket, type Conversation, type ConversationKind, ConversationList, ConversationListItem, type ConversationListItem$1 as ConversationListItemData, type ConversationPreview, type CreateConversationResponse, DEEP_LINK_PREFIX, EVENTS, HelpPanel, type InviteUserPayload, MAX_FILE_SIZE, MAX_PINNED_MESSAGES, MESSAGES_PAGE_SIZE, MESSAGE_TYPES, type Message, MessageActionsMenu, MessageBubble, MessageInput, MessageList, type MessageListHandle, type MessageSnapshot, type MessageType, type Participant, ParticipantsList, type PatientData, PatientHeader, PinnedMessagesBar, type PreviewBatchResponse, ReplyPreview, ReplyQuoteBlock, SUPPORTED_IMAGE_TYPES, SeenByIndicator, type SendMessagePayload, THEME_DEFAULTS, THEME_VAR, TYPING_DEBOUNCE_MS, type Theme, type TypingEvent, type UserRole, applyThemeOverrides, isCaseKind, isHelpKind, useAudioRecorder, useChannelSettings, useCollab, useConversation, useConversationList, useDeepLinks, useInlineCollab, useMessages, usePinnedMessages, useUnreadCount };

package/dist/index.js

@@ -1645,7 +1645,7 @@ function PatientHeader({
       }
     )
   ] }) : null;
-  const settingsButton = onOpenSettings ? /* @__PURE__ */ jsxRuntime.jsxs(
+  const settingsButton = onOpenSettings && !isSupportChannel ? /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
       onClick: onOpenSettings,
@@ -3937,6 +3937,7 @@ function fallbackName(role) {
       return "User";
   }
 }
+var FALLBACK_ROLE_COLOR = { bg: "#f1f5f9", text: "#64748b" };
 function RoleBadge({ role }) {
   const colors = {
     radiologist: { bg: "#eef2ff", text: "#4f46e5" },
@@ -3948,8 +3949,8 @@ function RoleBadge({ role }) {
     admin: { bg: "#f1f5f9", text: "#64748b" }
     // slate
   };
-  const color = colors[role];
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles9.roleBadge, backgroundColor: color.bg, color: color.text }, children: role });
+  const color = colors[role] ?? FALLBACK_ROLE_COLOR;
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles9.roleBadge, backgroundColor: color.bg, color: color.text }, children: fallbackName(role) });
 }
 var styles9 = {
   list: {
@@ -4835,6 +4836,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,
@@ -4861,7 +4863,8 @@ function CollabPopup({
   const containerRef = React4.useRef(null);
   const previouslyFocused = React4.useRef(null);
   const titleId = React4.useId();
-  const titleText = cleanChannelName(loadedConversation?.name) || buildChannelName(patientData);
+  const titleText = cleanChannelName(loadedConversation?.name) || (patientData ? buildChannelName(patientData) : "Natoe Support");
+  const isSupportChannel = !patientData;
   const handleMouseDown = React4.useCallback(
     (e) => {
       if (!e.target.closest("[data-drag-handle]")) return;
@@ -4966,8 +4969,9 @@ function CollabPopup({
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles13.titleCenter, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h2", { id: titleId, style: styles13.patientName, children: patientData.patientName || titleText }),
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { id: titleId, style: styles13.patientName, children: patientData?.patientName || titleText }),
             (() => {
+              if (!patientData) return /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles13.subRow, children: /* @__PURE__ */ jsxRuntime.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));
@@ -4979,7 +4983,7 @@ function CollabPopup({
             })()
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles13.titleActions, children: [
-            loadedConversation && /* @__PURE__ */ jsxRuntime.jsxs(
+            loadedConversation && !isSupportChannel && /* @__PURE__ */ jsxRuntime.jsxs(
               "button",
               {
                 type: "button",
@@ -5024,6 +5028,7 @@ function CollabPopup({
           CollabPanel,
           {
             orderId,
+            conversation: providedConversation,
             patientData,
             participantIds,
             kind,
@@ -6684,6 +6689,143 @@ var styles17 = {
     maxWidth: "320px"
   }
 };
+ensureGlobalStyles();
+function HelpPanel({
+  conversation,
+  showSeenBy = true,
+  composerAccessory,
+  className,
+  style
+}) {
+  const { config } = useCollab();
+  const { handleDeepLink } = useDeepLinks();
+  const messageListRef = React4.useRef(null);
+  const {
+    messages,
+    typingUsers,
+    isLoading,
+    hasMore,
+    error,
+    replyTo,
+    setReplyTo,
+    sendMessage,
+    retryMessage,
+    sendAudioMessage,
+    sendFileMessage,
+    sendTyping,
+    markAsRead,
+    loadMoreMessages
+  } = useConversation({ conversation, kind: "help_lab" });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: [ROOT_CLASS, className].filter(Boolean).join(" "),
+      style: { ...styles18.container, ...style },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("header", { style: styles18.header, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles18.avatar, "aria-hidden": "true", children: "N" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: styles18.headerText, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles18.title, children: "Natoe Support" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles18.subtitle, children: "Questions about your account, billing or a case" })
+          ] })
+        ] }),
+        error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles18.error, role: "alert", children: error }),
+        isLoading && messages.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles18.loading, children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) }) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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
@@ -6901,6 +7043,7 @@ exports.ConversationList = ConversationList;
 exports.ConversationListItem = ConversationListItem;
 exports.DEEP_LINK_PREFIX = DEEP_LINK_PREFIX;
 exports.EVENTS = EVENTS;
+exports.HelpPanel = HelpPanel;
 exports.MAX_FILE_SIZE = MAX_FILE_SIZE;
 exports.MAX_PINNED_MESSAGES = MAX_PINNED_MESSAGES;
 exports.MESSAGES_PAGE_SIZE = MESSAGES_PAGE_SIZE;