Make it clear there's other AI provider options in setup

This commit is contained in:
Will Chen
2025-04-21 14:46:25 -07:00
parent 40132ec5da
commit 531cf23615

View File

@@ -7,8 +7,10 @@ import {
AlertCircle, AlertCircle,
XCircle, XCircle,
Loader2, Loader2,
Settings,
} from "lucide-react"; } from "lucide-react";
import { providerSettingsRoute } from "@/routes/settings/providers/$provider"; import { providerSettingsRoute } from "@/routes/settings/providers/$provider";
import { settingsRoute } from "@/routes/settings";
import { useSettings } from "@/hooks/useSettings"; import { useSettings } from "@/hooks/useSettings";
import { useState, useEffect, useCallback } from "react"; import { useState, useEffect, useCallback } from "react";
import { IpcClient } from "@/ipc/ipc_client"; import { IpcClient } from "@/ipc/ipc_client";
@@ -28,7 +30,7 @@ type NodeInstallStep =
| "continue-processing"; | "continue-processing";
export function SetupBanner() { export function SetupBanner() {
const { capture } = usePostHog(); const posthog = usePostHog();
const navigate = useNavigate(); const navigate = useNavigate();
const { isAnyProviderSetup, loading } = useSettings(); const { isAnyProviderSetup, loading } = useSettings();
const [nodeSystemInfo, setNodeSystemInfo] = useState<NodeSystemInfo | null>( const [nodeSystemInfo, setNodeSystemInfo] = useState<NodeSystemInfo | null>(
@@ -54,21 +56,28 @@ export function SetupBanner() {
}, [checkNode]); }, [checkNode]);
const handleAiSetupClick = () => { const handleAiSetupClick = () => {
capture("setup-flow:ai-provider-setup-click"); posthog.capture("setup-flow:ai-provider-setup:google:click");
navigate({ navigate({
to: providerSettingsRoute.id, to: providerSettingsRoute.id,
params: { provider: "google" }, params: { provider: "google" },
}); });
}; };
const handleOtherProvidersClick = () => {
posthog.capture("setup-flow:ai-provider-setup:other:click");
navigate({
to: settingsRoute.id,
});
};
const handleNodeInstallClick = useCallback(async () => { const handleNodeInstallClick = useCallback(async () => {
capture("setup-flow:start-node-install-click"); posthog.capture("setup-flow:start-node-install-click");
setNodeInstallStep("waiting-for-continue"); setNodeInstallStep("waiting-for-continue");
IpcClient.getInstance().openExternalUrl(nodeSystemInfo!.nodeDownloadUrl); IpcClient.getInstance().openExternalUrl(nodeSystemInfo!.nodeDownloadUrl);
}, [nodeSystemInfo, setNodeInstallStep]); }, [nodeSystemInfo, setNodeInstallStep]);
const finishNodeInstall = useCallback(async () => { const finishNodeInstall = useCallback(async () => {
capture("setup-flow:continue-node-install-click"); posthog.capture("setup-flow:continue-node-install-click");
setNodeInstallStep("continue-processing"); setNodeInstallStep("continue-processing");
await IpcClient.getInstance().reloadEnvPath(); await IpcClient.getInstance().reloadEnvPath();
await checkNode(); await checkNode();
@@ -228,11 +237,6 @@ export function SetupBanner() {
onClick={handleAiSetupClick} onClick={handleAiSetupClick}
role="button" role="button"
tabIndex={isNodeSetupComplete ? 0 : -1} tabIndex={isNodeSetupComplete ? 0 : -1}
onKeyDown={(e) =>
isNodeSetupComplete &&
e.key === "Enter" &&
handleAiSetupClick()
}
> >
<div className="flex items-center justify-between gap-3"> <div className="flex items-center justify-between gap-3">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@@ -252,6 +256,30 @@ export function SetupBanner() {
<ChevronRight className="w-4 h-4 text-blue-600 dark:text-blue-400" /> <ChevronRight className="w-4 h-4 text-blue-600 dark:text-blue-400" />
</div> </div>
</div> </div>
<div
className="mt-2 p-3 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700 rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800/70 transition-colors"
onClick={handleOtherProvidersClick}
role="button"
tabIndex={isNodeSetupComplete ? 0 : -1}
>
<div className="flex items-center justify-between gap-3">
<div className="flex items-center gap-2">
<div className="bg-gray-100 dark:bg-gray-700 p-1.5 rounded-full">
<Settings className="w-4 h-4 text-gray-600 dark:text-gray-400" />
</div>
<div>
<h4 className="font-medium text-sm text-gray-800 dark:text-gray-300">
Setup other AI providers
</h4>
<p className="text-xs text-gray-600 dark:text-gray-400">
OpenAI, Anthropic, OpenRouter and more
</p>
</div>
</div>
<ChevronRight className="w-4 h-4 text-gray-600 dark:text-gray-400" />
</div>
</div>
</AccordionContent> </AccordionContent>
</AccordionItem> </AccordionItem>
</Accordion> </Accordion>