React Native components (@agentimhq/react-native-ui) API

Generated from the source and its doc comments (sdk/react-native-ui/src/components.tsx, sdk/react-native-ui/src/files.tsx).

npm install @agentimhq/react-native-ui @agentimhq/client-react-native

Functions

`AgentIM`

function AgentIM(

The client, the texts, the replaceable parts, who “I” am, how dates are shown and the theme (scheme: light, dark or the system’s; colors overrides any token).

`AIBadge`

function AIBadge()

The AI mark (EU AI Act art. 50): drawn next to every agent’s name and message, also under a replaced Message component.

`ConnectionBanner`

function ConnectionBanner()

A line saying what the connection is doing (offline, reconnecting, waiting for network); nothing while connected.

`ConversationList`

function ConversationList({ selected, onSelect, search = true }: { selected?: string; onSelect(convId: string): void; search?: boolean })

The conversations, newest first, with a search field that filters by title and last message.

`DefaultSteps`

function DefaultSteps({ steps, strings }: StepsProps)

The default list of an agent’s steps (docs/en/design/chat-components.md).

`DefaultInboxDetail`

function DefaultInboxDetail({ item: i, inbox, strings, when: w, outcome, onOpen }: InboxDetailProps)

The default details of an inbox item, with its actions.

`Inbox`

function Inbox({ types, extraItems = [], renderItem, onOpen }: { types?: string[]; extraItems?: InboxItem[]; renderItem?(p: InboxDetailProps): ReactNode; onOpen?(convId: string): void })

The approval inbox (docs/en/design/chat-components.md): tabs, search, the list, and one item’s details with its actions (on a phone, one after the other).

`InboxBadge`

function InboxBadge()

How many items wait in the inbox.

`ConversationSteps`

function ConversationSteps({ convId }: { convId: string })

Steps an agent reports without tying them to a message (docs/en/design/chat-components.md).

`MessageList`

function MessageList({ convId, notices = [], onOpenThread }: { convId: string; notices?: Notice<ReactNode>[]; onOpenThread?(threadId: string): void })

The messages in an inverted list (newest at the bottom, scroll up for older ones; Stream Chat does the same), in runs per sender with day separators, notices and “New messages”; a button brings you back down.

`TypingIndicator`

function TypingIndicator({ convId, names }: { convId: string; names?: (ids: string[]) => string[] })

Who is typing, by name (from the members).

`Composer`

function Composer({ convId, onAttach }: { convId: string; onAttach?: () => Promise<string[] | undefined | null> })

onAttach: the app’s own picker (expo-document-picker, react-native-image-picker, …) returns the paths to send; without it there is no attach button.

`MemberList`

function MemberList({ convId }: { convId: string })

The conversation’s members; agents carry the AI mark.

`HandoffNotice`

function HandoffNotice({ convId }: { convId: string })

Says when an agent hands the conversation to a person, and when it is back.

`Chat`

function Chat({ convId, title, subtitle, notices, onAttach }: { convId: string; title?: string; subtitle?: string; notices?: Notice<ReactNode>[]; onAttach?: () => Promise<string[] | undefined | null> })

A whole chat screen: header, status, messages, typing, composer. Wrap it in the app’s keyboard handling.

`FileIcon`

function FileIcon({ type, size = 40 }: { type: string; size?: number })

A page with a folded corner in the type’s colour, its label in white.

`ImageViewer`

function ImageViewer({ convId, message: m, thumb, strings, onClose }: { convId: string; message: Message; thumb?: string; strings: Strings; onClose(): void })

The full-screen viewer of an image: the enlarged thumbnail, View original, Download, close (Android back closes it too).

`ImageMessage`

function ImageMessage({ convId, message: m, strings, mine }: { convId: string; message: Message; strings: Strings; mine: boolean })

An image message: the thumbnail at its proportions (at most 240 × 240) with its caption and upload progress; pressing opens the viewer.

`FileMessage`

function FileMessage({ convId, message: m, strings, mine }: { convId: string; message: Message; strings: Strings; mine: boolean })

A file message: a card with the type’s icon, the name, the size and upload progress; pressing opens the file.

`MessageProps`

interface MessageProps

What a message component gets: replace Message in components to draw messages your way.

`MessageProps.message`

message: Message

The message to show.

`MessageProps.convId`

convId: string

The conversation (to read the message’s file).

`MessageProps.mine`

mine: boolean

Whether I sent it (shown on the right).

`MessageProps.first`

first: boolean

Whether it starts a run of messages from the same sender (shows the name and avatar).

`MessageProps.last`

last: boolean

Whether it ends a run of messages from the same sender (shows the time).

`MessageProps.time`

time?: string

The formatted time to show, when it shows one.

`MessageProps.strings`

strings: Strings

The interface texts in the current language.

`MessageProps.onRetry`

onRetry(): void

Sends a failed message again.

`MessageProps.onDiscard`

onDiscard(): void

Drops a failed message.

`MessageProps.onFeedback`

onFeedback(rating: 'up' | 'down'): void

Rates an agent’s message.

`MessageProps.onRespond`

onRespond(blockId: string, r: { action?: string; values?: Record<string, unknown> }): void

Answers a card block: a button action or form values.

`MessageProps.onEdit`

onEdit?(text: string): void

Edits my message (when it can still be edited).

`MessageProps.onRecall`

onRecall?(): void

Recalls my message for everyone.

`MessageProps.onStop`

onStop?(): void

Stops an agent’s streaming reply.

`MessageProps.onReact`

onReact?(key: string, on: boolean): void

Adds (on) or removes my reaction (docs/en/design/messaging.md).

`MessageProps.onOpenThread`

onOpenThread?(): void

Set when the app shows threads: opens this message’s thread.

`ConversationItemProps`

interface ConversationItemProps

What a conversation list row gets: replace ConversationItem in components to draw rows your way.

`ConversationItemProps.conversation`

conversation: any

The conversation (title, last message, unread count, members…).

`ConversationItemProps.selected`

selected: boolean

Whether it is the open conversation.

`ConversationItemProps.onSelect`

onSelect(): void

Opens it.

`ConversationItemProps.strings`

strings: Strings

The interface texts in the current language.

`ConversationItemProps.time`

time?: string

The formatted time of the last message.

`ConversationItemProps.me`

me?: string

My user id (for “You: …” previews and direct-conversation titles).

`Components`

interface Components

The parts you can replace, passed as components to AgentIM.

`Components.Message`

Message: ComponentType<MessageProps>

Draws one message.

`Components.ConversationItem`

ConversationItem: ComponentType<ConversationItemProps>

Draws one conversation list row.

`Components.Avatar`

Avatar: ComponentType<{ id?: string; name?: string; kind?: string; size?: number }>

Draws an avatar from the id, name and kind (human or agent).

`Components.Empty`

Empty: ComponentType<{ text: string; hint?: string }>

Draws an empty state (no conversations, no messages).

`Components.Steps`

Steps?: ComponentType<StepsProps>

Draws an agent’s steps next to its reply (docs/en/design/chat-components.md).

`Components.cardBlocks`

cardBlocks?: Record<string, ComponentType<CardBlockProps>>

Your own card blocks, by type (x-…, docs/en/design/chat-components.md).

`Components.formFields`

formFields?: Record<string, ComponentType<FormFieldProps>>

Your own form fields, by type: x-…, or a built-in one drawn your way (a native date picker for date).

`CardBlockProps`

interface CardBlockProps

What your own card block gets.

`CardBlockProps.block`

block: any

The block as sent (type, id, data, fallback).

`CardBlockProps.done`

done: boolean

Whether it can’t be answered (any more) by this person.

`CardBlockProps.respond`

respond(r: { action?: string; values?: Record<string, unknown> }): void

Answers it: an action or values (blocks with an id only).

`CardBlockProps.strings`

strings: Strings

The interface texts.

`CardBlockProps.when`

when: When

The viewer’s locale, time zone and clock.

`FormFieldProps`

interface FormFieldProps

What your own form field gets.

`FormFieldProps.field`

field: any

The field as sent (id, label, type, config, …).

`FormFieldProps.value`

value: unknown

Its value now.

`FormFieldProps.onChange`

onChange(value: unknown): void

Sets its value.

`FormFieldProps.disabled`

disabled: boolean

Whether it can’t be changed (sent, or not for this person).

`FormFieldProps.error`

error?: string

The message when its value is not valid.

`FormFieldProps.strings`

strings: Strings

The interface texts.

`StepsProps`

interface StepsProps

What a replacement Steps gets.

`StepsProps.steps`

steps: Step[]

The steps, in order.

`StepsProps.strings`

strings: Strings

The interface texts.

`InboxDetailProps`

interface InboxDetailProps

What a custom inbox detail gets.

`InboxDetailProps.item`

item: InboxItem

The item (a request, a draft, a hand-off, or yours).

`InboxDetailProps.inbox`

inbox: InboxState

The inbox, to act: decide, answer, approveDraft, discardDraft, handBack.

`InboxDetailProps.strings`

strings: Strings

The interface texts.

`InboxDetailProps.when`

when: When

The viewer’s locale, time zone and clock.

`InboxDetailProps.outcome`

outcome?: InboxOutcome

What happened to it here, once handled.

`InboxDetailProps.onOpen`

onOpen?(convId: string): void

Opens its conversation in your app.