Improve tool message parsing and display in chat component

YaoApp · Feb 19, 2025 · c25a4be · c25a4be
1 parent 1859d66
commit c25a4be
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 14 deletions.
diff --git a/packages/xgen/components/chat/tool/index.tsx b/packages/xgen/components/chat/tool/index.tsx
@@ -23,31 +23,57 @@ interface IProps extends Component.PropsChatComponent {
 	text?: string
 	chat_id: string
 	pending?: boolean
+	props?: Record<string, any>
 	children?: React.ReactNode
 }
 
+const sizeHumanize = (size: number) => {
+	if (size < 1024) {
+		return `${size} B`
+	}
+	return `${(size / 1024).toFixed(2)} KB`
+}
+
 const Index = (props: IProps) => {
-	const { text, chat_id, pending, children } = props
+	const { text: text_, chat_id, pending, children, props: props_ } = props
 	const is_cn = getLocale() === 'zh-CN'
-	let content = ''
+	const text = props_?.text || text_
+	let content = getTextFromHtml(children) || text || (is_cn ? '工具调用请求' : 'Tool call request')
+	content = content
+		.replace(/%7B/g, '{')
+		.replace(/%7D/g, '}')
+		.replace(/%22/g, '"')
+		.replace(/&quot;/g, '"')
 
+	const size = sizeHumanize(content.length)
 	if (!pending) {
-		content = getTextFromHtml(children) || text || (is_cn ? '工具调用请求' : 'Tool call request')
-		try {
-			content = content.replace(/%7B/g, '{').replace(/%7D/g, '}')
-			const json = JSON.parse(content)
-			if (json.function) {
-				content = is_cn ? `工具调用请求: ${json.function}` : `Tool call request: ${json.function}`
-			}
-		} catch (error) {}
+		// "function":"new_feature"
+		// 使用正则表达式提取 function 的值,
+		const function_match = content.match(/\"function\"\s*:\s*\"(\w+)\"/)
+		if (function_match) {
+			content = is_cn ? `工具调用请求: ${function_match[1]}` : `Tool call request: ${function_match[1]}`
+		} else {
+			content = is_cn ? '工具调用请求' : 'Tool call request'
+		}
+
+		// try {
+
+		// 	const json = JSON.parse(content)
+		// 	if (json.function) {
+		// 		content = is_cn ? `工具调用请求: ${json.function}` : `Tool call request: ${json.function}`
+		// 	}
+		// } catch (error) {
+		// 	console.error(content)
+		// 	content = is_cn ? '工具调用请求' : 'Tool call request'
+		// }
 	}
 
 	return (
 		<div>
 			{pending ? (
 				<Loading
 					chat_id={chat_id}
-					placeholder={is_cn ? '工具调用请求' : 'Tool call request'}
+					placeholder={is_cn ? `工具调用请求 ${size}` : `Tool call request ${size}`}
 					icon='material-slow_motion_video'
 				/>
 			) : (

diff --git a/packages/xgen/layouts/components/Neo/hooks/useAIChat.ts b/packages/xgen/layouts/components/Neo/hooks/useAIChat.ts
@@ -219,9 +219,9 @@ export default ({ chat_id, upload_options = {} }: Args) => {
 			group.forEach((item) => {
 				if (item.type === 'think' || item.type === 'tool') {
 					let text = item.props?.['text'] || ''
-					// if (item.type == 'tool') {
-					// 	text = text.replace(/\{/g, '%7B')
-					// }
+					if (item.type == 'tool') {
+						text = text.replace(/\{/g, '%7B')
+					}
 					mergedText += '\n' + text
 				} else {
 					mergedText += '\n' + item.text || ''