From 0298e7af7fef0e6bf93f0c0528de672eaea655df Mon Sep 17 00:00:00 2001 From: Saoud Rizwan <7799382+saoudrizwan@users.noreply.github.com> Date: Sat, 24 Aug 2024 21:42:20 -0400 Subject: [PATCH] Add Kodu announcement --- src/providers/ClaudeDevProvider.ts | 3 +- src/shared/ExtensionMessage.ts | 1 + src/shared/WebviewMessage.ts | 2 +- webview-ui/src/App.tsx | 11 ++++- webview-ui/src/components/Announcement.tsx | 39 ++++++++++----- webview-ui/src/components/ApiOptions.tsx | 55 +++++++++------------- webview-ui/src/components/ChatView.tsx | 11 ++++- webview-ui/src/components/WelcomeView.tsx | 44 +++++++++++++---- 8 files changed, 107 insertions(+), 59 deletions(-) diff --git a/src/providers/ClaudeDevProvider.ts b/src/providers/ClaudeDevProvider.ts index 7971287f60..e2385347c3 100644 --- a/src/providers/ClaudeDevProvider.ts +++ b/src/providers/ClaudeDevProvider.ts @@ -320,7 +320,7 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider { await this.clearTask() await this.postStateToWebview() break - case "didShowAnnouncement": + case "didCloseAnnouncement": await this.updateGlobalState("lastShownAnnouncementId", this.latestAnnouncementId) await this.postStateToWebview() break @@ -377,6 +377,7 @@ export class ClaudeDevProvider implements vscode.WebviewViewProvider { await this.updateGlobalState("koduEmail", email) await this.updateGlobalState("apiProvider", "kodu") await this.postStateToWebview() + await this.postMessageToWebview({ type: "action", action: "koduAuthenticated" }) this.claudeDev?.updateApi({ apiProvider: "kodu", koduApiKey: apiKey }) } diff --git a/src/shared/ExtensionMessage.ts b/src/shared/ExtensionMessage.ts index 1f7e11ef88..1203d620fb 100644 --- a/src/shared/ExtensionMessage.ts +++ b/src/shared/ExtensionMessage.ts @@ -12,6 +12,7 @@ export interface ExtensionMessage { | "settingsButtonTapped" | "historyButtonTapped" | "didBecomeVisible" + | "koduAuthenticated" | "koduCreditsFetched" state?: ExtensionState images?: string[] diff --git a/src/shared/WebviewMessage.ts b/src/shared/WebviewMessage.ts index e2a258edf8..f85881750c 100644 --- a/src/shared/WebviewMessage.ts +++ b/src/shared/WebviewMessage.ts @@ -9,7 +9,7 @@ export interface WebviewMessage { | "newTask" | "askResponse" | "clearTask" - | "didShowAnnouncement" + | "didCloseAnnouncement" | "selectImages" | "exportCurrentTask" | "showTaskWithId" diff --git a/webview-ui/src/App.tsx b/webview-ui/src/App.tsx index c7f99fedce..3b7b53f20a 100644 --- a/webview-ui/src/App.tsx +++ b/webview-ui/src/App.tsx @@ -59,7 +59,6 @@ const App: React.FC = () => { // don't update showAnnouncement to false if shouldShowAnnouncement is false if (message.state!.shouldShowAnnouncement) { setShowAnnouncement(true) - vscode.postMessage({ type: "didShowAnnouncement" }) } setDidHydrateState(true) break @@ -77,6 +76,10 @@ const App: React.FC = () => { setShowSettings(false) setShowHistory(false) break + case "koduAuthenticated": + setShowSettings(true) + setShowHistory(false) + break } break } @@ -127,7 +130,11 @@ const App: React.FC = () => { showAnnouncement={showAnnouncement} selectedModelSupportsImages={selectedModelInfo.supportsImages} selectedModelSupportsPromptCache={selectedModelInfo.supportsPromptCache} - hideAnnouncement={() => setShowAnnouncement(false)} + hideAnnouncement={() => { + vscode.postMessage({ type: "didCloseAnnouncement" }) + setShowAnnouncement(false) + }} + apiConfiguration={apiConfiguration} /> )} diff --git a/webview-ui/src/components/Announcement.tsx b/webview-ui/src/components/Announcement.tsx index 46296291f1..92719d958d 100644 --- a/webview-ui/src/components/Announcement.tsx +++ b/webview-ui/src/components/Announcement.tsx @@ -1,13 +1,16 @@ import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react" +import { vscode } from "../utils/vscode" +import { ApiConfiguration } from "../../../src/shared/api" interface AnnouncementProps { version: string hideAnnouncement: () => void + apiConfiguration?: ApiConfiguration } /* You must update the latestAnnouncementId in ClaudeDevProvider for new announcements to show to users. This new id will be compared with whats in state for the 'last announcement shown', and if it's different then the announcement will render. As soon as an announcement is shown, the id will be updated in state. This ensures that announcements are not shown more than once, even if the user doesn't close it themselves. */ -const Announcement = ({ version, hideAnnouncement }: AnnouncementProps) => { +const Announcement = ({ version, hideAnnouncement, apiConfiguration }: AnnouncementProps) => { return (
{

🎉{" "}New in v{version}

+

Follow me for more updates!{" "} diff --git a/webview-ui/src/components/ApiOptions.tsx b/webview-ui/src/components/ApiOptions.tsx index 9470872841..48a851101a 100644 --- a/webview-ui/src/components/ApiOptions.tsx +++ b/webview-ui/src/components/ApiOptions.tsx @@ -165,9 +165,9 @@ const ApiOptions: React.FC = ({ )} {selectedProvider === "kodu" && ( - <> +

{apiConfiguration?.koduApiKey !== undefined ? ( -
+ <>
Signed in as {apiConfiguration?.koduEmail || "Unknown"} @@ -192,40 +192,29 @@ const ApiOptions: React.FC = ({ }}> Add Credits -

- Kodu is recommended for its high rate limits and access to the latest features like - prompt caching. - - Learn more about Kodu here. - -

-
+ ) : ( -
-
- vscode.postMessage({ type: "didClickKoduSignIn" })}> - Sign in to Kodu - -
-

- This will open your browser to sign in to Kodu. You will be redirected back to the - extension after signing in. -

+
+ vscode.postMessage({ type: "didClickKoduSignIn" })}> + Sign in to Kodu +
)} - +

+ Kodu is recommended for its high rate limits and access to the latest features like prompt + caching. + + Learn more about Kodu here. + +

+
)} {selectedProvider === "bedrock" && ( diff --git a/webview-ui/src/components/ChatView.tsx b/webview-ui/src/components/ChatView.tsx index 640b03a036..9aa044814a 100644 --- a/webview-ui/src/components/ChatView.tsx +++ b/webview-ui/src/components/ChatView.tsx @@ -16,6 +16,7 @@ import HistoryPreview from "./HistoryPreview" import TaskHeader from "./TaskHeader" import Thumbnails from "./Thumbnails" import { HistoryItem } from "../../../src/shared/HistoryItem" +import { ApiConfiguration } from "../../../src/shared/api" interface ChatViewProps { version: string @@ -28,6 +29,7 @@ interface ChatViewProps { selectedModelSupportsPromptCache: boolean hideAnnouncement: () => void showHistoryView: () => void + apiConfiguration?: ApiConfiguration } const MAX_IMAGES_PER_MESSAGE = 20 // Anthropic limits to 20 images @@ -43,6 +45,7 @@ const ChatView = ({ selectedModelSupportsPromptCache, hideAnnouncement, showHistoryView, + apiConfiguration, }: ChatViewProps) => { //const task = messages.length > 0 ? (messages[0].say === "task" ? messages[0] : undefined) : 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) @@ -486,7 +489,13 @@ const ChatView = ({ /> ) : ( <> - {showAnnouncement && } + {showAnnouncement && ( + + )}
0 ? undefined : 1 }}>

What can I do for you?

diff --git a/webview-ui/src/components/WelcomeView.tsx b/webview-ui/src/components/WelcomeView.tsx index 2b91f2eece..9d8f7967ad 100644 --- a/webview-ui/src/components/WelcomeView.tsx +++ b/webview-ui/src/components/WelcomeView.tsx @@ -31,23 +31,51 @@ const WelcomeView: React.FC = ({ apiConfiguration, setApiConfi - Claude 3.5 Sonnet's agentic coding capabilities. + Claude 3.5 Sonnet's agentic coding capabilities {" "} - I am prompted to think through tasks step-by-step and have access to tools that let me create & edit - files, explore complex projects, and execute terminal commands (with your permission, of course). + and access to tools that let me create & edit files, explore complex projects, and execute terminal + commands (with your permission, of course).

- To get started, this extension needs an API key for Claude 3.5 Sonnet: + To get started, this extension needs an API provider for Claude 3.5 Sonnet. -
+
+ + + Explore Claude's capabilities with $10 free credits from{" "} + + Kodu + + +
+ +
- - Let's go! - + {apiConfiguration?.apiProvider !== "kodu" && ( + + Let's go! + + )}
)