gmakstutis/openrag
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

Added onboarding for each provider

Browse source
This commit is contained in:
Lucas Oliveira 2025-09-18 15:33:07 -03:00
parent 675ed84e2f
commit 327279630f
4 changed files with 142 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
frontend/src/app/onboarding/ibm-onboarding.tsx Normal file
View file

@ -0,0 +1,38 @@
import { LabelInput } from "@/components/label-input";
import type { Settings } from "../api/queries/useGetSettingsQuery";
import { AdvancedOnboarding } from "./advanced";
export function IBMOnboarding({
settings,
setSettings,
}: {
settings: Settings;
setSettings: (settings: Settings) => void;
}) {
return (
<>
<LabelInput
label="watsonx.ai API Endpoint"
helperText="The API endpoint for your watsonx.ai account."
id="api-endpoint"
required
placeholder="https://..."
/>
<LabelInput
label="IBM API key"
helperText="The API key for your watsonx.ai account."
id="api-key"
required
placeholder="sk-..."
/>
<LabelInput
label="IBM Project ID"
helperText="The project ID for your watsonx.ai account."
id="project-id"
required
placeholder="..."
/>
<AdvancedOnboarding modelProvider="watsonx" />
</>
);
}

25
frontend/src/app/onboarding/ollama-onboarding.tsx Normal file
View file

@ -0,0 +1,25 @@
import { LabelInput } from "@/components/label-input";
import type { Settings } from "../api/queries/useGetSettingsQuery";
import { AdvancedOnboarding } from "./advanced";
export function OllamaOnboarding({
settings,
setSettings,
}: {
settings: Settings;
setSettings: (settings: Settings) => void;
}) {
return (
<>
<LabelInput
label="Ollama Endpoint"
helperText="The endpoint for your Ollama server."
id="api-endpoint"
required
placeholder="http://..."
/>
<AdvancedOnboarding modelProvider="ollama" />
</>
);
}

24
frontend/src/app/onboarding/openai-onboarding.tsx Normal file
View file

@ -0,0 +1,24 @@
import { LabelInput } from "@/components/label-input";
import type { Settings } from "../api/queries/useGetSettingsQuery";
import { AdvancedOnboarding } from "./advanced";
export function OpenAIOnboarding({
settings,
setSettings,
}: {
settings: Settings;
setSettings: (settings: Settings) => void;
}) {
return (
<>
<LabelInput
label="OpenAI API key"
helperText="The API key for your OpenAI account."
id="api-key"
required
placeholder="sk-..."
/>
<AdvancedOnboarding modelProvider="openai" />
</>
);
}

93
frontend/src/app/onboarding/page.tsx
View file

@ -2,7 +2,11 @@
import { Suspense, useState } from "react";
import { useUpdateFlowSettingMutation } from "@/app/api/mutations/useUpdateFlowSettingMutation";
import { useGetSettingsQuery } from "@/app/api/queries/useGetSettingsQuery";
import {
type Settings,
useGetSettingsQuery,
} from "@/app/api/queries/useGetSettingsQuery";
import { LabelInput } from "@/components/label-input";
import IBMLogo from "@/components/logo/ibm-logo";
import OllamaLogo from "@/components/logo/ollama-logo";
import OpenAILogo from "@/components/logo/openai-logo";
@ -11,16 +15,21 @@ import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useAuth } from "@/contexts/auth-context";
import { AdvancedOnboarding } from "./advanced";
import { IBMOnboarding } from "./ibm-onboarding";
import { OllamaOnboarding } from "./ollama-onboarding";
import { OpenAIOnboarding } from "./openai-onboarding";
function OnboardingPage() {
const { isAuthenticated } = useAuth();
const [modelProvider, setModelProvider] = useState<string>("openai");
// Fetch settings using React Query
const { data: settings = {} } = useGetSettingsQuery({
const { data: settingsDb = {} } = useGetSettingsQuery({
enabled: isAuthenticated,
});
const [settings, setSettings] = useState<Settings>(settingsDb);
// Mutations
const updateFlowSettingMutation = useUpdateFlowSettingMutation({
onSuccess: () => {
@ -40,43 +49,51 @@ function OnboardingPage() {
backgroundPosition: "center",
}}
>
<div className="flex flex-col items-center justify-center gap-4">
<h1 className="text-2xl font-medium font-chivo">
Configure your models
</h1>
<p className="text-sm text-muted-foreground">[description of task]</p>
<div className="flex flex-col items-center gap-5 min-h-[480px] w-full">
<div className="flex flex-col items-center justify-center gap-4">
<h1 className="text-2xl font-medium font-chivo">
Configure your models
</h1>
<p className="text-sm text-muted-foreground">[description of task]</p>
</div>
<Card className="w-full max-w-[580px]">
<Tabs defaultValue={modelProvider} onValueChange={setModelProvider}>
<CardHeader>
<TabsList>
<TabsTrigger value="openai">
<OpenAILogo className="w-4 h-4" />
OpenAI
</TabsTrigger>
<TabsTrigger value="watsonx">
<IBMLogo className="w-4 h-4" />
IBM
</TabsTrigger>
<TabsTrigger value="ollama">
<OllamaLogo className="w-4 h-4" />
Ollama
</TabsTrigger>
</TabsList>
</CardHeader>
<CardContent>
<TabsContent value="openai">
<OpenAIOnboarding
settings={settings}
setSettings={setSettings}
/>
</TabsContent>
<TabsContent value="watsonx">
<IBMOnboarding settings={settings} setSettings={setSettings} />
</TabsContent>
<TabsContent value="ollama">
<OllamaOnboarding
settings={settings}
setSettings={setSettings}
/>
</TabsContent>
</CardContent>
</Tabs>
</Card>
</div>
<Card className="w-full max-w-[580px]">
<Tabs defaultValue={modelProvider} onValueChange={setModelProvider}>
<CardHeader>
<TabsList>
<TabsTrigger value="openai">
<OpenAILogo className="w-4 h-4" />
OpenAI
</TabsTrigger>
<TabsTrigger value="watsonx">
<IBMLogo className="w-4 h-4" />
IBM
</TabsTrigger>
<TabsTrigger value="ollama">
<OllamaLogo className="w-4 h-4" />
Ollama
</TabsTrigger>
</TabsList>
</CardHeader>
<CardContent>
<TabsContent value="openai">
<AdvancedOnboarding modelProvider={modelProvider} />
</TabsContent>
<TabsContent value="watsonx">
<AdvancedOnboarding modelProvider={modelProvider} />
</TabsContent>
<TabsContent value="ollama">
<AdvancedOnboarding modelProvider={modelProvider} />
</TabsContent>
</CardContent>
</Tabs>
</Card>
</div>
);
}