feature: Closable welcome message (#2541)

* draft: try to add a setting button

* Add showGreeting setting and related changes

* i18n: showGreeting

* fix chinese i18n 'dot'

Author: zhangtony239

src/core/webview/ClineProvider.ts

@@ -1242,6 +1242,7 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
 			telemetrySetting,
 			showRooIgnoredFiles,
 			language,
+			showGreeting,
 			maxReadFileLine,
 		} = await this.getState()
 
@@ -1323,6 +1324,7 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
 			renderContext: this.renderContext,
 			maxReadFileLine: maxReadFileLine ?? 500,
 			settingsImportedAt: this.settingsImportedAt,
+			showGreeting: showGreeting ?? true, // Ensure showGreeting is included in the returned state
 		}
 	}
 
@@ -1410,6 +1412,7 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
 			telemetrySetting: stateValues.telemetrySetting || "unset",
 			showRooIgnoredFiles: stateValues.showRooIgnoredFiles ?? true,
 			maxReadFileLine: stateValues.maxReadFileLine ?? 500,
+			showGreeting: stateValues.showGreeting ?? true, // Ensure showGreeting is returned by getState
 		}
 	}
 

src/core/webview/webviewMessageHandler.ts

@@ -645,6 +645,11 @@ export const webviewMessageHandler = async (provider: ClineProvider, message: We
 			await updateGlobalState("diffEnabled", diffEnabled)
 			await provider.postStateToWebview()
 			break
+		case "showGreeting":
+			const showGreeting = message.bool ?? true
+			await updateGlobalState("showGreeting", showGreeting)
+			await provider.postStateToWebview()
+			break
 		case "enableCheckpoints":
 			const enableCheckpoints = message.bool ?? true
 			await updateGlobalState("enableCheckpoints", enableCheckpoints)

src/exports/roo-code.d.ts

@@ -258,6 +258,7 @@ type GlobalSettings = {
 	cachedChromeHostUrl?: string | undefined
 	enableCheckpoints?: boolean | undefined
 	checkpointStorage?: ("task" | "workspace") | undefined
+	showGreeting?: boolean | undefined
 	ttsEnabled?: boolean | undefined
 	ttsSpeed?: number | undefined
 	soundEnabled?: boolean | undefined

src/exports/types.ts

@@ -261,6 +261,7 @@ type GlobalSettings = {
 	cachedChromeHostUrl?: string | undefined
 	enableCheckpoints?: boolean | undefined
 	checkpointStorage?: ("task" | "workspace") | undefined
+	showGreeting?: boolean | undefined
 	ttsEnabled?: boolean | undefined
 	ttsSpeed?: number | undefined
 	soundEnabled?: boolean | undefined

src/schemas/index.ts

@@ -534,6 +534,8 @@ export const globalSettingsSchema = z.object({
 	enableCheckpoints: z.boolean().optional(),
 	checkpointStorage: checkpointStoragesSchema.optional(),
 
+	showGreeting: z.boolean().optional(),
+
 	ttsEnabled: z.boolean().optional(),
 	ttsSpeed: z.number().optional(),
 	soundEnabled: z.boolean().optional(),
@@ -610,6 +612,8 @@ const globalSettingsRecord: GlobalSettingsRecord = {
 	enableCheckpoints: undefined,
 	checkpointStorage: undefined,
 
+	showGreeting: undefined,
+
 	ttsEnabled: undefined,
 	ttsSpeed: undefined,
 	soundEnabled: undefined,

src/shared/ExtensionMessage.ts

@@ -143,6 +143,7 @@ export type ExtensionState = Pick<
 	| "remoteBrowserHost"
 	// | "enableCheckpoints" // Optional in GlobalSettings, required here.
 	// | "checkpointStorage" // Optional in GlobalSettings, required here.
+	| "showGreeting"
 	| "ttsEnabled"
 	| "ttsSpeed"
 	| "soundEnabled"

src/shared/WebviewMessage.ts

@@ -126,6 +126,7 @@ export interface WebviewMessage {
 		| "maxReadFileLine"
 		| "searchFiles"
 		| "toggleApiConfigPin"
+		| "showGreeting"
 	text?: string
 	disabled?: boolean
 	askResponse?: ClineAskResponse

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

@@ -69,6 +69,7 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 		alwaysAllowSubtasks,
 		customModes,
 		telemetrySetting,
+		showGreeting,
 	} = useExtensionState()
 
 	//const task = messages.length > 0 ? (messages[0].say === "task" ? messages[0] : undefined) : undefined) : undefined
@@ -95,7 +96,6 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 	const [showScrollToBottom, setShowScrollToBottom] = useState(false)
 	const [isAtBottom, setIsAtBottom] = useState(false)
 	const lastTtsRef = useRef<string>("")
-
 	const [wasStreaming, setWasStreaming] = useState<boolean>(false)
 	const [showCheckpointWarning, setShowCheckpointWarning] = useState<boolean>(false)
 
@@ -1207,10 +1207,12 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 					}}>
 					{telemetrySetting === "unset" && <TelemetryBanner />}
 					{showAnnouncement && <Announcement version={version} hideAnnouncement={hideAnnouncement} />}
-					<div style={{ padding: "0 20px", flexShrink: 0 }}>
-						<h2>{t("chat:greeting")}</h2>
-						<p>{t("chat:aboutMe")}</p>
-					</div>
+					{showGreeting === true && (
+						<div style={{ padding: "0 20px", flexShrink: 0 }}>
+							<h2>{t("chat:greeting")}</h2>
+							<p>{t("chat:aboutMe")}</p>
+						</div>
+					)}
 					{taskHistory.length > 0 && <HistoryPreview showHistoryView={showHistoryView} />}
 				</div>
 			)}

webview-ui/src/components/settings/InterfaceSettings.tsx

@@ -0,0 +1,40 @@
+import { HTMLAttributes } from "react"
+import { useAppTranslation } from "@/i18n/TranslationContext"
+import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
+import { Monitor } from "lucide-react"
+
+import { SetCachedStateField } from "./types"
+import { SectionHeader } from "./SectionHeader"
+import { Section } from "./Section"
+
+type InterfaceSettingsProps = HTMLAttributes<HTMLDivElement> & {
+	showGreeting?: boolean
+	setCachedStateField: SetCachedStateField<"showGreeting">
+}
+
+export const InterfaceSettings = ({ showGreeting, setCachedStateField, ...props }: InterfaceSettingsProps) => {
+	const { t } = useAppTranslation()
+	return (
+		<div {...props}>
+			<SectionHeader>
+				<div className="flex items-center gap-2">
+					<Monitor className="w-4" />
+					<div>{t("settings:sections.interface")}</div>
+				</div>
+			</SectionHeader>
+
+			<Section>
+				<div>
+					<VSCodeCheckbox
+						checked={showGreeting}
+						onChange={(e: any) => setCachedStateField("showGreeting", e.target.checked)}>
+						<span className="font-medium">{t("settings:interface.showgreeting.label")}</span>
+					</VSCodeCheckbox>
+					<div className="text-vscode-descriptionForeground text-sm mt-1">
+						{t("settings:interface.showgreeting.description")}
+					</div>
+				</div>
+			</Section>
+		</div>
+	)
+}

webview-ui/src/components/settings/SettingsView.tsx

@@ -14,6 +14,7 @@ import {
 	Globe,
 	Info,
 	LucideIcon,
+	Monitor,
 } from "lucide-react"
 import { CaretSortIcon } from "@radix-ui/react-icons"
 
@@ -47,6 +48,7 @@ import ApiOptions from "./ApiOptions"
 import { AutoApproveSettings } from "./AutoApproveSettings"
 import { BrowserSettings } from "./BrowserSettings"
 import { CheckpointSettings } from "./CheckpointSettings"
+import { InterfaceSettings } from "./InterfaceSettings"
 import { NotificationSettings } from "./NotificationSettings"
 import { ContextManagementSettings } from "./ContextManagementSettings"
 import { TerminalSettings } from "./TerminalSettings"
@@ -65,6 +67,7 @@ const sectionNames = [
 	"autoApprove",
 	"browser",
 	"checkpoints",
+	"interface",
 	"notifications",
 	"contextManagement",
 	"terminal",
@@ -139,6 +142,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 		showRooIgnoredFiles,
 		remoteBrowserEnabled,
 		maxReadFileLine,
+		showGreeting,
 	} = cachedState
 
 	// Make sure apiConfiguration is initialized and managed by SettingsView.
@@ -262,6 +266,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 			vscode.postMessage({ type: "alwaysAllowSubtasks", bool: alwaysAllowSubtasks })
 			vscode.postMessage({ type: "upsertApiConfiguration", text: currentApiConfigName, apiConfiguration })
 			vscode.postMessage({ type: "telemetrySetting", text: telemetrySetting })
+			vscode.postMessage({ type: "showGreeting", bool: showGreeting })
 			setChangeDetected(false)
 		}
 	}
@@ -290,6 +295,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 	const autoApproveRef = useRef<HTMLDivElement>(null)
 	const browserRef = useRef<HTMLDivElement>(null)
 	const checkpointsRef = useRef<HTMLDivElement>(null)
+	const interfaceRef = useRef<HTMLDivElement>(null)
 	const notificationsRef = useRef<HTMLDivElement>(null)
 	const contextManagementRef = useRef<HTMLDivElement>(null)
 	const terminalRef = useRef<HTMLDivElement>(null)
@@ -304,6 +310,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 			{ id: "autoApprove", icon: CheckCheck, ref: autoApproveRef },
 			{ id: "browser", icon: SquareMousePointer, ref: browserRef },
 			{ id: "checkpoints", icon: GitBranch, ref: checkpointsRef },
+			{ id: "interface", icon: Monitor, ref: interfaceRef },
 			{ id: "notifications", icon: Bell, ref: notificationsRef },
 			{ id: "contextManagement", icon: Database, ref: contextManagementRef },
 			{ id: "terminal", icon: SquareTerminal, ref: terminalRef },
@@ -317,6 +324,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 			autoApproveRef,
 			browserRef,
 			checkpointsRef,
+			interfaceRef,
 			notificationsRef,
 			contextManagementRef,
 			terminalRef,
@@ -469,6 +477,10 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 					/>
 				</div>
 
+				<div ref={interfaceRef}>
+					<InterfaceSettings showGreeting={showGreeting} setCachedStateField={setCachedStateField} />
+				</div>
+
 				<div ref={notificationsRef}>
 					<NotificationSettings
 						ttsEnabled={ttsEnabled}