Update for new session states

Author: PatrickPijnappel

src/components/AssistantView.tsx

@@ -153,12 +153,16 @@ class AssistantView extends React.Component<Props, State> implements SessionCont
                     document.body
                 )}
             </div>
-        } else {
+        } else if (sessionState == 'initializing' || sessionState == 'waiting_for_data' || sessionState == 'validating_data') {
             return <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                 <img src='https://superluminal.dev/images/ai_new.gif' width="56px" height="56px" draggable={false} />
                 <div style={{ fontSize: '20px', fontWeight: 600, color: '#000000', marginTop: '8px' }}>Loading</div>
             </div>
-        }
+        } else { // 'error' | 'unavailable'
+            return <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', padding: '8px' }}>
+                <div style={{ fontSize: '14px', fontWeight: 600, color: '#000000', marginTop: '8px', textAlign: 'center' }}>An unexpected error occurred.<br />Please try again later.</div>
+            </div>
+        } 
     }
 
     getInputView(): any {
@@ -188,7 +192,7 @@ class AssistantView extends React.Component<Props, State> implements SessionCont
         this.setState({ user });
     }
 
-    onSessionStateUpdated(sessionState: SessionState) {
+    onSessionStateUpdated(sessionState: SessionState, error: string | null) {
         this.setState({ sessionState });
     }
 

src/controllers/SessionController.ts

@@ -8,7 +8,7 @@ import { SLWebSocket, SLWebSocketEventListener } from "../networking/WebSocket";
 import { TablePage, isTablePage } from "../models/TableInfo";
 
 export interface SessionControllerEventListener {
-    onSessionStateUpdated?: (sessionState: SessionState) => void;
+    onSessionStateUpdated?: (sessionState: SessionState, error: string | null) => void;
     onChatMessagesUpdated?: (chatMessages: ChatMessage[]) => void;
     onTablePageReceived?: (page: TablePage) => void;
 }
@@ -18,6 +18,7 @@ class SessionController implements SLWebSocketEventListener {
     user: { id: string, name: string } | null = null;
     projectID: string = "main";
     sessionState: SessionState = 'initializing';
+    error: string | null = null;
     authToken: string | null = null;
     chatMessages: ChatMessage[] = [];
 
@@ -56,7 +57,8 @@ class SessionController implements SLWebSocketEventListener {
         Server.getSession(this.authToken)
             .then((response) => {
                 this.sessionState = response.session_state;
-                this.listeners.forEach((listener) => listener.onSessionStateUpdated?.(response.session_state));
+                this.error = response.error;
+                this.listeners.forEach((listener) => listener.onSessionStateUpdated?.(response.session_state, response.error));
                 this.chatMessages = response.chat_history;
                 this.listeners.forEach((listener) => listener.onChatMessagesUpdated?.(response.chat_history));
             })
@@ -113,10 +115,12 @@ class SessionController implements SLWebSocketEventListener {
 
     onSessionStateUpdated(json: JSON) {
         const sessionState = json['session_state'];
+        const error = json['error'];
         if (!sessionState) { return; }
         this.sessionState = sessionState;
-        console.log(`Session state: ${sessionState}`);
-        this.listeners.forEach((listener) => listener.onSessionStateUpdated?.(sessionState));
+        this.error = error;
+        console.log(`Session state: ${sessionState}` + (error ? ` (${error})` : ''));
+        this.listeners.forEach((listener) => listener.onSessionStateUpdated?.(sessionState, error));
     }
 
     onAssistantStateUpdated(json: JSON) {

src/models/SessionState.ts

@@ -1,2 +1,2 @@
 
-export type SessionState = 'initializing' | 'waiting_for_data' | 'ready' | 'unavailable';
+export type SessionState = 'initializing' | 'waiting_for_data' | 'validating_data' | 'ready' | 'error' | 'unavailable';

src/networking/Server.ts

@@ -2,11 +2,17 @@
 import { ChatMessage } from "../models/ChatMessage";
 import { SessionState } from "../models/SessionState";
 
+type GetSessionResponse = {
+    session_state: SessionState,
+    error: string | null,
+    chat_history: ChatMessage[]
+}
+
 class Server {
 
     static baseURL = "https://app.getluminal.com";
 
-    static getSession(authToken: string): Promise<{ session_state: SessionState, chat_history: ChatMessage[] }> {
+    static getSession(authToken: string): Promise<GetSessionResponse> {
         return fetch(`${Server.baseURL}/session`, {
             method: "GET",
             headers: {