diff --git a/desktop/src/features/onboarding/ui/WelcomeChannelAppPreview.tsx b/desktop/src/features/onboarding/ui/WelcomeChannelAppPreview.tsx index 257749e2cf..a41f01e039 100644 --- a/desktop/src/features/onboarding/ui/WelcomeChannelAppPreview.tsx +++ b/desktop/src/features/onboarding/ui/WelcomeChannelAppPreview.tsx @@ -6,6 +6,7 @@ import { FolderKanban, Hash, Home, + Lock, Mic, Paperclip, Plus, @@ -16,10 +17,6 @@ import { } from "lucide-react"; import * as React from "react"; -import { - WelcomeComposerGuidanceLayer, - type WelcomeComposerBannerState, -} from "@/features/channels/ui/WelcomeComposerBanner"; import { ProfileAvatar } from "@/features/profile/ui/ProfileAvatar"; import { ChannelIntroBlock } from "@/features/messages/ui/ChannelIntroBlock"; import { ComposerDockBackdrop } from "@/features/messages/ui/ComposerDockBackdrop"; @@ -29,6 +26,11 @@ import { cn } from "@/shared/lib/cn"; const CHANNEL_ROW_CLASS = "flex h-8 w-full items-center gap-2 rounded-md px-2 text-left text-sm transition-colors"; +const WELCOME_TEAM = [ + { name: "Fizz", image: "/onboarding/starter-team/fizz.png" }, + { name: "Honey", image: "/onboarding/starter-team/honey.png" }, + { name: "Pollen", image: "/onboarding/starter-team/pollen.png" }, +] as const; export function WelcomeChannelAppPreview({ avatarUrl, @@ -39,10 +41,10 @@ export function WelcomeChannelAppPreview({ communityName: string; displayName: string; }) { - const [bannerState, setBannerState] = - React.useState("prompt"); const [draft, setDraft] = React.useState(""); const [messages, setMessages] = React.useState([]); + const [channelName, setChannelName] = React.useState("Welcome"); + const [showRenamePrompt, setShowRenamePrompt] = React.useState(true); const [activePreviewAction, setActivePreviewAction] = React.useState< string | null >(null); @@ -77,7 +79,7 @@ export function WelcomeChannelAppPreview({ }, ], channelKindLabel: "private welcome channel", - channelName: "Welcome", + channelName, description: null, icon: , }; @@ -202,8 +204,8 @@ export function WelcomeChannelAppPreview({ data-testid="channel-Welcome" type="button" > - - Welcome + + {channelName} @@ -224,18 +226,116 @@ export function WelcomeChannelAppPreview({
- +

- Welcome + {channelName}

+ +
+

+ Welcome to {communityName} +

+

+ Everyone starts with a private channel to get settled. This + one is yours. Use it to try out features, draft messages, or + work privately with agents. +

+
+ + {showRenamePrompt ? ( +
+
+ +
+
+

+ Make this space yours +

+

+ This private channel is yours to keep. Rename it for how + you want to use it. +

+
+ +
+ ) : null} + +
+
+
+ {WELCOME_TEAM.map((agent) => ( + {agent.name} + ))} +
+
+
+

+ Bring your starter team online +

+ + Not connected + +
+

+ Connect an AI provider to start Fizz, Honey, and Pollen. + They can help you learn Buzz and work through something + you’re building. +

+
+
+
+

+ You can change providers or agents later. +

+ +
+
+ {messages.map((message, index) => (
- {bannerState !== "hidden" ? ( - setBannerState("hidden")} - state={bannerState} - > - {null} - - ) : null}