From c8d4e1d4e8a6e7b616f5cf8b643d78e7af4d7b27 Mon Sep 17 00:00:00 2001
From: Saoud Rizwan <7799382+saoudrizwan@users.noreply.github.com>
Date: Wed, 10 Jul 2024 01:06:07 -0400
Subject: [PATCH] Add welcome text when user has to make his first input

---
 src/extension.ts                           |  8 ++++----
 webview-ui/src/components/ChatView.tsx     | 14 +++++++++++---
 webview-ui/src/components/SettingsView.tsx |  3 +--
 webview-ui/src/components/TaskHeader.tsx   |  2 +-
 4 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/extension.ts b/src/extension.ts
index 44bdb7a..8d9aba6 100644
--- a/src/extension.ts
+++ b/src/extension.ts
@@ -17,7 +17,7 @@ https://github.com/microsoft/vscode-webview-ui-toolkit-samples/tree/main/framewo
 export function activate(context: vscode.ExtensionContext) {
 	// Use the console to output diagnostic information (console.log) and errors (console.error)
 	// This line of code will only be executed once when your extension is activated
-	console.log('Congratulations, your extension "claude-dev" is now active!')
+	//console.log('Congratulations, your extension "claude-dev" is now active!')
 
 	// The command has been defined in the package.json file
 	// Now provide the implementation of the command with registerCommand
@@ -35,7 +35,7 @@ export function activate(context: vscode.ExtensionContext) {
 
 	context.subscriptions.push(
 		vscode.commands.registerCommand("claude-dev.plusButtonTapped", async () => {
-			const message = "claude-dev.plusButtonTapped!"
+			//const message = "claude-dev.plusButtonTapped!"
 			//vscode.window.showInformationMessage(message)
 			await provider.clearTask()
 			await provider.postStateToWebview()
@@ -45,8 +45,8 @@ export function activate(context: vscode.ExtensionContext) {
 
 	context.subscriptions.push(
 		vscode.commands.registerCommand("claude-dev.settingsButtonTapped", () => {
-			const message = "claude-dev.settingsButtonTapped!"
-			vscode.window.showInformationMessage(message)
+			//const message = "claude-dev.settingsButtonTapped!"
+			//vscode.window.showInformationMessage(message)
 			provider.postMessageToWebview({ type: "action", action: "settingsButtonTapped"})
 		})
 	)
diff --git a/webview-ui/src/components/ChatView.tsx b/webview-ui/src/components/ChatView.tsx
index dbfc800..34c09f0 100644
--- a/webview-ui/src/components/ChatView.tsx
+++ b/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={{
diff --git a/webview-ui/src/components/SettingsView.tsx b/webview-ui/src/components/SettingsView.tsx
index 21b351a..9ce9fef 100644
--- a/webview-ui/src/components/SettingsView.tsx
+++ b/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">
diff --git a/webview-ui/src/components/TaskHeader.tsx b/webview-ui/src/components/TaskHeader.tsx
index 07c741a..8381d43 100644
--- a/webview-ui/src/components/TaskHeader.tsx
+++ b/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"