Refactor Kodu links

2025-12-20 04:11:10 -05:00 · 2024-08-25 16:08:57 -04:00
parent 9c26980c06
commit 7fa7589ed0
12 changed files with 115 additions and 71 deletions
--- a/webview-ui/src/components/Announcement.tsx
+++ b/webview-ui/src/components/Announcement.tsx
@@ -1,16 +1,18 @@
 import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
-import { vscode } from "../utils/vscode"
 import { ApiConfiguration } from "../../../src/shared/api"
+import { getKoduSignInUrl } from "../../../src/shared/kodu"
+import VSCodeButtonLink from "./VSCodeButtonLink"

 interface AnnouncementProps {
 	version: string
 	hideAnnouncement: () => void
 	apiConfiguration?: ApiConfiguration
+	vscodeUriScheme?: string
 }
 /*
 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, apiConfiguration }: AnnouncementProps) => {
+const Announcement = ({ version, hideAnnouncement, apiConfiguration, vscodeUriScheme }: AnnouncementProps) => {
 	return (
 		<div
 			style={{
@@ -33,23 +35,23 @@ const Announcement = ({ version, hideAnnouncement, apiConfiguration }: Announcem
 			<ul style={{ margin: "0 0 8px", paddingLeft: "20px" }}>
 				<li>
 					Excited to announce that{" "}
-					<VSCodeLink href="https://claude-dev.com" style={{ display: "inline" }}>
+					<VSCodeLink href={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.
 					{apiConfiguration?.koduApiKey === undefined && (
-						<VSCodeButton
+						<VSCodeButtonLink
 							appearance="secondary"
-							onClick={() => vscode.postMessage({ type: "didClickKoduSignIn" })}
+							href={getKoduSignInUrl(vscodeUriScheme)}
 							style={{
 								transform: "scale(0.8)",
 								transformOrigin: "left center",
 								margin: "4px 0 2px 0",
 							}}>
 							Claim $10 Free Credits
-						</VSCodeButton>
+						</VSCodeButtonLink>
 					)}
 				</li>
 				<li>
--- a/webview-ui/src/components/ApiOptions.tsx
+++ b/webview-ui/src/components/ApiOptions.tsx
@@ -1,11 +1,6 @@
-import {
-	VSCodeButton,
-	VSCodeDropdown,
-	VSCodeLink,
-	VSCodeOption,
-	VSCodeTextField,
-} from "@vscode/webview-ui-toolkit/react"
+import { VSCodeDropdown, VSCodeLink, VSCodeOption, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 import React, { useCallback, useEffect, useMemo, useState } from "react"
+import { useEvent } from "react-use"
 import {
 	ApiConfiguration,
 	ApiModelId,
@@ -19,9 +14,10 @@ import {
 	openRouterDefaultModelId,
 	openRouterModels,
 } from "../../../src/shared/api"
-import { vscode } from "../utils/vscode"
-import { useEvent } from "react-use"
 import { ExtensionMessage } from "../../../src/shared/ExtensionMessage"
+import { getKoduAddCreditsUrl, getKoduSignInUrl } from "../../../src/shared/kodu"
+import { vscode } from "../utils/vscode"
+import VSCodeButtonLink from "./VSCodeButtonLink"

 interface ApiOptionsProps {
 	showModelOptions: boolean
@@ -29,6 +25,7 @@ interface ApiOptionsProps {
 	setApiConfiguration: React.Dispatch<React.SetStateAction<ApiConfiguration | undefined>>
 	koduCredits?: number
 	apiErrorMessage?: string
+	vscodeUriScheme?: string
 }

 const ApiOptions: React.FC<ApiOptionsProps> = ({
@@ -37,6 +34,7 @@ const ApiOptions: React.FC<ApiOptionsProps> = ({
 	setApiConfiguration,
 	koduCredits,
 	apiErrorMessage,
+	vscodeUriScheme,
 }) => {
 	const [didFetchKoduCredits, setDidFetchKoduCredits] = useState(false)
 	const handleInputChange = (field: keyof ApiConfiguration) => (event: any) => {
@@ -184,22 +182,19 @@ const ApiOptions: React.FC<ApiOptionsProps> = ({
 									{formatPrice(koduCredits || 0)}
 								</span>
 							</div>
-							<VSCodeButton
-								appearance="primary"
-								onClick={() => vscode.postMessage({ type: "didClickKoduAddCredits" })}
+							<VSCodeButtonLink
+								href={getKoduAddCreditsUrl(vscodeUriScheme)}
 								style={{
 									width: "fit-content",
 								}}>
 								Add Credits
-							</VSCodeButton>
+							</VSCodeButtonLink>
 						</>
 					) : (
 						<div style={{ margin: "4px 0px" }}>
-							<VSCodeButton
-								appearance="primary"
-								onClick={() => vscode.postMessage({ type: "didClickKoduSignIn" })}>
+							<VSCodeButtonLink href={getKoduSignInUrl(vscodeUriScheme)}>
 								Sign in to Kodu
-							</VSCodeButton>
+							</VSCodeButtonLink>
 						</div>
 					)}
 					<p
@@ -210,7 +205,7 @@ const ApiOptions: React.FC<ApiOptionsProps> = ({
 						}}>
 						Kodu is recommended for its high rate limits and access to the latest features like prompt
 						caching.
-						<VSCodeLink href="https://claude-dev.com" style={{ display: "inline", fontSize: "12px" }}>
+						<VSCodeLink href="https://kodu.ai" style={{ display: "inline", fontSize: "12px" }}>
 							Learn more about Kodu here.
 						</VSCodeLink>
 					</p>
--- a/webview-ui/src/components/ChatView.tsx
+++ b/webview-ui/src/components/ChatView.tsx
@@ -30,6 +30,7 @@ interface ChatViewProps {
 	hideAnnouncement: () => void
 	showHistoryView: () => void
 	apiConfiguration?: ApiConfiguration
+	vscodeUriScheme?: string
 }

 const MAX_IMAGES_PER_MESSAGE = 20 // Anthropic limits to 20 images
@@ -46,6 +47,7 @@ const ChatView = ({
 	hideAnnouncement,
 	showHistoryView,
 	apiConfiguration,
+	vscodeUriScheme,
 }: 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)
@@ -490,6 +492,7 @@ const ChatView = ({
 							version={version}
 							hideAnnouncement={hideAnnouncement}
 							apiConfiguration={apiConfiguration}
+							vscodeUriScheme={vscodeUriScheme}
 						/>
 					)}
 					<div style={{ padding: "0 20px", flexGrow: taskHistory.length > 0 ? undefined : 1 }}>
--- a/webview-ui/src/components/SettingsView.tsx
+++ b/webview-ui/src/components/SettingsView.tsx
@@ -10,6 +10,7 @@ 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
@@ -23,6 +24,7 @@ type SettingsViewProps = {
 	onDone: () => void
 	alwaysAllowReadOnly: boolean
 	setAlwaysAllowReadOnly: React.Dispatch<React.SetStateAction<boolean>>
+	vscodeUriScheme?: string
 }

 const SettingsView = ({
@@ -37,6 +39,7 @@ const SettingsView = ({
 	onDone,
 	alwaysAllowReadOnly,
 	setAlwaysAllowReadOnly,
+	vscodeUriScheme,
 }: SettingsViewProps) => {
 	const [apiErrorMessage, setApiErrorMessage] = useState<string | undefined>(undefined)
 	const [maxRequestsErrorMessage, setMaxRequestsErrorMessage] = useState<string | undefined>(undefined)
@@ -104,27 +107,34 @@ const SettingsView = ({
 			<div
 				style={{ flexGrow: 1, overflowY: "scroll", paddingRight: 8, display: "flex", flexDirection: "column" }}>
 				{apiConfiguration?.koduApiKey === undefined && (
-					<div
+					<a
+						href={getKoduSignInUrl(vscodeUriScheme)}
 						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",
-						}}
-						onClick={() => vscode.postMessage({ type: "didClickKoduSignIn" })}>
-						<i
-							className="codicon codicon-info"
+							textDecoration: "none",
+							color: "inherit",
+							outline: "none",
+						}}>
+						<div
 							style={{
-								marginRight: 6,
-								fontSize: 16,
-							}}></i>
-						<span>Claim $10 free credits from Kodu</span>
-					</div>
+								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
@@ -133,6 +143,7 @@ const SettingsView = ({
 						showModelOptions={true}
 						koduCredits={koduCredits}
 						apiErrorMessage={apiErrorMessage}
+						vscodeUriScheme={vscodeUriScheme}
 					/>
 				</div>

--- a/webview-ui/src/components/VSCodeButtonLink.tsx
+++ b/webview-ui/src/components/VSCodeButtonLink.tsx
@@ -0,0 +1,23 @@
+import React from "react"
+import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
+
+interface VSCodeButtonLinkProps {
+	href: string
+	children: React.ReactNode
+	[key: string]: any
+}
+
+const VSCodeButtonLink: React.FC<VSCodeButtonLinkProps> = ({ href, children, ...props }) => {
+	return (
+		<a
+			href={href}
+			style={{
+				textDecoration: "none",
+				color: "inherit",
+			}}>
+			<VSCodeButton {...props}>{children}</VSCodeButton>
+		</a>
+	)
+}
+
+export default VSCodeButtonLink
--- a/webview-ui/src/components/WelcomeView.tsx
+++ b/webview-ui/src/components/WelcomeView.tsx
@@ -4,13 +4,15 @@ import { ApiConfiguration } from "../../../src/shared/api"
 import { validateApiConfiguration } from "../utils/validate"
 import { vscode } from "../utils/vscode"
 import ApiOptions from "./ApiOptions"
+import { getKoduSignInUrl } from "../../../src/shared/kodu"

 interface WelcomeViewProps {
 	apiConfiguration?: ApiConfiguration
 	setApiConfiguration: React.Dispatch<React.SetStateAction<ApiConfiguration | undefined>>
+	vscodeUriScheme?: string
 }

-const WelcomeView: React.FC<WelcomeViewProps> = ({ apiConfiguration, setApiConfiguration }) => {
+const WelcomeView: React.FC<WelcomeViewProps> = ({ apiConfiguration, setApiConfiguration, vscodeUriScheme }) => {
 	const [apiErrorMessage, setApiErrorMessage] = useState<string | undefined>(undefined)

 	const disableLetsGoButton = apiErrorMessage != null
@@ -59,7 +61,7 @@ const WelcomeView: React.FC<WelcomeViewProps> = ({ apiConfiguration, setApiConfi
 					}}></i>
 				<span>
 					Explore Claude's capabilities with $10 free credits from{" "}
-					<VSCodeLink href="https://claude-dev.com" style={{ display: "inline" }}>
+					<VSCodeLink href={getKoduSignInUrl(vscodeUriScheme)} style={{ display: "inline" }}>
 						Kodu
 					</VSCodeLink>
 				</span>
@@ -70,6 +72,7 @@ const WelcomeView: React.FC<WelcomeViewProps> = ({ apiConfiguration, setApiConfi
 					apiConfiguration={apiConfiguration}
 					setApiConfiguration={setApiConfiguration}
 					showModelOptions={false}
+					vscodeUriScheme={vscodeUriScheme}
 				/>
 				{apiConfiguration?.apiProvider !== "kodu" && (
 					<VSCodeButton onClick={handleSubmit} disabled={disableLetsGoButton} style={{ marginTop: "3px" }}>