84 lines
2.7 KiB
TypeScript
84 lines
2.7 KiB
TypeScript
import { useState } from "react"
|
|
import type React from "react"
|
|
import { KnowledgeIcon } from "@/components/Option/Knowledge/KnowledgeIcon"
|
|
|
|
type Props = {
|
|
index: number
|
|
source: {
|
|
name?: string
|
|
url?: string
|
|
mode?: string
|
|
type?: string
|
|
pageContent?: string
|
|
content?: string
|
|
doId?: string
|
|
description?: string
|
|
}
|
|
onSourceClick?: (source: any) => void
|
|
}
|
|
|
|
export const MessageSource: React.FC<Props> = ({
|
|
index,
|
|
source,
|
|
onSourceClick
|
|
}) => {
|
|
// Add state for tracking and content visibility
|
|
const [showContent, setShowContent] = useState(false)
|
|
|
|
if (source?.mode === "rag" || source?.mode === "chat") {
|
|
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-3 w-3" />
|
|
<span className="text-xs">{source.name}</span>
|
|
</button>
|
|
)
|
|
}
|
|
|
|
const onContextMenu = (e: React.MouseEvent) => {
|
|
e.preventDefault()
|
|
e.stopPropagation
|
|
setShowContent(true)
|
|
}
|
|
|
|
return (
|
|
<div className="block items-center gap-1 text-xs text-gray-800 dark:text-gray-100 mb-1">
|
|
<span className="text-xs font-medium"></span>{" "}
|
|
<a
|
|
href={source?.url}
|
|
target="_blank"
|
|
onContextMenu={onContextMenu}
|
|
className="inline-block 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">
|
|
{source.doId ? (
|
|
<>
|
|
<span className="text-xs">
|
|
[{index + 1}] doid: {source.doId}
|
|
</span>
|
|
<br />
|
|
<span className="text-xs">{source.name}</span>
|
|
{showContent && (
|
|
<div className="mt-2 p-2 border-t border-gray-200 dark:border-gray-700">
|
|
{source.content || source.pageContent || source.description}
|
|
</div>
|
|
)}
|
|
</>
|
|
) : (
|
|
<>
|
|
<span className="text-xs">
|
|
[{index + 1}] {source.name}
|
|
</span>
|
|
{showContent && (
|
|
<div className="mt-2 p-2 border-t border-gray-200 dark:border-gray-700">
|
|
{source.content || source.pageContent}
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</a>
|
|
</div>
|
|
)
|
|
}
|