Merge pull request #289 from langflow-ai/fix/provider-design

fix: adds new provider design, fixes issues with auth mode

frontend/components/ui/accordion.tsx

@@ -14,7 +14,7 @@ const AccordionItem = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AccordionPrimitive.Item
     ref={ref}
-    className={cn("border rounded-md", className)}
+    className={cn("border rounded-xl", className)}
     {...props}
   />
 ));

frontend/components/ui/tabs.tsx

@@ -13,7 +13,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "inline-flex h-12 gap-3 items-center justify-center p-0 text-muted-foreground w-full",
+      "inline-flex h-fit gap-3 items-center justify-center p-0 text-muted-foreground w-full",
       className,
     )}
     {...props}
@@ -28,7 +28,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex w-full h-full border border-border gap-1.5 items-center justify-center whitespace-nowrap rounded-lg px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border-accent-pink-foreground data-[state=active]:text-foreground",
+      "flex flex-col items-start justify-between p-5 gap-4 w-full h-full border border-border whitespace-nowrap rounded-lg text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border-muted-foreground data-[state=active]:text-foreground",
       className,
     )}
     {...props}

frontend/src/app/onboarding/components/advanced.tsx

@@ -75,20 +75,6 @@ export function AdvancedOnboarding({
               />
             </LabelWrapper>
           )}
-          {(hasLanguageModels || hasEmbeddingModels) && !updatedOnboarding && <Separator />}
-          {!updatedOnboarding && (
-            <LabelWrapper
-              label="Sample dataset"
-              description="Load sample data to chat with immediately."
-              id="sample-dataset"
-              flex
-            >
-              <Switch
-                checked={sampleDataset}
-                onCheckedChange={setSampleDataset}
-              />
-            </LabelWrapper>
-          )}
         </AccordionContent>
       </AccordionItem>
     </Accordion>

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

@@ -7,7 +7,6 @@ import type { OnboardingVariables } from "../../api/mutations/useOnboardingMutat
 import { useGetOllamaModelsQuery } 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 OllamaOnboarding({
@@ -61,10 +60,6 @@ export function OllamaOnboarding({
 		};
 	}, [debouncedEndpoint, isLoadingModels]);
 
-  const handleSampleDatasetChange = (dataset: boolean) => {
-    setSampleDataset(dataset);
-  };
-
 	// Update settings when values change
 	useUpdateSettings(
 		"ollama",
@@ -84,7 +79,6 @@ export function OllamaOnboarding({
 		!modelsData.embedding_models?.length;
 
 	return (
-    <>
 		<div className="space-y-4">
 			<div className="space-y-1">
 				<LabelInput
@@ -151,10 +145,5 @@ export function OllamaOnboarding({
 				/>
 			</LabelWrapper>
 		</div>
-      <AdvancedOnboarding
-        sampleDataset={sampleDataset}
-        setSampleDataset={handleSampleDatasetChange}
-      />
-    </>
 	);
 }

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

@@ -25,6 +25,7 @@ import {
 	TooltipContent,
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
 import { AnimatedProviderSteps } from "./animated-provider-steps";
 import { IBMOnboarding } from "./ibm-onboarding";
 import { OllamaOnboarding } from "./ollama-onboarding";
@@ -165,32 +166,42 @@ const OnboardingCard = ({ onComplete }: OnboardingCardProps) => {
 					exit={{ opacity: 0, y: -24 }}
 					transition={{ duration: 0.4, ease: "easeInOut" }}
 				>
-          <Card
+					<div className={`w-full max-w-[600px] flex flex-col gap-6`}>
-            className={`w-full max-w-[600px] ${
-              updatedOnboarding ? "border-none" : ""
-            }`}
-          >
 						<Tabs
 							defaultValue={modelProvider}
 							onValueChange={handleSetModelProvider}
 						>
-              <CardHeader className={`${updatedOnboarding ? "px-0" : ""}`}>
+							<TabsList className="mb-4">
-                <TabsList>
+								<TabsTrigger
-                  <TabsTrigger value="openai">
+									value="openai"
-                    <OpenAILogo className="w-4 h-4" />
+								>
+									<div className={cn("flex items-center justify-center gap-2 w-8 h-8 rounded-md", modelProvider === "openai" ? "bg-white" : "bg-muted")}>
+										<OpenAILogo className={cn("w-4 h-4 shrink-0", modelProvider === "openai" ? "text-black" : "text-muted-foreground")} />
+									</div>
 									OpenAI
 								</TabsTrigger>
-                  <TabsTrigger value="watsonx">
+								<TabsTrigger
-                    <IBMLogo className="w-4 h-4" />
+									value="watsonx"
+								>
+									<div className={cn("flex items-center justify-center gap-2 w-8 h-8 rounded-md", modelProvider === "watsonx" ? "bg-[#1063FE]" : "bg-muted")}>
+										<IBMLogo className={cn("w-4 h-4 shrink-0", modelProvider === "watsonx" ? "text-white" : "text-muted-foreground")} />
+									</div>
 									IBM watsonx.ai
 								</TabsTrigger>
-                  <TabsTrigger value="ollama">
+								<TabsTrigger
-                    <OllamaLogo className="w-4 h-4" />
+									value="ollama"
+								>
+									<div className={cn("flex items-center justify-center gap-2 w-8 h-8 rounded-md", modelProvider === "ollama" ? "bg-white" : "bg-muted")}>
+										<OllamaLogo
+											className={cn(
+												"w-4 h-4 shrink-0",
+												modelProvider === "ollama" ? "text-black" : "text-muted-foreground",
+											)}
+										/>
+									</div>
 									Ollama
 								</TabsTrigger>
 							</TabsList>
-              </CardHeader>
-              <CardContent className={`${updatedOnboarding ? "px-0" : ""}`}>
 							<TabsContent value="openai">
 								<OpenAIOnboarding
 									setSettings={setSettings}
@@ -212,11 +223,8 @@ const OnboardingCard = ({ onComplete }: OnboardingCardProps) => {
 									setSampleDataset={setSampleDataset}
 								/>
 							</TabsContent>
-              </CardContent>
 						</Tabs>
-            <CardFooter
+
-              className={`flex  ${updatedOnboarding ? "px-0" : "justify-end"}`}
-            >
 						<Tooltip>
 							<TooltipTrigger asChild>
 								<div>
@@ -240,8 +248,7 @@ const OnboardingCard = ({ onComplete }: OnboardingCardProps) => {
 								</TooltipContent>
 							)}
 						</Tooltip>
-            </CardFooter>
+					</div>
-          </Card>
 				</motion.div>
 			) : (
 				<motion.div

frontend/src/components/chat-renderer.tsx

@@ -28,7 +28,7 @@ export function ChatRenderer({
 	settings,
 	children,
 }: {
-	settings: Settings;
+	settings: Settings | undefined;
 	children: React.ReactNode;
 }) {
 	const pathname = usePathname();
@@ -51,7 +51,8 @@ export function ChatRenderer({
 		if (typeof window === "undefined") return false;
 		const savedStep = localStorage.getItem(ONBOARDING_STEP_KEY);
 		// Show layout if settings.edited is true and if no onboarding step is saved
-		return !!settings?.edited && savedStep === null;
+		const isEdited = settings?.edited ?? true;
+		return isEdited ? savedStep === null : false;
 	});
 
 	// Only fetch conversations on chat page

frontend/src/components/layout-wrapper.tsx

@@ -35,9 +35,10 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
 
   const isUnhealthy = health?.status === "unhealthy" || isError;
   const isBannerVisible = !isHealthLoading && isUnhealthy;
+  const isSettingsLoadingOrError = isSettingsLoading || !settings;
 
   // Show loading state when backend isn't ready
-  if (isLoading || isSettingsLoading || !settings) {
+  if (isLoading || (isSettingsLoadingOrError && (isNoAuthMode || isAuthenticated))) {
     return (
       <div className="min-h-screen flex items-center justify-center bg-background">
         <div className="flex flex-col items-center gap-4">