agent tool in chat

web/app/components/base/chat/chat/answer/agent-content.tsx

@@ -7,17 +7,14 @@ import type {
 import { Markdown } from '@/app/components/base/markdown'
 import Thought from '@/app/components/base/chat/chat/thought'
 import ImageGallery from '@/app/components/base/image-gallery'
-import type { Emoji } from '@/app/components/tools/types'
 
 type AgentContentProps = {
   item: ChatItem
   responding?: boolean
-  allToolIcons?: Record<string, string | Emoji>
 }
 const AgentContent: FC<AgentContentProps> = ({
   item,
   responding,
-  allToolIcons,
 }) => {
   const {
     annotation,
@@ -45,7 +42,6 @@ const AgentContent: FC<AgentContentProps> = ({
           {!!thought.tool && (
             <Thought
               thought={thought}
-              allToolIcons={allToolIcons || {}}
               isFinished={!!thought.observation || !responding}
             />
           )}

web/app/components/base/chat/chat/answer/index.tsx

@@ -19,7 +19,6 @@ import { MessageFast } from '@/app/components/base/icons/src/vender/solid/commun
 import LoadingAnim from '@/app/components/base/chat/chat/loading-anim'
 import Citation from '@/app/components/base/chat/chat/citation'
 import { EditTitle } from '@/app/components/app/annotation/edit-annotation-modal/edit-item'
-import type { Emoji } from '@/app/components/tools/types'
 import type { AppData } from '@/models/share'
 import cn from '@/utils/classnames'
 
@@ -30,7 +29,6 @@ type AnswerProps = {
   config?: ChatConfig
   answerIcon?: ReactNode
   responding?: boolean
-  allToolIcons?: Record<string, string | Emoji>
   showPromptLog?: boolean
   chatAnswerContainerInner?: string
   hideProcessDetail?: boolean
@@ -43,7 +41,6 @@ const Answer: FC<AnswerProps> = ({
   config,
   answerIcon,
   responding,
-  allToolIcons,
   showPromptLog,
   chatAnswerContainerInner,
   hideProcessDetail,
@@ -171,7 +168,6 @@ const Answer: FC<AnswerProps> = ({
                 <AgentContent
                   item={item}
                   responding={responding}
-                  allToolIcons={allToolIcons}
                 />
               )
             }

web/app/components/base/chat/chat/answer/tool-detail.tsx

@@ -0,0 +1,71 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiArrowDownSLine,
+  RiArrowRightSLine,
+  RiHammerFill,
+  RiLoader2Line,
+} from '@remixicon/react'
+import type { ToolInfoInThought } from '../type'
+import cn from '@/utils/classnames'
+
+type ToolDetailProps = {
+  payload: ToolInfoInThought
+}
+const ToolDetail = ({
+  payload,
+}: ToolDetailProps) => {
+  const { t } = useTranslation()
+  const { name, label, input, isFinished, output } = payload
+  const toolLabel = name.startsWith('dataset_') ? t('dataset.knowledge') : label
+  const [expand, setExpand] = useState(false)
+
+  return (
+    <div
+      className={cn(
+        'rounded-xl',
+        !expand && 'border-l-[0.25px] border-components-panel-border bg-workflow-process-bg',
+        expand && 'border-[0.5px] border-components-panel-border-subtle bg-background-section-burn',
+      )}
+    >
+      <div
+        className={cn(
+          'flex items-center system-xs-medium text-text-tertiary px-2.5 py-2 cursor-pointer',
+          expand && 'pb-1.5',
+        )}
+        onClick={() => setExpand(!expand)}
+      >
+        {isFinished && <RiHammerFill className='mr-1 w-3.5 h-3.5' />}
+        {!isFinished && <RiLoader2Line className='mr-1 w-3.5 h-3.5 animate-spin' />}
+        {t(`tools.thought.${isFinished ? 'used' : 'using'}`)}
+        <div className='mx-1 text-text-secondary'>{toolLabel}</div>
+        {!expand && <RiArrowRightSLine className='w-4 h-4' />}
+        {expand && <RiArrowDownSLine className='ml-auto w-4 h-4' />}
+      </div>
+      {
+        expand && (
+          <>
+            <div className='mb-0.5 mx-1 rounded-[10px] bg-components-panel-on-panel-item-bg text-text-secondary'>
+              <div className='flex items-center justify-between px-2 pt-1 h-7 system-xs-semibold-uppercase'>
+                {t('tools.thought.requestTitle')}
+              </div>
+              <div className='pt-1 px-3 pb-2 code-xs-regular'>
+                {input}
+              </div>
+            </div>
+            <div className='mx-1 mb-1 rounded-[10px] bg-components-panel-on-panel-item-bg text-text-secondary'>
+              <div className='flex items-center justify-between px-2 pt-1 h-7 system-xs-semibold-uppercase'>
+                {t('tools.thought.responseTitle')}
+              </div>
+              <div className='pt-1 px-3 pb-2 code-xs-regular'>
+                {output}
+              </div>
+            </div>
+          </>
+        )
+      }
+    </div>
+  )
+}
+
+export default ToolDetail

web/app/components/base/chat/chat/context.tsx

@@ -10,7 +10,6 @@ export type ChatContextValue = Pick<ChatProps, 'config'
   | 'showPromptLog'
   | 'questionIcon'
   | 'answerIcon'
-  | 'allToolIcons'
   | 'onSend'
   | 'onAnnotationEdited'
   | 'onAnnotationAdded'
@@ -34,7 +33,6 @@ export const ChatContextProvider = ({
   showPromptLog,
   questionIcon,
   answerIcon,
-  allToolIcons,
   onSend,
   onAnnotationEdited,
   onAnnotationAdded,
@@ -49,7 +47,6 @@ export const ChatContextProvider = ({
       showPromptLog,
       questionIcon,
       answerIcon,
-      allToolIcons,
       onSend,
       onAnnotationEdited,
       onAnnotationAdded,

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

@@ -80,7 +80,6 @@ const Chat: FC<ChatProps> = ({
   showPromptLog,
   questionIcon,
   answerIcon,
-  allToolIcons,
   onAnnotationAdded,
   onAnnotationEdited,
   onAnnotationRemoved,
@@ -183,7 +182,6 @@ const Chat: FC<ChatProps> = ({
       showPromptLog={showPromptLog}
       questionIcon={questionIcon}
       answerIcon={answerIcon}
-      allToolIcons={allToolIcons}
       onSend={onSend}
       onAnnotationAdded={onAnnotationAdded}
       onAnnotationEdited={onAnnotationEdited}
@@ -214,7 +212,6 @@ const Chat: FC<ChatProps> = ({
                       config={config}
                       answerIcon={answerIcon}
                       responding={isLast && isResponding}
-                      allToolIcons={allToolIcons}
                       showPromptLog={showPromptLog}
                       chatAnswerContainerInner={chatAnswerContainerInner}
                       hideProcessDetail={hideProcessDetail}

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

@@ -2,12 +2,10 @@
 import type { FC } from 'react'
 import React from 'react'
 import type { ThoughtItem, ToolInfoInThought } from '../type'
-import Tool from '@/app/components/base/chat/chat/thought/tool'
-import type { Emoji } from '@/app/components/tools/types'
+import ToolDetail from '@/app/components/base/chat/chat/answer/tool-detail'
 
 export type IThoughtProps = {
   thought: ThoughtItem
-  allToolIcons: Record<string, string | Emoji>
   isFinished: boolean
 }
 
@@ -24,7 +22,6 @@ function getValue(value: string, isValueArray: boolean, index: number) {
 
 const Thought: FC<IThoughtProps> = ({
   thought,
-  allToolIcons,
   isFinished,
 }) => {
   const [toolNames, isValueArray]: [string[], boolean] = (() => {
@@ -50,10 +47,9 @@ const Thought: FC<IThoughtProps> = ({
   return (
     <div className='my-2 space-y-2'>
       {toolThoughtList.map((item: ToolInfoInThought, index) => (
-        <Tool
+        <ToolDetail
           key={index}
           payload={item}
-          allToolIcons={allToolIcons}
         />
       ))}
     </div>

web/i18n/en-US/tools.ts

@@ -119,8 +119,8 @@ const translation = {
   thought: {
     using: 'Using',
     used: 'Used',
-    requestTitle: 'Request to',
-    responseTitle: 'Response from',
+    requestTitle: 'Request',
+    responseTitle: 'Response',
   },
   setBuiltInTools: {
     info: 'Info',

web/i18n/zh-Hans/tools.ts

@@ -119,8 +119,8 @@ const translation = {
   thought: {
     using: '正在使用',
     used: '已使用',
-    requestTitle: '请求来自',
-    responseTitle: '响应来自',
+    requestTitle: '请求',
+    responseTitle: '响应',
   },
   setBuiltInTools: {
     info: '信息',

web/tailwind.config.js

@@ -91,6 +91,7 @@ module.exports = {
       backgroundImage: {
         'chatbot-bg': 'var(--color-chatbot-bg)',
         'chat-bubble-bg': 'var(--color-chat-bubble-bg)',
+        'workflow-process-bg': 'var(--color-workflow-process-bg)',
       },
     },
   },

web/themes/dark.css

@@ -601,4 +601,5 @@ html[data-theme="dark"] {
   --color-chatbot-bg: linear-gradient(180deg, rgba(34, 34, 37, 0.90) 0%, rgba(29, 29, 32, 0.90) 90.48%);
   --color-chat-bubble-bg: linear-gradient(180deg, rgba(200, 206, 218, 0.08) 0%, rgba(200, 206, 218, 0.02) 100%);
   --color-third-party-Github: #FFFFFF;
+  --color-workflow-process-bg: linear-gradient(90deg, rgba(24, 24, 27, 0.25) 0%, rgba(24, 24, 27, 0.04) 100%);
 }

web/themes/light.css

@@ -601,4 +601,5 @@ html[data-theme="light"] {
   --color-chatbot-bg: linear-gradient(180deg, rgba(249, 250, 251, 0.90) 0%, rgba(242, 244, 247, 0.90) 90.48%);
   --color-chat-bubble-bg: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.60) 100%);
   --color-third-party-Github: #1B1F24;
+  --color-workflow-process-bg: linear-gradient(90deg, rgba(200, 206, 218, 0.20) 0%, rgba(200, 206, 218, 0.04) 100%);
 }