The composer for an AI thread: a full-height column at the reading start. What you type stands where your sent turn will appear · the thread peels leftward from it.

Design question

Chat composers dock to the bottom edge because horizontal turns stack downward. When turns are columns flowing right-to-left, where does the composer live · and can the input itself be vertical, when IME composition was designed for a horizontal baseline?

Decision

Put the composer where reading starts: a full-height column on the right edge, separated from the thread by a rule. The input inherits writing-mode, so typed text already stands in its final orientation; send, and the turn peels leftward into the thread. Vertically Chat ships the vertical input; the horizontal dock stays the conservative fallback (see Text Field).

Column composer

The composer is a full-height column at the reading start · type vertically (the field inherits writing-mode), press Enter or the send column, and the turn peels leftward into the thread. @ opens sources into the content area.

tsx
1// A full-height column at the thread's right edge · form fields
2// inherit writing-mode, so the input itself is vertical.
3<form onSubmit={send}
4  style={{ display: "flex", flexDirection: "column", alignItems: "center",
5           borderLeft: "1px solid var(--color-border)" }}>
6  <input
7    type="text"
8    lang="ko"

Horizontal fallback

The conservative fallback · composition stays horizontal in a bottom dock (IME candidate windows expect it), and the sent text re-orients as it enters the thread. The entry point sits off the reading axis.

tsx
1// The conservative fallback: composition stays horizontal (see
2// Text Field) and the sent text re-orients as it enters the thread.
3<form onSubmit={send}
4  style={{ display: "flex", alignItems: "center", gap: 12,
5           borderTop: "1px solid var(--color-border)" }}>
6  <input type="text" lang="ko" aria-label="질문 입력"
7    onKeyDown={(e) => {
8      if (e.key === "Enter" && !e.nativeEvent.isComposing) send()

Guidance

Place the composer at the reading start · the right edge, where the next turn will appear
Guard Enter with isComposing · the IME commit keystroke is not the send keystroke
Keep the input font at 16px or larger so mobile browsers don't zoom the column
Open the sources menu into the content area, leftward · never off-screen right
Return focus to the input after send

Don't

Dock the composer to the bottom by default · that edge belongs to horizontal stacking
Send on Enter while composition is active · CJK input commits candidates with Enter
Rotate a horizontal input with transform · caret, selection, and IME all break

Accessibility

The input carries an aria-label in the UI language and a visible focus treatment on its column. Enter sends only when isComposing is false. The sources trigger is aria-haspopup with aria-expanded, its items are menuitemradio, and focus returns to the input after send or menu close.

Open question

IME candidate windows over a vertical input still behave unevenly across browsers and platforms. Is the vertical input worth that risk at the single highest-traffic field in the interface, or should composition stay horizontal until support catches up?

PreviousThinking Trace Next Approval Card

1	// A full-height column at the thread's right edge · form fields
2	// inherit writing-mode, so the input itself is vertical.
3	<form onSubmit={send}
4	style={{ display: "flex", flexDirection: "column", alignItems: "center",
5	borderLeft: "1px solid var(--color-border)" }}>
6	<input
7	type="text"
8	lang="ko"

1	// The conservative fallback: composition stays horizontal (see
2	// Text Field) and the sent text re-orients as it enters the thread.
3	<form onSubmit={send}
4	style={{ display: "flex", alignItems: "center", gap: 12,
5	borderTop: "1px solid var(--color-border)" }}>
6	<input type="text" lang="ko" aria-label="질문 입력"
7	onKeyDown={(e) => {
8	if (e.key === "Enter" && !e.nativeEvent.isComposing) send()