refactor share

enjoy/src/renderer/components/audios/audio-detail.tsx

@@ -77,7 +77,7 @@ export const AudioDetail = (props: { id?: string; md5?: string }) => {
       .then(() => {
         toast({
           title: t("shared"),
-          description: t("sharedSuccessfully"),
+          description: t("sharedAudio"),
         });
       })
       .catch((err) => {

enjoy/src/renderer/components/messages/message.tsx

@@ -8,9 +8,8 @@ export const MessageComponent = (props: {
   configuration: { [key: string]: any };
   onResend?: () => void;
   onRemove?: () => void;
-  onShare?: () => void;
 }) => {
-  const { message, configuration, onResend, onRemove, onShare } = props;
+  const { message, configuration, onResend, onRemove } = props;
   if (message.role === "assistant") {
     return (
       <AssistantMessageComponent
@@ -25,7 +24,6 @@ export const MessageComponent = (props: {
         configuration={configuration}
         onResend={onResend}
         onRemove={onRemove}
-        onShare={onShare}
       />
     );
   }

enjoy/src/renderer/components/messages/user-message.tsx

@@ -1,12 +1,23 @@
 import {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogHeader,
+  AlertDialogDescription,
+  AlertDialogTitle,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction,
   Avatar,
   AvatarImage,
   AvatarFallback,
+  Button,
   DropdownMenu,
   DropdownMenuTrigger,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
+  useToast,
 } from "@renderer/components/ui";
 import { SpeechPlayer } from "@renderer/components";
 import { useContext, useState } from "react";
@@ -28,13 +39,37 @@ export const UserMessageComponent = (props: {
   configuration?: { [key: string]: any };
   onResend?: () => void;
   onRemove?: () => void;
-  onShare?: () => void;
 }) => {
-  const { message, onResend, onRemove, onShare } = props;
+  const { message, onResend, onRemove } = props;
   const speech = message.speeches?.[0];
-  const { user } = useContext(AppSettingsProviderContext);
+  const { user, webApi } = useContext(AppSettingsProviderContext);
   const [_, copyToClipboard] = useCopyToClipboard();
   const [copied, setCopied] = useState<boolean>(false);
+  const { toast } = useToast();
+
+  const handleShare = async () => {
+    if (message.role === "user") {
+      const content = message.content;
+      webApi
+        .createPost({
+          metadata: {
+            type: "prompt",
+            content,
+          },
+        })
+        .then(() => {
+          toast({
+            description: t("sharedPrompt"),
+          });
+        })
+        .catch((err) => {
+          toast({
+            title: t("shareFailed"),
+            description: err.message,
+          });
+        });
+    }
+  };
 
   return (
     <div
@@ -85,12 +120,31 @@ export const UserMessageComponent = (props: {
             )}
 
             {message.createdAt && (
-              <Share2Icon
-                data-tooltip-id="global-tooltip"
-                data-tooltip-content={t("share")}
-                className="w-3 h-3 cursor-pointer"
-                onClick={onShare}
-              />
+              <AlertDialog>
+                <AlertDialogTrigger asChild>
+                  <Share2Icon
+                    data-tooltip-id="global-tooltip"
+                    data-tooltip-content={t("share")}
+                    className="w-3 h-3 cursor-pointer"
+                  />
+                </AlertDialogTrigger>
+                <AlertDialogContent>
+                  <AlertDialogHeader>
+                    <AlertDialogTitle>{t("sharePrompt")}</AlertDialogTitle>
+                    <AlertDialogDescription>
+                      {t("areYouSureToShareThisPromptToCommunity")}
+                    </AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel>{t("cancel")}</AlertDialogCancel>
+                    <AlertDialogAction asChild>
+                      <Button variant="default" onClick={handleShare}>
+                        {t("share")}
+                      </Button>
+                    </AlertDialogAction>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialog>
             )}
           </div>
         </div>

enjoy/src/renderer/components/recordings/recording-card.tsx

@@ -47,6 +47,7 @@ export const RecordingCard = (props: {
         await EnjoyApp.recordings.upload(recording.id);
       } catch (error) {
         toast({
+          title: t("shareFailed"),
           description: error.message,
           variant: "destructive",
         });
@@ -61,7 +62,7 @@ export const RecordingCard = (props: {
       })
       .then(() => {
         toast({
-          description: t("recordingShared"),
+          description: t("sharedRecording"),
         });
       })
       .catch((error) => {

enjoy/src/renderer/components/videos/video-detail.tsx

@@ -87,7 +87,7 @@ export const VideoDetail = (props: { id?: string; md5?: string }) => {
       })
       .then(() => {
         toast({
-          description: t("sharedSuccessfully"),
+          description: t("sharedVideo"),
         });
       })
       .catch((err) => {

enjoy/src/renderer/pages/conversation.tsx

@@ -1,12 +1,5 @@
 import { useState, useEffect, useReducer, useContext, useRef } from "react";
 import {
-  AlertDialog,
-  AlertDialogHeader,
-  AlertDialogDescription,
-  AlertDialogTitle,
-  AlertDialogContent,
-  AlertDialogFooter,
-  AlertDialogCancel,
   Button,
   ScrollArea,
   Textarea,
@@ -32,10 +25,9 @@ export default () => {
   const [editting, setEditting] = useState<boolean>(false);
   const [conversation, setConversation] = useState<ConversationType>();
   const { addDblistener, removeDbListener } = useContext(DbProviderContext);
-  const { EnjoyApp, webApi } = useContext(AppSettingsProviderContext);
+  const { EnjoyApp } = useContext(AppSettingsProviderContext);
   const [content, setConent] = useState<string>("");
   const [submitting, setSubmitting] = useState<boolean>(false);
-  const [sharing, setSharing] = useState<MessageType>();
 
   const { toast } = useToast();
 
@@ -174,31 +166,6 @@ export default () => {
     }, 500);
   };
 
-  const handleShare = async (message: MessageType) => {
-    if (message.role === "user") {
-      const content = message.content;
-      webApi
-        .createPost({
-          metadata: {
-            type: "prompt",
-            content,
-          },
-        })
-        .then(() => {
-          toast({
-            description: t("sharedSuccessfully"),
-          });
-        })
-        .catch((err) => {
-          toast({
-            title: t("shareFailed"),
-            description: err.message,
-          });
-        });
-      setSharing(null);
-    }
-  };
-
   useEffect(() => {
     fetchConversation();
     fetchMessages();
@@ -288,7 +255,6 @@ export default () => {
 
                   dispatchMessages({ type: "destroy", record: message });
                 }}
-                onShare={() => setSharing(message)}
               />
             ))}
             {offset > -1 && (
@@ -309,26 +275,6 @@ export default () => {
           </div>
         </ScrollArea>
 
-        <AlertDialog
-          open={Boolean(sharing)}
-          onOpenChange={() => setSharing(null)}
-        >
-          <AlertDialogContent>
-            <AlertDialogHeader>
-              <AlertDialogTitle>{t("sharePrompt")}</AlertDialogTitle>
-              <AlertDialogDescription>
-                {t("areYouSureToShareThisPromptToCommunity")}
-              </AlertDialogDescription>
-            </AlertDialogHeader>
-            <AlertDialogFooter>
-              <AlertDialogCancel>{t("cancel")}</AlertDialogCancel>
-              <Button variant="default" onClick={() => handleShare(sharing)}>
-                {t("share")}
-              </Button>
-            </AlertDialogFooter>
-          </AlertDialogContent>
-        </AlertDialog>
-
         <div className="px-4 absolute w-full bottom-0 left-0 h-14 bg-muted z-50">
           <div className="focus-within:bg-white px-4 py-2 flex items-center space-x-4 rounded-lg border">
             <Textarea