updated inputs in Ingest Settings for cloud-picker component
This commit is contained in:
Brent O'Neill
parent
a2e1210a4d
commit
a0a2b2cc3b
3 changed files with 197 additions and 31 deletions
62
frontend/components/ui/inputs/embedding-model.tsx
Normal file
62
frontend/components/ui/inputs/embedding-model.tsx
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
import { ModelOption } from "@/app/api/queries/useGetModelsQuery";
|
||||
import {
|
||||
getFallbackModels,
|
||||
ModelProvider,
|
||||
} from "@/app/settings/helpers/model-helpers";
|
||||
import { ModelSelectItems } from "@/app/settings/helpers/model-select-item";
|
||||
import { LabelWrapper } from "@/components/label-wrapper";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@radix-ui/react-select";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@radix-ui/react-tooltip";
|
||||
|
||||
interface EmbeddingModelInputProps {
|
||||
disabled?: boolean;
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
modelsData?: {
|
||||
embedding_models: ModelOption[];
|
||||
};
|
||||
currentProvider?: ModelProvider;
|
||||
}
|
||||
|
||||
export const EmbeddingModelInput = ({
|
||||
disabled,
|
||||
value,
|
||||
onChange,
|
||||
modelsData,
|
||||
currentProvider = "openai",
|
||||
}: EmbeddingModelInputProps) => {
|
||||
return (
|
||||
<LabelWrapper
|
||||
helperText="Model used for knowledge ingest and retrieval"
|
||||
id="embedding-model-select"
|
||||
label="Embedding model"
|
||||
>
|
||||
<Select disabled={disabled} value={value} onValueChange={onChange}>
|
||||
<Tooltip delayDuration={0}>
|
||||
<TooltipTrigger asChild>
|
||||
<SelectTrigger disabled id="embedding-model-select">
|
||||
<SelectValue placeholder="Select an embedding model" />
|
||||
</SelectTrigger>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Locked to keep embeddings consistent</TooltipContent>
|
||||
</Tooltip>
|
||||
<SelectContent>
|
||||
<ModelSelectItems
|
||||
models={modelsData?.embedding_models}
|
||||
fallbackModels={getFallbackModels(currentProvider).embedding}
|
||||
provider={currentProvider}
|
||||
/>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</LabelWrapper>
|
||||
);
|
||||
};
|
||||
68
frontend/components/ui/inputs/number-input.tsx
Normal file
68
frontend/components/ui/inputs/number-input.tsx
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
import { LabelWrapper } from "@/components/label-wrapper";
|
||||
import { Button } from "../button";
|
||||
import { Input } from "../input";
|
||||
import { Minus, Plus } from "lucide-react";
|
||||
|
||||
interface NumberInputProps {
|
||||
id: string;
|
||||
label: string;
|
||||
value: number;
|
||||
onChange: (value: number) => void;
|
||||
unit: string;
|
||||
min?: number;
|
||||
max?: number;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export const NumberInput = ({
|
||||
id,
|
||||
label,
|
||||
value,
|
||||
onChange,
|
||||
min = 1,
|
||||
max,
|
||||
disabled,
|
||||
unit,
|
||||
}: NumberInputProps) => {
|
||||
return (
|
||||
<LabelWrapper id={id} label={label}>
|
||||
<div className="relative">
|
||||
<Input
|
||||
id="chunk-size"
|
||||
type="number"
|
||||
disabled={disabled}
|
||||
max={max}
|
||||
min={min}
|
||||
value={value}
|
||||
onChange={(e) => onChange(parseInt(e.target.value) || 0)}
|
||||
className="w-full pr-20 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
|
||||
/>
|
||||
<div className="absolute inset-y-0 right-0 flex items-center">
|
||||
<span className="text-sm text-placeholder-foreground mr-4 pointer-events-none">
|
||||
{unit}
|
||||
</span>
|
||||
<div className="flex flex-col">
|
||||
<Button
|
||||
aria-label={`Increase ${label} value`}
|
||||
className="h-5 rounded-l-none rounded-br-none border-input border-b-[0.5px] focus-visible:relative"
|
||||
variant="outline"
|
||||
size="iconSm"
|
||||
onClick={() => onChange(value + 1)}
|
||||
>
|
||||
<Plus className="text-muted-foreground" size={8} />
|
||||
</Button>
|
||||
<Button
|
||||
aria-label={`Decrease ${label} value`}
|
||||
className="h-5 rounded-l-none rounded-tr-none border-input border-t-[0.5px] focus-visible:relative"
|
||||
variant="outline"
|
||||
size="iconSm"
|
||||
onClick={() => onChange(value - 1)}
|
||||
>
|
||||
<Minus className="text-muted-foreground" size={8} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</LabelWrapper>
|
||||
);
|
||||
};
|
||||
|
|
@ -7,8 +7,23 @@ import {
|
|||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from "@/components/ui/collapsible";
|
||||
import { ChevronRight, Info } from "lucide-react";
|
||||
import { ChevronRight } from "lucide-react";
|
||||
import { IngestSettings as IngestSettingsType } from "./types";
|
||||
import { LabelWrapper } from "@/components/label-wrapper";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { ModelSelectItems } from "@/app/settings/helpers/model-select-item";
|
||||
import { getFallbackModels } from "@/app/settings/helpers/model-helpers";
|
||||
import { NumberInput } from "@/components/ui/inputs/number-input";
|
||||
|
||||
interface IngestSettingsProps {
|
||||
isOpen: boolean;
|
||||
|
|
@ -40,6 +55,8 @@ export const IngestSettings = ({
|
|||
onSettingsChange?.(updatedSettings);
|
||||
};
|
||||
|
||||
console.log({ currentSettings });
|
||||
|
||||
return (
|
||||
<Collapsible
|
||||
open={isOpen}
|
||||
|
|
@ -58,30 +75,64 @@ export const IngestSettings = ({
|
|||
</CollapsibleTrigger>
|
||||
|
||||
<CollapsibleContent className="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-up-2 data-[state=open]:slide-down-2">
|
||||
<div className="mt-6">
|
||||
{/* Embedding model selection - currently disabled */}
|
||||
<LabelWrapper
|
||||
helperText="Model used for knowledge ingest and retrieval"
|
||||
id="embedding-model-select"
|
||||
label="Embedding model"
|
||||
>
|
||||
<Select
|
||||
// Disabled until API supports multiple embedding models
|
||||
disabled={true}
|
||||
value={currentSettings.embeddingModel}
|
||||
onValueChange={() => {}}
|
||||
>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<SelectTrigger disabled id="embedding-model-select">
|
||||
<SelectValue placeholder="Select an embedding model" />
|
||||
</SelectTrigger>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
Locked to keep embeddings consistent
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<SelectContent>
|
||||
<ModelSelectItems
|
||||
models={[
|
||||
{
|
||||
value: "text-embedding-3-small",
|
||||
label: "text-embedding-3-small",
|
||||
},
|
||||
]}
|
||||
fallbackModels={getFallbackModels("openai").embedding}
|
||||
provider={"openai"}
|
||||
/>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</LabelWrapper>
|
||||
</div>
|
||||
<div className="pt-5 space-y-5">
|
||||
<div className="flex items-center gap-4 w-full">
|
||||
<div className="w-full">
|
||||
<div className="text-sm mb-2 font-semibold">Chunk size</div>
|
||||
<Input
|
||||
type="number"
|
||||
<NumberInput
|
||||
id="chunk-size"
|
||||
label="Chunk size"
|
||||
value={currentSettings.chunkSize}
|
||||
onChange={(e) =>
|
||||
handleSettingsChange({
|
||||
chunkSize: parseInt(e.target.value) || 0,
|
||||
})
|
||||
}
|
||||
onChange={(value) => handleSettingsChange({ chunkSize: value })}
|
||||
unit="characters"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<div className="text-sm mb-2 font-semibold">Chunk overlap</div>
|
||||
<Input
|
||||
type="number"
|
||||
<NumberInput
|
||||
id="chunk-overlap"
|
||||
label="Chunk overlap"
|
||||
value={currentSettings.chunkOverlap}
|
||||
onChange={(e) =>
|
||||
handleSettingsChange({
|
||||
chunkOverlap: parseInt(e.target.value) || 0,
|
||||
})
|
||||
onChange={(value) =>
|
||||
handleSettingsChange({ chunkOverlap: value })
|
||||
}
|
||||
unit="characters"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -117,21 +168,6 @@ export const IngestSettings = ({
|
|||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="text-sm font-semibold pb-2 flex items-center">
|
||||
Embedding model
|
||||
<Info className="w-3.5 h-3.5 text-muted-foreground ml-2" />
|
||||
</div>
|
||||
<Input
|
||||
disabled
|
||||
value={currentSettings.embeddingModel}
|
||||
onChange={(e) =>
|
||||
handleSettingsChange({ embeddingModel: e.target.value })
|
||||
}
|
||||
placeholder="text-embedding-3-small"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue