kunthawat/moreminimore-vibe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Prep for custom models: support reading custom providers (#131)

Browse Source
This commit is contained in:
Will Chen
2025-05-12 14:52:48 -07:00
committed by GitHub
parent 79a2b5a906
commit cd7eaa8ece
23 changed files with 901 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/components/ProviderSettings.tsx
View File

@@ -1,4 +1,3 @@
import { PROVIDERS } from "@/constants/models";
import {
Card,
CardHeader,
@@ -7,42 +6,84 @@ import {
} from "@/components/ui/card";
import { useNavigate } from "@tanstack/react-router";
import { providerSettingsRoute } from "@/routes/settings/providers/$provider";
import type { ModelProvider } from "@/lib/schemas";
import { useSettings } from "@/hooks/useSettings";
import type { LanguageModelProvider } from "@/ipc/ipc_types";
import { useLanguageModelProviders } from "@/hooks/useLanguageModelProviders";
import { GiftIcon } from "lucide-react";
import { Skeleton } from "./ui/skeleton";
import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
import { AlertTriangle } from "lucide-react";
export function ProviderSettingsGrid() {
const navigate = useNavigate();
const handleProviderClick = (provider: ModelProvider) => {
const {
data: providers,
isLoading,
error,
isProviderSetup,
} = useLanguageModelProviders();
const handleProviderClick = (providerId: string) => {
navigate({
to: providerSettingsRoute.id,
params: { provider },
params: { provider: providerId },
});
};
const { isProviderSetup } = useSettings();
if (isLoading) {
return (
<div className="p-6">
<h2 className="text-2xl font-bold mb-6">AI Providers</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{[1, 2, 3, 4, 5].map((i) => (
<Card key={i} className="border-border">
<CardHeader className="p-4">
<Skeleton className="h-6 w-3/4 mb-2" />
<Skeleton className="h-4 w-1/2" />
</CardHeader>
</Card>
))}
</div>
</div>
);
}
if (error) {
return (
<div className="p-6">
<h2 className="text-2xl font-bold mb-6">AI Providers</h2>
<Alert variant="destructive">
<AlertTriangle className="h-4 w-4" />
<AlertTitle>Error</AlertTitle>
<AlertDescription>
Failed to load AI providers: {error.message}
</AlertDescription>
</Alert>
</div>
);
}
return (
<div className="p-6">
<h2 className="text-2xl font-bold mb-6">AI Providers</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{Object.entries(PROVIDERS).map(([key, provider]) => {
{providers?.map((provider: LanguageModelProvider) => {
return (
<Card
key={key}
key={provider.id}
className="cursor-pointer transition-all hover:shadow-md border-border"
onClick={() => handleProviderClick(key as ModelProvider)}
onClick={() => handleProviderClick(provider.id)}
>
<CardHeader className="p-4">
<CardTitle className="text-xl flex items-center justify-between">
{provider.displayName}
{isProviderSetup(key) ? (
{provider.name}
{isProviderSetup(provider.id) ? (
<span className="ml-3 text-sm font-medium text-green-500 bg-green-50 dark:bg-green-900/30 border border-green-500/50 dark:border-green-500/50 px-2 py-1 rounded-full">
Ready
</span>
) : (
<span className="text-sm text-gray-500 bg-gray-50 dark:bg-gray-900 dark:text-gray-300 px-2 py-1 rounded-full">
<span className="text-sm text-gray-500 bg-gray-50 dark:bg-gray-900 dark:text-gray-300 px-2 py-1 rounded-full">
Needs Setup
</span>
)}

6
src/components/SetupBanner.tsx
View File

@@ -11,7 +11,7 @@ import {
} from "lucide-react";
import { providerSettingsRoute } from "@/routes/settings/providers/$provider";
import { settingsRoute } from "@/routes/settings";
import { useSettings } from "@/hooks/useSettings";
import { useState, useEffect, useCallback } from "react";
import { IpcClient } from "@/ipc/ipc_client";
import {
@@ -24,6 +24,7 @@ import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { NodeSystemInfo } from "@/ipc/ipc_types";
import { usePostHog } from "posthog-js/react";
import { useLanguageModelProviders } from "@/hooks/useLanguageModelProviders";
type NodeInstallStep =
| "install"
| "waiting-for-continue"
@@ -33,7 +34,8 @@ type NodeInstallStep =
export function SetupBanner() {
const posthog = usePostHog();
const navigate = useNavigate();
const { isAnyProviderSetup, loading } = useSettings();
const { isAnyProviderSetup, isLoading: loading } =
useLanguageModelProviders();
const [nodeSystemInfo, setNodeSystemInfo] = useState<NodeSystemInfo | null>(
null,
);

7
src/components/chat/HomeChatInput.tsx
View File

@@ -20,7 +20,7 @@ export function HomeChatInput({
const posthog = usePostHog();
const [inputValue, setInputValue] = useAtom(homeChatInputValueAtom);
const textareaRef = useRef<HTMLTextAreaElement>(null);
const { settings, updateSettings, isAnyProviderSetup } = useSettings();
const { settings, updateSettings } = useSettings();
const { isStreaming } = useStreamChat({
hasChatId: false,
}); // eslint-disable-line @typescript-eslint/no-unused-vars
@@ -137,10 +137,7 @@ export function HomeChatInput({
) : (
<button
onClick={handleCustomSubmit}
disabled={
(!inputValue.trim() && attachments.length === 0) ||
!isAnyProviderSetup()
}
disabled={!inputValue.trim() && attachments.length === 0}
className="px-2 py-2 mt-1 mr-2 hover:bg-(--background-darkest) text-(--sidebar-accent-fg) rounded-lg disabled:opacity-50"
title="Start new chat"
>

6
src/components/chat/MessagesList.tsx
View File

@@ -3,7 +3,7 @@ import type { Message } from "@/ipc/ipc_types";
import { forwardRef, useState } from "react";
import ChatMessage from "./ChatMessage";
import { SetupBanner } from "../SetupBanner";
import { useSettings } from "@/hooks/useSettings";
import { useStreamChat } from "@/hooks/useStreamChat";
import { selectedChatIdAtom } from "@/atoms/chatAtoms";
import { useAtomValue, useSetAtom } from "jotai";
@@ -14,7 +14,7 @@ import { selectedAppIdAtom } from "@/atoms/appAtoms";
import { showError, showWarning } from "@/lib/toast";
import { IpcClient } from "@/ipc/ipc_client";
import { chatMessagesAtom } from "@/atoms/chatAtoms";
import { useLanguageModelProviders } from "@/hooks/useLanguageModelProviders";
interface MessagesListProps {
messages: Message[];
messagesEndRef: React.RefObject<HTMLDivElement | null>;
@@ -25,7 +25,7 @@ export const MessagesList = forwardRef<HTMLDivElement, MessagesListProps>(
const appId = useAtomValue(selectedAppIdAtom);
const { versions, revertVersion } = useVersions(appId);
const { streamMessage, isStreaming } = useStreamChat();
const { isAnyProviderSetup } = useSettings();
const { isAnyProviderSetup } = useLanguageModelProviders();
const setMessages = useSetAtom(chatMessagesAtom);
const [isUndoLoading, setIsUndoLoading] = useState(false);

110
src/components/settings/ProviderSettingsPage.tsx
View File

@@ -9,9 +9,10 @@ import {
Settings as SettingsIcon,
GiftIcon,
Trash2,
AlertTriangle,
} from "lucide-react";
import { useSettings } from "@/hooks/useSettings";
import { PROVIDER_TO_ENV_VAR, PROVIDERS } from "@/constants/models";
import { useLanguageModelProviders } from "@/hooks/useLanguageModelProviders";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Skeleton } from "@/components/ui/skeleton";
import {
@@ -47,6 +48,13 @@ export function ProviderSettingsPage({ provider }: ProviderSettingsPageProps) {
updateSettings,
} = useSettings();
// Fetch all providers
const {
data: allProviders,
isLoading: providersLoading,
error: providersError,
} = useLanguageModelProviders();
const isDyad = provider === "auto";
const [apiKeyInput, setApiKeyInput] = useState("");
@@ -54,16 +62,21 @@ export function ProviderSettingsPage({ provider }: ProviderSettingsPageProps) {
const [saveError, setSaveError] = useState<string | null>(null);
const router = useRouter();
// Find provider details
const providerInfo = PROVIDERS[provider as keyof typeof PROVIDERS];
const providerDisplayName =
providerInfo?.displayName ||
provider.charAt(0).toUpperCase() + provider.slice(1);
const providerWebsiteUrl = providerInfo?.websiteUrl;
const hasFreeTier = providerInfo?.hasFreeTier;
// Find the specific provider data from the fetched list
const providerData = allProviders?.find((p) => p.id === provider);
const envVarName = PROVIDER_TO_ENV_VAR[provider];
const envApiKey = envVars[envVarName];
// Use fetched data (or defaults for Dyad)
const providerDisplayName = isDyad
? "Dyad"
: (providerData?.name ?? "Unknown Provider");
const providerWebsiteUrl = isDyad
? "https://academy.dyad.sh/settings"
: providerData?.websiteUrl;
const hasFreeTier = isDyad ? false : providerData?.hasFreeTier;
const envVarName = isDyad ? undefined : providerData?.envVarName;
const envApiKey = envVarName ? envVars[envVarName] : undefined;
// Use provider ID (which is the 'provider' prop)
const userApiKey = settings?.providerSettings?.[provider]?.apiKey?.value;
// --- Configuration Logic --- Updated Priority ---
@@ -169,6 +182,81 @@ export function ProviderSettingsPage({ provider }: ProviderSettingsPageProps) {
}
}, [apiKeyInput]);
// --- Loading State for Providers --- (Added)
if (providersLoading) {
return (
<div className="min-h-screen px-8 py-4">
<div className="max-w-4xl mx-auto">
<Skeleton className="h-8 w-24 mb-4" /> {/* Back button */}
<Skeleton className="h-10 w-1/2 mb-6" /> {/* Title */}
<Skeleton className="h-10 w-48 mb-4" /> {/* Get Key button */}
<div className="space-y-4">
<Skeleton className="h-20 w-full" />
<Skeleton className="h-20 w-full" />
</div>
</div>
</div>
);
}
// --- Error State for Providers --- (Added)
if (providersError) {
return (
<div className="min-h-screen px-8 py-4">
<div className="max-w-4xl mx-auto">
<Button
onClick={() => router.history.back()}
variant="outline"
size="sm"
className="flex items-center gap-2 mb-4 bg-(--background-lightest) py-5"
>
<ArrowLeft className="h-4 w-4" />
Go Back
</Button>
<h1 className="text-3xl font-bold text-gray-900 dark:text-white mr-3 mb-6">
Configure Provider
</h1>
<Alert variant="destructive">
<AlertTriangle className="h-4 w-4" />
<AlertTitle>Error Loading Provider Details</AlertTitle>
<AlertDescription>
Could not load provider data: {providersError.message}
</AlertDescription>
</Alert>
</div>
</div>
);
}
// Handle case where provider is not found (e.g., invalid ID in URL)
if (!providerData && !isDyad) {
return (
<div className="min-h-screen px-8 py-4">
<div className="max-w-4xl mx-auto">
<Button
onClick={() => router.history.back()}
variant="outline"
size="sm"
className="flex items-center gap-2 mb-4 bg-(--background-lightest) py-5"
>
<ArrowLeft className="h-4 w-4" />
Go Back
</Button>
<h1 className="text-3xl font-bold text-gray-900 dark:text-white mr-3 mb-6">
Provider Not Found
</h1>
<Alert variant="destructive">
<AlertTriangle className="h-4 w-4" />
<AlertTitle>Error</AlertTitle>
<AlertDescription>
The provider with ID "{provider}" could not be found.
</AlertDescription>
</Alert>
</div>
</div>
);
}
return (
<div className="min-h-screen px-8 py-4">
<div className="max-w-4xl mx-auto">
@@ -322,7 +410,7 @@ export function ProviderSettingsPage({ provider }: ProviderSettingsPageProps) {
</AccordionContent>
</AccordionItem>
{!isDyad && (
{!isDyad && envVarName && (
<AccordionItem
value="env-key"
className="border rounded-lg px-4 bg-(--background-lightest)"