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,6 +19,8 @@ export const KnowledgeSelect: React.FC = () => {
   })
 
   return (
+    <>
+      {data && data.length > 0 && (
         <Dropdown
           menu={{
             items:
@@ -56,5 +58,7 @@ export const KnowledgeSelect: React.FC = () => {
             </button>
           </Tooltip>
         </Dropdown>
+      )}
+    </>
   )
 }

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>
-        </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>
+          </span>
         </div>
         <div>
           <button
-          onClick={onClose}
+            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-5 w-5" />
+            <XIcon className="h-3 w-3" />
           </button>
         </div>
       </div>
+    </div>
   )
 }

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"