Fix sharing, standardize share icon (#725)

tarasglek · Nov 11, 2024 · 0e4e301 · 0e4e301
1 parent e1f07d9
commit 0e4e301
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 44 deletions.
diff --git a/src/components/Message/MessageBase.tsx b/src/components/Message/MessageBase.tsx
@@ -35,7 +35,7 @@ import {
 
 import { AiOutlineEdit } from "react-icons/ai";
 import { MdContentCopy } from "react-icons/md";
-import { TbDownload, TbShare2, TbTrash } from "react-icons/tb";
+import { TbDownload, TbShare3, TbTrash } from "react-icons/tb";
 import { Link as ReactRouterLink } from "react-router-dom";
 import ResizeTextarea from "react-textarea-autosize";
 import { Menu, MenuDivider, MenuItem, MenuItemLink, SubMenu } from "../Menu";
@@ -565,7 +565,7 @@ function MessageBase({
                   </>
                 )}
                 <MenuDivider />
-                <MenuItem onClick={() => handleShareMessage()} icon={<TbShare2 />}>
+                <MenuItem onClick={() => handleShareMessage()} icon={<TbShare3 />}>
                   Share Message
                 </MenuItem>
                 {(!disableEdit || shouldShowDeleteMenu) && <MenuDivider />}

diff --git a/src/components/OptionsButton.tsx b/src/components/OptionsButton.tsx
@@ -1,59 +1,25 @@
 import { Button, IconButton, Input, useDisclosure } from "@chakra-ui/react";
 import { useFetcher } from "react-router-dom";
-import { TbShare2, TbTrash, TbCopy, TbDownload } from "react-icons/tb";
+import { TbShare3, TbTrash, TbCopy, TbDownload } from "react-icons/tb";
 import { PiGearBold } from "react-icons/pi";
 import { BsPaperclip } from "react-icons/bs";
 import { useCallback, useRef } from "react";
 import { useCopyToClipboard } from "react-use";
 import * as yaml from "yaml";
 
 import { ChatCraftChat } from "../lib/ChatCraftChat";
-import { useUser } from "../hooks/use-user";
 import { useAlert } from "../hooks/use-alert";
 import { useSettings } from "../hooks/use-settings";
 import ShareModal from "./ShareModal";
 import { download } from "../lib/utils";
 import { Menu, MenuDivider, MenuItem, MenuItemLink, SubMenu } from "./Menu";
 
-function ShareMenuItem({ chat }: { chat?: ChatCraftChat }) {
-  const supportsWebShare = !!navigator.share;
-  const { user } = useUser();
-  const { error } = useAlert();
+function ShareMenuItem({ chat }: { chat: ChatCraftChat }) {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
-  const handleWebShare = useCallback(async () => {
-    if (!chat || !user) {
-      return;
-    }
-
-    try {
-      const { url } = await chat.share(user);
-      if (!url) {
-        throw new Error("Unable to create share URL for chat");
-      }
-
-      navigator.share({ title: "ChatCraft Chat", text: chat.summary, url });
-    } catch (err: any) {
-      console.error(err);
-      error({ title: "Unable to share chat", message: err.message });
-    }
-  }, [chat, user, error]);
-
-  // Nothing to share, disable the menu item
-  if (!chat) {
-    return (
-      <>
-        <MenuDivider />
-        <MenuItem icon={<TbShare2 />} isDisabled={true}>
-          Share
-        </MenuItem>
-      </>
-    );
-  }
-
   return (
     <>
-      <MenuItem icon={<TbShare2 />} onClick={supportsWebShare ? handleWebShare : onOpen}>
+      <MenuItem icon={<TbShare3 />} onClick={onOpen}>
         Share
       </MenuItem>
       <ShareModal chat={chat} isOpen={isOpen} onClose={onClose} />
@@ -242,7 +208,7 @@ function OptionsButton({
           Export as YAML
         </MenuItem>
       </SubMenu>
-      <ShareMenuItem chat={chat} />
+      {!!chat && <ShareMenuItem chat={chat} />}
       <MenuDivider />
       {!!onAttachFiles && (
         <>

diff --git a/src/components/ShareModal.tsx b/src/components/ShareModal.tsx
@@ -22,7 +22,7 @@ import {
 } from "@chakra-ui/react";
 import { useCopyToClipboard } from "react-use";
 import { BsGithub } from "react-icons/bs";
-import { TbCopy } from "react-icons/tb";
+import { TbCopy, TbShare3 } from "react-icons/tb";
 
 import { useUser } from "../hooks/use-user";
 import { ChatCraftChat } from "../lib/ChatCraftChat";
@@ -45,6 +45,7 @@ function AuthenticatedForm({ chat, user }: AuthenticatedForm) {
   const [isSharing, setIsSharing] = useState(false);
   const [, copyToClipboard] = useCopyToClipboard();
   const { callChatApi } = useChatOpenAI();
+  const supportsWebShare = !!navigator.share;
 
   const handleShareClick = async () => {
     setIsSharing(true);
@@ -112,17 +113,25 @@ function AuthenticatedForm({ chat, user }: AuthenticatedForm) {
     copyToClipboard(feedUrl);
   }, [feedUrl, copyToClipboard]);
 
+  const handleShareUrl = async (url: string) => {
+    await navigator
+      .share({ title: "ChatCraft Chat", text: chat.summary, url })
+      .catch(console.error);
+  };
+
   return (
     <VStack gap={2}>
       <FormControl>
         <FormLabel>Summary</FormLabel>
-        <Textarea value={summary} onChange={(e) => setSummary(e.target.value)}></Textarea>
+        <Textarea value={summary} onChange={(e) => setSummary(e.target.value)}>
+          {chat.summary}
+        </Textarea>
       </FormControl>
 
       <FormControl>
         <FormLabel>
-          Use your own <strong>Title</strong> and <strong>Summary</strong>, or click{" "}
-          <strong>Summarize</strong> to generate them automatically using GPT 3.5.
+          Enter your own <strong>Summary</strong>, or click <strong>Summarize</strong> to generate
+          one automatically.
         </FormLabel>
         <ButtonGroup w="100%" justifyContent="space-between">
           <Button
@@ -148,6 +157,14 @@ function AuthenticatedForm({ chat, user }: AuthenticatedForm) {
             <FormLabel>Public Share URL</FormLabel>
             <Flex gap={1}>
               <Input autoFocus={false} type="url" defaultValue={url} readOnly flex={1} />{" "}
+              {supportsWebShare && (
+                <IconButton
+                  icon={<TbShare3 />}
+                  aria-label="Share URL"
+                  variant="ghost"
+                  onClick={() => handleShareUrl(url)}
+                />
+              )}
               <IconButton
                 icon={<TbCopy />}
                 aria-label="Copy URL"
@@ -161,6 +178,14 @@ function AuthenticatedForm({ chat, user }: AuthenticatedForm) {
             <FormLabel>Public Shared Chats Feed URL</FormLabel>
             <Flex gap={1}>
               <Input autoFocus={false} type="url" defaultValue={feedUrl} readOnly flex={1} />{" "}
+              {supportsWebShare && (
+                <IconButton
+                  icon={<TbShare3 />}
+                  aria-label="Share Feed URL"
+                  variant="ghost"
+                  onClick={() => handleShareUrl(feedUrl)}
+                />
+              )}
               <IconButton
                 icon={<TbCopy />}
                 aria-label="Copy URL"