ChatInput Revamp (#574)

This PR revamps the design of `ChatInput` to better respond to error
messages when sending the message or streaming a response. Error
messages now appear right above the text input and there's logic to
remove `optimisticMessage`s when the error occurs before the message is
added to the thread.

Author: ekassos

pingpong/ai.py

@@ -320,8 +320,8 @@ async def run_thread(
                 yield (
                     orjson.dumps(
                         {
-                            "type": "error",
-                            "detail": "OpenAI was unable to process your request. Please refresh the page and try again. If the issue persists, check https://pingpong-hks.statuspage.io/.",
+                            "type": "rate_limit_error",
+                            "detail": "OpenAI was unable to process your request. If the issue persists, check PingPong's status page for updates.",
                         }
                     )
                     + b"\n"
@@ -336,8 +336,8 @@ async def run_thread(
                     # openai_error.message returns the entire error message in a string with all parameters. We can use the body to get the message if it exists, or we fall back to the whole thing.
                     orjson.dumps(
                         {
-                            "type": "error",
-                            "detail": "OpenAI was unable to process your request: "
+                            "type": "presend_error",
+                            "detail": "OpenAI was unable to process your request. "
                             + str(
                                 openai_error.body.get("message") or openai_error.message
                             ),
@@ -351,7 +351,7 @@ async def run_thread(
     except (ValueError, Exception) as e:
         try:
             logger.warning(f"Error adding new thread message: {e}")
-            yield orjson.dumps({"type": "error", "detail": str(e)}) + b"\n"
+            yield orjson.dumps({"type": "presend_error", "detail": str(e)}) + b"\n"
         except Exception as e_:
             logger.exception(f"Error writing to stream: {e_}")
             pass

pingpong/schemas.py

@@ -460,6 +460,15 @@ class UserGroup(BaseModel):
     explanation: list[list[str]] | None
 
 
+class SupervisorUser(BaseModel):
+    name: str | None = None
+    email: str
+
+
+class ClassSupervisors(BaseModel):
+    users: list[SupervisorUser]
+
+
 class ClassUsers(BaseModel):
     users: list[ClassUser]
     limit: int

pingpong/server.py

@@ -1112,6 +1112,36 @@ async def remove_canvas_connection(
     return {"status": "ok"}
 
 
+@v1.get(
+    "/class/{class_id}/supervisors",
+    dependencies=[Depends(Authz("can_view", "class:{class_id}"))],
+    response_model=schemas.ClassSupervisors,
+)
+async def list_class_supervisors(class_id: str, request: Request):
+    supervisor_ids = await request.state.authz.list_entities(
+        f"class:{class_id}",
+        "supervisor",
+        "user",
+    )
+    supervisors = await models.User.get_all_by_id(request.state.db, supervisor_ids)
+    supervisors_users = []
+    for supervisor in supervisors:
+        supervisors_users.append(
+            schemas.SupervisorUser(
+                name=(
+                    supervisor.display_name
+                    if supervisor.display_name
+                    else " ".join(
+                        filter(None, [supervisor.first_name, supervisor.last_name])
+                    )
+                    or None
+                ),
+                email=supervisor.email,
+            )
+        )
+    return {"users": supervisors_users}
+
+
 @v1.get(
     "/class/{class_id}/users",
     dependencies=[Depends(Authz("can_view_users", "class:{class_id}"))],
@@ -2057,11 +2087,11 @@ async def create_run(
             message=[],
             file_names=file_names,
         )
-    except Exception:
+    except Exception as e:
         logger.exception("Error running thread")
         raise HTTPException(
             status_code=500,
-            detail="We faced an error while sending your message.",
+            detail="We faced an error while sending your message. " + str(e),
         )
 
     return StreamingResponse(stream, media_type="text/event-stream")
@@ -2209,7 +2239,7 @@ async def send_message(
         logger.exception("Error running thread")
         raise HTTPException(
             status_code=500,
-            detail="We faced an error while sending your message.",
+            detail="We faced an error while sending your message. Please try again later.",
         )
     return StreamingResponse(stream, media_type="text/event-stream")
 

web/pingpong/src/lib/api.ts

@@ -39,6 +39,20 @@ export type ValidationError = {
   }[];
 };
 
+export class PresendError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = 'PresendError';
+  }
+}
+
+export class StreamError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = 'StreamError';
+  }
+}
+
 /**
  * Error response. The $status will be >= 400.
  */
@@ -1099,9 +1113,15 @@ const _doUpload = (
           resolve(info.response);
         } else {
           info.state = 'error';
-          info.response = {
-            error: xhr.responseText ? JSON.parse(xhr.responseText) : { detail: '' }
-          };
+          if (xhr.responseText) {
+            try {
+              info.response = { error: JSON.parse(xhr.responseText) };
+            } catch {
+              info.response = { error: { detail: xhr.responseText } };
+            }
+          } else {
+            info.response = { error: { detail: 'Unknown error.' } };
+          }
           reject(info.response);
         }
       }
@@ -1216,6 +1236,24 @@ export const getClassUsers = async (f: Fetcher, classId: number, opts?: GetClass
   };
 };
 
+export type ClassSupervisors = {
+  users: SupervisorUser[];
+};
+
+export type SupervisorUser = {
+  name: string | null;
+  email: string;
+};
+
+/**
+ * Fetch teachers in a class.
+ *
+ */
+export const getSupervisors = async (f: Fetcher, classId: number) => {
+  const url = `class/${classId}/supervisors`;
+  return await GET<never, ClassSupervisors>(f, url);
+};
+
 /**
  * Response type for getClassUsers.
  */
@@ -1725,6 +1763,16 @@ export type ThreadStreamErrorChunk = {
   detail: string;
 };
 
+export type ThreadPreSendErrorChunk = {
+  type: 'presend_error';
+  detail: string;
+};
+
+export type ThreadServerErrorChunk = {
+  type: 'server_error';
+  detail: string;
+};
+
 export type ThreadStreamDoneChunk = {
   type: 'done';
 };
@@ -1733,7 +1781,7 @@ export type ThreadHTTPErrorChunk = {
   detail: string;
 };
 
-export type ThreadValidationErrorChunk = {
+export type ThreadValidationError = {
   detail: {
     loc: string[];
     msg: string;
@@ -1745,6 +1793,8 @@ export type ThreadStreamChunk =
   | ThreadStreamMessageDeltaChunk
   | ThreadStreamMessageCreatedChunk
   | ThreadStreamErrorChunk
+  | ThreadPreSendErrorChunk
+  | ThreadServerErrorChunk
   | ThreadStreamDoneChunk
   | ThreadStreamToolCallCreatedChunk
   | ThreadStreamToolCallDeltaChunk;
@@ -1761,33 +1811,36 @@ const streamThreadChunks = (res: Response) => {
     .pipeThrough(new TextLineStream())
     .pipeThrough(new JSONStream());
   const reader = stream.getReader();
-  if (res.status !== 200 && res.status !== 422) {
+  if (res.status === 422) {
     return {
       stream,
       reader,
       async *[Symbol.asyncIterator]() {
         const error = await reader.read();
-        const error_ = error.value as ThreadHTTPErrorChunk;
-        yield { type: 'error', detail: error_.detail } as ThreadStreamErrorChunk;
+        const error_ = error.value as ThreadValidationError;
+        const message = error_.detail
+          .map((error) => {
+            const location = error.loc.join(' -> ');
+            return `Error at ${location}: ${error.msg}`;
+          })
+          .join('\n');
+        yield {
+          type: 'presend_error',
+          detail: `We were unable to send your message, because it was not accepted by our server: ${message}`
+        } as ThreadPreSendErrorChunk;
       }
     };
-  } else if (res.status === 422) {
+  } else if (res.status !== 200) {
     return {
       stream,
       reader,
       async *[Symbol.asyncIterator]() {
         const error = await reader.read();
-        const error_ = error.value as ThreadValidationErrorChunk;
-        const message = error_.detail
-          .map((error) => {
-            const location = error.loc.join(' -> ');
-            return `Error at ${location}: ${error.msg}`;
-          })
-          .join('\n');
+        const error_ = error.value as ThreadHTTPErrorChunk;
         yield {
-          type: 'error',
-          detail: `Your request was invalid: ${message}.`
-        } as ThreadStreamErrorChunk;
+          type: 'presend_error',
+          detail: `We were unable to send your message: ${error_.detail}`
+        } as ThreadPreSendErrorChunk;
       }
     };
   }