Track AssistantState & disable input on non-idle

Author: PatrickPijnappel

src/components/AssistantView.tsx

@@ -8,6 +8,7 @@ import ProfilePictureView from './ProfilePictureView';
 import SessionController, { SessionControllerEventListener } from '../controllers/SessionController';
 import TablePreview from '../table/TablePreview';
 
+import { AssistantState } from '../models/AssistantState';
 import { ChatMessage } from '../models/ChatMessage';
 import { SessionState } from '../models/SessionState';
 import { TableInfo } from '../models/TableInfo';
@@ -171,7 +172,7 @@ class AssistantView extends React.Component<Props, State> implements SessionCont
         const { isProcessing, sessionState } = this.state;
         const opacity = (isProcessing || sessionState != 'ready') ? 0.5 : 1;
         const inlineInputStyle = { border: 'solid', borderWidth: '1px', padding: '12px', borderColor: '#0000000D',
-            width: '100%', borderRadius: '6px', background: '#00000005', height: '36px', opacity };
+            width: '100%', borderRadius: '6px', background: '#00000005', height: '36px' };
         return <div ref={this.inputContainerRef} style={styles.inputContainer}>
             <InlineInput ref={this.inputRef} placeholder="Type here..." style={{ ...inlineInputStyle, ...inputStyle }} onEnter={this.sendChatMessage} />
             <div style={{ ...styles.sendButton, ...{ width: '96px', opacity }, ...sendButtonStyle }} onClick={this.sendChatMessage}>Send</div>
@@ -198,6 +199,10 @@ class AssistantView extends React.Component<Props, State> implements SessionCont
         this.setState({ sessionState });
     }
 
+    onAssistantStateUpdated(assistantState: AssistantState) {
+        this.setState({ isProcessing: (assistantState != 'idle') });
+    }
+
     onChatMessagesUpdated(chatMessages: ChatMessage[]) {
         this.setState({ chatMessages });
         setTimeout(() => {

src/controllers/SessionController.ts

@@ -2,13 +2,15 @@ import Server from "../networking/Server";
 
 import UUIDUtilities from "../utilities/UUIDUtilities";
 
+import { AssistantState } from "../models/AssistantState";
 import { ChatMessage } from "../models/ChatMessage";
 import { SessionState } from "../models/SessionState";
 import { SLWebSocket, SLWebSocketEventListener } from "../networking/WebSocket";
 import { TablePage, isTablePage } from "../models/TableInfo";
 
 export interface SessionControllerEventListener {
     onSessionStateUpdated?: (sessionState: SessionState, error: string | null) => void;
+    onAssistantStateUpdated?: (assistantState: AssistantState) => void;
     onChatMessagesUpdated?: (chatMessages: ChatMessage[]) => void;
     onTablePageReceived?: (page: TablePage) => void;
 }
@@ -17,6 +19,7 @@ class SessionController implements SLWebSocketEventListener {
     listeners: SessionControllerEventListener[] = [];
     projectID: string = "main";
     sessionState: SessionState = 'initializing';
+    assistantState: AssistantState = 'idle';
     error: string | null = null;
     authToken: string | null = null;
     chatMessages: ChatMessage[] = [];
@@ -117,24 +120,29 @@ class SessionController implements SLWebSocketEventListener {
         const content = json['content'];
         const sender = json['sender'];
         if (!id || !content || !sender) { return; }
+        if (sender == 'assistant') {
+            this.onAssistantStateUpdated({ assistant_reply_state: 'idle' })
+        }
         this.addChatMessage({ id: id, sender: sender, content: content, isEphemeral: false });
     }
 
     onSessionStateUpdated(json: any) {
-        const sessionState = json['session_state'];
-        const error = json['error'];
+        const sessionState: SessionState = json['session_state'];
+        const error: string | null = json['error'];
         if (!sessionState) { return; }
         this.sessionState = sessionState;
         this.error = error;
         console.log(`Session state: ${sessionState}` + (error ? ` (${error})` : ''));
         this.listeners.forEach((listener) => listener.onSessionStateUpdated?.(sessionState, error));
     }
 
-    onAssistantStateUpdated(json: any) {
-        const state = json['assistant_reply_state'];
-        if (!state) { return; }
+        const assistantState: AssistantState = json['assistant_reply_state'];
+        if (!assistantState) { return; }
+        this.assistantState = assistantState;
+        this.listeners.forEach((listener) => listener.onAssistantStateUpdated?.(assistantState));
+        // Add a matching ephemeral chat message
         let message: string | null = null;
-        switch (state) {
+        switch (assistantState) {
             case 'idle': break;
             case 'analyzing-data': message = 'Analyzing data...'; break;
             case 'analyzing-task': message = 'Analyzing task...'; break;

src/models/AssistantState.ts

@@ -0,0 +1,2 @@
+
+export type AssistantState = 'idle' | 'analyzing-data' | 'analyzing-task' | 'generating-code' | 'executing-code' | 'generating-explanation' | 'debugging-code' | 'generating-subtasks';