All files / src/components/common TelemetryBanner.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { TelemetrySettingEnum, TelemetrySettingRequest } from "@shared/proto/cline/state"
import { useCallback } from "react"
import { useExtensionState } from "@/context/ExtensionStateContext"
import { StateServiceClient } from "@/services/grpc-client"
 
const telemetryRequest = TelemetrySettingRequest.create({
	setting: TelemetrySettingEnum.ENABLED,
})
 
export const TelemetryBanner: React.FC = () => {
	const { navigateToSettings } = useExtensionState()
 
	const handleClose = useCallback(() => {
		StateServiceClient.updateTelemetrySetting(telemetryRequest).catch(console.error)
	}, [])
 
	const handleOpenSettings = useCallback(() => {
		handleClose()
		navigateToSettings()
	}, [handleClose, navigateToSettings])
 
	return (
		<div className="bg-banner-background text-banner-foreground px-3 py-2 flex flex-col gap-1 shrink-0 mb-1 relative text-sm m-4">
			<h3 className="m-0">Help Improve AI-Hydro</h3>
			<i>(and access experimental features)</i>
			<p className="m-0">
				AI-Hydro collects error and usage data to help us fix bugs and improve the extension. No code, prompts, or
				personal information is ever sent.
			</p>
			<p className="m-0">
				<span>You can turn this setting off in </span>
				<span className="text-link cursor-pointer" onClick={handleOpenSettings}>
					settings
				</span>
				.
			</p>
 
			{/* Close button */}
			<button
				aria-label="Close banner and enable telemetry"
				className="absolute top-3 right-3 opacity-70 hover:opacity-100 cursor-pointer border-0 bg-transparent p-0 text-inherit"
				onClick={handleClose}
				type="button">
				✕
			</button>
		</div>
	)
}
 
export default TelemetryBanner