Merge branch 'feat/onboarding' of github.com:langflow-ai/openrag into feat/onboarding
This commit is contained in:
Mike Fortman
commit
dec24fc759
11 changed files with 471 additions and 170 deletions
|
|
@ -1,43 +1,54 @@
|
||||||
import { Info } from "lucide-react";
|
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 { Label } from "./ui/label";
|
||||||
import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
|
import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
|
||||||
|
|
||||||
export function LabelWrapper({
|
export function LabelWrapper({
|
||||||
label,
|
label,
|
||||||
|
description,
|
||||||
helperText,
|
helperText,
|
||||||
id,
|
id,
|
||||||
required,
|
required,
|
||||||
|
flex,
|
||||||
children,
|
children,
|
||||||
}: {
|
}: {
|
||||||
label: string;
|
label: string;
|
||||||
helperText: string;
|
description?: string;
|
||||||
|
helperText?: string;
|
||||||
id: string;
|
id: string;
|
||||||
required: boolean;
|
required?: boolean;
|
||||||
|
flex?: boolean;
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}) {
|
}) {
|
||||||
return (
|
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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
58
frontend/components/ui/accordion.tsx
Normal file
58
frontend/components/ui/accordion.tsx
Normal file
|
|
@ -0,0 +1,58 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as AccordionPrimitive from "@radix-ui/react-accordion";
|
||||||
|
import { ChevronDown } from "lucide-react";
|
||||||
|
import * as React from "react";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const Accordion = AccordionPrimitive.Root;
|
||||||
|
|
||||||
|
const AccordionItem = React.forwardRef<
|
||||||
|
React.ElementRef<typeof AccordionPrimitive.Item>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<AccordionPrimitive.Item
|
||||||
|
ref={ref}
|
||||||
|
className={cn("border rounded-md", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
AccordionItem.displayName = "AccordionItem";
|
||||||
|
|
||||||
|
const AccordionTrigger = React.forwardRef<
|
||||||
|
React.ElementRef<typeof AccordionPrimitive.Trigger>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
|
||||||
|
>(({ className, children, ...props }, ref) => (
|
||||||
|
<AccordionPrimitive.Header className="flex">
|
||||||
|
<AccordionPrimitive.Trigger
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"flex flex-1 items-center p-4 py-2.5 gap-2 font-medium !text-mmd text-muted-foreground transition-all [&[data-state=open]>svg]:rotate-180",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ChevronDown className="h-3.5 w-3.5 shrink-0 transition-transform duration-200" />
|
||||||
|
{children}
|
||||||
|
</AccordionPrimitive.Trigger>
|
||||||
|
</AccordionPrimitive.Header>
|
||||||
|
));
|
||||||
|
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
|
||||||
|
|
||||||
|
const AccordionContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof AccordionPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
|
||||||
|
>(({ className, children, ...props }, ref) => (
|
||||||
|
<AccordionPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<div className={cn("p-4 pt-2", className)}>{children}</div>
|
||||||
|
</AccordionPrimitive.Content>
|
||||||
|
));
|
||||||
|
|
||||||
|
AccordionContent.displayName = AccordionPrimitive.Content.displayName;
|
||||||
|
|
||||||
|
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
|
||||||
|
|
@ -8,13 +8,20 @@ const buttonVariants = cva(
|
||||||
variants: {
|
variants: {
|
||||||
variant: {
|
variant: {
|
||||||
default: "bg-primary text-primary-foreground hover:bg-primary-hover",
|
default: "bg-primary text-primary-foreground hover:bg-primary-hover",
|
||||||
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
destructive:
|
||||||
outline: "border border-input hover:bg-input hover:text-accent-foreground",
|
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
||||||
primary: "border bg-background text-secondary-foreground hover:bg-muted hover:shadow-sm",
|
outline:
|
||||||
warning: "bg-warning-foreground text-warning-text hover:bg-warning-foreground/90 hover:shadow-sm",
|
"border border-input hover:bg-muted hover:text-accent-foreground",
|
||||||
secondary: "border border-muted bg-muted text-secondary-foreground hover:bg-secondary-foreground/5",
|
primary:
|
||||||
ghost: "text-foreground hover:bg-accent hover:text-accent-foreground disabled:!bg-transparent",
|
"border bg-background text-secondary-foreground hover:bg-muted hover:shadow-sm",
|
||||||
ghostActive: "bg-muted text-foreground hover:bg-secondary-hover hover:text-accent-foreground",
|
warning:
|
||||||
|
"bg-warning-foreground text-warning-text hover:bg-warning-foreground/90 hover:shadow-sm",
|
||||||
|
secondary:
|
||||||
|
"border border-muted bg-muted text-secondary-foreground hover:bg-secondary-foreground/5",
|
||||||
|
ghost:
|
||||||
|
"text-foreground hover:bg-accent hover:text-accent-foreground disabled:!bg-transparent",
|
||||||
|
ghostActive:
|
||||||
|
"bg-muted text-foreground hover:bg-secondary-hover hover:text-accent-foreground",
|
||||||
link: "underline-offset-4 hover:underline text-primary",
|
link: "underline-offset-4 hover:underline text-primary",
|
||||||
},
|
},
|
||||||
size: {
|
size: {
|
||||||
|
|
@ -38,7 +45,9 @@ const buttonVariants = cva(
|
||||||
function toTitleCase(text: string) {
|
function toTitleCase(text: string) {
|
||||||
return text
|
return text
|
||||||
?.split(" ")
|
?.split(" ")
|
||||||
?.map((word) => word?.charAt(0)?.toUpperCase() + word?.slice(1)?.toLowerCase())
|
?.map(
|
||||||
|
(word) => word?.charAt(0)?.toUpperCase() + word?.slice(1)?.toLowerCase(),
|
||||||
|
)
|
||||||
?.join(" ");
|
?.join(" ");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -51,7 +60,20 @@ export interface ButtonProps
|
||||||
}
|
}
|
||||||
|
|
||||||
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||||
({ className, variant, size, loading, disabled, asChild = false, children, ignoreTitleCase = false, ...props }, ref) => {
|
(
|
||||||
|
{
|
||||||
|
className,
|
||||||
|
variant,
|
||||||
|
size,
|
||||||
|
loading,
|
||||||
|
disabled,
|
||||||
|
asChild = false,
|
||||||
|
children,
|
||||||
|
ignoreTitleCase = false,
|
||||||
|
...props
|
||||||
|
},
|
||||||
|
ref,
|
||||||
|
) => {
|
||||||
const Comp = asChild ? Slot : "button";
|
const Comp = asChild ? Slot : "button";
|
||||||
let newChildren = children;
|
let newChildren = children;
|
||||||
if (typeof children === "string") {
|
if (typeof children === "string") {
|
||||||
|
|
@ -79,7 +101,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||||
)}
|
)}
|
||||||
</Comp>
|
</Comp>
|
||||||
);
|
);
|
||||||
}
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
Button.displayName = "Button";
|
Button.displayName = "Button";
|
||||||
|
|
|
||||||
|
|
@ -64,7 +64,7 @@ const CardFooter = React.forwardRef<
|
||||||
>(({ className, ...props }, ref) => (
|
>(({ className, ...props }, ref) => (
|
||||||
<div
|
<div
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn("flex items-center p-4 pt-0", className)}
|
className={cn("flex items-center p-5 pt-0", className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
));
|
));
|
||||||
|
|
|
||||||
31
frontend/components/ui/separator.tsx
Normal file
31
frontend/components/ui/separator.tsx
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as SeparatorPrimitive from "@radix-ui/react-separator";
|
||||||
|
import * as React from "react";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const Separator = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SeparatorPrimitive.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
|
||||||
|
>(
|
||||||
|
(
|
||||||
|
{ className, orientation = "horizontal", decorative = true, ...props },
|
||||||
|
ref,
|
||||||
|
) => (
|
||||||
|
<SeparatorPrimitive.Root
|
||||||
|
ref={ref}
|
||||||
|
decorative={decorative}
|
||||||
|
orientation={orientation}
|
||||||
|
className={cn(
|
||||||
|
"shrink-0 bg-border",
|
||||||
|
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
);
|
||||||
|
Separator.displayName = SeparatorPrimitive.Root.displayName;
|
||||||
|
|
||||||
|
export { Separator };
|
||||||
56
frontend/package-lock.json
generated
56
frontend/package-lock.json
generated
|
|
@ -10,6 +10,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@microsoft/mgt-components": "^4.6.0",
|
"@microsoft/mgt-components": "^4.6.0",
|
||||||
"@microsoft/mgt-msal2-provider": "^4.6.0",
|
"@microsoft/mgt-msal2-provider": "^4.6.0",
|
||||||
|
"@radix-ui/react-accordion": "^1.2.12",
|
||||||
"@radix-ui/react-avatar": "^1.1.10",
|
"@radix-ui/react-avatar": "^1.1.10",
|
||||||
"@radix-ui/react-checkbox": "^1.3.2",
|
"@radix-ui/react-checkbox": "^1.3.2",
|
||||||
"@radix-ui/react-collapsible": "^1.1.11",
|
"@radix-ui/react-collapsible": "^1.1.11",
|
||||||
|
|
@ -19,6 +20,7 @@
|
||||||
"@radix-ui/react-navigation-menu": "^1.2.13",
|
"@radix-ui/react-navigation-menu": "^1.2.13",
|
||||||
"@radix-ui/react-popover": "^1.1.15",
|
"@radix-ui/react-popover": "^1.1.15",
|
||||||
"@radix-ui/react-select": "^2.2.5",
|
"@radix-ui/react-select": "^2.2.5",
|
||||||
|
"@radix-ui/react-separator": "^1.1.7",
|
||||||
"@radix-ui/react-slider": "^1.3.6",
|
"@radix-ui/react-slider": "^1.3.6",
|
||||||
"@radix-ui/react-slot": "^1.2.3",
|
"@radix-ui/react-slot": "^1.2.3",
|
||||||
"@radix-ui/react-switch": "^1.2.5",
|
"@radix-ui/react-switch": "^1.2.5",
|
||||||
|
|
@ -1215,6 +1217,37 @@
|
||||||
"integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
|
"integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/@radix-ui/react-accordion": {
|
||||||
|
"version": "1.2.12",
|
||||||
|
"resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.12.tgz",
|
||||||
|
"integrity": "sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@radix-ui/primitive": "1.1.3",
|
||||||
|
"@radix-ui/react-collapsible": "1.1.12",
|
||||||
|
"@radix-ui/react-collection": "1.1.7",
|
||||||
|
"@radix-ui/react-compose-refs": "1.1.2",
|
||||||
|
"@radix-ui/react-context": "1.1.2",
|
||||||
|
"@radix-ui/react-direction": "1.1.1",
|
||||||
|
"@radix-ui/react-id": "1.1.1",
|
||||||
|
"@radix-ui/react-primitive": "2.1.3",
|
||||||
|
"@radix-ui/react-use-controllable-state": "1.2.2"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@types/react": "*",
|
||||||
|
"@types/react-dom": "*",
|
||||||
|
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||||
|
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@types/react": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"@types/react-dom": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@radix-ui/react-arrow": {
|
"node_modules/@radix-ui/react-arrow": {
|
||||||
"version": "1.1.7",
|
"version": "1.1.7",
|
||||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
|
"resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
|
||||||
|
|
@ -1859,6 +1892,29 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@radix-ui/react-separator": {
|
||||||
|
"version": "1.1.7",
|
||||||
|
"resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz",
|
||||||
|
"integrity": "sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@radix-ui/react-primitive": "2.1.3"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@types/react": "*",
|
||||||
|
"@types/react-dom": "*",
|
||||||
|
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||||
|
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@types/react": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"@types/react-dom": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@radix-ui/react-slider": {
|
"node_modules/@radix-ui/react-slider": {
|
||||||
"version": "1.3.6",
|
"version": "1.3.6",
|
||||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.3.6.tgz",
|
"resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.3.6.tgz",
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@microsoft/mgt-components": "^4.6.0",
|
"@microsoft/mgt-components": "^4.6.0",
|
||||||
"@microsoft/mgt-msal2-provider": "^4.6.0",
|
"@microsoft/mgt-msal2-provider": "^4.6.0",
|
||||||
|
"@radix-ui/react-accordion": "^1.2.12",
|
||||||
"@radix-ui/react-avatar": "^1.1.10",
|
"@radix-ui/react-avatar": "^1.1.10",
|
||||||
"@radix-ui/react-checkbox": "^1.3.2",
|
"@radix-ui/react-checkbox": "^1.3.2",
|
||||||
"@radix-ui/react-collapsible": "^1.1.11",
|
"@radix-ui/react-collapsible": "^1.1.11",
|
||||||
|
|
@ -20,6 +21,7 @@
|
||||||
"@radix-ui/react-navigation-menu": "^1.2.13",
|
"@radix-ui/react-navigation-menu": "^1.2.13",
|
||||||
"@radix-ui/react-popover": "^1.1.15",
|
"@radix-ui/react-popover": "^1.1.15",
|
||||||
"@radix-ui/react-select": "^2.2.5",
|
"@radix-ui/react-select": "^2.2.5",
|
||||||
|
"@radix-ui/react-separator": "^1.1.7",
|
||||||
"@radix-ui/react-slider": "^1.3.6",
|
"@radix-ui/react-slider": "^1.3.6",
|
||||||
"@radix-ui/react-slot": "^1.2.3",
|
"@radix-ui/react-slot": "^1.2.3",
|
||||||
"@radix-ui/react-switch": "^1.2.5",
|
"@radix-ui/react-switch": "^1.2.5",
|
||||||
|
|
|
||||||
|
|
@ -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({
|
export function AdvancedOnboarding({
|
||||||
modelProvider,
|
modelProvider,
|
||||||
}: {
|
}: {
|
||||||
modelProvider: string;
|
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>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -39,10 +39,10 @@ export function ModelSelector({
|
||||||
variant="outline"
|
variant="outline"
|
||||||
role="combobox"
|
role="combobox"
|
||||||
aria-expanded={open}
|
aria-expanded={open}
|
||||||
className="w-full gap-2 justify-between"
|
className="w-full gap-2 justify-between font-normal text-sm"
|
||||||
>
|
>
|
||||||
{value ? (
|
{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>
|
<div className="w-4 h-4">{icon}</div>
|
||||||
{options.find((framework) => framework.value === value)?.label}
|
{options.find((framework) => framework.value === value)?.label}
|
||||||
{options.find((framework) => framework.value === value)
|
{options.find((framework) => framework.value === value)
|
||||||
|
|
|
||||||
|
|
@ -1,20 +1,25 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { Suspense, useState } from "react";
|
import { Suspense, useState } from "react";
|
||||||
|
import { toast } from "sonner";
|
||||||
import { useUpdateFlowSettingMutation } from "@/app/api/mutations/useUpdateFlowSettingMutation";
|
import { useUpdateFlowSettingMutation } from "@/app/api/mutations/useUpdateFlowSettingMutation";
|
||||||
import {
|
import {
|
||||||
type Settings,
|
type Settings,
|
||||||
useGetSettingsQuery,
|
useGetSettingsQuery,
|
||||||
} from "@/app/api/queries/useGetSettingsQuery";
|
} from "@/app/api/queries/useGetSettingsQuery";
|
||||||
import { LabelInput } from "@/components/label-input";
|
|
||||||
import IBMLogo from "@/components/logo/ibm-logo";
|
import IBMLogo from "@/components/logo/ibm-logo";
|
||||||
import OllamaLogo from "@/components/logo/ollama-logo";
|
import OllamaLogo from "@/components/logo/ollama-logo";
|
||||||
import OpenAILogo from "@/components/logo/openai-logo";
|
import OpenAILogo from "@/components/logo/openai-logo";
|
||||||
import { ProtectedRoute } from "@/components/protected-route";
|
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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||||
import { useAuth } from "@/contexts/auth-context";
|
import { useAuth } from "@/contexts/auth-context";
|
||||||
import { AdvancedOnboarding } from "./advanced";
|
|
||||||
import { IBMOnboarding } from "./ibm-onboarding";
|
import { IBMOnboarding } from "./ibm-onboarding";
|
||||||
import { OllamaOnboarding } from "./ollama-onboarding";
|
import { OllamaOnboarding } from "./ollama-onboarding";
|
||||||
import { OpenAIOnboarding } from "./openai-onboarding";
|
import { OpenAIOnboarding } from "./openai-onboarding";
|
||||||
|
|
@ -36,10 +41,20 @@ function OnboardingPage() {
|
||||||
console.log("Setting updated successfully");
|
console.log("Setting updated successfully");
|
||||||
},
|
},
|
||||||
onError: (error) => {
|
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 (
|
return (
|
||||||
<div
|
<div
|
||||||
className="min-h-dvh relative flex gap-5 flex-col items-center justify-center bg-background p-4"
|
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>
|
</TabsContent>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
|
<CardFooter className="flex justify-end">
|
||||||
|
<Button size="sm" onClick={handleComplete}>
|
||||||
|
Complete
|
||||||
|
</Button>
|
||||||
|
</CardFooter>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -14,135 +14,170 @@ const config = {
|
||||||
"./src/**/*.{ts,tsx}",
|
"./src/**/*.{ts,tsx}",
|
||||||
],
|
],
|
||||||
theme: {
|
theme: {
|
||||||
container: {
|
container: {
|
||||||
center: true,
|
center: true,
|
||||||
screens: {
|
screens: {
|
||||||
"2xl": "1400px",
|
'2xl': '1400px',
|
||||||
"3xl": "1500px",
|
'3xl': '1500px'
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
extend: {
|
extend: {
|
||||||
screens: {
|
screens: {
|
||||||
xl: "1200px",
|
xl: '1200px',
|
||||||
"2xl": "1400px",
|
'2xl': '1400px',
|
||||||
"3xl": "1500px",
|
'3xl': '1500px'
|
||||||
},
|
},
|
||||||
keyframes: {
|
keyframes: {
|
||||||
overlayShow: {
|
overlayShow: {
|
||||||
from: { opacity: 0 },
|
from: {
|
||||||
to: { opacity: 1 },
|
opacity: 0
|
||||||
},
|
},
|
||||||
contentShow: {
|
to: {
|
||||||
from: {
|
opacity: 1
|
||||||
opacity: 0,
|
}
|
||||||
transform: "translate(-50%, -50%) scale(0.95)",
|
},
|
||||||
clipPath: "inset(50% 0)",
|
contentShow: {
|
||||||
},
|
from: {
|
||||||
to: {
|
opacity: 0,
|
||||||
opacity: 1,
|
transform: 'translate(-50%, -50%) scale(0.95)',
|
||||||
transform: "translate(-50%, -50%) scale(1)",
|
clipPath: 'inset(50% 0)'
|
||||||
clipPath: "inset(0% 0)",
|
},
|
||||||
},
|
to: {
|
||||||
},
|
opacity: 1,
|
||||||
wiggle: {
|
transform: 'translate(-50%, -50%) scale(1)',
|
||||||
"0%, 100%": { transform: "scale(100%)" },
|
clipPath: 'inset(0% 0)'
|
||||||
"50%": { transform: "scale(120%)" },
|
}
|
||||||
},
|
},
|
||||||
},
|
wiggle: {
|
||||||
animation: {
|
'0%, 100%': {
|
||||||
overlayShow: "overlayShow 400ms cubic-bezier(0.16, 1, 0.3, 1)",
|
transform: 'scale(100%)'
|
||||||
contentShow: "contentShow 400ms cubic-bezier(0.16, 1, 0.3, 1)",
|
},
|
||||||
wiggle: "wiggle 150ms ease-in-out 1",
|
'50%': {
|
||||||
},
|
transform: 'scale(120%)'
|
||||||
colors: {
|
}
|
||||||
border: "hsl(var(--border))",
|
},
|
||||||
input: "hsl(var(--input))",
|
'accordion-down': {
|
||||||
ring: "hsl(var(--ring))",
|
from: {
|
||||||
background: "hsl(var(--background))",
|
height: '0'
|
||||||
foreground: "hsl(var(--foreground))",
|
},
|
||||||
primary: {
|
to: {
|
||||||
DEFAULT: "hsl(var(--primary))",
|
height: 'var(--radix-accordion-content-height)'
|
||||||
foreground: "hsl(var(--primary-foreground))",
|
}
|
||||||
hover: "hsl(var(--primary-hover))",
|
},
|
||||||
},
|
'accordion-up': {
|
||||||
secondary: {
|
from: {
|
||||||
DEFAULT: "hsl(var(--secondary))",
|
height: 'var(--radix-accordion-content-height)'
|
||||||
foreground: "hsl(var(--secondary-foreground))",
|
},
|
||||||
hover: "hsl(var(--secondary-hover))",
|
to: {
|
||||||
},
|
height: '0'
|
||||||
destructive: {
|
}
|
||||||
DEFAULT: "hsl(var(--destructive))",
|
}
|
||||||
foreground: "hsl(var(--destructive-foreground))",
|
},
|
||||||
},
|
animation: {
|
||||||
muted: {
|
overlayShow: 'overlayShow 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
||||||
DEFAULT: "hsl(var(--muted))",
|
contentShow: 'contentShow 400ms cubic-bezier(0.16, 1, 0.3, 1)',
|
||||||
foreground: "hsl(var(--muted-foreground))",
|
wiggle: 'wiggle 150ms ease-in-out 1',
|
||||||
},
|
'accordion-down': 'accordion-down 0.2s ease-out',
|
||||||
accent: {
|
'accordion-up': 'accordion-up 0.2s ease-out'
|
||||||
DEFAULT: "hsl(var(--accent))",
|
},
|
||||||
foreground: "hsl(var(--accent-foreground))",
|
colors: {
|
||||||
},
|
border: 'hsl(var(--border))',
|
||||||
"accent-emerald-foreground": {
|
input: 'hsl(var(--input))',
|
||||||
DEFAULT: "hsl(var(--accent-emerald-foreground))",
|
ring: 'hsl(var(--ring))',
|
||||||
},
|
background: 'hsl(var(--background))',
|
||||||
"accent-pink-foreground": {
|
foreground: 'hsl(var(--foreground))',
|
||||||
DEFAULT: "hsl(var(--accent-pink-foreground))",
|
primary: {
|
||||||
},
|
DEFAULT: 'hsl(var(--primary))',
|
||||||
popover: {
|
foreground: 'hsl(var(--primary-foreground))',
|
||||||
DEFAULT: "hsl(var(--popover))",
|
hover: 'hsl(var(--primary-hover))'
|
||||||
foreground: "hsl(var(--popover-foreground))",
|
},
|
||||||
},
|
secondary: {
|
||||||
card: {
|
DEFAULT: 'hsl(var(--secondary))',
|
||||||
DEFAULT: "hsl(var(--card))",
|
foreground: 'hsl(var(--secondary-foreground))',
|
||||||
foreground: "hsl(var(--card-foreground))",
|
hover: 'hsl(var(--secondary-hover))'
|
||||||
},
|
},
|
||||||
"status-blue": "var(--status-blue)",
|
destructive: {
|
||||||
"status-green": "var(--status-green)",
|
DEFAULT: 'hsl(var(--destructive))',
|
||||||
"status-red": "var(--status-red)",
|
foreground: 'hsl(var(--destructive-foreground))'
|
||||||
"status-yellow": "var(--status-yellow)",
|
},
|
||||||
"component-icon": "var(--component-icon)",
|
muted: {
|
||||||
"flow-icon": "var(--flow-icon)",
|
DEFAULT: 'hsl(var(--muted))',
|
||||||
"placeholder-foreground": "hsl(var(--placeholder-foreground))",
|
foreground: 'hsl(var(--muted-foreground))'
|
||||||
"datatype-blue": {
|
},
|
||||||
DEFAULT: "hsl(var(--datatype-blue))",
|
accent: {
|
||||||
foreground: "hsl(var(--datatype-blue-foreground))",
|
DEFAULT: 'hsl(var(--accent))',
|
||||||
},
|
foreground: 'hsl(var(--accent-foreground))'
|
||||||
"datatype-yellow": {
|
},
|
||||||
DEFAULT: "hsl(var(--datatype-yellow))",
|
'accent-emerald-foreground': {
|
||||||
foreground: "hsl(var(--datatype-yellow-foreground))",
|
DEFAULT: 'hsl(var(--accent-emerald-foreground))'
|
||||||
},
|
},
|
||||||
"datatype-red": {
|
'accent-pink-foreground': {
|
||||||
DEFAULT: "hsl(var(--datatype-red))",
|
DEFAULT: 'hsl(var(--accent-pink-foreground))'
|
||||||
foreground: "hsl(var(--datatype-red-foreground))",
|
},
|
||||||
},
|
popover: {
|
||||||
"datatype-emerald": {
|
DEFAULT: 'hsl(var(--popover))',
|
||||||
DEFAULT: "hsl(var(--datatype-emerald))",
|
foreground: 'hsl(var(--popover-foreground))'
|
||||||
foreground: "hsl(var(--datatype-emerald-foreground))",
|
},
|
||||||
},
|
card: {
|
||||||
"datatype-violet": {
|
DEFAULT: 'hsl(var(--card))',
|
||||||
DEFAULT: "hsl(var(--datatype-violet))",
|
foreground: 'hsl(var(--card-foreground))'
|
||||||
foreground: "hsl(var(--datatype-violet-foreground))",
|
},
|
||||||
},
|
'status-blue': 'var(--status-blue)',
|
||||||
warning: {
|
'status-green': 'var(--status-green)',
|
||||||
DEFAULT: "hsl(var(--warning))",
|
'status-red': 'var(--status-red)',
|
||||||
foreground: "hsl(var(--warning-foreground))",
|
'status-yellow': 'var(--status-yellow)',
|
||||||
},
|
'component-icon': 'var(--component-icon)',
|
||||||
},
|
'flow-icon': 'var(--flow-icon)',
|
||||||
borderRadius: {
|
'placeholder-foreground': 'hsl(var(--placeholder-foreground))',
|
||||||
lg: "var(--radius)",
|
'datatype-blue': {
|
||||||
md: "calc(var(--radius) - 2px)",
|
DEFAULT: 'hsl(var(--datatype-blue))',
|
||||||
sm: "calc(var(--radius) - 4px)",
|
foreground: 'hsl(var(--datatype-blue-foreground))'
|
||||||
},
|
},
|
||||||
fontFamily: {
|
'datatype-yellow': {
|
||||||
sans: ["var(--font-sans)", ...fontFamily.sans],
|
DEFAULT: 'hsl(var(--datatype-yellow))',
|
||||||
mono: ["var(--font-mono)", ...fontFamily.mono],
|
foreground: 'hsl(var(--datatype-yellow-foreground))'
|
||||||
chivo: ["var(--font-chivo)", ...fontFamily.sans],
|
},
|
||||||
},
|
'datatype-red': {
|
||||||
fontSize: {
|
DEFAULT: 'hsl(var(--datatype-red))',
|
||||||
xxs: "11px",
|
foreground: 'hsl(var(--datatype-red-foreground))'
|
||||||
mmd: "13px",
|
},
|
||||||
},
|
'datatype-emerald': {
|
||||||
},
|
DEFAULT: 'hsl(var(--datatype-emerald))',
|
||||||
|
foreground: 'hsl(var(--datatype-emerald-foreground))'
|
||||||
|
},
|
||||||
|
'datatype-violet': {
|
||||||
|
DEFAULT: 'hsl(var(--datatype-violet))',
|
||||||
|
foreground: 'hsl(var(--datatype-violet-foreground))'
|
||||||
|
},
|
||||||
|
warning: {
|
||||||
|
DEFAULT: 'hsl(var(--warning))',
|
||||||
|
foreground: 'hsl(var(--warning-foreground))'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
borderRadius: {
|
||||||
|
lg: 'var(--radius)',
|
||||||
|
md: 'calc(var(--radius) - 2px)',
|
||||||
|
sm: 'calc(var(--radius) - 4px)'
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: [
|
||||||
|
'var(--font-sans)',
|
||||||
|
...fontFamily.sans
|
||||||
|
],
|
||||||
|
mono: [
|
||||||
|
'var(--font-mono)',
|
||||||
|
...fontFamily.mono
|
||||||
|
],
|
||||||
|
chivo: [
|
||||||
|
'var(--font-chivo)',
|
||||||
|
...fontFamily.sans
|
||||||
|
]
|
||||||
|
},
|
||||||
|
fontSize: {
|
||||||
|
xxs: '11px',
|
||||||
|
mmd: '13px'
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
tailwindcssAnimate,
|
tailwindcssAnimate,
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue