From d6d2eae5ef21636b4e5e7c09671e2d16d5d276db Mon Sep 17 00:00:00 2001 From: n4ze3m Date: Sat, 6 Apr 2024 20:18:46 +0530 Subject: [PATCH] knownledge preview --- src/chain/chat-with-x.ts | 6 +- src/components/Common/Playground/Message.tsx | 12 ++- .../Common/Playground/MessageSource.tsx | 37 +++++++++ .../Common/Playground/MessageSourcePopup.tsx | 52 +++++++++++++ .../Option/Playground/PlaygroundChat.tsx | 75 +++++++++++-------- src/db/vector.ts | 2 - src/hooks/useMessageOption.tsx | 2 + src/libs/PageAssistVectorStore.ts | 1 - src/loader/txt.ts | 2 +- 9 files changed, 147 insertions(+), 42 deletions(-) create mode 100644 src/components/Common/Playground/MessageSource.tsx create mode 100644 src/components/Common/Playground/MessageSourcePopup.tsx diff --git a/src/chain/chat-with-x.ts b/src/chain/chat-with-x.ts index 7c378a2..4a63829 100644 --- a/src/chain/chat-with-x.ts +++ b/src/chain/chat-with-x.ts @@ -27,6 +27,10 @@ const formatChatHistoryAsString = (history: BaseMessage[]) => { export const formatDocs = (docs: Document[]) => { return docs + .filter( + (doc, i, self) => + self.findIndex((d) => d.pageContent === doc.pageContent) === i + ) .map((doc, i) => `${doc.pageContent}`) .join("\n") } @@ -145,7 +149,7 @@ export const createChatWithXChain = ({ runName: "Itemgetter:question" }), chat_history: RunnableLambda.from(serializeHistory).withConfig({ - runName: "SerializeHistory", + runName: "SerializeHistory" }) }, context, diff --git a/src/components/Common/Playground/Message.tsx b/src/components/Common/Playground/Message.tsx index dfaeeb8..e964578 100644 --- a/src/components/Common/Playground/Message.tsx +++ b/src/components/Common/Playground/Message.tsx @@ -5,6 +5,7 @@ import { WebSearch } from "./WebSearch" import { CheckIcon, ClipboardIcon, Pen, RotateCcw } from "lucide-react" import { EditMessageForm } from "./EditMessageForm" import { useTranslation } from "react-i18next" +import { MessageSource } from "./MessageSource" type Props = { message: string @@ -23,6 +24,7 @@ type Props = { isSearchingInternet?: boolean sources?: any[] hideEditAndRegenerate?: boolean + onSourceClick?: (source: any) => void } export const PlaygroundMessage = (props: Props) => { @@ -95,13 +97,9 @@ export const PlaygroundMessage = (props: Props) => { {props.isBot && props?.sources && props?.sources.length > 0 && (
{props?.sources?.map((source, index) => ( - - {source.name} - + ))}
)} diff --git a/src/components/Common/Playground/MessageSource.tsx b/src/components/Common/Playground/MessageSource.tsx new file mode 100644 index 0000000..09b2aa6 --- /dev/null +++ b/src/components/Common/Playground/MessageSource.tsx @@ -0,0 +1,37 @@ +import { KnowledgeIcon } from "@/components/Option/Knowledge/KnowledgeIcon" + +type Props = { + source: { + name?: string + url?: string + mode?: string + type?: string + pageContent?: string + content?: string + } + onSourceClick?: (source: any) => void +} + +export const MessageSource: React.FC = ({ source, onSourceClick }) => { + if (source?.mode === "rag") { + return ( + + ) + } + + return ( + + {source.name} + + ) +} diff --git a/src/components/Common/Playground/MessageSourcePopup.tsx b/src/components/Common/Playground/MessageSourcePopup.tsx new file mode 100644 index 0000000..72f4934 --- /dev/null +++ b/src/components/Common/Playground/MessageSourcePopup.tsx @@ -0,0 +1,52 @@ +import { KnowledgeIcon } from "@/components/Option/Knowledge/KnowledgeIcon" +import { Modal } from "antd" + +type Props = { + source: any + open: boolean + setOpen: (open: boolean) => void +} + +export const MessageSourcePopup: React.FC = ({ + source, + open, + setOpen +}) => { + return ( + setOpen(false)} + footer={null} + onOk={() => setOpen(false)}> +
+

+ {source?.type && ( + + )} + {source?.name} +

+ {source?.type === "pdf" ? ( + <> +

{source?.pageContent}

+ +
+ + {`Page ${source?.metadata?.page}`} + + + + {`Line ${source?.metadata?.loc?.lines?.from} - ${source?.metadata?.loc?.lines?.to}`} + +
+ + ) : ( + <> +

{source?.pageContent}

+ + )} +
+ + ) +} diff --git a/src/components/Option/Playground/PlaygroundChat.tsx b/src/components/Option/Playground/PlaygroundChat.tsx index 8b0a876..9b7c46c 100644 --- a/src/components/Option/Playground/PlaygroundChat.tsx +++ b/src/components/Option/Playground/PlaygroundChat.tsx @@ -2,6 +2,7 @@ import React from "react" import { useMessageOption } from "~/hooks/useMessageOption" import { PlaygroundEmpty } from "./PlaygroundEmpty" import { PlaygroundMessage } from "~/components/Common/Playground/Message" +import { MessageSourcePopup } from "@/components/Common/Playground/MessageSourcePopup" export const PlaygroundChat = () => { const { @@ -12,41 +13,55 @@ export const PlaygroundChat = () => { editMessage } = useMessageOption() const divRef = React.useRef(null) + const [isSourceOpen, setIsSourceOpen] = React.useState(false) + const [source, setSource] = React.useState(null) React.useEffect(() => { if (divRef.current) { divRef.current.scrollIntoView({ behavior: "smooth" }) } }) return ( -
- {messages.length === 0 && ( -
- -
- )} - {/* {messages.length > 0 &&
} */} - {messages.map((message, index) => ( - { - editMessage(index, value, !message.isBot) - }} - /> - ))} - {messages.length > 0 && ( -
- )} -
-
+ <> + {" "} +
+ {messages.length === 0 && ( +
+ +
+ )} + {/* {messages.length > 0 &&
} */} + {messages.map((message, index) => ( + { + editMessage(index, value, !message.isBot) + }} + onSourceClick={(data) => { + setSource(data) + setIsSourceOpen(true) + }} + /> + ))} + {messages.length > 0 && ( +
+ )} +
+
+ + ) } diff --git a/src/db/vector.ts b/src/db/vector.ts index 42c226f..e544c7f 100644 --- a/src/db/vector.ts +++ b/src/db/vector.ts @@ -28,7 +28,6 @@ export class PageAssistVectorDb { } else { const data = result[id] as VectorData if (!data) { - console.log("Creating new vector", vector) this.db.set({ [id]: { id, vectors: vector } }, () => { if (chrome.runtime.lastError) { reject(chrome.runtime.lastError) @@ -37,7 +36,6 @@ export class PageAssistVectorDb { } }) } else { - console.log("Concatenating vectors") this.db.set( { [id]: { diff --git a/src/hooks/useMessageOption.tsx b/src/hooks/useMessageOption.tsx index 760739a..38a5308 100644 --- a/src/hooks/useMessageOption.tsx +++ b/src/hooks/useMessageOption.tsx @@ -601,8 +601,10 @@ export const useMessageOption = () => { const context = formatDocs(docs) const source = docs.map((doc) => { return { + ...doc, name: doc?.metadata?.source || "untitled", type: doc?.metadata?.type || "unknown", + mode: "rag", url: "" } }) diff --git a/src/libs/PageAssistVectorStore.ts b/src/libs/PageAssistVectorStore.ts index ca0bbb2..fd1d4f6 100644 --- a/src/libs/PageAssistVectorStore.ts +++ b/src/libs/PageAssistVectorStore.ts @@ -136,7 +136,6 @@ export class PageAssistVectorStore extends VectorStore { }), search.similarity ]) - console.log(result) return result } diff --git a/src/loader/txt.ts b/src/loader/txt.ts index 4b92453..a7b7ef0 100644 --- a/src/loader/txt.ts +++ b/src/loader/txt.ts @@ -32,7 +32,7 @@ export class PageAssisTXTUrlLoader const raw = await res.text() const parsed = await this.parse(raw) - let metadata = { source: this.name, type: "csv" } + let metadata = { source: this.name, type: "txt" } parsed.forEach((pageContent, i) => { if (typeof pageContent !== "string") { throw new Error(