added advanced part of onboarding

frontend/components/label-wrapper.tsx

@@ -1,43 +1,54 @@
 import { Info } from "lucide-react";
-import {
+import { cn } from "@/lib/utils";
-  DropdownMenu,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Input } from "./ui/input";
 import { Label } from "./ui/label";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
 
 export function LabelWrapper({
   label,
+  description,
   helperText,
   id,
   required,
+  flex,
   children,
 }: {
   label: string;
-  helperText: string;
+  description?: string;
+  helperText?: string;
   id: string;
-  required: boolean;
+  required?: boolean;
+  flex?: boolean;
   children: React.ReactNode;
 }) {
   return (
-    <div className="space-y-2">
+    <div className="flex w-full items-center justify-between">
-      <Label
+      <div
-        htmlFor={id}
+        className={cn(
-        className="text-mmd font-medium flex items-center gap-1"
+          "flex flex-1 flex-col items-start",
-      >
+          flex ? "gap-3" : "gap-2",
-        {label}
-        {required && <span className="text-red-500">*</span>}
-        {helperText && (
-          <Tooltip>
-            <TooltipTrigger>
-              <Info className="w-3.5 h-3.5 text-muted-foreground" />
-            </TooltipTrigger>
-            <TooltipContent>{helperText}</TooltipContent>
-          </Tooltip>
         )}
-      </Label>
+      >
-      <div className="relative">{children}</div>
+        <Label
+          htmlFor={id}
+          className="!text-mmd font-medium flex items-center gap-1"
+        >
+          {label}
+          {required && <span className="text-red-500">*</span>}
+          {helperText && (
+            <Tooltip>
+              <TooltipTrigger>
+                <Info className="w-3.5 h-3.5 text-muted-foreground" />
+              </TooltipTrigger>
+              <TooltipContent>{helperText}</TooltipContent>
+            </Tooltip>
+          )}
+        </Label>
+        {!flex && <div className="relative w-full">{children}</div>}
+        {description && (
+          <p className="text-mmd text-muted-foreground">{description}</p>
+        )}
+      </div>
+      {flex && <div className="relative">{children}</div>}
     </div>
   );
 }

frontend/src/app/onboarding/advanced.tsx

@@ -1,7 +1,73 @@
+import { useState } from "react";
+import { LabelWrapper } from "@/components/label-wrapper";
+import OllamaLogo from "@/components/logo/ollama-logo";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Separator } from "@/components/ui/separator";
+import { Switch } from "@/components/ui/switch";
+import { ModelSelector } from "./model-selector";
+
 export function AdvancedOnboarding({
   modelProvider,
 }: {
   modelProvider: string;
 }) {
-  return <div>AdvancedOnboarding</div>;
+  const [model, setModel] = useState("");
+  const options = [
+    { value: "gpt-4", label: "GPT-4" },
+    { value: "gpt-4-turbo", label: "GPT-4 Turbo" },
+    { value: "gpt-3.5-turbo", label: "GPT-3.5 Turbo" },
+    { value: "claude-3-opus", label: "Claude 3 Opus" },
+    { value: "claude-3-sonnet", label: "Claude 3 Sonnet" },
+  ];
+  return (
+    <Accordion type="single" collapsible>
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Advanced settings</AccordionTrigger>
+        <AccordionContent className="space-y-6">
+          <LabelWrapper
+            label="Embedding model"
+            description="It’s recommended that you use XYZ, ABC, or DEF models for best performance."
+            helperText="The embedding model for your Ollama server."
+            id="embedding-model"
+            required={true}
+          >
+            <ModelSelector
+              options={options}
+              icon={<OllamaLogo className="w-4 h-4" />}
+              value={model}
+              onValueChange={setModel}
+            />
+          </LabelWrapper>
+          <LabelWrapper
+            label="Language model"
+            description="It’s recommended that you use XYZ, ABC, or DEF models for best performance."
+            helperText="The embedding model for your Ollama server."
+            id="embedding-model"
+            required={true}
+          >
+            <ModelSelector
+              options={options}
+              icon={<OllamaLogo className="w-4 h-4" />}
+              value={model}
+              onValueChange={setModel}
+            />
+          </LabelWrapper>
+          <Separator />
+          <LabelWrapper
+            label="Sample dataset"
+            description="Ingest two small PDFs"
+            id="sample-dataset"
+            flex
+          >
+            <Switch />
+          </LabelWrapper>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
 }

frontend/src/app/onboarding/model-selector.tsx

@@ -39,10 +39,10 @@ export function ModelSelector({
           variant="outline"
           role="combobox"
           aria-expanded={open}
-          className="w-full gap-2 justify-between"
+          className="w-full gap-2 justify-between font-normal text-sm"
         >
           {value ? (
-            <div className="flex items-center gap-2 font-normal text-sm">
+            <div className="flex items-center gap-2">
               <div className="w-4 h-4">{icon}</div>
               {options.find((framework) => framework.value === value)?.label}
               {options.find((framework) => framework.value === value)

frontend/src/app/onboarding/page.tsx

@@ -1,20 +1,25 @@
 "use client";
 
 import { Suspense, useState } from "react";
+import { toast } from "sonner";
 import { useUpdateFlowSettingMutation } from "@/app/api/mutations/useUpdateFlowSettingMutation";
 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";
 import { ProtectedRoute } from "@/components/protected-route";
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  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";
@@ -36,10 +41,20 @@ function OnboardingPage() {
       console.log("Setting updated successfully");
     },
     onError: (error) => {
-      console.error("Failed to update setting:", error.message);
+      toast.error("Failed to update settings", {
+        description: error.message,
+      });
     },
   });
 
+  const handleComplete = () => {
+    updateFlowSettingMutation.mutate({
+      llm_model: settings.agent?.llm_model,
+      embedding_model: settings.ingest?.embedding_model,
+      system_prompt: settings.agent?.system_prompt,
+    });
+  };
+
   return (
     <div
       className="min-h-dvh relative flex gap-5 flex-col items-center justify-center bg-background p-4"
@@ -92,6 +107,11 @@ function OnboardingPage() {
               </TabsContent>
             </CardContent>
           </Tabs>
+          <CardFooter className="flex justify-end">
+            <Button size="sm" onClick={handleComplete}>
+              Complete
+            </Button>
+          </CardFooter>
         </Card>
       </div>
     </div>