wip(chat-db): render message tree.

Author: MarcMcIntosh

refact-agent/gui/src/components/Chat/Chat.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { ChatForm, ChatFormProps } from "../ChatForm";
+import { ChatForm } from "../ChatForm";
 import { ChatContent } from "../ChatContent";
 import { Flex, Button, Text, Card } from "@radix-ui/themes";
 import {

refact-agent/gui/src/components/ChatContent/ChatContent.tsx

@@ -22,7 +22,6 @@ import {
   selectIntegration,
   selectIsStreaming,
   selectIsWaiting,
-  selectMessages,
   selectThread,
   selectThreadUsage,
 } from "../../features/Chat/Thread/selectors";
@@ -35,6 +34,8 @@ import { telemetryApi } from "../../services/refact/telemetry";
 import { PlaceHolderText } from "./PlaceHolderText";
 import { UsageCounter } from "../UsageCounter";
 import { getConfirmationPauseStatus } from "../../features/ToolConfirmation/confirmationSlice";
+import { MessageNode } from "../MessageNode";
+import { chatDbMessagesSliceSelectors } from "../../features/ChatDB/chatDbMessagesSlice";
 
 export type ChatContentProps = {
   onRetry: (index: number, question: UserMessage["content"]) => void;
@@ -43,11 +44,9 @@ export type ChatContentProps = {
 
 export const ChatContent: React.FC<ChatContentProps> = ({
   onStopStreaming,
-  onRetry,
 }) => {
   const dispatch = useAppDispatch();
   const scrollRef = useRef<HTMLDivElement>(null);
-  const messages = useAppSelector(selectMessages);
   const isStreaming = useAppSelector(selectIsStreaming);
   const thread = useAppSelector(selectThread);
   const threadUsage = useAppSelector(selectThreadUsage);
@@ -57,6 +56,9 @@ export const ChatContent: React.FC<ChatContentProps> = ({
     telemetryApi.useLazySendTelemetryChatEventQuery();
   const integrationMeta = useAppSelector(selectIntegration);
   const isWaitingForConfirmation = useAppSelector(getConfirmationPauseStatus);
+  const messageTree = useAppSelector(
+    chatDbMessagesSliceSelectors.selectMessageTree,
+  );
 
   const {
     handleScroll,
@@ -67,10 +69,6 @@ export const ChatContent: React.FC<ChatContentProps> = ({
     scrollRef,
   });
 
-  const onRetryWrapper = (index: number, question: UserMessage["content"]) => {
-    onRetry(index, question);
-  };
-
   const handleReturnToConfigurationClick = useCallback(() => {
     // console.log(`[DEBUG]: going back to configuration page`);
     // TBD: should it be allowed to run in the background?
@@ -121,10 +119,11 @@ export const ChatContent: React.FC<ChatContentProps> = ({
         p="2"
         gap="1"
       >
-        {messages.length === 0 && <PlaceHolderText />}
-        {renderMessages(messages, onRetryWrapper)}
-        <UncommittedChangesWarning />
-        {threadUsage && messages.length > 0 && <UsageCounter />}
+        {!messageTree && <PlaceHolderText />}
+        {/* {renderMessages(messages, onRetryWrapper)} */}
+        <MessageNode>{messageTree}</MessageNode>
+        {!messageTree && <UncommittedChangesWarning />}
+        {threadUsage && messageTree && <UsageCounter />}
 
         <Container py="4">
           <Spinner
@@ -176,7 +175,8 @@ export const ChatContent: React.FC<ChatContentProps> = ({
 
 ChatContent.displayName = "ChatContent";
 
-function renderMessages(
+// TODO: can delete
+function _renderMessages(
   messages: ChatMessages,
   onRetry: (index: number, question: UserMessage["content"]) => void,
   memo: React.ReactNode[] = [],
@@ -185,13 +185,13 @@ function renderMessages(
   if (messages.length === 0) return memo;
   const [head, ...tail] = messages;
   if (head.role === "tool") {
-    return renderMessages(tail, onRetry, memo, index + 1);
+    return _renderMessages(tail, onRetry, memo, index + 1);
   }
 
   if (head.role === "plain_text") {
     const key = "plain-text-" + index;
     const nextMemo = [...memo, <PlainText key={key}>{head.content}</PlainText>];
-    return renderMessages(tail, onRetry, nextMemo, index + 1);
+    return _renderMessages(tail, onRetry, nextMemo, index + 1);
   }
 
   if (head.role === "assistant") {
@@ -207,7 +207,7 @@ function renderMessages(
       />,
     ];
 
-    return renderMessages(tail, onRetry, nextMemo, index + 1);
+    return _renderMessages(tail, onRetry, nextMemo, index + 1);
   }
 
   if (head.role === "user") {
@@ -219,13 +219,13 @@ function renderMessages(
         {head.content}
       </UserInput>,
     ];
-    return renderMessages(tail, onRetry, nextMemo, index + 1);
+    return _renderMessages(tail, onRetry, nextMemo, index + 1);
   }
 
   if (isChatContextFileMessage(head)) {
     const key = "context-file-" + index;
     const nextMemo = [...memo, <ContextFiles key={key} files={head.content} />];
-    return renderMessages(tail, onRetry, nextMemo, index + 1);
+    return _renderMessages(tail, onRetry, nextMemo, index + 1);
   }
 
   if (isDiffMessage(head)) {
@@ -240,13 +240,13 @@ function renderMessages(
 
     const nextMemo = [...memo, <GroupedDiffs key={key} diffs={diffMessages} />];
 
-    return renderMessages(
+    return _renderMessages(
       nextTail,
       onRetry,
       nextMemo,
       index + diffMessages.length,
     );
   }
 
-  return renderMessages(tail, onRetry, memo, index + 1);
+  return _renderMessages(tail, onRetry, memo, index + 1);
 }

refact-agent/gui/src/components/ChatLinks/UncommittedChangesWarning.tsx

@@ -5,7 +5,6 @@ import { Flex, Separator } from "@radix-ui/themes";
 import {
   selectIsStreaming,
   selectIsWaiting,
-  selectMessages,
   selectThreadToolUse,
 } from "../../features/Chat";
 import { getErrorMessage } from "../../features/Errors/errorsSlice";
@@ -18,15 +17,13 @@ export const UncommittedChangesWarning: React.FC = () => {
   const error = useAppSelector(getErrorMessage);
   const information = useAppSelector(getInformationMessage);
   const toolUse = useAppSelector(selectThreadToolUse);
-  const messages = useAppSelector(selectMessages);
 
   const hasCallout = React.useMemo(() => {
     return !!error || !!information;
   }, [error, information]);
 
   if (
     toolUse !== "agent" ||
-    messages.length !== 0 ||
     hasCallout ||
     isStreaming ||
     isWaiting ||

refact-agent/gui/src/components/MessageNode/MessageNode.tsx

@@ -57,7 +57,9 @@ const ElementForNodeMessage: React.FC<{ message: ChatMessage }> = ({
   return false;
 };
 
-export type MessageNodeProps = { children?: CMessageNode };
+export type MessageNodeProps = { children?: CMessageNode | null };
+
+// TODO: update tracking the end point
 export const MessageNode: React.FC<MessageNodeProps> = ({ children }) => {
   const dispatch = useAppDispatch();
 
@@ -104,9 +106,25 @@ const UserMessageNode: React.FC<{ children: UserCMessageNode[] }> = ({
   children,
 }) => {
   // info about the node may need to be shared with the user input
+  const dispatch = useAppDispatch();
   const [selectedNodeIndex, setSelectedNodeIndex] = React.useState<number>(0);
 
   const selectedNode = children[selectedNodeIndex];
+
+  useEffect(() => {
+    if (selectedNode.children.length === 0) {
+      const action = chatDbMessageSliceActions.setEnd({
+        number: selectedNode.message.cmessage_num,
+        alt: selectedNode.message.cmessage_alt,
+      });
+      dispatch(action);
+    }
+  }, [
+    selectedNode.children.length,
+    selectedNode.message.cmessage_num,
+    selectedNode.message.cmessage_alt,
+    dispatch,
+  ]);
   return (
     <>
       <IconButton

refact-agent/gui/src/features/ChatDB/chatDbMessagesSlice.ts

@@ -8,7 +8,7 @@ import {
   isUserCMessage,
 } from "../../services/refact";
 import { parseOrElse } from "../../utils";
-import { makeMessageTree } from "./makeMessageTree";
+import { makeMessageTree, sortMessageList } from "./makeMessageTree";
 import { pagesSlice } from "../Pages/pagesSlice";
 
 export interface CMessageNode {
@@ -91,12 +91,7 @@ export const chatDbMessageSlice = createSlice({
         state.messageList[updateIndex] = message;
       } else {
         state.messageList.push(message);
-        state.messageList.sort((a, b) => {
-          if (a.cmessage_num === b.cmessage_num) {
-            return a.cmessage_alt - b.cmessage_alt;
-          }
-          return a.cmessage_num - b.cmessage_num;
-        });
+        state.messageList = sortMessageList(state.messageList);
       }
     },
     setEnd: (state, action: PayloadAction<{ number: number; alt: number }>) => {

refact-agent/gui/src/features/ChatDB/makeMessageTree.ts

@@ -6,10 +6,17 @@ const isRoot = (message: CMessage): boolean => {
   return message.cmessage_prev_alt === -1;
 };
 
+export function sortMessageList(messages: CMessage[]): CMessage[] {
+  return messages.slice(0).sort((a, b) => {
+    if (a.cmessage_num === b.cmessage_num) {
+      return a.cmessage_alt - b.cmessage_alt;
+    }
+    return a.cmessage_num - b.cmessage_num;
+  });
+}
+
 export const makeMessageTree = (messages: CMessage[]): CMessageNode | null => {
-  const sortedMessages = messages
-    .slice()
-    .sort((a, b) => a.cmessage_num - b.cmessage_num);
+  const sortedMessages = sortMessageList(messages);
 
   const [nodes, roots] = partition(sortedMessages, isRoot);
   if (roots.length === 0) return null;

refact-agent/gui/src/hooks/useThreadMessageSubmit.ts

@@ -75,8 +75,8 @@ export function useThreadMessageSubmit() {
         const systemCMessage: CMessage = {
           cmessage_belongs_to_cthread_id: threadId,
           cmessage_alt: 0,
-          cmessage_num: -1,
-          cmessage_prev_alt: 0,
+          cmessage_num: 0,
+          cmessage_prev_alt: -1,
           cmessage_usage_model: threadModel, // could be default
           cmessage_usage_prompt: 0,
           cmessage_usage_completion: 0,