Copy Button & Auto-Resizing Message Input

community-chatbot/.gitignore

@@ -31,3 +31,4 @@ next-env.d.ts
 __pycache__/
 *.sql
 *.py
+Jira/

community-chatbot/app/globals.css

@@ -92,3 +92,44 @@ body {
     @apply bg-background text-foreground;
   }
 }
+
+@layer utilities {
+
+  /* Minimal aesthetic scrollbar */
+  .scrollbar-aesthetic {
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(0, 0, 0, 0.8) transparent;
+  }
+
+  /* Chrome / Edge / Safari */
+  .scrollbar-aesthetic::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .scrollbar-aesthetic::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .scrollbar-aesthetic::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 9999px;
+  }
+
+  .scrollbar-aesthetic::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 0, 0, 1);
+  }
+
+  /* Dark mode */
+  .dark .scrollbar-aesthetic {
+    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
+  }
+
+  .dark .scrollbar-aesthetic::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.3);
+  }
+
+  .dark .scrollbar-aesthetic::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+}

community-chatbot/components/agent/Mode/Chat/InputBox.tsx

@@ -1,8 +1,11 @@
+import {
+  MessageInput,
+} from '@/components/agent/Mode/Chat/InputBox/MessageInput';
+import {
+  SubmitButton,
+} from '@/components/agent/Mode/Chat/InputBox/SubmitButton';
 import { useSendMessage } from '@/hooks/agent/Mode/Chat/useSendMessage';
 
-import { MessageInput } from './InputBox/MessageInput';
-import { SubmitButton } from './InputBox/SubmitButton';
-
 export function InputBox() {
   const { handleSendMessage } = useSendMessage();
   const handleSubmit = async (event?: React.FormEvent) => {
@@ -13,11 +16,11 @@ export function InputBox() {
   return (
     <div className="bg-white dark:bg-gray-800 p-4 dark:border-gray-700 border-t">
       <div className="mx-auto max-w-4xl">
-        <form onSubmit={handleSubmit} className="flex gap-2">
+        <form onSubmit={handleSubmit} className="flex items-end gap-2">
           <MessageInput />
           <SubmitButton />
         </form>
       </div>
     </div>
   );
-}
+}

community-chatbot/components/agent/Mode/Chat/InputBox/MessageInput.tsx

@@ -1,28 +1,42 @@
 import { usePathname } from 'next/navigation';
+import Textarea from 'react-textarea-autosize';
 
-import { Input } from '@/components/ui/input';
+import { useSendMessage } from '@/hooks/agent/Mode/Chat/useSendMessage';
 import { integrationModes } from '@/lib/constants/chat';
 import { useAgentStore } from '@/lib/store/agent/agentStore';
 
 export function MessageInput() {
   const { input, setInput, status } = useAgentStore();
+  const { handleSendMessage } = useSendMessage();
 
   const pathname = usePathname();
   const currentMode = pathname.split('/')[1];
   const name = integrationModes.find((m) => m.id === currentMode)?.name;
 
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setInput(e.target.value);
   };
 
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      if (input.trim()) {
+        handleSendMessage();
+      }
+    }
+  };
+
   return (
-    <div className="relative flex-1">
-      <Input
+    <div className="flex-1">
+      <Textarea
         value={input}
         onChange={handleInputChange}
+        onKeyDown={handleKeyDown}
         placeholder={`Ask ${name || "the assistant"}...`}
         disabled={status !== "ready"}
         autoFocus
+        maxRows={5}
+        className="bg-white bg-opacity-10 disabled:opacity-50 shadow-sm mb-0 p-3 border border-input rounded-md focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring w-full placeholder:text-muted-foreground text-sm resize-none disabled:cursor-not-allowed bg scrollbar-aesthetic"
       />
     </div>
   );

community-chatbot/components/agent/Mode/Chat/InputBox/SubmitButton.tsx

@@ -19,7 +19,7 @@ export function SubmitButton() {
       type="submit"
       size="icon"
       disabled={!input.trim() || status !== "ready"}
-      className="bg-blue-600 hover:bg-blue-700"
+      className="bg-blue-600 hover:bg-blue-700 mb-2 text-white"
     >
       <Send className="w-4 h-4" />
     </Button>

community-chatbot/components/agent/Mode/Chat/Panel/CopyButton.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { useState } from 'react';
+import { Check, Copy } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+interface CopyButtonProps {
+    textToCopy: string;
+    className?: string;
+}
+
+export function CopyButton({ textToCopy, className }: CopyButtonProps) {
+    const [isCopied, setIsCopied] = useState(false);
+
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(textToCopy);
+            setIsCopied(true);
+            setTimeout(() => setIsCopied(false), 2000); // Reset after 2 seconds
+        } catch (err) {
+            console.error('Failed to copy text: ', err);
+        }
+    };
+
+    return (
+        <Button
+            onClick={handleCopy}
+            variant="ghost"
+            size="icon"
+            className={cn('w-8 h-8', className)}
+        >
+            {isCopied ? (
+                <Check className="w-4 h-4 text-green-500" />
+            ) : (
+                <Copy className="w-4 h-4" />
+            )}
+        </Button>
+    );
+}

community-chatbot/components/agent/Mode/Chat/Panel/MessageList.tsx

@@ -1,23 +1,26 @@
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 
-import { ChatAvatar } from '@/components/agent/Mode/Chat/Panel/ChatAvatar';
 import { Message } from '@/types/chat/types';
+import { CopyButton } from '@/components/agent/Mode/Chat/Panel/CopyButton';
 
 interface MessageListProps {
-  messages:Message[]
+  messages: Message[];
 }
 
 export function MessageList({ messages }: MessageListProps) {
   return (
-    <>
+    <div className='flex flex-col'>
       {messages.map((message) => (
-        <div key={message.id} className={`flex gap-3 ${message.role === "user" ? "justify-end" : "justify-start"}`}>
-          {message.role === "assistant" && <ChatAvatar role="assistant" />}
+        <div
+          key={message.id}
+          className={`group flex flex-col gap-2 ${message.role === 'user' ? 'self-end items-end' : 'flex-start items-start w-fit'
+            }`}
+        >
           <div
-            className={`max-w-[80%] rounded-lg px-4 py-3 ${message.role === "user"
-              ? "bg-blue-600 text-white ml-auto"
-              : "bg-white dark:bg-gray-700 shadow-sm border dark:border-gray-600"
+            className={`relative rounded-lg px-4 py-3 ${message.role === 'user'
+              ? 'bg-blue-600 text-white'
+              : 'bg-white dark:bg-gray-700 shadow-sm border dark:border-gray-600 max-w-[80%]'
               }`}
           >
             <div className="whitespace-pre-wrap">
@@ -26,9 +29,12 @@ export function MessageList({ messages }: MessageListProps) {
               </ReactMarkdown>
             </div>
           </div>
-          {message.role === "user" && <ChatAvatar role="user" />}
+            <CopyButton
+              textToCopy={message.content}
+              className="opacity-0 group-hover:opacity-100 transition-opacity"
+            />
         </div>
       ))}
-    </>
+    </div>
   );
-}
+}

community-chatbot/package.json

@@ -62,6 +62,7 @@
     "react-hook-form": "^7.54.1",
     "react-markdown": "^10.1.0",
     "react-resizable-panels": "^2.1.7",
+    "react-textarea-autosize": "^8.5.9",
     "recharts": "2.15.0",
     "remark-gfm": "^4.0.1",
     "sonner": "^1.7.1",