refactor: clean-up episode-ai-summary

components/episode-ai-thingy/episode-ai-thingy-generator.tsx → components/episode-ai-summary/episode-ai-summary-generator.tsx

@@ -3,14 +3,14 @@
 import type { Tables } from '@/types/supabase/database';
 
 import { transcribeEpisode } from '@/lib/services/ai/transcribe-episode';
-import { Box, Button, Callout, Flex, Text } from '@radix-ui/themes';
+import { 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 { Panel } from '../ui/panel';
+import { EpisodeAISummaryPanel } from './episode-ai-summary-panel';
+import { EpisodeAISummaryPlaceholder } from './episode-ai-summary-placeholder';
 import { EpisodeAISummaryStreamer } from './episode-ai-summary-streamer';
-import { EpisodeAIThingyPlaceholder } from './episode-ai-thingy-placeholder';
 
 type State =
   | {
@@ -28,7 +28,7 @@ type State =
       status: 'transcribing';
     };
 
-export function EpisodeAIThingyGenerator({
+export function EpisodeAISummaryGenerator({
   id,
   title,
 }: {
@@ -50,7 +50,7 @@ export function EpisodeAIThingyGenerator({
   switch (state.status) {
     case 'idle':
       return (
-        <EpisodeAIThingyPlaceholder>
+        <EpisodeAISummaryPlaceholder>
           <Button highContrast onClick={generate} size="2">
             <Flex align="center" gap="2" justify="center">
               <Text mt="1" size="4" trim="both">
@@ -62,36 +62,36 @@ export function EpisodeAIThingyGenerator({
               </Text>
             </Flex>
           </Button>
-        </EpisodeAIThingyPlaceholder>
+        </EpisodeAISummaryPlaceholder>
       );
 
     case 'transcribing':
-      return <Panel title="Episode summary">Transcribing episode...</Panel>;
+      return (
+        <EpisodeAISummaryPanel>Transcribing episode...</EpisodeAISummaryPanel>
+      );
 
     case 'summarizing':
       return (
-        <Panel title="Episode summary">
-          <Box style={{ whiteSpace: 'pre-wrap' }}>
-            <EpisodeAISummaryStreamer
-              id={id}
-              title={title}
-              transcription={state.transcription}
-            />
-          </Box>
-        </Panel>
+        <EpisodeAISummaryPanel>
+          <EpisodeAISummaryStreamer
+            id={id}
+            title={title}
+            transcription={state.transcription}
+          />
+        </EpisodeAISummaryPanel>
       );
 
     case 'error':
       return (
-        <EpisodeAIThingyPlaceholder>
+        <EpisodeAISummaryPlaceholder>
           <Callout.Root color="red" role="alert" size="1">
             <Callout.Icon>
               <FaExclamationTriangle />
             </Callout.Icon>
 
             <Callout.Text>{state.message}</Callout.Text>
           </Callout.Root>
-        </EpisodeAIThingyPlaceholder>
+        </EpisodeAISummaryPlaceholder>
       );
   }
 }

components/episode-ai-summary/episode-ai-summary-panel.tsx

@@ -0,0 +1,24 @@
+import type { PropsWithChildren } from 'react';
+
+import { CollapsiblePanel } from '../ui/collapsible-panel';
+import { Panel } from '../ui/panel';
+import { PreWrap } from '../ui/pre-wrap';
+
+type Props = PropsWithChildren<{
+  variant?: 'collapsible' | 'default';
+}>;
+
+export function EpisodeAISummaryPanel({
+  children,
+  variant = 'default',
+}: Props) {
+  return variant === 'collapsible' ? (
+    <CollapsiblePanel title="Episode summary">
+      <PreWrap>{children}</PreWrap>
+    </CollapsiblePanel>
+  ) : (
+    <Panel title="Episode summary">
+      <PreWrap>{children}</PreWrap>
+    </Panel>
+  );
+}

components/episode-ai-thingy/episode-ai-thingy-placeholder.tsx → components/episode-ai-summary/episode-ai-summary-placeholder.tsx

@@ -5,7 +5,7 @@ import { Flex } from '@radix-ui/themes';
 
 import { CollapsiblePanel } from '../ui/collapsible-panel';
 
-export function EpisodeAIThingyPlaceholder(props: PropsWithChildren) {
+export function EpisodeAISummaryPlaceholder(props: PropsWithChildren) {
   return (
     <CollapsiblePanel open={false} title="Episode summary">
       {FAKE_EPISODE_SUMMARY}

components/episode-ai-thingy/episode-ai-summary-streamer.tsx → components/episode-ai-summary/episode-ai-summary-streamer.tsx

@@ -49,9 +49,5 @@ export function EpisodeAISummaryStreamer({ id, title, transcription }: Props) {
 
   const summaryMessage = messages.find((message) => message.role !== 'system');
 
-  return (
-    <div>
-      {summaryMessage ? summaryMessage.content : 'Summarizing episode...'}
-    </div>
-  );
+  return summaryMessage ? summaryMessage.content : 'Summarizing episode...';
 }

components/episode-ai-thingy/episode-ai-thingy.tsx → components/episode-ai-summary/episode-ai-summary.tsx

@@ -3,21 +3,21 @@ import type { Tables } from '@/types/supabase/database';
 import { DatabaseError } from '@/lib/errors';
 import { fetchAccountAICredits } from '@/lib/services/account';
 import { createSupabaseServerClient } from '@/lib/services/supabase/server';
-import { Avatar, Box, Button, Flex, Text } from '@radix-ui/themes';
+import { Avatar, Button, Flex, Text } from '@radix-ui/themes';
 import { cookies } from 'next/headers';
 import Link from 'next/link';
 import { CgDollar, CgProfile } from 'react-icons/cg';
 
-import { CollapsiblePanel } from '../ui/collapsible-panel';
-import { EpisodeAIThingyGenerator } from './episode-ai-thingy-generator';
-import { EpisodeAIThingyPlaceholder } from './episode-ai-thingy-placeholder';
+import { EpisodeAISummaryGenerator } from './episode-ai-summary-generator';
+import { EpisodeAISummaryPanel } from './episode-ai-summary-panel';
+import { EpisodeAISummaryPlaceholder } from './episode-ai-summary-placeholder';
 
 type Props = {
   id: Tables<'episode'>['id'];
   title: Tables<'episode'>['title'];
 };
 
-export async function EpisodeAIThingy(props: Props) {
+export async function EpisodeAISummary(props: Props) {
   const supabase = createSupabaseServerClient(cookies());
   const credits = await fetchAccountAICredits();
   const { data, error } = await supabase
@@ -32,32 +32,26 @@ export async function EpisodeAIThingy(props: Props) {
   if (data.length === 0 || data[0].text_summary === null) {
     if (credits < 1) {
       return (
-        <EpisodeAIThingyPlaceholder>
+        <EpisodeAISummaryPlaceholder>
           <Button asChild highContrast>
             <Link href="/credits">
               <CgDollar /> Buy credits to summarize this episode
             </Link>
           </Button>
-        </EpisodeAIThingyPlaceholder>
+        </EpisodeAISummaryPlaceholder>
       );
     }
 
-    return <EpisodeAIThingyGenerator id={props.id} title={props.title} />;
+    return <EpisodeAISummaryGenerator id={props.id} title={props.title} />;
   }
 
   const [episodeContent] = data;
 
   return (
     <Flex direction="column" gap="2">
-      <CollapsiblePanel title="Episode summary">
-        <Box
-          style={{
-            whiteSpace: 'pre-wrap',
-          }}
-        >
-          {episodeContent.text_summary}
-        </Box>
-      </CollapsiblePanel>
+      <EpisodeAISummaryPanel variant="collapsible">
+        {episodeContent.text_summary}
+      </EpisodeAISummaryPanel>
 
       {episodeContent.user ? (
         <Flex align="center" gap="1">

components/episode-detail.tsx

@@ -1,25 +1,28 @@
 import type { Tables } from '@/types/supabase/database';
+import type { PropsWithChildren } from 'react';
 
 import { DatabaseError } from '@/lib/errors';
 import { createSupabaseServerClient } from '@/lib/services/supabase/server';
 import { Avatar, Box, Flex, Heading, Text } from '@radix-ui/themes';
 import { cookies } from 'next/headers';
 
-import { EpisodeAIThingy } from './episode-ai-thingy/episode-ai-thingy';
+import { EpisodeAISummary } from './episode-ai-summary/episode-ai-summary';
 import { EpisodeDescription } from './episode-description';
 import { CollapsiblePanel } from './ui/collapsible-panel';
 import { DecorativeBox } from './ui/decorative-box';
 
 function EpisodeDetailContent(
-  props: Pick<
-    Tables<'episode'>,
-    'description' | 'duration' | 'id' | 'image' | 'published_date' | 'title'
-  > & {
-    show: {
-      id: Tables<'show'>['id'];
-      title: Tables<'show'>['title'];
-    };
-  },
+  props: PropsWithChildren<
+    Pick<
+      Tables<'episode'>,
+      'description' | 'duration' | 'id' | 'image' | 'published_date' | 'title'
+    > & {
+      show: {
+        id: Tables<'show'>['id'];
+        title: Tables<'show'>['title'];
+      };
+    }
+  >,
 ) {
   return (
     <Flex direction="column" gap="4">
@@ -50,7 +53,7 @@ function EpisodeDetailContent(
         </CollapsiblePanel>
       ) : null}
 
-      <EpisodeAIThingy id={props.id} title={props.title} />
+      {props.children}
     </Flex>
   );
 }
@@ -77,7 +80,9 @@ async function EpisodeDetailPage(props: { id: Tables<'episode'>['id'] }) {
       published_date={data.published_date}
       show={data.show}
       title={data.title}
-    />
+    >
+      <EpisodeAISummary id={data.id} title={data.title} />
+    </EpisodeDetailContent>
   );
 }
 

components/ui/pre-wrap.tsx

@@ -0,0 +1,7 @@
+import type { PropsWithChildren } from 'react';
+
+import { Box } from '@radix-ui/themes';
+
+export function PreWrap(props: PropsWithChildren) {
+  return <Box style={{ whiteSpace: 'pre-wrap' }}>{props.children}</Box>;
+}