openrag/frontend/components/ui/input.tsx
Lucas Oliveira 37faf94979
feat: adds anthropic provider, splits onboarding editing into two, support provider changing with generic llm and embedding components (#373)
* Added flows with new components

* commented model provider assignment

* Added agent component display name

* commented provider assignment, assign provider on the generic component, assign custom values

* fixed ollama not showing loading steps, fixed loading steps never being removed

* made embedding and llm model optional on onboarding call

* added isEmbedding handling on useModelSelection

* added isEmbedding on onboarding card, separating embedding from non embedding card

* Added one additional step to configure embeddings

* Added embedding provider config

* Changed settings.py to return if not embedding

* Added editing fields to onboarding

* updated onboarding and flows_service to change embedding and llm separately

* updated templates that needs to be changed with provider values

* updated flows with new components

* Changed config manager to not have default models

* Changed flows_service settings

* Complete steps if not embedding

* Add more onboarding steps

* Removed one step from llm steps

* Added Anthropic as a model for the language model on the frontend

* Added anthropic models

* Added anthropic support on Backend

* Fixed provider health and validation

* Format settings

* Change anthropic logo

* Changed button to not jump

* Changed flows service to make anthropic work

* Fixed some things

* add embedding specific global variables

* updated flows

* fixed ingestion flow

* Implemented anthropic on settings page

* add embedding provider logo

* updated backend to work with multiple provider config

* update useUpdateSettings with new settings type

* updated provider health banner to check for health with new api

* changed queries and mutations to use new api

* changed embedding model input to work with new api

* Implemented provider based config on the frontend

* update existing design

* fixed settings configured

* fixed provider health query to include health check for both the providers

* Changed model-providers to show correctly the configured providers

* Updated prompt

* updated openrag agent

* Fixed settings to allow editing providers and changing llm and embedding models

* updated settings

* changed lf ver

* bump openrag version

* added more steps

* update settings to create the global variables

* updated steps

* updated default prompt

---------

Co-authored-by: Sebastián Estévez <estevezsebastian@gmail.com>
2025-11-11 19:22:16 -03:00

81 lines
2.4 KiB
TypeScript

import { Eye, EyeOff, LockIcon } from "lucide-react";
import * as React from "react";
import { cn } from "@/lib/utils";
export interface InputProps
extends React.InputHTMLAttributes<HTMLInputElement> {
icon?: React.ReactNode;
inputClassName?: string;
}
const Input = React.forwardRef<HTMLInputElement, InputProps>(
({ className, inputClassName, icon, type, placeholder, ...props }, ref) => {
const [hasValue, setHasValue] = React.useState(
Boolean(props.value || props.defaultValue)
);
const [showPassword, setShowPassword] = React.useState(false);
const handleTogglePassword = () => {
setShowPassword(!showPassword);
};
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setHasValue(e.target.value.length > 0);
if (props.onChange) {
props.onChange(e);
}
};
return (
<label
className={cn(
"relative block h-fit w-full text-sm group",
icon ? className : "",
)}
>
{icon && (
<div className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 transform text-muted-foreground">
{icon}
</div>
)}
<input
autoComplete="off"
type={type === "password" && showPassword ? "text" : type}
placeholder={placeholder}
className={cn(
"primary-input",
icon && "!pl-9",
(type === "password" || props.disabled) && "!pr-8",
icon ? inputClassName : className
)}
ref={ref}
{...props}
onChange={handleChange}
/>
{type === "password" && !props.disabled && (
<button
type="button"
className="absolute top-1/2 opacity-0 group-hover:opacity-100 hover:text-primary transition-all right-3 transform -translate-y-1/2 text-sm text-muted-foreground"
onMouseDown={(e) => e.preventDefault()}
onMouseUp={handleTogglePassword}
>
{showPassword ? (
<Eye className="w-4" />
) : (
<EyeOff className="w-4" />
)}
</button>
)}
{props.disabled && (
<div className="absolute top-1/2 right-3 transform -translate-y-1/2 text-sm text-muted-foreground">
<LockIcon className="w-4" />
</div>
)}
</label>
);
}
);
Input.displayName = "Input";
export { Input };