feat: show status msg using tool

Author: ObjectJosh

electron/src/frontend/lib/services/stateMachineService/stateMachine.ts

@@ -71,6 +71,7 @@ type ServerEventContext = {
     }
     gitError: string | null
     gitInit: string | null
+    status: string | null //'idle' | 'thinking' | 'executing' | 'waiting_for_user'
 }
 
 export const eventHandlingLogic = fromTransition(
@@ -95,12 +96,13 @@ export const eventHandlingLogic = fromTransition(
                 return { ...state, ended: true }
             }
             case 'ModelRequest': {
-                return { ...state, modelLoading: true }
+                return { ...state, modelLoading: true, status: 'thinking' }
             }
             case 'ModelResponse': {
                 const content = JSON.parse(event.content)
                 return {
                     ...state,
+                    status: 'idle',
                     modelLoading: false,
                     messages: [
                         ...state.messages,
@@ -135,13 +137,16 @@ export const eventHandlingLogic = fromTransition(
             case 'ToolRequest': {
                 return {
                     ...state,
+                    status: 'executing',
+                    toolLoading: true,
                     toolMessage:
                         'Running command: ' + event.content.raw_command.trim(),
                 }
             }
             case 'Checkpoint': {
                 return {
                     ...state,
+                    status: 'idle',
                     messages: [
                         ...state.messages,
                         { text: event.content, type: 'checkpoint' } as Message,
@@ -153,6 +158,7 @@ export const eventHandlingLogic = fromTransition(
                     state.toolMessage + '|START_RESPONSE|' + event.content
                 return {
                     ...state,
+                    toolLoading: false,
                     toolMessage: '',
                     messages: [
                         ...state.messages,
@@ -181,6 +187,7 @@ export const eventHandlingLogic = fromTransition(
             case 'UserRequest': {
                 return {
                     ...state,
+                    status: 'waiting_for_user',
                     userRequest: true,
                     messages: [
                         ...state.messages,
@@ -292,6 +299,7 @@ export const eventHandlingLogic = fromTransition(
         },
         gitError: null,
         gitInit: null,
+        status: 'idle',
     }
 )
 

electron/src/frontend/panels/chat/chat-panel.tsx

@@ -48,6 +48,7 @@ export default function Chat({
     const eventState = SessionMachineContext.useSelector(
         state => state.context.serverEventContext
     )
+
     const isPaused = SessionMachineContext.useActorRef()
         .getSnapshot()
         .matches('paused')

electron/src/frontend/panels/chat/components/input/chat-input-field.tsx

@@ -48,13 +48,16 @@ const ChatInputField = ({
     const disableInput = loading || timeTraveling
     const prevProjectPath = useRef<string>('')
 
-    const [openProjectModal, setOpenProjectModal] = useState(false)
-    const { backendUrl } = useBackendUrl()
+    // const [openProjectModal, setOpenProjectModal] = useState(false)
+    // const { backendUrl } = useBackendUrl()
 
     const sessionActorRef = SessionMachineContext.useActorRef()
     const projectPath = SessionMachineContext.useSelector(
         state => state?.context?.sessionConfig?.path
     )
+    const status = SessionMachineContext.useSelector(
+        state => state?.context?.serverEventContext?.status
+    )
 
     useEffect(() => {
         // For autofilling the input field after finished loading (after a revert)
@@ -177,6 +180,7 @@ const ChatInputField = ({
                     paused={sessionActorRef.getSnapshot().matches('paused')}
                     pauseHandler={handlePause}
                     backInTime={Boolean(checkpointTracker?.selected)}
+                    status={status}
                 />
             )}
 
@@ -276,13 +280,15 @@ const InformationBox = ({
     paused,
     pauseHandler,
     backInTime,
+    status,
 }: {
     modelLoading: boolean
     userRequested: boolean
     loading: boolean
     paused: boolean
     pauseHandler: () => void
     backInTime: boolean
+    status: string | null
 }) => {
     const types: {
         [key: string]: {
@@ -314,8 +320,15 @@ const InformationBox = ({
             text: 'Devon is time traveling with you...',
             accessory: <></>,
         },
+        executing: {
+            text: 'Devon is using a tool...',
+            accessory: (
+                <PauseButton paused={paused} pauseHandler={pauseHandler} />
+            ),
+        },
         error: {
             // text: 'Something went wrong',
+            // text: 'Something unexpected occurred',
             text: 'Devon is cleaning up his desk...',
             accessory: <></>,
         },
@@ -327,12 +340,13 @@ const InformationBox = ({
     } else if (backInTime) {
         currentType = types.backInTime
     } else if (paused) {
-        // console.log("type is paused")
         currentType = types.paused
     } else if (modelLoading) {
         currentType = types.modelLoading
     } else if (userRequested) {
         currentType = types.userRequested
+    } else if (status === 'executing') {
+        currentType = types.executing
     } else {
         currentType = types.error
     }