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={{

webview-ui/src/components/SettingsView.tsx

@@ -148,10 +148,9 @@ const SettingsView = ({ apiKey, setApiKey, maxRequestsPerTask, setMaxRequestsPer
 					textAlign: "center",
 					color: "var(--vscode-descriptionForeground)",
 					fontSize: "12px",
-					lineHeight: "1.5",
+					lineHeight: "1.2",
 					fontStyle: "italic",
 				}}>
-				<p>Made possible by the latest breakthroughs in Claude 3.5 Sonnet's agentic coding capabilities.</p>
 				<p>
 					This project was made for Anthropic's "Build with Claude June 2024 contest"
 					<VSCodeLink href="https://github.com/saoudrizwan/claude-dev">

webview-ui/src/components/TaskHeader.tsx

@@ -40,7 +40,7 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({ taskText, tokensIn, tokensOut,
 						<span className="codicon codicon-close"></span>
 					</VSCodeButton>
 				</div>
-				<div style={{ fontSize: "var(--vscode-font-size)", lineHeight: "1.5" }}>
+				<div style={{ fontSize: "var(--vscode-font-size)" }}>
 					<TextTruncate
 						line={isExpanded ? 0 : 3}
 						element="span"