All files / src/components/common NewModelBanner.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Int64Request } from "@shared/proto/index.cline"
import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
import { Megaphone } from "lucide-react"
import { useCallback } from "react"
import { useMount } from "react-use"
import { useExtensionState } from "@/context/ExtensionStateContext"
import { StateServiceClient } from "@/services/grpc-client"
import { getAsVar, VSC_INACTIVE_SELECTION_BACKGROUND } from "@/utils/vscStyles"
import { useApiConfigurationHandlers } from "../settings/utils/useApiConfigurationHandlers"
 
export const CURRENT_MODEL_BANNER_VERSION = 2
 
export const NewModelBanner: React.FC = () => {
	const { openRouterModels, setShowChatModelSelector, refreshOpenRouterModels } = useExtensionState()
	const { handleFieldsChange } = useApiConfigurationHandlers()
 
	// Need to get latest model list in case user hits shortcut button to set model
	useMount(refreshOpenRouterModels)
 
	const handleClose = useCallback((e?: React.MouseEvent) => {
		e?.preventDefault()
		e?.stopPropagation()
 
		// Update state instead of localStorage
		StateServiceClient.updateModelBannerVersion(Int64Request.create({ value: CURRENT_MODEL_BANNER_VERSION })).catch(
			console.error,
		)
	}, [])
 
	const setNewModel = () => {
		const modelId = "anthropic/claude-haiku-4.5"
		// set both plan and act modes to use new model
		handleFieldsChange({
			planModeOpenRouterModelId: modelId,
			actModeOpenRouterModelId: modelId,
			planModeOpenRouterModelInfo: openRouterModels[modelId],
			actModeOpenRouterModelInfo: openRouterModels[modelId],
			planModeApiProvider: "openrouter",
			actModeApiProvider: "openrouter",
		})
 
		setTimeout(() => {
			setShowChatModelSelector(true)
		}, 10)
 
		setTimeout(() => {
			handleClose()
		}, 50)
	}
 
	return (
		<div
			className="px-3 py-2 flex flex-col gap-1 shrink-0 mb-1 relative text-sm mt-1.5 m-4 no-underline transition-colors hover:brightness-120 border-0 cursor-pointer text-left w-auto"
			onClick={setNewModel}
			style={{
				backgroundColor: getAsVar(VSC_INACTIVE_SELECTION_BACKGROUND),
				borderRadius: "3px",
				color: "var(--vscode-foreground)",
			}}>
			<h4 className="m-0 flex items-center gap-2" style={{ paddingRight: "18px" }}>
				<Megaphone className="w-4 h-4" />
				Claude Haiku 4.5
			</h4>
			<p className="m-0">
				Anthropic's fastest model with frontier-level coding intelligence at a fraction of the cost.{" "}
				<span className="text-link cursor-pointer">Try new model →</span>
			</p>
 
			{/* Close button */}
			<VSCodeButton
				appearance="icon"
				data-testid="info-banner-close-button"
				onClick={handleClose}
				style={{ position: "absolute", top: "6px", right: "6px" }}>
				<span className="codicon codicon-close"></span>
			</VSCodeButton>
		</div>
	)
}
 
export default NewModelBanner