@proteos/ui 0.42.2 → 0.43.0

package/src/components/draft-message-card/draft-message-review.tsx

@@ -0,0 +1,197 @@
+import type { Message } from '@proteos/sdk'
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+import {
+  DraftMessageComposer,
+  type DraftMessageClient,
+  type DraftReviewOutcome,
+  draftOutcomeFor,
+  useDraftMessageOutcome,
+} from '../draft-message-composer'
+import { ModalBody, ModalContent, ModalHeader, ModalTitle } from '../modal'
+import { DraftMessageCard } from './draft-message-card'
+
+/* =========================================================================
+   DraftMessageReview — the connected draft-review entry point: loads the
+   draft through the injected client, renders DraftMessageCard, and owns what
+   the preview action does.
+
+   The preview action is the seam. Left alone it opens a modal wrapping
+   DraftMessageComposer — the zero-config path the platform chat uses. Passed
+   `onPreview`, it hands the whole interaction over: the built-in modal is
+   never rendered, and the host settles the card by resolving the outcome.
+   That is how a sandboxed custom component reviews a draft — its iframe-local
+   modal would layer below the host chrome, so it instead asks the host to
+   open one (useComponentModal) and resolves with what the host closed with.
+
+   A draft that is ALREADY terminal when it loads settles immediately: the
+   human may have reviewed it in the platform UI before this card ever
+   rendered, and an un-reviewable card that never resolves would hang whatever
+   is waiting on the outcome (e.g. an agent turn).
+   ========================================================================= */
+
+export interface DraftMessageReviewProps {
+  /** The status=draft message to review. */
+  messageId: string
+  /** Injected fetch surface — see createDraftMessageClient. */
+  client: DraftMessageClient
+  /**
+   * FULL REPLACEMENT for the preview action's default (open the built-in
+   * modal). When supplied the built-in modal is never rendered. Resolve with
+   * the outcome so the card settles, or with null when the reviewer dismissed
+   * without deciding (the card stays reviewable).
+   */
+  onPreview?: (messageId: string) => Promise<DraftReviewOutcome | null>
+  /** Fires at most once, when the draft reaches a terminal state — whether it
+   *  was decided here, by `onPreview`, or before this card ever mounted. */
+  onOutcome?: (outcome: DraftReviewOutcome, message?: Message) => void
+  /** The draft could not be loaded. The card renders nothing in that case. */
+  onLoadError?: (error: Error) => void
+  /** Built-in modal heading. Default 'Review draft'. */
+  modalTitle?: string
+  /** Built-in modal panel width. Default 'max-w-3xl'. */
+  modalClassName?: string
+  /** Built-in modal overlay classes — this is where a host raises the z tier
+   *  above the surface that launched it. */
+  overlayClassName?: string
+  previewLabel?: string
+  className?: string
+}
+
+export function DraftMessageReview({
+  messageId,
+  client,
+  onPreview,
+  onOutcome,
+  onLoadError,
+  modalTitle = 'Review draft',
+  modalClassName = 'max-w-3xl',
+  overlayClassName,
+  previewLabel,
+  className,
+}: DraftMessageReviewProps) {
+  const [message, setMessage] = useState<Message | null>(null)
+  const [subject, setSubject] = useState('')
+  const [isOpen, setIsOpen] = useState(false)
+  const [isPreviewing, setIsPreviewing] = useState(false)
+  const [outcome, setOutcome] = useState<DraftReviewOutcome | null>(null)
+
+  // Latest-closure refs: the host's callbacks are referentially unstable (they
+  // routinely close over a react-query mutation), and depending on them would
+  // re-run the load effect on every host re-render.
+  const onOutcomeRef = useRef(onOutcome)
+  onOutcomeRef.current = onOutcome
+  const onLoadErrorRef = useRef(onLoadError)
+  onLoadErrorRef.current = onLoadError
+
+  // One-shot: the outcome can arrive from the built-in composer, from
+  // `onPreview`, from the load itself, or from the outcome store — the host
+  // must still hear about it exactly once.
+  const hasSettledRef = useRef(false)
+  const settle = useCallback((next: DraftReviewOutcome, settled?: Message) => {
+    setOutcome(next)
+    setIsOpen(false)
+    if (hasSettledRef.current) return
+    hasSettledRef.current = true
+    onOutcomeRef.current?.(next, settled)
+  }, [])
+
+  useEffect(() => {
+    let cancelled = false
+    void (async () => {
+      try {
+        const loaded = await client.getMessage(messageId)
+        if (cancelled) return
+        setMessage(loaded)
+        const terminal = draftOutcomeFor(loaded.status)
+        if (terminal) {
+          settle(terminal, loaded)
+          return
+        }
+        if (loaded.conversation_id) {
+          const conversation = await client.getConversation(loaded.conversation_id)
+          if (!cancelled) setSubject(conversation.subject ?? '')
+        }
+      } catch (error) {
+        if (cancelled) return
+        onLoadErrorRef.current?.(error instanceof Error ? error : new Error(String(error)))
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [client, messageId, settle])
+
+  // A composer for this same draft elsewhere in this JS realm (a detail panel,
+  // a sibling embed) settles the card too — no prop drilling between them.
+  const published = useDraftMessageOutcome(messageId)
+  useEffect(() => {
+    if (published) settle(published.type, published.message)
+  }, [published, settle])
+
+  const preview = () => {
+    if (!onPreview) {
+      setIsOpen(true)
+      return
+    }
+    setIsPreviewing(true)
+    void onPreview(messageId)
+      .then((result) => {
+        if (result) settle(result)
+      })
+      .finally(() => setIsPreviewing(false))
+  }
+
+  if (!message) return null
+
+  return (
+    <>
+      <DraftMessageCard
+        channel={message.channel}
+        title={titleFor(message, subject)}
+        recipients={toRecipients(message)}
+        outcome={outcome}
+        onPreview={preview}
+        isPreviewDisabled={isPreviewing}
+        {...(previewLabel !== undefined ? { previewLabel } : {})}
+        {...(className !== undefined ? { className } : {})}
+      />
+      {onPreview ? null : (
+        <ModalContent
+          isOpen={isOpen}
+          onOpenChange={setIsOpen}
+          modalClassName={modalClassName}
+          {...(overlayClassName !== undefined ? { className: overlayClassName } : {})}
+        >
+          <ModalHeader>
+            <ModalTitle>{modalTitle}</ModalTitle>
+          </ModalHeader>
+          <ModalBody className="min-h-0 overflow-y-auto">
+            <DraftMessageComposer
+              messageId={messageId}
+              client={client}
+              bodyClassName="max-h-[55dvh]"
+              onSent={(sent) => settle(draftOutcomeFor(sent.status) ?? 'sent', sent)}
+              onRejected={(rejected) => settle('rejected', rejected)}
+              onFailed={(failed) => settle('failed', failed)}
+            />
+          </ModalBody>
+        </ModalContent>
+      )}
+    </>
+  )
+}
+
+/** Subject first; an unsubjected draft (chat channels) leads with its opening
+ *  line so the card still says something about the message. */
+function titleFor(message: Message, subject: string): string {
+  const firstLine = message.content.find((block) => block.type === 'text')?.text?.split('\n')[0]
+  return subject || firstLine || 'Draft message'
+}
+
+function toRecipients(message: Message): string[] {
+  return (message.recipients ?? [])
+    .filter((recipient) => recipient.role === 'to')
+    .map((recipient) => recipient.name || recipient.email || recipient.external_id)
+    .filter((label): label is string => !!label)
+}

package/src/components/draft-message-card/index.ts

@@ -0,0 +1,7 @@
+export {
+  DRAFT_OUTCOME_LABEL,
+  DraftMessageCard,
+  type DraftMessageCardProps,
+  draftMessageCardStyles,
+} from './draft-message-card'
+export { DraftMessageReview, type DraftMessageReviewProps } from './draft-message-review'

package/src/components/draft-message-composer/draft-message-composer.tsx

@@ -8,6 +8,7 @@ import { Button } from '../button'
 import { type ComposerAttachment, type ComposerValue, MessageComposer } from '../message-composer'
 import { registerDraftMessageActions } from './draft-message-actions-store'
 import { publishDraftMessageOutcome } from './draft-message-outcome-store'
+import { type TerminalKind, terminalKindFor } from './draft-status'
 import type { DraftMessageClient } from './types'
 
 /* =========================================================================
@@ -48,7 +49,6 @@ const styles = draftMessageComposerStyles()
 
 type Phase = 'loading' | 'load-error' | 'ready' | 'terminal'
 type Busy = 'idle' | 'saving' | 'sending' | 'rejecting'
-type TerminalKind = 'sent' | 'rejected' | 'failed' | 'not-draft'
 
 interface DraftSnapshot {
   text: string
@@ -92,22 +92,6 @@ function sendRecipientsFromMessage(message: Message, role: 'to' | 'cc' | 'bcc'):
     }))
 }
 
-function terminalKindFor(status: Message['status']): TerminalKind | null {
-  switch (status) {
-    case 'draft':
-      return null
-    case 'pending':
-    case 'sent':
-      return 'sent'
-    case 'rejected':
-      return 'rejected'
-    case 'failed':
-      return 'failed'
-    default:
-      return 'not-draft'
-  }
-}
-
 export function DraftMessageComposer({
   messageId,
   client,

package/src/components/draft-message-composer/draft-status.ts

@@ -0,0 +1,49 @@
+import type { Message } from '@proteos/sdk'
+
+/* =========================================================================
+   Draft status → terminal state. One switch, two narrowings: the composer
+   needs to distinguish "this id isn't a draft at all" (it renders a distinct
+   terminal notice) while review surfaces only care whether a decision has
+   been reached. Both were duplicated before — keep them here so a new
+   Message['status'] value is handled in exactly one place.
+   ========================================================================= */
+
+/** What a reviewed draft ended up as. The wire shape of the
+ *  `present_message_draft` client tool's outcome, and of the value a
+ *  host-rendered review modal closes with. */
+export type DraftReviewOutcome = 'sent' | 'rejected' | 'failed'
+
+/** Terminal states a draft id can be in, plus the "never was a draft" case. */
+export type TerminalKind = DraftReviewOutcome | 'not-draft'
+
+const OUTCOME_BY_STATUS: Partial<Record<Message['status'], DraftReviewOutcome>> = {
+  // `pending` is already handed to the transport — from the reviewer's side
+  // the decision was "send".
+  pending: 'sent',
+  sent: 'sent',
+  rejected: 'rejected',
+  failed: 'failed',
+}
+
+/** Terminal state of the message, or null while it is still reviewable. */
+export function terminalKindFor(status: Message['status']): TerminalKind | null {
+  if (status === 'draft') return null
+  return OUTCOME_BY_STATUS[status] ?? 'not-draft'
+}
+
+/**
+ * The review-surface narrowing: the outcome a card should settle on, or null
+ * while the draft is still reviewable. A status that was never a draft
+ * (`received`, …) is not an outcome — it leaves the card pending rather than
+ * inventing a decision the human never made.
+ */
+export function draftOutcomeFor(status: Message['status']): DraftReviewOutcome | null {
+  const kind = terminalKindFor(status)
+  return kind === null || kind === 'not-draft' ? null : kind
+}
+
+/** Narrows the `unknown` a host modal resolves with (a dismissed modal
+ *  resolves `undefined`). */
+export function isDraftReviewOutcome(value: unknown): value is DraftReviewOutcome {
+  return value === 'sent' || value === 'rejected' || value === 'failed'
+}

package/src/components/draft-message-composer/index.ts

@@ -10,6 +10,13 @@ export {
   type DraftMessageComposerProps,
   draftMessageComposerStyles,
 } from './draft-message-composer'
+export {
+  type DraftReviewOutcome,
+  draftOutcomeFor,
+  isDraftReviewOutcome,
+  type TerminalKind,
+  terminalKindFor,
+} from './draft-status'
 export {
   __resetDraftMessageOutcomes,
   publishDraftMessageOutcome,

package/src/index.ts

@@ -7,6 +7,7 @@ export * from './components/badge-multi-select'
 export * from './components/breadcrumbs'
 export * from './components/button'
 export * from './components/card'
+export * from './components/channel-icon'
 export * from './components/checkbox'
 export * from './components/combobox'
 export * from './components/command'
@@ -14,6 +15,7 @@ export * from './components/currency-input'
 export * from './components/data-table'
 export * from './components/date-picker'
 export * from './components/date-time-picker'
+export * from './components/draft-message-card'
 export * from './components/draft-message-composer'
 export * from './components/empty-state'
 export * from './components/error-animation'