Show Kodu banner in settings

webview-ui/src/components/SettingsView.tsx

@@ -92,6 +92,34 @@ const SettingsView = ({
 			</div>
 			<div
 				style={{ flexGrow: 1, overflowY: "scroll", paddingRight: 8, display: "flex", flexDirection: "column" }}>
+				{apiConfiguration?.koduApiKey === undefined && (
+					<div
+						style={{
+							display: "flex",
+							alignItems: "center",
+							backgroundColor: "var(--vscode-editor-inactiveSelectionBackground)",
+							color: "var(--vscode-editor-foreground)",
+							padding: "6px 8px",
+							borderRadius: "3px",
+							margin: "0 0 8px 0px",
+							fontSize: "12px",
+						}}>
+						<i
+							className="codicon codicon-info"
+							style={{
+								marginRight: 6,
+								fontSize: 16,
+								color: "var(--vscode-infoIcon-foreground)",
+							}}></i>
+						<span>
+							<VSCodeLink
+								onClick={() => vscode.postMessage({ type: "didClickKoduSignIn" })}
+								style={{ display: "inline" }}>
+								Claim $10 free credits from Kodu
+							</VSCodeLink>
+						</span>
+					</div>
+				)}
 				<div style={{ marginBottom: 5 }}>
 					<ApiOptions
 						apiConfiguration={apiConfiguration}