Top layout, expanded tips.

Author: sachasayan

webview-ui/src/components/chat/ChatView.tsx

@@ -38,8 +38,6 @@ import ChatTextArea from "./ChatTextArea"
 import TaskHeader from "./TaskHeader"
 import AutoApproveMenu from "./AutoApproveMenu"
 import SystemPromptWarning from "./SystemPromptWarning"
-
-import { useTaskSearch } from "@/components/history/useTaskSearch"
 interface ChatViewProps {
 	isHidden: boolean
 	showAnnouncement: boolean
@@ -86,8 +84,6 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 		hasSystemPromptOverride,
 	} = useExtensionState()
 
-	const { tasks } = useTaskSearch()
-
 	//const task = messages.length > 0 ? (messages[0].say === "task" ? messages[0] : undefined) : undefined) : undefined
 	const task = useMemo(() => messages.at(0), [messages]) // leaving this less safe version here since if the first message is not a task, then the extension is in a bad state and needs to be debugged (see Cline.abort)
 	const modifiedMessages = useMemo(() => combineApiRequests(combineCommandSequences(messages.slice(1))), [messages])
@@ -1231,36 +1227,39 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 					)}
 				</>
 			) : (
-				<div className="flex-1 min-h-0 overflow-y-auto flex flex-col justify-center p-10 gap-4 pb-[10px]">
-					{telemetrySetting === "unset" && <TelemetryBanner />}
-					{showAnnouncement && <Announcement version={version} hideAnnouncement={hideAnnouncement} />}
-
-					{/* Always show the hero. */}
-					<RooHero />
-					{/* If the user has no task history, we can show the onboarding message */}
-					{!taskHistory.length && (
-						<p className="ext-vscode-editor-foreground leading-tight font-vscode text-center">
-							<Trans
-								i18nKey="chat:about"
-								components={{
-									DocsLink: (
-										<a
-											href="https://docs.roocode.com/getting-started/your-first-task"
-											target="_blank"
-											rel="noopener noreferrer">
-											the docs
-										</a>
-									),
-								}}
-							/>
-						</p>
-					)}
-
-					{/* Show the task history if there are any for this workspace. */}
+				<>
 					{taskHistory.length > 0 && <HistoryPreview showHistoryView={showHistoryView} />}
-					{/* Finally, if there less than 3 tasks, we can show the tips */}
-					{tasks.length < 3 && <RooTips cycle={!!(tasks.length < 3 && taskHistory.length > 0)} />}
-				</div>
+					<div className="flex-1 min-h-0 overflow-y-auto flex flex-col justify-center p-10 gap-1 pb-[10px]">
+						{/* Show the task history if there are any for this workspace. */}
+
+						{telemetrySetting === "unset" && <TelemetryBanner />}
+						{showAnnouncement && <Announcement version={version} hideAnnouncement={hideAnnouncement} />}
+
+						{/* Always show the hero. */}
+						<RooHero />
+						{/* If the user has little task history, we can show the onboarding message */}
+						{taskHistory.length < 10 && (
+							<p className="ext-vscode-editor-foreground leading-tight font-vscode text-center">
+								<Trans
+									i18nKey="chat:about"
+									components={{
+										DocsLink: (
+											<a
+												href="https://docs.roocode.com/getting-started/your-first-task"
+												target="_blank"
+												rel="noopener noreferrer">
+												the docs
+											</a>
+										),
+									}}
+								/>
+							</p>
+						)}
+
+						{/* Finally, always show the tips */}
+						<RooTips cycle={false} />
+					</div>
+				</>
 			)}
 
 			{/* 

webview-ui/src/components/history/HistoryPreview.tsx

@@ -36,14 +36,15 @@ const HistoryPreview = ({ showHistoryView }: HistoryPreviewProps) => {
 			<div className="flex flex-col gap-3 shrink-0 mx-5">
 				{tasks.length !== 0 && (
 					<div className="flex items-center justify-between text-vscode-descriptionForeground  w-full mx-auto max-w-[600px]">
+						{/* Keep the history button, but maybe it should just show the full view? Or remove it if header is clicked? Let's keep it for now. */}
+						<div className="font-bold">{t("chat:greeting")}</div>
+
 						<div className="flex items-center gap-1 cursor-pointer" onClick={toggleExpanded}>
-							<span className={`codicon codicon-chevron-${isExpanded ? "down" : "right"} scale-90`} />
-							<span className="font-medium text-xs uppercase">{t("history:recentTasks")}</span>
+							<span className={`codicon codicon-chevron-${isExpanded ? "up" : "down"} scale-90`} />
+							<span className="font-medium text-xs uppercase">
+								{isExpanded ? "" : t("history:recentTasks")}
+							</span>
 						</div>
-						{/* Keep the history button, but maybe it should just show the full view? Or remove it if header is clicked? Let's keep it for now. */}
-						<Button variant="ghost" size="sm" onClick={() => showHistoryView()} className="uppercase">
-							<span className="codicon codicon-history size-[1rem]" />
-						</Button>
 					</div>
 				)}
 

webview-ui/src/components/welcome/RooHero.tsx

@@ -1,16 +1,13 @@
 import { useState } from "react"
-import { useAppTranslation } from "../../i18n/TranslationContext"
 
 const RooHero = () => {
-	const { t } = useAppTranslation()
-
 	const [imagesBaseUri] = useState(() => {
 		const w = window as any
 		return w.IMAGES_BASE_URI || ""
 	})
 
 	return (
-		<div className="flex flex-col items-center justify-center pb-0">
+		<div className="flex flex-col items-center justify-center pb-4">
 			<div
 				style={{
 					backgroundColor: "var(--vscode-foreground)",
@@ -24,8 +21,6 @@ const RooHero = () => {
 				className="mx-auto">
 				<img src={imagesBaseUri + "/roo-logo.svg"} alt="Roo logo" className="h-8 opacity-0" />
 			</div>
-
-			<h2 className="">{t("chat:greeting")}</h2>
 		</div>
 	)
 }

webview-ui/src/components/welcome/WelcomeView.tsx

@@ -38,6 +38,7 @@ const WelcomeView = () => {
 		<Tab>
 			<TabContent className="flex flex-col gap-5">
 				<RooHero />
+				<h2 className="mx-auto">{t("chat:greeting")}</h2>
 
 				<div className="outline rounded p-4">
 					<Trans i18nKey="welcome:introduction" />