Added dropdown selector for ibm endpoint

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

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { LabelInput } from "@/components/label-input";
+import { LabelWrapper } from "@/components/label-wrapper";
 import IBMLogo from "@/components/logo/ibm-logo";
 import { useDebouncedValue } from "@/lib/debounce";
 import type { OnboardingVariables } from "../../api/mutations/useOnboardingMutation";
@@ -7,6 +8,7 @@ import { useGetIBMModelsQuery } from "../../api/queries/useGetModelsQuery";
 import { useModelSelection } from "../hooks/useModelSelection";
 import { useUpdateSettings } from "../hooks/useUpdateSettings";
 import { AdvancedOnboarding } from "./advanced";
+import { ModelSelector } from "./model-selector";
 
 export function IBMOnboarding({
   setSettings,
@@ -17,10 +19,42 @@ export function IBMOnboarding({
   sampleDataset: boolean;
   setSampleDataset: (dataset: boolean) => void;
 }) {
-  const [endpoint, setEndpoint] = useState("");
+  const [endpoint, setEndpoint] = useState("https://us-south.ml.cloud.ibm.com");
   const [apiKey, setApiKey] = useState("");
   const [projectId, setProjectId] = useState("");
 
+  const options = [
+    {
+      value: "https://us-south.ml.cloud.ibm.com",
+      label: "https://us-south.ml.cloud.ibm.com",
+      default: true,
+    },
+    {
+      value: "https://eu-de.ml.cloud.ibm.com",
+      label: "https://eu-de.ml.cloud.ibm.com",
+      default: false,
+    },
+    {
+      value: "https://eu-gb.ml.cloud.ibm.com",
+      label: "https://eu-gb.ml.cloud.ibm.com",
+      default: false,
+    },
+    {
+      value: "https://au-syd.ml.cloud.ibm.com",
+      label: "https://au-syd.ml.cloud.ibm.com",
+      default: false,
+    },
+    {
+      value: "https://jp-tok.ml.cloud.ibm.com",
+      label: "https://jp-tok.ml.cloud.ibm.com",
+      default: false,
+    },
+    {
+      value: "https://ca-tor.ml.cloud.ibm.com",
+      label: "https://ca-tor.ml.cloud.ibm.com",
+      default: false,
+    },
+  ];
   const debouncedEndpoint = useDebouncedValue(endpoint, 500);
   const debouncedApiKey = useDebouncedValue(apiKey, 500);
   const debouncedProjectId = useDebouncedValue(projectId, 500);
@@ -68,15 +102,21 @@ export function IBMOnboarding({
   return (
     <>
       <div className="space-y-4">
-        <LabelInput
+        <LabelWrapper
           label="watsonx.ai API Endpoint"
           helperText="The API endpoint for your watsonx.ai account."
           id="api-endpoint"
           required
-          placeholder="https://us-south.ml.cloud.ibm.com"
+        >
-          value={endpoint}
+          <ModelSelector
-          onChange={(e) => setEndpoint(e.target.value)}
+            options={options}
-        />
+            value={endpoint}
+            onValueChange={setEndpoint}
+            searchPlaceholder="Search endpoint..."
+            noOptionsPlaceholder="No endpoints available"
+            placeholder="Select endpoint..."
+          />
+        </LabelWrapper>
         <LabelInput
           label="IBM API key"
           helperText="The API key for your watsonx.ai account."

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

@@ -21,6 +21,9 @@ export function ModelSelector({
   value,
   onValueChange,
   icon,
+  placeholder = "Select model...",
+  searchPlaceholder = "Search model...",
+  noOptionsPlaceholder = "No models available",
 }: {
   options: {
     value: string;
@@ -29,6 +32,9 @@ export function ModelSelector({
   }[];
   value: string;
   icon?: React.ReactNode;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  noOptionsPlaceholder?: string;
   onValueChange: (value: string) => void;
 }) {
   const [open, setOpen] = useState(false);
@@ -50,7 +56,7 @@ export function ModelSelector({
         >
           {value ? (
             <div className="flex items-center gap-2">
-              <div className="w-4 h-4">{icon}</div>
+              {icon && <div className="w-4 h-4">{icon}</div>}
               {options.find((framework) => framework.value === value)?.label}
               {options.find((framework) => framework.value === value)
                 ?.default && (
@@ -60,18 +66,18 @@ export function ModelSelector({
               )}
             </div>
           ) : options.length === 0 ? (
-            "No models available"
+            noOptionsPlaceholder
           ) : (
-            "Select model..."
+            placeholder
           )}
           <ChevronsUpDownIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
       <PopoverContent align="start" className="w-[400px] p-0">
         <Command>
-          <CommandInput placeholder="Search model..." />
+          <CommandInput placeholder={searchPlaceholder} />
           <CommandList>
-            <CommandEmpty>No model found.</CommandEmpty>
+            <CommandEmpty>{noOptionsPlaceholder}</CommandEmpty>
             <CommandGroup>
               {options.map((option) => (
                 <CommandItem