add workflow process

app/components/chat/answer/index.tsx

@@ -4,13 +4,14 @@ import React from 'react'
 import { HandThumbDownIcon, HandThumbUpIcon } from '@heroicons/react/24/outline'
 import { useTranslation } from 'react-i18next'
 import LoadingAnim from '../loading-anim'
-import type { FeedbackFunc, IChatItem } from '../type'
+import type { FeedbackFunc } from '../type'
 import s from '../style.module.css'
 import ImageGallery from '../../base/image-gallery'
 import Thought from '../thought'
 import { randomString } from '@/utils/string'
-import type { MessageRating, VisionFile } from '@/types/app'
+import type { ChatItem, MessageRating, VisionFile } from '@/types/app'
 import Tooltip from '@/app/components/base/tooltip'
+import WorkflowProcess from '@/app/components/workflow/workflow-process'
 import { Markdown } from '@/app/components/base/markdown'
 import type { Emoji } from '@/types/tools'
 
@@ -54,7 +55,7 @@ const IconWrapper: FC<{ children: React.ReactNode | string }> = ({ children }) =
 }
 
 type IAnswerProps = {
-  item: IChatItem
+  item: ChatItem
   feedbackDisabled: boolean
   onFeedback?: FeedbackFunc
   isResponsing?: boolean
@@ -69,7 +70,7 @@ const Answer: FC<IAnswerProps> = ({
   isResponsing,
   allToolIcons,
 }) => {
-  const { id, content, feedback, agent_thoughts } = item
+  const { id, content, feedback, agent_thoughts, workflowProcess } = item
   const isAgentMode = !!agent_thoughts && agent_thoughts.length > 0
 
   const { t } = useTranslation()
@@ -177,6 +178,9 @@ const Answer: FC<IAnswerProps> = ({
         <div className={`${s.answerWrap}`}>
           <div className={`${s.answer} relative text-sm text-gray-900`}>
             <div className={'ml-2 py-3 px-4 bg-gray-100 rounded-tr-2xl rounded-b-2xl'}>
+              {workflowProcess && (
+                <WorkflowProcess data={workflowProcess} hideInfo />
+              )}
               {(isResponsing && (isAgentMode ? (!content && (agent_thoughts || []).filter(item => !!item.thought || !!item.tool).length === 0) : !content))
                 ? (
                   <div className='flex items-center justify-center w-6 h-5'>

app/components/chat/index.tsx

@@ -7,8 +7,8 @@ import Textarea from 'rc-textarea'
 import s from './style.module.css'
 import Answer from './answer'
 import Question from './question'
-import type { FeedbackFunc, Feedbacktype } from './type'
-import type { VisionFile, VisionSettings } from '@/types/app'
+import type { FeedbackFunc } from './type'
+import type { ChatItem, VisionFile, VisionSettings } from '@/types/app'
 import { TransferMethod } from '@/types/app'
 import Tooltip from '@/app/components/base/tooltip'
 import Toast from '@/app/components/base/toast'
@@ -17,7 +17,7 @@ import ImageList from '@/app/components/base/image-uploader/image-list'
 import { useImageFiles } from '@/app/components/base/image-uploader/hooks'
 
 export type IChatProps = {
-  chatList: IChatItem[]
+  chatList: ChatItem[]
   /**
    * Whether to display the editing area and rating status
    */
@@ -35,27 +35,6 @@ export type IChatProps = {
   visionConfig?: VisionSettings
 }
 
-export type IChatItem = {
-  id: string
-  content: string
-  /**
-   * Specific message type
-   */
-  isAnswer: boolean
-  /**
-   * The user feedback result of this message
-   */
-  feedback?: Feedbacktype
-  /**
-   * Whether to hide the feedback area
-   */
-  feedbackDisabled?: boolean
-  isIntroduction?: boolean
-  useCurrentUserAvatar?: boolean
-  isOpeningStatement?: boolean
-  message_files?: VisionFile[]
-}
-
 const Chat: FC<IChatProps> = ({
   chatList,
   feedbackDisabled = false,