diff --git a/community-chatbot/.gitignore b/community-chatbot/.gitignore
index f398c97d..e7fbc9c1 100644
--- a/community-chatbot/.gitignore
+++ b/community-chatbot/.gitignore
@@ -31,3 +31,4 @@ next-env.d.ts
 __pycache__/
 *.sql
 *.py
+Jira/
\ No newline at end of file
diff --git a/community-chatbot/app/(agent)/[mode]/page.tsx b/community-chatbot/app/(agent)/[mode]/page.tsx
index d44365fd..ef8c38e3 100644
--- a/community-chatbot/app/(agent)/[mode]/page.tsx
+++ b/community-chatbot/app/(agent)/[mode]/page.tsx
@@ -4,8 +4,8 @@ import Image from 'next/image';
 import { usePathname } from 'next/navigation';
 
 import {
-  Card, CardContent, CardDescription,
-  CardHeader, CardTitle,
+    Card, CardContent, CardDescription,
+    CardHeader, CardTitle,
 } from '@/components/ui/card';
 import { integrationModes } from '@/lib/constants/chat';
 
diff --git a/community-chatbot/app/(agent)/layout.tsx b/community-chatbot/app/(agent)/layout.tsx
index 5f1ce780..7ba8fdb4 100644
--- a/community-chatbot/app/(agent)/layout.tsx
+++ b/community-chatbot/app/(agent)/layout.tsx
@@ -5,6 +5,7 @@ import React, { useEffect } from 'react';
 import { ChatHeader } from '@/components/agent/Header';
 import { ModeSelector } from '@/components/agent/ModeSelector';
 import { AppSidebar } from '@/components/agent/Sidebar';
+import { AppTour } from '@/components/agent/AppTour';
 import { useAgentStore } from '@/lib/store/agent/agentStore';
 
 export default function RootLayout({
@@ -21,6 +22,7 @@ export default function RootLayout({
 
     return (
         <main className="flex w-full h-screen">
+            <AppTour />
             <AppSidebar />
             <div className="flex flex-col w-full">
                 <ChatHeader />
diff --git a/community-chatbot/app/globals.css b/community-chatbot/app/globals.css
index ac684423..988e7d61 100644
--- a/community-chatbot/app/globals.css
+++ b/community-chatbot/app/globals.css
@@ -48,6 +48,7 @@ body {
     --sidebar-border: 220 13% 91%;
     --sidebar-ring: 217.2 91.2% 59.8%;
   }
+
   .dark {
     --background: 0 0% 3.9%;
     --foreground: 0 0% 98%;
@@ -92,3 +93,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);
+  }
+}
\ No newline at end of file
diff --git a/community-chatbot/components/agent/AppTour.tsx b/community-chatbot/components/agent/AppTour.tsx
new file mode 100644
index 00000000..0fa1e65d
--- /dev/null
+++ b/community-chatbot/components/agent/AppTour.tsx
@@ -0,0 +1,42 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import Joyride, { CallBackProps, STATUS } from 'react-joyride';
+import { TourTooltip } from '@/components/agent/AppTour/TourTooltip';
+import { getJoyrideStyles } from '@/components/agent/AppTour/styles';
+import { steps } from '@/components/agent/AppTour/steps';
+
+export function AppTour() {
+    const [run, setRun] = useState(false);
+
+    useEffect(() => {
+        const hasSeenTour = localStorage.getItem('hasSeenAppTour');
+        if (!hasSeenTour) {
+            setRun(true);
+        }
+    }, []);
+
+    const handleJoyrideCallback = (data: CallBackProps) => {
+        const { status } = data;
+        const finishedStatuses: string[] = [STATUS.FINISHED, STATUS.SKIPPED];
+
+        if (finishedStatuses.includes(status)) {
+            setRun(false);
+            localStorage.setItem('hasSeenAppTour', 'true');
+        }
+    };
+
+    return (
+        <Joyride
+            steps={steps}
+            run={run}
+            continuous={true}
+            showProgress={true}
+            showSkipButton={true}
+            callback={handleJoyrideCallback}
+            scrollOffset={100}
+            styles={getJoyrideStyles()}
+            tooltipComponent={TourTooltip}
+        />
+    );
+}
diff --git a/community-chatbot/components/agent/AppTour/TourTooltip.tsx b/community-chatbot/components/agent/AppTour/TourTooltip.tsx
new file mode 100644
index 00000000..3d35432a
--- /dev/null
+++ b/community-chatbot/components/agent/AppTour/TourTooltip.tsx
@@ -0,0 +1,73 @@
+'use client';
+
+import React from 'react';
+import { TooltipRenderProps } from 'react-joyride';
+import { X, ArrowRight, ArrowLeft, Check } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+export function TourTooltip({
+    index,
+    step,
+    backProps,
+    primaryProps,
+    skipProps,
+    isLastStep,
+}: TooltipRenderProps) {
+    return (
+        <div className="bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-800 shadow-2xl p-6 border rounded-2xl w-full max-w-[400px] transition-all overflow-hidden relative">
+            {/* Header / Step Progress */}
+            <div className="flex justify-between items-center mb-4">
+                <span className="bg-blue-100 dark:bg-blue-900/50 px-2 py-0.5 rounded text-blue-600 dark:text-blue-400 text-xs font-bold uppercase tracking-wider">
+                    Step {index + 1}
+                </span>
+                <button
+                    {...skipProps}
+                    className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors"
+                    title="Skip Tour"
+                >
+                    <X className="size-5" />
+                </button>
+            </div>
+
+            {/* Content Area */}
+            <div className="mb-8">
+                {step.content}
+            </div>
+
+            {/* Footer / Navigation */}
+            <div className="flex items-center gap-3">
+                {index > 0 && (
+                    <Button
+                        {...backProps}
+                        variant="ghost"
+                        size="sm"
+                        className="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
+                    >
+                        <ArrowLeft className="mr-2 size-4" />
+                        Back
+                    </Button>
+                )}
+
+                <div className="flex-1" />
+
+                <Button
+                    {...primaryProps}
+                    size="sm"
+                    className="bg-blue-600 hover:bg-blue-700 text-white font-semibold min-w-[100px]"
+                >
+                    {isLastStep ? (
+                        <>
+                            Get Started
+                            <Check className="ml-2 size-4" />
+                        </>
+                    ) : (
+                        <>
+                            Continue
+                            <ArrowRight className="ml-2 size-4" />
+                        </>
+                    )}
+                </Button>
+            </div>
+        </div>
+    );
+}
diff --git a/community-chatbot/components/agent/AppTour/steps.tsx b/community-chatbot/components/agent/AppTour/steps.tsx
new file mode 100644
index 00000000..a900e3c7
--- /dev/null
+++ b/community-chatbot/components/agent/AppTour/steps.tsx
@@ -0,0 +1,77 @@
+import { Step } from "react-joyride";
+
+export const steps: Step[] = [
+    {
+        target: 'body',
+        content: (
+            <div className="text-left">
+                <h3 className="font-bold text-lg mb-2">Welcome</h3>
+                <p className="text-sm opacity-80">
+                    Welcome to your workspace. This app uses different assistants for different tasks. Let’s take a quick tour.
+                </p>
+            </div>
+        ),
+        placement: 'center',
+        disableBeacon: true,
+    },
+    {
+        target: '#mode-selector',
+        content: (
+            <div className="text-left">
+                <h3 className="font-bold text-lg mb-2">Assistants</h3>
+                <p className="text-sm opacity-80">
+                    Select an assistant based on what you want to do. Each assistant is designed for a specific type of work.
+                </p>
+            </div>
+        ),
+        placement: 'bottom',
+    },
+    {
+        target: '#active-assistant',
+        content: (
+            <div className="text-left">
+                <h3 className="font-bold text-lg mb-2">Current Assistant</h3>
+                <p className="text-sm opacity-80">
+                    Only one assistant can be active at a time. All actions and responses follow this selection.
+                </p>
+            </div>
+        ),
+        placement: 'bottom',
+    },
+    {
+        target: '#chat-history',
+        content: (
+            <div className="text-left">
+                <h3 className="font-bold text-lg mb-2">Conversation History</h3>
+                <p className="text-sm opacity-80">
+                    This shows past conversations for the selected assistant. Each assistant has its own history.
+                </p>
+            </div>
+        ),
+        placement: 'right',
+    },
+    {
+        target: '#new-chat-button',
+        content: (
+            <div className="text-left">
+                <h3 className="font-bold text-lg mb-2">New Chat</h3>
+                <p className="text-sm opacity-80">
+                    Start a new conversation here. The chat will belong to the currently selected assistant.
+                </p>
+            </div>
+        ),
+        placement: 'bottom',
+    },
+    {
+        target: 'body',
+        content: (
+            <div className="text-left">
+                <h3 className="font-bold text-lg mb-2">All Set</h3>
+                <p className="text-sm opacity-80">
+                    You’re ready to begin. Choose an assistant and start your first conversation.
+                </p>
+            </div>
+        ),
+        placement: 'center',
+    },
+];
diff --git a/community-chatbot/components/agent/AppTour/styles.ts b/community-chatbot/components/agent/AppTour/styles.ts
new file mode 100644
index 00000000..c9ce362d
--- /dev/null
+++ b/community-chatbot/components/agent/AppTour/styles.ts
@@ -0,0 +1,14 @@
+export const getJoyrideStyles = () => ({
+    options: {
+        overlayColor: 'rgba(0, 0, 0, 0.6)',
+        primaryColor: '#2563eb',
+        zIndex: 10000,
+    },
+    spotlight: {
+        borderRadius: '1rem',
+    },
+    tooltip: {
+        backgroundColor: 'transparent',
+        padding: 0,
+    },
+});
diff --git a/community-chatbot/components/agent/Header/HeaderActions.tsx b/community-chatbot/components/agent/Header/HeaderActions.tsx
index 4fe1ea7f..24bd0f15 100644
--- a/community-chatbot/components/agent/Header/HeaderActions.tsx
+++ b/community-chatbot/components/agent/Header/HeaderActions.tsx
@@ -14,7 +14,7 @@ export function HeaderActions() {
     const { isCreatingConversation } = useAgentStore();
 
     return (
-        <div className="flex items-center gap-2">
+        <div id="header-actions" className="flex items-center gap-2">
             <Button
                 variant="outline"
                 size="sm"
diff --git a/community-chatbot/components/agent/Mode/Chat/InputBox.tsx b/community-chatbot/components/agent/Mode/Chat/InputBox.tsx
index 774c9add..9a34ad07 100644
--- a/community-chatbot/components/agent/Mode/Chat/InputBox.tsx
+++ b/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>
   );
-}
\ No newline at end of file
+}
diff --git a/community-chatbot/components/agent/Mode/Chat/InputBox/MessageInput.tsx b/community-chatbot/components/agent/Mode/Chat/InputBox/MessageInput.tsx
index e10a0de9..3f74d580 100644
--- a/community-chatbot/components/agent/Mode/Chat/InputBox/MessageInput.tsx
+++ b/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>
   );
diff --git a/community-chatbot/components/agent/Mode/Chat/InputBox/SubmitButton.tsx b/community-chatbot/components/agent/Mode/Chat/InputBox/SubmitButton.tsx
index cffbd9fd..8ff4fc49 100644
--- a/community-chatbot/components/agent/Mode/Chat/InputBox/SubmitButton.tsx
+++ b/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>
diff --git a/community-chatbot/components/agent/Mode/Chat/Panel/ChatAvatar.tsx b/community-chatbot/components/agent/Mode/Chat/Panel/ChatAvatar.tsx
deleted file mode 100644
index 5f0ce12d..00000000
--- a/community-chatbot/components/agent/Mode/Chat/Panel/ChatAvatar.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Bot, User } from 'lucide-react';
-
-import { Avatar, AvatarFallback } from '@/components/ui/avatar';
-
-interface ChatAvatarProps {
-  role: "user" | "assistant"
-}
-
-export function ChatAvatar({ role }: ChatAvatarProps) {
-  if (role === "user") {
-    return (
-      <Avatar className="w-8 h-8">
-        <AvatarFallback className="bg-gray-600 text-white">
-          <User className="w-4 h-4" />
-        </AvatarFallback>
-      </Avatar>
-    )
-  } else {
-    return (
-      <Avatar className="w-8 h-8">
-        <AvatarFallback className="bg-blue-600 text-white">
-          <Bot className="w-4 h-4" />
-        </AvatarFallback>
-      </Avatar>
-    )
-  }
-}
diff --git a/community-chatbot/components/agent/Mode/Chat/Panel/CopyButton.tsx b/community-chatbot/components/agent/Mode/Chat/Panel/CopyButton.tsx
new file mode 100644
index 00000000..d67ae642
--- /dev/null
+++ b/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>
+    );
+}
\ No newline at end of file
diff --git a/community-chatbot/components/agent/Mode/Chat/Panel/MessageList.tsx b/community-chatbot/components/agent/Mode/Chat/Panel/MessageList.tsx
index 911119b1..ccf88edc 100644
--- a/community-chatbot/components/agent/Mode/Chat/Panel/MessageList.tsx
+++ b/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>
   );
-}
+}
\ No newline at end of file
diff --git a/community-chatbot/components/agent/ModeSelector.tsx b/community-chatbot/components/agent/ModeSelector.tsx
index f73ba6ba..a2895166 100644
--- a/community-chatbot/components/agent/ModeSelector.tsx
+++ b/community-chatbot/components/agent/ModeSelector.tsx
@@ -5,7 +5,7 @@ import { integrationModes } from '@/lib/constants/chat';
 
 export function ModeSelector() {
     return (
-        <div className="bg-white dark:bg-gray-800 p-4 dark:border-gray-700 border-b">
+        <div id="mode-selector" className="bg-white dark:bg-gray-800 p-4 dark:border-gray-700 border-b">
             <div className="gap-2 sm:gap-3 grid grid-cols-2 lg:grid-cols-4">
                 {integrationModes.map((mode) => (
                     <ModeButton key={mode.id} mode={mode} />
diff --git a/community-chatbot/components/agent/ModeSelector/ModeButton.tsx b/community-chatbot/components/agent/ModeSelector/ModeButton.tsx
index 7e31a757..6b2a3a6b 100644
--- a/community-chatbot/components/agent/ModeSelector/ModeButton.tsx
+++ b/community-chatbot/components/agent/ModeSelector/ModeButton.tsx
@@ -26,6 +26,7 @@ export function ModeButton({ mode }: ModeButtonProps) {
 
     return (
         <Button
+            id={isActive ? 'active-assistant' : undefined}
             onClick={handleClick}
             variant={isActive ? 'default' : 'outline'}
             className={cn(
diff --git a/community-chatbot/components/agent/Sidebar.tsx b/community-chatbot/components/agent/Sidebar.tsx
index 6904afb2..7f6c6ce2 100644
--- a/community-chatbot/components/agent/Sidebar.tsx
+++ b/community-chatbot/components/agent/Sidebar.tsx
@@ -3,13 +3,13 @@
 import { ChatHistory } from '@/components/agent/Sidebar/ChatHistory';
 import { NewChatButton } from '@/components/agent/Sidebar/NewChatButton';
 import {
-  Header as SidebarHeader,
+    Header as SidebarHeader,
 } from '@/components/agent/Sidebar/SidebarHeader';
 import { Sidebar, SidebarContent } from '@/components/ui/sidebar';
 
 export function AppSidebar() {
     return (
-        <Sidebar side="left" variant="sidebar" collapsible="icon">
+        <Sidebar id="app-sidebar" side="left" variant="sidebar" collapsible="icon">
             <SidebarHeader />
             <SidebarContent className="flex flex-col h-full">
                 <NewChatButton />
diff --git a/community-chatbot/components/agent/Sidebar/ChatHistory.tsx b/community-chatbot/components/agent/Sidebar/ChatHistory.tsx
index 1780d2a7..f12128c1 100644
--- a/community-chatbot/components/agent/Sidebar/ChatHistory.tsx
+++ b/community-chatbot/components/agent/Sidebar/ChatHistory.tsx
@@ -53,7 +53,7 @@ export function ChatHistory() {
     }
 
     return (
-        <SidebarGroup className="space-y-4 overflow-y-auto">
+        <SidebarGroup id="chat-history" className="space-y-4 overflow-y-auto">
             {chats?.map((chat) => {
                 const isPending = pendingOperations.includes(chat.id);
                 const isActive = chat.id === activeChat;
diff --git a/community-chatbot/components/agent/Sidebar/NewChatButton.tsx b/community-chatbot/components/agent/Sidebar/NewChatButton.tsx
index 0440da3c..57f7be0c 100644
--- a/community-chatbot/components/agent/Sidebar/NewChatButton.tsx
+++ b/community-chatbot/components/agent/Sidebar/NewChatButton.tsx
@@ -15,6 +15,7 @@ export function NewChatButton() {
     return (
         <SidebarGroup className="flex justify-center items-center bg-white dark:bg-gray-800 p-2 dark:border-gray-700 border-b">
             <Button
+                id="new-chat-button"
                 variant="outline"
                 size={open ? "icon" : "default"}
                 className="w-full"
diff --git a/community-chatbot/package.json b/community-chatbot/package.json
index 5cbdf6bc..051828c6 100644
--- a/community-chatbot/package.json
+++ b/community-chatbot/package.json
@@ -60,8 +60,10 @@
     "react-dom": "^18",
     "react-firebase-hooks": "^5.1.1",
     "react-hook-form": "^7.54.1",
+    "react-joyride": "^2.9.3",
     "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",
@@ -79,6 +81,7 @@
     "@types/node": "^22",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-joyride": "^2.0.5",
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^30.2.0",
     "jest-fetch-mock": "^3.0.3",
diff --git a/community-chatbot/pnpm-lock.yaml b/community-chatbot/pnpm-lock.yaml
index 03c676e3..7c3c00a3 100644
--- a/community-chatbot/pnpm-lock.yaml
+++ b/community-chatbot/pnpm-lock.yaml
@@ -158,12 +158,18 @@ importers:
       react-hook-form:
         specifier: ^7.54.1
         version: 7.62.0(react@18.3.1)
+      react-joyride:
+        specifier: ^2.9.3
+        version: 2.9.3(@types/react@18.3.24)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-markdown:
         specifier: ^10.1.0
         version: 10.1.0(@types/react@18.3.24)(react@18.3.1)
       react-resizable-panels:
         specifier: ^2.1.7
         version: 2.1.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react-textarea-autosize:
+        specifier: ^8.5.9
+        version: 8.5.9(@types/react@18.3.24)(react@18.3.1)
       recharts:
         specifier: 2.15.0
         version: 2.15.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -210,6 +216,9 @@ importers:
       '@types/react-dom':
         specifier: ^18
         version: 18.3.7(@types/react@18.3.24)
+      '@types/react-joyride':
+        specifier: ^2.0.5
+        version: 2.0.5(@types/react@18.3.24)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       jest:
         specifier: ^30.2.0
         version: 30.2.0(@types/node@22.18.1)
@@ -707,6 +716,12 @@ packages:
   '@floating-ui/utils@0.2.10':
     resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
 
+  '@gilbarbara/deep-equal@0.1.2':
+    resolution: {integrity: sha512-jk+qzItoEb0D0xSSmrKDDzf9sheQj/BAPxlgNxgmOaA3mxpUa6ndJLYGZKsJnIVEQSD8zcTbyILz7I0HcnBCRA==}
+
+  '@gilbarbara/deep-equal@0.3.1':
+    resolution: {integrity: sha512-I7xWjLs2YSVMc5gGx1Z3ZG1lgFpITPndpi8Ku55GeEIKpACCPQNS/OTqQbxgTCfq0Ncvcc+CrFov96itVh6Qvw==}
+
   '@grpc/grpc-js@1.9.15':
     resolution: {integrity: sha512-nqE7Hc0AzI+euzUwDAy0aY5hCp10r734gMGRdU+qOPX0XSceI2ULrcXB5U2xSc5VkWwalCj4M7GzCAygZl2KoQ==}
     engines: {node: ^8.13.0 || >=10.10.0}
@@ -2055,6 +2070,10 @@ packages:
     peerDependencies:
       '@types/react': ^18.0.0
 
+  '@types/react-joyride@2.0.5':
+    resolution: {integrity: sha512-N3bd0w3D42gZRpXy/wYsSZ8JvhyuyN0qAFTkg2iNsJ1NueMqfI0TJL+BZhhFkAqNhEETJEpDc8t4bj3DEJyLoQ==}
+    deprecated: This is a stub types definition. react-joyride provides its own type definitions, so you do not need this installed.
+
   '@types/react@18.3.24':
     resolution: {integrity: sha512-0dLEBsA1kI3OezMBF8nSsb7Nk19ZnsyE1LLhB8r27KbgU5H4pvuqZLdtE+aUkJVoXgTVuA+iLIwmZ0TuK4tx6A==}
 
@@ -2509,6 +2528,10 @@ packages:
       babel-plugin-macros:
         optional: true
 
+  deep-diff@1.0.2:
+    resolution: {integrity: sha512-aWS3UIVH+NPGCD1kki+DCU9Dua032iSsO43LqQpcs4R3+dVv7tX0qBGjiVHJHjplsoUM2XRO/KB92glqc68awg==}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
+
   deepmerge@4.3.1:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
     engines: {node: '>=0.10.0'}
@@ -2827,6 +2850,12 @@ packages:
   is-hexadecimal@2.0.1:
     resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==}
 
+  is-lite@0.8.2:
+    resolution: {integrity: sha512-JZfH47qTsslwaAsqbMI3Q6HNNjUuq6Cmzzww50TdP5Esb6e1y2sK2UAaZZuzfAzpoI2AkxoPQapZdlDuP6Vlsw==}
+
+  is-lite@1.2.1:
+    resolution: {integrity: sha512-pgF+L5bxC+10hLBgf6R2P4ZZUBOQIIacbdo8YvuCP8/JvsWxG7aZ9p10DYuLtifFci4l3VITphhMlMV4Y+urPw==}
+
   is-number@7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
@@ -3456,6 +3485,10 @@ packages:
     resolution: {integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==}
     engines: {node: '>=8'}
 
+  popper.js@1.16.1:
+    resolution: {integrity: sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==}
+    deprecated: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
+
   postcss-import@15.1.0:
     resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
     engines: {node: '>=14.0.0'}
@@ -3560,12 +3593,24 @@ packages:
       firebase: '>= 9.0.0'
       react: '>= 16.8.0'
 
+  react-floater@0.7.9:
+    resolution: {integrity: sha512-NXqyp9o8FAXOATOEo0ZpyaQ2KPb4cmPMXGWkx377QtJkIXHlHRAGer7ai0r0C1kG5gf+KJ6Gy+gdNIiosvSicg==}
+    peerDependencies:
+      react: 15 - 18
+      react-dom: 15 - 18
+
   react-hook-form@7.62.0:
     resolution: {integrity: sha512-7KWFejc98xqG/F4bAxpL41NB3o1nnvQO1RWZT3TqRZYL8RryQETGfEdVnJN2fy1crCiBLLjkRBVK05j24FxJGA==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
       react: ^16.8.0 || ^17 || ^18 || ^19
 
+  react-innertext@1.1.5:
+    resolution: {integrity: sha512-PWAqdqhxhHIv80dT9znP2KvS+hfkbRovFp4zFYHFFlOoQLRiawIic81gKb3U1wEyJZgMwgs3JoLtwryASRWP3Q==}
+    peerDependencies:
+      '@types/react': '>=0.0.0 <=99'
+      react: '>=0.0.0 <=99'
+
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -3575,6 +3620,12 @@ packages:
   react-is@18.3.1:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
 
+  react-joyride@2.9.3:
+    resolution: {integrity: sha512-1+Mg34XK5zaqJ63eeBhqdbk7dlGCFp36FXwsEvgpjqrtyywX2C6h9vr3jgxP0bGHCw8Ilsp/nRDzNVq6HJ3rNw==}
+    peerDependencies:
+      react: 15 - 18
+      react-dom: 15 - 18
+
   react-markdown@10.1.0:
     resolution: {integrity: sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ==}
     peerDependencies:
@@ -3623,6 +3674,12 @@ packages:
       '@types/react':
         optional: true
 
+  react-textarea-autosize@8.5.9:
+    resolution: {integrity: sha512-U1DGlIQN5AwgjTyOEnI1oCcMuEr1pv1qOtklB2l4nyMGbHzWrI0eFsYK0zos2YWqAolJyG0IWJaqWmWj5ETh0A==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   react-transition-group@4.4.5:
     resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
     peerDependencies:
@@ -3706,6 +3763,12 @@ packages:
   scheduler@0.23.2:
     resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
 
+  scroll@3.0.1:
+    resolution: {integrity: sha512-pz7y517OVls1maEzlirKO5nPYle9AXsFzTMNJrRGmT951mzpIBy7sNHOg5o/0MQd/NqliCiWnAi0kZneMPFLcg==}
+
+  scrollparent@2.1.0:
+    resolution: {integrity: sha512-bnnvJL28/Rtz/kz2+4wpBjHzWoEzXhVg/TE8BeVGJHUqE8THNIRnDxDWMktwM+qahvlRdvlLdsQfYe+cuqfZeA==}
+
   semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
@@ -3908,6 +3971,12 @@ packages:
     resolution: {integrity: sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==}
     engines: {node: '>=18'}
 
+  tree-changes@0.11.3:
+    resolution: {integrity: sha512-r14mvDZ6tqz8PRQmlFKjhUVngu4VZ9d92ON3tp0EGpFBE6PAHOq8Bx8m8ahbNoGE3uI/npjYcJiqVydyOiYXag==}
+
+  tree-changes@0.9.3:
+    resolution: {integrity: sha512-vvvS+O6kEeGRzMglTKbc19ltLWNtmNt1cpBoSYLj/iEcPVvpJasemKOlxBrmZaCtDJoF+4bwv3m01UKYi8mukQ==}
+
   trim-lines@3.0.1:
     resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
 
@@ -3928,6 +3997,10 @@ packages:
     resolution: {integrity: sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==}
     engines: {node: '>=10'}
 
+  type-fest@4.41.0:
+    resolution: {integrity: sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==}
+    engines: {node: '>=16'}
+
   typescript@5.9.2:
     resolution: {integrity: sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==}
     engines: {node: '>=14.17'}
@@ -3973,6 +4046,33 @@ packages:
       '@types/react':
         optional: true
 
+  use-composed-ref@1.4.0:
+    resolution: {integrity: sha512-djviaxuOOh7wkj0paeO1Q/4wMZ8Zrnag5H6yBvzN7AKKe8beOaED9SF5/ByLqsku8NP4zQqsvM2u3ew/tJK8/w==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-isomorphic-layout-effect@1.2.1:
+    resolution: {integrity: sha512-tpZZ+EX0gaghDAiFR37hj5MgY6ZN55kLiPkJsKxBMZ6GZdOSPJXiOzPM984oPYZ5AnehYx5WQp1+ME8I/P/pRA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-latest@1.3.0:
+    resolution: {integrity: sha512-mhg3xdm9NaM8q+gLT8KryJPnRFOz1/5XPBhmDEVZK1webPzDjrPk7f/mbpeLqTgB9msytYWANxgALOCJKnLvcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   use-sidecar@1.1.3:
     resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
     engines: {node: '>=10'}
@@ -4755,6 +4855,10 @@ snapshots:
 
   '@floating-ui/utils@0.2.10': {}
 
+  '@gilbarbara/deep-equal@0.1.2': {}
+
+  '@gilbarbara/deep-equal@0.3.1': {}
+
   '@grpc/grpc-js@1.9.15':
     dependencies:
       '@grpc/proto-loader': 0.7.15
@@ -6204,6 +6308,14 @@ snapshots:
     dependencies:
       '@types/react': 18.3.24
 
+  '@types/react-joyride@2.0.5(@types/react@18.3.24)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      react-joyride: 2.9.3(@types/react@18.3.24)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+    transitivePeerDependencies:
+      - '@types/react'
+      - react
+      - react-dom
+
   '@types/react@18.3.24':
     dependencies:
       '@types/prop-types': 15.7.15
@@ -6606,6 +6718,8 @@ snapshots:
 
   dedent@1.7.0: {}
 
+  deep-diff@1.0.2: {}
+
   deepmerge@4.3.1: {}
 
   dequal@2.0.3: {}
@@ -6934,6 +7048,10 @@ snapshots:
 
   is-hexadecimal@2.0.1: {}
 
+  is-lite@0.8.2: {}
+
+  is-lite@1.2.1: {}
+
   is-number@7.0.0: {}
 
   is-plain-obj@4.1.0: {}
@@ -7941,6 +8059,8 @@ snapshots:
     dependencies:
       find-up: 4.1.0
 
+  popper.js@1.16.1: {}
+
   postcss-import@15.1.0(postcss@8.5.6):
     dependencies:
       postcss: 8.5.6
@@ -8054,16 +8174,49 @@ snapshots:
       firebase: 12.2.1
       react: 18.3.1
 
+  react-floater@0.7.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      deepmerge: 4.3.1
+      is-lite: 0.8.2
+      popper.js: 1.16.1
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      tree-changes: 0.9.3
+
   react-hook-form@7.62.0(react@18.3.1):
     dependencies:
       react: 18.3.1
 
+  react-innertext@1.1.5(@types/react@18.3.24)(react@18.3.1):
+    dependencies:
+      '@types/react': 18.3.24
+      react: 18.3.1
+
   react-is@16.13.1: {}
 
   react-is@17.0.2: {}
 
   react-is@18.3.1: {}
 
+  react-joyride@2.9.3(@types/react@18.3.24)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@gilbarbara/deep-equal': 0.3.1
+      deep-diff: 1.0.2
+      deepmerge: 4.3.1
+      is-lite: 1.2.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-floater: 0.7.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react-innertext: 1.1.5(@types/react@18.3.24)(react@18.3.1)
+      react-is: 16.13.1
+      scroll: 3.0.1
+      scrollparent: 2.1.0
+      tree-changes: 0.11.3
+      type-fest: 4.41.0
+    transitivePeerDependencies:
+      - '@types/react'
+
   react-markdown@10.1.0(@types/react@18.3.24)(react@18.3.1):
     dependencies:
       '@types/hast': 3.0.4
@@ -8122,6 +8275,15 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.24
 
+  react-textarea-autosize@8.5.9(@types/react@18.3.24)(react@18.3.1):
+    dependencies:
+      '@babel/runtime': 7.28.4
+      react: 18.3.1
+      use-composed-ref: 1.4.0(@types/react@18.3.24)(react@18.3.1)
+      use-latest: 1.3.0(@types/react@18.3.24)(react@18.3.1)
+    transitivePeerDependencies:
+      - '@types/react'
+
   react-transition-group@4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@babel/runtime': 7.28.4
@@ -8233,6 +8395,10 @@ snapshots:
     dependencies:
       loose-envify: 1.4.0
 
+  scroll@3.0.1: {}
+
+  scrollparent@2.1.0: {}
+
   semver@6.3.1: {}
 
   semver@7.7.3: {}
@@ -8433,6 +8599,16 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
+  tree-changes@0.11.3:
+    dependencies:
+      '@gilbarbara/deep-equal': 0.3.1
+      is-lite: 1.2.1
+
+  tree-changes@0.9.3:
+    dependencies:
+      '@gilbarbara/deep-equal': 0.1.2
+      is-lite: 0.8.2
+
   trim-lines@3.0.1: {}
 
   trough@2.2.0: {}
@@ -8445,6 +8621,8 @@ snapshots:
 
   type-fest@0.21.3: {}
 
+  type-fest@4.41.0: {}
+
   typescript@5.9.2: {}
 
   undici-types@6.21.0: {}
@@ -8519,6 +8697,25 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.24
 
+  use-composed-ref@1.4.0(@types/react@18.3.24)(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.24
+
+  use-isomorphic-layout-effect@1.2.1(@types/react@18.3.24)(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.24
+
+  use-latest@1.3.0(@types/react@18.3.24)(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      use-isomorphic-layout-effect: 1.2.1(@types/react@18.3.24)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.24
+
   use-sidecar@1.1.3(@types/react@18.3.24)(react@18.3.1):
     dependencies:
       detect-node-es: 1.1.0