import { SendHorizontal, Square } from 'lucide-react'
import { useState } from 'react'

import { Button } from '../../components/ui/button'

type Props = { streaming: boolean; onSend: (query: string) => void; onCancel: () => void }

export function ChatComposer({ streaming, onSend, onCancel }: Props) {
  const [query, setQuery] = useState('')
  function submit() {
    const value = query.trim()
    if (!value || streaming) return
    setQuery(''); onSend(value)
  }
  return (
    <div className="chat-composer">
      <textarea value={query} onChange={(event) => setQuery(event.target.value)} onKeyDown={(event) => { if (event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); submit() } }} placeholder="向知识库提问…" rows={2} disabled={streaming} />
      {streaming ? <Button variant="secondary" size="icon" onClick={onCancel} aria-label="停止生成"><Square size={15} fill="currentColor" /></Button> : <Button size="icon" onClick={submit} disabled={!query.trim()} aria-label="发送问题"><SendHorizontal size={17} /></Button>}
      <small>Enter 发送 · Shift + Enter 换行</small>
    </div>
  )
}
