Add ShareButton component for answer sharing functionality

README.md

@@ -41,7 +41,6 @@
 - [ ] Add a tokenizer to smartly count number of tokens for each source and ensure we're not going over
 - [ ] Add a regenerate option for a user to re-generate
 - [ ] Make sure the answer correctly cites all the sources in the text & number the citations in the UI
-- [ ] Add sharability to allow folks to share answers
 - [ ] Automatically scroll when an answer is happening, especially for mobile
 - [ ] Fix hard refresh in the header and footer by migrating answers to a new page
 - [ ] Add upstash redis for caching results & rate limiting users

app/globals.css

@@ -6,15 +6,18 @@
   .text-balance {
     text-wrap: balance;
   }
-  /* Hide scrollbar for Chrome, Safari and Opera */
+
+  /* Hide scrollbar for Chrome, Safari, and Opera */
   .no-scrollbar::-webkit-scrollbar {
     display: none;
   }
-  /* Hide scrollbar for IE, Edge and Firefox */
+
+  /* Hide scrollbar for IE, Edge, and Firefox */
   .no-scrollbar {
     -ms-overflow-style: none; /* IE and Edge */
     scrollbar-width: none; /* Firefox */
   }
+
   .loader {
     text-align: left;
     display: flex;
@@ -26,7 +29,6 @@
     vertical-align: middle;
     width: 7px;
     height: 7px;
-    /* background: #4b4b4b; */
     background: white;
     border-radius: 50%;
     animation: loader 0.6s infinite alternate;
@@ -53,6 +55,14 @@
   }
 }
 
+.share-button {
+  @apply bg-blue-500 text-white border-none px-4 py-2 cursor-pointer rounded-lg;
+}
+
+.share-button:hover {
+  @apply bg-blue-700;
+}
+
 body {
   margin: 0px !important;
 }

components/Answer.tsx

@@ -1,5 +1,6 @@
 import Image from "next/image";
 import { Toaster, toast } from "react-hot-toast";
+import ShareButton from "./ShareButton";
 
 export default function Answer({ answer }: { answer: string }) {
   return (
@@ -8,7 +9,7 @@ export default function Answer({ answer }: { answer: string }) {
         <Image
           unoptimized
           src="/img/Info.svg"
-          alt="footer"
+          alt="info-icon"
           width={24}
           height={24}
         />
@@ -19,24 +20,17 @@ export default function Answer({ answer }: { answer: string }) {
             <Image
               unoptimized
               src="/img/Info.svg"
-              alt="footer"
+              alt="info-icon"
               width={24}
               height={24}
               className="block lg:hidden"
             />
             <h3 className="text-base font-bold uppercase text-black">
-              Answer:{" "}
+              Answer:
             </h3>
           </div>
           {answer && (
             <div className="flex items-center gap-3">
-              {/* <Image unoptimized
-                src="/img/link.svg"
-                alt="footer"
-                width={20}
-                height={20}
-                className="cursor-pointer"
-              /> */}
               <button
                 onClick={() => {
                   navigator.clipboard.writeText(answer.trim());
@@ -48,19 +42,13 @@ export default function Answer({ answer }: { answer: string }) {
                 <Image
                   unoptimized
                   src="/img/copy.svg"
-                  alt="footer"
+                  alt="copy-icon"
                   width={20}
                   height={20}
                   className="cursor-pointer"
                 />
               </button>
-              {/* <Image unoptimized
-                src="/img/share.svg"
-                alt="footer"
-                width={20}
-                height={20}
-                className="cursor-pointer"
-              /> */}
+              <ShareButton textToShare={answer} />
             </div>
           )}
         </div>

components/ShareButton.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+const ShareButton = ({ textToShare }: { textToShare: string }) => {
+  const handleShare = async () => {
+    if (navigator.share) {
+      try {
+        await navigator.share({
+          title: 'Check this out!',
+          text: textToShare,
+          url: window.location.href,
+        });
+        console.log('Content shared successfully');
+      } catch (error) {
+        console.error('Error sharing content:', error);
+      }
+    } else {
+      console.warn('Web Share API not supported in this browser');
+    }
+  };
+
+  return (
+    <button onClick={handleShare} className="share-button">
+      Share
+    </button>
+  );
+};
+
+export default ShareButton;