# Chat screens

> Chat screens from a Figma UI kit for iOS and Android apps: a messaging list and thread, and an AI chat with suggestions, streaming replies, files and errors.

Two kinds of conversation, drawn in Appetite UI, a Figma UI kit for iOS and Android apps built like a design system: people talking to people in the social app, and a person talking to a model in the AI app. They share the composer and differ in what a reply can hold.

Page: https://www.appetiteui.com/screens/patterns/chat.

## Screens

| App | Screen | What it shows | Page |
| --- | --- | --- | --- |
| Social media app | Chats | Stories with online dots and the list of conversations | https://www.appetiteui.com/screens/social/chat |
| Social media app | Chat | One conversation and its reply field | https://www.appetiteui.com/screens/social/chat |
| AI chat app | New chat | An empty prompt with four suggestions | https://www.appetiteui.com/screens/ai-chat/chat |
| AI chat app | Thread | A question, a reply with a table and sources, and the reply actions | https://www.appetiteui.com/screens/ai-chat/chat |
| AI chat app | Generating | A reply that is still arriving, with a stop button | https://www.appetiteui.com/screens/ai-chat/chat |
| AI chat app | Error | A failed reply with a retry | https://www.appetiteui.com/screens/ai-chat/chat |

## Rules

- The composer stays put. The field to write in sits at the bottom of every thread, in every state, so the next message is always one tap away.
- A reply can be more than text. A model’s reply holds tables, sources, files and pictures, so the AI thread draws replies as full width messages rather than bubbles.
- Show the state, not a spinner. A reply that is still arriving shows a typing indicator and a stop button. A reply that failed says why and offers Try again.

## iOS and Material

| What it sets | iOS | Android | Variable |
| --- | --- | --- | --- |
| Minimum touch target | 44 pt | 48 dp | `platform/min-touch-target` |
| Control corner | 8 pt | Fully round | `platform/control/corner` |

| Component | iOS | Material 3 | What differs |
| --- | --- | --- | --- |
| Text field | iOS / Text Field | M3 / Text Field, Filled or Outlined, 56 high | Material has Enabled, Focused, Error and Disabled states |

## Questions

### How is an AI chat screen different from a messaging chat?

A messaging thread holds short text between people, so it uses bubbles with times. An AI reply can hold tables, sources, files and pictures, so Appetite UI draws it as a full width message with its actions under it.

### Which states does an AI chat screen need?

A new chat with suggestions, a reply that is still arriving with a stop button, a reply with a file or a picture, and a failed reply with Try again. Appetite UI draws each one as its own screen.

## Sources

1. [Apple Human Interface Guidelines: Generative AI](https://developer.apple.com/design/human-interface-guidelines/generative-ai)
2. [Material Design 3: Text fields](https://m3.material.io/components/text-fields/overview)

## Related

- Social media app: [Social media app chat](https://www.appetiteui.com/screens/social/chat)
- AI chat app: [AI chat app](https://www.appetiteui.com/screens/ai-chat/chat)
- Docs: [AI](https://www.appetiteui.com/docs/ai-component)
- Docs: [Input](https://www.appetiteui.com/docs/input)
- Docs: [AI app screens](https://www.appetiteui.com/docs/screens-ai)
- Glossary: [Touch target](https://www.appetiteui.com/academy/glossary/touch-target)
- Article: [Figma MCP for mobile: make your agent build with your components](https://www.appetiteui.com/blog/figma-mcp-for-mobile-apps)