Story
When I need the AI to do something specific, I want 1 box that takes my words, my files and my choice of mode, so I can say it all at once and send it with confidence.
Meera, a support lead, on her phone, before the Monday stand-up.
- 01 Setting
Meera wants the top 5 support problems from last week, with an example of each.
- 02 Trigger
Her ask is 2 sentences long, and the tickets are in a file.
- 03 Without it
A 1-line box hides half of what she typed, and the file has to go in a separate message.
- 04 With it
The box grows as she types. The file sits in it as a chip, and Send lights up when it is ready.
- 05 Outcome
1 message, everything in it. The answer is right the first time.
Live demo
This demo follows a script, so it plays the same every time - there is no real AI behind it. Change a setting to see the same moment play out differently.
What happens, step by step
| State | The person sees | The AI is | When | Screen reader |
|---|---|---|---|---|
| 1 | A short hint, the tools on the left, the mic and a greyed Send on the right. | Idle. | 0 s | - |
| 2 | The box lifts slightly. On a phone the keyboard opens. | Idle. | on tap | - |
| 3 | Words appear. Send turns on with the first character. | Idle. | as typed | - |
| 4 | The box grows to about 6 lines, then scrolls inside itself. | Idle. | after line 1 | - |
| 5 | The file appears as a chip with its name, size and an x to remove it. | Reads the file in the background. | on drop or pick | “tickets.csv attached” |
| 6 | Send is fully on. Enter sends on desktop. On a phone, only the button does. | Idle. | - | - |
| 7 | The box clears into the conversation and Send becomes Stop. | Starts working. | on send | “Message sent” |
On each device
- phone
- Tools and modes go behind the + button as a sheet. Send is at least 44 px and sits by the thumb. Return makes a new line - only the button sends.
- tablet
- Like the phone in portrait. With a hardware keyboard, Enter sends and Shift+Enter makes a new line, as on desktop.
- desktop
- Mode and model can sit as chips in the box. Enter sends, Shift+Enter makes a new line, and files can be dropped anywhere on the page.
When to use it
- People talk to the AI in their own words - chat, search, assistants.
- An ask often comes with context: a file, an image, a selection, a mode.
- The same box is used for the first ask and every follow-up.
- The AI needs 3 or 4 exact values, like dates and a budget - give it fields. Use Structured prompt instead.
- The ask is always 1 of a few jobs, like summarise or translate - give it buttons. Use Quick actions instead.
- People act on something already on screen - put the action where the selection is. Use Inline action on selection instead.
The parts of the pattern
- ATools buttonFiles, images and modes in 1 place, so the box stays clean.
- BThe inputGrows with the ask up to about 6 lines, then scrolls inside itself.
- CContext chipShows what is attached - name and size - and lets people remove it.
- DMode chipSays how the AI will work in plain words, not a model name.
- EVoiceSpeaking is 1 tap away, for when typing is slow.
- FSendOff until there is something to send. Becomes Stop while the AI works.
Do and Avoid
Summarise this week’s support tickets into the 5 problems people hit most, with 1 example ticket for each↕ grows
…hit most, with 1 example ticket for each
Sends an empty message, and the AI answers it.
Writing and accessibility
- Make the hint an invitation, not an instruction: "Ask anything" or "What should we work on?" - never "Enter your prompt".
- Name modes by what they do - "Fast", "Thinking", "Research" - not by model names people have to learn.
- Show the file name and size on the chip, so people can see they attached the right thing.
- Keep the hint short enough that it never wraps on a phone.
- The input is a real textarea with a visible label, or an aria-label (a name only screen readers hear), like "Message".
- Send and the tools button are real buttons with names. The disabled Send uses aria-disabled (a tag that tells a screen reader it is off), so it can still be found.
- Announce attached files and errors in a polite status region (the part of the page a screen reader announces on its own): "tickets.csv attached".
- Never send on Enter on a phone - people use Return for new lines and lose half-written asks.
- Keep focus in the input after sending, so a follow-up can be typed at once.
Seen in real products
- ChatGPTWeb and apps · Oct 2026A "+" tools menu in the composer holds tools and modes; the agent could be picked there or typed as the /agent command.OpenAI Help: ChatGPT agent ↗
- ClaudeWeb, desktop and apps · Oct 2026The "+" menu holds per-chat switches - for example, turning memory off before the first message is sent.Claude Help: How memory works ↗
- PerplexityWeb and mobile · Jun 2025A Search / Research / Labs mode selector sits with the input. It shipped on web and mobile before the desktop apps.InfoQ, Jun 2025 ↗
- Copilot on WindowsWindows · Nov 2025"Take Action" lives in a dropdown in the composer, and "+" attaches a file or a whole folder.Windows Insider Blog, 17 Nov 2025 ↗
Each example comes from the product’s help pages, release notes or teardowns, with the month it was checked. Products change every month - tell us when 1 is out of date.
Check yourself
Seen this pattern done better, or a product that changed? Press Suggest next to any heading, or tell us about the whole page.