iod/page-assist
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add SelectedKnowledge component to OptionLayout and KnowledgeSelect

Browse Source
This commit is contained in:
n4ze3m 2024-04-06 10:48:51 +05:30
parent dd496b7b98
commit 82abbf5bad
4 changed files with 66 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Layouts/Layout.tsx
View File

@ -19,6 +19,7 @@ import { getAllPrompts } from "@/db"
import { ShareBtn } from "~/components/Common/ShareBtn"
import { useTranslation } from "react-i18next"
import { OllamaIcon } from "../Icons/Ollama"
import { SelectedKnowledge } from "../Option/Knowledge/SelectedKnwledge"
export default function OptionLayout({
children
@ -166,6 +167,7 @@ export default function OptionLayout({
}))}
/>
</div>
<SelectedKnowledge />
</div>
<div className="flex flex-1 justify-end px-4">
<div className="ml-4 flex items-center md:ml-6">

78
src/components/Option/Knowledge/KnowledgeSelect.tsx
View File

@ -19,42 +19,46 @@ export const KnowledgeSelect: React.FC = () => {
})
return (
<Dropdown
menu={{
items:
data?.map((d) => ({
key: d.id,
label: (
<div className="w-52 gap-2 text-lg truncate inline-flex line-clamp-3 items-center dark:border-gray-700">
<div>
<Blocks className="h-6 w-6 text-gray-400" />
</div>
{d.title}
</div>
),
onClick: () => {
const knowledge = data?.find((k) => k.id === d.id)
if (selectedKnowledge?.id === d.id) {
setSelectedKnowledge(null)
} else {
setSelectedKnowledge(knowledge)
}
}
})) || [],
style: {
maxHeight: 500,
overflowY: "scroll"
},
className: "no-scrollbar",
activeKey: selectedKnowledge?.id
}}
placement={"topLeft"}
trigger={["click"]}>
<Tooltip title={t("tooltip.knowledge")}>
<button type="button" className="dark:text-gray-300">
<Blocks className="h-6 w-6" />
</button>
</Tooltip>
</Dropdown>
<>
{data && data.length > 0 && (
<Dropdown
menu={{
items:
data?.map((d) => ({
key: d.id,
label: (
<div className="w-52 gap-2 text-lg truncate inline-flex line-clamp-3 items-center dark:border-gray-700">
<div>
<Blocks className="h-6 w-6 text-gray-400" />
</div>
{d.title}
</div>
),
onClick: () => {
const knowledge = data?.find((k) => k.id === d.id)
if (selectedKnowledge?.id === d.id) {
setSelectedKnowledge(null)
} else {
setSelectedKnowledge(knowledge)
}
}
})) || [],
style: {
maxHeight: 500,
overflowY: "scroll"
},
className: "no-scrollbar",
activeKey: selectedKnowledge?.id
}}
placement={"topLeft"}
trigger={["click"]}>
<Tooltip title={t("tooltip.knowledge")}>
<button type="button" className="dark:text-gray-300">
<Blocks className="h-6 w-6" />
</button>
</Tooltip>
</Dropdown>
)}
</>
)
}

51
src/components/Option/Knowledge/SelectedKnwledge.tsx
View File

@ -1,39 +1,32 @@
import { Knowledge } from "@/db/knowledge"
import { XIcon } from "lucide-react"
import { KnowledgeIcon } from "./KnowledgeIcon"
import { Blocks, XIcon } from "lucide-react"
import { useMessageOption } from "@/hooks/useMessageOption"
type Props = {
knowledge: Knowledge
onClose: () => void
}
export const SelectedKnowledge = () => {
const { selectedKnowledge: knowledge, setSelectedKnowledge } =
useMessageOption()
if (!knowledge) return <></>
export const SelectedKnowledge = ({ knowledge, onClose }: Props) => {
return (
<div className="mb-3 border flex justify-between items-center rounded-md p-2 dark:border-gray-600">
<div className="flex flex-col gap-2">
<div>
<h3 className="text-sm font-semibold dark:text-gray-100">
<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-md p-1 gap-2 bg-gray-100 dark:bg-gray-800 dark:border-gray-700">
<div className="inline-flex items-center gap-2">
<Blocks className="h-6 w-6 text-gray-400" />
<span className="text-xs font-semibold dark:text-gray-100">
{knowledge.title}
</h3>
</span>
</div>
<div className="flex flex-row overflow-x-auto gap-2 w-full">
{knowledge.source.map((source, index) => (
<div
key={index}
className="inline-flex gap-2 text-xs border rounded-md p-1 dark:border-gray-600 dark:text-gray-100">
<KnowledgeIcon type={source.type} className="w-4 h-4" />
{source.filename}
</div>
))}
<div>
<button
onClick={() => setSelectedKnowledge(null)}
className="flex items-center justify-center bg-white dark:bg-[#262626] p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-600 text-black dark:text-gray-100">
<XIcon className="h-3 w-3" />
</button>
</div>
</div>
<div>
<button
onClick={onClose}
className="flex items-center justify-center bg-white dark:bg-[#262626] p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-600 text-black dark:text-gray-100">
<XIcon className="h-5 w-5" />
</button>
</div>
</div>
)
}

4
src/components/Option/Playground/PlaygroundForm.tsx
View File

@ -35,8 +35,7 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
selectedQuickPrompt,
textareaRef,
setSelectedQuickPrompt,
selectedKnowledge,
setSelectedKnowledge
selectedKnowledge
} = useMessageOption()
const textAreaFocus = () => {
@ -158,7 +157,6 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
}
return (
<div className="px-3 pt-3 md:px-6 md:pt-6 bg-gray-50 dark:bg-[#262626] border rounded-t-xl dark:border-gray-600">
<div
className={`h-full rounded-md shadow relative ${
form.values.image.length === 0 ? "hidden" : "block"