@proteos/ui 0.41.1 → 0.42.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proteos/ui",
-  "version": "0.41.1",
+  "version": "0.42.0",
   "license": "FSL-1.1-Apache-2.0",
   "description": "Proteos React component library (React Aria Components + Tailwind v4).",
   "repository": {
@@ -55,7 +55,7 @@
     "tailwind-merge": "^3.5.0",
     "tailwind-variants": "^3.2.2",
     "tailwindcss": "^4.2.4",
-    "@proteos/sdk": "0.41.1"
+    "@proteos/sdk": "0.42.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.13",

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

@@ -151,14 +151,20 @@ describe('DraftMessageComposer', () => {
     expect(screen.getByTestId('outcome')).toHaveTextContent('sent')
   })
 
-  it('a failed delivery is terminal with no callback and no outcome', async () => {
+  it('a failed delivery is terminal, fires onFailed only and no outcome', async () => {
     const client = mockClient({
       sendDraft: vi.fn().mockResolvedValue(draftMessage({ status: 'failed', error: 'smtp 550' })),
     })
     const onSent = vi.fn()
+    const onFailed = vi.fn()
     render(
       <>
-        <DraftMessageComposer messageId="draft-1" client={client} onSent={onSent} />
+        <DraftMessageComposer
+          messageId="draft-1"
+          client={client}
+          onSent={onSent}
+          onFailed={onFailed}
+        />
         <OutcomeProbe messageId="draft-1" />
       </>,
     )
@@ -166,6 +172,7 @@ describe('DraftMessageComposer', () => {
     await userEvent.click(screen.getByRole('button', { name: 'Send' }))
     expect(await screen.findByText(/Sending failed — smtp 550/)).toBeInTheDocument()
     expect(onSent).not.toHaveBeenCalled()
+    expect(onFailed).toHaveBeenCalledTimes(1)
     expect(screen.getByTestId('outcome')).toHaveTextContent('none')
   })
 

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

@@ -67,6 +67,8 @@ export interface DraftMessageComposerProps {
   onSent?: (message: Message) => void
   /** Fires once the draft was declined. */
   onRejected?: (message: Message) => void
+  /** Fires when the human approved the send but delivery failed. */
+  onFailed?: (message: Message) => void
   /**
    * Default true. When false the internal Send / Save draft / Reject row is
    * hidden — the composer becomes a pure preview/edit surface driven by
@@ -74,6 +76,9 @@ export interface DraftMessageComposerProps {
    */
   showActions?: boolean
   className?: string
+  /** Composes onto the body textarea (MessageComposer.bodyClassName) — review
+   *  surfaces raise the growth cap so a whole email fits. */
+  bodyClassName?: string
 }
 
 /** Maps stored recipient snapshots back to editable send targets (contact
@@ -108,8 +113,10 @@ export function DraftMessageComposer({
   client,
   onSent,
   onRejected,
+  onFailed,
   showActions = true,
   className,
+  bodyClassName,
 }: DraftMessageComposerProps) {
   const [phase, setPhase] = useState<Phase>('loading')
   const [busy, setBusy] = useState<Busy>('idle')
@@ -266,6 +273,7 @@ export function DraftMessageComposer({
         // published — the timeline's failed-retry pattern owns what's next.
         setTerminalKind('failed')
         setPhase('terminal')
+        onFailed?.(result)
         return
       }
       setTerminalKind('sent')
@@ -288,6 +296,7 @@ export function DraftMessageComposer({
     client,
     messageId,
     onSent,
+    onFailed,
     areRecipientsEditable,
     conversation,
     to,
@@ -406,6 +415,7 @@ export function DraftMessageComposer({
         value={value}
         onValueChange={setValue}
         placeholder="Draft body…"
+        {...(bodyClassName !== undefined ? { bodyClassName } : {})}
         {...(isEmail && !isSubjectEditable ? { isSubjectReadOnly: true } : {})}
         onSend={async () => send()}
         {...(areRecipientsEditable && message.connection_id

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

@@ -135,6 +135,9 @@ export interface MessageComposerProps {
   showSendButton?: boolean
   /** Composes onto the outer box chrome (`messageComposerStyles`). */
   className?: string
+  /** Composes onto the body textarea — review surfaces override the default
+   *  `max-h-48` growth cap (e.g. `max-h-[55dvh]`) so a whole email fits. */
+  bodyClassName?: string
 }
 
 export function MessageComposer({
@@ -163,6 +166,7 @@ export function MessageComposer({
   hasUploadingAttachments,
   showSendButton,
   className,
+  bodyClassName,
 }: MessageComposerProps) {
   const [isSending, setIsSending] = useState(false)
   const [sendError, setSendError] = useState<string | null>(null)
@@ -172,6 +176,13 @@ export function MessageComposer({
   const [showCcBcc, setShowCcBcc] = useState(false)
   const textareaRef = useRef<HTMLTextAreaElement>(null)
 
+  // Size-to-content on every text change — including a seeded value (a loaded
+  // draft body), which never fires onChange.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: value.text is the trigger — the height reads the DOM, not the value.
+  useEffect(() => {
+    if (textareaRef.current) autoGrow(textareaRef.current)
+  }, [value.text])
+
   // Controlled-if-provided, per group: a provided prop wins over internal
   // state; setters mirror into internal state only when uncontrolled.
   const to = toProp ?? internalTo
@@ -402,14 +413,12 @@ export function MessageComposer({
             value={value.text}
             placeholder={placeholder}
             rows={1}
-            onChange={(event) => {
-              onValueChange({ ...value, text: event.target.value })
-              autoGrow(event.currentTarget)
-            }}
+            onChange={(event) => onValueChange({ ...value, text: event.target.value })}
             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',
+              bodyClassName,
             )}
             data-conversations-composer
           />
@@ -474,7 +483,9 @@ export function MessageComposer({
   )
 }
 
+// Sizes the textarea to its content; the CSS max-h on the element clips the
+// growth (and scrolls) so the cap stays a style concern, overridable per host.
 function autoGrow(node: HTMLTextAreaElement) {
   node.style.height = 'auto'
-  node.style.height = `${Math.min(node.scrollHeight, 192)}px`
+  node.style.height = `${node.scrollHeight}px`
 }