feat: debug show big data

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)

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

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 && (