Merge pull request #495 from easyops-cn/steve/chat-panel

fix(): refine activity plan with serviceflow

Author: weareoutman

bricks/ai-portal/src/chat-panel/index.tsx

@@ -351,6 +351,7 @@ function LegacyChatPanelComponent(
   const streamContextValue = useMemo(
     () => ({
       lastDetail: null,
+      planMap: null,
       toggleAutoScroll,
       setUserClosedAside: () => {},
     }),

bricks/ai-portal/src/chat-stream/Aside/FlowApp/FlowApp.tsx

@@ -164,20 +164,15 @@ function LegacyActivityDetail(
     return tasks.find((t) => t.id === activity.taskId)!;
   }, [tasks, activity.taskId]);
 
-  const fixedTasks = useMemo(() => {
-    return [
-      {
-        ...activityTask,
-        parent: undefined,
-      },
-    ];
-  }, [activityTask]);
-
   const { messages } = useConversationStream(
     true,
     activityTask.state,
-    fixedTasks,
-    errors
+    tasks,
+    errors,
+    {
+      rootTaskId: activity.taskId,
+      expandAskUser: true,
+    }
   );
 
   useImperativeHandle(ref, () => ({

bricks/ai-portal/src/chat-stream/ChatStream.tsx

@@ -114,18 +114,19 @@ export function ChatStreamComponent(
     !NON_WORKING_STATES.includes(conversationState!);
   const canChat = conversationDone || conversationState === "input-required";
   const { flowMap, activityMap } = useFlowAndActivityMap(serviceFlows);
-  const { messages, jobMap, lastDetail, activeAskUser } = useConversationStream(
-    conversationAvailable,
-    conversation?.state,
-    tasks,
-    errors,
-    {
-      flowMap,
-      activityMap,
-      showHumanActions,
-      skipActivitySubTasks: true,
-    }
-  );
+  const { messages, jobMap, planMap, lastDetail, activeAskUser } =
+    useConversationStream(
+      conversationAvailable,
+      conversation?.state,
+      tasks,
+      errors,
+      {
+        flowMap,
+        activityMap,
+        showHumanActions,
+        skipActivitySubTasks: true,
+      }
+    );
 
   useEffect(() => {
     onDetailChange({
@@ -402,10 +403,11 @@ export function ChatStreamComponent(
   const streamContextValue = useMemo(
     () => ({
       lastDetail,
+      planMap,
       setUserClosedAside,
       toggleAutoScroll,
     }),
-    [lastDetail, toggleAutoScroll]
+    [lastDetail, planMap, toggleAutoScroll]
   );
 
   return (
@@ -442,7 +444,13 @@ export function ChatStreamComponent(
                       )}
                     </div>
                   ))}
-                  {activeAskUser && <AskUser task={activeAskUser.task} />}
+                  {activeAskUser && (
+                    <AskUser
+                      task={activeAskUser.task}
+                      parentJob={activeAskUser.parentJob}
+                      parentTask={activeAskUser.parentTask}
+                    />
+                  )}
                   {earlyFinished && (
                     <div className={styles.message}>
                       <AssistantMessage earlyFinished />

bricks/ai-portal/src/chat-stream/StreamContext.ts

@@ -3,12 +3,14 @@ import type { ActiveDetail } from "../shared/interfaces";
 
 export interface StreamContextValue {
   lastDetail: ActiveDetail | null;
+  planMap: Map<string, any> | null;
   setUserClosedAside: Dispatch<React.SetStateAction<boolean>>;
   toggleAutoScroll: (enabled: boolean) => void;
 }
 
 export const StreamContext = createContext<StreamContextValue>({
   lastDetail: null,
+  planMap: null,
   setUserClosedAside: () => {},
   toggleAutoScroll: () => {},
 });

bricks/ai-portal/src/chat-stream/useConversationStream.ts

@@ -18,6 +18,7 @@ export interface UseConversationStreamOptions {
   showHumanActions?: boolean;
   skipActivitySubTasks?: boolean;
   rootTaskId?: string;
+  expandAskUser?: boolean;
 }
 
 export function useConversationStream(
@@ -33,24 +34,31 @@ export function useConversationStream(
     rootTaskId,
     flowMap,
     activityMap,
+    expandAskUser,
   } = options || {};
 
   return useMemo(() => {
     if (!conversationAvailable) {
       return {
         messages: [],
         lastDetail: null,
+        planMap: null,
         activeAskUser: null,
       };
     }
 
-    const { chunks, jobMap, activeAskUser } = getFlatChunks(tasks, errors, {
-      flowMap,
-      activityMap,
-      skipActivitySubTasks,
-      enablePlan: true,
-      rootTaskId,
-    });
+    const { chunks, jobMap, planMap, activeAskUser } = getFlatChunks(
+      tasks,
+      errors,
+      {
+        flowMap,
+        activityMap,
+        skipActivitySubTasks,
+        enablePlan: true,
+        rootTaskId,
+        expandAskUser,
+      }
+    );
     const messages: ChatMessage[] = [];
 
     let prevAssistantMessage: MessageFromAssistant = {
@@ -147,7 +155,7 @@ export function useConversationStream(
       messages.push(prevAssistantMessage);
     }
 
-    return { messages, jobMap, lastDetail, activeAskUser };
+    return { messages, jobMap, planMap, lastDetail, activeAskUser };
   }, [
     conversationAvailable,
     state,
@@ -158,5 +166,6 @@ export function useConversationStream(
     showHumanActions,
     skipActivitySubTasks,
     rootTaskId,
+    expandAskUser,
   ]);
 }

bricks/ai-portal/src/cruise-canvas/reducers/tasks.ts

@@ -141,6 +141,7 @@ function mergeJobs(
         "cmd",
         "mentionedAiEmployeeId",
         "hil",
+        "summary",
       ]);
       if (aiEmployeeId !== undefined) {
         restMessagesPatch.aiEmployeeId = aiEmployeeId;

bricks/ai-portal/src/cruise-canvas/useConversationGraph.ts

@@ -39,8 +39,6 @@ export function useConversationGraph(
     const { chunks, jobMap } = getFlatChunks(tasks, errors, {
       flowMap,
       activityMap,
-      skipActivitySubTasks: false,
-      enablePlan: true,
     });
 
     const nodes: GraphNode[] = [];

bricks/ai-portal/src/shared/ActivityPlan/ActivityPlan.module.css

@@ -22,6 +22,10 @@
     border: 1px solid rgba(0, 0, 0, 0.1);
     backdrop-filter: blur(10px);
     cursor: pointer;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.8);
+    }
   }
 }
 
@@ -180,4 +184,8 @@
   border-radius: 13px;
   color: rgba(0, 0, 0, 0.65);
   cursor: pointer;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.06);
+  }
 }

bricks/ai-portal/src/shared/ActivityPlan/ActivityPlan.tsx

@@ -3,6 +3,7 @@ import React, {
   Fragment,
   useContext,
   useMemo,
+  useRef,
   useState,
 } from "react";
 import { initializeI18n } from "@next-core/i18n";
@@ -40,6 +41,7 @@ export function ActivityPlan({ task }: ActivityPlanProps) {
   const { flowMap, setActiveDetail } = useContext(TaskContext);
   const { toggleAutoScroll } = useContext(StreamContext);
   const flow = flowMap?.get(task.id);
+  const toggleRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   return (
     <ActivityPlanContext.Provider value={{ collapsed }}>
@@ -71,6 +73,12 @@ export function ActivityPlan({ task }: ActivityPlanProps) {
             onClick={() => {
               setCollapsed((prev) => !prev);
               toggleAutoScroll(false);
+              if (toggleRef.current) {
+                clearTimeout(toggleRef.current);
+              }
+              toggleRef.current = setTimeout(() => {
+                toggleAutoScroll(true);
+              }, 100);
             }}
           >
             {t(K.SHOW_PROCESS)}

bricks/ai-portal/src/shared/ActivityPlan/PlanStateIcon.tsx

@@ -33,11 +33,7 @@ export function PlanStateIcon({ state, filled }: PlanStateIconProps) {
               }
             )}
           >
-            <WrappedIcon
-              lib="lucide"
-              icon="check"
-              strokeWidth={filled ? 5 : 3}
-            />
+            <WrappedIcon lib="lucide" icon="check" strokeWidth={5} />
           </span>
         );
       }