From c57fa8fdd8deef8e51a65b6e2bbb81e9ac11a994 Mon Sep 17 00:00:00 2001
From: Li Xin <lixin.henry@bytedance.com>
Date: Sat, 19 Apr 2025 22:18:19 +0800
Subject: [PATCH] feat: add `download` button

---
 web/src/app/_components/message-list-view.tsx | 31 ++++++++++++-------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/web/src/app/_components/message-list-view.tsx b/web/src/app/_components/message-list-view.tsx
index 21fecf8..ebff6a5 100644
--- a/web/src/app/_components/message-list-view.tsx
+++ b/web/src/app/_components/message-list-view.tsx
@@ -376,8 +376,8 @@ function PodcastCard({
   const data = useMemo(() => {
     return parse(message.content ?? "");
   }, [message.content]);
-  const title = useMemo(() => data?.title, [data]);
-  const audioUrl = useMemo(() => data?.audioUrl, [data]);
+  const title = useMemo<string | undefined>(() => data?.title, [data]);
+  const audioUrl = useMemo<string | undefined>(() => data?.audioUrl, [data]);
   const isGenerating = useMemo(() => {
     return message.isStreaming;
   }, [message.isStreaming]);
@@ -396,16 +396,23 @@ function PodcastCard({
                   : "Podcast"}
             </RainbowText>
           </div>
-          <div className="flex">
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button variant="ghost" size="icon">
-                  <DownloadOutlined />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>Download podcast</TooltipContent>
-            </Tooltip>
-          </div>
+          {!isGenerating && (
+            <div className="flex">
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button variant="ghost" size="icon" asChild>
+                    <a
+                      href={audioUrl}
+                      download={`${(title ?? "podcast").replaceAll(" ", "-")}.mp3`}
+                    >
+                      <DownloadOutlined />
+                    </a>
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Download podcast</TooltipContent>
+              </Tooltip>
+            </div>
+          )}
         </div>
         <CardTitle>
           <div className="text-lg font-medium">