Mode Text Box

import { ModeTextBox } from "@/ui";

Mode Text Box matches the Figma Mode Text Fields component. It is the workbook chat's input: a text field, a mode button that says what the request will do, and a send button. Each mode has its own placeholder, so the field explains what to type.

DefaultCopy Anchor Link

Click the mode button to open the menu above it. The selected mode has a check. Type and press Enter or click send; Shift+Enter adds a new line.

import { Note, ChartScatter, Path, Play, Compass } from "@phosphor-icons/react";

const groups = [
  {
    label: "Create from Analysis",
    modes: [
      { id: "generate-memo", label: "Generate Memo", icon: Note,
        placeholder: "Generate a memo summarizing the key findings from this analysis" },
      { id: "create-chart", label: "Create Chart", icon: ChartScatter,
        placeholder: "Create a chart from the results of this analysis" },
      { id: "save-as-definition", label: "Save as Definition", icon: Path,
        placeholder: "Save the logic from this analysis as a reusable definition" },
    ],
  },
  {
    label: "Start New",
    modes: [
      { id: "quick-analysis", label: "Quick Analysis", icon: Play,
        placeholder: "Run a quick analysis to answer the following question" },
      { id: "build-analysis", label: "Build an Analysis", icon: Compass,
        placeholder: "Build a multi-step analysis to answer the following question" },
    ],
  },
];

<ModeTextBox
  groups={groups}
  defaultMode="quick-analysis"
  onSubmit={(text, mode) => run(mode, text)}
/>

onSubmit gets the trimmed text and the mode id, and the field clears. Send stays grey until there is text.

Modes that aren't available yetCopy Anchor Link

Set disabled on a mode to show it greyed out in the menu. The workbook chat does this for the "Create from Analysis" modes until every analysis step has run.

{ id: "generate-memo", label: "Generate Memo", icon: Note, disabled: !analysisReady }

StatesCopy Anchor Link

Pass disabled to lock the whole box, for example while a plan is still being built.

AnatomyCopy Anchor Link

PropsCopy Anchor Link

Each Mode has id, label, and optionally icon (a Phosphor component), placeholder and disabled.

Differences from FigmaCopy Anchor Link

• In Figma, the Default memo example's button says "Generate Memo" and the other states say "Create Memo". Here the button always shows the mode's label, so it matches the menu item.
• Figma has no hover states. Here the mode button and menu items turn light on hover, and send turns Primary 800.
• Figma shows "Typing" with text and a blue border together. Here the border is blue while the field has focus, and send turns blue once there is text, so the two can happen apart.

AccessibilityCopy Anchor Link

• The field's accessible name is the current placeholder. Pass aria-label to set your own.
• The mode button has aria-haspopup="menu" and aria-expanded. Up and Down arrows on it open the menu.
• Menu items are menuitemradio with aria-checked. Up, Down, Home and End move between them, skipping disabled ones; Escape closes the menu and returns focus to the button.
• Send is labelled "Send" and is disabled until there is text.

Do and don'tCopy Anchor Link

• Do write each placeholder as the start of the request, so the field reads like a sentence.
• Do keep mode labels to two or three words.
• Don't hide a mode that isn't available yet. Show it disabled, so people know it will be there.
• Don't use it for a plain message box with one kind of request. Use Text Area with a send button.