fix(): show error message when conversation finished early

Author: weareoutman

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

@@ -18,6 +18,8 @@ import type {
   ModalMapEvents,
 } from "@next-bricks/containers/modal";
 import { http } from "@next-core/http";
+import type { UseBrickConf } from "@next-core/types";
+import { ReactUseMultipleBricks } from "@next-core/react-runtime";
 import styles from "./styles.module.css";
 import type { ChatInput } from "../chat-input";
 import type {
@@ -39,13 +41,11 @@ import { AssistantMessage } from "../chat-stream/AssistantMessage/AssistantMessa
 import scrollStyles from "../chat-stream/ScrollDownButton.module.css";
 import floatingStyles from "../shared/FloatingButton.module.css";
 import backgroundImage from "../home-container/images/background.png";
-import { DONE_STATES } from "../shared/constants";
+import { DONE_STATES, NON_WORKING_STATES } from "../shared/constants";
 import { WrappedChatInput, WrappedIcon } from "../shared/bricks";
 import { FilePreview } from "../shared/FilePreview/FilePreview.js";
 import { ImagesPreview } from "../shared/FilePreview/ImagesPreview.js";
 import { TaskContext, type TaskContextValue } from "../shared/TaskContext";
-import type { UseBrickConf } from "@next-core/types";
-import { ReactUseMultipleBricks } from "@next-core/react-runtime";
 
 const WrappedModal = wrapBrick<
   Modal,
@@ -327,6 +327,9 @@ function LegacyChatPanelComponent(
     [handleChatSubmit]
   );
 
+  const earlyFinished =
+    conversation?.finished && !NON_WORKING_STATES.includes(conversationState!);
+
   return (
     <TaskContext.Provider value={taskContextValue}>
       <WrappedModal
@@ -365,11 +368,17 @@ function LegacyChatPanelComponent(
                         <AssistantMessage
                           chunks={msg.chunks}
                           scopeState={conversation.state}
-                          isLatest={index === list.length - 1}
+                          isLatest={index === list.length - 1 && !earlyFinished}
+                          finished={conversation.finished}
                         />
                       )}
                     </div>
                   ))}
+                  {earlyFinished && (
+                    <div className={styles.message}>
+                      <AssistantMessage earlyFinished />
+                    </div>
+                  )}
                 </div>
               </div>
               <button

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

@@ -17,19 +17,33 @@ import { NodeChunk } from "../NodeChunk/NodeChunk";
 import { HumanInTheLoop } from "../HumanInTheLoop/HumanInTheLoop";
 
 export interface AssistantMessageProps {
-  chunks: MessageChunk[];
-  scopeState: ConversationState | TaskState | JobState | undefined;
+  chunks?: MessageChunk[];
+  scopeState?: ConversationState | TaskState | JobState | undefined;
   isLatest?: boolean;
   isSubTask?: boolean;
+  finished?: boolean;
+  earlyFinished?: boolean;
 }
 
+const EARLY_FINISHED_ERROR_CHUNK: MessageChunk = {
+  type: "error",
+  error:
+    "The conversation was marked as finished early due to an unexpected issue.\nPlease refresh the page or try again later.",
+};
+
 export function AssistantMessage({
   chunks,
   scopeState,
   isLatest,
   isSubTask,
+  finished,
+  earlyFinished,
 }: AssistantMessageProps) {
   const [working, lastJob] = useMemo(() => {
+    if (!chunks || chunks.length === 0) {
+      return [false, undefined];
+    }
+
     const lastChunk = chunks[chunks.length - 1];
     let lastJob: Job | undefined;
     if (lastChunk) {
@@ -79,10 +93,10 @@ export function AssistantMessage({
         className={styles.avatar}
       />
       <div className={styles.body}>
-        {chunks.map((chunk, index) => (
+        {chunks?.map((chunk, index) => (
           <NodeChunk key={index} chunk={chunk} isSubTask={isSubTask} />
         ))}
-        {working && <div className={styles.texting}></div>}
+        {working && !finished && <div className={styles.texting}></div>}
         {isLatest &&
           lastJob &&
           !GENERAL_DONE_STATES.includes(scopeState) &&
@@ -98,6 +112,7 @@ export function AssistantMessage({
               />
             )
           ))}
+        {earlyFinished && <NodeChunk chunk={EARLY_FINISHED_ERROR_CHUNK} />}
       </div>
     </div>
   );

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

@@ -17,7 +17,11 @@ import { UserMessage } from "./UserMessage/UserMessage.js";
 import { AssistantMessage } from "./AssistantMessage/AssistantMessage.js";
 import { TaskContext } from "../shared/TaskContext.js";
 import { ChatBox } from "../shared/ChatBox/ChatBox.js";
-import { DONE_STATES, ICON_CANVAS } from "../shared/constants.js";
+import {
+  DONE_STATES,
+  ICON_CANVAS,
+  NON_WORKING_STATES,
+} from "../shared/constants.js";
 import { ExpandedView } from "../shared/ExpandedView/ExpandedView.js";
 import { Aside } from "./Aside/Aside.js";
 import { StreamContext } from "./StreamContext.js";
@@ -384,6 +388,11 @@ export function ChatStreamComponent(
     scrollContainerRef.current?.focus();
   }, [conversationAvailable, depsReady]);
 
+  const earlyFinished =
+    !replay &&
+    conversation?.finished &&
+    !NON_WORKING_STATES.includes(conversationState!);
+
   return (
     <TaskContext.Provider value={taskContextValue}>
       <StreamContext.Provider value={streamContextValue}>
@@ -412,11 +421,17 @@ export function ChatStreamComponent(
                         <AssistantMessage
                           chunks={msg.chunks}
                           scopeState={conversationState}
-                          isLatest={index === list.length - 1}
+                          isLatest={index === list.length - 1 && !earlyFinished}
+                          finished={conversation.finished}
                         />
                       )}
                     </div>
                   ))}
+                  {earlyFinished && (
+                    <div className={styles.message}>
+                      <AssistantMessage earlyFinished />
+                    </div>
+                  )}
                   {replay
                     ? conversation?.finished && (
                         <>