Update useMessageOption hook and Playground component

src/components/Option/Knowledge/KnowledgeIcon.tsx

@@ -0,0 +1,18 @@
+import { CSVIcon } from "@/components/Icons/CSVIcon"
+import { PDFIcon } from "@/components/Icons/PDFIcon"
+import { TXTIcon } from "@/components/Icons/TXTIcon"
+
+type Props = {
+  type: string
+  className?: string
+}
+
+export const KnowledgeIcon = ({ type, className = "w-6 h-6" }: Props) => {
+  if (type === "pdf" || type === "application/pdf") {
+    return <PDFIcon className={className} />
+  } else if (type === "csv" || type === "text/csv") {
+    return <CSVIcon className={className} />
+  } else if (type === "txt" || type === "text/plain") {
+    return <TXTIcon className={className} />
+  }
+}

src/components/Option/Knowledge/KnowledgeSelect.tsx

@@ -1,4 +1,5 @@
 import { getAllKnowledge } from "@/db/knowledge"
+import { useMessageOption } from "@/hooks/useMessageOption"
 import { useQuery } from "@tanstack/react-query"
 import { Dropdown, Tooltip } from "antd"
 import { Blocks } from "lucide-react"
@@ -7,6 +8,7 @@ import { useTranslation } from "react-i18next"
 
 export const KnowledgeSelect: React.FC = () => {
   const { t } = useTranslation("playground")
+  const { setSelectedKnowledge, selectedKnowledge } = useMessageOption()
   const { data } = useQuery({
     queryKey: ["getAllKnowledge"],
     queryFn: async () => {
@@ -30,14 +32,21 @@ export const KnowledgeSelect: React.FC = () => {
                 {d.title}
               </div>
             ),
-            onClick: () => {}
+            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"
         },
-        // hidescrollbars: true
-        className: "no-scrollbar"
+        className: "no-scrollbar",
+        activeKey: selectedKnowledge?.id
       }}
       placement={"topLeft"}
       trigger={["click"]}>

src/components/Option/Knowledge/SelectedKnwledge.tsx

@@ -0,0 +1,39 @@
+import { Knowledge } from "@/db/knowledge"
+import { XIcon } from "lucide-react"
+import { KnowledgeIcon } from "./KnowledgeIcon"
+
+type Props = {
+  knowledge: Knowledge
+  onClose: () => void
+}
+
+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-lg 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 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>
+      </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/Knowledge/index.tsx

@@ -1,19 +1,21 @@
 import { useState } from "react"
 import { useTranslation } from "react-i18next"
 import { AddKnowledge } from "./AddKnowledge"
-import {
-  useMutation,
-  useQuery,
-  useQueryClient
-} from "@tanstack/react-query"
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
 import { deleteKnowledge, getAllKnowledge } from "@/db/knowledge"
 import { Skeleton, Table, Tag, Tooltip, message } from "antd"
 import { Trash2 } from "lucide-react"
+import { KnowledgeIcon } from "./KnowledgeIcon"
+import { useMessageOption } from "@/hooks/useMessageOption"
 
 export const KnowledgeSettings = () => {
   const { t } = useTranslation(["knownledge", "common"])
   const [open, setOpen] = useState(false)
   const queryClient = useQueryClient()
+  const {
+    selectedKnowledge,
+    setSelectedKnowledge
+  } = useMessageOption()
 
   const { data, status } = useQuery({
     queryKey: ["fetchAllKnowledge"],
@@ -91,6 +93,9 @@ export const KnowledgeSettings = () => {
                         onClick={() => {
                           if (window.confirm(t("confirm.delete"))) {
                             deleteKnowledgeMutation(record.id)
+                            if(selectedKnowledge.id === record.id) {
+                              setSelectedKnowledge(null)
+                            }
                           }
                         }}
                         className="text-red-500 dark:text-red-400">
@@ -110,11 +115,6 @@ export const KnowledgeSettings = () => {
                       title: t("expandedColumns.name"),
                       key: "filename",
                       dataIndex: "filename"
-                    },
-                    {
-                      title: t("expandedColumns.type"),
-                      key: "type",
-                      dataIndex: "type"
                     }
                   ]}
                   dataSource={record.source}