feat: llm text stream support for workflow app (#3798)

Co-authored-by: JzoNg <jzongcode@gmail.com>

web/app/components/app/text-generate/item/index.tsx

@@ -8,9 +8,8 @@ import { useParams } from 'next/navigation'
 import { HandThumbDownIcon, HandThumbUpIcon } from '@heroicons/react/24/outline'
 import { useBoolean } from 'ahooks'
 import { HashtagIcon } from '@heroicons/react/24/solid'
-// import PromptLog from '@/app/components/app/chat/log'
+import ResultTab from './result-tab'
 import { Markdown } from '@/app/components/base/markdown'
-import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import Loading from '@/app/components/base/loading'
 import Toast from '@/app/components/base/toast'
 import AudioBtn from '@/app/components/base/audio-btn'
@@ -26,7 +25,6 @@ import EditReplyModal from '@/app/components/app/annotation/edit-annotation-moda
 import { useStore as useAppStore } from '@/app/components/app/store'
 import WorkflowProcessItem from '@/app/components/base/chat/chat/answer/workflow-process'
 import type { WorkflowProcess } from '@/app/components/base/chat/types'
-import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 
 const MAX_DEPTH = 3
 
@@ -293,23 +291,17 @@ const GenerationItem: FC<IGenerationItemProps> = ({
             <div className={`flex ${contentClassName}`}>
               <div className='grow w-0'>
                 {workflowProcessData && (
-                  <WorkflowProcessItem grayBg data={workflowProcessData} expand={workflowProcessData.expand} />
+                  <WorkflowProcessItem grayBg hideInfo data={workflowProcessData} expand={workflowProcessData.expand} />
+                )}
+                {workflowProcessData && !isError && (
+                  <ResultTab data={workflowProcessData} content={content} />
                 )}
                 {isError && (
                   <div className='text-gray-400 text-sm'>{t('share.generation.batchFailed.outputPlaceholder')}</div>
                 )}
-                {!isError && (typeof content === 'string') && (
+                {!workflowProcessData && !isError && (typeof content === 'string') && (
                   <Markdown content={content} />
                 )}
-                {!isError && (typeof content !== 'string') && (
-                  <CodeEditor
-                    readOnly
-                    title={<div/>}
-                    language={CodeLanguage.json}
-                    value={content}
-                    isJSONStringifyBeauty
-                  />
-                )}
               </div>
             </div>
 
@@ -427,7 +419,11 @@ const GenerationItem: FC<IGenerationItemProps> = ({
                   </>
                 )}
               </div>
-              <div className='text-xs text-gray-500'>{content?.length} {t('common.unit.char')}</div>
+              <div>
+                {!workflowProcessData && (
+                  <div className='text-xs text-gray-500'>{content?.length} {t('common.unit.char')}</div>
+                )}
+              </div>
             </div>
 
           </div>

web/app/components/app/text-generate/item/result-tab.tsx

@@ -0,0 +1,74 @@
+import {
+  memo,
+  useEffect,
+  // useRef,
+  useState,
+} from 'react'
+import cn from 'classnames'
+import { useTranslation } from 'react-i18next'
+// import Loading from '@/app/components/base/loading'
+import { Markdown } from '@/app/components/base/markdown'
+import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
+import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
+import type { WorkflowProcess } from '@/app/components/base/chat/types'
+// import { WorkflowRunningStatus } from '@/app/components/workflow/types'
+
+const ResultTab = ({
+  data,
+  content,
+}: {
+  data?: WorkflowProcess
+  content: any
+}) => {
+  const { t } = useTranslation()
+  const [currentTab, setCurrentTab] = useState<string>('DETAIL')
+
+  const switchTab = async (tab: string) => {
+    setCurrentTab(tab)
+  }
+  useEffect(() => {
+    if (data?.resultText)
+      switchTab('RESULT')
+    else
+      switchTab('DETAIL')
+  }, [data?.resultText])
+
+  return (
+    <div className='grow relative flex flex-col'>
+      {data?.resultText && (
+        <div className='shrink-0 flex items-center mb-2 border-b-[0.5px] border-[rgba(0,0,0,0.05)]'>
+          <div
+            className={cn(
+              'mr-6 py-3 border-b-2 border-transparent text-[13px] font-semibold leading-[18px] text-gray-400 cursor-pointer',
+              currentTab === 'RESULT' && '!border-[rgb(21,94,239)] text-gray-700',
+            )}
+            onClick={() => switchTab('RESULT')}
+          >{t('runLog.result')}</div>
+          <div
+            className={cn(
+              'mr-6 py-3 border-b-2 border-transparent text-[13px] font-semibold leading-[18px] text-gray-400 cursor-pointer',
+              currentTab === 'DETAIL' && '!border-[rgb(21,94,239)] text-gray-700',
+            )}
+            onClick={() => switchTab('DETAIL')}
+          >{t('runLog.detail')}</div>
+        </div>
+      )}
+      <div className={cn('grow bg-white')}>
+        {currentTab === 'RESULT' && (
+          <Markdown content={data?.resultText || ''} />
+        )}
+        {currentTab === 'DETAIL' && content && (
+          <CodeEditor
+            readOnly
+            title={<div>JSON OUTPUT</div>}
+            language={CodeLanguage.json}
+            value={content}
+            isJSONStringifyBeauty
+          />
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default memo(ResultTab)