iod/page-assist
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

knownledge preview

Browse Source
This commit is contained in:
n4ze3m
2024-04-06 20:18:46 +05:30
parent 0de5ea0b04
commit d6d2eae5ef
9 changed files with 147 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/Common/Playground/Message.tsx
View File

@@ -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 && (
<div className="mb-3 flex flex-wrap gap-2">
{props?.sources?.map((source, index) => (
<a
key={index}
href={source?.url}
target="_blank"
className="inline-flex cursor-pointer transition-shadow duration-300 ease-in-out hover:shadow-lg items-center rounded-md bg-gray-100 p-1 text-xs text-gray-800 border border-gray-300 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100 opacity-80 hover:opacity-100">
<span className="text-xs">{source.name}</span>
</a>
<MessageSource
onSourceClick={props.onSourceClick}
key={index} source={source} />
))}
</div>
)}

37
src/components/Common/Playground/MessageSource.tsx Normal file
View File

@@ -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<Props> = ({ source, onSourceClick }) => {
if (source?.mode === "rag") {
return (
<button
onClick={() => {
onSourceClick && onSourceClick(source)
}}
className="inline-flex gap-2 cursor-pointer transition-shadow duration-300 ease-in-out hover:shadow-lg items-center rounded-md bg-gray-100 p-1 text-xs text-gray-800 border border-gray-300 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100 opacity-80 hover:opacity-100">
<KnowledgeIcon type={source.type} className="h-4 w-5" />
<span className="text-xs">{source.name}</span>
</button>
)
}
return (
<a
href={source?.url}
target="_blank"
className="inline-flex cursor-pointer transition-shadow duration-300 ease-in-out hover:shadow-lg items-center rounded-md bg-gray-100 p-1 text-xs text-gray-800 border border-gray-300 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100 opacity-80 hover:opacity-100">
<span className="text-xs">{source.name}</span>
</a>
)
}

52
src/components/Common/Playground/MessageSourcePopup.tsx Normal file
View File

@@ -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<Props> = ({
source,
open,
setOpen
}) => {
return (
<Modal
open={open}
// mask={false}
zIndex={10000}
onCancel={() => setOpen(false)}
footer={null}
onOk={() => setOpen(false)}>
<div className="flex flex-col gap-2 mt-6">
<h4 className="bg-gray-100 text-md dark:bg-gray-800 inline-flex gap-2 items-center text-gray-800 dark:text-gray-100 font-semibold p-2">
{source?.type && (
<KnowledgeIcon type={source?.type} className="h-4 w-5" />
)}
{source?.name}
</h4>
{source?.type === "pdf" ? (
<>
<p className="text-gray-500 text-sm">{source?.pageContent}</p>
<div className="flex flex-wrap gap-3">
<span className="border border-gray-300 dark:border-gray-700 rounded-md p-1 text-gray-500 text-xs">
{`Page ${source?.metadata?.page}`}
</span>
<span className="border border-gray-300 dark:border-gray-700 rounded-md p-1 text-xs text-gray-500">
{`Line ${source?.metadata?.loc?.lines?.from} - ${source?.metadata?.loc?.lines?.to}`}
</span>
</div>
</>
) : (
<>
<p className="text-gray-500 text-sm">{source?.pageContent}</p>
</>
)}
</div>
</Modal>
)
}