98 lines
3.0 KiB
TypeScript
98 lines
3.0 KiB
TypeScript
import { useQuery } from "@tanstack/react-query"
|
|
import { Dropdown, Empty, Tooltip } from "antd"
|
|
import { BookIcon, ComputerIcon, ZapIcon } from "lucide-react"
|
|
import React from "react"
|
|
import { useTranslation } from "react-i18next"
|
|
import { getAllPrompts } from "@/db"
|
|
|
|
type Props = {
|
|
setSelectedSystemPrompt: (promptId: string | undefined) => void
|
|
setSelectedQuickPrompt: (prompt: string | undefined) => void
|
|
selectedSystemPrompt: string | undefined
|
|
className?: string
|
|
}
|
|
|
|
export const PromptSelect: React.FC<Props> = ({
|
|
setSelectedQuickPrompt,
|
|
setSelectedSystemPrompt,
|
|
selectedSystemPrompt,
|
|
className = "dark:text-gray-300"
|
|
}) => {
|
|
const { t } = useTranslation("option")
|
|
|
|
const { data } = useQuery({
|
|
queryKey: ["getAllPromptsForSelect"],
|
|
queryFn: getAllPrompts
|
|
})
|
|
|
|
const handlePromptChange = (value?: string) => {
|
|
if (!value) {
|
|
setSelectedSystemPrompt(undefined)
|
|
setSelectedQuickPrompt(undefined)
|
|
return
|
|
}
|
|
const prompt = data?.find((prompt) => prompt.id === value)
|
|
if (prompt?.is_system) {
|
|
setSelectedSystemPrompt(prompt.id)
|
|
} else {
|
|
setSelectedSystemPrompt(undefined)
|
|
setSelectedQuickPrompt(prompt!.content)
|
|
}
|
|
}
|
|
return (
|
|
<>
|
|
{data && (
|
|
<Dropdown
|
|
menu={{
|
|
items:
|
|
data.length > 0
|
|
? data?.map((prompt) => ({
|
|
key: prompt.id,
|
|
label: (
|
|
<div className="w-52 gap-2 text-lg truncate inline-flex line-clamp-3 items-center dark:border-gray-700">
|
|
<span
|
|
key={prompt.title}
|
|
className="flex flex-row gap-3 items-center">
|
|
{prompt.is_system ? (
|
|
<ComputerIcon className="w-4 h-4" />
|
|
) : (
|
|
<ZapIcon className="w-4 h-4" />
|
|
)}
|
|
{prompt.title}
|
|
</span>
|
|
</div>
|
|
),
|
|
onClick: () => {
|
|
if (selectedSystemPrompt === prompt.id) {
|
|
setSelectedSystemPrompt(undefined)
|
|
} else {
|
|
handlePromptChange(prompt.id)
|
|
}
|
|
}
|
|
}))
|
|
: [
|
|
{
|
|
key: "empty",
|
|
label: <Empty />
|
|
}
|
|
],
|
|
style: {
|
|
maxHeight: 500,
|
|
overflowY: "scroll"
|
|
},
|
|
className: "no-scrollbar",
|
|
activeKey: selectedSystemPrompt
|
|
}}
|
|
placement={"topLeft"}
|
|
trigger={["click"]}>
|
|
<Tooltip title={t("selectAPrompt")}>
|
|
<button type="button" className={className}>
|
|
<BookIcon className="h-5 w-5" />
|
|
</button>
|
|
</Tooltip>
|
|
</Dropdown>
|
|
)}
|
|
</>
|
|
)
|
|
}
|