More tweaks.

Author: sachasayan

webview-ui/src/App.tsx

@@ -123,7 +123,6 @@ const App = () => {
 				isHidden={tab !== "chat"}
 				showAnnouncement={showAnnouncement}
 				hideAnnouncement={() => setShowAnnouncement(false)}
-				showHistoryView={() => switchTab("history")}
 			/>
 			<HumanRelayDialog
 				isOpen={humanRelayDialogState.isOpen}

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

@@ -4,13 +4,12 @@ import { useAppTranslation } from "@/i18n/TranslationContext"
 import { Trans } from "react-i18next"
 
 interface AnnouncementProps {
-	version: string
 	hideAnnouncement: () => void
 }
 /*
 You must update the latestAnnouncementId in ClineProvider for new announcements to show to users. This new id will be compared with whats in state for the 'last announcement shown', and if it's different then the announcement will render. As soon as an announcement is shown, the id will be updated in state. This ensures that announcements are not shown more than once, even if the user doesn't close it themselves.
 */
-const Announcement = ({ version, hideAnnouncement }: AnnouncementProps) => {
+const Announcement = ({ hideAnnouncement }: AnnouncementProps) => {
 	const { t } = useAppTranslation()
 
 	const discordLink = (
@@ -71,6 +70,7 @@ const Announcement = ({ version, hideAnnouncement }: AnnouncementProps) => {
 							i18nKey="chat:announcement.feature1"
 							components={{
 								bold: <b />,
+								code: <code />,
 							}}
 						/>
 					</li>
@@ -80,6 +80,7 @@ const Announcement = ({ version, hideAnnouncement }: AnnouncementProps) => {
 							i18nKey="chat:announcement.feature2"
 							components={{
 								bold: <b />,
+								code: <code />,
 							}}
 						/>
 					</li>
@@ -89,6 +90,7 @@ const Announcement = ({ version, hideAnnouncement }: AnnouncementProps) => {
 							i18nKey="chat:announcement.feature3"
 							components={{
 								bold: <b />,
+								code: <code />,
 							}}
 						/>
 					</li>

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

@@ -44,7 +44,6 @@ export interface ChatViewProps {
 	isHidden: boolean
 	showAnnouncement: boolean
 	hideAnnouncement: () => void
-	showHistoryView: () => void
 }
 
 export interface ChatViewRef {
@@ -56,13 +55,12 @@ export const MAX_IMAGES_PER_MESSAGE = 20 // Anthropic limits to 20 images
 const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0
 
 const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewProps> = (
-	{ isHidden, showAnnouncement, hideAnnouncement, showHistoryView },
+	{ isHidden, showAnnouncement, hideAnnouncement },
 	ref,
 ) => {
 	const { t } = useAppTranslation()
 	const modeShortcutText = `${isMac ? "⌘" : "Ctrl"} + . ${t("chat:forNextMode")}`
 	const {
-		version,
 		clineMessages: messages,
 		taskHistory,
 		apiConfiguration,
@@ -1213,6 +1211,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 
 	return (
 		<div className={isHidden ? "hidden" : "fixed top-0 left-0 right-0 bottom-0 flex flex-col overflow-hidden"}>
+			{showAnnouncement && <Announcement hideAnnouncement={hideAnnouncement} />}
 			{task ? (
 				<>
 					<TaskHeader
@@ -1245,7 +1244,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 				<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 text-vscode-descriptionForeground w-full mx-auto 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>
@@ -1256,35 +1255,28 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 							</div>
 						</div>
 					)}
-					<div className={` flex flex-col gap-4 m-auto ${isExpanded ? "mt-0" : ""} p-10 pt-5"`}>
-						{showAnnouncement && <Announcement version={version} hideAnnouncement={hideAnnouncement} />}
-
+					<div
+						className={` w-full flex flex-col gap-4 m-auto ${isExpanded && tasks.length > 0 ? "mt-0" : ""} p-10 pt-5"`}>
 						<RooHero />
-						{/* 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"
-									components={{
-										DocsLink: (
-											<a
-												href="https://docs.roocode.com/getting-started/your-first-task"
-												target="_blank"
-												rel="noopener noreferrer">
-												the docs
-											</a>
-										),
-									}}
-								/>
-							</p>
-						)}
-						{/* Finally, if there less than 3 tasks, we can show the tips */}
-						{tasks.length > -1 && <RooTips cycle={false} />}
+						<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>
+						<RooTips cycle={false} />
 					</div>
 				</div>
 			)}

webview-ui/src/components/chat/__tests__/ChatView.auto-approve.test.tsx

@@ -95,7 +95,6 @@ const defaultProps: ChatViewProps = {
 	isHidden: false,
 	showAnnouncement: false,
 	hideAnnouncement: () => {},
-	showHistoryView: () => {},
 }
 
 const renderChatView = (props: Partial<ChatViewProps> = {}) => {

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

@@ -153,7 +153,6 @@ const defaultProps: ChatViewProps = {
 	isHidden: false,
 	showAnnouncement: false,
 	hideAnnouncement: () => {},
-	showHistoryView: () => {},
 }
 
 const queryClient = new QueryClient()

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

@@ -6,35 +6,14 @@ import { formatLargeNumber, formatDate } from "@/utils/format"
 import { CopyButton } from "./CopyButton"
 import { useTaskSearch } from "./useTaskSearch"
 
-import { Trans } from "react-i18next"
 import { Coins } from "lucide-react"
 
 const HistoryPreview = () => {
 	const { tasks, showAllWorkspaces } = useTaskSearch()
 
 	return (
 		<>
-			<div className="flex flex-col gap-3 shrink-0 ">
-				{tasks.length === 0 && (
-					<>
-						<p className="opacity-50 p-2 text-center my-0 mx-auto max-w-80">
-							<Trans
-								i18nKey="chat:onboarding"
-								components={{
-									DocsLink: (
-										<a
-											href="https://docs.roocode.com/getting-started/your-first-task"
-											target="_blank"
-											rel="noopener noreferrer">
-											the docs
-										</a>
-									),
-								}}
-							/>
-						</p>
-					</>
-				)}
-
+			<div className="flex flex-col gap-3">
 				{tasks.length !== 0 && (
 					<>
 						{tasks.slice(0, 3).map((item) => (

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

@@ -54,7 +54,7 @@ const RooTips = ({ cycle = false }: RooTipsProps) => {
 		<div
 			className={clsx(
 				"flex flex-col items-center justify-center px-5 py-2.5 gap-4",
-				cycle && "h-[5em] overflow-visible m-5", // Apply styles only when cycle is true (removed bg-red-500)
+				cycle && "h-[5em] overflow-visible m-5",
 			)}>
 			{/* If we need real estate, we show a compressed version of the tips. Otherwise, we expand it. */}
 			{cycle ? (
@@ -66,7 +66,6 @@ const RooTips = ({ cycle = false }: RooTipsProps) => {
 							isFading ? "opacity-0" : "opacity-70",
 						)}>
 						{" "}
-						{/* Corrected backtick to parenthesis */}
 						<span className={`codicon ${currentTip.icon}`}></span>
 						<span>
 							<VSCodeLink href={currentTip.href}>{t(currentTip.titleKey)}</VSCodeLink>:{" "}