Merge branch 'main' into feat/rag-pipeline

web/app/components/base/markdown.tsx

@@ -134,6 +134,24 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any
   const languageShowName = getCorrectCapitalizationLanguageName(language || '')
   const isDarkMode = theme === Theme.dark
 
+  const echartsStyle = useMemo(() => ({
+    height: '350px',
+    width: '100%',
+  }), [])
+
+  const echartsOpts = useMemo(() => ({
+    renderer: 'canvas',
+    width: 'auto',
+  }) as any, [])
+
+  const echartsOnEvents = useMemo(() => ({
+    finished: () => {
+      const instance = echartsRef.current?.getEchartsInstance?.()
+      if (instance)
+        instance.resize()
+    },
+  }), [echartsRef]) // echartsRef is stable, so this effectively runs once.
+
   // Handle container resize for echarts
   useEffect(() => {
     if (language !== 'echarts' || !echartsRef.current) return
@@ -329,24 +347,11 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any
                 <ReactEcharts
                   ref={echartsRef}
                   option={finalChartOption}
-                  style={{
-                    height: '350px',
-                    width: '100%',
-                  }}
+                  style={echartsStyle}
                   theme={isDarkMode ? 'dark' : undefined}
-                  opts={{
-                    renderer: 'canvas',
-                    width: 'auto',
-                  }}
+                  opts={echartsOpts}
                   notMerge={true}
-                  onEvents={{
-                    // Force resize when chart is finished rendering
-                    finished: () => {
-                      const instance = echartsRef.current?.getEchartsInstance?.()
-                      if (instance)
-                        instance.resize()
-                    },
-                  }}
+                  onEvents={echartsOnEvents}
                 />
               </ErrorBoundary>
             </div>
@@ -374,15 +379,9 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any
               <ReactEcharts
                 ref={echartsRef}
                 option={errorOption}
-                style={{
-                  height: '350px',
-                  width: '100%',
-                }}
+                style={echartsStyle}
                 theme={isDarkMode ? 'dark' : undefined}
-                opts={{
-                  renderer: 'canvas',
-                  width: 'auto',
-                }}
+                opts={echartsOpts}
                 notMerge={true}
               />
             </ErrorBoundary>
@@ -423,7 +422,7 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any
           </SyntaxHighlighter>
         )
     }
-  }, [children, language, isSVG, finalChartOption, props, theme, match])
+  }, [children, language, isSVG, finalChartOption, props, theme, match, chartState, isDarkMode, echartsStyle, echartsOpts, echartsOnEvents])
 
   if (inline || !match)
     return <code {...props} className={className}>{children}</code>

web/app/components/plugins/marketplace/empty/line.tsx

@@ -1,17 +1,39 @@
+'use client'
+import useTheme from '@/hooks/use-theme'
+
 type LineProps = {
   className?: string
 }
+
 const Line = ({
   className,
 }: LineProps) => {
+  const { theme } = useTheme()
+  const isDarkMode = theme === 'dark'
+
+  if (isDarkMode) {
+    return (
+      <svg xmlns='http://www.w3.org/2000/svg' width='2' height='240' viewBox='0 0 2 240' fill='none' className={className}>
+        <path d='M1 0L1 240' stroke='url(#paint0_linear_6295_52176)' />
+        <defs>
+          <linearGradient id='paint0_linear_6295_52176' x1='-7.99584' y1='240' x2='-7.88094' y2='3.95539e-05' gradientUnits='userSpaceOnUse'>
+            <stop stopOpacity='0.01' />
+            <stop offset='0.503965' stopColor='#C8CEDA' stopOpacity='0.14' />
+            <stop offset='1' stopOpacity='0.01' />
+          </linearGradient>
+        </defs>
+      </svg>
+    )
+  }
+
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="2" height="241" viewBox="0 0 2 241" fill="none" className={className}>
-      <path d="M1 0.5L1 240.5" stroke="url(#paint0_linear_1989_74474)"/>
+    <svg xmlns='http://www.w3.org/2000/svg' width='2' height='241' viewBox='0 0 2 241' fill='none' className={className}>
+      <path d='M1 0.5L1 240.5' stroke='url(#paint0_linear_1989_74474)' />
       <defs>
-        <linearGradient id="paint0_linear_1989_74474" x1="-7.99584" y1="240.5" x2="-7.88094" y2="0.50004" gradientUnits="userSpaceOnUse">
-          <stop stopColor="white" stopOpacity="0.01"/>
-          <stop offset="0.503965" stopColor="#101828" stopOpacity="0.08"/>
-          <stop offset="1" stopColor="white" stopOpacity="0.01"/>
+        <linearGradient id='paint0_linear_1989_74474' x1='-7.99584' y1='240.5' x2='-7.88094' y2='0.50004' gradientUnits='userSpaceOnUse'>
+          <stop stopColor='white' stopOpacity='0.01' />
+          <stop offset='0.503965' stopColor='#101828' stopOpacity='0.08' />
+          <stop offset='1' stopColor='white' stopOpacity='0.01' />
         </linearGradient>
       </defs>
     </svg>

web/app/components/plugins/plugin-page/empty/index.tsx

@@ -12,6 +12,7 @@ import { useTranslation } from 'react-i18next'
 import { SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS } from '@/config'
 import { noop } from 'lodash-es'
 import { useGlobalPublicStore } from '@/context/global-public-context'
+import Button from '@/app/components/base/button'
 
 const Empty = () => {
   const { t } = useTranslation()
@@ -43,14 +44,14 @@ const Empty = () => {
       {/* skeleton */}
       <div className='absolute top-0 z-10 grid h-full w-full grid-cols-2 gap-2 overflow-hidden px-12'>
         {Array.from({ length: 20 }).fill(0).map((_, i) => (
-          <div key={i} className='h-[100px] rounded-xl bg-components-card-bg' />
+          <div key={i} className='h-24 rounded-xl bg-components-card-bg' />
         ))}
       </div>
       {/* mask */}
       <div className='absolute z-20 h-full w-full bg-gradient-to-b from-components-panel-bg-transparent to-components-panel-bg' />
       <div className='relative z-30 flex h-full items-center justify-center'>
         <div className='flex flex-col items-center gap-y-3'>
-          <div className='relative -z-10 flex h-[52px] w-[52px] items-center justify-center rounded-xl
+          <div className='relative -z-10 flex size-14 items-center justify-center rounded-xl
           border-[1px] border-dashed border-divider-deep bg-components-card-bg shadow-xl shadow-shadow-shadow-5'>
             <Group className='h-5 w-5 text-text-tertiary' />
             <Line className='absolute right-[-1px] top-1/2 -translate-y-1/2' />
@@ -58,10 +59,10 @@ const Empty = () => {
             <Line className='absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 rotate-90' />
             <Line className='absolute left-1/2 top-full -translate-x-1/2 -translate-y-1/2 rotate-90' />
           </div>
-          <div className='text-sm font-normal text-text-tertiary'>
+          <div className='system-md-regular text-text-tertiary'>
             {text}
           </div>
-          <div className='flex w-[240px] flex-col'>
+          <div className='flex w-[236px] flex-col'>
             <input
               type='file'
               ref={fileInputRef}
@@ -79,10 +80,9 @@ const Empty = () => {
                 { icon: Github, text: t('plugin.list.source.github'), action: 'github' },
                 { icon: FileZip, text: t('plugin.list.source.local'), action: 'local' },
               ].map(({ icon: Icon, text, action }) => (
-                <div
+                <Button
                   key={action}
-                  className='flex cursor-pointer items-center gap-x-1 rounded-lg border-[0.5px] bg-components-button-secondary-bg
-                  px-3 py-2 shadow-xs shadow-shadow-shadow-3 hover:bg-state-base-hover'
+                  className='justify-start gap-x-0.5 px-3'
                   onClick={() => {
                     if (action === 'local')
                       fileInputRef.current?.click()
@@ -92,9 +92,9 @@ const Empty = () => {
                       setSelectedAction(action)
                   }}
                 >
-                  <Icon className="h-4 w-4 text-text-tertiary" />
-                  <span className='system-md-regular text-text-secondary'>{text}</span>
-                </div>
+                  <Icon className='size-4' />
+                  <span className='px-0.5'>{text}</span>
+                </Button>
               ))}
             </div>
           </div>

web/app/components/workflow/run/iteration-log/iteration-log-trigger.tsx

@@ -49,7 +49,6 @@ const IterationLogTrigger = ({
     const iterDurationMap = nodeInfo?.iterDurationMap || iterationNodeMeta?.iteration_duration_map || {}
 
     let structuredList: NodeTracing[][] = []
-
     if (iterationNodeMeta?.iteration_duration_map) {
       const instanceKeys = Object.keys(iterationNodeMeta.iteration_duration_map)
       structuredList = instanceKeys

web/app/components/workflow/run/loop-log/loop-log-trigger.tsx

@@ -51,16 +51,15 @@ const LoopLogTrigger = ({
     const loopVarMap = loopNodeMeta?.loop_variable_map || {}
 
     let structuredList: NodeTracing[][] = []
-
-    if (loopNodeMeta?.loop_duration_map) {
+    if (nodeInfo.details?.length) {
+      structuredList = nodeInfo.details
+    }
+    else if (loopNodeMeta?.loop_duration_map) {
       const instanceKeys = Object.keys(loopNodeMeta.loop_duration_map)
       structuredList = instanceKeys
         .map(key => filterNodesForInstance(key))
         .filter(branchNodes => branchNodes.length > 0)
     }
-    else if (nodeInfo.details?.length) {
-      structuredList = nodeInfo.details
-    }
 
     onShowLoopResultList(
       structuredList,