From aae2ddecbc7ec015f70cc347b01733c4207dc534 Mon Sep 17 00:00:00 2001 From: n4ze3m Date: Fri, 5 Apr 2024 23:17:55 +0530 Subject: [PATCH] Update useMessageOption hook and Playground component --- src/components/Icons/CSVIcon.tsx | 44 ++++++++++ src/components/Icons/PDFIcon.tsx | 30 +++++++ src/components/Icons/TXTIcon.tsx | 32 +++++++ .../Option/Knowledge/KnowledgeIcon.tsx | 18 ++++ .../Option/Knowledge/KnowledgeSelect.tsx | 15 +++- .../Option/Knowledge/SelectedKnwledge.tsx | 39 +++++++++ src/components/Option/Knowledge/index.tsx | 20 ++--- .../Option/Playground/Playground.tsx | 8 +- .../Option/Playground/PlaygroundForm.tsx | 85 +++++++++++-------- src/hooks/useMessageOption.tsx | 10 ++- src/store/option.tsx | 18 ++-- 11 files changed, 262 insertions(+), 57 deletions(-) create mode 100644 src/components/Icons/CSVIcon.tsx create mode 100644 src/components/Icons/PDFIcon.tsx create mode 100644 src/components/Icons/TXTIcon.tsx create mode 100644 src/components/Option/Knowledge/KnowledgeIcon.tsx create mode 100644 src/components/Option/Knowledge/SelectedKnwledge.tsx diff --git a/src/components/Icons/CSVIcon.tsx b/src/components/Icons/CSVIcon.tsx new file mode 100644 index 0000000..18febbe --- /dev/null +++ b/src/components/Icons/CSVIcon.tsx @@ -0,0 +1,44 @@ +import React from "react" + +export const CSVIcon = React.forwardRef< + SVGSVGElement, + React.SVGProps +>((props, ref) => { + return ( + + + + + + + + + + + + + + + + + + + + ) +}) diff --git a/src/components/Icons/PDFIcon.tsx b/src/components/Icons/PDFIcon.tsx new file mode 100644 index 0000000..eedc930 --- /dev/null +++ b/src/components/Icons/PDFIcon.tsx @@ -0,0 +1,30 @@ +import React from "react" + +export const PDFIcon = React.forwardRef< + SVGSVGElement, + React.SVGProps +>((props, ref) => { + return ( + + + + + + + + + + ) +}) diff --git a/src/components/Icons/TXTIcon.tsx b/src/components/Icons/TXTIcon.tsx new file mode 100644 index 0000000..22c737a --- /dev/null +++ b/src/components/Icons/TXTIcon.tsx @@ -0,0 +1,32 @@ +import React from "react" + +export const TXTIcon = React.forwardRef< + SVGSVGElement, + React.SVGProps +>((props, ref) => { + return ( + + + + + + + + + ) +}) diff --git a/src/components/Option/Knowledge/KnowledgeIcon.tsx b/src/components/Option/Knowledge/KnowledgeIcon.tsx new file mode 100644 index 0000000..4a08746 --- /dev/null +++ b/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 + } else if (type === "csv" || type === "text/csv") { + return + } else if (type === "txt" || type === "text/plain") { + return + } +} diff --git a/src/components/Option/Knowledge/KnowledgeSelect.tsx b/src/components/Option/Knowledge/KnowledgeSelect.tsx index 2ab6ca8..0e4de2b 100644 --- a/src/components/Option/Knowledge/KnowledgeSelect.tsx +++ b/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} ), - 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"]}> diff --git a/src/components/Option/Knowledge/SelectedKnwledge.tsx b/src/components/Option/Knowledge/SelectedKnwledge.tsx new file mode 100644 index 0000000..26ab68f --- /dev/null +++ b/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 ( +
+
+
+

+ {knowledge.title} +

+
+
+ {knowledge.source.map((source, index) => ( +
+ + {source.filename} +
+ ))} +
+
+
+ +
+
+ ) +} diff --git a/src/components/Option/Knowledge/index.tsx b/src/components/Option/Knowledge/index.tsx index a3198bd..13cb2af 100644 --- a/src/components/Option/Knowledge/index.tsx +++ b/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} diff --git a/src/components/Option/Playground/Playground.tsx b/src/components/Option/Playground/Playground.tsx index 58a5446..a18b258 100644 --- a/src/components/Option/Playground/Playground.tsx +++ b/src/components/Option/Playground/Playground.tsx @@ -1,15 +1,21 @@ import React from "react" import { PlaygroundForm } from "./PlaygroundForm" import { PlaygroundChat } from "./PlaygroundChat" +import { useMessageOption } from "@/hooks/useMessageOption" export const Playground = () => { const drop = React.useRef(null) const [dropedFile, setDropedFile] = React.useState() + const { selectedKnowledge } = useMessageOption() const [dropState, setDropState] = React.useState< "idle" | "dragging" | "error" >("idle") React.useEffect(() => { + if (selectedKnowledge) { + return + } + if (!drop.current) { return } @@ -64,7 +70,7 @@ export const Playground = () => { drop.current.removeEventListener("dragleave", handleDragLeave) } } - }, []) + }, [selectedKnowledge]) return (
{ setWebSearch, selectedQuickPrompt, textareaRef, - setSelectedQuickPrompt + setSelectedQuickPrompt, + selectedKnowledge, + setSelectedKnowledge } = useMessageOption() const textAreaFocus = () => { @@ -155,6 +158,14 @@ export const PlaygroundForm = ({ dropedFile }: Props) => { } return (
+ {selectedKnowledge && ( + { + setSelectedKnowledge(null) + }} + knowledge={selectedKnowledge} + /> + )}
{ />
- -
- - +
+ + + + setWebSearch(e)} + checkedChildren={t("form.webSearch.on")} + unCheckedChildren={t("form.webSearch.off")} /> - - setWebSearch(e)} - checkedChildren={t("form.webSearch.on")} - unCheckedChildren={t("form.webSearch.off")} - /> -
- +
+ + )}
@@ -276,18 +289,20 @@ export const PlaygroundForm = ({ dropedFile }: Props) => { - - - + {!selectedKnowledge && ( + + + + )} {!isSending ? ( { controller: abortController, setController: setAbortController, messages, - setMessages + setMessages, } = usePageAssist() const { history, @@ -56,7 +56,9 @@ export const useMessageOption = () => { selectedQuickPrompt, setSelectedQuickPrompt, selectedSystemPrompt, - setSelectedSystemPrompt + setSelectedSystemPrompt, + selectedKnowledge, + setSelectedKnowledge } = useStoreMessageOption() const { t } = useTranslation("option") @@ -664,6 +666,8 @@ export const useMessageOption = () => { setSelectedQuickPrompt, selectedSystemPrompt, setSelectedSystemPrompt, - textareaRef + textareaRef, + selectedKnowledge, + setSelectedKnowledge } } diff --git a/src/store/option.tsx b/src/store/option.tsx index 0de6c80..8e1e845 100644 --- a/src/store/option.tsx +++ b/src/store/option.tsx @@ -1,3 +1,4 @@ +import { Knowledge } from "@/db/knowledge" import { create } from "zustand" type WebSearch = { @@ -48,16 +49,19 @@ type State = { setIsEmbedding: (isEmbedding: boolean) => void speechToTextLanguage: string setSpeechToTextLanguage: (language: string) => void - webSearch: boolean; - setWebSearch: (webSearch: boolean) => void; - isSearchingInternet: boolean; - setIsSearchingInternet: (isSearchingInternet: boolean) => void; + webSearch: boolean + setWebSearch: (webSearch: boolean) => void + isSearchingInternet: boolean + setIsSearchingInternet: (isSearchingInternet: boolean) => void selectedSystemPrompt: string | null setSelectedSystemPrompt: (selectedSystemPrompt: string) => void selectedQuickPrompt: string | null setSelectedQuickPrompt: (selectedQuickPrompt: string) => void + + selectedKnowledge: Knowledge | null + setSelectedKnowledge: (selectedKnowledge: Knowledge) => void } export const useStoreMessageOption = create((set) => ({ @@ -89,7 +93,11 @@ export const useStoreMessageOption = create((set) => ({ isSearchingInternet: false, setIsSearchingInternet: (isSearchingInternet) => set({ isSearchingInternet }), selectedSystemPrompt: null, - setSelectedSystemPrompt: (selectedSystemPrompt) => set({ selectedSystemPrompt }), + setSelectedSystemPrompt: (selectedSystemPrompt) => + set({ selectedSystemPrompt }), selectedQuickPrompt: null, setSelectedQuickPrompt: (selectedQuickPrompt) => set({ selectedQuickPrompt }), + + selectedKnowledge: null, + setSelectedKnowledge: (selectedKnowledge) => set({ selectedKnowledge }) }))