chore: update styles + add mobile drawer

autogpt_platform/frontend/src/app/(platform)/copilot-2/components/ChatContainer/ChatContainer.tsx

@@ -1,10 +1,10 @@
 "use client";
-import { UIDataTypes, UITools, UIMessage } from "ai";
-import { ChatMessagesContainer } from "../ChatMessagesContainer/ChatMessagesContainer";
-import { EmptySession } from "../EmptySession/EmptySession";
 import { ChatInput } from "@/components/contextual/Chat/components/ChatInput/ChatInput";
-import { CopilotChatActionsProvider } from "../CopilotChatActionsProvider/CopilotChatActionsProvider";
+import { UIDataTypes, UIMessage, UITools } from "ai";
 import { LayoutGroup, motion } from "framer-motion";
+import { ChatMessagesContainer } from "../ChatMessagesContainer/ChatMessagesContainer";
+import { CopilotChatActionsProvider } from "../CopilotChatActionsProvider/CopilotChatActionsProvider";
+import { EmptySession } from "../EmptySession/EmptySession";
 
 export interface ChatContainerProps {
   messages: UIMessage<unknown, UIDataTypes, UITools>[];
@@ -29,40 +29,38 @@ export const ChatContainer = ({
   return (
     <CopilotChatActionsProvider onSend={onSend}>
       <LayoutGroup id="copilot-2-chat-layout">
-        <div className="h-full w-full pb-6">
-          <div className="flex h-full flex-col">
-            {sessionId ? (
-              <div className="mx-auto flex h-full w-full max-w-3xl flex-col">
-                <ChatMessagesContainer
-                  messages={messages}
-                  status={status}
-                  error={error}
-                />
-                <motion.div
-                  layoutId={inputLayoutId}
-                  transition={{ type: "spring", bounce: 0.2, duration: 0.65 }}
-                  className="relative px-3 pt-2"
-                >
-                  <div className="pointer-events-none absolute top-[-18px] z-10 h-6 w-full bg-gradient-to-b from-transparent to-[#f8f8f9] dark:to-background" />
-                  <ChatInput
-                    inputId="chat-input-session"
-                    onSend={onSend}
-                    disabled={status === "streaming"}
-                    isStreaming={status === "streaming"}
-                    onStop={() => {}}
-                    placeholder="You can search or just ask"
-                  />
-                </motion.div>
-              </div>
-            ) : (
-              <EmptySession
-                inputLayoutId={inputLayoutId}
-                isCreatingSession={isCreatingSession}
-                onCreateSession={onCreateSession}
-                onSend={onSend}
+        <div className="flex h-full min-h-0 w-full flex-col bg-[#f8f8f9] px-2 lg:px-0">
+          {sessionId ? (
+            <div className="mx-auto flex h-full min-h-0 w-full max-w-3xl flex-col">
+              <ChatMessagesContainer
+                messages={messages}
+                status={status}
+                error={error}
               />
-            )}
-          </div>
+              <motion.div
+                layoutId={inputLayoutId}
+                transition={{ type: "spring", bounce: 0.2, duration: 0.65 }}
+                className="relative px-3 pb-2 pt-2"
+              >
+                <div className="pointer-events-none absolute left-0 right-0 top-[-18px] z-10 h-6 bg-gradient-to-b from-transparent to-[#f8f8f9]" />
+                <ChatInput
+                  inputId="chat-input-session"
+                  onSend={onSend}
+                  disabled={status === "streaming"}
+                  isStreaming={status === "streaming"}
+                  onStop={() => {}}
+                  placeholder="What else can I help with?"
+                />
+              </motion.div>
+            </div>
+          ) : (
+            <EmptySession
+              inputLayoutId={inputLayoutId}
+              isCreatingSession={isCreatingSession}
+              onCreateSession={onCreateSession}
+              onSend={onSend}
+            />
+          )}
         </div>
       </LayoutGroup>
     </CopilotChatActionsProvider>

autogpt_platform/frontend/src/app/(platform)/copilot-2/components/ChatMessagesContainer/ChatMessagesContainer.tsx

@@ -1,7 +1,6 @@
 import {
   Conversation,
   ConversationContent,
-  ConversationEmptyState,
   ConversationScrollButton,
 } from "@/components/ai-elements/conversation";
 import {
@@ -9,8 +8,7 @@ import {
   MessageContent,
   MessageResponse,
 } from "@/components/ai-elements/message";
-import { MessageSquareIcon } from "lucide-react";
-import { UIMessage, UIDataTypes, UITools, ToolUIPart } from "ai";
+import { UIDataTypes, UIMessage, UITools, ToolUIPart } from "ai";
 import { FindBlocksTool } from "../../tools/FindBlocks/FindBlocks";
 import { FindAgentsTool } from "../../tools/FindAgents/FindAgents";
 import { SearchDocsTool } from "../../tools/SearchDocs/SearchDocs";
@@ -32,103 +30,97 @@ export const ChatMessagesContainer = ({
   error,
 }: ChatMessagesContainerProps) => {
   return (
-    <Conversation className="flex-1">
-      <ConversationContent>
-        {messages.length === 0 ? (
-          <ConversationEmptyState
-            icon={<MessageSquareIcon className="size-12" />}
-            title="Start a conversation"
-            description="Type a message below to begin chatting"
-          />
-        ) : (
-          messages.map((message) => (
-            <Message from={message.role} key={message.id}>
-              <MessageContent
-                className={
-                  "rounded-xl border px-3 py-2 " +
-                  "group-[.is-user]:rounded-2xl group-[.is-user]:border-purple-200 group-[.is-user]:bg-purple-100 group-[.is-user]:text-slate-900 " +
-                  "group-[.is-assistant]:border-none group-[.is-assistant]:bg-slate-50/20 group-[.is-assistant]:text-slate-900"
+    <Conversation className="min-h-0 flex-1">
+      <ConversationContent className="gap-6 px-3 py-6">
+        {messages.map((message) => (
+          <Message from={message.role} key={message.id}>
+            <MessageContent
+              className={
+                "text-[1rem] leading-relaxed " +
+                "group-[.is-user]:rounded-xl group-[.is-user]:bg-purple-100 group-[.is-user]:px-3 group-[.is-user]:py-2.5 group-[.is-user]:text-slate-900 group-[.is-user]:[border-bottom-right-radius:0] " +
+                "group-[.is-assistant]:bg-transparent group-[.is-assistant]:text-slate-900"
+              }
+            >
+              {message.parts.map((part, i) => {
+                switch (part.type) {
+                  case "text":
+                    return (
+                      <MessageResponse key={`${message.id}-${i}`}>
+                        {part.text}
+                      </MessageResponse>
+                    );
+                  case "tool-find_block":
+                    return (
+                      <FindBlocksTool
+                        key={`${message.id}-${i}`}
+                        part={part as ToolUIPart}
+                      />
+                    );
+                  case "tool-find_agent":
+                  case "tool-find_library_agent":
+                    return (
+                      <FindAgentsTool
+                        key={`${message.id}-${i}`}
+                        part={part as ToolUIPart}
+                      />
+                    );
+                  case "tool-search_docs":
+                  case "tool-get_doc_page":
+                    return (
+                      <SearchDocsTool
+                        key={`${message.id}-${i}`}
+                        part={part as ToolUIPart}
+                      />
+                    );
+                  case "tool-run_block":
+                    return (
+                      <RunBlockTool
+                        key={`${message.id}-${i}`}
+                        part={part as ToolUIPart}
+                      />
+                    );
+                  case "tool-run_agent":
+                  case "tool-schedule_agent":
+                    return (
+                      <RunAgentTool
+                        key={`${message.id}-${i}`}
+                        part={part as ToolUIPart}
+                      />
+                    );
+                  case "tool-create_agent":
+                    return (
+                      <CreateAgentTool
+                        key={`${message.id}-${i}`}
+                        part={part as ToolUIPart}
+                      />
+                    );
+                  case "tool-edit_agent":
+                    return (
+                      <EditAgentTool
+                        key={`${message.id}-${i}`}
+                        part={part as ToolUIPart}
+                      />
+                    );
+                  case "tool-view_agent_output":
+                    return (
+                      <ViewAgentOutputTool
+                        key={`${message.id}-${i}`}
+                        part={part as ToolUIPart}
+                      />
+                    );
+                  default:
+                    return null;
                 }
-              >
-                {message.parts.map((part, i) => {
-                  switch (part.type) {
-                    case "text":
-                      return (
-                        <MessageResponse key={`${message.id}-${i}`}>
-                          {part.text}
-                        </MessageResponse>
-                      );
-                    case "tool-find_block":
-                      return (
-                        <FindBlocksTool
-                          key={`${message.id}-${i}`}
-                          part={part as ToolUIPart}
-                        />
-                      );
-                    case "tool-find_agent":
-                    case "tool-find_library_agent":
-                      return (
-                        <FindAgentsTool
-                          key={`${message.id}-${i}`}
-                          part={part as ToolUIPart}
-                        />
-                      );
-                    case "tool-search_docs":
-                    case "tool-get_doc_page":
-                      return (
-                        <SearchDocsTool
-                          key={`${message.id}-${i}`}
-                          part={part as ToolUIPart}
-                        />
-                      );
-                    case "tool-run_block":
-                      return (
-                        <RunBlockTool
-                          key={`${message.id}-${i}`}
-                          part={part as ToolUIPart}
-                        />
-                      );
-                    case "tool-run_agent":
-                    case "tool-schedule_agent":
-                      return (
-                        <RunAgentTool
-                          key={`${message.id}-${i}`}
-                          part={part as ToolUIPart}
-                        />
-                      );
-                    case "tool-create_agent":
-                      return (
-                        <CreateAgentTool
-                          key={`${message.id}-${i}`}
-                          part={part as ToolUIPart}
-                        />
-                      );
-                    case "tool-edit_agent":
-                      return (
-                        <EditAgentTool
-                          key={`${message.id}-${i}`}
-                          part={part as ToolUIPart}
-                        />
-                      );
-                    case "tool-view_agent_output":
-                      return (
-                        <ViewAgentOutputTool
-                          key={`${message.id}-${i}`}
-                          part={part as ToolUIPart}
-                        />
-                      );
-                    default:
-                      return null;
-                  }
-                })}
-              </MessageContent>
-            </Message>
-          ))
-        )}
+              })}
+            </MessageContent>
+          </Message>
+        ))}
         {status === "submitted" && (
           <Message from="assistant">
-            <MessageContent>
-              <p className="text-zinc-500">Thinking...</p>
+            <MessageContent className="text-[1rem] leading-relaxed">
+              <span className="inline-block animate-shimmer bg-gradient-to-r from-neutral-400 via-neutral-600 to-neutral-400 bg-[length:200%_100%] bg-clip-text text-transparent">
+                Thinking...
+              </span>
             </MessageContent>
           </Message>
         )}

autogpt_platform/frontend/src/app/(platform)/copilot-2/components/ChatSidebar/ChatSidebar.tsx

@@ -1,35 +1,28 @@
 "use client";
+import { useGetV2ListSessions } from "@/app/api/__generated__/endpoints/chat/chat";
+import { Button } from "@/components/atoms/Button/Button";
+import { Text } from "@/components/atoms/Text/Text";
 import {
   Sidebar,
-  SidebarHeader,
   SidebarContent,
   SidebarFooter,
+  SidebarHeader,
   SidebarTrigger,
   useSidebar,
 } from "@/components/ui/sidebar";
 import { cn } from "@/lib/utils";
 import {
+  PlusCircleIcon,
   PlusIcon,
   SpinnerGapIcon,
-  ChatCircleIcon,
 } from "@phosphor-icons/react";
 import { motion } from "framer-motion";
-import { useState } from "react";
 import { parseAsString, useQueryState } from "nuqs";
-import {
-  postV2CreateSession,
-  useGetV2ListSessions,
-  getGetV2ListSessionsQueryKey,
-} from "@/app/api/__generated__/endpoints/chat/chat";
-import { Button } from "@/components/atoms/Button/Button";
-import { useQueryClient } from "@tanstack/react-query";
 
 export function ChatSidebar() {
   const { state } = useSidebar();
   const isCollapsed = state === "collapsed";
-  const [isCreating, setIsCreating] = useState(false);
   const [sessionId, setSessionId] = useQueryState("sessionId", parseAsString);
-  const queryClient = useQueryClient();
 
   const { data: sessionsResponse, isLoading: isLoadingSessions } =
     useGetV2ListSessions({ limit: 50 });
@@ -37,22 +30,8 @@ export function ChatSidebar() {
   const sessions =
     sessionsResponse?.status === 200 ? sessionsResponse.data.sessions : [];
 
-  async function handleNewChat() {
-    if (isCreating) return;
-    setIsCreating(true);
-    try {
-      const response = await postV2CreateSession({
-        body: JSON.stringify({}),
-      });
-      if (response.status === 200 && response.data?.id) {
-        setSessionId(response.data.id);
-        queryClient.invalidateQueries({
-          queryKey: getGetV2ListSessionsQueryKey(),
-        });
-      }
-    } finally {
-      setIsCreating(false);
-    }
+  function handleNewChat() {
+    setSessionId(null);
   }
 
   function handleSelectSession(id: string) {
@@ -68,14 +47,27 @@ export function ChatSidebar() {
     if (diffDays === 0) return "Today";
     if (diffDays === 1) return "Yesterday";
     if (diffDays < 7) return `${diffDays} days ago`;
-    return date.toLocaleDateString();
+
+    const day = date.getDate();
+    const ordinal =
+      day % 10 === 1 && day !== 11
+        ? "st"
+        : day % 10 === 2 && day !== 12
+          ? "nd"
+          : day % 10 === 3 && day !== 13
+            ? "rd"
+            : "th";
+    const month = date.toLocaleDateString("en-US", { month: "short" });
+    const year = date.getFullYear();
+
+    return `${day}${ordinal} ${month} ${year}`;
   }
 
   return (
     <Sidebar
       variant="inset"
       collapsible="icon"
-      className="!top-[60px] !h-[calc(100vh-60px)]"
+      className="!top-[50px] !h-[calc(100vh-50px)] border-r border-zinc-100 px-0"
     >
       {isCollapsed && (
         <SidebarHeader
@@ -88,52 +80,49 @@ export function ChatSidebar() {
         >
           <motion.div
             key={isCollapsed ? "header-collapsed" : "header-expanded"}
-            className={cn(
-              "flex items-center gap-2",
-              isCollapsed ? "flex-row md:flex-col-reverse" : "flex-row",
-            )}
+            className="flex flex-col items-center gap-3 pt-4"
             initial={{ opacity: 0, filter: "blur(3px)" }}
             animate={{ opacity: 1, filter: "blur(0px)" }}
             transition={{ type: "spring", bounce: 0.2 }}
           >
-            {isCollapsed && (
-              <div className="h-fit rounded-3xl border border-neutral-400 bg-secondary p-1">
-                <SidebarTrigger />
-              </div>
-            )}
+            <div className="flex flex-col items-center gap-2">
+              <SidebarTrigger />
+              <Button
+                variant="ghost"
+                onClick={handleNewChat}
+                style={{ minWidth: "auto", width: "auto" }}
+              >
+                <PlusCircleIcon className="!size-5" />
+                <span className="sr-only">New Chat</span>
+              </Button>
+            </div>
           </motion.div>
         </SidebarHeader>
       )}
-      <SidebarContent className="gap-4 overflow-y-auto px-2 py-4 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-        <div className="flex items-center gap-2">
-          <Button
-            variant="outline"
-            size="icon"
-            onClick={handleNewChat}
-            disabled={isCreating}
-            className={cn(
-              "flex h-fit w-full items-center justify-center gap-2 rounded-3xl border-purple-400 bg-purple-100 px-3 py-2 text-purple-600 hover:border-purple-500 hover:bg-purple-200 hover:text-purple-700",
-              isCollapsed && "justify-center rounded-3xl px-1",
-            )}
+      <SidebarContent className="gap-4 overflow-y-auto px-4 py-4 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+        {!isCollapsed && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.2, delay: 0.1 }}
+            className="flex items-center justify-between px-3"
           >
-            {isCreating ? (
-              <SpinnerGapIcon className="h-4 w-4 animate-spin" weight="bold" />
-            ) : (
-              <PlusIcon className="h-4 w-4" weight="bold" />
-            )}
-            {!isCollapsed && (
-              <span>{isCreating ? "Creating..." : "New Chat"}</span>
-            )}
-          </Button>
-          {!isCollapsed && (
-            <div className="h-fit rounded-3xl border border-neutral-400 bg-secondary p-1">
+            <Text variant="h3" size="body-medium">
+              Your chats
+            </Text>
+            <div className="relative left-5">
               <SidebarTrigger />
             </div>
-          )}
-        </div>
+          </motion.div>
+        )}
 
         {!isCollapsed && (
-          <div className="mt-4 flex flex-col gap-1">
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.2, delay: 0.15 }}
+            className="mt-4 flex flex-col gap-1"
+          >
             {isLoadingSessions ? (
               <div className="flex items-center justify-center py-4">
                 <SpinnerGapIcon className="h-5 w-5 animate-spin text-neutral-400" />
@@ -148,27 +137,55 @@ export function ChatSidebar() {
                   key={session.id}
                   onClick={() => handleSelectSession(session.id)}
                   className={cn(
-                    "flex items-center gap-3 rounded-lg px-3 py-2 text-left text-sm transition-colors hover:bg-neutral-100 dark:hover:bg-neutral-800",
-                    sessionId === session.id &&
-                      "bg-neutral-100 dark:bg-neutral-800",
+                    "w-full rounded-lg px-3 py-2.5 text-left transition-colors",
+                    session.id === sessionId
+                      ? "bg-zinc-100"
+                      : "hover:bg-zinc-50",
                   )}
                 >
-                  <ChatCircleIcon className="h-4 w-4 shrink-0 text-neutral-500" />
-                  <div className="flex flex-col overflow-hidden">
-                    <span className="truncate font-medium">
-                      {session.title || `Untitled chat`}
-                    </span>
-                    <span className="text-xs text-neutral-500">
+                  <div className="flex min-w-0 max-w-full flex-col overflow-hidden">
+                    <div className="min-w-0 max-w-full">
+                      <Text
+                        variant="body"
+                        className={cn(
+                          "truncate font-normal",
+                          session.id === sessionId
+                            ? "text-zinc-600"
+                            : "text-zinc-800",
+                        )}
+                      >
+                        {session.title || `Untitled chat`}
+                      </Text>
+                    </div>
+                    <Text variant="small" className="text-neutral-400">
                       {formatDate(session.updated_at)}
-                    </span>
+                    </Text>
                   </div>
                 </button>
               ))
             )}
-          </div>
+          </motion.div>
         )}
       </SidebarContent>
-      <SidebarFooter className="px-2"></SidebarFooter>
+      {!isCollapsed && sessionId && (
+        <SidebarFooter className="shrink-0 bg-zinc-50 p-3 pb-1 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)]">
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.2, delay: 0.2 }}
+          >
+            <Button
+              variant="primary"
+              size="small"
+              onClick={handleNewChat}
+              className="w-full"
+              leftIcon={<PlusIcon className="h-4 w-4" weight="bold" />}
+            >
+              New Chat
+            </Button>
+          </motion.div>
+        </SidebarFooter>
+      )}
     </Sidebar>
   );
 }

autogpt_platform/frontend/src/app/(platform)/copilot-2/components/EmptySession/EmptySession.tsx

@@ -2,15 +2,16 @@
 
 import {
   getGreetingName,
+  getInputPlaceholder,
   getQuickActions,
 } from "@/app/(platform)/copilot/helpers";
 import { Button } from "@/components/atoms/Button/Button";
 import { Text } from "@/components/atoms/Text/Text";
 import { ChatInput } from "@/components/contextual/Chat/components/ChatInput/ChatInput";
 import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
-import { SparkleIcon, SpinnerGapIcon } from "@phosphor-icons/react";
+import { SpinnerGapIcon } from "@phosphor-icons/react";
 import { motion } from "framer-motion";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 interface Props {
   inputLayoutId: string;
@@ -28,6 +29,13 @@ export function EmptySession({
   const greetingName = getGreetingName(user);
   const quickActions = getQuickActions();
   const [loadingAction, setLoadingAction] = useState<string | null>(null);
+  const [inputPlaceholder, setInputPlaceholder] = useState(
+    getInputPlaceholder(),
+  );
+
+  useEffect(() => {
+    setInputPlaceholder(getInputPlaceholder(window.innerWidth));
+  }, [window.innerWidth]);
 
   async function handleQuickActionClick(action: string) {
     if (isCreatingSession || loadingAction) return;
@@ -41,66 +49,61 @@ export function EmptySession({
   }
 
   return (
-    <div className="relative flex h-full flex-1 flex-col items-center justify-center overflow-hidden px-6 py-10 dark:bg-background">
+    <div className="flex h-full flex-1 items-center justify-center overflow-y-auto bg-[#f8f8f9] px-0 py-5 md:px-6 md:py-10">
       <motion.div
-        className="relative w-full max-w-3xl"
+        className="w-full max-w-3xl text-center"
         initial={{ opacity: 0, y: 14, filter: "blur(6px)" }}
         animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
         transition={{ type: "spring", bounce: 0.2, duration: 0.7 }}
       >
-        <div className="mx-auto flex flex-col items-center text-center">
-          <div className="mb-5 flex items-center gap-2 rounded-full border border-border/60 bg-white/70 px-3 py-1 text-xs text-muted-foreground shadow-sm backdrop-blur dark:bg-neutral-950/40">
-            <SparkleIcon className="h-3.5 w-3.5 text-purple-600" />
-            <span>Autopilot runs for you 24/7</span>
-          </div>
-
-          <Text variant="h3" className="mb-3 !text-[1.375rem] text-zinc-700">
+        <div className="mx-auto max-w-3xl">
+          <Text variant="h3" className="mb-1 !text-[1.375rem] text-zinc-700">
             Hey, <span className="text-violet-600">{greetingName}</span>
           </Text>
-          <Text variant="h3" className="!font-normal">
-            What do you want to automate?
+          <Text variant="h3" className="mb-8 !font-normal">
+            Tell me about your work — I&apos;ll find what to automate.
           </Text>
+
+          <div className="mb-6">
+            <motion.div
+              layoutId={inputLayoutId}
+              transition={{ type: "spring", bounce: 0.2, duration: 0.65 }}
+              className="w-full px-2"
+            >
+              <ChatInput
+                inputId="chat-input-empty"
+                onSend={onSend}
+                disabled={isCreatingSession}
+                placeholder={inputPlaceholder}
+                className="w-full"
+              />
+            </motion.div>
+          </div>
         </div>
 
-        <div className="mx-auto p-5 dark:bg-neutral-950/40">
-          <motion.div
-            layoutId={inputLayoutId}
-            transition={{ type: "spring", bounce: 0.2, duration: 0.65 }}
-            className="w-full"
-          >
-            <ChatInput
-              inputId="chat-input-empty"
-              onSend={onSend}
-              disabled={isCreatingSession}
-              placeholder='You can search or just ask - e.g. "create a blog post outline"'
-              className="w-full"
-            />
-          </motion.div>
-
-          <div className="mt-8 flex w-full flex-nowrap items-center justify-center gap-3 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-            {quickActions.map((action) => (
-              <Button
-                key={action}
-                type="button"
-                variant="outline"
-                size="small"
-                onClick={() => void handleQuickActionClick(action)}
-                disabled={isCreatingSession || loadingAction !== null}
-                aria-busy={loadingAction === action}
-                leftIcon={
-                  loadingAction === action ? (
-                    <SpinnerGapIcon
-                      className="h-4 w-4 animate-spin"
-                      weight="bold"
-                    />
-                  ) : null
-                }
-                className="h-auto shrink-0 border-zinc-600 !px-4 !py-2 text-[1rem] text-zinc-600"
-              >
-                {action}
-              </Button>
-            ))}
-          </div>
+        <div className="flex flex-wrap items-center justify-center gap-3 overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+          {quickActions.map((action) => (
+            <Button
+              key={action}
+              type="button"
+              variant="outline"
+              size="small"
+              onClick={() => void handleQuickActionClick(action)}
+              disabled={isCreatingSession || loadingAction !== null}
+              aria-busy={loadingAction === action}
+              leftIcon={
+                loadingAction === action ? (
+                  <SpinnerGapIcon
+                    className="h-4 w-4 animate-spin"
+                    weight="bold"
+                  />
+                ) : null
+              }
+              className="h-auto shrink-0 border-zinc-300 px-3 py-2 text-[.9rem] text-zinc-600"
+            >
+              {action}
+            </Button>
+          ))}
         </div>
       </motion.div>
     </div>

autogpt_platform/frontend/src/app/(platform)/copilot-2/components/EmptySession/helpers.ts

@@ -0,0 +1,11 @@
+export function getInputPlaceholder(width?: number) {
+  if (!width) return "What's your role and what eats up most of your day?";
+
+  if (width < 500) {
+    return "I'm a chef and I hate...";
+  }
+  if (width <= 1080) {
+    return "What's your role and what eats up most of your day?";
+  }
+  return "What's your role and what eats up most of your day? e.g. 'I'm a recruiter and I hate...'";
+}

autogpt_platform/frontend/src/app/(platform)/copilot-2/components/MobileDrawer/MobileDrawer.tsx

@@ -0,0 +1,140 @@
+import type { SessionSummaryResponse } from "@/app/api/__generated__/models/sessionSummaryResponse";
+import { Button } from "@/components/atoms/Button/Button";
+import { Text } from "@/components/atoms/Text/Text";
+import { scrollbarStyles } from "@/components/styles/scrollbars";
+import { cn } from "@/lib/utils";
+import { PlusIcon, SpinnerGapIcon, X } from "@phosphor-icons/react";
+import { Drawer } from "vaul";
+
+interface Props {
+  isOpen: boolean;
+  sessions: SessionSummaryResponse[];
+  currentSessionId: string | null;
+  isLoading: boolean;
+  onSelectSession: (sessionId: string) => void;
+  onNewChat: () => void;
+  onClose: () => void;
+  onOpenChange: (open: boolean) => void;
+}
+
+function formatDate(dateString: string) {
+  const date = new Date(dateString);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+
+  if (diffDays === 0) return "Today";
+  if (diffDays === 1) return "Yesterday";
+  if (diffDays < 7) return `${diffDays} days ago`;
+
+  const day = date.getDate();
+  const ordinal =
+    day % 10 === 1 && day !== 11
+      ? "st"
+      : day % 10 === 2 && day !== 12
+        ? "nd"
+        : day % 10 === 3 && day !== 13
+          ? "rd"
+          : "th";
+  const month = date.toLocaleDateString("en-US", { month: "short" });
+  const year = date.getFullYear();
+
+  return `${day}${ordinal} ${month} ${year}`;
+}
+
+export function MobileDrawer({
+  isOpen,
+  sessions,
+  currentSessionId,
+  isLoading,
+  onSelectSession,
+  onNewChat,
+  onClose,
+  onOpenChange,
+}: Props) {
+  return (
+    <Drawer.Root open={isOpen} onOpenChange={onOpenChange} direction="left">
+      <Drawer.Portal>
+        <Drawer.Overlay className="fixed inset-0 z-[60] bg-black/10 backdrop-blur-sm" />
+        <Drawer.Content className="fixed left-0 top-0 z-[70] flex h-full w-80 flex-col border-r border-zinc-200 bg-zinc-50">
+          <div className="shrink-0 border-b border-zinc-200 p-4">
+            <div className="flex items-center justify-between">
+              <Drawer.Title className="text-lg font-semibold text-zinc-800">
+                Your chats
+              </Drawer.Title>
+              <Button
+                variant="icon"
+                size="icon"
+                aria-label="Close sessions"
+                onClick={onClose}
+              >
+                <X width="1.25rem" height="1.25rem" />
+              </Button>
+            </div>
+          </div>
+          <div
+            className={cn(
+              "flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto px-3 py-3",
+              scrollbarStyles,
+            )}
+          >
+            {isLoading ? (
+              <div className="flex items-center justify-center py-4">
+                <SpinnerGapIcon className="h-5 w-5 animate-spin text-neutral-400" />
+              </div>
+            ) : sessions.length === 0 ? (
+              <p className="py-4 text-center text-sm text-neutral-500">
+                No conversations yet
+              </p>
+            ) : (
+              sessions.map((session) => (
+                <button
+                  key={session.id}
+                  onClick={() => onSelectSession(session.id)}
+                  className={cn(
+                    "w-full rounded-lg px-3 py-2.5 text-left transition-colors",
+                    session.id === currentSessionId
+                      ? "bg-zinc-100"
+                      : "hover:bg-zinc-50",
+                  )}
+                >
+                  <div className="flex min-w-0 max-w-full flex-col overflow-hidden">
+                    <div className="min-w-0 max-w-full">
+                      <Text
+                        variant="body"
+                        className={cn(
+                          "truncate font-normal",
+                          session.id === currentSessionId
+                            ? "text-zinc-600"
+                            : "text-zinc-800",
+                        )}
+                      >
+                        {session.title || "Untitled chat"}
+                      </Text>
+                    </div>
+                    <Text variant="small" className="text-neutral-400">
+                      {formatDate(session.updated_at)}
+                    </Text>
+                  </div>
+                </button>
+              ))
+            )}
+          </div>
+          {currentSessionId && (
+            <div className="shrink-0 bg-white p-3 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)]">
+              <Button
+                variant="primary"
+                size="small"
+                onClick={onNewChat}
+                className="w-full"
+                leftIcon={<PlusIcon width="1rem" height="1rem" />}
+              >
+                New Chat
+              </Button>
+            </div>
+          )}
+        </Drawer.Content>
+      </Drawer.Portal>
+    </Drawer.Root>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot-2/components/MobileHeader/MobileHeader.tsx

@@ -0,0 +1,22 @@
+import { Button } from "@/components/atoms/Button/Button";
+import { NAVBAR_HEIGHT_PX } from "@/lib/constants";
+import { ListIcon } from "@phosphor-icons/react";
+
+interface Props {
+  onOpenDrawer: () => void;
+}
+
+export function MobileHeader({ onOpenDrawer }: Props) {
+  return (
+    <Button
+      variant="icon"
+      size="icon"
+      aria-label="Open sessions"
+      onClick={onOpenDrawer}
+      className="fixed z-50 bg-white shadow-md"
+      style={{ left: "1rem", top: `${NAVBAR_HEIGHT_PX + 20}px` }}
+    >
+      <ListIcon width="1.25rem" height="1.25rem" />
+    </Button>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot-2/page.tsx

@@ -1,51 +1,41 @@
 "use client";
 
-import { ChatSidebar } from "./components/ChatSidebar/ChatSidebar";
+import { SidebarProvider } from "@/components/ui/sidebar";
 import { ChatContainer } from "./components/ChatContainer/ChatContainer";
-import { SidebarProvider, SidebarInset } from "@/components/ui/sidebar";
-import { Button } from "@/components/ui/button";
-import { CopyIcon, CheckIcon } from "@phosphor-icons/react";
+import { ChatSidebar } from "./components/ChatSidebar/ChatSidebar";
+import { MobileDrawer } from "./components/MobileDrawer/MobileDrawer";
+import { MobileHeader } from "./components/MobileHeader/MobileHeader";
 import { useCopilotPage } from "./useCopilotPage";
 
 export default function Page() {
   const {
-    copied,
     sessionId,
     messages,
     status,
     error,
     isCreatingSession,
-    handleCopySessionId,
     createSession,
     onSend,
+    // Mobile drawer
+    isMobile,
+    isDrawerOpen,
+    sessions,
+    isLoadingSessions,
+    handleOpenDrawer,
+    handleCloseDrawer,
+    handleDrawerOpenChange,
+    handleSelectSession,
+    handleNewChat,
   } = useCopilotPage();
 
   return (
     <SidebarProvider
-      defaultOpen={false}
+      defaultOpen={true}
       className="h-[calc(100vh-72px)] min-h-0"
     >
-      <ChatSidebar />
-      <SidebarInset className="relative flex h-[calc(100vh-80px)] flex-col overflow-hidden ring-1 ring-zinc-300">
-        {sessionId && (
-          <div className="absolute flex items-center px-4 py-4">
-            <div className="flex items-center gap-2 rounded-3xl border border-neutral-400 bg-neutral-100 px-3 py-1.5 text-sm text-neutral-600 dark:bg-neutral-800 dark:text-neutral-400">
-              <span className="text-xs">{sessionId.slice(0, 8)}...</span>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-6 w-6"
-                onClick={handleCopySessionId}
-              >
-                {copied ? (
-                  <CheckIcon className="h-3.5 w-3.5 text-green-500" />
-                ) : (
-                  <CopyIcon className="h-3.5 w-3.5" />
-                )}
-              </Button>
-            </div>
-          </div>
-        )}
+      {!isMobile && <ChatSidebar />}
+      <div className="relative flex h-full w-full flex-col overflow-hidden bg-[#f8f8f9] px-0">
+        {isMobile && <MobileHeader onOpenDrawer={handleOpenDrawer} />}
         <div className="flex-1 overflow-hidden">
           <ChatContainer
             messages={messages}
@@ -57,7 +47,19 @@ export default function Page() {
             onSend={onSend}
           />
         </div>
-      </SidebarInset>
+      </div>
+      {isMobile && (
+        <MobileDrawer
+          isOpen={isDrawerOpen}
+          sessions={sessions}
+          currentSessionId={sessionId}
+          isLoading={isLoadingSessions}
+          onSelectSession={handleSelectSession}
+          onNewChat={handleNewChat}
+          onClose={handleCloseDrawer}
+          onOpenChange={handleDrawerOpenChange}
+        />
+      )}
     </SidebarProvider>
   );
 }

autogpt_platform/frontend/src/app/(platform)/copilot-2/useCopilotPage.ts

@@ -1,19 +1,25 @@
-import { useChat } from "@ai-sdk/react";
-import { DefaultChatTransport } from "ai";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { parseAsString, useQueryState } from "nuqs";
 import {
   getGetV2ListSessionsQueryKey,
   getV2GetSession,
   postV2CreateSession,
+  useGetV2ListSessions,
 } from "@/app/api/__generated__/endpoints/chat/chat";
-import { convertChatSessionMessagesToUiMessages } from "./helpers/convertChatSessionToUiMessages";
+import { useBreakpoint } from "@/lib/hooks/useBreakpoint";
+import { useChat } from "@ai-sdk/react";
 import { useQueryClient } from "@tanstack/react-query";
+import { DefaultChatTransport } from "ai";
+import { parseAsString, useQueryState } from "nuqs";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { convertChatSessionMessagesToUiMessages } from "./helpers/convertChatSessionToUiMessages";
 
 export function useCopilotPage() {
-  const [copied, setCopied] = useState(false);
   const [isCreatingSession, setIsCreatingSession] = useState(false);
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const [sessionId, setSessionId] = useQueryState("sessionId", parseAsString);
+
+  const breakpoint = useBreakpoint();
+  const isMobile =
+    breakpoint === "base" || breakpoint === "sm" || breakpoint === "md";
   const hydrationSeq = useRef(0);
   const lastHydratedSessionIdRef = useRef<string | null>(null);
   const createSessionPromiseRef = useRef<Promise<string> | null>(null);
@@ -21,31 +27,23 @@ export function useCopilotPage() {
   const queuedFirstMessageResolverRef = useRef<(() => void) | null>(null);
   const queryClient = useQueryClient();
 
-  function handleCopySessionId() {
-    if (!sessionId) return;
-    navigator.clipboard.writeText(sessionId);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  }
-
-  const transport = useMemo(() => {
-    if (!sessionId) return null;
-    return new DefaultChatTransport({
-      api: `/api/chat/sessions/${sessionId}/stream`,
-      prepareSendMessagesRequest: ({ messages }) => {
-        const last = messages[messages.length - 1];
-        return {
-          body: {
-            message: last.parts
-              ?.map((p) => (p.type === "text" ? p.text : ""))
-              .join(""),
-            is_user_message: last.role === "user",
-            context: null,
-          },
-        };
-      },
-    });
-  }, [sessionId]);
+  const transport = sessionId
+    ? new DefaultChatTransport({
+        api: `/api/chat/sessions/${sessionId}/stream`,
+        prepareSendMessagesRequest: ({ messages }) => {
+          const last = messages[messages.length - 1];
+          return {
+            body: {
+              message: last.parts
+                ?.map((p) => (p.type === "text" ? p.text : ""))
+                .join(""),
+              is_user_message: last.role === "user",
+              context: null,
+            },
+          };
+        },
+      })
+    : null;
 
   const { messages, sendMessage, status, error, setMessages } = useChat({
     id: sessionId ?? undefined,
@@ -58,7 +56,7 @@ export function useCopilotPage() {
     messagesRef.current = messages;
   }, [messages]);
 
-  async function createSession(): Promise<string> {
+  async function createSession() {
     if (sessionId) return sessionId;
     if (createSessionPromiseRef.current) return createSessionPromiseRef.current;
 
@@ -166,15 +164,56 @@ export function useCopilotPage() {
     await sentPromise;
   }
 
+  // Sessions list for mobile drawer
+  const { data: sessionsResponse, isLoading: isLoadingSessions } =
+    useGetV2ListSessions({ limit: 50 });
+
+  const sessions =
+    sessionsResponse?.status === 200 ? sessionsResponse.data.sessions : [];
+
+  // Drawer handlers
+  const handleOpenDrawer = useCallback(() => {
+    setIsDrawerOpen(true);
+  }, []);
+
+  const handleCloseDrawer = useCallback(() => {
+    setIsDrawerOpen(false);
+  }, []);
+
+  const handleDrawerOpenChange = useCallback((open: boolean) => {
+    setIsDrawerOpen(open);
+  }, []);
+
+  const handleSelectSession = useCallback(
+    (id: string) => {
+      setSessionId(id);
+      if (isMobile) setIsDrawerOpen(false);
+    },
+    [setSessionId, isMobile],
+  );
+
+  const handleNewChat = useCallback(() => {
+    setSessionId(null);
+    if (isMobile) setIsDrawerOpen(false);
+  }, [setSessionId, isMobile]);
+
   return {
-    copied,
     sessionId,
     messages,
     status,
     error,
     isCreatingSession,
-    handleCopySessionId,
     createSession,
     onSend,
+    // Mobile drawer
+    isMobile,
+    isDrawerOpen,
+    sessions,
+    isLoadingSessions,
+    handleOpenDrawer,
+    handleCloseDrawer,
+    handleDrawerOpenChange,
+    handleSelectSession,
+    handleNewChat,
   };
 }

autogpt_platform/frontend/src/components/ai-elements/conversation.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
+import { scrollbarStyles } from "@/components/styles/scrollbars";
 import { cn } from "@/lib/utils";
 import { ArrowDownIcon } from "lucide-react";
 import type { ComponentProps } from "react";
@@ -11,7 +12,7 @@ export type ConversationProps = ComponentProps<typeof StickToBottom>;
 
 export const Conversation = ({ className, ...props }: ConversationProps) => (
   <StickToBottom
-    className={cn("relative flex-1 overflow-y-hidden", className)}
+    className={cn("relative flex-1 overflow-y-hidden", scrollbarStyles, className)}
     initial="smooth"
     resize="smooth"
     role="log"

autogpt_platform/frontend/src/components/atoms/OverflowText/OverflowText.tsx

@@ -77,7 +77,7 @@ export function OverflowText(props: Props) {
         "block min-w-0 overflow-hidden text-ellipsis whitespace-nowrap",
       )}
     >
-      <Text variant={variant} className={className} {...restProps}>
+      <Text variant={variant} as="span" className={className} {...restProps}>
         {value}
       </Text>
     </span>

autogpt_platform/frontend/src/components/contextual/Chat/components/ChatInput/ChatInput.tsx

@@ -6,6 +6,7 @@ import {
   MicrophoneIcon,
   StopIcon,
 } from "@phosphor-icons/react";
+import { ChangeEvent, useCallback } from "react";
 import { RecordingIndicator } from "./components/RecordingIndicator";
 import { useChatInput } from "./useChatInput";
 import { useVoiceRecording } from "./useVoiceRecording";
@@ -34,7 +35,7 @@ export function ChatInput({
     setValue,
     handleKeyDown: baseHandleKeyDown,
     handleSubmit,
-    handleChange,
+    handleChange: baseHandleChange,
     hasMultipleLines,
   } = useChatInput({
     onSend,
@@ -61,6 +62,15 @@ export function ChatInput({
     inputId,
   });
 
+  // Block text changes when recording
+  const handleChange = useCallback(
+    (e: ChangeEvent<HTMLTextAreaElement>) => {
+      if (isRecording) return;
+      baseHandleChange(e);
+    },
+    [isRecording, baseHandleChange],
+  );
+
   return (
     <form onSubmit={handleSubmit} className={cn("relative flex-1", className)}>
       <div className="relative">

autogpt_platform/frontend/src/components/contextual/Chat/components/ChatInput/useVoiceRecording.ts

@@ -214,17 +214,33 @@ export function useVoiceRecording({
 
   const handleKeyDown = useCallback(
     (event: KeyboardEvent<HTMLTextAreaElement>) => {
-      if (event.key === " " && !value.trim() && !isTranscribing) {
+      // Allow space to toggle recording (start when empty, stop when recording)
+      if (event.key === " " && !isTranscribing) {
+        if (isRecordingRef.current) {
+          // Stop recording on space
+          event.preventDefault();
+          stopRecording();
+          return;
+        } else if (!value.trim()) {
+          // Start recording on space when input is empty
+          event.preventDefault();
+          void startRecording();
+          return;
+        }
+      }
+      // Block all key events when recording (except space handled above)
+      if (isRecordingRef.current) {
         event.preventDefault();
-        toggleRecording();
         return;
       }
       baseHandleKeyDown(event);
     },
-    [value, isTranscribing, toggleRecording, baseHandleKeyDown],
+    [value, isTranscribing, stopRecording, startRecording, baseHandleKeyDown],
   );
 
   const showMicButton = isSupported;
+  // Don't include isRecording in disabled state - we need key events to work
+  // Text input is blocked via handleKeyDown instead
   const isInputDisabled = disabled || isStreaming || isTranscribing;
 
   // Cleanup on unmount

autogpt_platform/frontend/src/components/ui/sidebar.tsx

@@ -1,12 +1,9 @@
 "use client";
 
-import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
-import { PanelLeft } from "lucide-react";
+import * as React from "react";
 
-import { useIsMobile } from "@/hooks/use-mobile";
-import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Separator } from "@/components/ui/separator";
@@ -24,6 +21,9 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { cn } from "@/lib/utils";
+import { SidebarSimpleIcon } from "@phosphor-icons/react";
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
@@ -280,7 +280,7 @@ Sidebar.displayName = "Sidebar";
 const SidebarTrigger = React.forwardRef<
   React.ElementRef<typeof Button>,
   React.ComponentProps<typeof Button>
->(({ className, onClick, ...props }, ref) => {
+>(({ onClick }, ref) => {
   const { toggleSidebar } = useSidebar();
 
   return (
@@ -288,15 +288,12 @@ const SidebarTrigger = React.forwardRef<
       ref={ref}
       data-sidebar="trigger"
       variant="ghost"
-      size="icon"
-      className={cn("h-7 w-7", className)}
       onClick={(event) => {
         onClick?.(event);
         toggleSidebar();
       }}
-      {...props}
     >
-      <PanelLeft />
+      <SidebarSimpleIcon className="!size-5" />
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
   );