Improve Kodu promo behavior

webview-ui/src/components/Announcement.tsx

@@ -1,6 +1,6 @@
 import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
 import { ApiConfiguration } from "../../../src/shared/api"
-import { getKoduHomepageUrl, getKoduSignInUrl } from "../../../src/shared/kodu"
+import { getKoduSignInUrl } from "../../../src/shared/kodu"
 import VSCodeButtonLink from "./VSCodeButtonLink"
 
 interface AnnouncementProps {
@@ -34,25 +34,19 @@ const Announcement = ({ version, hideAnnouncement, apiConfiguration, vscodeUriSc
 
 			<ul style={{ margin: "0 0 8px", paddingLeft: "20px" }}>
 				<li>
-					Excited to announce that{" "}
-					<VSCodeLink
-						href={apiConfiguration?.koduApiKey ? getKoduHomepageUrl() : getKoduSignInUrl(vscodeUriScheme)}
-						style={{ display: "inline" }}>
-						Kodu
-					</VSCodeLink>{" "}
-					is offering $10 free credits to help new users get the most out of Claude Dev with high rate limits
-					and prompt caching! Stay tuned for some exciting updates like easier billing and deploying live
-					websites.
+					Excited to announce that we've partnered with Anthropic and are offering $20 free credits to help
+					users get the most out of Claude Dev with high rate limits and prompt caching! Stay tuned for some
+					exciting updates like easier billing, voice mode and one click deployment.
 					{apiConfiguration?.koduApiKey === undefined && (
 						<VSCodeButtonLink
 							appearance="secondary"
 							href={getKoduSignInUrl(vscodeUriScheme)}
 							style={{
-								transform: "scale(0.8)",
+								transform: "scale(0.85)",
 								transformOrigin: "left center",
 								margin: "4px 0 2px 0",
 							}}>
-							Claim $10 Free Credits
+							Claim $20 Free Credits with Kodu
 						</VSCodeButtonLink>
 					)}
 				</li>

webview-ui/src/components/ChatView.tsx

@@ -17,6 +17,7 @@ import TaskHeader from "./TaskHeader"
 import Thumbnails from "./Thumbnails"
 import { HistoryItem } from "../../../src/shared/HistoryItem"
 import { ApiConfiguration } from "../../../src/shared/api"
+import KoduPromo from "./KoduPromo"
 
 interface ChatViewProps {
 	version: string
@@ -31,6 +32,7 @@ interface ChatViewProps {
 	showHistoryView: () => void
 	apiConfiguration?: ApiConfiguration
 	vscodeUriScheme?: string
+	shouldShowKoduPromo: boolean
 }
 
 const MAX_IMAGES_PER_MESSAGE = 20 // Anthropic limits to 20 images
@@ -48,6 +50,7 @@ const ChatView = ({
 	showHistoryView,
 	apiConfiguration,
 	vscodeUriScheme,
+	shouldShowKoduPromo,
 }: 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)
@@ -495,6 +498,9 @@ const ChatView = ({
 							vscodeUriScheme={vscodeUriScheme}
 						/>
 					)}
+					{apiConfiguration?.koduApiKey === undefined && !showAnnouncement && shouldShowKoduPromo && (
+						<KoduPromo vscodeUriScheme={vscodeUriScheme} style={{ margin: "10px 15px -10px 15px" }} />
+					)}
 					<div style={{ padding: "0 20px", flexGrow: taskHistory.length > 0 ? undefined : 1 }}>
 						<h2>What can I do for you?</h2>
 						<p>

webview-ui/src/components/KoduPromo.tsx

@@ -0,0 +1,69 @@
+import React from "react"
+import { getKoduSignInUrl } from "../../../src/shared/kodu"
+import { vscode } from "../utils/vscode"
+
+interface KoduPromoProps {
+	vscodeUriScheme?: string
+	style?: React.CSSProperties
+}
+
+const KoduPromo: React.FC<KoduPromoProps> = ({ vscodeUriScheme, style }) => {
+	function onClose() {
+		vscode.postMessage({ type: "didDismissKoduPromo" })
+	}
+
+	return (
+		<div style={{ ...style }}>
+			<div
+				style={{
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "space-between",
+					backgroundColor: "var(--vscode-editor-inactiveSelectionBackground)",
+					color: "var(--vscode-textLink-foreground)",
+					padding: "6px 8px",
+					borderRadius: "3px",
+					margin: "0 0 8px 0px",
+					fontSize: "12px",
+					cursor: "pointer",
+				}}>
+				<a
+					href={getKoduSignInUrl(vscodeUriScheme)}
+					style={{
+						textDecoration: "none",
+						color: "inherit",
+						outline: "none",
+						display: "flex",
+						alignItems: "center",
+					}}>
+					<i
+						className="codicon codicon-info"
+						style={{
+							marginRight: 6,
+							fontSize: 16,
+						}}></i>
+					<span>Claim $20 free credits from Kodu</span>
+				</a>
+				<button
+					onClick={onClose}
+					style={{
+						background: "none",
+						border: "none",
+						color: "var(--vscode-textLink-foreground)",
+						cursor: "pointer",
+						fontSize: "12px",
+						opacity: 0.7,
+						padding: 0,
+						marginLeft: 4,
+						marginTop: 2,
+					}}
+					onMouseEnter={(e) => (e.currentTarget.style.opacity = "1")}
+					onMouseLeave={(e) => (e.currentTarget.style.opacity = "0.7")}>
+					<i className="codicon codicon-close"></i>
+				</button>
+			</div>
+		</div>
+	)
+}
+
+export default KoduPromo

webview-ui/src/components/SettingsView.tsx

@@ -1,16 +1,15 @@
 import {
 	VSCodeButton,
+	VSCodeCheckbox,
 	VSCodeLink,
 	VSCodeTextArea,
 	VSCodeTextField,
-	VSCodeCheckbox,
 } from "@vscode/webview-ui-toolkit/react"
 import React, { useEffect, useState } from "react"
 import { ApiConfiguration } from "../../../src/shared/api"
 import { validateApiConfiguration, validateMaxRequestsPerTask } from "../utils/validate"
 import { vscode } from "../utils/vscode"
 import ApiOptions from "./ApiOptions"
-import { getKoduSignInUrl } from "../../../src/shared/kodu"
 
 type SettingsViewProps = {
 	version: string
@@ -106,36 +105,6 @@ const SettingsView = ({
 			</div>
 			<div
 				style={{ flexGrow: 1, overflowY: "scroll", paddingRight: 8, display: "flex", flexDirection: "column" }}>
-				{apiConfiguration?.koduApiKey === undefined && (
-					<a
-						href={getKoduSignInUrl(vscodeUriScheme)}
-						style={{
-							textDecoration: "none",
-							color: "inherit",
-							outline: "none",
-						}}>
-						<div
-							style={{
-								display: "flex",
-								alignItems: "center",
-								backgroundColor: "var(--vscode-editor-inactiveSelectionBackground)",
-								color: "var(--vscode-textLink-foreground)",
-								padding: "6px 8px",
-								borderRadius: "3px",
-								margin: "0 0 8px 0px",
-								fontSize: "12px",
-								cursor: "pointer",
-							}}>
-							<i
-								className="codicon codicon-info"
-								style={{
-									marginRight: 6,
-									fontSize: 16,
-								}}></i>
-							<span>Claim $10 free credits from Kodu</span>
-						</div>
-					</a>
-				)}
 				<div style={{ marginBottom: 5 }}>
 					<ApiOptions
 						apiConfiguration={apiConfiguration}

webview-ui/src/components/WelcomeView.tsx

@@ -60,7 +60,7 @@ const WelcomeView: React.FC<WelcomeViewProps> = ({ apiConfiguration, setApiConfi
 						color: "var(--vscode-infoIcon-foreground)",
 					}}></i>
 				<span>
-					Explore Claude's capabilities with $10 free credits from{" "}
+					Explore Claude's capabilities with $20 free credits from{" "}
 					<VSCodeLink href={getKoduSignInUrl(vscodeUriScheme)} style={{ display: "inline" }}>
 						Kodu
 					</VSCodeLink>