From a5db0370d727a73a23d4446ff7486c3823086d0e Mon Sep 17 00:00:00 2001
From: Altay <altay@zebrastik.com>
Date: Fri, 15 Dec 2023 14:25:26 +0300
Subject: [PATCH] feat: update error display

---
 .../episode-ai-thingy-generator.tsx           | 30 ++++++++-----------
 1 file changed, 12 insertions(+), 18 deletions(-)

diff --git a/components/episode-ai-thingy/episode-ai-thingy-generator.tsx b/components/episode-ai-thingy/episode-ai-thingy-generator.tsx
index abfa24a..d5ab8d2 100644
--- a/components/episode-ai-thingy/episode-ai-thingy-generator.tsx
+++ b/components/episode-ai-thingy/episode-ai-thingy-generator.tsx
@@ -7,8 +7,9 @@ import {
   validateAccountAICredits,
 } from '@/lib/services/account';
 import { transcribeEpisode } from '@/lib/services/ai/transcribe-episode';
-import { Box, Button, Flex, Text } from '@radix-ui/themes';
+import { Box, Button, Callout, Flex, Text } from '@radix-ui/themes';
 import { useCallback, useState } from 'react';
+import { FaExclamationTriangle } from 'react-icons/fa';
 import { PiRobotBold } from 'react-icons/pi';
 
 import { CollapsiblePanel } from '../ui/collapsible-panel';
@@ -16,17 +17,12 @@ import { EpisodeAIThingyPlaceholder } from './episode-ai-thingy-placeholder';
 
 type State =
   | {
-      reason: string;
+      message: string;
       status: 'error';
     }
   | {
       status: 'idle';
     }
-  | {
-      status: 'success';
-      summary: string;
-      transcription: string;
-    }
   | {
       status: 'summarizing';
       transcription: string;
@@ -49,28 +45,20 @@ export function EpisodeAIThingyGenerator({
       const initialAiCredits = await validateAccountAICredits();
       updatedAiCredits = await updateAccountAICredits(initialAiCredits - 1);
     } catch (error) {
-      setState({ reason: 'Not enough credits.', status: 'error' });
+      setState({ message: 'Not enough credits.', status: 'error' });
     }
 
     try {
       setState({ status: 'transcribing' });
-
       const transcription = await transcribeEpisode(id);
       setState({ status: 'summarizing', transcription });
     } catch (error) {
       await updateAccountAICredits(updatedAiCredits + 1);
-      setState({ reason: 'idk', status: 'error' });
+      setState({ message: 'Failed to transcribe episode', status: 'error' });
     }
   }, [id]);
 
   switch (state.status) {
-    case 'success':
-      return (
-        <CollapsiblePanel open title="Episode summary">
-          <Box style={{ whiteSpace: 'pre-wrap' }}>{state.summary}</Box>
-        </CollapsiblePanel>
-      );
-
     case 'summarizing':
       return (
         <CollapsiblePanel open title="Episode transcription">
@@ -81,7 +69,13 @@ export function EpisodeAIThingyGenerator({
     case 'error':
       return (
         <EpisodeAIThingyPlaceholder>
-          <Text>Failed {state.reason}</Text>
+          <Callout.Root color="red" role="alert" size="1">
+            <Callout.Icon>
+              <FaExclamationTriangle />
+            </Callout.Icon>
+
+            <Callout.Text>{state.message}</Callout.Text>
+          </Callout.Root>
         </EpisodeAIThingyPlaceholder>
       );