@proteos/ui 0.31.0 → 0.32.1

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

@@ -0,0 +1,94 @@
+import type { ContactAddress, SendRecipient } from '@proteos/sdk'
+import { useEffect, useMemo, useRef, useState } from 'react'
+
+import type { SearchRecipients } from '../message-composer/message-composer'
+import { MultiSelect, type MultiSelectOption } from '../multi-select/multi-select'
+
+/** Debounce for the injected directory search (`q`). */
+const SEARCH_DEBOUNCE_MS = 250
+
+/* =========================================================================
+   RecipientSelect — a searchable multi-select over the contact-address
+   directory a connection can reach, emitting SendRecipient[] (all
+   kind=contact-address). Backs the composer's To/Cc/Bcc rows. Typing filters
+   the loaded options locally AND (debounced) runs the injected
+   `searchRecipients` server-side, so parties beyond the first page are
+   findable; already-selected ids are always included so their chips render
+   even when off the current result page. Fetch-agnostic: the host injects
+   the search; stale responses are ignored and a failed search keeps the
+   previous options (best-effort).
+   ========================================================================= */
+
+export interface RecipientSelectProps {
+  connectionId: string
+  searchRecipients: SearchRecipients
+  value: SendRecipient[]
+  onChange: (next: SendRecipient[]) => void
+  placeholder?: string
+}
+
+export function RecipientSelect({
+  connectionId,
+  searchRecipients,
+  value,
+  onChange,
+  placeholder,
+}: RecipientSelectProps) {
+  const [search, setSearch] = useState('')
+  const [debouncedSearch, setDebouncedSearch] = useState('')
+  useEffect(() => {
+    const handle = window.setTimeout(() => setDebouncedSearch(search.trim()), SEARCH_DEBOUNCE_MS)
+    return () => window.clearTimeout(handle)
+  }, [search])
+
+  const [addresses, setAddresses] = useState<ContactAddress[]>([])
+  // Monotonic request counter — only the latest in-flight search may land.
+  const requestIdRef = useRef(0)
+  useEffect(() => {
+    if (connectionId === '') return
+    const requestId = ++requestIdRef.current
+    searchRecipients(connectionId, debouncedSearch)
+      .then((results) => {
+        if (requestId === requestIdRef.current) setAddresses(results)
+      })
+      .catch(() => {
+        // Best-effort directory: keep the previous options on failure.
+      })
+  }, [connectionId, debouncedSearch, searchRecipients])
+
+  const options = useMemo<MultiSelectOption<string>[]>(() => {
+    const map = new Map<string, MultiSelectOption<string>>()
+    for (const recipient of value) {
+      map.set(recipient.external_id, { id: recipient.external_id, label: recipient.external_id })
+    }
+    for (const address of addresses) {
+      const identifier = address.raw_value || address.value
+      map.set(identifier, {
+        id: identifier,
+        label: address.name || identifier,
+      })
+    }
+    return Array.from(map.values())
+  }, [addresses, value])
+
+  // The composer renders the row label (inline mono, like the Via/Subject
+  // rows) — none here.
+  return (
+    <MultiSelect
+      size="sm"
+      isSearchable
+      onSearchChange={setSearch}
+      {...(placeholder !== undefined ? { placeholder } : {})}
+      options={options}
+      selectedKeys={value.map((recipient) => recipient.external_id)}
+      onSelectionChange={(keys) =>
+        onChange(
+          Array.from(keys).map((id) => ({
+            kind: 'contact-address' as const,
+            external_id: String(id),
+          })),
+        )
+      }
+    />
+  )
+}

package/src/index.ts

@@ -14,6 +14,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-composer'
 export * from './components/empty-state'
 export * from './components/error-animation'
 export * from './components/field'
@@ -24,12 +25,14 @@ export * from './components/image-lightbox'
 export * from './components/input'
 export * from './components/kbd'
 export * from './components/menu'
+export * from './components/message-composer'
 export * from './components/modal'
 export * from './components/multi-select'
 export * from './components/nav'
 export * from './components/popover'
 export * from './components/progress-bar'
 export * from './components/radio-group'
+export * from './components/recipient-select'
 export * from './components/record-filter'
 export * from './components/segmented-control'
 export * from './components/select'