Show prompt errors

rilldata · Mar 21, 2024 · 61c03ea · 61c03ea
1 parent 00be544
commit 61c03ea
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 8 deletions.
diff --git a/web-common/src/features/charts/prompt/ChartPromptStatusDisplay.svelte b/web-common/src/features/charts/prompt/ChartPromptStatusDisplay.svelte
@@ -1,20 +1,28 @@
 <script lang="ts">
+  import CancelCircle from "@rilldata/web-common/components/icons/CancelCircle.svelte";
   import {
     chartPromptsStore,
     ChartPromptStatus,
   } from "@rilldata/web-common/features/charts/prompt/chartPrompt";
-  import Spinner from "@rilldata/web-common/features/entity-management/Spinner.svelte";
-  import { EntityStatus } from "@rilldata/web-common/features/entity-management/types";
 
   export let chartName: string;
 
   $: chartPrompt = chartPromptsStore.getStatusForChart(chartName);
 </script>
 
 <!-- TODO: handle prompt error -->
-{#if $chartPrompt && $chartPrompt.status !== ChartPromptStatus.Idle && $chartPrompt.status !== ChartPromptStatus.Error}
+{#if $chartPrompt && $chartPrompt?.status === ChartPromptStatus.Error}
+  <div class="flex flex-row gap-x-2 text-red-600">
+    <CancelCircle size="16px" />
+    <div class="flex flex-col gap-y-2">
+      <div>Failed to generate chart using AI</div>
+      <div>Using prompt: "{$chartPrompt.prompt}"</div>
+      <div>{$chartPrompt.error}</div>
+    </div>
+  </div>
+{:else if $chartPrompt && $chartPrompt.status !== ChartPromptStatus.Idle}
   <div class="flex flex-row gap-x-2">
-    <Spinner size="16px" status={EntityStatus.Running} />
+    <CancelCircle size="16px" />
     <div class="flex flex-col gap-y-2">
       <div>
         Generating {$chartPrompt.status === ChartPromptStatus.GeneratingData

diff --git a/web-common/src/features/charts/prompt/chartPrompt.ts b/web-common/src/features/charts/prompt/chartPrompt.ts
@@ -14,7 +14,7 @@ export type ChartPrompt = {
   prompt: string;
   time: number;
   status: ChartPromptStatus;
-  // TODO: store error as well?
+  error?: string;
 };
 
 export type ChartPromptHistory = {
@@ -74,6 +74,20 @@ export class ChartPromptsStore {
     });
   }
 
+  public setPromptError(chartName: string, error: string) {
+    this.chartStatus.update((cs) => {
+      if (cs[chartName]) {
+        cs[chartName].status = ChartPromptStatus.Error;
+        cs[chartName].error = error;
+      }
+      return cs;
+    });
+    this.history.update((h) => {
+      if (!h.entities[chartName]?.length) return;
+      h.entities[chartName][0].status = ChartPromptStatus.Error;
+    });
+  }
+
   private addToHistory(entityName: string, newEntry: ChartPrompt) {
     let history = get(this.history);
     history.entities[entityName] ??= [];

diff --git a/web-common/src/features/charts/prompt/generateChart.ts b/web-common/src/features/charts/prompt/generateChart.ts
@@ -43,7 +43,10 @@ export function createChartGenerator(instanceId: string, chart: string) {
         ),
       });
     } catch (e) {
-      chartPromptsStore.updatePromptStatus(chart, ChartPromptStatus.Error);
+      chartPromptsStore.setPromptError(
+        chart,
+        e.message ?? e.response.data.message,
+      );
     }
   };
 }
@@ -119,9 +122,9 @@ export function createFullChartGenerator(instanceId: string) {
         ),
       });
     } catch (e) {
-      chartPromptsStore.updatePromptStatus(
+      chartPromptsStore.setPromptError(
         newChartName,
-        ChartPromptStatus.Error,
+        e.message ?? e.response.data.message,
       );
     }
   };