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?

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

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()