Chat (parent component)
Description
Chat runs every conversation with the coach, from onboarding to logging a meal. It connects to the coach, loads the chosen module, and renders cards such as meal analyses inside the conversation. Put MessagesList and ChatInput inside it.
Chat modules
Pick a module with the moduleName prop. ModuleNames lists the modules, including:
- Activation (onboarding):
ModuleNames.ACTIVATION_FLOW - Meal logging:
ModuleNames.LOG_MEAL - Figure it out, recipes:
ModuleNames.RECIPES - Figure it out, cravings:
ModuleNames.CRAVINGS - Figure it out, restaurants and menus:
ModuleNames.RESTAURANTS - Check-ins:
ModuleNames.CHECK_IN
Basic usage
{{code.b0}}Props
| Prop | Type | Description |
|---|---|---|
moduleName (required) | string | null | The module to load, usually a ModuleNames value. |
chatSessionId | string | Resume an existing chat session. |
introMessage | string | First message shown when the chat loads. The module sets a default. |
onSendMessage | (message: string) => void | Called when the user sends a message. |
onEndChat | () => Promise<void> | Called when the user taps the button that ends the chat. |
endChatLabel | string | Label of that button. Defaults to Done. |
onLogMeal | () => Promise<void> | Called after a meal is saved from the chat. |
onViewMeal | (params: { id: string; chatSessionId: string; expanded?: string }) => void | Called when the user opens a meal from the chat, e.g. to show MealDetail. |
onNavigateToModule | (params: ChatSearchParams) => void | Called when the chat sends the user to another module. Render a new Chat with these params as props. |
onNotificationScheduled | (params: ScheduleNotificationParams) => void | Called when the chat schedules a notification, e.g. a reminder to log the meal discussed in the recipes module. |
Several callbacks (onNavigateToModule here, and onNavigateToChat on FIOPicker and MealDetail) hand you ChatSearchParams. Its keys (moduleName, chatSessionId, messageContext, sendUserMessage, hideUserMessage) are all Chat props, so navigate to your chat screen and spread them onto Chat:
{{code.b1}}MessagesList
Description
The list of messages between the coach and the user: the user's text and photos, and the coach's text and cards (for example a meal card).
Basic usage
{{code.b2}}Props
None.
ChatInput
Description
The input bar where the user types a message or adds a photo.
Basic usage
{{code.b3}}Props
| Prop | Type | Description |
|---|---|---|
allowPhotos | boolean | If true, the bar shows a photo button that opens the camera sheet, where the user can take or pick photos to send. The user is asked for camera and photo permission if they have not granted it. Defaults to true. |
cameraPermissionText | string | Text shown when asking for camera and photo library permission. |