From 82abbf5baddb0c7a6fb69e15e9b65e4604f3186f Mon Sep 17 00:00:00 2001
From: n4ze3m <n4ze3m@gmail.com>
Date: Sat, 6 Apr 2024 10:48:51 +0530
Subject: [PATCH] Add SelectedKnowledge component to OptionLayout and
 KnowledgeSelect

---
 src/components/Layouts/Layout.tsx             |  2 +
 .../Option/Knowledge/KnowledgeSelect.tsx      | 78 ++++++++++---------
 .../Option/Knowledge/SelectedKnwledge.tsx     | 51 ++++++------
 .../Option/Playground/PlaygroundForm.tsx      |  4 +-
 4 files changed, 66 insertions(+), 69 deletions(-)

diff --git a/src/components/Layouts/Layout.tsx b/src/components/Layouts/Layout.tsx
index f5455c1..3cf9c94 100644
--- a/src/components/Layouts/Layout.tsx
+++ b/src/components/Layouts/Layout.tsx
@@ -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">
diff --git a/src/components/Option/Knowledge/KnowledgeSelect.tsx b/src/components/Option/Knowledge/KnowledgeSelect.tsx
index 0e4de2b..95b036a 100644
--- a/src/components/Option/Knowledge/KnowledgeSelect.tsx
+++ b/src/components/Option/Knowledge/KnowledgeSelect.tsx
@@ -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>
+      )}
+    </>
   )
 }
diff --git a/src/components/Option/Knowledge/SelectedKnwledge.tsx b/src/components/Option/Knowledge/SelectedKnwledge.tsx
index 7cdc0ca..c217465 100644
--- a/src/components/Option/Knowledge/SelectedKnwledge.tsx
+++ b/src/components/Option/Knowledge/SelectedKnwledge.tsx
@@ -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>
   )
 }
diff --git a/src/components/Option/Playground/PlaygroundForm.tsx b/src/components/Option/Playground/PlaygroundForm.tsx
index 4c15e6d..64c3683 100644
--- a/src/components/Option/Playground/PlaygroundForm.tsx
+++ b/src/components/Option/Playground/PlaygroundForm.tsx
@@ -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"