\n e.target.files && addFiles(e.target.files)}\n />\n\n
\n )\n}\n```\n\n---\n\n### `useThreadEventStatus: {status}
\n {isLoading &&Loading...
}\n\n {messages.map((msg) => (\n\n {msg.role}: {msg.content}\n
\n ))}\n\n \n {files.map((file) => (\n {file.name} ({file.status})\n ))}\n
\n\n \n \n Waiting for updates...
\n\n return (\n \n
\n )\n}\n```\n\n---\n\n### `onThreadEventProgress: {todos.completed} / {todos.todos.length}
\n- \n {todos.todos.map((todo, i) => (\n
- {todo} \n ))}\n
\n e.target.files && addFiles(e.target.files)}\n />\n\n {files.map((file) => (\n
\n )\n}\n```\n\n### File States\n\n- `uploading` - File is being uploaded\n- `ready` - Upload complete, file ready to attach to message\n- `committed` - File is attached to a sent message\n- `error` - Upload failed\n\n---\n\n## Types\n\n```typescript\ninterface Message {\n id: string\n role: \"user\" | \"assistant\" | \"system\" | \"tool\"\n content: string | null\n created_at: number\n attachments?: string // JSON array of AttachmentRef\n}\n\ninterface SendMessagePayload {\n role: \"user\" | \"assistant\" | \"system\"\n content: string\n silent?: boolean\n attachments?: string[] // Paths of files to attach\n}\n\ninterface ThreadFile {\n id: string\n name: string\n mimeType: string\n size: number\n isImage: boolean\n status: \"uploading\" | \"ready\" | \"committed\" | \"error\"\n error?: string\n path?: string\n localPreviewUrl: string | null\n}\n\ntype ConnectionStatus = \"connecting\" | \"connected\" | \"disconnected\" | \"reconnecting\"\n```\n\n---\n\n## Complete Example\n\n```tsx\nimport { useState, useEffect } from \"react\"\nimport {\n AgentBuilderProvider,\n ThreadProvider,\n useThread,\n useThreadEvent,\n} from \"@standardagents/react\"\n\nfunction App() {\n useEffect(() => {\n localStorage.setItem(\"standardagents_auth_token\", \"your-token\")\n }, [])\n\n return (\n \n {file.isImage && file.status !== 'uploading' && (\n )
\n )}\n {file.name}\n {file.status}\n {file.status === 'uploading' && Uploading...}\n {file.status === 'error' && Error: {file.error}}\n {file.status !== 'committed' && (\n \n )}\n
\n ))}\n \n {progress && (\n e.target.files && addFiles(e.target.files)}\n />\n\n {files.filter(f => f.status !== 'committed').map((file) => (\n
\n )\n}\n```\n\n---\n\n## TypeScript Support\n\nThe package includes full TypeScript definitions:\n\n```tsx\nimport type {\n Message,\n SendMessagePayload,\n ThreadFile,\n ConnectionStatus,\n ThreadContextValue,\n} from \"@standardagents/react\"\n```\n","readmeFilename":"README.md"}\n
\n )}\n\n {isLoading && {progress.step}
\n \nLoading messages...
}\n\n {messages.map((msg) => (\n\n {msg.role}: {msg.content}\n
\n ))}\n\n \n {file.isImage && getPreviewUrl(file) && (\n !})
\n )}\n {file.name} ({file.status})\n \n
\n ))}\n\n \n setInput(e.target.value)}\n onKeyDown={(e) => e.key === \"Enter\" && handleSend()}\n />\n \n \n Status: {status}\n
\n