Add SelectedKnowledge component to OptionLayout and KnowledgeSelect

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">

src/components/Option/Knowledge/KnowledgeSelect.tsx

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

src/components/Option/Knowledge/SelectedKnwledge.tsx

@@ -1,39 +1,32 @@
-import { Knowledge } from "@/db/knowledge"
+import { Blocks, XIcon } from "lucide-react"
-import { XIcon } from "lucide-react"
+import { useMessageOption } from "@/hooks/useMessageOption"
-import { KnowledgeIcon } from "./KnowledgeIcon"
 
-type Props = {
+export const SelectedKnowledge = () => {
-  knowledge: Knowledge
+  const { selectedKnowledge: knowledge, setSelectedKnowledge } =
-  onClose: () => void
+    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-row items-center gap-3">
-      <div className="flex flex-col gap-2">
+      <span className="text-lg font-thin text-zinc-300 dark:text-zinc-600">
-        <div>
+        {"/"}
-          <h3 className="text-sm font-semibold dark:text-gray-100">
+      </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">
+        <div>
-          {knowledge.source.map((source, index) => (
+          <button
-            <div
+            onClick={() => setSelectedKnowledge(null)}
-              key={index}
+            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">
-              className="inline-flex gap-2 text-xs border rounded-md p-1 dark:border-gray-600 dark:text-gray-100">
+            <XIcon className="h-3 w-3" />
-              <KnowledgeIcon type={source.type} className="w-4 h-4" />
+          </button>
-              {source.filename}
-            </div>
-          ))}
         </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>
   )
 }

src/components/Option/Playground/PlaygroundForm.tsx

@@ -35,8 +35,7 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
     selectedQuickPrompt,
     textareaRef,
     setSelectedQuickPrompt,
-    selectedKnowledge,
+    selectedKnowledge
-    setSelectedKnowledge
   } = 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"