AI Chat Input

1const [draft, setDraft] = useState('');
2
3<AiChatInput
4  inputValue={draft}
5  onInputValueChange={setDraft}
6  maxLength={500}
7  onSend={(text) => {
8    post(text);
9    setDraft('');
10  }}
11/>

1const [sending, setSending] = useState(false);
2
3<AiChatInput
4  onSend={async (text) => {
5    setSending(true);
6    try { await post(text); } finally { setSending(false); }
7  }}
8  renderSendButton={({ onClick, disabled, label }) => (
9    <button
10      type="button"
11      onClick={onClick}
12      disabled={disabled || sending}
13      className="rounded-md bg-black px-3 py-1.5 text-sm text-white disabled:opacity-50"
14    >
15      {sending ? <Spinner /> : label}
16    </button>
17  )}
18/>

1// Insert a slash command and re-focus the textarea.
2<AiChatInput
3  renderToolbar={({ value, setValue, focusInput }) => (
4    <div className="flex gap-1.5">
5      {['/summarize', '/translate', '/fix-grammar'].map((cmd) => (
6        <button
7          key={cmd}
8          type="button"
9          onClick={() => {
10            setValue(value + cmd + ' ');
11            focusInput();
12          }}
13          className="rounded-full border px-2 py-0.5 text-xs"
14        >
15          {cmd}
16        </button>
17      ))}
18    </div>
19  )}
20/>

1// Hide the hint entirely
2<AiChatInput hint={null} />
3
4// Or replace it with a custom node (character counter)
5<AiChatInput
6  inputValue={draft}
7  onInputValueChange={setDraft}
8  maxLength={500}
9  hint={<span>{draft.length} / 500</span>}
10/>

1<AiChatInput
2  textareaProps={{
3    autoFocus: true,
4    rows: 5,
5    spellCheck: false,
6    'aria-label': 'Compose your message',
7  }}
8/>
9// value / onChange / onKeyDown / onBlur / ref are reserved by the component
10// — TypeScript will reject them here.

1// Default: focusing the textarea auto-switches into human mode; focus
2// leaving the component auto-reverts to AI. Manual clicks on the toggle
3// are never auto-reverted.
4<AiChatInput autoSwitchOnBlur />
5
6// Disable if you want human mode to persist until the user manually toggles.
7<AiChatInput autoSwitchOnBlur={false} />

1// Swap the top-right toggle for an unrelated CTA (e.g. an Upgrade button
2// when the user has run out of free AI quota).
3<AiChatInput
4  labels={{ humanHeader: 'AI quota reached — upgrade to continue' }}
5  defaultMode="human"
6  renderToggle={() => (
7    <button
8      type="button"
9      onClick={() => router.push('/billing')}
10      className="aci-toggle aci-toggle-shared"
11    >
12      Upgrade
13    </button>
14  )}
15/>