@proteos/ui 0.31.0 → 0.32.0

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

@@ -0,0 +1,155 @@
+import type { ContactAddress } from '@proteos/sdk'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+
+import { type ComposerValue, MessageComposer, type SearchRecipients } from './message-composer'
+
+const meta: Meta<typeof MessageComposer> = {
+  title: 'Components/MessageComposer',
+  component: MessageComposer,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div className="w-[640px]">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof MessageComposer>
+
+/* Self-contained mock directory — the lib never fetches; hosts inject the
+   search. Filters on name/value like a server-side `q` would. */
+const directory = [
+  {
+    id: 'addr-1',
+    value: 'alice@example.com',
+    raw_value: 'alice@example.com',
+    name: 'Alice Johnson',
+  },
+  { id: 'addr-2', value: 'bob@example.com', raw_value: 'bob@example.com', name: 'Bob Meyer' },
+  {
+    id: 'addr-3',
+    value: 'carol@example.com',
+    raw_value: 'carol@example.com',
+    name: 'Carol Fischer',
+  },
+  { id: 'addr-4', value: 'dan@example.com', raw_value: 'dan@example.com', name: 'Dan Okafor' },
+] as ContactAddress[]
+
+const searchRecipients: SearchRecipients = async (_connectionId, q) => {
+  const needle = q.trim().toLowerCase()
+  return directory.filter(
+    (address) =>
+      needle === '' ||
+      address.name.toLowerCase().includes(needle) ||
+      address.value.includes(needle),
+  )
+}
+
+const sendAfterAMoment = async () => {
+  await new Promise((resolve) => setTimeout(resolve, 400))
+}
+
+export const Chat: Story = {
+  render: () => {
+    const [value, setValue] = useState<ComposerValue>({ text: '' })
+    return (
+      <MessageComposer
+        mode="chat"
+        value={value}
+        onValueChange={setValue}
+        placeholder="Message #ops"
+        onSend={sendAfterAMoment}
+        onAddFiles={() => {}}
+        attachments={[
+          {
+            localId: 'a-1',
+            name: 'q3-report.pdf',
+            sizeInBytes: 48_213,
+            contentType: 'application/pdf',
+            status: 'ready',
+          },
+          { localId: 'a-2', name: 'sync-notes.txt', status: 'uploading' },
+        ]}
+      />
+    )
+  },
+}
+
+export const Email: Story = {
+  render: () => {
+    const [value, setValue] = useState<ComposerValue>({ text: '' })
+    return (
+      <MessageComposer
+        mode="email"
+        value={value}
+        onValueChange={setValue}
+        placeholder="Write your message…"
+        connectionId="conn-1"
+        searchRecipients={searchRecipients}
+        showToField
+        showRecipientFields
+        onSend={sendAfterAMoment}
+      />
+    )
+  },
+}
+
+export const Disabled: Story = {
+  render: () => {
+    const [value, setValue] = useState<ComposerValue>({ text: '' })
+    return (
+      <MessageComposer
+        mode="chat"
+        value={value}
+        onValueChange={setValue}
+        placeholder="Reply…"
+        disabledReason="This conversation ended — replies are closed."
+        onSend={sendAfterAMoment}
+      />
+    )
+  },
+}
+
+/** Submission delegated to an external driver (draft review): no send
+ *  button, no keybinding hint, Enter never submits. */
+export const HiddenSendButton: Story = {
+  render: () => {
+    const [value, setValue] = useState<ComposerValue>({ text: 'Edited draft body…' })
+    return (
+      <MessageComposer
+        mode="chat"
+        value={value}
+        onValueChange={setValue}
+        placeholder="Edit the draft…"
+        showSendButton={false}
+        onSend={sendAfterAMoment}
+      />
+    )
+  },
+}
+
+/** Reply drafts derive the subject from the thread — rendered as static
+ *  text; only the body is editable. */
+export const ReadOnlySubject: Story = {
+  render: () => {
+    const [value, setValue] = useState<ComposerValue>({ text: '' })
+    return (
+      <MessageComposer
+        mode="email"
+        value={value}
+        onValueChange={setValue}
+        placeholder="Reply…"
+        subjectPrefill="re: Quarterly numbers"
+        isSubjectReadOnly
+        connectionId="conn-1"
+        searchRecipients={searchRecipients}
+        showRecipientFields
+        onSend={sendAfterAMoment}
+      />
+    )
+  },
+}

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

@@ -0,0 +1,320 @@
+import type { ContactAddress } from '@proteos/sdk'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { useState } from 'react'
+import { describe, expect, it, vi } from 'vitest'
+
+import {
+  type ComposerAttachment,
+  type ComposerValue,
+  MessageComposer,
+  type MessageComposerProps,
+} from './message-composer'
+
+function composerAttachment(overrides: Partial<ComposerAttachment> = {}): ComposerAttachment {
+  return {
+    localId: 'local-1',
+    name: 'report.pdf',
+    sizeInBytes: 9,
+    contentType: 'application/pdf',
+    status: 'ready',
+    ...overrides,
+  }
+}
+
+function contactAddress(overrides: Partial<ContactAddress> = {}): ContactAddress {
+  return {
+    id: 'addr-1',
+    value: 'alice@example.com',
+    raw_value: 'alice@example.com',
+    name: 'Alice',
+    ...overrides,
+  } as ContactAddress
+}
+
+/** The composer is controlled — a tiny stateful host stands in for the app's
+ *  draft persistence so typing works like production. */
+type HarnessProps = Omit<MessageComposerProps, 'value' | 'onValueChange'> & {
+  initialValue?: ComposerValue
+  onValueChange?: (next: ComposerValue) => void
+}
+
+function Harness({ initialValue, onValueChange, ...props }: HarnessProps) {
+  const [value, setValue] = useState<ComposerValue>(initialValue ?? { text: '' })
+  return (
+    <MessageComposer
+      {...props}
+      value={value}
+      onValueChange={(next) => {
+        setValue(next)
+        onValueChange?.(next)
+      }}
+    />
+  )
+}
+
+describe('MessageComposer', () => {
+  it('chat mode: Enter sends, Shift+Enter makes a newline', async () => {
+    const onSend = vi.fn().mockResolvedValue({})
+    render(<Harness mode="chat" placeholder="Message #ops" onSend={onSend} />)
+    const input = screen.getByPlaceholderText('Message #ops')
+
+    await userEvent.type(input, 'line one{Shift>}{Enter}{/Shift}line two')
+    expect(onSend).not.toHaveBeenCalled()
+
+    await userEvent.type(input, '{Enter}')
+    expect(onSend).toHaveBeenCalledWith({ text: 'line one\nline two' })
+  })
+
+  it('email mode: Enter does NOT send, Cmd+Enter does, subject required', async () => {
+    const onSend = vi.fn().mockResolvedValue({})
+    render(<Harness mode="email" placeholder="Reply…" onSend={onSend} />)
+    const input = screen.getByPlaceholderText('Reply…')
+
+    await userEvent.type(input, 'hello{Meta>}{Enter}{/Meta}')
+    expect(onSend).not.toHaveBeenCalled() // subject still empty
+
+    await userEvent.type(screen.getByPlaceholderText('Subject'), 'Quarterly numbers')
+    await userEvent.type(input, '{Enter}')
+    expect(onSend).not.toHaveBeenCalled() // plain Enter is a newline in email mode
+
+    await userEvent.type(input, '{Meta>}{Enter}{/Meta}')
+    expect(onSend).toHaveBeenCalledWith({ text: 'hello', subject: 'Quarterly numbers' })
+  })
+
+  it('a failed send keeps the text and offers retry', async () => {
+    const onSend = vi.fn().mockRejectedValue(new Error('slack_channel_archived'))
+    render(<Harness mode="chat" placeholder="Message #ops" onSend={onSend} />)
+    const input = screen.getByPlaceholderText('Message #ops')
+
+    await userEvent.type(input, 'important text{Enter}')
+    expect(await screen.findByText(/slack_channel_archived/)).toBeInTheDocument()
+    expect(input).toHaveValue('important text')
+    expect(screen.getByRole('button', { name: 'retry' })).toBeInTheDocument()
+  })
+
+  it('a successful send clears the input via onValueChange({ text: "" })', async () => {
+    const onSend = vi.fn().mockResolvedValue({})
+    const onValueChange = vi.fn()
+    render(
+      <Harness
+        mode="chat"
+        placeholder="Message #ops"
+        onSend={onSend}
+        onValueChange={onValueChange}
+      />,
+    )
+    const input = screen.getByPlaceholderText('Message #ops')
+    await userEvent.type(input, 'ship it{Enter}')
+    expect(input).toHaveValue('')
+
+    const lastValue = onValueChange.mock.calls.at(-1)?.[0] as ComposerValue
+    expect(lastValue).toEqual({ text: '' })
+    // The subject KEY is omitted on the cleared value, not set to undefined.
+    expect('subject' in lastValue).toBe(false)
+  })
+
+  it('disabledReason replaces the composer with honest copy', () => {
+    render(
+      <Harness
+        mode="chat"
+        placeholder="Reply…"
+        disabledReason="This conversation ended — replies are closed."
+        onSend={vi.fn()}
+      />,
+    )
+    expect(screen.queryByPlaceholderText('Reply…')).not.toBeInTheDocument()
+    expect(screen.getByText(/replies are closed/)).toBeInTheDocument()
+  })
+
+  it('renders attachment chips with status and remove', async () => {
+    const onRemoveAttachment = vi.fn()
+    render(
+      <Harness
+        mode="chat"
+        placeholder="Message #ops"
+        onSend={vi.fn()}
+        attachments={[
+          composerAttachment(),
+          {
+            localId: 'local-2',
+            name: 'huge.bin',
+            sizeInBytes: 1,
+            status: 'error',
+            errorMessage: 'Too large (max 25 MB)',
+          },
+        ]}
+        onAddFiles={vi.fn()}
+        onRemoveAttachment={onRemoveAttachment}
+      />,
+    )
+    expect(screen.getByText('report.pdf')).toBeInTheDocument()
+    expect(screen.getByText('Too large (max 25 MB)')).toBeInTheDocument()
+
+    await userEvent.click(screen.getByRole('button', { name: 'Remove report.pdf' }))
+    expect(onRemoveAttachment).toHaveBeenCalledWith('local-1')
+  })
+
+  it('the clip button renders only when onAddFiles is provided', () => {
+    const { rerender } = render(<Harness mode="chat" placeholder="Message #ops" onSend={vi.fn()} />)
+    expect(screen.queryByRole('button', { name: 'Attach files' })).not.toBeInTheDocument()
+
+    rerender(
+      <Harness mode="chat" placeholder="Message #ops" onSend={vi.fn()} onAddFiles={vi.fn()} />,
+    )
+    expect(screen.getByRole('button', { name: 'Attach files' })).toBeInTheDocument()
+  })
+
+  it('an attachments-only send fires with empty text', async () => {
+    const onSend = vi.fn().mockResolvedValue({})
+    render(
+      <Harness
+        mode="chat"
+        placeholder="Message #ops"
+        onSend={onSend}
+        attachments={[composerAttachment()]}
+        onAddFiles={vi.fn()}
+      />,
+    )
+    await userEvent.type(screen.getByPlaceholderText('Message #ops'), '{Enter}')
+    expect(onSend).toHaveBeenCalledWith({ text: '' })
+  })
+
+  it('an in-flight upload blocks send', async () => {
+    const onSend = vi.fn().mockResolvedValue({})
+    render(
+      <Harness
+        mode="chat"
+        placeholder="Message #ops"
+        onSend={onSend}
+        attachments={[composerAttachment({ status: 'uploading' })]}
+        onAddFiles={vi.fn()}
+        hasUploadingAttachments
+      />,
+    )
+    const input = screen.getByPlaceholderText('Message #ops')
+    await userEvent.type(input, 'wait for it{Enter}')
+    expect(onSend).not.toHaveBeenCalled()
+    expect(screen.getByRole('button', { name: 'Send' })).toBeDisabled()
+  })
+
+  it('disabledReason suppresses chips and clip', () => {
+    render(
+      <Harness
+        mode="chat"
+        placeholder="Reply…"
+        disabledReason="closed"
+        onSend={vi.fn()}
+        attachments={[composerAttachment()]}
+        onAddFiles={vi.fn()}
+      />,
+    )
+    expect(screen.queryByText('report.pdf')).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Attach files' })).not.toBeInTheDocument()
+  })
+
+  it('showSendButton=false hides the button and hint and disables the Enter combo', async () => {
+    const onSend = vi.fn().mockResolvedValue({})
+    render(
+      <Harness mode="chat" placeholder="Message #ops" onSend={onSend} showSendButton={false} />,
+    )
+    expect(screen.queryByRole('button', { name: 'Send' })).not.toBeInTheDocument()
+    expect(screen.queryByText('↵')).not.toBeInTheDocument()
+
+    await userEvent.type(screen.getByPlaceholderText('Message #ops'), 'external driver{Enter}')
+    expect(onSend).not.toHaveBeenCalled()
+  })
+
+  it('isSubjectReadOnly renders the subject as text, not an input', async () => {
+    const onSend = vi.fn().mockResolvedValue({})
+    render(
+      <Harness
+        mode="email"
+        placeholder="Reply…"
+        subjectPrefill="re: Quarterly numbers"
+        isSubjectReadOnly
+        onSend={onSend}
+      />,
+    )
+    // No Subject input to type into — the subject is static text.
+    expect(screen.queryByPlaceholderText('Subject')).not.toBeInTheDocument()
+    expect(screen.getByText('re: Quarterly numbers')).toBeInTheDocument()
+
+    // The read-only subject still satisfies email's subject-required rule.
+    await userEvent.type(screen.getByPlaceholderText('Reply…'), 'hello{Meta>}{Enter}{/Meta}')
+    expect(onSend).toHaveBeenCalledWith({ text: 'hello', subject: 're: Quarterly numbers' })
+  })
+
+  it('the To row renders only with searchRecipients + connectionId, and gates send', async () => {
+    const onSend = vi.fn().mockResolvedValue({})
+    const searchRecipients = vi.fn().mockResolvedValue([contactAddress()])
+
+    const { rerender } = render(
+      <Harness
+        mode="chat"
+        placeholder="Message…"
+        onSend={onSend}
+        connectionId="conn-1"
+        showToField
+      />,
+    )
+    // No injected search — the composer cannot own addressing.
+    expect(screen.queryByText('To')).not.toBeInTheDocument()
+
+    rerender(
+      <Harness
+        mode="chat"
+        placeholder="Message…"
+        onSend={onSend}
+        connectionId="conn-1"
+        showToField
+        searchRecipients={searchRecipients}
+      />,
+    )
+    expect(screen.getByText('To')).toBeInTheDocument()
+
+    // No recipient picked yet — send is gated.
+    const input = screen.getByPlaceholderText('Message…')
+    await userEvent.type(input, 'hi there{Enter}')
+    expect(onSend).not.toHaveBeenCalled()
+
+    // Pick Alice from the injected directory, then send.
+    await userEvent.click(screen.getByRole('combobox'))
+    await userEvent.click(await screen.findByRole('option', { name: 'Alice' }))
+    // The pick renders as a removable chip in the trigger.
+    expect(screen.getAllByRole('button', { name: 'Remove', hidden: true }).length).toBe(1)
+    // Click outside to dismiss the popover (Escape would reach the focused
+    // option and RAC-clear the fresh selection), then send via the button.
+    await userEvent.click(input)
+    await userEvent.click(screen.getByRole('button', { name: 'Send' }))
+    expect(onSend).toHaveBeenCalledWith({
+      text: 'hi there',
+      to: [{ kind: 'contact-address', external_id: 'alice@example.com' }],
+    })
+  })
+
+  it('controlled recipients are not cleared by a successful send', async () => {
+    const onSend = vi.fn().mockResolvedValue({})
+    const onToChange = vi.fn()
+    const searchRecipients = vi.fn().mockResolvedValue([contactAddress()])
+    render(
+      <Harness
+        mode="chat"
+        placeholder="Message…"
+        onSend={onSend}
+        connectionId="conn-1"
+        showToField
+        searchRecipients={searchRecipients}
+        to={[{ kind: 'contact-address', external_id: 'alice@example.com' }]}
+        onToChange={onToChange}
+      />,
+    )
+    await userEvent.type(screen.getByPlaceholderText('Message…'), 'hi{Enter}')
+    expect(onSend).toHaveBeenCalledWith({
+      text: 'hi',
+      to: [{ kind: 'contact-address', external_id: 'alice@example.com' }],
+    })
+    // The controlling parent owns the reset — the composer never calls back.
+    expect(onToChange).not.toHaveBeenCalled()
+  })
+})