From 7e5b84cc5c963979e3e7c35d768a155c70bd643e Mon Sep 17 00:00:00 2001 From: Otto Date: Wed, 4 Feb 2026 10:38:58 +0000 Subject: [PATCH] fix(copilot): update homepage copy to focus on problem discovery (#11956) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary Update the CoPilot homepage to shift from "what do you want to automate?" to "tell me about your problems." This lowers the barrier to engagement by letting users describe their work frustrations instead of requiring them to identify automations themselves. ## Changes | Element | Before | After | |---------|--------|-------| | Headline | "What do you want to automate?" | "Tell me about your work — I'll find what to automate." | | Placeholder | "You can search or just ask - e.g. 'create a blog post outline'" | "What's your role and what eats up most of your day? e.g. 'I'm a real estate agent and I hate...'" | | Button 1 | "Show me what I can automate" | "I don't know where to start, just ask me stuff" | | Button 2 | "Design a custom workflow" | "I do the same thing every week and it's killing me" | | Button 3 | "Help me with content creation" | "Help me find where I'm wasting my time" | | Container | max-w-2xl | max-w-3xl | > **Note on container width:** The `max-w-2xl` → `max-w-3xl` change is just to keep the longer headline on one line. This works but may not be the ideal solution — @lluis-xai should advise on the proper approach. ## Why This Matters The current UX assumes users know what they want to automate. In reality, most users know what frustrates them but can't identify automations. The current screen blocks Otto from starting the discovery conversation that leads to useful recommendations. ## Files Changed - `autogpt_platform/frontend/src/app/(platform)/copilot/page.tsx` — headline, placeholder, container width - `autogpt_platform/frontend/src/app/(platform)/copilot/helpers.ts` — quick action button text Resolves: [SECRT-1876](https://linear.app/autogpt/issue/SECRT-1876) --------- Co-authored-by: Lluis Agusti --- .../src/app/(platform)/copilot/helpers.ts | 18 ++++++++-- .../src/app/(platform)/copilot/page.tsx | 33 +++++++++++++++---- .../ChatContainer/ChatContainer.tsx | 11 +------ .../Chat/components/ChatInput/ChatInput.tsx | 18 +++++----- .../ChatInput/components/AudioWaveform.tsx | 13 ++++---- .../components/ChatInput/useVoiceRecording.ts | 2 +- 6 files changed, 60 insertions(+), 35 deletions(-) diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/helpers.ts b/autogpt_platform/frontend/src/app/(platform)/copilot/helpers.ts index 692a5741f4..c6e479f896 100644 --- a/autogpt_platform/frontend/src/app/(platform)/copilot/helpers.ts +++ b/autogpt_platform/frontend/src/app/(platform)/copilot/helpers.ts @@ -26,8 +26,20 @@ export function buildCopilotChatUrl(prompt: string): string { export function getQuickActions(): string[] { return [ - "Show me what I can automate", - "Design a custom workflow", - "Help me with content creation", + "I don't know where to start, just ask me stuff", + "I do the same thing every week and it's killing me", + "Help me find where I'm wasting my time", ]; } + +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...'"; +} diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/page.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/page.tsx index e9bc018c1b..542173a99c 100644 --- a/autogpt_platform/frontend/src/app/(platform)/copilot/page.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/copilot/page.tsx @@ -6,7 +6,9 @@ import { Text } from "@/components/atoms/Text/Text"; import { Chat } from "@/components/contextual/Chat/Chat"; import { ChatInput } from "@/components/contextual/Chat/components/ChatInput/ChatInput"; import { Dialog } from "@/components/molecules/Dialog/Dialog"; +import { useEffect, useState } from "react"; import { useCopilotStore } from "./copilot-page-store"; +import { getInputPlaceholder } from "./helpers"; import { useCopilotPage } from "./useCopilotPage"; export default function CopilotPage() { @@ -14,8 +16,25 @@ export default function CopilotPage() { const isInterruptModalOpen = useCopilotStore((s) => s.isInterruptModalOpen); const confirmInterrupt = useCopilotStore((s) => s.confirmInterrupt); const cancelInterrupt = useCopilotStore((s) => s.cancelInterrupt); + + const [inputPlaceholder, setInputPlaceholder] = useState( + getInputPlaceholder(), + ); + + useEffect(() => { + const handleResize = () => { + setInputPlaceholder(getInputPlaceholder(window.innerWidth)); + }; + + handleResize(); + + window.addEventListener("resize", handleResize); + return () => window.removeEventListener("resize", handleResize); + }, []); + const { greetingName, quickActions, isLoading, hasSession, initialPrompt } = state; + const { handleQuickAction, startChatWithPrompt, @@ -73,7 +92,7 @@ export default function CopilotPage() { } return ( -
+
{isLoading ? (
@@ -90,25 +109,25 @@ export default function CopilotPage() {
) : ( <> -
+
Hey, {greetingName} - What do you want to automate? + Tell me about your work — I'll find what to automate.
-
+
{quickActions.map((action) => ( diff --git a/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatContainer/ChatContainer.tsx b/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatContainer/ChatContainer.tsx index 5df9944f47..fbf2d5d143 100644 --- a/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatContainer/ChatContainer.tsx +++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatContainer/ChatContainer.tsx @@ -2,7 +2,6 @@ import type { SessionDetailResponse } from "@/app/api/__generated__/models/sessi import { Button } from "@/components/atoms/Button/Button"; import { Text } from "@/components/atoms/Text/Text"; import { Dialog } from "@/components/molecules/Dialog/Dialog"; -import { useBreakpoint } from "@/lib/hooks/useBreakpoint"; import { cn } from "@/lib/utils"; import { GlobeHemisphereEastIcon } from "@phosphor-icons/react"; import { useEffect } from "react"; @@ -56,10 +55,6 @@ export function ChatContainer({ onStreamingChange?.(isStreaming); }, [isStreaming, onStreamingChange]); - const breakpoint = useBreakpoint(); - const isMobile = - breakpoint === "base" || breakpoint === "sm" || breakpoint === "md"; - return (
diff --git a/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatInput/ChatInput.tsx b/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatInput/ChatInput.tsx index beb4678e73..bac004f6ed 100644 --- a/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatInput/ChatInput.tsx +++ b/autogpt_platform/frontend/src/components/contextual/Chat/components/ChatInput/ChatInput.tsx @@ -74,19 +74,20 @@ export function ChatInput({ hasMultipleLines ? "rounded-xlarge" : "rounded-full", )} > + {!value && !isRecording && ( + + )}