diff --git a/webview-ui/src/App.tsx b/webview-ui/src/App.tsx index 5efbc78..75f89a6 100644 --- a/webview-ui/src/App.tsx +++ b/webview-ui/src/App.tsx @@ -65,16 +65,20 @@ const App: React.FC = () => { <> {showWelcome ? ( - ) : showSettings ? ( - setShowSettings(false)} - /> ) : ( - + <> + {showSettings && ( + 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.) */} + + )} ) diff --git a/webview-ui/src/components/ChatView.tsx b/webview-ui/src/components/ChatView.tsx index 78a042e..6527ada 100644 --- a/webview-ui/src/components/ChatView.tsx +++ b/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 (
{ left: 0, right: 0, bottom: 0, - display: "flex", + display: isHidden ? "none" : "flex", flexDirection: "column", overflow: "hidden", }}> @@ -271,8 +279,15 @@ const ChatView = ({ messages }: ChatViewProps) => {

What can I do for you?

- {/* prettier-ignore */} - Thanks to Claude 3.5 Sonnet's agentic coding capabilities, 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{" "} + + Claude 3.5 Sonnet's agentic coding capabilities, + {" "} + 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.

)} diff --git a/webview-ui/src/components/CodeBlock.tsx b/webview-ui/src/components/CodeBlock.tsx index 328bce3..53122ec 100644 --- a/webview-ui/src/components/CodeBlock.tsx +++ b/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)}>