diff --git a/src/components/Message/MessageBase.tsx b/src/components/Message/MessageBase.tsx index 52a7d204..9d5873c2 100644 --- 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({ )} - handleShareMessage()} icon={}> + handleShareMessage()} icon={}> Share Message {(!disableEdit || shouldShowDeleteMenu) && } diff --git a/src/components/OptionsButton.tsx b/src/components/OptionsButton.tsx index c2a4a110..154ce308 100644 --- a/src/components/OptionsButton.tsx +++ b/src/components/OptionsButton.tsx @@ -1,6 +1,6 @@ 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"; @@ -8,52 +8,18 @@ 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 ( - <> - - } isDisabled={true}> - Share - - - ); - } - return ( <> - } onClick={supportsWebShare ? handleWebShare : onOpen}> + } onClick={onOpen}> Share @@ -242,7 +208,7 @@ function OptionsButton({ Export as YAML - + {!!chat && } {!!onAttachFiles && ( <> diff --git a/src/components/ShareModal.tsx b/src/components/ShareModal.tsx index 799250c6..39cfb135 100644 --- 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 ( Summary - + - Use your own Title and Summary, or click{" "} - Summarize to generate them automatically using GPT 3.5. + Enter your own Summary, or click Summarize to generate + one automatically.