2b4885ae2d
-优化了 Data、Scene 和 Team组件的逻辑，使用 currentIodMessage 替代复杂的条件判断- 改进了 IodRelevant 组件的动画和数据处理方式 - 调整了 Message 组件以支持数联网搜索功能 - 重构了 PlaygroundIodProvider，简化了上下文类型和数据处理 - 更新了数据库相关操作，使用新的 HistoryMessage 类型 - 新增了 IodDb 类来管理数联网连接配置
393 lines
17 KiB
TypeScript
393 lines
17 KiB
TypeScript
import Markdown from "../../Common/Markdown"
|
|
import React from "react"
|
|
import { Collapse, Image, Popover, Tag, Tooltip } from "antd"
|
|
import { WebSearch } from "./WebSearch"
|
|
import {
|
|
ArrowUpSquare,
|
|
CheckIcon,
|
|
ClipboardIcon,
|
|
InfoIcon,
|
|
MessageSquareShare,
|
|
Pen,
|
|
PlayIcon,
|
|
RotateCcw,
|
|
Square,
|
|
Star,
|
|
ThumbsDown,
|
|
ThumbsUp
|
|
} from "lucide-react"
|
|
import { EditMessageForm } from "./EditMessageForm"
|
|
import { useTranslation } from "react-i18next"
|
|
import { MessageSource } from "./MessageSource"
|
|
import { useTTS } from "@/hooks/useTTS"
|
|
import { tagColors } from "@/utils/color"
|
|
import { GenerationInfo } from "./GenerationInfo"
|
|
import { parseReasoning } from "@/libs/reasoning"
|
|
import { humanizeMilliseconds } from "@/utils/humanize-milliseconds"
|
|
import { AllIodRegistryEntry } from "@/types/iod.ts"
|
|
import { PiNetwork } from "react-icons/pi"
|
|
|
|
type Props = {
|
|
id?: string
|
|
message: string
|
|
message_type?: string
|
|
hideCopy?: boolean
|
|
botAvatar?: JSX.Element
|
|
userAvatar?: JSX.Element
|
|
isBot: boolean
|
|
name: string
|
|
images?: string[]
|
|
currentMessageIndex: number
|
|
totalMessages: number
|
|
onRengerate: () => void
|
|
onEditFormSubmit: (value: string, isSend: boolean) => void
|
|
isProcessing: boolean
|
|
webSearch?: {}
|
|
isSearchingInternet?: boolean
|
|
webSources?: any[]
|
|
iodSources?: AllIodRegistryEntry
|
|
hideEditAndRegenerate?: boolean
|
|
onSourceClick?: (source: any) => void
|
|
isTTSEnabled?: boolean
|
|
generationInfo?: any
|
|
isStreaming: boolean
|
|
reasoningTimeTaken?: number
|
|
iodSearch?: boolean
|
|
setCurrentMessageId: (id: string) => void
|
|
}
|
|
|
|
export const PlaygroundMessage: React.FC<Props> = (props) => {
|
|
const [isBtnPressed, setIsBtnPressed] = React.useState(false)
|
|
const [editMode, setEditMode] = React.useState(false)
|
|
|
|
const { t } = useTranslation("common")
|
|
const { cancel, isSpeaking, speak } = useTTS()
|
|
return (
|
|
<div className="group relative flex w-full flex-col items-end justify-center pb-2 md:px-4 text-gray-800 dark:text-gray-100">
|
|
{/* <div className="text-base md:max-w-2xl lg:max-w-xl xl:max-w-3xl flex lg:px-0 m-auto w-full"> */}
|
|
<div
|
|
className={`flex flex-row gap-1 md:gap-1 my-2 m-auto w-full ${props.isBot ? "" : "flex-row-reverse"}`}>
|
|
<div className="flex flex-col gap-2">
|
|
<span className="text-xs font-bold text-gray-800 dark:text-white"></span>
|
|
|
|
{props.isBot &&
|
|
props.isSearchingInternet &&
|
|
props.currentMessageIndex === props.totalMessages - 1 ? (
|
|
<WebSearch />
|
|
) : null}
|
|
<div>
|
|
{props?.message_type && (
|
|
<Tag color={tagColors[props?.message_type] || "default"}>
|
|
{t(`copilot.${props?.message_type}`)}
|
|
</Tag>
|
|
)}
|
|
</div>
|
|
<div className={`flex flex-grow flex-col`}>
|
|
{!editMode ? (
|
|
props.isBot ? (
|
|
<>
|
|
{parseReasoning(props.message).map((e, i) => {
|
|
if (e.type === "reasoning") {
|
|
return (
|
|
<Collapse
|
|
key={i}
|
|
defaultActiveKey={["reasoning"]}
|
|
className="border-none !mb-3"
|
|
items={[
|
|
{
|
|
key: "reasoning",
|
|
label:
|
|
props.isStreaming && e?.reasoning_running ? (
|
|
<div className="flex items-center gap-2">
|
|
<span className="italic">
|
|
{t("reasoning.thinking")}
|
|
</span>
|
|
</div>
|
|
) : (
|
|
t("reasoning.thought", {
|
|
time: humanizeMilliseconds(
|
|
props.reasoningTimeTaken
|
|
)
|
|
})
|
|
),
|
|
children: <Markdown message={e.content} />
|
|
}
|
|
]}
|
|
/>
|
|
)
|
|
}
|
|
|
|
return <Markdown key={i} message={e.content} />
|
|
})}
|
|
</>
|
|
) : (
|
|
// <p
|
|
// className={`bg-[#f1f3f4] font-normal text-[#000000d9] px-4 py-2.5 rounded-2xl prose-lg dark:prose-invert whitespace-pre-line prose-p:leading-relaxed prose-pre:p-0 dark:prose-dark ${
|
|
// props.message_type && "italic dark:text-gray-400"
|
|
// } flex flex-row-reverse`}>
|
|
// {props.message}
|
|
// </p>
|
|
<p
|
|
className={`bg-[#2563eb] font-normal rounded-tr-none
|
|
text-white px-4 py-2.5 rounded-2xl prose-lg dark:prose-invert whitespace-pre-line prose-p:leading-relaxed prose-pre:p-0 dark:prose-dark ${
|
|
props.message_type && "italic dark:text-gray-400"
|
|
} flex flex-row-reverse`}>
|
|
{props.message}
|
|
</p>
|
|
)
|
|
) : (
|
|
<EditMessageForm
|
|
value={props.message}
|
|
onSumbit={props.onEditFormSubmit}
|
|
onClose={() => setEditMode(false)}
|
|
isBot={props.isBot}
|
|
/>
|
|
)}
|
|
</div>
|
|
{/* source if available */}
|
|
{props.images &&
|
|
props.images.filter((img) => img.length > 0).length > 0 && (
|
|
<div>
|
|
{props.images
|
|
.filter((image) => image.length > 0)
|
|
.map((image, index) => (
|
|
<Image
|
|
key={index}
|
|
src={image}
|
|
alt="Uploaded Image"
|
|
width={180}
|
|
className="rounded-md relative"
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{props.isBot && props?.webSources && props?.webSources.length > 0 && (
|
|
<Collapse
|
|
className="mt-6"
|
|
ghost
|
|
// defaultActiveKey={['webSources']}
|
|
items={[
|
|
{
|
|
key: "webSources",
|
|
label: (
|
|
<div className="italic text-gray-500 dark:text-gray-400">
|
|
{t("webCitations")}
|
|
</div>
|
|
),
|
|
children: (
|
|
<div className="mb-3 flex flex-wrap gap-2">
|
|
{props?.webSources?.map((source, index) => (
|
|
<MessageSource
|
|
onSourceClick={props.onSourceClick}
|
|
key={index}
|
|
index={index}
|
|
source={source}
|
|
/>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
]}
|
|
/>
|
|
)}
|
|
{props.isBot &&
|
|
props?.iodSources &&
|
|
Object.values(props?.iodSources)
|
|
.map((item) => item.data)
|
|
.flat().length > 0 && (
|
|
<Collapse
|
|
className="mt-6"
|
|
ghost
|
|
// defaultActiveKey={['iod']}
|
|
items={[
|
|
{
|
|
key: "iod",
|
|
label: (
|
|
<div className="italic text-gray-500 dark:text-gray-400">
|
|
{t("iodCitations")}
|
|
</div>
|
|
),
|
|
children: (
|
|
<div className="mb-3 flex flex-wrap gap-2">
|
|
{Object.values(props?.iodSources)
|
|
.map((item) => item.data)
|
|
.flat()
|
|
?.map((source, index) => (
|
|
<MessageSource
|
|
onSourceClick={props.onSourceClick}
|
|
key={index}
|
|
index={index}
|
|
source={source}
|
|
/>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
]}
|
|
/>
|
|
)}
|
|
{!props.isProcessing && !editMode ? (
|
|
<div
|
|
className={`space-x-2 gap-2 flex ${
|
|
props.currentMessageIndex !== props.totalMessages - 1
|
|
? // there is few style issue so i am commenting this out for v1.4.5 release
|
|
// next release we will fix this
|
|
"invisible group-hover:visible"
|
|
: // ? "hidden group-hover:flex"
|
|
""
|
|
// : "flex"
|
|
}`}>
|
|
{props.isTTSEnabled && (
|
|
<Tooltip title={t("tts")}>
|
|
<button
|
|
aria-label={t("tts")}
|
|
onClick={() => {
|
|
if (isSpeaking) {
|
|
cancel()
|
|
} else {
|
|
speak({
|
|
utterance: props.message
|
|
})
|
|
}
|
|
}}
|
|
className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
|
|
{!isSpeaking ? (
|
|
<PlayIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
|
|
) : (
|
|
<Square className="w-3 h-3 text-red-400 group-hover:text-red-500" />
|
|
)}
|
|
</button>
|
|
</Tooltip>
|
|
)}
|
|
{props.isBot && (
|
|
<>
|
|
{/*数联网搜索*/}
|
|
{props.iodSearch && (
|
|
<Tooltip title="数联网信息">
|
|
<button
|
|
onClick={() => props.setCurrentMessageId(props.id)}
|
|
aria-label="数联网信息"
|
|
className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
|
|
<PiNetwork className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
|
|
</button>
|
|
</Tooltip>
|
|
)}
|
|
|
|
{!props.hideCopy && (
|
|
<Tooltip title={t("copyToClipboard")}>
|
|
<button
|
|
aria-label={t("copyToClipboard")}
|
|
onClick={() => {
|
|
navigator.clipboard.writeText(props.message)
|
|
setIsBtnPressed(true)
|
|
setTimeout(() => {
|
|
setIsBtnPressed(false)
|
|
}, 2000)
|
|
}}
|
|
className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
|
|
{!isBtnPressed ? (
|
|
<ClipboardIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
|
|
) : (
|
|
<CheckIcon className="w-3 h-3 text-green-400 group-hover:text-green-500" />
|
|
)}
|
|
</button>
|
|
</Tooltip>
|
|
)}
|
|
|
|
{props.generationInfo && (
|
|
<Popover
|
|
content={
|
|
<GenerationInfo generationInfo={props.generationInfo} />
|
|
}
|
|
title={t("generationInfo")}>
|
|
<button
|
|
aria-label={t("generationInfo")}
|
|
className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
|
|
<InfoIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
|
|
</button>
|
|
</Popover>
|
|
)}
|
|
|
|
{!props.hideEditAndRegenerate &&
|
|
props.currentMessageIndex === props.totalMessages - 1 && (
|
|
<Tooltip title={t("regenerate")}>
|
|
<button
|
|
aria-label={t("regenerate")}
|
|
onClick={props.onRengerate}
|
|
className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
|
|
<RotateCcw className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
|
|
</button>
|
|
</Tooltip>
|
|
)}
|
|
</>
|
|
)}
|
|
{!props.hideEditAndRegenerate && (
|
|
<Tooltip title={t("edit")}>
|
|
<button
|
|
onClick={() => setEditMode(true)}
|
|
aria-label={t("edit")}
|
|
className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
|
|
<Pen className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
|
|
</button>
|
|
</Tooltip>
|
|
)}
|
|
{
|
|
<Tooltip title="收藏">
|
|
<button
|
|
aria-label="收藏"
|
|
className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
|
|
<Star className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
|
|
</button>
|
|
</Tooltip>
|
|
}
|
|
{
|
|
<Tooltip title="发布语用">
|
|
<button
|
|
aria-label="发布语用"
|
|
className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
|
|
<ArrowUpSquare className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
|
|
</button>
|
|
</Tooltip>
|
|
}
|
|
{
|
|
<Tooltip title="发布对话">
|
|
<button
|
|
aria-label="发布对话"
|
|
className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
|
|
<MessageSquareShare className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
|
|
</button>
|
|
</Tooltip>
|
|
}
|
|
{
|
|
<Tooltip title="点赞">
|
|
<button
|
|
aria-label="点赞"
|
|
className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
|
|
<ThumbsUp className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
|
|
</button>
|
|
</Tooltip>
|
|
}
|
|
{
|
|
<Tooltip title="点踩">
|
|
<button
|
|
aria-label="点踩"
|
|
className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
|
|
<ThumbsDown className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
|
|
</button>
|
|
</Tooltip>
|
|
}
|
|
</div>
|
|
) : (
|
|
// add invisible div to prevent layout shift
|
|
<div className="invisible">
|
|
<div className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"></div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{/* </div> */}
|
|
</div>
|
|
)
|
|
}
|