86 lines
2.3 KiB
TypeScript
86 lines
2.3 KiB
TypeScript
import React, { useState, useRef, useEffect } from 'react'
|
|
|
|
import { Button } from '@janhq/uikit'
|
|
import { useAtomValue } from 'jotai'
|
|
|
|
import { Send } from 'lucide-react'
|
|
|
|
import LogoMark from '@/containers/Brand/Logo/Mark'
|
|
|
|
import { selectedTextAtom } from '@/containers/Providers/Jotai'
|
|
|
|
import SelectedText from './SelectedText'
|
|
|
|
const UserInput: React.FC = () => {
|
|
const [inputValue, setInputValue] = useState('')
|
|
const inputRef = useRef<HTMLInputElement>(null)
|
|
const formRef = useRef<HTMLFormElement>(null)
|
|
const selectedText = useAtomValue(selectedTextAtom)
|
|
|
|
useEffect(() => {
|
|
inputRef.current?.focus()
|
|
})
|
|
|
|
useEffect(() => {
|
|
const onKeyDown = (e: KeyboardEvent) => {
|
|
if (e.key === 'Escape') {
|
|
window.core?.api?.hideQuickAskWindow()
|
|
}
|
|
}
|
|
|
|
document.addEventListener('keydown', onKeyDown)
|
|
|
|
return () => {
|
|
document.removeEventListener('keydown', onKeyDown)
|
|
}
|
|
}, [])
|
|
|
|
const handleChange = (
|
|
event:
|
|
| React.ChangeEvent<HTMLInputElement>
|
|
| React.ChangeEvent<HTMLTextAreaElement>
|
|
) => {
|
|
const { value } = event.target
|
|
setInputValue(value)
|
|
}
|
|
|
|
const onSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
if (inputValue.trim() !== '') {
|
|
const fullText = `${inputValue} ${selectedText}`.trim()
|
|
window.core?.api?.sendQuickAskInput(fullText)
|
|
setInputValue('')
|
|
window.core?.api?.hideQuickAskWindow()
|
|
window.core?.api?.showMainWindow()
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col space-y-3 bg-white p-3 dark:bg-background">
|
|
<form
|
|
ref={formRef}
|
|
className="flex h-full w-full items-center justify-center"
|
|
onSubmit={onSubmit}
|
|
>
|
|
<div className="flex h-full w-full items-center gap-4">
|
|
<LogoMark width={28} height={28} className="mx-auto" />
|
|
<input
|
|
ref={inputRef}
|
|
className="flex-1 bg-transparent font-bold focus:outline-none"
|
|
type="text"
|
|
value={inputValue}
|
|
onChange={handleChange}
|
|
placeholder="Ask me anything"
|
|
/>
|
|
<Button onClick={onSubmit}>
|
|
<Send size={16} />
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
<SelectedText onCleared={() => inputRef?.current?.focus()} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default UserInput
|