Prevent conditional loading of ChatView; bug fixes

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>
 			)}