@proteos/ui 0.31.0 → 0.32.0

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

@@ -0,0 +1,480 @@
+import type { ContactAddress, SendRecipient } from '@proteos/sdk'
+import { Paperclip, SendHorizontal } from 'lucide-react'
+import { type KeyboardEvent, type ReactNode, useCallback, useEffect, useRef, useState } from 'react'
+import { Button as AriaButton, FileTrigger } from 'react-aria-components'
+import { tv } from 'tailwind-variants'
+
+import { cn } from '../../lib/cn'
+import { AttachmentChip } from '../attachment-chip/attachment-chip'
+import { Button } from '../button/button'
+import { RecipientSelect } from '../recipient-select/recipient-select'
+import { Select } from '../select/select'
+
+/* =========================================================================
+   MessageComposer — shared chrome (Field contract: rule border, inset
+   shadow, accent + halo on focus), channel-aware behavior:
+     chat  : ↵ send, ⇧↵ newline
+     email : subject row, ⌘↵ send
+   The active binding is printed as a mono hint next to send. A failed send
+   NEVER clears the input. Disabled states replace the composer with honest
+   copy.
+
+   Fetch-agnostic: text + subject are controlled (`value`/`onValueChange` —
+   draft persistence lives with the host), the To/Cc/Bcc directory search is
+   injected (`searchRecipients`), and attachments are presentational — the
+   host owns its upload queue and maps it onto `ComposerAttachment`.
+   ========================================================================= */
+
+/** Controlled text + subject. Draft persistence lives with the host. */
+export interface ComposerValue {
+  text: string
+  subject?: string
+}
+
+export interface ComposerSendInput {
+  text: string
+  subject?: string
+  /** Only when the composer owns addressing (`showToField` — compose). */
+  to?: SendRecipient[]
+  cc?: SendRecipient[]
+  bcc?: SendRecipient[]
+}
+
+/** The compose view's connection switcher, rendered as the composer's top row. */
+export interface ComposerConnectionPicker {
+  options: ReadonlyArray<{
+    id: string
+    /** Rich render (channel icon + name); `textValue` carries the plain name. */
+    label: ReactNode
+    textValue: string
+  }>
+  selectedId: string
+  onSelect: (connectionId: string) => void
+}
+
+/** Presentational attachment chip input — hosts map their own upload model onto it. */
+export interface ComposerAttachment {
+  localId: string
+  name: string
+  /** Bytes when known — server-loaded attachments may not know their size. */
+  sizeInBytes?: number
+  contentType?: string
+  status: 'uploading' | 'ready' | 'error'
+  errorMessage?: string
+}
+
+/** Directory search backing the To/Cc/Bcc pickers — injected per host (the lib never fetches). */
+export type SearchRecipients = (connectionId: string, q: string) => Promise<ContactAddress[]>
+
+/** Per-file cap for conversation-channel sends (the backend rejects larger
+ *  with `attachment_too_large`; Slack additionally caps at 10 files/message,
+ *  surfaced through the send error line). */
+export const MAX_COMPOSER_ATTACHMENT_BYTES = 25 * 1024 * 1024
+
+/** Outer box chrome — exported so hosts can re-apply the same shell. */
+export const messageComposerStyles = tv({
+  base: [
+    'rounded-[10px] border border-rule bg-surface shadow-[var(--shadow-inset)]',
+    'transition-[border-color,box-shadow] duration-150',
+    'focus-within:border-accent focus-within:shadow-[var(--shadow-focus)]',
+  ],
+})
+
+/** Shared row-label chrome: fixed width so the Via/To/Cc/Bcc controls all
+ *  start at the same x (Subject keeps its own natural label). */
+const ROW_LABEL = 'w-7 shrink-0 font-mono text-[10px] uppercase tracking-[0.08em] text-ink-4'
+
+export interface MessageComposerProps {
+  mode: 'chat' | 'email'
+  /** Controlled text+subject (draft persistence lives with the host). */
+  value: ComposerValue
+  onValueChange: (value: ComposerValue) => void
+  placeholder: string
+  /** Email replies arrive with `re: <subject>` prefilled. */
+  subjectPrefill?: string
+  /** When true (email mode), the Subject row renders the subject as static
+   *  text — reply drafts where the subject is derived from the thread and
+   *  must not be edited. The Cc/Bcc reveal stays functional. Default false. */
+  isSubjectReadOnly?: boolean
+  /** When set, the composer is replaced by this banner (ended conversation,
+   *  read-only transcript). */
+  disabledReason?: ReactNode
+  onSend: (input: ComposerSendInput) => Promise<unknown>
+  /** Connection whose directory backs the To/Cc/Bcc pickers. */
+  connectionId?: string
+  /** Compose only: a connection switcher as the composer's top row. */
+  connectionPicker?: ComposerConnectionPicker
+  /** Compose only: the composer owns addressing — a To recipient row; the
+   *  picks arrive on `ComposerSendInput.to` and gate send. */
+  showToField?: boolean
+  /** Email originate only: reveal Cc/Bcc recipient rows. */
+  showRecipientFields?: boolean
+  /** Required for the To/Cc/Bcc rows to render (with `connectionId`). */
+  searchRecipients?: SearchRecipients
+  /** Controlled-if-provided recipients; internal state otherwise. Internal
+   *  recipient state resets when `connectionId` changes and clears after a
+   *  successful send — controlled parents own their own resets. */
+  to?: SendRecipient[]
+  cc?: SendRecipient[]
+  bcc?: SendRecipient[]
+  onToChange?: (next: SendRecipient[]) => void
+  onCcChange?: (next: SendRecipient[]) => void
+  onBccChange?: (next: SendRecipient[]) => void
+  /** The host-owned pending queue, rendered as chips above the input. */
+  attachments?: ComposerAttachment[]
+  /** When set, the paperclip renders and picked files flow to the host. */
+  onAddFiles?: (files: File[]) => void
+  onRemoveAttachment?: (localId: string) => void
+  /** True while any attachment is still uploading — blocks send. */
+  hasUploadingAttachments?: boolean
+  /**
+   * Default true. When false: the send button AND the keybinding hint are
+   * hidden and the ↵/⌘↵ submit combo is disabled — submission is fully
+   * delegated to an external driver (e.g. the draft review surface).
+   */
+  showSendButton?: boolean
+  /** Composes onto the outer box chrome (`messageComposerStyles`). */
+  className?: string
+}
+
+export function MessageComposer({
+  mode,
+  value,
+  onValueChange,
+  placeholder,
+  subjectPrefill,
+  isSubjectReadOnly,
+  disabledReason,
+  onSend,
+  connectionId,
+  connectionPicker,
+  showToField,
+  showRecipientFields,
+  searchRecipients,
+  to: toProp,
+  cc: ccProp,
+  bcc: bccProp,
+  onToChange,
+  onCcChange,
+  onBccChange,
+  attachments,
+  onAddFiles,
+  onRemoveAttachment,
+  hasUploadingAttachments,
+  showSendButton,
+  className,
+}: MessageComposerProps) {
+  const [isSending, setIsSending] = useState(false)
+  const [sendError, setSendError] = useState<string | null>(null)
+  const [internalTo, setInternalTo] = useState<SendRecipient[]>([])
+  const [internalCc, setInternalCc] = useState<SendRecipient[]>([])
+  const [internalBcc, setInternalBcc] = useState<SendRecipient[]>([])
+  const [showCcBcc, setShowCcBcc] = useState(false)
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+  // Controlled-if-provided, per group: a provided prop wins over internal
+  // state; setters mirror into internal state only when uncontrolled.
+  const to = toProp ?? internalTo
+  const cc = ccProp ?? internalCc
+  const bcc = bccProp ?? internalBcc
+  const setTo = (next: SendRecipient[]) => {
+    if (toProp === undefined) setInternalTo(next)
+    onToChange?.(next)
+  }
+  const setCc = (next: SendRecipient[]) => {
+    if (ccProp === undefined) setInternalCc(next)
+    onCcChange?.(next)
+  }
+  const setBcc = (next: SendRecipient[]) => {
+    if (bccProp === undefined) setInternalBcc(next)
+    onBccChange?.(next)
+  }
+
+  // The recipient rows need a directory to search — both halves, or nothing.
+  const directory =
+    searchRecipients !== undefined && connectionId ? { searchRecipients, connectionId } : undefined
+  const canPickRecipients =
+    mode === 'email' && (showRecipientFields ?? false) && directory !== undefined
+  const needsTo = (showToField ?? false) && directory !== undefined
+  const isSendButtonShown = showSendButton ?? true
+
+  // INTERNAL recipients belong to one connection's directory — switching (the
+  // compose picker) drops them. Controlled parents own their own resets.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: connectionId is the trigger — the pickers must reset exactly when the directory changes.
+  useEffect(() => {
+    setInternalTo([])
+    setInternalCc([])
+    setInternalBcc([])
+  }, [connectionId])
+
+  const subject = value.subject ?? subjectPrefill ?? ''
+  const readyCount = (attachments ?? []).filter(
+    (attachment) => attachment.status === 'ready',
+  ).length
+  const canSend =
+    (value.text.trim() !== '' || readyCount > 0) &&
+    (mode !== 'email' || subject.trim() !== '') &&
+    (!needsTo || to.length > 0) &&
+    !(hasUploadingAttachments ?? false)
+
+  const submit = useCallback(async () => {
+    if (!canSend || isSending) return
+    setIsSending(true)
+    setSendError(null)
+    try {
+      await onSend({
+        text: value.text.trim(),
+        ...(mode === 'email' ? { subject: subject.trim() } : {}),
+        ...(needsTo ? { to } : {}),
+        ...(cc.length > 0 ? { cc } : {}),
+        ...(bcc.length > 0 ? { bcc } : {}),
+      })
+      // Success: hand the cleared value back (subject key omitted) and drop
+      // INTERNAL recipients only — controlled recipients stay the parent's.
+      onValueChange({ text: '' })
+      setInternalTo([])
+      setInternalCc([])
+      setInternalBcc([])
+    } catch (error) {
+      // Never clear the input on failure — the text is the user's work.
+      setSendError(error instanceof Error ? error.message : 'Send failed')
+    } finally {
+      setIsSending(false)
+    }
+  }, [canSend, isSending, onSend, value.text, mode, subject, needsTo, to, cc, bcc, onValueChange])
+
+  if (disabledReason) {
+    return (
+      <div className="px-[18px] py-3">
+        <p
+          className={cn(
+            'rounded-[10px] border border-rule bg-surface-2 px-3.5 py-2.5',
+            'text-[12.5px] text-ink-3 text-center',
+          )}
+        >
+          {disabledReason}
+        </p>
+      </div>
+    )
+  }
+
+  const onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (!isSendButtonShown) return
+    const isSendCombo =
+      mode === 'email'
+        ? event.key === 'Enter' && (event.metaKey || event.ctrlKey)
+        : event.key === 'Enter' && !event.shiftKey
+    if (isSendCombo) {
+      event.preventDefault()
+      void submit()
+    }
+  }
+
+  const ccBccReveal =
+    canPickRecipients && !showCcBcc ? (
+      <AriaButton
+        onPress={() => setShowCcBcc(true)}
+        className="shrink-0 font-mono text-[10px] uppercase tracking-[0.08em] text-ink-4 cursor-pointer outline-none hover:text-ink-3 focus-visible:shadow-[var(--shadow-focus)] rounded"
+      >
+        Cc/Bcc
+      </AriaButton>
+    ) : null
+
+  return (
+    <div className="px-[18px] pb-3.5 pt-1">
+      <div className={cn(messageComposerStyles(), className)}>
+        {connectionPicker ? (
+          <div className="flex items-center gap-2 border-b border-rule-2 px-3.5 py-1.5">
+            <span className={ROW_LABEL}>Via</span>
+            <Select
+              aria-label="Connection"
+              size="sm"
+              options={connectionPicker.options.map((option) => ({
+                id: option.id,
+                label: option.label,
+                textValue: option.textValue,
+              }))}
+              selectedKey={connectionPicker.selectedId}
+              onSelectionChange={(key) => connectionPicker.onSelect(String(key))}
+              triggerClassName="font-mono text-[11px]"
+              popoverClassName="min-w-[var(--trigger-width)] w-max max-w-80"
+            />
+          </div>
+        ) : null}
+
+        {mode === 'email' ? (
+          isSubjectReadOnly ? (
+            <div className="flex items-center gap-2 border-b border-rule-2 px-3.5 py-1.5">
+              <span className="font-mono text-[10px] uppercase tracking-[0.08em] text-ink-4">
+                Subject
+              </span>
+              <span className="flex-1 min-w-0 truncate text-[13px] text-ink">{subject}</span>
+              {ccBccReveal}
+            </div>
+          ) : (
+            <label className="flex items-center gap-2 border-b border-rule-2 px-3.5 py-1.5">
+              <span className="font-mono text-[10px] uppercase tracking-[0.08em] text-ink-4">
+                Subject
+              </span>
+              <input
+                value={subject}
+                onChange={(event) => onValueChange({ ...value, subject: event.target.value })}
+                placeholder="Subject"
+                className="flex-1 bg-transparent outline-none text-[13px] text-ink placeholder:text-ink-4"
+              />
+              {ccBccReveal}
+            </label>
+          )
+        ) : null}
+
+        {needsTo && directory ? (
+          <div className="flex items-center gap-2 border-b border-rule-2 px-3.5 py-1.5">
+            <span className={ROW_LABEL}>To</span>
+            <div className="flex-1 min-w-0">
+              <RecipientSelect
+                connectionId={directory.connectionId}
+                searchRecipients={directory.searchRecipients}
+                placeholder="Pick recipients…"
+                value={to}
+                onChange={setTo}
+              />
+            </div>
+          </div>
+        ) : null}
+
+        {canPickRecipients && directory && showCcBcc ? (
+          <>
+            <div className="flex items-center gap-2 border-b border-rule-2 px-3.5 py-1.5">
+              <span className={ROW_LABEL}>Cc</span>
+              <div className="flex-1 min-w-0">
+                <RecipientSelect
+                  connectionId={directory.connectionId}
+                  searchRecipients={directory.searchRecipients}
+                  placeholder="Add cc…"
+                  value={cc}
+                  onChange={setCc}
+                />
+              </div>
+            </div>
+            <div className="flex items-center gap-2 border-b border-rule-2 px-3.5 py-1.5">
+              <span className={ROW_LABEL}>Bcc</span>
+              <div className="flex-1 min-w-0">
+                <RecipientSelect
+                  connectionId={directory.connectionId}
+                  searchRecipients={directory.searchRecipients}
+                  placeholder="Add bcc…"
+                  value={bcc}
+                  onChange={setBcc}
+                />
+              </div>
+            </div>
+          </>
+        ) : null}
+
+        {attachments && attachments.length > 0 ? (
+          // Single horizontally-scrollable row so the chips never grow the composer tall.
+          <div className="flex gap-1.5 overflow-x-auto px-3.5 pt-2 pb-0.5">
+            {attachments.map((attachment) => (
+              <AttachmentChip
+                key={attachment.localId}
+                name={attachment.name}
+                status={attachment.status}
+                {...(attachment.sizeInBytes !== undefined
+                  ? { sizeInBytes: attachment.sizeInBytes }
+                  : {})}
+                {...(attachment.contentType ? { contentType: attachment.contentType } : {})}
+                {...(attachment.errorMessage ? { errorMessage: attachment.errorMessage } : {})}
+                {...(onRemoveAttachment
+                  ? { onRemove: () => onRemoveAttachment(attachment.localId) }
+                  : {})}
+                className="shrink-0"
+              />
+            ))}
+          </div>
+        ) : null}
+
+        {/* Stacked like Ask Proteos: the input is its own full-width row (typing
+            grows it upward), the actions sit in a row beneath — clip on the left,
+            send on the right — so the text always starts at the box's left edge. */}
+        <div className="flex flex-col gap-2 px-3.5 py-2">
+          <textarea
+            ref={textareaRef}
+            value={value.text}
+            placeholder={placeholder}
+            rows={1}
+            onChange={(event) => {
+              onValueChange({ ...value, text: event.target.value })
+              autoGrow(event.currentTarget)
+            }}
+            onKeyDown={onKeyDown}
+            className={cn(
+              'w-full resize-none bg-transparent outline-none',
+              'min-h-[40px] max-h-48 text-[14px] leading-[1.5] text-ink placeholder:text-ink-4',
+            )}
+            data-conversations-composer
+          />
+
+          <div className="flex items-center justify-between gap-2">
+            {onAddFiles ? (
+              <FileTrigger
+                allowsMultiple
+                onSelect={(files) => {
+                  if (files) onAddFiles(Array.from(files))
+                }}
+              >
+                <Button
+                  variant="subtle"
+                  size="icon-md"
+                  aria-label="Attach files"
+                  className="shrink-0"
+                >
+                  <Paperclip className="size-4" aria-hidden />
+                </Button>
+              </FileTrigger>
+            ) : (
+              <span />
+            )}
+
+            {isSendButtonShown ? (
+              <div className="flex items-center gap-2">
+                <span className="font-mono text-[10px] text-ink-4 select-none" aria-hidden>
+                  {mode === 'email' ? '⌘↵' : '↵'}
+                </span>
+                <AriaButton
+                  aria-label="Send"
+                  isDisabled={!canSend || isSending}
+                  onPress={() => void submit()}
+                  className={cn(
+                    'grid place-items-center size-8 rounded-[8px] cursor-pointer',
+                    'bg-accent text-tile-fg transition-opacity duration-150',
+                    'disabled:opacity-40 disabled:cursor-default',
+                    'outline-none focus-visible:shadow-[var(--shadow-focus)]',
+                  )}
+                >
+                  <SendHorizontal className="size-3.5" />
+                </AriaButton>
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </div>
+
+      {sendError ? (
+        <p className="mt-1.5 font-mono text-[11px] text-danger">
+          {sendError} — your message is kept above.{' '}
+          <AriaButton
+            onPress={() => void submit()}
+            className="inline underline cursor-pointer outline-none focus-visible:shadow-[var(--shadow-focus)]"
+          >
+            retry
+          </AriaButton>
+        </p>
+      ) : null}
+    </div>
+  )
+}
+
+function autoGrow(node: HTMLTextAreaElement) {
+  node.style.height = 'auto'
+  node.style.height = `${Math.min(node.scrollHeight, 192)}px`
+}

package/src/components/recipient-select/index.ts

@@ -0,0 +1,2 @@
+export type { RecipientSelectProps } from './recipient-select'
+export { RecipientSelect } from './recipient-select'

package/src/components/recipient-select/recipient-select.test.tsx

@@ -0,0 +1,139 @@
+import type { ContactAddress, SendRecipient } from '@proteos/sdk'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { useState } from 'react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { RecipientSelect } from './recipient-select'
+
+function contactAddress(overrides: Partial<ContactAddress> = {}): ContactAddress {
+  return {
+    id: 'addr-1',
+    value: 'alice@example.com',
+    raw_value: 'alice@example.com',
+    name: 'Alice',
+    ...overrides,
+  } as ContactAddress
+}
+
+function deferred<T>() {
+  let resolve!: (value: T) => void
+  const promise = new Promise<T>((r) => {
+    resolve = r
+  })
+  return { promise, resolve }
+}
+
+function Harness({
+  searchRecipients,
+  onChange,
+  initial = [],
+}: {
+  searchRecipients: (connectionId: string, q: string) => Promise<ContactAddress[]>
+  onChange?: (next: SendRecipient[]) => void
+  initial?: SendRecipient[]
+}) {
+  const [value, setValue] = useState<SendRecipient[]>(initial)
+  return (
+    <RecipientSelect
+      connectionId="conn-1"
+      searchRecipients={searchRecipients}
+      placeholder="Pick recipients…"
+      value={value}
+      onChange={(next) => {
+        setValue(next)
+        onChange?.(next)
+      }}
+    />
+  )
+}
+
+describe('RecipientSelect', () => {
+  it('loads the directory on mount and emits contact-address recipients on pick', async () => {
+    const searchRecipients = vi
+      .fn()
+      .mockResolvedValue([
+        contactAddress(),
+        contactAddress({ id: 'addr-2', value: 'bob@example.com', raw_value: '', name: 'Bob' }),
+      ])
+    const onChange = vi.fn()
+    render(<Harness searchRecipients={searchRecipients} onChange={onChange} />)
+
+    await waitFor(() => expect(searchRecipients).toHaveBeenCalledWith('conn-1', ''))
+
+    await userEvent.click(screen.getByRole('combobox'))
+    await userEvent.click(await screen.findByRole('option', { name: 'Alice' }))
+    expect(onChange).toHaveBeenCalledWith([
+      { kind: 'contact-address', external_id: 'alice@example.com' },
+    ])
+    // Bob has no raw_value — the canonical value is the identifier.
+    await userEvent.click(screen.getByRole('option', { name: 'Bob' }))
+    expect(onChange).toHaveBeenLastCalledWith([
+      { kind: 'contact-address', external_id: 'alice@example.com' },
+      { kind: 'contact-address', external_id: 'bob@example.com' },
+    ])
+  })
+
+  it('debounces the search text into the injected search', async () => {
+    const searchRecipients = vi.fn().mockResolvedValue([contactAddress()])
+    render(<Harness searchRecipients={searchRecipients} />)
+
+    await userEvent.click(screen.getByRole('combobox'))
+    await userEvent.type(screen.getByLabelText('Search options'), 'ali')
+
+    await waitFor(() => expect(searchRecipients).toHaveBeenCalledWith('conn-1', 'ali'))
+    // Debounced: never one call per keystroke ('a', 'al').
+    expect(searchRecipients).not.toHaveBeenCalledWith('conn-1', 'a')
+    expect(searchRecipients).not.toHaveBeenCalledWith('conn-1', 'al')
+  })
+
+  it('always includes already-selected ids so their chips render off-page', async () => {
+    const searchRecipients = vi.fn().mockResolvedValue([])
+    render(
+      <Harness
+        searchRecipients={searchRecipients}
+        initial={[{ kind: 'contact-address', external_id: 'ghost@example.com' }]}
+      />,
+    )
+    expect(await screen.findByText('ghost@example.com')).toBeInTheDocument()
+  })
+
+  it('ignores stale responses that resolve after a newer search', async () => {
+    const initial = deferred<ContactAddress[]>()
+    const searchRecipients = vi
+      .fn()
+      .mockImplementationOnce(() => initial.promise)
+      .mockResolvedValue([contactAddress()])
+    render(<Harness searchRecipients={searchRecipients} />)
+
+    await userEvent.click(screen.getByRole('combobox'))
+    await userEvent.type(screen.getByLabelText('Search options'), 'ali')
+    // The newer 'ali' search lands first…
+    await screen.findByRole('option', { name: 'Alice' })
+
+    // …then the stale mount-time search resolves and must be dropped.
+    initial.resolve([
+      contactAddress({ id: 'addr-9', value: 'stale@example.com', name: 'Alistair Stale' }),
+    ])
+    await waitFor(() =>
+      expect(screen.queryByRole('option', { name: 'Alistair Stale' })).not.toBeInTheDocument(),
+    )
+    expect(screen.getByRole('option', { name: 'Alice' })).toBeInTheDocument()
+  })
+
+  it('keeps the previous options when a search fails (best-effort)', async () => {
+    const searchRecipients = vi
+      .fn()
+      .mockResolvedValueOnce([contactAddress()])
+      .mockRejectedValue(new Error('directory_unavailable'))
+    render(<Harness searchRecipients={searchRecipients} />)
+
+    await userEvent.click(screen.getByRole('combobox'))
+    await screen.findByRole('option', { name: 'Alice' })
+
+    // 'ali' still matches Alice locally, so the kept option stays visible.
+    await userEvent.type(screen.getByLabelText('Search options'), 'ali')
+    await waitFor(() => expect(searchRecipients).toHaveBeenCalledWith('conn-1', 'ali'))
+    expect(screen.getByRole('option', { name: 'Alice' })).toBeInTheDocument()
+  })
+})