52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
'use client'
|
|
|
|
import { type KeyboardEvent, useState } from 'react'
|
|
|
|
export function ChatBox({
|
|
submit,
|
|
placeholder = 'Type a message...'
|
|
}: {
|
|
submit: (message: string) => void
|
|
placeholder?: string
|
|
}) {
|
|
const [message, setMessage] = useState(placeholder)
|
|
|
|
return (
|
|
<div className="fixed right-0 bottom-0 left-0 bg-white p-4 dark:bg-black">
|
|
<div className="flex w-full items-center justify-center gap-2">
|
|
<textarea
|
|
value={message}
|
|
onChange={e => {
|
|
setMessage(e.target.value)
|
|
e.target.style.height = 'auto'
|
|
e.target.style.height = `${e.target.scrollHeight}px`
|
|
}}
|
|
onKeyDown={(e: KeyboardEvent<HTMLTextAreaElement>) => {
|
|
if (e.key === 'Enter' && !e.shiftKey) {
|
|
e.preventDefault()
|
|
if (message.trim()) {
|
|
submit(message)
|
|
setMessage('')
|
|
}
|
|
}
|
|
}}
|
|
rows={1}
|
|
className="input-field max-w-[800px] flex-1 resize-none rounded-lg border px-3 py-2 focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
if (message.trim()) {
|
|
submit(message)
|
|
setMessage(placeholder)
|
|
}
|
|
}}
|
|
className="input-field self-end rounded-lg border bg-black px-4 py-2 text-white dark:bg-white dark:text-black"
|
|
>
|
|
→
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|