feat(AiSearchV2): Supports the new streaming message format and the latest AI-powered search

Author: Merlin218

frontend/magic-web/src/opensource/components/base/MagicCode/index.tsx

@@ -49,7 +49,7 @@ const MagicCode = memo((props: MagicCodeProps) => {
 
 	const { appearance } = useThemeMode()
 
-	const { styles } = useStyles()
+	const { styles, cx } = useStyles()
 
 	const { fontSize } = useFontSize()
 
@@ -81,7 +81,7 @@ const MagicCode = memo((props: MagicCodeProps) => {
 			<MagicButton
 				hidden={!isHover || isStreaming}
 				type="text"
-				className={styles.copy}
+				className={cx(styles.copy, "magic-code-copy")}
 				onClick={setCopied}
 				size="small"
 				icon={

frontend/magic-web/src/opensource/hooks/useTyping/TypeWriter.ts

@@ -0,0 +1,90 @@
+// 打字机队列
+export class Typewriter {
+	private queue: string[] = []
+
+	public consuming = false
+
+	private timer: NodeJS.Timeout | undefined
+
+	constructor(private onConsume: (str: string) => void) {}
+
+	// 输出速度动态控制
+	dynamicSpeed() {
+		const speed = 2000 / this.queue.length
+		if (speed > 200) {
+			return 200
+		}
+		return speed
+	}
+
+	// 快速输出模式的速度控制
+	fastSpeed() {
+		const speed = 500 / this.queue.length
+		if (speed > 50) {
+			return 50
+		}
+		return speed < 10 ? 10 : speed // 确保至少有10ms的延迟
+	}
+
+	// 添加字符串到队列
+	add(str: string) {
+		if (!str) return
+		this.queue.push(...str.split(""))
+	}
+
+	// 消费
+	consume() {
+		if (this.queue.length > 0) {
+			const str = this.queue.shift()
+			if (str) {
+				this.onConsume(str)
+			}
+		}
+	}
+
+	// 消费下一个
+	next(fast = false) {
+		this.consume()
+		if (this.queue.length === 0) {
+			this.consuming = false
+			clearTimeout(this.timer)
+			return
+		}
+		// 根据队列中字符的数量来设置消耗每一帧的速度，用定时器消耗
+		this.timer = setTimeout(
+			() => {
+				this.consume()
+				if (this.consuming) {
+					this.next(fast)
+				}
+			},
+			fast ? this.fastSpeed() : this.dynamicSpeed(),
+		)
+	}
+
+	// 开始消费队列
+	start() {
+		this.consuming = true
+		this.next()
+	}
+
+	// 结束消费队列
+	done() {
+		this.consuming = true
+		clearTimeout(this.timer)
+		// 不再一次性消费，而是以更快的速度逐个消费
+		this.next(true)
+	}
+
+	// 暂停
+	stop() {
+		this.consuming = false
+		clearTimeout(this.timer)
+	}
+
+	// 恢复
+	resume() {
+		this.consuming = true
+		this.next()
+	}
+}

frontend/magic-web/src/opensource/hooks/useTyping/index.tsx

@@ -0,0 +1,37 @@
+import { useRef, useState } from "react"
+import { useMemoizedFn } from "ahooks"
+import { createStyles } from "antd-style"
+import { Typewriter } from "./TypeWriter"
+
+const useStyles = createStyles(({ css }) => {
+	return {
+		typing: css`
+			white-space: nowrap;
+			border-right: 2px solid transparent;
+			line-height: 10px;
+			animation: typing 3s steps(15, end), blink-caret 0.5s step-end infinite;
+			overflow: hidden;
+		`,
+	}
+})
+
+export function useTyping(init: string = "") {
+	const [content, setContent] = useState(init)
+
+	const { styles } = useStyles()
+
+	const writer = useRef(new Typewriter((str) => setContent((last) => last + str)))
+
+	const cursor = writer.current.consuming ? <span className={styles.typing} /> : null
+
+	return {
+		add: useMemoizedFn(writer.current.add.bind(writer.current)),
+		start: useMemoizedFn(writer.current.start.bind(writer.current)),
+		stop: useMemoizedFn(writer.current.stop.bind(writer.current)),
+		resume: useMemoizedFn(writer.current.resume.bind(writer.current)),
+		done: useMemoizedFn(writer.current.done.bind(writer.current)),
+		typing: writer.current.consuming,
+		cursor,
+		content,
+	}
+}

frontend/magic-web/src/opensource/pages/chatNew/components/ChatMessageList/components/MessageFactory/components/AiSearch/components/EventTable.tsx

@@ -75,6 +75,7 @@ const EventTable = memo(({ events }: { events: AggregateAISearchCardEvent[] }) =
 			columns={eventTableColumns}
 			pagination={false}
 			className={styles.eventTable}
+			scroll={{ x: 600 }}
 		/>
 	)
 })

frontend/magic-web/src/opensource/pages/chatNew/components/ChatMessageList/components/MessageFactory/components/AiSearchV2/components/DotSpreading.tsx

@@ -0,0 +1,58 @@
+import { createStyles } from "antd-style"
+import { memo } from "react"
+
+const useStyles = createStyles(({ css }) => {
+	return {
+		circleContaier: css`
+			position: relative;
+			width: 14px;
+			height: 14px;
+		`,
+		circle: css`
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+			width: 8px;
+			height: 8px;
+			border-radius: 50%;
+			background-color: #315cec;
+
+			@keyframes expand {
+				from {
+					opacity: 1;
+					transform: translate(-50%, -50%) scale(0);
+				}
+
+				to {
+					opacity: 0;
+					transform: translate(-50%, -50%) scale(3);
+				}
+			}
+
+			&::after {
+				content: "";
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+				width: 100%;
+				height: 100%;
+				border-radius: 50%;
+				background-color: #315cec90;
+				animation: expand 2s ease-out infinite;
+			}
+		`,
+	}
+})
+
+const DotSpreading = memo(({ style }: { style?: React.CSSProperties }) => {
+	const { styles } = useStyles()
+	return (
+		<div className={styles.circleContaier} style={style}>
+			<div className={styles.circle} />
+		</div>
+	)
+})
+
+export default DotSpreading

frontend/magic-web/src/opensource/pages/chatNew/components/ChatMessageList/components/MessageFactory/components/AiSearchV2/components/EventTable.tsx

@@ -0,0 +1,83 @@
+import type { AggregateAISearchCardEvent } from "@/types/chat/conversation_message"
+import { Table } from "antd"
+import { memo, useMemo } from "react"
+import { useTranslation } from "react-i18next"
+import { createStyles } from "antd-style"
+import MagicMarkdown from "@/opensource/pages/chatNew/components/ChatMessageList/components/MessageFactory/components/Markdown/EnhanceMarkdown"
+
+const useStyles = createStyles(({ css, token }) => ({
+	eventTable: css`
+		border: 1px solid ${token.colorBorder};
+		border-radius: 8px;
+		overflow: hidden;
+
+		th[class*="magic-table-cell"] {
+			background: ${token.magicColorScales.grey[0]} !important;
+		}
+
+		td[class*="magic-table-cell"]:not(:last-child),
+		th[class*="magic-table-cell"]:not(:last-child) {
+			border-right: 1px solid ${token.colorBorder};
+		}
+
+		th[class*="magic-table-cell"] {
+			color: ${token.colorTextSecondary};
+			font-size: 12px;
+			font-weight: 600;
+			line-height: 16px;
+		}
+
+		td[class*="magic-table-cell"] {
+			color: ${token.colorTextSecondary};
+			font-size: 12px;
+			font-weight: 400;
+			line-height: 16px;
+		}
+
+		tr:last-child {
+			td[class*="magic-table-cell"] {
+				border-bottom: none;
+			}
+		}
+	`,
+}))
+
+const EventTable = memo(({ events = [] }: { events?: AggregateAISearchCardEvent[] }) => {
+	const { t } = useTranslation("interface")
+	const { styles } = useStyles()
+
+	/** 事件表格列 */
+	const eventTableColumns = useMemo(() => {
+		return [
+			{
+				title: t("chat.aggregate_ai_search_card.eventName"),
+				dataIndex: "name",
+				minWidth: 100,
+				render: (_: any, record: AggregateAISearchCardEvent) => {
+					return <MagicMarkdown content={record.name} />
+				},
+			},
+			{
+				title: t("chat.aggregate_ai_search_card.eventTime"),
+				dataIndex: "time",
+				minWidth: 100,
+			},
+			{
+				title: t("chat.aggregate_ai_search_card.eventDescription"),
+				dataIndex: "description",
+			},
+		]
+	}, [t])
+
+	return (
+		<Table
+			dataSource={events}
+			columns={eventTableColumns}
+			pagination={false}
+			className={styles.eventTable}
+			scroll={{ x: 600 }}
+		/>
+	)
+})
+
+export default EventTable

frontend/magic-web/src/opensource/pages/chatNew/components/ChatMessageList/components/MessageFactory/components/AiSearchV2/components/MindMap.tsx

@@ -0,0 +1,43 @@
+import MagicMarkmap from "@/opensource/components/base/MagicMarkmap"
+import MagicMindMap from "@/opensource/components/base/MagicMindmap"
+import type { AggregateAISearchCardMindMapChildren } from "@/types/chat/conversation_message"
+import { Flex } from "antd"
+import { memo } from "react"
+import useStyles from "../styles"
+
+interface MindMapProps {
+	data?: AggregateAISearchCardMindMapChildren | string | null
+	pptData?: string | null
+	className?: string
+}
+
+/**
+ * 检查内容是否包含一级标题及以上
+ * @param content 内容
+ * @returns 是否包含一级标题及以上
+ */
+const checkMarkmapContent = (content: string) => {
+	// 只有包含一级标题及以上才认为true，使用正则匹配
+	return /^(#+)\s/.test(content)
+}
+
+const MindMap = memo(({ data, pptData, className }: MindMapProps) => {
+	const { styles, cx } = useStyles()
+
+	if (typeof data === "string") {
+		if (!data || !checkMarkmapContent(data)) return null
+
+		return (
+			<Flex vertical className={styles.mindmap}>
+				<MagicMarkmap data={data} pptData={pptData} />
+			</Flex>
+		)
+	}
+	return (
+		<Flex vertical className={cx(styles.mindmap, className)}>
+			<MagicMindMap data-testid="mindmap" data={data} />
+		</Flex>
+	)
+})
+
+export default MindMap