feat: debug show big data

2025-08-18 16:57:41 +08:00 · 2025-08-18 16:57:41 +08:00 · 2391e582f2
parent f5033c5a0e
commit 2391e582f2
8 changed files with 83 additions and 6 deletions
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/code-editor.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/code-editor.tsx
@ -15,6 +15,7 @@ type CodeEditorProps = {
  editorWrapperClassName?: string
  readOnly?: boolean
  hideTopMenu?: boolean
+  topContent?: React.ReactNode
 } & React.HTMLAttributes<HTMLDivElement>

 const CodeEditor: FC<CodeEditorProps> = ({
@ -24,6 +25,7 @@ const CodeEditor: FC<CodeEditorProps> = ({
  editorWrapperClassName,
  readOnly = false,
  hideTopMenu = false,
+  topContent,
  className,
 }) => {
  const { t } = useTranslation()
@ -127,6 +129,7 @@ const CodeEditor: FC<CodeEditorProps> = ({
          </div>
        </div>
      )}
+      {topContent}
      <div className={classNames('relative overflow-hidden', editorWrapperClassName)}>
        <Editor
          defaultLanguage='json'
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/schema-editor.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/schema-editor.tsx
@ -1,6 +1,7 @@
 import React, { type FC } from 'react'
 import CodeEditor from './code-editor'
 import cn from '@/utils/classnames'
+import LargeDataAlert from '@/app/components/workflow/variable-inspect/large-data-alert'

 type SchemaEditorProps = {
  schema: string
@ -8,6 +9,7 @@ type SchemaEditorProps = {
  hideTopMenu?: boolean
  className?: string
  readonly?: boolean
+  isTruncated?: boolean
 }

 const SchemaEditor: FC<SchemaEditorProps> = ({
@ -16,6 +18,7 @@ const SchemaEditor: FC<SchemaEditorProps> = ({
  hideTopMenu,
  className,
  readonly = false,
+  isTruncated,
 }) => {
  return (
    <CodeEditor
@ -25,6 +28,7 @@ const SchemaEditor: FC<SchemaEditorProps> = ({
      value={schema}
      onUpdate={onUpdate}
      hideTopMenu={hideTopMenu}
+      topContent={isTruncated && <LargeDataAlert className='mx-1 mb-3 mt-[-4px]' />}
    />
  )
 }
--- a/web/app/components/workflow/variable-inspect/large-data-alert.tsx
+++ b/web/app/components/workflow/variable-inspect/large-data-alert.tsx
@ -0,0 +1,30 @@
+'use client'
+import { RiInformation2Fill } from '@remixicon/react'
+import type { FC } from 'react'
+import React from 'react'
+import cn from '@/utils/classnames'
+
+type Props = {
+  downloadUrl?: string
+  className?: string
+}
+
+const LargeDataAlert: FC<Props> = ({
+  downloadUrl,
+  className,
+}) => {
+  const isShowDownload = !!downloadUrl
+  const text = isShowDownload ? 'Large data - partial preview only' : 'Large data, read-only preview. Export to view all.'
+  return (
+    <div className={cn('flex h-8 items-center justify-between rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur px-2 shadow-xs', className)}>
+      <div className='flex h-full items-center space-x-1'>
+        <RiInformation2Fill className='size-4 text-text-accent' />
+        <div className='system-xs-regular text-text-primary'>{text}</div>
+      </div>
+      {isShowDownload && (
+        <div className='system-xs-medium-uppercase cursor-pointer text-text-accent'>Export</div>
+      )}
+    </div>
+  )
+}
+export default React.memo(LargeDataAlert)
--- a/web/app/components/workflow/variable-inspect/right.tsx
+++ b/web/app/components/workflow/variable-inspect/right.tsx
@ -2,6 +2,7 @@ import { useTranslation } from 'react-i18next'
 import {
  RiArrowGoBackLine,
  RiCloseLine,
+  RiFileDownloadFill,
  RiMenuLine,
  RiSparklingFill,
 } from '@remixicon/react'
@ -52,6 +53,13 @@ const Right = ({
  const bottomPanelWidth = useStore(s => s.bottomPanelWidth)
  const setShowVariableInspectPanel = useStore(s => s.setShowVariableInspectPanel)
  const setCurrentFocusNodeId = useStore(s => s.setCurrentFocusNodeId)
+  const isTruncated = currentNodeVar?.var.is_truncated
+  const fullContent = currentNodeVar?.var.full_content
+  // const isTruncated = true
+  // const fullContent = {
+  //   size_bytes: 11289600,
+  //   download_url: 'https://upload.dify.ai/files/222bc6e7-40bd-4433-9ba8-4b9ecda88b14/file-preview?timestamp=1754976824&nonce=d970eb39b119f76ec94a9b026f2825b3&sign=ltJO4vS0jrwxuBl4GU74E1Sg_Tia2Y4g2LoBoPh3970=&as_attachment=true',
+  // }

  const {
    resetConversationVar,
@ -183,7 +191,16 @@ const Right = ({
                </>
              )}
              <div title={currentNodeVar.var.name} className='system-sm-semibold truncate text-text-secondary'>{currentNodeVar.var.name}</div>
-              <div className='system-xs-medium ml-1 shrink-0 text-text-tertiary'>{currentNodeVar.var.value_type}</div>
+              <div className='system-xs-medium ml-1 shrink-0 space-x-2 text-text-tertiary'>
+                <span>{currentNodeVar.var.value_type}</span>
+                {isTruncated && (
+                  <>
+                    <span>·</span>
+                    <span>{((fullContent?.size_bytes || 0) / 1024 / 1024).toFixed(1)}MB</span>
+                  </>
+                )}
+              </div>
+
            </>
          )}
        </div>
@ -200,20 +217,32 @@ const Right = ({
                  </div>
                </Tooltip>
              )}
-              {currentNodeVar.var.edited && (
+              {isTruncated && (
+                <Tooltip popupContent={t('workflow.debug.variableInspect.exportToolTip')}>
+                  <ActionButton>
+                    <a
+                      href={fullContent?.download_url}
+                      target='_blank'
+                    >
+                      <RiFileDownloadFill className='size-4' />
+                    </a>
+                  </ActionButton>
+                </Tooltip>
+              )}
+              {!isTruncated && currentNodeVar.var.edited && (
                <Badge>
                  <span className='ml-[2.5px] mr-[4.5px] h-[3px] w-[3px] rounded bg-text-accent-secondary'></span>
                  <span className='system-2xs-semibold-uupercase'>{t('workflow.debug.variableInspect.edited')}</span>
                </Badge>
              )}
-              {currentNodeVar.var.edited && currentNodeVar.var.type !== VarInInspectType.conversation && (
+              {!isTruncated && currentNodeVar.var.edited && currentNodeVar.var.type !== VarInInspectType.conversation && (
                <Tooltip popupContent={t('workflow.debug.variableInspect.reset')}>
                  <ActionButton onClick={resetValue}>
                    <RiArrowGoBackLine className='h-4 w-4' />
                  </ActionButton>
                </Tooltip>
              )}
-              {currentNodeVar.var.edited && currentNodeVar.var.type === VarInInspectType.conversation && (
+              {!isTruncated && currentNodeVar.var.edited && currentNodeVar.var.type === VarInInspectType.conversation && (
                <Tooltip popupContent={t('workflow.debug.variableInspect.resetConversationVar')}>
                  <ActionButton onClick={handleClear}>
                    <RiArrowGoBackLine className='h-4 w-4' />
@ -238,7 +267,7 @@ const Right = ({
            <Loading />
          </div>
        )}
-        {currentNodeVar && !isValueFetching && <ValueContent currentVar={currentNodeVar.var} handleValueChange={handleValueChange} />}
+        {currentNodeVar && !isValueFetching && <ValueContent currentVar={currentNodeVar.var} handleValueChange={handleValueChange} isTruncated={!!isTruncated} />}
      </div>
      {isShowPromptGenerator && (
        isCodeBlock
--- a/web/app/components/workflow/variable-inspect/value-content.tsx
+++ b/web/app/components/workflow/variable-inspect/value-content.tsx
@ -25,11 +25,13 @@ import cn from '@/utils/classnames'
 type Props = {
  currentVar: VarInInspect
  handleValueChange: (varId: string, value: any) => void
+  isTruncated: boolean
 }

 const ValueContent = ({
  currentVar,
  handleValueChange,
+  isTruncated,
 }: Props) => {
  const contentContainerRef = useRef<HTMLDivElement>(null)
  const errorMessageRef = useRef<HTMLDivElement>(null)
@ -72,7 +74,6 @@ const ValueContent = ({

    if (showFileEditor)
      setFileValue(formatFileValue(currentVar))
-  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [currentVar.id, currentVar.value])

  const handleTextChange = (value: string) => {
@ -185,6 +186,7 @@ const ValueContent = ({
            hideTopMenu
            schema={json}
            onUpdate={handleEditorChange}
+            isTruncated={isTruncated}
          />
        )}
        {showFileEditor && (
--- a/web/i18n/en-US/workflow.ts
+++ b/web/i18n/en-US/workflow.ts
@ -987,6 +987,7 @@ const translation = {
      envNode: 'Environment',
      chatNode: 'Conversation',
      systemNode: 'System',
+      exportToolTip: 'Export Variable as File',
    },
    lastOutput: 'Last Output',
    relations: {
--- a/web/i18n/zh-Hans/workflow.ts
+++ b/web/i18n/zh-Hans/workflow.ts
@ -987,6 +987,7 @@ const translation = {
      envNode: '环境变量',
      chatNode: '会话变量',
      systemNode: '系统变量',
+      exportToolTip: '导出变量为文件',
    },
    lastOutput: '上次输出',
    relations: {
--- a/web/types/workflow.ts
+++ b/web/types/workflow.ts
@ -378,6 +378,11 @@ export enum VarInInspectType {
  system = 'sys',
 }

+export type FullContent = {
+  size_bytes: number
+  download_url: string
+}
+
 export type VarInInspect = {
  id: string
  type: VarInInspectType
@ -388,6 +393,8 @@ export type VarInInspect = {
  value: any
  edited: boolean
  visible: boolean
+  is_truncated: boolean
+  full_content: FullContent
 }

 export type NodeWithVar = {