chore: Update form components to handle pasted files
This commit is contained in:
n4ze3m
parent
e623cc5ead
commit
8662fd0693
90
src/components/Common/PromptSelect.tsx
Normal file
90
src/components/Common/PromptSelect.tsx
Normal file
@ -0,0 +1,90 @@
|
||||
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"
|
||||
import { useMessageOption } from "@/hooks/useMessageOption"
|
||||
|
||||
export const PromptSelect: React.FC = () => {
|
||||
const { t } = useTranslation("option")
|
||||
const {
|
||||
selectedSystemPrompt,
|
||||
setSelectedQuickPrompt,
|
||||
setSelectedSystemPrompt
|
||||
} = useMessageOption()
|
||||
|
||||
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="dark:text-gray-300">
|
||||
<BookIcon className="h-5 w-5" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</Dropdown>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -12,6 +12,7 @@ import {
|
||||
ComputerIcon,
|
||||
GithubIcon,
|
||||
PanelLeftIcon,
|
||||
SlashIcon,
|
||||
SquarePen,
|
||||
ZapIcon
|
||||
} from "lucide-react"
|
||||
@ -21,6 +22,8 @@ import { useTranslation } from "react-i18next"
|
||||
import { OllamaIcon } from "../Icons/Ollama"
|
||||
import { SelectedKnowledge } from "../Option/Knowledge/SelectedKnwledge"
|
||||
import { useStorage } from "@plasmohq/storage/hook"
|
||||
import { ModelSelect } from "../Common/ModelSelect"
|
||||
import { PromptSelect } from "../Common/PromptSelect"
|
||||
|
||||
export default function OptionLayout({
|
||||
children
|
||||
@ -89,7 +92,7 @@ export default function OptionLayout({
|
||||
<NavLink
|
||||
to="/"
|
||||
className="text-gray-500 items-center dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
|
||||
<ChevronLeft className="w-6 h-6" />
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
</NavLink>
|
||||
</div>
|
||||
)}
|
||||
@ -103,15 +106,17 @@ export default function OptionLayout({
|
||||
<div>
|
||||
<button
|
||||
onClick={clearChat}
|
||||
className="inline-flex dark:bg-transparent bg-white items-center rounded-lg border dark:border-gray-700 bg-transparent px-3 py-3 text-sm font-medium leading-4 text-gray-800 dark:text-white disabled:opacity-50 ease-in-out transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white">
|
||||
<SquarePen className="h-4 w-4 mr-3" />
|
||||
{t("newChat")}
|
||||
className="inline-flex dark:bg-transparent bg-white items-center rounded-lg border dark:border-gray-700 bg-transparent px-3 py-2.5 text-xs lg:text-sm font-medium leading-4 text-gray-800 dark:text-white disabled:opacity-50 ease-in-out transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white">
|
||||
<SquarePen className="h-5 w-5 " />
|
||||
<span className=" truncate ml-3">
|
||||
{t("newChat")}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<span className="text-lg font-thin text-zinc-300 dark:text-zinc-600">
|
||||
{"/"}
|
||||
</span>
|
||||
<div>
|
||||
<div className="hidden lg:block">
|
||||
<Select
|
||||
value={selectedModel}
|
||||
onChange={(e) => {
|
||||
@ -141,10 +146,13 @@ export default function OptionLayout({
|
||||
}))}
|
||||
/>
|
||||
</div>
|
||||
<div className="lg:hidden">
|
||||
<ModelSelect />
|
||||
</div>
|
||||
<span className="text-lg font-thin text-zinc-300 dark:text-zinc-600">
|
||||
{"/"}
|
||||
</span>
|
||||
<div>
|
||||
<div className="hidden lg:block">
|
||||
<Select
|
||||
size="large"
|
||||
loading={isPromptLoading}
|
||||
@ -177,6 +185,9 @@ export default function OptionLayout({
|
||||
}))}
|
||||
/>
|
||||
</div>
|
||||
<div className="lg:hidden">
|
||||
<PromptSelect />
|
||||
</div>
|
||||
<SelectedKnowledge />
|
||||
</div>
|
||||
<div className="flex flex-1 justify-end px-4">
|
||||
@ -190,7 +201,7 @@ export default function OptionLayout({
|
||||
<a
|
||||
href="https://github.com/n4ze3m/page-assist"
|
||||
target="_blank"
|
||||
className="!text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
|
||||
className="!text-gray-500 hidden lg:block dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
|
||||
<GithubIcon className="w-6 h-6" />
|
||||
</a>
|
||||
</Tooltip>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { Blocks, XIcon } from "lucide-react"
|
||||
import { useMessageOption } from "@/hooks/useMessageOption"
|
||||
import { Tooltip } from "antd"
|
||||
|
||||
export const SelectedKnowledge = () => {
|
||||
const { selectedKnowledge: knowledge, setSelectedKnowledge } =
|
||||
@ -8,17 +9,21 @@ export const SelectedKnowledge = () => {
|
||||
if (!knowledge) return <></>
|
||||
|
||||
return (
|
||||
<div className="flex flex-row items-center gap-3">
|
||||
<div className="flex flex-row items-center gap-3">
|
||||
<span className="text-lg font-thin text-zinc-300 dark:text-zinc-600">
|
||||
{"/"}
|
||||
</span>
|
||||
<div className="border flex justify-between items-center rounded-full px-2 py-1 gap-2 bg-gray-100 dark:bg-slate-800 dark:border-slate-700">
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<Blocks className="h-5 w-5 text-gray-400" />
|
||||
<span className="text-xs font-semibold dark:text-gray-100">
|
||||
<div className="border flex justify-between items-center rounded-full px-2 py-1 gap-2 bg-gray-100 dark:bg-slate-800 dark:border-slate-700">
|
||||
<Tooltip
|
||||
title={knowledge.title}
|
||||
>
|
||||
<div className="inline-flex truncate items-center gap-2">
|
||||
<Blocks className="h-5 w-5 text-gray-400" />
|
||||
<span className="text-xs hidden lg:inline-block font-semibold dark:text-gray-100">
|
||||
{knowledge.title}
|
||||
</span>
|
||||
</div>
|
||||
</Tooltip>
|
||||
<div>
|
||||
<button
|
||||
onClick={() => setSelectedKnowledge(null)}
|
||||
|
||||
@ -91,7 +91,10 @@ export const ModelsBody = () => {
|
||||
{status === "pending" && <Skeleton paragraph={{ rows: 8 }} />}
|
||||
|
||||
{status === "success" && (
|
||||
<Table
|
||||
<div
|
||||
className="overflow-x-auto"
|
||||
>
|
||||
<Table
|
||||
columns={[
|
||||
{
|
||||
title: t("manageModels.columns.name"),
|
||||
@ -207,6 +210,7 @@ export const ModelsBody = () => {
|
||||
dataSource={data}
|
||||
rowKey={(record) => `${record.model}-${record.digest}`}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user