feat: llm node support tools

web/app/components/base/chat/chat/answer/tool-calls/index.tsx

@@ -1,5 +1,5 @@
-import type { ToolCallItem } from '../../type'
-import ToolCallsItem from './item'
+import type { ToolCallItem } from '@/types/workflow'
+import ToolCallItemComponent from '@/app/components/workflow/run/llm-log/tool-call-item'
 
 type ToolCallsProps = {
   toolCalls: ToolCallItem[]
@@ -8,9 +8,13 @@ const ToolCalls = ({
   toolCalls,
 }: ToolCallsProps) => {
   return (
-    <div>
+    <div className="my-1 space-y-1">
       {toolCalls.map((toolCall: ToolCallItem) => (
-        <ToolCallsItem key={toolCall.tool_call_id} payload={toolCall} />
+        <ToolCallItemComponent
+          key={toolCall.tool_call_id}
+          payload={toolCall}
+          className="bg-background-gradient-bg-fill-chat-bubble-bg-2 shadow-none"
+        />
       ))}
     </div>
   )

web/app/components/base/chat/chat/answer/tool-calls/item.tsx

@@ -1,75 +0,0 @@
-import type { ToolCallItem } from '../../type'
-import {
-  RiArrowDownSLine,
-} from '@remixicon/react'
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
-import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
-
-type ToolCallsItemProps = {
-  payload: ToolCallItem
-}
-const ToolCallsItem = ({
-  payload,
-}: ToolCallsItemProps) => {
-  const { t } = useTranslation()
-  const [expand, setExpand] = useState(false)
-  return (
-    <div
-      className="rounded-xl bg-background-gradient-bg-fill-chat-bubble-bg-1 px-2 pb-1 pt-2"
-    >
-      <div className="mb-1 flex cursor-pointer items-center hover:bg-background-gradient-bg-fill-chat-bubble-bg-2" onClick={() => setExpand(!expand)}>
-        <div className="mr-1 h-5 w-5 grow truncate" title={payload.tool_name}>{payload.tool_name}</div>
-        {
-          !!payload.tool_elapsed_time && (
-            <div className="system-xs-regular mr-1 shrink-0 text-text-tertiary">
-              {payload.tool_elapsed_time?.toFixed(3)}
-              s
-            </div>
-          )
-        }
-        <RiArrowDownSLine className="h-4 w-4 shrink-0" />
-      </div>
-      {
-        expand && (
-          <div className="relative px-2 pl-9">
-            <div className="absolute bottom-1 left-2 top-1 w-[1px] bg-divider-regular"></div>
-            {
-              payload.is_thought && (
-                <div className="body-sm-medium text-text-tertiary">{payload.tool_output}</div>
-              )
-            }
-            {
-              !payload.is_thought && (
-                <CodeEditor
-                  readOnly
-                  title={<div>{t('common.input', { ns: 'workflow' })}</div>}
-                  language={CodeLanguage.json}
-                  value={JSON.parse(payload.tool_arguments || '{}')}
-                  isJSONStringifyBeauty
-                />
-              )
-            }
-            {
-              !payload.is_thought && (
-                <CodeEditor
-                  readOnly
-                  className="mt-1"
-                  title={<div>{t('common.output', { ns: 'workflow' })}</div>}
-                  language={CodeLanguage.json}
-                  value={{
-                    answer: payload.tool_output,
-                  }}
-                  isJSONStringifyBeauty
-                />
-              )
-            }
-          </div>
-        )
-      }
-    </div>
-  )
-}
-
-export default ToolCallsItem

web/app/components/base/chat/chat/answer/workflow-process.tsx

@@ -45,7 +45,7 @@ const WorkflowProcessItem = ({
   return (
     <div
       className={cn(
-        '-mx-1 rounded-xl px-2.5',
+        'rounded-xl px-2.5',
         collapse ? 'border-l-[0.25px] border-components-panel-border py-[7px]' : 'border-[0.5px] border-components-panel-border-subtle px-1 pb-1 pt-[7px]',
         running && !collapse && 'bg-background-section-burn',
         succeeded && !collapse && 'bg-state-success-hover',

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

@@ -2,7 +2,7 @@ import type { FileEntity } from '@/app/components/base/file-uploader/types'
 import type { TypeWithI18N } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import type { InputVarType } from '@/app/components/workflow/types'
 import type { Annotation, MessageRating } from '@/models/log'
-import type { FileResponse } from '@/types/workflow'
+import type { FileResponse, ToolCallItem } from '@/types/workflow'
 
 export type MessageMore = {
   time: string
@@ -64,15 +64,9 @@ export type CitationItem = {
   word_count: number
 }
 
-export type ToolCallItem = {
-  is_thought?: boolean
-  tool_call_id?: string
-  tool_name?: string
-  tool_arguments?: string
-  tool_files?: string[]
-  tool_error?: string
-  tool_output?: string
-  tool_elapsed_time?: number
+export type IconObject = {
+  background: string
+  content: string
 }
 
 export type IChatItem = {