feat: now you can copy markdown of bot response

Author: nickytonline

package-lock.json

@@ -37,11 +37,13 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.476.0",
+    "next-themes": "^0.4.6",
     "openai": "^4.103.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
+    "sonner": "^2.0.6",
     "tailwind-merge": "^3.0.2",
     "tailwindcss": "^4.0.6",
     "tailwindcss-animate": "^1.0.7",

package.json

@@ -0,0 +1,74 @@
+import { cn } from '../lib/utils'
+import type { Message } from '../mcp/client'
+import { formatTimestamp } from '../lib/utils'
+import { Bot, Copy } from 'lucide-react'
+import { MarkdownContent } from './MarkdownContent'
+
+import { toast } from 'sonner'
+import { copyToClipboard } from '../lib/utils/clipboard'
+
+export interface BotMessageProps {
+  message: Message
+  isLoading?: boolean
+}
+
+export function BotMessage({ message, isLoading }: BotMessageProps) {
+  const handleCopy = async () => {
+    const copied = await copyToClipboard(message.content)
+
+    if (copied) {
+      toast.success('Copied message to clipboard')
+    }
+  }
+
+  return (
+    <div
+      className={cn(
+        'flex w-full max-w-full gap-2 py-2 animate-in fade-in',
+        'justify-start',
+      )}
+    >
+      <div
+        className={cn(
+          'flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100',
+          isLoading && 'animate-[pulse_1.5s_ease-in-out_infinite] opacity-80',
+        )}
+      >
+        <Bot className="h-5 w-5" />
+      </div>
+      <div
+        className={cn(
+          'flex flex-col space-y-1 items-start',
+          'w-full sm:w-[85%] md:w-[75%] lg:w-[65%]',
+        )}
+      >
+        <div
+          className={cn(
+            'relative rounded-2xl px-4 py-2 text-sm w-full bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100',
+          )}
+          data-raw-markdown={message.content}
+        >
+          {/* Copy button */}
+          <button
+            type="button"
+            aria-label="Copy raw markdown"
+            className={cn(
+              'absolute top-2 right-2 p-1 rounded-md transition-colors bg-transparent text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-700 dark:hover:text-gray-100',
+            )}
+            onClick={handleCopy}
+            tabIndex={0}
+          >
+            <Copy className="h-4 w-4" aria-hidden="true" />
+            <span className="sr-only">Copy</span>
+          </button>
+          <div className="prose prose-sm dark:prose-invert max-w-none break-words break-all whitespace-pre-wrap">
+            <MarkdownContent content={message.content} />
+          </div>
+        </div>
+        <div className="flex items-center text-xs text-gray-500 dark:text-gray-400 space-x-1">
+          <span>{formatTimestamp(message.timestamp)}</span>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/BotMessage.tsx

@@ -1,5 +1,6 @@
 import { useRef, useMemo, useState } from 'react'
-import { ChatMessage } from './ChatMessage'
+import { UserMessage } from './UserMessage'
+import { BotMessage } from './BotMessage'
 import { ChatInput } from './ChatInput'
 import { ServerSelector } from './ServerSelector'
 import { useChat } from 'ai/react'
@@ -541,7 +542,7 @@ export function Chat() {
                   { type: 'assistant' }
                 >
                 return (
-                  <ChatMessage
+                  <BotMessage
                     key={assistantEvent.id}
                     message={{
                       id: assistantEvent.id,
@@ -559,7 +560,7 @@ export function Chat() {
                   { type: 'user' }
                 >
                 return (
-                  <ChatMessage
+                  <UserMessage
                     key={userEvent.id}
                     message={{
                       id: userEvent.id,
@@ -568,29 +569,42 @@ export function Chat() {
                       timestamp: new Date(),
                       status: 'sent',
                     }}
-                    isLoading={false}
                   />
                 )
               } else {
                 // Fallback for Message type (from useChat)
                 const message = event as Message
-                return (
-                  <ChatMessage
-                    key={message.id}
-                    message={{
-                      id: message.id,
-                      content: message.content,
-                      sender: message.role === 'assistant' ? 'agent' : 'user',
-                      timestamp: new Date(),
-                      status: 'sent',
-                    }}
-                    isLoading={
-                      (isLoading || streaming) &&
-                      message.role === 'assistant' &&
-                      message === messages.at(-1)
-                    }
-                  />
-                )
+                const isAssistant = message.role === 'assistant'
+                if (isAssistant) {
+                  return (
+                    <BotMessage
+                      key={message.id}
+                      message={{
+                        id: message.id,
+                        content: message.content,
+                        sender: 'agent',
+                        timestamp: new Date(),
+                        status: 'sent',
+                      }}
+                      isLoading={
+                        (isLoading || streaming) && message === messages.at(-1)
+                      }
+                    />
+                  )
+                } else {
+                  return (
+                    <UserMessage
+                      key={message.id}
+                      message={{
+                        id: message.id,
+                        content: message.content,
+                        sender: 'user',
+                        timestamp: new Date(),
+                        status: 'sent',
+                      }}
+                    />
+                  )
+                }
               }
             })}
             {streaming && <BotThinking />}

src/components/Chat.tsx

@@ -1,45 +1,29 @@
 import { cn } from '../lib/utils'
 import type { Message } from '../mcp/client'
 import { formatTimestamp } from '../lib/utils'
-import { Bot, User, CheckCircle2, Clock, AlertCircle } from 'lucide-react'
+import { User, CheckCircle2, Clock, AlertCircle } from 'lucide-react'
 import { MarkdownContent } from './MarkdownContent'
 
-type ChatMessageProps = {
+export interface UserMessageProps {
   message: Message
-  isLoading?: boolean
 }
 
-export function ChatMessage({ message, isLoading }: ChatMessageProps) {
-  const isUserMessage = message.sender === 'user'
-
+export function UserMessage({ message }: UserMessageProps) {
   const statusIcons = {
     sending: <Clock className="h-3 w-3 text-gray-400" />,
     sent: <CheckCircle2 className="h-3 w-3 text-green-500" />,
     error: <AlertCircle className="h-3 w-3 text-red-500" />,
   }
-
   return (
     <div
       className={cn(
         'flex w-full max-w-full gap-2 py-2 animate-in fade-in',
-        isUserMessage ? 'justify-end' : 'justify-start',
+        'justify-end',
       )}
     >
-      {!isUserMessage && (
-        <div
-          className={cn(
-            'flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100',
-            isLoading && 'animate-[pulse_1.5s_ease-in-out_infinite] opacity-80',
-          )}
-        >
-          <Bot className="h-5 w-5" />
-        </div>
-      )}
-
       <div
         className={cn(
-          'flex flex-col space-y-1',
-          isUserMessage ? 'items-end' : 'items-start',
+          'flex flex-col space-y-1 items-end',
           'w-full sm:w-[85%] md:w-[75%] lg:w-[65%]',
         )}
       >
@@ -52,18 +36,14 @@ export function ChatMessage({ message, isLoading }: ChatMessageProps) {
             <MarkdownContent content={message.content} />
           </div>
         </div>
-
         <div className="flex items-center text-xs text-gray-500 dark:text-gray-400 space-x-1">
           <span>{formatTimestamp(message.timestamp)}</span>
-          {isUserMessage && statusIcons[message.status]}
+          {statusIcons[message.status]}
         </div>
       </div>
-
-      {isUserMessage && (
-        <div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100">
-          <User className="h-5 w-5" />
-        </div>
-      )}
+      <div className="flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100">
+        <User className="h-5 w-5" />
+      </div>
     </div>
   )
 }

src/components/ChatMessage.tsx src/components/UserMessage.tsxsrc/components/ChatMessage.tsx renamed to src/components/UserMessage.tsx

@@ -0,0 +1,24 @@
+import { useTheme } from 'next-themes'
+import { Toaster as Sonner } from 'sonner'
+import type { ToasterProps } from 'sonner'
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = 'system' } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps['theme']}
+      className="toaster group"
+      style={
+        {
+          '--normal-bg': 'var(--popover)',
+          '--normal-text': 'var(--popover-foreground)',
+          '--normal-border': 'var(--border)',
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

src/components/ui/sonner.tsx

@@ -0,0 +1,27 @@
+// Utility to copy text to clipboard, with iOS fallback
+// Returns a boolean indicating success
+export async function copyToClipboard(text: string): Promise<boolean> {
+  let copied = false
+  if (navigator.clipboard && window.isSecureContext) {
+    try {
+      await navigator.clipboard.writeText(text)
+      copied = true
+    } catch {}
+  }
+  if (!copied) {
+    const el = document.createElement('textarea')
+    el.value = text
+    el.setAttribute('readonly', '')
+    el.style.position = 'absolute'
+    el.style.left = '-9999px'
+    document.body.appendChild(el)
+    el.select()
+    el.setSelectionRange(0, el.value.length)
+    try {
+      document.execCommand('copy')
+      copied = true
+    } catch {}
+    document.body.removeChild(el)
+  }
+  return copied
+}

src/lib/utils/clipboard.ts

@@ -11,6 +11,7 @@ import { UserProvider } from '../contexts/UserContext'
 
 import appCss from '../styles.css?url'
 import Header from '../components/Header'
+import { Toaster } from '../components/ui/sonner'
 
 // Create a client
 const queryClient = new QueryClient()
@@ -84,6 +85,7 @@ function RootDocument({ children }: { children: React.ReactNode }) {
             <div className="mx-auto max-w-4xl h-full">{children}</div>
           </main>
         </div>
+        <Toaster />
         <Scripts />
       </body>
     </html>