Added onboarding for each provider

frontend/src/app/onboarding/ibm-onboarding.tsx

@@ -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" />
+    </>
+  );
+}

frontend/src/app/onboarding/ollama-onboarding.tsx

@@ -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" />
+    </>
+  );
+}

frontend/src/app/onboarding/openai-onboarding.tsx

@@ -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" />
+    </>
+  );
+}

frontend/src/app/onboarding/page.tsx

@@ -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">
+      <div className="flex flex-col items-center gap-5 min-h-[480px] w-full">
-        <h1 className="text-2xl font-medium font-chivo">
+        <div className="flex flex-col items-center justify-center gap-4">
-          Configure your models
+          <h1 className="text-2xl font-medium font-chivo">
-        </h1>
+            Configure your models
-        <p className="text-sm text-muted-foreground">[description of task]</p>
+          </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>
   );
 }