88 lines
2.9 KiB
TypeScript
88 lines
2.9 KiB
TypeScript
import { ChatbotUIContext } from "@/context/context"
|
|
import useHotkey from "@/lib/hooks/use-hotkey"
|
|
import { IconLoader2, IconSend } from "@tabler/icons-react"
|
|
import { FC, useContext, useState } from "react"
|
|
import { Dialog, DialogContent } from "../ui/dialog"
|
|
import { TextareaAutosize } from "../ui/textarea-autosize"
|
|
|
|
interface CommandKProps {}
|
|
|
|
export const CommandK: FC<CommandKProps> = ({}) => {
|
|
useHotkey("k", () => setIsOpen(prevState => !prevState))
|
|
|
|
const { profile } = useContext(ChatbotUIContext)
|
|
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
const [value, setValue] = useState("")
|
|
const [loading, setLoading] = useState(false)
|
|
const [content, setContent] = useState("")
|
|
|
|
const handleCommandK = async () => {
|
|
setLoading(true)
|
|
|
|
const response = await fetch("/api/command", {
|
|
method: "POST",
|
|
body: JSON.stringify({
|
|
input: value
|
|
})
|
|
})
|
|
|
|
const data = await response.json()
|
|
|
|
setContent(data.content)
|
|
setLoading(false)
|
|
setValue("")
|
|
}
|
|
|
|
const handleKeyDown = (e: React.KeyboardEvent) => {
|
|
if (e.key === "Enter" && !e.shiftKey) {
|
|
e.preventDefault()
|
|
handleCommandK()
|
|
}
|
|
}
|
|
|
|
if (!profile) return null
|
|
|
|
return (
|
|
isOpen && (
|
|
<Dialog open={isOpen} onOpenChange={setIsOpen}>
|
|
<DialogContent onKeyDown={handleKeyDown}>
|
|
{profile.openai_api_key ? (
|
|
<div className="space-y-2">
|
|
<div>{content}</div>
|
|
|
|
<div>turn dark mode on.</div>
|
|
<div>find my sql chat</div>
|
|
<div>i need a new assistant</div>
|
|
<div>start a chat with my 2024 resolutions file</div>
|
|
|
|
<div className="border-input relative flex min-h-[50px] w-full items-center justify-center rounded-xl border-2">
|
|
<TextareaAutosize
|
|
className="ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring text-md flex w-full resize-none rounded-md border-none bg-transparent px-3 py-2 pr-14 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
|
|
placeholder="create a prompt for writing sql code"
|
|
value={value}
|
|
onValueChange={setValue}
|
|
/>
|
|
{loading ? (
|
|
<IconLoader2
|
|
className="absolute bottom-[8px] right-3 animate-spin cursor-pointer rounded p-1 hover:opacity-50"
|
|
size={30}
|
|
/>
|
|
) : (
|
|
<IconSend
|
|
className="bg-primary text-secondary absolute bottom-[8px] right-3 cursor-pointer rounded p-1 hover:opacity-50"
|
|
onClick={handleCommandK}
|
|
size={30}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div>Add your OpenAI API key in the settings to unlock CMD+K.</div>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
)
|
|
}
|