From b4e76af4a777e9d73b82a88104dadabee0cc6acf Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Mon, 18 Aug 2025 18:15:10 +0800
Subject: [PATCH] feat: string type too long hide

---
 .../workflow/variable-inspect/large-data-alert.tsx | 12 +++++++-----
 .../components/workflow/variable-inspect/right.tsx | 14 +++++++-------
 .../workflow/variable-inspect/value-content.tsx    | 12 ++++++++----
 web/i18n/en-US/workflow.ts                         |  3 +++
 web/i18n/zh-Hans/workflow.ts                       |  3 +++
 5 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/web/app/components/workflow/variable-inspect/large-data-alert.tsx b/web/app/components/workflow/variable-inspect/large-data-alert.tsx
index caea85e841..1e820c0c15 100644
--- a/web/app/components/workflow/variable-inspect/large-data-alert.tsx
+++ b/web/app/components/workflow/variable-inspect/large-data-alert.tsx
@@ -3,6 +3,7 @@ import { RiInformation2Fill } from '@remixicon/react'
 import type { FC } from 'react'
 import React from 'react'
 import cn from '@/utils/classnames'
+import { useTranslation } from 'react-i18next'
 
 type Props = {
   downloadUrl?: string
@@ -13,16 +14,17 @@ const LargeDataAlert: FC<Props> = ({
   downloadUrl,
   className,
 }) => {
+  const { t } = useTranslation()
   const isShowDownload = !!downloadUrl
-  const text = isShowDownload ? 'Large data - partial preview only' : 'Large data, read-only preview. Export to view all.'
+  const text = isShowDownload ? t('workflow.debug.variableInspect.largeDataNoExport') : t('workflow.debug.variableInspect.largeData')
   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 className='flex h-full w-0 grow items-center space-x-1'>
+        <RiInformation2Fill className='size-4 shrink-0 text-text-accent' />
+        <div className='system-xs-regular w-0 grow truncate text-text-primary'>{text}</div>
       </div>
       {isShowDownload && (
-        <div className='system-xs-medium-uppercase cursor-pointer text-text-accent'>Export</div>
+        <div className='system-xs-medium-uppercase ml-1 shrink-0 cursor-pointer text-text-accent'>{t('workflow.debug.variableInspect.export')}</div>
       )}
     </div>
   )
diff --git a/web/app/components/workflow/variable-inspect/right.tsx b/web/app/components/workflow/variable-inspect/right.tsx
index ae9838251b..f80b3820aa 100644
--- a/web/app/components/workflow/variable-inspect/right.tsx
+++ b/web/app/components/workflow/variable-inspect/right.tsx
@@ -53,13 +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 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,
diff --git a/web/app/components/workflow/variable-inspect/value-content.tsx b/web/app/components/workflow/variable-inspect/value-content.tsx
index 9495f5d8dd..0bb73cd6ce 100644
--- a/web/app/components/workflow/variable-inspect/value-content.tsx
+++ b/web/app/components/workflow/variable-inspect/value-content.tsx
@@ -21,6 +21,7 @@ import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 import type { VarInInspect } from '@/types/workflow'
 import { VarInInspectType } from '@/types/workflow'
 import cn from '@/utils/classnames'
+import LargeDataAlert from './large-data-alert'
 
 type Props = {
   currentVar: VarInInspect
@@ -169,19 +170,22 @@ const ValueContent = ({
       ref={contentContainerRef}
       className='flex h-full flex-col'
     >
-      <div className={cn('grow')} style={{ height: `${editorHeight}px` }}>
+      <div className={cn('relative grow')} style={{ height: `${editorHeight}px` }}>
         {showTextEditor && (
+          <>
+          {isTruncated && <LargeDataAlert className='absolute left-3 right-3 top-1' />}
           <Textarea
             readOnly={textEditorDisabled}
-            disabled={textEditorDisabled}
-            className='h-full'
+            disabled={textEditorDisabled || isTruncated}
+            className={cn('h-full', isTruncated && 'pt-[48px]')}
             value={value as any}
             onChange={e => handleTextChange(e.target.value)}
           />
+          </>
         )}
         {showJSONEditor && (
           <SchemaEditor
-            readonly={JSONEditorDisabled}
+            readonly={JSONEditorDisabled || isTruncated}
             className='overflow-y-auto'
             hideTopMenu
             schema={json}
diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts
index 696413bc88..9903ea2f08 100644
--- a/web/i18n/en-US/workflow.ts
+++ b/web/i18n/en-US/workflow.ts
@@ -988,6 +988,9 @@ const translation = {
       chatNode: 'Conversation',
       systemNode: 'System',
       exportToolTip: 'Export Variable as File',
+      largeData: 'Large data, read-only preview. Export to view all.',
+      largeDataNoExport: 'Large data - partial preview only',
+      export: 'export',
     },
     lastOutput: 'Last Output',
     relations: {
diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts
index 3727feaef3..97590d3290 100644
--- a/web/i18n/zh-Hans/workflow.ts
+++ b/web/i18n/zh-Hans/workflow.ts
@@ -988,6 +988,9 @@ const translation = {
       chatNode: '会话变量',
       systemNode: '系统变量',
       exportToolTip: '导出变量为文件',
+      largeData: '大数据 - 仅部分只读预览。请导出查看完整数据。',
+      largeDataNoExport: '大数据 - 仅部分预览',
+      export: '导出',
     },
     lastOutput: '上次输出',
     relations: {