AI Chat

Not in Production

This set of components assembles to form our AI chat experiences. Note thatd differences between chat message styles differentiate the TA (Teacher) experience from the Tutor (student) experience.

Open in Figma

Teaching Assistant

Can you suggest a warm-up activity for my Unit 3 loops lesson?

Sure! Have students write a loop that prints their name 10 times, then challenge them to add a counter.

Was this helpful?

filename.ext

Tutor

Why does my sprite keep disappearing when I click run?

Good question! Take a look at line 4 — what do you think happens when your loop sets the sprite's size to 0?

filename.ext

Building Blocks

The individual building blocks that make up the AI chat UI. These components should not typically be used outside of the chat experience.

Message

File Chip

Remove Button

Input

Preview

Code

Inspect

Can you suggest a warm-up activity for my Unit 3 loops lesson?

Content

children

fileUploads

feedbackLabel

Layout & behavior

hasActionRow

hasLeftActions

hasDownload

hasRightActions

hasFlagging

Props — AI Chat Message

Prop	Type	Description
`context`	`"TA" \| "Tutor"`	—
`author`	`"Human" \| "AI"`	—
`children`	`ReactNode`	Message body.
`fileUploads`	`ReactNode`	Optional file chip row above an AI bubble.
`hasActionRow`	`boolean`	—
`hasLeftActions`	`boolean`	—
`hasDownload`	`boolean`	Download control in the left action group.
`hasRightActions`	`boolean`	—
`hasFlagging`	`boolean`	—
`feedbackLabel`	`ReactNode`	—
`onCopy`	`() => void`	—
`onDownload`	`() => void`	—
`helpfulValue`	`"up" \| "down" \| null`	—
`onHelpfulChange`	`(value: "up" \| "down" \| null) => void`	—
`flagged`	`boolean`	—
`onFlagChange`	`(flagged: boolean) => void`	—