Merge branch 'feat/plugins' of https://github.com/langgenius/dify into feat/plugins

2025-01-08 15:54:21 +08:00 · 2025-01-08 15:54:21 +08:00 · 755685a89a
commit 755685a89a
parent 23b29b1d21 4b01ef2b48
16 changed files with 149 additions and 205 deletions
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-button.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-button.tsx
@ -1,20 +1,18 @@
 'use client'
 import type { FC } from 'react'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
+import {
+  RiEqualizer2Line,
+} from '@remixicon/react'
 import type { PopupProps } from './config-popup'
 import ConfigPopup from './config-popup'
 import cn from '@/utils/classnames'
-import Button from '@/app/components/base/button'
-import { Settings04 } from '@/app/components/base/icons/src/vender/line/general'
 import {
  PortalToFollowElem,
  PortalToFollowElemContent,
  PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'

-const I18N_PREFIX = 'app.tracing'
-
 type Props = {
  readOnly: boolean
  className?: string
@ -28,7 +26,6 @@ const ConfigBtn: FC<Props> = ({
  controlShowPopup,
  ...popupProps
 }) => {
-  const { t } = useTranslation()
  const [open, doSetOpen] = useState(false)
  const openRef = useRef(open)
  const setOpen = useCallback((v: boolean) => {
@ -50,21 +47,6 @@ const ConfigBtn: FC<Props> = ({
  if (popupProps.readOnly && !hasConfigured)
    return null

-  const triggerContent = hasConfigured
-    ? (
-      <div className={cn(className, 'p-1 rounded-md hover:bg-black/5 cursor-pointer')}>
-        <Settings04 className='w-4 h-4 text-gray-500' />
-      </div>
-    )
-    : (
-      <Button variant='primary'
-        className={cn(className, '!h-8 !px-3 select-none')}
-      >
-        <Settings04 className='mr-1 w-4 h-4' />
-        <span className='text-[13px]'>{t(`${I18N_PREFIX}.config`)}</span>
-      </Button>
-    )
-
  return (
    <PortalToFollowElem
      open={open}
@ -72,11 +54,13 @@ const ConfigBtn: FC<Props> = ({
      placement='bottom-end'
      offset={{
        mainAxis: 12,
-        crossAxis: hasConfigured ? 8 : 0,
+        crossAxis: hasConfigured ? 8 : 49,
      }}
    >
      <PortalToFollowElemTrigger onClick={handleTrigger}>
-        {triggerContent}
+        <div className={cn(className, 'p-1 rounded-md')}>
+          <RiEqualizer2Line className='w-4 h-4 text-text-tertiary' />
+        </div>
      </PortalToFollowElemTrigger>
      <PortalToFollowElemContent className='z-[11]'>
        <ConfigPopup {...popupProps} />
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
@ -1,6 +1,9 @@
 'use client'
 import type { FC } from 'react'
 import React, { useCallback, useEffect, useState } from 'react'
+import {
+  RiArrowDownDoubleLine,
+} from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { usePathname } from 'next/navigation'
 import { useBoolean } from 'ahooks'
@ -8,7 +11,6 @@ import type { LangFuseConfig, LangSmithConfig } from './type'
 import { TracingProvider } from './type'
 import TracingIcon from './tracing-icon'
 import ConfigButton from './config-button'
-import cn from '@/utils/classnames'
 import { LangfuseIcon, LangsmithIcon } from '@/app/components/base/icons/src/public/tracing'
 import Indicator from '@/app/components/header/indicator'
 import { fetchTracingConfig as doFetchTracingConfig, fetchTracingStatus, updateTracingStatus } from '@/service/apps'
@ -16,6 +18,8 @@ import type { TracingStatus } from '@/models/app'
 import Toast from '@/app/components/base/toast'
 import { useAppContext } from '@/context/app-context'
 import Loading from '@/app/components/base/loading'
+import Divider from '@/app/components/base/divider'
+import cn from '@/utils/classnames'

 const I18N_PREFIX = 'app.tracing'

@ -27,7 +31,7 @@ const Title = ({
  const { t } = useTranslation()

  return (
-    <div className={cn(className, 'flex items-center text-lg font-semibold text-gray-900')}>
+    <div className={cn('flex items-center system-xl-semibold text-text-primary', className)}>
      {t('common.appMenus.overview')}
    </div>
  )
@ -135,43 +139,68 @@ const Panel: FC = () => {
  return (
    <div className={cn('mb-3 flex justify-between items-center')}>
      <Title className='h-[41px]' />
-      <div className='flex items-center p-2 rounded-xl border-[0.5px] border-gray-200 shadow-xs cursor-pointer hover:bg-gray-100' onClick={showPopup}>
-        {!inUseTracingProvider
-          ? <>
-            <TracingIcon size='md' className='mr-2' />
-            <div className='leading-5 text-sm font-semibold text-gray-700'>{t(`${I18N_PREFIX}.title`)}</div>
-          </>
-          : <InUseProviderIcon className='ml-1 h-4' />}
-
-        {hasConfiguredTracing && (
-          <div className='ml-4 mr-1 flex items-center'>
-            <Indicator color={enabled ? 'green' : 'gray'} />
-            <div className='ml-1.5 text-xs font-semibold text-gray-500 uppercase'>
-              {t(`${I18N_PREFIX}.${enabled ? 'enabled' : 'disabled'}`)}
+      <div
+        className={cn(
+          'flex items-center p-2 rounded-xl bg-background-default-dodge border-t border-l-[0.5px] border-effects-highlight shadow-xs cursor-pointer hover:bg-background-default-lighter hover:border-effects-highlight-lightmode-off',
+          controlShowPopup && 'bg-background-default-lighter border-effects-highlight-lightmode-off',
+        )}
+        onClick={showPopup}
+      >
+        {!inUseTracingProvider && (
+          <>
+            <TracingIcon size='md' />
+            <div className='mx-2 system-sm-semibold text-text-secondary'>{t(`${I18N_PREFIX}.title`)}</div>
+            <div className='flex items-center' onClick={e => e.stopPropagation()}>
+              <ConfigButton
+                appId={appId}
+                readOnly={readOnly}
+                hasConfigured={false}
+                enabled={enabled}
+                onStatusChange={handleTracingEnabledChange}
+                chosenProvider={inUseTracingProvider}
+                onChooseProvider={handleChooseProvider}
+                langSmithConfig={langSmithConfig}
+                langFuseConfig={langFuseConfig}
+                onConfigUpdated={handleTracingConfigUpdated}
+                onConfigRemoved={handleTracingConfigRemoved}
+                controlShowPopup={controlShowPopup}
+              />
            </div>
-          </div>
+            <Divider type='vertical' className='h-3.5' />
+            <div className='p-1 rounded-md'>
+              <RiArrowDownDoubleLine className='w-4 h-4 text-text-tertiary' />
+            </div>
+          </>
        )}
-
        {hasConfiguredTracing && (
-          <div className='ml-2 w-px h-3.5 bg-gray-200'></div>
+          <>
+            <div className='ml-4 mr-1 flex items-center'>
+              <Indicator color={enabled ? 'green' : 'gray'} />
+              <div className='ml-1.5 system-xs-semibold-uppercase text-text-tertiary'>
+                {t(`${I18N_PREFIX}.${enabled ? 'enabled' : 'disabled'}`)}
+              </div>
+            </div>
+            <InUseProviderIcon className='ml-1 h-4' />
+            <Divider type='vertical' className='h-3.5' />
+            <div className='flex items-center' onClick={e => e.stopPropagation()}>
+              <ConfigButton
+                appId={appId}
+                readOnly={readOnly}
+                hasConfigured
+                className='ml-2'
+                enabled={enabled}
+                onStatusChange={handleTracingEnabledChange}
+                chosenProvider={inUseTracingProvider}
+                onChooseProvider={handleChooseProvider}
+                langSmithConfig={langSmithConfig}
+                langFuseConfig={langFuseConfig}
+                onConfigUpdated={handleTracingConfigUpdated}
+                onConfigRemoved={handleTracingConfigRemoved}
+                controlShowPopup={controlShowPopup}
+              />
+            </div>
+          </>
        )}
-        <div className='flex items-center' onClick={e => e.stopPropagation()}>
-          <ConfigButton
-            appId={appId}
-            readOnly={readOnly}
-            hasConfigured
-            className='ml-2'
-            enabled={enabled}
-            onStatusChange={handleTracingEnabledChange}
-            chosenProvider={inUseTracingProvider}
-            onChooseProvider={handleChooseProvider}
-            langSmithConfig={langSmithConfig}
-            langFuseConfig={langFuseConfig}
-            onConfigUpdated={handleTracingConfigUpdated}
-            onConfigRemoved={handleTracingConfigRemoved}
-            controlShowPopup={controlShowPopup}
-          />
-        </div>
      </div>
    </div>
  )
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/toggle-fold-btn.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/toggle-fold-btn.tsx
@ -1,45 +0,0 @@
-'use client'
-import { ChevronDoubleDownIcon } from '@heroicons/react/20/solid'
-import type { FC } from 'react'
-import { useTranslation } from 'react-i18next'
-import React, { useCallback } from 'react'
-import Tooltip from '@/app/components/base/tooltip'
-
-const I18N_PREFIX = 'app.tracing'
-
-type Props = {
-  isFold: boolean
-  onFoldChange: (isFold: boolean) => void
-}
-
-const ToggleFoldBtn: FC<Props> = ({
-  isFold,
-  onFoldChange,
-}) => {
-  const { t } = useTranslation()
-
-  const handleFoldChange = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
-    e.stopPropagation()
-    onFoldChange(!isFold)
-  }, [isFold, onFoldChange])
-  return (
-    // text-[0px] to hide spacing between tooltip elements
-    <div className='shrink-0 cursor-pointer text-[0px]' onClick={handleFoldChange}>
-      <Tooltip
-        popupContent={t(`${I18N_PREFIX}.${isFold ? 'expand' : 'collapse'}`)}
-      >
-        {isFold && (
-          <div className='p-1 rounded-md text-gray-500 hover:text-gray-800 hover:bg-black/5'>
-            <ChevronDoubleDownIcon className='w-4 h-4' />
-          </div>
-        )}
-        {!isFold && (
-          <div className='p-2 rounded-lg text-gray-500 border-[0.5px] border-gray-200 hover:text-gray-800 hover:bg-black/5'>
-            <ChevronDoubleDownIcon className='w-4 h-4 transform rotate-180' />
-          </div>
-        )}
-      </Tooltip>
-    </div>
-  )
-}
-export default React.memo(ToggleFoldBtn)
--- a/web/app/components/base/chat/chat/answer/workflow-process.tsx
+++ b/web/app/components/base/chat/chat/answer/workflow-process.tsx
@ -1,5 +1,4 @@
 import {
-  useCallback,
  useEffect,
  useMemo,
  useState,
@ -15,9 +14,8 @@ import TracingPanel from '@/app/components/workflow/run/tracing-panel'
 import cn from '@/utils/classnames'
 import { CheckCircle } from '@/app/components/base/icons/src/vender/solid/general'
 import { WorkflowRunningStatus } from '@/app/components/workflow/types'
-import { useStore as useAppStore } from '@/app/components/app/store'

-interface WorkflowProcessProps {
+type WorkflowProcessProps = {
  data: WorkflowProcess
  item?: ChatItem
  expand?: boolean
@ -26,7 +24,6 @@ interface WorkflowProcessProps {
 }
 const WorkflowProcessItem = ({
  data,
-  item,
  expand = false,
  hideInfo = false,
  hideProcessDetail = false,
@ -54,22 +51,6 @@ const WorkflowProcessItem = ({
    setCollapse(!expand)
  }, [expand])

-  const setCurrentLogItem = useAppStore(s => s.setCurrentLogItem)
-  const setShowMessageLogModal = useAppStore(s => s.setShowMessageLogModal)
-  const setCurrentLogModalActiveTab = useAppStore(s => s.setCurrentLogModalActiveTab)
-
-  const showIterationDetail = useCallback(() => {
-    setCurrentLogItem(item)
-    setCurrentLogModalActiveTab('TRACING')
-    setShowMessageLogModal(true)
-  }, [item, setCurrentLogItem, setCurrentLogModalActiveTab, setShowMessageLogModal])
-
-  const showRetryDetail = useCallback(() => {
-    setCurrentLogItem(item)
-    setCurrentLogModalActiveTab('TRACING')
-    setShowMessageLogModal(true)
-  }, [item, setCurrentLogItem, setCurrentLogModalActiveTab, setShowMessageLogModal])
-
  return (
    <div
      className={cn(
@ -110,8 +91,6 @@ const WorkflowProcessItem = ({
            {
              <TracingPanel
                list={data.tracing}
-                onShowIterationDetail={showIterationDetail}
-                onShowRetryDetail={showRetryDetail}
                hideNodeInfo={hideInfo}
                hideNodeProcessDetail={hideProcessDetail}
              />
--- a/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx
@ -12,6 +12,7 @@ import { useInstallPackageFromMarketPlace, useUpdatePackageFromMarketPlace } fro
 import checkTaskStatus from '../../base/check-task-status'
 import useCheckInstalled from '@/app/components/plugins/install-plugin/hooks/use-check-installed'
 import Version from '../../base/version'
+import { usePluginTaskList } from '@/service/use-plugins'

 const i18nPrefix = 'plugin.installModal'

@ -50,6 +51,7 @@ const Installed: FC<Props> = ({
    check,
    stop,
  } = checkTaskStatus()
+  const { handleRefetch } = usePluginTaskList()

  useEffect(() => {
    if (hasInstalled && uniqueIdentifier === installedInfoPayload.uniqueIdentifier)
@ -93,6 +95,9 @@ const Installed: FC<Props> = ({
        onInstalled()
        return
      }
+
+      handleRefetch()
+
      const { status, error } = await check({
        taskId,
        pluginUniqueIdentifier: uniqueIdentifier,
--- a/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
+++ b/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
@ -17,8 +17,10 @@ import type { ToolWithProvider } from '../../../types'
 import { CollectionType } from '@/app/components/tools/types'
 import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
 import { useStrategyInfo } from '../../agent/use-config'
+import { SwitchPluginVersion } from './switch-plugin-version'
 import PluginList from '@/app/components/workflow/block-selector/market-place-plugin/list'
 import { useMarketplacePlugins } from '@/app/components/plugins/marketplace/hooks'
+import { ToolTipContent } from '@/app/components/base/tooltip/content'

 const NotFoundWarn = (props: {
  title: ReactNode,
@ -102,14 +104,15 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
    value?.agent_strategy_name,
  )

-  // plugin not found and is not found in marketplace
-  const showPluginNotInstalledWarn = !strategyStatus?.isExistInPlugin && strategyStatus?.plugin?.source === 'external'
+  const showPluginNotInstalledWarn = strategyStatus?.plugin?.source === 'external'
    && !strategyStatus.plugin.installed

-  // strategy not found
-  const showUnsupportedStrategy = !strategyStatus?.isExistInPlugin
+  const showUnsupportedStrategy = strategyStatus?.plugin.source === 'external'
+    && !strategyStatus?.isExistInPlugin
+
+  const showSwitchVersion = !strategyStatus?.isExistInPlugin
+    && strategyStatus?.plugin.source === 'marketplace' && strategyStatus.plugin.installed

-  // plugin not found and is founded in marketplace
  const showInstallButton = !strategyStatus?.isExistInPlugin
    && strategyStatus?.plugin.source === 'marketplace' && !strategyStatus.plugin.installed

@ -174,6 +177,16 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
              />
              : <RiArrowDownSLine className='size-4 text-text-tertiary' />
          }
+          {showSwitchVersion && <SwitchPluginVersion
+            uniqueIdentifier={'langgenius/openai:12'}
+            tooltip={<ToolTipContent
+              title={t('workflow.nodes.agent.unsupportedStrategy')}>
+              {t('workflow.nodes.agent.strategyNotFoundDescAndSwitchVersion')}
+            </ToolTipContent>}
+            onChange={() => {
+              // TODO: refresh all strategies
+            }}
+          />}
        </div>}
      </div>
    </PortalToFollowElemTrigger>
--- a/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx
+++ b/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx
@ -23,7 +23,10 @@ export const SwitchPluginVersion: FC<SwitchPluginVersionProps> = (props) => {
  const [pluginId] = uniqueIdentifier.split(':')
  const [isShow, setIsShow] = useState(false)
  const [isShowUpdateModal, { setTrue: showUpdateModal, setFalse: hideUpdateModal }] = useBoolean(false)
-  const [targetVersion, setTargetVersion] = useState<string>()
+  const [target, setTarget] = useState<{
+    version: string,
+    pluginUniqueIden: string;
+  }>()
  const pluginDetails = useCheckInstalled({
    pluginIds: [pluginId],
    enabled: true,
@ -33,13 +36,8 @@ export const SwitchPluginVersion: FC<SwitchPluginVersionProps> = (props) => {
  const handleUpdatedFromMarketplace = useCallback(() => {
    hideUpdateModal()
    pluginDetails.refetch()
-    onChange?.(targetVersion!)
-  }, [hideUpdateModal, onChange, pluginDetails, targetVersion])
-
-  const targetUniqueIdentifier = (() => {
-    if (!targetVersion || !pluginDetail) return uniqueIdentifier
-    return uniqueIdentifier.replaceAll(pluginDetail.version, targetVersion)
-  })()
+    onChange?.(target!.version)
+  }, [hideUpdateModal, onChange, pluginDetails, target])
  return <Tooltip popupContent={!isShow && !isShowUpdateModal && tooltip} triggerMethod='hover'>
    <div className={cn('w-fit', className)}>
      {isShowUpdateModal && pluginDetail && <UpdateFromMarketplace
@ -49,8 +47,8 @@ export const SwitchPluginVersion: FC<SwitchPluginVersionProps> = (props) => {
            payload: pluginDetail.declaration,
          },
          targetPackageInfo: {
-            id: targetUniqueIdentifier,
-            version: targetVersion!,
+            id: target!.pluginUniqueIden,
+            version: target!.version,
          },
        }}
        onCancel={hideUpdateModal}
@ -62,7 +60,10 @@ export const SwitchPluginVersion: FC<SwitchPluginVersionProps> = (props) => {
        pluginID={pluginId}
        currentVersion={pluginDetail.version}
        onSelect={(state) => {
-          setTargetVersion(state.version)
+          setTarget({
+            pluginUniqueIden: state.unique_identifier,
+            version: state.version,
+          })
          showUpdateModal()
        }}
        trigger={
--- a/web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx
@ -28,7 +28,7 @@ import {
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { getLastAnswer } from '@/app/components/base/chat/utils'

-interface ChatWrapperProps {
+type ChatWrapperProps = {
  showConversationVariableModal: boolean
  onConversationModalHide: () => void
  showInputsFieldsPanel: boolean
--- a/web/app/components/workflow/panel/debug-and-preview/hooks.ts
+++ b/web/app/components/workflow/panel/debug-and-preview/hooks.ts
@ -27,10 +27,9 @@ import {
  getProcessedFilesFromResponse,
 } from '@/app/components/base/file-uploader/utils'
 import type { FileEntity } from '@/app/components/base/file-uploader/types'
-import type { NodeTracing } from '@/types/workflow'

 type GetAbortController = (abortController: AbortController) => void
-interface SendCallback {
+type SendCallback = {
  onGetSuggestedQuestions?: (responseItemId: string, getAbortController: GetAbortController) => Promise<any>
 }
 export const useChat = (
@ -276,6 +275,7 @@ export const useChat = (
              )
              setSuggestQuestions(data)
            }
+            // eslint-disable-next-line unused-imports/no-unused-vars
            catch (error) {
              setSuggestQuestions([])
            }
@ -331,8 +331,7 @@ export const useChat = (
          responseItem.workflowProcess!.tracing!.push({
            ...data,
            status: NodeRunningStatus.Running,
-            details: [],
-          } as any)
+          })
          handleUpdateChatList(produce(chatListRef.current, (draft) => {
            const currentIndex = draft.findIndex(item => item.id === responseItem.id)
            draft[currentIndex] = {
@ -341,30 +340,21 @@ export const useChat = (
            }
          }))
        },
-        onIterationNext: ({ data }) => {
-          const tracing = responseItem.workflowProcess!.tracing!
-          const iterations = tracing.find(item => item.node_id === data.node_id
-            && (item.execution_metadata?.parallel_id === data.execution_metadata?.parallel_id || item.parallel_id === data.execution_metadata?.parallel_id))!
-          iterations.details!.push([])
-
-          handleUpdateChatList(produce(chatListRef.current, (draft) => {
-            const currentIndex = draft.length - 1
-            draft[currentIndex] = responseItem
-          }))
-        },
        onIterationFinish: ({ data }) => {
-          const tracing = responseItem.workflowProcess!.tracing!
-          const iterationsIndex = tracing.findIndex(item => item.node_id === data.node_id
-            && (item.execution_metadata?.parallel_id === data.execution_metadata?.parallel_id || item.parallel_id === data.execution_metadata?.parallel_id))!
-          tracing[iterationsIndex] = {
-            ...tracing[iterationsIndex],
-            ...data,
-            status: NodeRunningStatus.Succeeded,
-          } as any
-          handleUpdateChatList(produce(chatListRef.current, (draft) => {
-            const currentIndex = draft.length - 1
-            draft[currentIndex] = responseItem
-          }))
+          const currentTracingIndex = responseItem.workflowProcess!.tracing!.findIndex(item => item.id === data.id)
+          if (currentTracingIndex > -1) {
+            responseItem.workflowProcess!.tracing[currentTracingIndex] = {
+              ...responseItem.workflowProcess!.tracing[currentTracingIndex],
+              ...data,
+            }
+            handleUpdateChatList(produce(chatListRef.current, (draft) => {
+              const currentIndex = draft.findIndex(item => item.id === responseItem.id)
+              draft[currentIndex] = {
+                ...draft[currentIndex],
+                ...responseItem,
+              }
+            }))
+          }
        },
        onNodeStarted: ({ data }) => {
          if (data.iteration_id)
@ -386,16 +376,7 @@ export const useChat = (
          if (data.iteration_id)
            return

-          const currentIndex = responseItem.workflowProcess!.tracing!.findIndex((item) => {
-            if (!item.execution_metadata?.parallel_id)
-              return item.node_id === data.node_id
-            return item.node_id === data.node_id && (item.execution_metadata?.parallel_id === data.execution_metadata?.parallel_id || item.parallel_id === data.execution_metadata?.parallel_id)
-          })
-          if (responseItem.workflowProcess!.tracing[currentIndex].retryDetail)
-            responseItem.workflowProcess!.tracing[currentIndex].retryDetail?.push(data as NodeTracing)
-          else
-            responseItem.workflowProcess!.tracing[currentIndex].retryDetail = [data as NodeTracing]
-
+          responseItem.workflowProcess!.tracing!.push(data)
          handleUpdateChatList(produce(chatListRef.current, (draft) => {
            const currentIndex = draft.findIndex(item => item.id === responseItem.id)
            draft[currentIndex] = {
@ -408,27 +389,20 @@ export const useChat = (
          if (data.iteration_id)
            return

-          const currentIndex = responseItem.workflowProcess!.tracing!.findIndex((item) => {
-            if (!item.execution_metadata?.parallel_id)
-              return item.node_id === data.node_id
-            return item.node_id === data.node_id && (item.execution_metadata?.parallel_id === data.execution_metadata?.parallel_id || item.parallel_id === data.execution_metadata?.parallel_id)
-          })
-          responseItem.workflowProcess!.tracing[currentIndex] = {
-            ...(responseItem.workflowProcess!.tracing[currentIndex]?.extras
-              ? { extras: responseItem.workflowProcess!.tracing[currentIndex].extras }
-              : {}),
-            ...(responseItem.workflowProcess!.tracing[currentIndex]?.retryDetail
-              ? { retryDetail: responseItem.workflowProcess!.tracing[currentIndex].retryDetail }
-              : {}),
-            ...data,
-          } as any
-          handleUpdateChatList(produce(chatListRef.current, (draft) => {
-            const currentIndex = draft.findIndex(item => item.id === responseItem.id)
-            draft[currentIndex] = {
-              ...draft[currentIndex],
-              ...responseItem,
+          const currentTracingIndex = responseItem.workflowProcess!.tracing!.findIndex(item => item.id === data.id)
+          if (currentTracingIndex > -1) {
+            responseItem.workflowProcess!.tracing[currentTracingIndex] = {
+              ...responseItem.workflowProcess!.tracing[currentTracingIndex],
+              ...data,
            }
-          }))
+            handleUpdateChatList(produce(chatListRef.current, (draft) => {
+              const currentIndex = draft.findIndex(item => item.id === responseItem.id)
+              draft[currentIndex] = {
+                ...draft[currentIndex],
+                ...responseItem,
+              }
+            }))
+          }
        },
      },
    )
--- a/web/app/components/workflow/panel/debug-and-preview/index.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/index.tsx
@ -22,7 +22,7 @@ import Tooltip from '@/app/components/base/tooltip'
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
 import { useStore } from '@/app/components/workflow/store'

-export interface ChatWrapperRefType {
+export type ChatWrapperRefType = {
  handleRestart: () => void
 }
 const DebugAndPreview = () => {
--- a/web/app/components/workflow/panel/workflow-preview.tsx
+++ b/web/app/components/workflow/panel/workflow-preview.tsx
@ -24,7 +24,6 @@ import Toast from '../../base/toast'
 import InputsPanel from './inputs-panel'
 import cn from '@/utils/classnames'
 import Loading from '@/app/components/base/loading'
-import formatNodeList from '@/app/components/workflow/run/utils/format-log'

 const WorkflowPreview = () => {
  const { t } = useTranslation()
@ -161,7 +160,7 @@ const WorkflowPreview = () => {
          {currentTab === 'TRACING' && (
            <TracingPanel
              className='bg-background-section-burn'
-              list={formatNodeList(workflowRunningData?.tracing || [], t)}
+              list={workflowRunningData?.tracing || []}
            />
          )}
          {currentTab === 'TRACING' && !workflowRunningData?.tracing?.length && (
--- a/web/app/components/workflow/run/index.tsx
+++ b/web/app/components/workflow/run/index.tsx
@ -13,7 +13,6 @@ import { fetchRunDetail, fetchTracingList } from '@/service/log'
 import type { NodeTracing } from '@/types/workflow'
 import type { WorkflowRunDetailResponse } from '@/models/log'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import formatNodeList from './utils/format-log'
 export type RunProps = {
  hideResult?: boolean
  activeTab?: 'RESULT' | 'DETAIL' | 'TRACING'
@ -61,7 +60,7 @@ const RunPanel: FC<RunProps> = ({ hideResult, activeTab = 'RESULT', runID, getRe
      const { data: nodeList } = await fetchTracingList({
        url: `/apps/${appID}/workflow-runs/${runID}/node-executions`,
      })
-      setList(formatNodeList(nodeList, t))
+      setList(nodeList)
    }
    catch (err) {
      notify({
--- a/web/app/components/workflow/run/tracing-panel.tsx
+++ b/web/app/components/workflow/run/tracing-panel.tsx
@ -11,10 +11,12 @@ import {
  RiArrowDownSLine,
  RiMenu4Line,
 } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
 import { useLogs } from './hooks'
 import NodePanel from './node'
 import SpecialResultPanel from './special-result-panel'
 import type { NodeTracing } from '@/types/workflow'
+import formatNodeList from '@/app/components/workflow/run/utils/format-log'

 type TracingPanelProps = {
  list: NodeTracing[]
@ -29,7 +31,8 @@ const TracingPanel: FC<TracingPanelProps> = ({
  hideNodeInfo = false,
  hideNodeProcessDetail = false,
 }) => {
-  const treeNodes = list
+  const { t } = useTranslation()
+  const treeNodes = formatNodeList(list, t)
  const [collapsedNodes, setCollapsedNodes] = useState<Set<string>>(new Set())
  const [hoveredParallel, setHoveredParallel] = useState<string | null>(null)

--- a/web/i18n/en-US/workflow.ts
+++ b/web/i18n/en-US/workflow.ts
@ -740,6 +740,7 @@ const translation = {
      unsupportedStrategy: 'Unsupported strategy',
      pluginNotFoundDesc: 'This plugin is installed from GitHub. Please go to Plugins to reinstall',
      strategyNotFoundDesc: 'The installed plugin version does not provide this strategy.',
+      strategyNotFoundDescAndSwitchVersion: 'The installed plugin version does not provide this strategy. Click to switch version.',
      modelSelectorTooltips: {
        deprecated: 'This model is deprecated',
      },
--- a/web/i18n/zh-Hans/workflow.ts
+++ b/web/i18n/zh-Hans/workflow.ts
@ -740,6 +740,7 @@ const translation = {
      unsupportedStrategy: '不支持的策略',
      strategyNotFoundDesc: '安装的插件版本不提供此策略。',
      pluginNotFoundDesc: '此插件安装自 GitHub。请转到插件重新安装。',
+      strategyNotFoundDescAndSwitchVersion: '安装的插件版本不提供此策略。点击切换版本。',
      modelSelectorTooltips: {
        deprecated: '此模型已弃用',
      },
--- a/web/types/workflow.ts
+++ b/web/types/workflow.ts
@ -23,6 +23,7 @@ export type NodeTracing = {
  index: number
  predecessor_node_id: string
  node_id: string
+  iteration_id?: string
  node_type: BlockEnum
  title: string
  inputs: any