From 18160ca3a6d1026efb03d2fb79c1bc81bd752558 Mon Sep 17 00:00:00 2001
From: axel7083 <42176370+axel7083@users.noreply.github.com>
Date: Tue, 30 Jan 2024 12:24:43 +0100
Subject: [PATCH] feat: propagate error playground

---
 packages/backend/src/managers/playground.ts   | 15 ++++++++----
 packages/frontend/src/lib/ErrorMessage.svelte | 23 +++++++++++++++++++
 .../frontend/src/pages/ModelPlayground.svelte | 16 +++++++++++++
 .../src/models/IPlaygroundQueryState.ts       |  1 +
 4 files changed, 50 insertions(+), 5 deletions(-)
 create mode 100644 packages/frontend/src/lib/ErrorMessage.svelte

diff --git a/packages/backend/src/managers/playground.ts b/packages/backend/src/managers/playground.ts
index 596d830fa..54e017487 100644
--- a/packages/backend/src/managers/playground.ts
+++ b/packages/backend/src/managers/playground.ts
@@ -178,11 +178,11 @@ export class PlayGroundManager {
       throw new Error('model is not running');
     }
 
-    const query = {
+    const query: QueryState = {
       id: this.getNextQueryId(),
       modelId: modelInfo.id,
       prompt: prompt,
-    } as QueryState;
+    };
 
     const post_data = JSON.stringify({
       model: modelInfo.file,
@@ -213,17 +213,22 @@ export class PlayGroundManager {
           if (!q) {
             throw new Error('query not found in state');
           }
+          q.error = undefined;
           q.response = result as ModelResponse;
           this.queries.set(query.id, q);
-          this.sendQueriesState().catch((err: unknown) => {
-            console.error('playground: unable to send the response to the frontend', err);
-          });
+          void this.sendQueriesState();
         }
       });
     });
     // post the data
     post_req.write(post_data);
     post_req.end();
+    post_req.on('error', (error) => {
+      console.error('connection on error.');
+      const q = this.queries.get(query.id);
+      q.error = `Something went wrong while trying to request model.${String(error)}`;
+      void this.sendQueriesState();
+    });
 
     this.queries.set(query.id, query);
     await this.sendQueriesState();
diff --git a/packages/frontend/src/lib/ErrorMessage.svelte b/packages/frontend/src/lib/ErrorMessage.svelte
new file mode 100644
index 000000000..7751df732
--- /dev/null
+++ b/packages/frontend/src/lib/ErrorMessage.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import Fa from 'svelte-fa';
+  import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
+  import Tooltip from './Tooltip.svelte';
+
+  export let error: string;
+  export let icon = false;
+</script>
+
+{#if icon}
+  {#if error !== undefined && error !== ''}
+    <Tooltip tip="{error}" top>
+      <Fa size="18" class="cursor-pointer text-red-500 {$$props.class}" icon="{faExclamationCircle}" />
+    </Tooltip>
+  {/if}
+{:else}
+  <div
+    class="text-red-500 p-1 flex flex-row items-center {$$props.class}"
+    class:opacity-0="{error === undefined || error === ''}">
+    <Fa size="18" class="cursor-pointer text-red-500" icon="{faExclamationCircle}" />
+    <div role="alert" aria-label="Error Message Content" class="ml-2">{error}</div>
+  </div>
+{/if}
diff --git a/packages/frontend/src/pages/ModelPlayground.svelte b/packages/frontend/src/pages/ModelPlayground.svelte
index 7394256b9..b540e3b98 100644
--- a/packages/frontend/src/pages/ModelPlayground.svelte
+++ b/packages/frontend/src/pages/ModelPlayground.svelte
@@ -12,11 +12,13 @@
   export let model: ModelInfo | undefined;
   import Fa from 'svelte-fa';
   import { faPlay, faStop, faInfo, faWarning } from '@fortawesome/free-solid-svg-icons';
+  import ErrorMessage from '/@/lib/ErrorMessage.svelte';
 
   let prompt = '';
   let queryId: number;
   let result: ModelResponseChoice | undefined = undefined;
   let inProgress = false;
+  let error: string | undefined = undefined;
   let playgroundState: PlaygroundState | undefined = undefined;
 
   onMount(() => {
@@ -53,6 +55,12 @@
   });
 
   function displayQuery(query: QueryState) {
+    if(query.error) {
+      error = query.error;
+      inProgress = false;
+      return;
+    }
+
     if (query.response) {
       inProgress = false;
       prompt = query.prompt;
@@ -72,6 +80,8 @@
     }
     inProgress = true;
     result = undefined;
+    error = undefined;
+
     // do not display anything before we get a response from askPlayground
     // (we can receive a new queryState before the new QueryId)
     queryId = -1;
@@ -150,6 +160,11 @@
 </script>
 
 <div class="m-4 w-full flew flex-col">
+  {#if error}
+    <div class="mb-2">
+      <ErrorMessage error="{error}"/>
+    </div>
+  {/if}
   <Card classes="bg-charcoal-800">
     <div slot="content" class="my-2 mx-4 w-full text-base font-normal flex flex-row items-center">
       {#key playgroundState?.status}
@@ -167,6 +182,7 @@
     placeholder="Type your prompt here"></textarea>
 
   <div class="mt-4 text-right">
+    <span>inProgress: {inProgress}</span>
     {#key playgroundState?.status}
       <Button disabled={!isPromptable()} inProgress={inProgress} on:click={() => askPlayground()}>Send Request</Button>
     {/key}
diff --git a/packages/shared/src/models/IPlaygroundQueryState.ts b/packages/shared/src/models/IPlaygroundQueryState.ts
index 9f8ae9349..32483bdaf 100644
--- a/packages/shared/src/models/IPlaygroundQueryState.ts
+++ b/packages/shared/src/models/IPlaygroundQueryState.ts
@@ -5,4 +5,5 @@ export interface QueryState {
   modelId: string;
   prompt: string;
   response?: ModelResponse;
+  error?: string;
 }