WritingStyle
The parts of the Supporter Response writing-style settings: a section card with 16px corners, the file upload zone, file and website rows, and the settings navigation.
Figma: 10 / Components / Chat (Writing-style resources and composition)Writing style
Your organization’s voice and tone preferences
Usage
Source: src/components/ui/writing-style.tsx
import { ResourceRow, UploadZone, WritingStyleNav, WritingStyleSection } from '@/components/ui/writing-style'<WritingStyleSection icon={<BookOpenTextIcon />} title='Writing style' description='Your organization’s voice and tone preferences'>
<Textarea aria-label='Writing style' />
</WritingStyleSection>Upload zone and file rows
Drop files or choose them. Each file becomes a ResourceRow with its ready check and remove.
Drag files here or choose a file
CompanyReport.pdf
Resource rows
type file or website, with or without remove.
CompanyReport.pdf
goodunited.com
Navigation
Close, the settings heading and one sub button per section. The active section sits on Colors/surface/muted.
When to use
When to reach for it, and when to use something else.
Use it for
Complete: The writing-style settings (Blocks / Supporter Response), one section per topic, each saving on its own with Apply.
Complete: Table/AiLinks for the links the AI reads.
Avoid
Not complete: Rounded-2xl section cards outside the writing-style settings; use Card elsewhere.
WritingStyleSection
| Prop | Type | Default | Description |
|---|---|---|---|
| icon | ReactNode | – | 24px, Colors/icon/secondary. |
| title | ReactNode | – | Poppins / text-lg / semibold. |
| description | ReactNode | – | Roboto / text-sm in Colors/text/secondary. |
UploadZone
| Prop | Type | Default | Description |
|---|---|---|---|
| onFiles | (files: File[]) => void | – | Called with the dropped or chosen files. |
| accept | string | – | File types for the picker. |
| label | string | 'Drag files here or choose a file' | The prompt. |
ResourceRow
| Prop | Type | Default | Description |
|---|---|---|---|
| type | 'file' | 'website' | 'file' | The leading icon. |
| label | string | – | File name or address. |
| onRemove | () => void | – | Shows the remove button. |