Prevent conditional loading of ChatView; bug fixes

webview-ui/src/App.tsx

@@ -65,16 +65,20 @@ const App: React.FC = () => {
 		<>
 			{showWelcome ? (
 				<WelcomeView apiKey={apiKey} setApiKey={setApiKey} />
-			) : showSettings ? (
-				<SettingsView
-					apiKey={apiKey}
-					setApiKey={setApiKey}
-					maxRequestsPerTask={maxRequestsPerTask}
-					setMaxRequestsPerTask={setMaxRequestsPerTask}
-					onDone={() => setShowSettings(false)}
-				/>
 			) : (
-				<ChatView messages={claudeMessages} />
+				<>
+					{showSettings && (
+						<SettingsView
+							apiKey={apiKey}
+							setApiKey={setApiKey}
+							maxRequestsPerTask={maxRequestsPerTask}
+							setMaxRequestsPerTask={setMaxRequestsPerTask}
+							onDone={() => setShowSettings(false)}
+						/>
+					)}
+					{/* Do not conditionally load ChatView, it's expensive and there's state we don't want to lose (user input, disableInput, askResponse promise, etc.) */}
+					<ChatView messages={claudeMessages} isHidden={showSettings} />
+				</>
 			)}
 		</>
 	)

webview-ui/src/components/ChatView.tsx

@@ -13,9 +13,10 @@ import { animateScroll as scroll } from "react-scroll"
 
 interface ChatViewProps {
 	messages: ClaudeMessage[]
+	isHidden: boolean
 }
 // maybe instead of storing state in App, just make chatview  always show so dont conditionally load/unload? need to make sure messages are persisted (i remember seeing something about how webviews can be frozen in docs)
-const ChatView = ({ messages }: ChatViewProps) => {
+const ChatView = ({ messages, isHidden }: ChatViewProps) => {
 	//const task = messages.length > 0 ? (messages[0].say === "task" ? messages[0] : undefined) : undefined
 	const task = messages.length > 0 ? messages[0] : undefined // leaving this less safe version here since if the first message is not a task, then the extension is in a bad state and needs to be debugged (see ClaudeDev.abort)
 	const modifiedMessages = useMemo(() => combineApiRequests(combineCommandSequences(messages.slice(1))), [messages])
@@ -247,6 +248,13 @@ const ChatView = ({ messages }: ChatViewProps) => {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [])
 
+	useEffect(() => {
+		if (!isHidden && !textAreaDisabled) {
+			textAreaRef.current?.focus()
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [isHidden])
+
 	return (
 		<div
 			style={{
@@ -255,7 +263,7 @@ const ChatView = ({ messages }: ChatViewProps) => {
 				left: 0,
 				right: 0,
 				bottom: 0,
-				display: "flex",
+				display: isHidden ? "none" : "flex",
 				flexDirection: "column",
 				overflow: "hidden",
 			}}>
@@ -271,8 +279,15 @@ const ChatView = ({ messages }: ChatViewProps) => {
 				<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.
+						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>
 			)}

webview-ui/src/components/CodeBlock.tsx

@@ -99,7 +99,9 @@ const CodeBlock = ({ code, diff, language, path }: CodeBlockProps) => {
 						justifyContent: "space-between",
 						alignItems: "center",
 						padding: "6px 10px",
-					}}>
+						cursor: "pointer",
+					}}
+					onClick={() => setIsExpanded(!isExpanded)}>
 					<span
 						style={{
 							color: "var(--vscode-descriptionForeground)",