Implement bidirectional extension webview messaging system; extension holds claude messages state to keep webview stateless

This commit is contained in:
Saoud Rizwan
2024-07-08 12:58:05 -04:00
parent 09559c314b
commit 4da785b822
9 changed files with 242 additions and 79 deletions

View File

@@ -3,7 +3,7 @@ import "./App.css"
import ChatView from "./components/ChatView"
import SettingsView from "./components/SettingsView"
import { ExtensionMessage } from "@shared/ExtensionMessage"
import { ClaudeMessage, ExtensionMessage } from "@shared/ExtensionMessage"
import WelcomeView from "./components/WelcomeView"
import { vscode } from "./utilities/vscode"
@@ -20,6 +20,7 @@ const App: React.FC = () => {
const [showWelcome, setShowWelcome] = useState<boolean>(false)
const [apiKey, setApiKey] = useState<string>("")
const [maxRequestsPerTask, setMaxRequestsPerTask] = useState<string>("")
const [claudeMessages, setClaudeMessages] = useState<ClaudeMessage[]>([])
useEffect(() => {
vscode.postMessage({ type: "webviewDidLaunch" })
@@ -36,6 +37,7 @@ const App: React.FC = () => {
? message.state!.maxRequestsPerTask.toString()
: ""
)
setClaudeMessages(message.state!.claudeMessages)
break
case "action":
switch (message.action!) {
@@ -64,7 +66,7 @@ const App: React.FC = () => {
onDone={() => setShowSettings(false)}
/>
) : (
<ChatView />
<ChatView messages={claudeMessages} />
)}
</>
)