support workflow events

Author: JzoNgKVO

app/components/index.tsx

@@ -11,8 +11,8 @@ import Sidebar from '@/app/components/sidebar'
 import ConfigSence from '@/app/components/config-scence'
 import Header from '@/app/components/header'
 import { fetchAppParams, fetchChatList, fetchConversations, generationConversationName, sendChatMessage, updateFeedback } from '@/service'
-import type { ConversationItem, Feedbacktype, IChatItem, PromptConfig, VisionFile, VisionSettings } from '@/types/app'
-import { Resolution, TransferMethod } from '@/types/app'
+import type { ChatItem, ConversationItem, Feedbacktype, PromptConfig, VisionFile, VisionSettings } from '@/types/app'
+import { Resolution, TransferMethod, WorkflowRunningStatus } from '@/types/app'
 import Chat from '@/app/components/chat'
 import { setLocaleOnClient } from '@/i18n/client'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
@@ -124,7 +124,7 @@ const Main: FC = () => {
     if (!isNewConversation && !conversationIdChangeBecauseOfNew && !isResponsing) {
       fetchChatList(currConversationId).then((res: any) => {
         const { data } = res
-        const newChatList: IChatItem[] = generateNewChatListWithOpenstatement(notSyncToStateIntroduction, notSyncToStateInputs)
+        const newChatList: ChatItem[] = generateNewChatListWithOpenstatement(notSyncToStateIntroduction, notSyncToStateInputs)
 
         data.forEach((item: any) => {
           newChatList.push({
@@ -168,7 +168,7 @@ const Main: FC = () => {
   /*
   * chat info. chat is under conversation.
   */
-  const [chatList, setChatList, getChatList] = useGetState<IChatItem[]>([])
+  const [chatList, setChatList, getChatList] = useGetState<ChatItem[]>([])
   const chatListDomRef = useRef<HTMLDivElement>(null)
   useEffect(() => {
     // scroll to bottom
@@ -300,10 +300,10 @@ const Main: FC = () => {
     placeholderAnswerId,
     questionItem,
   }: {
-    responseItem: IChatItem
+    responseItem: ChatItem
     questionId: string
     placeholderAnswerId: string
-    questionItem: IChatItem
+    questionItem: ChatItem
   }) => {
     // closesure new list is outdated.
     const newListWithAnswer = produce(
@@ -362,7 +362,7 @@ const Main: FC = () => {
     let isAgentMode = false
 
     // answer
-    const responseItem: IChatItem = {
+    const responseItem: ChatItem = {
       id: `${Date.now()}`,
       content: '',
       agent_thoughts: [],
@@ -526,6 +526,52 @@ const Main: FC = () => {
           draft.splice(draft.findIndex(item => item.id === placeholderAnswerId), 1)
         }))
       },
+      onWorkflowStarted: ({ workflow_run_id, task_id }) => {
+        // taskIdRef.current = task_id
+        responseItem.workflow_run_id = workflow_run_id
+        responseItem.workflowProcess = {
+          status: WorkflowRunningStatus.Running,
+          tracing: [],
+        }
+        setChatList(produce(getChatList(), (draft) => {
+          const currentIndex = draft.findIndex(item => item.id === responseItem.id)
+          draft[currentIndex] = {
+            ...draft[currentIndex],
+            ...responseItem,
+          }
+        }))
+      },
+      onWorkflowFinished: ({ data }) => {
+        responseItem.workflowProcess!.status = data.status as WorkflowRunningStatus
+        setChatList(produce(getChatList(), (draft) => {
+          const currentIndex = draft.findIndex(item => item.id === responseItem.id)
+          draft[currentIndex] = {
+            ...draft[currentIndex],
+            ...responseItem,
+          }
+        }))
+      },
+      onNodeStarted: ({ data }) => {
+        responseItem.workflowProcess!.tracing!.push(data as any)
+        setChatList(produce(getChatList(), (draft) => {
+          const currentIndex = draft.findIndex(item => item.id === responseItem.id)
+          draft[currentIndex] = {
+            ...draft[currentIndex],
+            ...responseItem,
+          }
+        }))
+      },
+      onNodeFinished: ({ data }) => {
+        const currentIndex = responseItem.workflowProcess!.tracing!.findIndex(item => item.node_id === data.node_id)
+        responseItem.workflowProcess!.tracing[currentIndex] = data as any
+        setChatList(produce(getChatList(), (draft) => {
+          const currentIndex = draft.findIndex(item => item.id === responseItem.id)
+          draft[currentIndex] = {
+            ...draft[currentIndex],
+            ...responseItem,
+          }
+        }))
+      },
     })
   }
 

next.config.js

@@ -4,7 +4,7 @@ const nextConfig = {
   // Configure pageExtensions to include md and mdx
   pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
   experimental: {
-    appDir: true,
+    // appDir: true,
   },
   // fix all before production. Now it slow the develop speed.
   eslint: {

package.json

@@ -18,6 +18,7 @@
     "@heroicons/react": "^2.0.16",
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
+    "@monaco-editor/react": "^4.6.0",
     "@tailwindcss/line-clamp": "^0.4.2",
     "@types/node": "18.15.0",
     "@types/react": "18.0.28",
@@ -27,7 +28,7 @@
     "axios": "^1.3.5",
     "classnames": "^2.3.2",
     "copy-to-clipboard": "^3.3.3",
-    "dify-client": "^2.2.0",
+    "dify-client": "^2.3.1",
     "eslint": "8.36.0",
     "eslint-config-next": "13.4.0",
     "eventsource-parser": "^1.0.0",