merge main

2026-05-05 18:08:07 +08:00 · 2024-12-06 16:56:42 +08:00
parent 3bc9ddb006 a8d32f9964
commit 69daf4a027
51 changed files with 763 additions and 271 deletions
--- a/web/app/components/base/file-uploader/file-list-in-log.tsx
+++ b/web/app/components/base/file-uploader/file-list-in-log.tsx
@ -1,4 +1,5 @@
-import React, { useState } from 'react'
+import React, { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { RiArrowRightSLine } from '@remixicon/react'
 import FileImageRender from './file-image-render'
 import FileTypeIcon from './file-type-icon'
@ -12,23 +13,36 @@ import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 import cn from '@/utils/classnames'

 type Props = {
-  fileList: FileEntity[]
+  fileList: {
+    varName: string
+    list: FileEntity[]
+  }[]
+  isExpanded?: boolean
+  noBorder?: boolean
+  noPadding?: boolean
 }

-const FileListInLog = ({ fileList }: Props) => {
-  const [expanded, setExpanded] = useState(false)
+const FileListInLog = ({ fileList, isExpanded = false, noBorder = false, noPadding = false }: Props) => {
+  const { t } = useTranslation()
+  const [expanded, setExpanded] = useState(isExpanded)
+  const fullList = useMemo(() => {
+    return fileList.reduce((acc: FileEntity[], { list }) => {
+      return [...acc, ...list]
+    }, [])
+  }, [fileList])

  if (!fileList.length)
    return null
+
  return (
-    <div className={cn('border-t border-divider-subtle px-3 py-2', expanded && 'py-3')}>
+    <div className={cn('px-3 py-2', expanded && 'py-3', !noBorder && 'border-t border-divider-subtle', noPadding && '!p-0')}>
      <div className='flex justify-between gap-1'>
        {expanded && (
-          <div></div>
+          <div className='grow py-1 text-text-secondary system-xs-semibold-uppercase cursor-pointer' onClick={() => setExpanded(!expanded)}>{t('appLog.runDetail.fileListLabel')}</div>
        )}
        {!expanded && (
-          <div className='flex'>
-            {fileList.map((file) => {
+          <div className='flex gap-1'>
+            {fullList.map((file) => {
              const { id, name, type, supportFileType, base64Url, url } = file
              const isImageFile = supportFileType === SupportUploadFileTypes.image
              return (
@ -63,19 +77,25 @@ const FileListInLog = ({ fileList }: Props) => {
          </div>
        )}
        <div className='flex items-center gap-1 cursor-pointer' onClick={() => setExpanded(!expanded)}>
-          {!expanded && <div className='text-text-tertiary system-xs-medium-uppercase'>DETAIL</div>}
+          {!expanded && <div className='text-text-tertiary system-xs-medium-uppercase'>{t('appLog.runDetail.fileListDetail')}</div>}
          <RiArrowRightSLine className={cn('w-4 h-4 text-text-tertiary', expanded && 'rotate-90')} />
        </div>
      </div>
      {expanded && (
-        <div className='flex flex-col gap-1'>
-          {fileList.map(file => (
-            <FileItem
-              key={file.id}
-              file={file}
-              showDeleteAction={false}
-              showDownloadAction
-            />
+        <div className='flex flex-col gap-3'>
+          {fileList.map(item => (
+            <div key={item.varName} className='flex flex-col gap-1 system-xs-regular'>
+              <div className='py-1 text-text-tertiary '>{item.varName}</div>
+              {item.list.map(file => (
+                <FileItem
+                  key={file.id}
+                  file={file}
+                  showDeleteAction={false}
+                  showDownloadAction
+                  canPreview
+                />
+              ))}
+            </div>
          ))}
        </div>
      )}
--- a/web/app/components/base/file-uploader/file-uploader-in-attachment/file-item.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-attachment/file-item.tsx
@ -1,12 +1,15 @@
 import {
  memo,
+  useState,
 } from 'react'
 import {
  RiDeleteBinLine,
  RiDownloadLine,
+  RiEyeLine,
 } from '@remixicon/react'
 import FileTypeIcon from '../file-type-icon'
 import {
+  downloadFile,
  fileIsUploaded,
  getFileAppearanceType,
  getFileExtension,
@ -19,6 +22,7 @@ import { formatFileSize } from '@/utils/format'
 import cn from '@/utils/classnames'
 import { ReplayLine } from '@/app/components/base/icons/src/vender/other'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
+import ImagePreview from '@/app/components/base/image-uploader/image-preview'

 type FileInAttachmentItemProps = {
  file: FileEntity
@ -26,6 +30,7 @@ type FileInAttachmentItemProps = {
  showDownloadAction?: boolean
  onRemove?: (fileId: string) => void
  onReUpload?: (fileId: string) => void
+  canPreview?: boolean
 }
 const FileInAttachmentItem = ({
  file,
@ -33,96 +38,116 @@ const FileInAttachmentItem = ({
  showDownloadAction = true,
  onRemove,
  onReUpload,
+  canPreview,
 }: FileInAttachmentItemProps) => {
  const { id, name, type, progress, supportFileType, base64Url, url, isRemote } = file
  const ext = getFileExtension(name, type, isRemote)
  const isImageFile = supportFileType === SupportUploadFileTypes.image
-
+  const [imagePreviewUrl, setImagePreviewUrl] = useState('')
  return (
-    <div className={cn(
-      'flex items-center pr-3 h-12 rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg shadow-xs',
-      progress === -1 && 'bg-state-destructive-hover border-state-destructive-border',
-    )}>
-      <div className='flex items-center justify-center w-12 h-12'>
-        {
-          isImageFile && (
-            <FileImageRender
-              className='w-8 h-8'
-              imageUrl={base64Url || url || ''}
-            />
-          )
-        }
-        {
-          !isImageFile && (
-            <FileTypeIcon
-              type={getFileAppearanceType(name, type)}
-              size='lg'
-            />
-          )
-        }
-      </div>
-      <div className='grow w-0 mr-1'>
-        <div
-          className='flex items-center mb-0.5 system-xs-medium text-text-secondary truncate'
-          title={file.name}
-        >
-          <div className='truncate'>{name}</div>
+    <>
+      <div className={cn(
+        'flex items-center pr-3 h-12 rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg shadow-xs',
+        progress === -1 && 'bg-state-destructive-hover border-state-destructive-border',
+      )}>
+        <div className='flex items-center justify-center w-12 h-12'>
+          {
+            isImageFile && (
+              <FileImageRender
+                className='w-8 h-8'
+                imageUrl={base64Url || url || ''}
+              />
+            )
+          }
+          {
+            !isImageFile && (
+              <FileTypeIcon
+                type={getFileAppearanceType(name, type)}
+                size='lg'
+              />
+            )
+          }
        </div>
-        <div className='flex items-center system-2xs-medium-uppercase text-text-tertiary'>
+        <div className='grow w-0 mr-1'>
+          <div
+            className='flex items-center mb-0.5 system-xs-medium text-text-secondary truncate'
+            title={file.name}
+          >
+            <div className='truncate'>{name}</div>
+          </div>
+          <div className='flex items-center system-2xs-medium-uppercase text-text-tertiary'>
+            {
+              ext && (
+                <span>{ext.toLowerCase()}</span>
+              )
+            }
+            {
+              ext && (
+                <span className='mx-1 system-2xs-medium'>•</span>
+              )
+            }
+            {
+              !!file.size && (
+                <span>{formatFileSize(file.size)}</span>
+              )
+            }
+          </div>
+        </div>
+        <div className='shrink-0 flex items-center'>
          {
-            ext && (
-              <span>{ext.toLowerCase()}</span>
+            progress >= 0 && !fileIsUploaded(file) && (
+              <ProgressCircle
+                className='mr-2.5'
+                percentage={progress}
+              />
            )
          }
          {
-            ext && (
-              <span className='mx-1 system-2xs-medium'>•</span>
+            progress === -1 && (
+              <ActionButton
+                className='mr-1'
+                onClick={() => onReUpload?.(id)}
+              >
+                <ReplayLine className='w-4 h-4 text-text-tertiary' />
+              </ActionButton>
            )
          }
          {
-            !!file.size && (
-              <span>{formatFileSize(file.size)}</span>
+            showDeleteAction && (
+              <ActionButton onClick={() => onRemove?.(id)}>
+                <RiDeleteBinLine className='w-4 h-4' />
+              </ActionButton>
+            )
+          }
+          {
+            canPreview && isImageFile && (
+              <ActionButton className='mr-1' onClick={() => setImagePreviewUrl(url || '')}>
+                <RiEyeLine className='w-4 h-4' />
+              </ActionButton>
+            )
+          }
+          {
+            showDownloadAction && (
+              <ActionButton onClick={(e) => {
+                e.stopPropagation()
+                downloadFile(url || base64Url || '', name)
+              }}>
+                <RiDownloadLine className='w-4 h-4' />
+              </ActionButton>
            )
          }
        </div>
      </div>
-      <div className='shrink-0 flex items-center'>
-        {
-          progress >= 0 && !fileIsUploaded(file) && (
-            <ProgressCircle
-              className='mr-2.5'
-              percentage={progress}
-            />
-          )
-        }
-        {
-          progress === -1 && (
-            <ActionButton
-              className='mr-1'
-              onClick={() => onReUpload?.(id)}
-            >
-              <ReplayLine className='w-4 h-4 text-text-tertiary' />
-            </ActionButton>
-          )
-        }
-        {
-          showDeleteAction && (
-            <ActionButton onClick={() => onRemove?.(id)}>
-              <RiDeleteBinLine className='w-4 h-4' />
-            </ActionButton>
-          )
-        }
-        {
-          showDownloadAction && (
-            <ActionButton
-              size='xs'
-            >
-              <RiDownloadLine className='w-3.5 h-3.5 text-text-tertiary' />
-            </ActionButton>
-          )
-        }
-      </div>
-    </div>
+      {
+        imagePreviewUrl && canPreview && (
+          <ImagePreview
+            title={name}
+            url={imagePreviewUrl}
+            onCancel={() => setImagePreviewUrl('')}
+          />
+        )
+      }
+    </>
  )
 }

--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
@ -31,7 +31,7 @@ const FileItem = ({
  onRemove,
  onReUpload,
 }: FileItemProps) => {
-  const { id, name, type, progress, url, isRemote } = file
+  const { id, name, type, progress, url, base64Url, isRemote } = file
  const ext = getFileExtension(name, type, isRemote)
  const uploadError = progress === -1

@ -86,7 +86,7 @@ const FileItem = ({
              className='hidden group-hover/file-item:flex absolute -right-1 -top-1'
              onClick={(e) => {
                e.stopPropagation()
-                downloadFile(url || '', name)
+                downloadFile(url || base64Url || '', name)
              }}
            >
              <RiDownloadLine className='w-3.5 h-3.5 text-text-tertiary' />
--- a/web/app/components/base/file-uploader/utils.ts
+++ b/web/app/components/base/file-uploader/utils.ts
@ -1,5 +1,4 @@
 import mime from 'mime'
-import { flatten } from 'lodash-es'
 import { FileAppearanceTypeEnum } from './types'
 import type { FileEntity } from './types'
 import { upload } from '@/service/base'
@ -158,12 +157,22 @@ export const isAllowedFileExtension = (fileName: string, fileMimetype: string, a
 }

 export const getFilesInLogs = (rawData: any) => {
-  const originalFiles = flatten(Object.keys(rawData || {}).map((key) => {
-    if (typeof rawData[key] === 'object' || Array.isArray(rawData[key]))
-      return rawData[key]
+  const result = Object.keys(rawData || {}).map((key) => {
+    if (typeof rawData[key] === 'object' && rawData[key].dify_model_identity === '__dify__file__') {
+      return {
+        varName: key,
+        list: getProcessedFilesFromResponse([rawData[key]]),
+      }
+    }
+    if (Array.isArray(rawData[key]) && rawData[key].some(item => item.dify_model_identity === '__dify__file__')) {
+      return {
+        varName: key,
+        list: getProcessedFilesFromResponse(rawData[key]),
+      }
+    }
    return undefined
-  }).filter(Boolean)).filter(item => item?.model_identity === '__dify__file__')
-  return getProcessedFilesFromResponse(originalFiles)
+  }).filter(Boolean)
+  return result
 }

 export const fileIsUploaded = (file: FileEntity) => {
--- a/web/app/components/base/mermaid/index.tsx
+++ b/web/app/components/base/mermaid/index.tsx
@ -1,24 +1,18 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import mermaid from 'mermaid'
 import { usePrevious } from 'ahooks'
 import CryptoJS from 'crypto-js'
+import { useTranslation } from 'react-i18next'
 import { ExclamationTriangleIcon } from '@heroicons/react/24/outline'
 import LoadingAnim from '@/app/components/base/chat/chat/loading-anim'
+import cn from '@/utils/classnames'
+import ImagePreview from '@/app/components/base/image-uploader/image-preview'

 let mermaidAPI: any
 mermaidAPI = null

-if (typeof window !== 'undefined') {
-  mermaid.initialize({
-    startOnLoad: true,
-    theme: 'default',
-    flowchart: {
-      htmlLabels: true,
-      useMaxWidth: true,
-    },
-  })
+if (typeof window !== 'undefined')
  mermaidAPI = mermaid.mermaidAPI
-}

 const style = {
  minWidth: '480px',
@ -40,14 +34,21 @@ const svgToBase64 = (svgGraph: string) => {
 const Flowchart = React.forwardRef((props: {
  PrimitiveCode: string
 }, ref) => {
+  const { t } = useTranslation()
  const [svgCode, setSvgCode] = useState(null)
+  const [look, setLook] = useState<'classic' | 'handDrawn'>('classic')
+
  const chartId = useRef(`flowchart_${CryptoJS.MD5(props.PrimitiveCode).toString()}`)
  const prevPrimitiveCode = usePrevious(props.PrimitiveCode)
  const [isLoading, setIsLoading] = useState(true)
  const timeRef = useRef<number>()
  const [errMsg, setErrMsg] = useState('')
+  const [imagePreviewUrl, setImagePreviewUrl] = useState('')
+
+  const renderFlowchart = useCallback(async (PrimitiveCode: string) => {
+    setSvgCode(null)
+    setIsLoading(true)

-  const renderFlowchart = async (PrimitiveCode: string) => {
    try {
      if (typeof window !== 'undefined' && mermaidAPI) {
        const svgGraph = await mermaidAPI.render(chartId.current, PrimitiveCode)
@ -64,10 +65,28 @@ const Flowchart = React.forwardRef((props: {
        setErrMsg((error as Error).message)
      }
    }
-  }
+  }, [props.PrimitiveCode])
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      mermaid.initialize({
+        startOnLoad: true,
+        theme: 'neutral',
+        look,
+        flowchart: {
+          htmlLabels: true,
+          useMaxWidth: true,
+        },
+      })
+
+      localStorage.removeItem(chartId.current)
+      renderFlowchart(props.PrimitiveCode)
+    }
+  }, [look])

  useEffect(() => {
    const cachedSvg: any = localStorage.getItem(chartId.current)
+
    if (cachedSvg) {
      setSvgCode(cachedSvg)
      setIsLoading(false)
@ -85,24 +104,51 @@ const Flowchart = React.forwardRef((props: {
    // eslint-disable-next-line ts/ban-ts-comment
    // @ts-expect-error
    <div ref={ref}>
+      <div className="msh-segmented msh-segmented-sm css-23bs09 css-var-r1">
+        <div className="msh-segmented-group">
+          <label className="msh-segmented-item flex items-center space-x-1 m-2 w-[200px]">
+            <div key='classic'
+              className={cn('flex items-center justify-center mb-4 w-[calc((100%-8px)/2)] h-8 rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg cursor-pointer system-sm-medium text-text-secondary',
+                look === 'classic' && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg text-text-primary',
+              )}
+
+              onClick={() => setLook('classic')}
+            >
+              <div className="msh-segmented-item-label">{t('app.mermaid.classic')}</div>
+            </div>
+            <div key='handDrawn'
+              className={cn(
+                'flex items-center justify-center mb-4 w-[calc((100%-8px)/2)] h-8 rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg cursor-pointer system-sm-medium text-text-secondary',
+                look === 'handDrawn' && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg text-text-primary',
+              )}
+              onClick={() => setLook('handDrawn')}
+            >
+              <div className="msh-segmented-item-label">{t('app.mermaid.handDrawn')}</div>
+            </div>
+          </label>
+        </div>
+      </div>
      {
        svgCode
-        && <div className="mermaid" style={style}>
-          {svgCode && <img src={svgCode} style={{ width: '100%', height: 'auto' }} alt="Mermaid chart" />}
-        </div>
+            && <div className="mermaid cursor-pointer" style={style} onClick={() => setImagePreviewUrl(svgCode)}>
+              {svgCode && <img src={svgCode} style={{ width: '100%', height: 'auto' }} alt="mermaid_chart" />}
+            </div>
      }
      {isLoading
-        && <div className='py-4 px-[26px]'>
-          <LoadingAnim type='text' />
-        </div>
+            && <div className='py-4 px-[26px]'>
+              <LoadingAnim type='text'/>
+            </div>
      }
      {
        errMsg
-        && <div className='py-4 px-[26px]'>
-          <ExclamationTriangleIcon className='w-6 h-6 text-red-500' />
-          &nbsp;
-          {errMsg}
-        </div>
+            && <div className='py-4 px-[26px]'>
+              <ExclamationTriangleIcon className='w-6 h-6 text-red-500'/>
+              &nbsp;
+              {errMsg}
+            </div>
+      }
+      {
+        imagePreviewUrl && (<ImagePreview title='mermaid_chart' url={imagePreviewUrl} onCancel={() => setImagePreviewUrl('')} />)
      }
    </div>
  )