From 84c6074547b1c3df1456b90ae4c65a003dea069d Mon Sep 17 00:00:00 2001
From: zaidmukaddam <zaidaltafmukaddam@gmail.com>
Date: Sat, 10 Aug 2024 22:45:22 +0530
Subject: [PATCH] feat: Added copy answer functionality

---
 app/page.tsx | 42 ++++++++++++++++++++++++++++++++----------
 lib/utils.ts |  7 +++++++
 2 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 0be10ce..6ed2dce 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -18,6 +18,7 @@ import { toast } from 'sonner';
 import { motion, AnimatePresence } from 'framer-motion';
 import Image from 'next/image';
 import { suggestQuestions, Message } from './actions';
+import { copyToClipboard } from '@/lib/utils'
 import {
   SearchIcon,
   ChevronDown,
@@ -26,7 +27,8 @@ import {
   ArrowRight,
   Globe,
   AlignLeft,
-  Newspaper
+  Newspaper,
+  Copy,
 } from 'lucide-react';
 import {
   HoverCard,
@@ -559,16 +561,36 @@ export default function Home() {
           {messages.map((message, index) => (
             <div key={index}>
               {message.role === 'assistant' && message.content && (
-                <div
-                  className={`${suggestedQuestions.length === 0 ? '!mb-20 sm:!mb-18' : ''}`}
-                >
-                  <div
-                    className='flex items-center gap-2 mb-2'
-                  >
-                    <Sparkles className="size-5 text-primary" />
-                    <h2 className="text-base font-semibold">Answer</h2>
+                <div className={`${suggestedQuestions.length === 0 ? '!mb-20 sm:!mb-18' : ''}`}>
+                  <div className='flex items-center justify-between mb-2'>
+                    <div className='flex items-center gap-2'>
+                      <Sparkles className="size-5 text-primary" />
+                      <h2 className="text-base font-semibold">Answer</h2>
+                    </div>
+                    <Button
+                      variant="secondary"
+                      size="sm"
+                      className={`flex items-center gap-2 ${isLoading ? 'hidden' : ''}`}
+                      onClick={() => {
+                        copyToClipboard(message.content)
+                          .then(() => {
+                            toast.success("Copied to clipboard", {
+                              description: "The answer has been copied to your clipboard.",
+                            });
+                          })
+                          .catch((error) => {
+                            console.error('Failed to copy:', error);
+                            toast.error("Failed to copy", {
+                              description: "There was an error copying the answer to your clipboard.",
+                            });
+                          });
+                      }}
+                    >
+                      <Copy className="h-4 w-4" />
+                      <span className="sr-only">Copy Answer</span>
+                    </Button>
                   </div>
-                  <div className="">
+                  <div>
                     <MarkdownRenderer content={message.content} />
                   </div>
                 </div>
diff --git a/lib/utils.ts b/lib/utils.ts
index d084cca..8460127 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -4,3 +4,10 @@ import { twMerge } from "tailwind-merge"
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+export async function copyToClipboard(text: string): Promise<void> {
+  if (!navigator.clipboard) {
+    throw new Error('Clipboard API not available');
+  }
+  await navigator.clipboard.writeText(text);
+}
\ No newline at end of file