feat: add copy button to messages

Signed-off-by: tylerslaton <[email protected]>

Author: tylerslaton

components/script/messages.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { GoSquirrel } from "react-icons/go";
+import { IoCopyOutline } from "react-icons/io5";
 import Markdown from "react-markdown";
 import remarkGfm from 'remark-gfm'
 import rehypeExternalLinks from 'rehype-external-links'
@@ -43,44 +43,50 @@ const Message = ({ message, noAvatar, restart }: { message: Message ,noAvatar?:
             return (
                 <div className="flex flex-col items-start mb-10">
                     <div className="flex gap-2 w-full">
-                        { !noAvatar &&
-                            <Tooltip 
+                        {!noAvatar && (
+                            <Tooltip
                                 content={`Sent from ${message.name || "System"}`}
                                 placement="bottom"
                                 closeDelay={0.5}
                             >
                                 <Avatar
                                     showFallback
-                                    name={abbreviate(message.name || "System")} 
+                                    name={abbreviate(message.name || "System")}
                                     className="w-[40px] cursor-default"
-                                    classNames={{base: `bg-white p-6 text-sm border dark:border-none dark:bg-zinc-900 ${message.error && "border-danger dark:border-danger"}`}}
+                                    classNames={{
+                                        base: `bg-white p-6 text-sm border dark:border-none dark:bg-zinc-900 ${
+                                            message.error && "border-danger dark:border-danger"
+                                        }`,
+                                    }}
                                 />
                             </Tooltip>
-                        }
-                        <div 
-                            className={`w-[93%] rounded-2xl text-black dark:text-white pt-1 px-4 border dark:border-none dark:bg-zinc-900 ${message.error ? "border-danger dark:border-danger" : ""}`}
+                        )}
+                        <div
+                            className={`w-[93%] rounded-2xl text-black dark:text-white pt-1 px-4 border dark:border-none dark:bg-zinc-900 ${
+                                message.error ? "border-danger dark:border-danger" : ""
+                            }`}
                         >
-                            { message.message && 
-                                <Markdown 
-                                    className={`!text-wrap prose overflow-x-auto dark:prose-invert p-4 !w-full !max-w-full prose-thead:text-left prose-img:rounded-xl prose-img:shadow-lg`} 
+                            {message.message && (
+                                <Markdown
+                                    className={`!text-wrap prose overflow-x-auto dark:prose-invert p-4 !w-full !max-w-full prose-thead:text-left prose-img:rounded-xl prose-img:shadow-lg`}
                                     remarkPlugins={[remarkGfm]}
-                                    rehypePlugins={[[rehypeExternalLinks, {target: '_blank'}]]}
+                                    rehypePlugins={[[rehypeExternalLinks, { target: "_blank" }]]}
                                 >
                                     {message.message}
                                 </Markdown>
-                            }
-                            { message.component }
+                            )}
+                            {message.component}
                             {message.error && (
                                 <>
                                     <p className="text-danger text-base pl-4 pb-6">{message.error}</p>
-                                    <Tooltip 
+                                    <Tooltip
                                         content="If you are no longer able to chat, click here to restart the script."
                                         closeDelay={0.5}
                                         placement="bottom"
                                         color="danger"
                                     >
                                         <Button
-                                            startContent={<GoIssueReopened className="text-lg"/>}
+                                            startContent={<GoIssueReopened className="text-lg" />}
                                             color="danger"
                                             className="ml-4 mb-6"
                                             onPress={restart}
@@ -92,11 +98,22 @@ const Message = ({ message, noAvatar, restart }: { message: Message ,noAvatar?:
                             )}
                         </div>
                     </div>
-                    { message.calls &&
-                        <div className="flex w-full justify-end mt-2">
-                            <Calls calls={message.calls}/>
-                        </div>
-                    }
+                    <div className="flex w-full justify-end mt-2 space-x-2">
+                        <Tooltip content="Copy Message" placement="bottom" closeDelay={0.5}>
+                            <Button
+                                isIconOnly
+                                radius="full"
+                                startContent={<IoCopyOutline className="text-lg" />}
+                                className="ml-2"
+                                onPress={() => {
+                                    navigator.clipboard.writeText(message.message || '');
+                                }}
+                            />
+                        </Tooltip>
+                        {message.calls && (
+                            <Calls calls={message.calls} />
+                        )}
+                    </div>
                 </div>
             );
         case MessageType.Alert: