Show tool i18n name on chat pannel (#4724)

web/app/components/app/chat/thought/index.tsx

@@ -1,10 +1,14 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
+import { useContext } from 'use-context-selector'
 import type { ThoughtItem, ToolInfoInThought } from '../type'
 import Tool from '@/app/components/app/chat/thought/tool'
 import type { Emoji } from '@/app/components/tools/types'
 
+import I18n from '@/context/i18n'
+import { getLanguage } from '@/i18n/language'
+
 export type IThoughtProps = {
   thought: ThoughtItem
   allToolIcons: Record<string, string | Emoji>
@@ -27,6 +31,9 @@ const Thought: FC<IThoughtProps> = ({
   allToolIcons,
   isFinished,
 }) => {
+  const { locale } = useContext(I18n)
+  const language = getLanguage(locale)
+
   const [toolNames, isValueArray]: [string[], boolean] = (() => {
     try {
       if (Array.isArray(JSON.parse(thought.tool)))
@@ -40,6 +47,7 @@ const Thought: FC<IThoughtProps> = ({
   const toolThoughtList = toolNames.map((toolName, index) => {
     return {
       name: toolName,
+      label: thought.tool_labels?.[toolName][language] ?? toolName,
       input: getValue(thought.tool_input, isValueArray, index),
       output: getValue(thought.observation, isValueArray, index),
       isFinished,

web/app/components/app/chat/thought/tool.tsx

@@ -49,8 +49,9 @@ const Tool: FC<Props> = ({
   allToolIcons = {},
 }) => {
   const { t } = useTranslation()
-  const { name, input, isFinished, output } = payload
+  const { name, label, input, isFinished, output } = payload
   const toolName = name.startsWith('dataset_') ? t('dataset.knowledge') : name
+  const toolLabel = name.startsWith('dataset_') ? t('dataset.knowledge') : label
   const [isShowDetail, setIsShowDetail] = useState(false)
   const icon = getIcon(name, allToolIcons) as any
   return (
@@ -74,9 +75,9 @@ const Tool: FC<Props> = ({
           </span>
           <span
             className='text-xs font-medium text-gray-700 truncate'
-            title={toolName}
+            title={toolLabel}
           >
-            {toolName}
+            {toolLabel}
           </span>
           <ChevronDown
             className={cn(isShowDetail && 'rotate-180', 'ml-1 w-3 h-3 text-gray-500 select-none cursor-pointer shrink-0')}

web/app/components/app/chat/type.ts

@@ -1,3 +1,4 @@
+import type { TypeWithI18N } from '../../header/account-setting/model-provider-page/declarations'
 import type { Annotation, MessageRating } from '@/models/log'
 import type { VisionFile } from '@/types/app'
 
@@ -19,6 +20,7 @@ export type DisplayScene = 'web' | 'console'
 
 export type ToolInfoInThought = {
   name: string
+  label: string
   input: string
   output: string
   isFinished: boolean
@@ -29,6 +31,7 @@ export type ThoughtItem = {
   tool: string // plugin or dataset. May has multi.
   thought: string
   tool_input: string
+  tool_labels?: { [key: string]: TypeWithI18N }
   message_id: string
   observation: string
   position: number