ChatInput

チャット入力コンポーネント。テキスト入力と送信ボタンを組み合わせたUIです。

インポート

import { ChatInput } from '@caroainc/ui-components/client'

個別サブパス（バンドルサイズを抑えたい場合）:

import { ChatInput } from '@caroainc/ui-components/chat-input'

基本的な使い方

'use client'
import { useState } from 'react'
import { ChatInput } from '@caroainc/ui-components/client'
 
function ChatDemo() {
  const [input, setInput] = useState('')
 
  const handleSend = () => {
    console.log('送信:', input)
    setInput('')
  }
 
  return (
    <ChatInput
      value={input}
      onChange={setInput}
      onSend={handleSend}
      placeholder="メッセージを入力..."
    />
  )
}

ツールバー付き

toolbarLeftプロパティで、送信ボタンの左側にカスタム要素を追加できます。

<ChatInput
  value={input}
  onChange={setInput}
  onSend={handleSend}
  toolbarLeft={
    <div className="flex gap-1">
      <Button size="sm" shape="square" variant="ghost">
        <Icon name="Paperclip" size="sm" />
      </Button>
      <Button size="sm" shape="square" variant="ghost">
        <Icon name="Image" size="sm" />
      </Button>
    </div>
  }
/>

無効状態

<ChatInput
  value={input}
  onChange={setInput}
  onSend={handleSend}
  disabled
  placeholder="入力できません"
/>

キーボードショートカット

Cmd+Enter (Mac) / Ctrl+Enter (Windows): メッセージを送信

AI生成中の状態（isLoading）

isLoading を true にすると、送信ボタンが停止ボタン（bg-destructive + Squareアイコン）に切り替わります。AI応答をストリーミング中に停止操作を提供する用途を想定しています。

<ChatInput
  value={input}
  onChange={setInput}
  onSend={isLoading ? handleStop : handleSend}
  isLoading={isLoading}
/>

送信ボタン左側にも要素を追加（toolbarRight）

toolbarRight で送信/停止ボタンの左側にカスタム要素を追加できます（toolbarLeft はテキストエリア下の左端、toolbarRight は送信ボタンのすぐ左）。

<ChatInput
  value={input}
  onChange={setInput}
  onSend={handleSend}
  toolbarRight={
    <span className="text-xs text-muted-foreground">GPT-4</span>
  }
/>

文字数カウンター（showCounter）

showCounter を true にすると、入力が maxLength の80%に達した時点でツールバーに文字数カウンター（現在数/maxLength）が表示されます。上限に達すると赤字（text-destructive）になります。

<ChatInput
  value={input}
  onChange={setInput}
  onSend={handleSend}
  maxLength={140}
  showCounter
/>

Props

Prop	Type	Default	Description
`value*`	`string`	`-`	入力値
`onChange*`	`(value: string) => void`	`-`	入力変更ハンドラ
`onSend*`	`() => void`	`-`	送信ハンドラ
`placeholder`	`string`	`'メッセージ...'`	プレースホルダー
`maxLength`	`number`	`500`	最大文字数
`maxRows`	`number`	`5`	最大行数（超えるとスクロール）
`toolbarLeft`	`React.ReactNode`	`-`	ツールバー左側に表示する要素
`toolbarRight`	`React.ReactNode`	`-`	ツールバー右側（送信/停止ボタンの左）に表示する要素
`isLoading`	`boolean`	`false`	AI生成中の状態。trueのとき送信ボタンが停止ボタンに切り替わる（onSendが停止操作として呼ばれる）
`ariaLabel`	`string`	`'メッセージ入力'`	テキストエリアのaria-label
`showCounter`	`boolean`	`false`	trueのとき、maxLengthの80%に達した時点で文字数カウンターを表示する
`disabled`	`boolean`	`false`	無効状態

ChatInput

On this page