Compromise-compromise.

Author: sachasayan

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

@@ -38,6 +38,7 @@ import ChatTextArea from "./ChatTextArea"
 import TaskHeader from "./TaskHeader"
 import AutoApproveMenu from "./AutoApproveMenu"
 import SystemPromptWarning from "./SystemPromptWarning"
+import { useTaskSearch } from "../history/useTaskSearch"
 interface ChatViewProps {
 	isHidden: boolean
 	showAnnouncement: boolean
@@ -82,8 +83,23 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 		customModes,
 		telemetrySetting,
 		hasSystemPromptOverride,
+		historyPreviewCollapsed, // Added historyPreviewCollapsed
 	} = useExtensionState()
 
+	const { tasks } = useTaskSearch()
+
+	// Initialize expanded state based on the persisted setting (default to expanded if undefined)
+	const [isExpanded, setIsExpanded] = useState(
+		historyPreviewCollapsed === undefined ? true : !historyPreviewCollapsed,
+	)
+
+	const toggleExpanded = useCallback(() => {
+		const newState = !isExpanded
+		setIsExpanded(newState)
+		// Send message to extension to persist the new collapsed state
+		vscode.postMessage({ type: "setHistoryPreviewCollapsed", bool: !newState })
+	}, [isExpanded])
+
 	//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])
@@ -1227,18 +1243,31 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 					)}
 				</>
 			) : (
-				<>
-					{taskHistory.length > 0 && <HistoryPreview showHistoryView={showHistoryView} />}
-					<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 />}
+				<div className="flex-1 min-h-0 overflow-y-auto flex flex-col gap-4">
+					{/* Moved Task Bar Header Here */}
+					{tasks.length !== 0 && (
+						<div className="flex items-center justify-end text-vscode-descriptionForeground w-full mx-auto max-w-[600px] px-5 pt-3">
+							<div className="flex items-center gap-1 cursor-pointer" onClick={toggleExpanded}>
+								{tasks.length < 10 && (
+									<span className={`font-medium text-xs `}>{t("history:recentTasks")}</span>
+								)}
+								<span
+									className={`codicon  ${isExpanded ? "codicon-eye" : "codicon-eye-closed"} scale-90`}
+								/>
+							</div>
+						</div>
+					)}
+					<div className={`m-auto ${isExpanded ? "mt-0" : ""} p-10 pt-5"`}>
 						{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 && (
+						{/* Always show the hero. */}
+
+						{telemetrySetting === "unset" && <TelemetryBanner />}
+						{/* Show the task history preview if expanded and tasks exist */}
+						{taskHistory.length > 0 && isExpanded && <HistoryPreview />}
+						{/* If the user has no task history, we can show the onboarding message */}
+						{taskHistory.length > -1 && (
 							<p className="ext-vscode-editor-foreground leading-tight font-vscode text-center">
 								<Trans
 									i18nKey="chat:about"
@@ -1255,11 +1284,10 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 								/>
 							</p>
 						)}
-
-						{/* Finally, always show the tips */}
-						<RooTips cycle={false} />
+						{/* Finally, if there less than 3 tasks, we can show the tips */}
+						{tasks.length > -1 && <RooTips cycle={false} />}
 					</div>
-				</>
+				</div>
 			)}
 
 			{/* 

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

@@ -1,53 +1,23 @@
-import { memo, useState, useCallback } from "react"
+import { memo } from "react"
 
 import { vscode } from "@/utils/vscode"
 import { formatLargeNumber, formatDate } from "@/utils/format"
 import { Button } from "@/components/ui"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
-import { useExtensionState } from "@src/context/ExtensionStateContext"
 import { CopyButton } from "./CopyButton"
 import { useTaskSearch } from "./useTaskSearch"
 
 import { Trans } from "react-i18next"
 import { Coins } from "lucide-react"
 
-type HistoryPreviewProps = {
-	showHistoryView: () => void
-}
-const HistoryPreview = ({ showHistoryView }: HistoryPreviewProps) => {
+const HistoryPreview = () => {
 	const { tasks, showAllWorkspaces } = useTaskSearch()
-	const { historyPreviewCollapsed } = useExtensionState() // Will add this state later
 	const { t } = useAppTranslation()
-	// Initialize expanded state based on the persisted setting (default to expanded if undefined)
-	const [isExpanded, setIsExpanded] = useState(
-		historyPreviewCollapsed === undefined ? true : !historyPreviewCollapsed,
-	)
-
-	const toggleExpanded = useCallback(() => {
-		const newState = !isExpanded
-		setIsExpanded(newState)
-		// Send message to extension to persist the new collapsed state
-		vscode.postMessage({ type: "setHistoryPreviewCollapsed", bool: !newState })
-	}, [isExpanded])
 
 	return (
 		<>
 			<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="font-medium text-xs uppercase">
-								{isExpanded ? "" : t("history:recentTasks")}
-							</span>
-							<span className={`codicon codicon-chevron-${isExpanded ? "up" : "down"} scale-90`} />
-						</div>
-					</div>
-				)}
-
 				{tasks.length === 0 && (
 					<>
 						<p className="opacity-50 p-2 text-center my-0 mx-auto max-w-80">
@@ -66,14 +36,21 @@ const HistoryPreview = ({ showHistoryView }: HistoryPreviewProps) => {
 							/>
 						</p>
 
-						<Button size="sm" variant="secondary" onClick={() => showHistoryView()} className="mx-auto">
+						{/* The button to show history view will be moved to ChatView */}
+						<Button
+							size="sm"
+							variant="secondary"
+							onClick={() => {
+								/* TODO: Implement or remove */
+							}}
+							className="mx-auto">
 							<span className="codicon codicon-history size-[1rem]" />
 							{t("history:viewAll")}
 						</Button>
 					</>
 				)}
 
-				{tasks.length !== 0 && isExpanded && (
+				{tasks.length !== 0 && (
 					<>
 						{tasks.slice(0, 3).map((item) => (
 							<div
@@ -117,10 +94,12 @@ const HistoryPreview = ({ showHistoryView }: HistoryPreviewProps) => {
 								</div>
 							</div>
 						))}
-						{/* Add a "View All" link below the preview list when expanded */}
+						{/* The link to show history view will be moved to ChatView */}
 						<div
 							className="text-center text-xs text-vscode-descriptionForeground cursor-pointer hover:text-vscode-foreground mt-1"
-							onClick={() => showHistoryView()}>
+							onClick={() => {
+								/* TODO: Implement or remove */
+							}}>
 							{t("history:viewAll")} ({tasks.length})
 						</div>
 					</>