Merge pull request #592 from langflow-ai/fix-env-tui-persist

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

@@ -3,6 +3,12 @@ import { useEffect, useState } from "react";
 import { LabelInput } from "@/components/label-input";
 import { LabelWrapper } from "@/components/label-wrapper";
 import IBMLogo from "@/components/icons/ibm-logo";
+import { Switch } from "@/components/ui/switch";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { useDebouncedValue } from "@/lib/debounce";
 import type { OnboardingVariables } from "../../api/mutations/useOnboardingMutation";
 import { useGetIBMModelsQuery } from "../../api/queries/useGetModelsQuery";
@@ -18,6 +24,9 @@ export function IBMOnboarding({
   setSampleDataset,
   setIsLoadingModels,
   alreadyConfigured = false,
+  existingEndpoint,
+  existingProjectId,
+  hasEnvApiKey = false,
 }: {
   isEmbedding?: boolean;
   setSettings: Dispatch<SetStateAction<OnboardingVariables>>;
@@ -25,12 +34,20 @@ export function IBMOnboarding({
   setSampleDataset: (dataset: boolean) => void;
   setIsLoadingModels?: (isLoading: boolean) => void;
   alreadyConfigured?: boolean;
+  existingEndpoint?: string;
+  existingProjectId?: string;
+  hasEnvApiKey?: boolean;
 }) {
   const [endpoint, setEndpoint] = useState(
-    alreadyConfigured ? "" : "https://us-south.ml.cloud.ibm.com",
+    alreadyConfigured ? "" : (existingEndpoint || "https://us-south.ml.cloud.ibm.com"),
   );
   const [apiKey, setApiKey] = useState("");
-  const [projectId, setProjectId] = useState("");
+  const [getFromEnv, setGetFromEnv] = useState(
+    hasEnvApiKey && !alreadyConfigured,
+  );
+  const [projectId, setProjectId] = useState(
+    alreadyConfigured ? "" : (existingProjectId || ""),
+  );
 
   const options = [
     {
@@ -76,7 +93,7 @@ export function IBMOnboarding({
   } = useGetIBMModelsQuery(
     {
       endpoint: debouncedEndpoint ? debouncedEndpoint : undefined,
-      apiKey: debouncedApiKey ? debouncedApiKey : undefined,
+      apiKey: getFromEnv ? "" : (debouncedApiKey ? debouncedApiKey : undefined),
       projectId: debouncedProjectId ? debouncedProjectId : undefined,
     },
     {
@@ -84,6 +101,7 @@ export function IBMOnboarding({
         !!debouncedEndpoint ||
         !!debouncedApiKey ||
         !!debouncedProjectId ||
+        getFromEnv ||
         alreadyConfigured,
     },
   );
@@ -97,6 +115,16 @@ export function IBMOnboarding({
     languageModels,
     embeddingModels,
   } = useModelSelection(modelsData, isEmbedding);
+
+  const handleGetFromEnvChange = (fromEnv: boolean) => {
+    setGetFromEnv(fromEnv);
+    if (fromEnv) {
+      setApiKey("");
+    }
+    setEmbeddingModel?.("");
+    setLanguageModel?.("");
+  };
+
   const handleSampleDatasetChange = (dataset: boolean) => {
     setSampleDataset(dataset);
   };
@@ -169,34 +197,78 @@ export function IBMOnboarding({
             </p>
           )}
         </div>
-        <div className="space-y-1">
+        <LabelWrapper
-          <LabelInput
+          label="Use environment watsonx API key"
-            label="watsonx API key"
+          id="get-api-key"
-            helperText="API key to access watsonx.ai"
+          description="Reuse the key from your environment config. Turn off to enter a different key."
-            id="api-key"
+          flex
-            type="password"
+        >
-            required
+          <Tooltip>
-            placeholder={
+            <TooltipTrigger asChild>
-              alreadyConfigured
+              <div>
-                ? "•••••••••••••••••••••••••••••••••••••••••"
+                <Switch
-                : "your-api-key"
+                  checked={getFromEnv}
-            }
+                  onCheckedChange={handleGetFromEnvChange}
-            value={apiKey}
+                  disabled={!hasEnvApiKey || alreadyConfigured}
-            onChange={(e) => setApiKey(e.target.value)}
+                />
-            disabled={alreadyConfigured}
+              </div>
-          />
+            </TooltipTrigger>
-          {alreadyConfigured && (
+            {!hasEnvApiKey && !alreadyConfigured && (
+              <TooltipContent>
+                watsonx API key not detected in the environment.
+              </TooltipContent>
+            )}
+          </Tooltip>
+        </LabelWrapper>
+        {!getFromEnv && !alreadyConfigured && (
+          <div className="space-y-1">
+            <LabelInput
+              label="watsonx API key"
+              helperText="API key to access watsonx.ai"
+              className={modelsError ? "!border-destructive" : ""}
+              id="api-key"
+              type="password"
+              required
+              placeholder="your-api-key"
+              value={apiKey}
+              onChange={(e) => setApiKey(e.target.value)}
+            />
+            {isLoadingModels && (
+              <p className="text-mmd text-muted-foreground">
+                Validating API key...
+              </p>
+            )}
+            {modelsError && (
+              <p className="text-mmd text-destructive">
+                Invalid watsonx API key. Verify or replace the key.
+              </p>
+            )}
+          </div>
+        )}
+        {alreadyConfigured && (
+          <div className="space-y-1">
+            <LabelInput
+              label="watsonx API key"
+              helperText="API key to access watsonx.ai"
+              id="api-key"
+              type="password"
+              required
+              placeholder="•••••••••••••••••••••••••••••••••••••••••"
+              value={apiKey}
+              onChange={(e) => setApiKey(e.target.value)}
+              disabled={true}
+            />
             <p className="text-mmd text-muted-foreground">
               Reusing API key from model provider selection.
             </p>
-          )}
+          </div>
-        </div>
+        )}
-        {isLoadingModels && (
+        {getFromEnv && isLoadingModels && (
           <p className="text-mmd text-muted-foreground">
             Validating configuration...
           </p>
         )}
-        {modelsError && (
+        {getFromEnv && modelsError && (
           <p className="text-mmd text-accent-amber-foreground">
             Connection failed. Check your configuration.
           </p>

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

@@ -17,6 +17,7 @@ export function OllamaOnboarding({
   setIsLoadingModels,
   isEmbedding = false,
   alreadyConfigured = false,
+  existingEndpoint,
 }: {
   setSettings: Dispatch<SetStateAction<OnboardingVariables>>;
   sampleDataset: boolean;
@@ -24,9 +25,10 @@ export function OllamaOnboarding({
   setIsLoadingModels?: (isLoading: boolean) => void;
   isEmbedding?: boolean;
   alreadyConfigured?: boolean;
+  existingEndpoint?: string;
 }) {
   const [endpoint, setEndpoint] = useState(
-    alreadyConfigured ? undefined : `http://localhost:11434`,
+    alreadyConfigured ? undefined : (existingEndpoint || `http://localhost:11434`),
   );
   const [showConnecting, setShowConnecting] = useState(false);
   const debouncedEndpoint = useDebouncedValue(endpoint, 500);

frontend/app/onboarding/_components/onboarding-card.tsx

@@ -518,6 +518,9 @@ const OnboardingCard = ({
                     setIsLoadingModels={setIsLoadingModels}
                     isEmbedding={isEmbedding}
                     alreadyConfigured={providerAlreadyConfigured}
+                    existingEndpoint={currentSettings?.providers?.watsonx?.endpoint}
+                    existingProjectId={currentSettings?.providers?.watsonx?.project_id}
+                    hasEnvApiKey={currentSettings?.providers?.watsonx?.has_api_key === true}
                   />
                 </TabsContent>
                 <TabsContent value="ollama">
@@ -528,6 +531,7 @@ const OnboardingCard = ({
                     setIsLoadingModels={setIsLoadingModels}
                     isEmbedding={isEmbedding}
                     alreadyConfigured={providerAlreadyConfigured}
+                    existingEndpoint={currentSettings?.providers?.ollama?.endpoint}
                   />
                 </TabsContent>
               </Tabs>