Add welcome text when user has to make his first input

webview-ui/src/components/ChatView.tsx

@@ -1,5 +1,5 @@
 import { ClaudeAsk, ClaudeMessage, ExtensionMessage } from "@shared/ExtensionMessage"
-import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
+import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
 import { KeyboardEvent, useEffect, useMemo, useRef, useState } from "react"
 import DynamicTextArea from "react-textarea-autosize"
 import { vscode } from "../utilities/vscode"
@@ -255,7 +255,7 @@ const ChatView = ({ messages }: ChatViewProps) => {
 				flexDirection: "column",
 				overflow: "hidden",
 			}}>
-			{task && (
+			{task ? (
 				<TaskHeader
 					taskText={task.text || ""}
 					tokensIn={apiMetrics.totalTokensIn}
@@ -263,6 +263,14 @@ const ChatView = ({ messages }: ChatViewProps) => {
 					totalCost={apiMetrics.totalCost}
 					onClose={handleTaskCloseButtonClick}
 				/>
+			) : (
+				<div style={{ padding: "0 25px" }}>
+					<h2>What can I do for you?</h2>
+					<p>
+						{/*prettier-ignore*/}
+						Thanks to <VSCodeLink href="https://www-cdn.anthropic.com/fed9cc193a14b84131812372d8d5857f8f304c52/Model_Card_Claude_3_Addendum.pdf" style={{ display: "inline" }}>Claude 3.5 Sonnet's agentic coding capabilities</VSCodeLink>, I can handle complex software development tasks step-by-step. With tools that let me read & write files, create entire projects from scratch, and execute terminal commands (after you grant permission), I can assist you in ways that go beyond simple code completion or tech support.
+					</p>
+				</div>
 			)}
 			<div
 				id="chat-view-container"
@@ -306,7 +314,7 @@ const ChatView = ({ messages }: ChatViewProps) => {
 					onChange={(e) => setInputValue(e.target.value)}
 					onKeyDown={handleKeyDown}
 					onHeightChange={() => scrollToBottom(true)}
-					placeholder="Type a message..."
+					placeholder={task ? "Type a message..." : "Type your task here..."}
 					maxRows={10}
 					autoFocus={true}
 					style={{