{g.description}
{g.endpoint}
No static headers configured.
+
Submitted by {g.submittedBy} on {g.submittedAt}
When enabled, the caller's LiteLLM API key is forwarded as an{" "} - Authorization header to your guardrail - endpoint. This allows your guardrail to authenticate model calls using the original caller's - credentials. + Authorization header to + your guardrail endpoint. This allows your guardrail to authenticate model calls using the original + caller's credentials.
Authorization
Sent with every request to the guardrail.
Allowed header names to forward from the client request to the guardrail (e.g. x-request-id).
No forward client headers configured.
+ {buildEquivalentConfigYaml(g)} )}
{buildEquivalentConfigYaml(g)}
This guardrail runs on a separate instance. It receives the user request and forwards the result to the next step in the pipeline. See{" "}
Are you sure you want to {action}{" "} - "{guardrailName}"?{" "} + "{guardrailName}"?{" "} {isApprove ? "This will make it active and available for use." : "This will mark it as rejected and notify the team."} @@ -721,7 +784,7 @@ function ConfirmDialog({ action, guardrailName, onConfirm, onCancel }: ConfirmDi Cancel @@ -766,7 +829,7 @@ export function TeamGuardrailsTab({ accessToken }: TeamGuardrailsTabProps) { const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(null); const [isSubmitModalOpen, setIsSubmitModalOpen] = useState(false); - const [submitForm] = Form.useForm(); + const submitForm = useZodForm(submitGuardrailSchema, { defaultValues: EMPTY_SUBMIT_VALUES }); const registerGuardrail = useRegisterGuardrail(); const fetchSubmissions = useCallback(async () => { @@ -797,6 +860,29 @@ export function TeamGuardrailsTab({ accessToken }: TeamGuardrailsTabProps) { fetchSubmissions(); }, [fetchSubmissions]); + const handleSubmitGuardrail = submitForm.handleSubmit(async (values) => { + const litellm_params: Record = { + ...(values.extra_litellm_params ? JSON.parse(values.extra_litellm_params) : {}), + guardrail: "generic_guardrail_api", + mode: values.mode, + api_base: values.api_base, + }; + try { + await registerGuardrail.mutateAsync({ + team_id: values.team_id, + guardrail_name: values.guardrail_name, + litellm_params, + guardrail_info: values.guardrail_info ? JSON.parse(values.guardrail_info) : undefined, + }); + toast.success("Guardrail submitted for review"); + setIsSubmitModalOpen(false); + submitForm.reset(); + fetchSubmissions(); + } catch { + return; + } + }); + const filtered = guardrails; const selected = guardrails.find((g) => g.id === selectedId) ?? null; const totalCount = summary.total; @@ -896,28 +982,28 @@ export function TeamGuardrailsTab({ accessToken }: TeamGuardrailsTabProps) { return ( - + - + - + setSearch(e.target.value)} - className="w-full pl-9 pr-4 py-2 border border-gray-200 rounded-md text-sm text-gray-700 placeholder-gray-400 focus:outline-hidden focus:ring-1 focus:ring-blue-500 focus:border-blue-500" + className="w-full pl-9 pr-4 py-2 border border-border rounded-md text-sm text-foreground placeholder:text-muted-foreground focus:outline-hidden focus:ring-1 focus:ring-blue-500 focus:border-blue-500" /> setStatusFilter(e.target.value as typeof statusFilter)} - className="border border-gray-200 rounded-md px-3 py-2 text-sm text-gray-700 focus:outline-hidden focus:ring-1 focus:ring-blue-500 focus:border-blue-500 bg-white" + className="border border-border rounded-md px-3 py-2 text-sm text-foreground focus:outline-hidden focus:ring-1 focus:ring-blue-500 focus:border-blue-500 bg-background" > All Status Pending Review @@ -934,10 +1020,10 @@ export function TeamGuardrailsTab({ accessToken }: TeamGuardrailsTabProps) { - {isLoading && Loading submissions…} + {isLoading && Loading submissions…} {error && {error}} {!isLoading && !error && filtered.length === 0 && ( - No guardrails match your filters. + No guardrails match your filters. )} {!isLoading && !error && @@ -985,119 +1071,86 @@ export function TeamGuardrailsTab({ accessToken }: TeamGuardrailsTabProps) { open={isSubmitModalOpen} onCancel={() => { setIsSubmitModalOpen(false); - submitForm.resetFields(); + submitForm.reset(); }} - onOk={() => submitForm.submit()} + onOk={handleSubmitGuardrail} okText="Submit for Review" > - + Your guardrail will be sent for admin review before it becomes active. - { - const litellm_params: Record = { - ...(values.extra_litellm_params ? JSON.parse(values.extra_litellm_params) : {}), - guardrail: "generic_guardrail_api", - mode: values.mode, - api_base: values.api_base, - }; - try { - await registerGuardrail.mutateAsync({ - team_id: values.team_id, - guardrail_name: values.guardrail_name, - litellm_params, - guardrail_info: values.guardrail_info ? JSON.parse(values.guardrail_info) : undefined, - }); - toast.success("Guardrail submitted for review"); - setIsSubmitModalOpen(false); - submitForm.resetFields(); - fetchSubmissions(); - } catch { - // error already handled by networking layer - } - }} - > - - - - - - - - - Pre Call - Post Call - During Call - - - - - - { - if (!value) return Promise.resolve(); - try { - const parsed = JSON.parse(value); - if (typeof parsed !== "object" || Array.isArray(parsed)) { - return Promise.reject("Must be a JSON object"); - } - return Promise.resolve(); - } catch { - return Promise.reject("Invalid JSON"); - } - }, - }, - ]} - > - - - { - if (!value) return Promise.resolve(); - try { - JSON.parse(value); - return Promise.resolve(); - } catch { - return Promise.reject("Invalid JSON"); - } - }, - }, - ]} - > - - - + + + + + {({ id, value, onChange }) => } + + + {({ ref, ...field }) => } + + + {({ id, value, onChange, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy }) => ( + + + + + + {GUARDRAIL_MODES.map((mode) => ( + + {mode.label} + + ))} + + + )} + + + {({ ref, ...field }) => ( + + )} + + + {({ ref, ...field }) => ( + + )} + + + {({ ref, ...field }) => ( + + )} + + + + ); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/CompetitorIntentConfiguration.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/CompetitorIntentConfiguration.test.tsx new file mode 100644 index 00000000000..e1e7a62668e --- /dev/null +++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/CompetitorIntentConfiguration.test.tsx @@ -0,0 +1,178 @@ +import { useState } from "react"; +import { render, screen } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import { beforeEach, describe, expect, it, vi } from "vitest"; + +import { getMajorAirlines } from "@/components/networking"; + +import CompetitorIntentConfiguration, { type CompetitorIntentConfig } from "./CompetitorIntentConfiguration"; + +vi.mock("@/components/networking", () => ({ getMajorAirlines: vi.fn() })); + +const mockAirlines = vi.mocked(getMajorAirlines); +const onChange = vi.fn(); + +const DEFAULT_CONFIG: CompetitorIntentConfig = { + competitor_intent_type: "airline", + brand_self: [], + locations: [], + policy: { + competitor_comparison: "refuse", + possible_competitor_comparison: "reframe", + }, + threshold_high: 0.7, + threshold_medium: 0.45, + threshold_low: 0.3, +}; + +const Harness = ({ initialEnabled = true }: { initialEnabled?: boolean }) => { + const [enabled, setEnabled] = useState(initialEnabled); + const [config, setConfig] = useState(initialEnabled ? DEFAULT_CONFIG : null); + const handleChange = (nextEnabled: boolean, nextConfig: CompetitorIntentConfig | null) => { + onChange(nextEnabled, nextConfig); + setEnabled(nextEnabled); + setConfig(nextConfig); + }; + return ( + + ); +}; + +const lastConfig = (): CompetitorIntentConfig => onChange.mock.calls[onChange.mock.calls.length - 1][1]; + +const chooseOption = async (user: ReturnType, index: number, optionText: string) => { + await user.click(screen.getAllByRole("combobox")[index]); + const options = await screen.findAllByText(optionText); + await user.click(options[options.length - 1]); +}; + +describe("CompetitorIntentConfiguration reported config", () => { + beforeEach(() => { + vi.clearAllMocks(); + mockAirlines.mockResolvedValue({ airlines: [] }); + }); + + it("reports the seeded config when switched on and null when switched off", async () => { + const user = userEvent.setup(); + render(); + + await user.click(screen.getByRole("switch")); + expect(onChange).toHaveBeenNthCalledWith(1, true, DEFAULT_CONFIG); + + await user.click(screen.getByRole("switch")); + expect(onChange).toHaveBeenNthCalledWith(2, false, null); + }); + + it("keeps every other key when the intent type changes", async () => { + const user = userEvent.setup(); + render(); + + await chooseOption(user, 0, "Generic (specify competitors manually)"); + + expect(lastConfig()).toStrictEqual({ ...DEFAULT_CONFIG, competitor_intent_type: "generic" }); + expect(screen.getByText("Competitors")).toBeInTheDocument(); + expect(screen.queryByText("Locations (optional)")).not.toBeInTheDocument(); + }); + + it("reports a policy change without dropping the other policy key", async () => { + const user = userEvent.setup(); + render(); + + await chooseOption(user, 3, "Reframe (suggest alternative)"); + + expect(lastConfig()).toStrictEqual({ + ...DEFAULT_CONFIG, + policy: { competitor_comparison: "reframe", possible_competitor_comparison: "reframe" }, + }); + }); + + it("commits comma separated brand terms as separate tags", async () => { + const user = userEvent.setup(); + render(); + + const brandSelf = screen.getAllByRole("combobox")[1]; + await user.click(brandSelf); + await user.type(brandSelf, "acme,globex,"); + + expect(lastConfig().brand_self).toStrictEqual(["acme", "globex"]); + }); + + it("commits the pending brand term when the field loses focus", async () => { + const user = userEvent.setup(); + render(); + + const brandSelf = screen.getAllByRole("combobox")[1]; + await user.click(brandSelf); + await user.type(brandSelf, "acme"); + await user.tab(); + + expect(lastConfig().brand_self).toStrictEqual(["acme"]); + }); + + it("expands a picked airline into all of its match variants, lowercased", async () => { + mockAirlines.mockResolvedValue({ airlines: [{ id: "qr", match: "Qatar Airways|qatar|qr", tags: [] }] }); + const user = userEvent.setup(); + render(); + + await user.click(screen.getAllByRole("combobox")[1]); + const options = await screen.findAllByText(/Qatar Airways/); + await user.click(options[options.length - 1]); + + expect(lastConfig().brand_self).toStrictEqual(["qatar airways", "qatar", "qr"]); + }); + + it("reports locations only while the airline type is selected", async () => { + const user = userEvent.setup(); + render(); + + const locations = screen.getAllByRole("combobox")[2]; + await user.click(locations); + await user.type(locations, "doha,"); + + expect(lastConfig()).toStrictEqual({ ...DEFAULT_CONFIG, locations: ["doha"] }); + }); + + it("reports a typed decimal threshold and leaves the other two alone", async () => { + const user = userEvent.setup(); + render(); + + const thresholds = screen.getAllByRole("spinbutton"); + await user.clear(thresholds[0]); + await user.type(thresholds[0], "0.55"); + + expect(lastConfig()).toStrictEqual({ ...DEFAULT_CONFIG, threshold_high: 0.55 }); + }); + + it("falls back to the default threshold when the field is cleared", async () => { + const user = userEvent.setup(); + render(); + + await user.clear(screen.getAllByRole("spinbutton")[1]); + + expect(lastConfig()).toStrictEqual(DEFAULT_CONFIG); + }); + + it("clamps a threshold above the maximum back to 1 when the field is left", async () => { + const user = userEvent.setup(); + render(); + + const thresholds = screen.getAllByRole("spinbutton"); + await user.clear(thresholds[2]); + await user.type(thresholds[2], "5"); + await user.tab(); + + expect(lastConfig()).toStrictEqual({ ...DEFAULT_CONFIG, threshold_low: 1 }); + }); + + it("explains the filter without rendering any control while switched off", () => { + render(); + + expect( + screen.getByText( + "Block or reframe competitor comparison questions. When enabled, airline type auto-loads competitors from IATA; generic type requires manual competitor list.", + ), + ).toBeInTheDocument(); + expect(screen.queryAllByRole("combobox")).toHaveLength(0); + expect(screen.queryAllByRole("spinbutton")).toHaveLength(0); + }); +}); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/CompetitorIntentConfiguration.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/CompetitorIntentConfiguration.tsx index e3867156d01..48ef20cd35b 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/CompetitorIntentConfiguration.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/CompetitorIntentConfiguration.tsx @@ -1,9 +1,13 @@ -import React, { useEffect, useState } from "react"; -import { Card, Typography, Select, Switch, Form, Space, InputNumber } from "antd"; -import { getMajorAirlines } from "@/components/networking"; +import React, { useEffect, useId, useState } from "react"; -const { Title, Text } = Typography; -const { Option } = Select; +import { getMajorAirlines } from "@/components/networking"; +import { Field, FieldDescription, FieldGroup, FieldLabel } from "@/components/shared/form/field"; +import { Card, CardAction, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; +import { Switch } from "@/components/ui/switch"; + +import { TagsInput } from "./TagsInput"; +import { ThresholdInput } from "./ThresholdInput"; export interface MajorAirline { id: string; @@ -45,6 +49,27 @@ const DEFAULT_CONFIG: CompetitorIntentConfig = { threshold_low: 0.3, }; +const INTENT_TYPES = [ + { value: "airline", label: "Airline (auto-load competitors from IATA)" }, + { value: "generic", label: "Generic (specify competitors manually)" }, +] as const; + +const COMPETITOR_COMPARISON_POLICIES = [ + { value: "refuse", label: "Refuse (block request)" }, + { value: "reframe", label: "Reframe (suggest alternative)" }, +] as const; + +const POSSIBLE_COMPETITOR_COMPARISON_POLICIES = [ + { value: "refuse", label: "Refuse (block request)" }, + { value: "reframe", label: "Reframe (suggest alternative to backend LLM)" }, +] as const; + +const THRESHOLDS = [ + { field: "threshold_high", label: "High", hint: "e.g. 0.7", fallback: 0.7 }, + { field: "threshold_medium", label: "Medium", hint: "e.g. 0.45", fallback: 0.45 }, + { field: "threshold_low", label: "Low", hint: "e.g. 0.3", fallback: 0.3 }, +] as const; + const CompetitorIntentConfiguration: React.FC = ({ enabled, config, @@ -54,6 +79,7 @@ const CompetitorIntentConfiguration: React.FC([]); const [loadingAirlines, setLoadingAirlines] = useState(false); + const fieldId = useId(); useEffect(() => { if (effectiveConfig.competitor_intent_type === "airline" && accessToken && airlineOptions.length === 0) { @@ -111,212 +137,206 @@ const CompetitorIntentConfiguration: React.FC + Competitor Intent Filter + + + + + ); + if (!enabled) { return ( - - - Competitor Intent Filter - - - - } - size="small" - > - - Block or reframe competitor comparison questions. When enabled, airline type auto-loads competitors from IATA; - generic type requires manual competitor list. - + + {header} + + + Block or reframe competitor comparison questions. When enabled, airline type auto-loads competitors from + IATA; generic type requires manual competitor list. + + ); } - return ( - - - Competitor Intent Filter - - - - } - size="small" - > - - Block or reframe competitor comparison questions. Airline type uses major airlines (excluding your brand); - generic requires manual competitor list. - - - - handleConfigChange("competitor_intent_type", v)} - style={{ width: "100%" }} - > - Airline (auto-load competitors from IATA) - Generic (specify competitors manually) - - + const airlineTags = + effectiveConfig.competitor_intent_type === "airline" && airlineOptions.length > 0 + ? airlineOptions.map((a) => { + const primary = a.match.split("|")[0]?.trim() ?? a.id; + const variants = a.match + .split("|") + .map((s) => s.trim().toLowerCase()) + .filter(Boolean); + return { + value: primary.toLowerCase(), + label: `${primary}${variants.length > 1 ? ` (${variants.slice(1).join(", ")})` : ""}`, + }; + }) + : []; - - + {header} + + + Block or reframe competitor comparison questions. Airline type uses major airlines (excluding your brand); + generic requires manual competitor list. + + + + Type + v !== null && handleConfigChange("competitor_intent_type", v)} + > + + + + + {INTENT_TYPES.map((type) => ( + + {type.label} + + ))} + + + + + + Your Brand (brand_self) + + effectiveConfig.competitor_intent_type === "airline" && airlineOptions.length > 0 + ? handleBrandSelfChange(v) + : handleNestedArrayChange("brand_self", v) + } + options={airlineTags} + tokenSeparators={[","]} + loading={loadingAirlines} + placeholder={ + effectiveConfig.competitor_intent_type === "airline" ? "Search or select airline, or type to add custom" : "Type and press Enter to add" - } - value={effectiveConfig.brand_self} - onChange={(v) => - effectiveConfig.competitor_intent_type === "airline" && airlineOptions.length > 0 - ? handleBrandSelfChange(v ?? []) - : handleNestedArrayChange("brand_self", v ?? []) - } - tokenSeparators={[","]} - loading={loadingAirlines} - showSearch - filterOption={(input, option) => - (option?.label?.toString().toLowerCase() ?? "").includes(input.toLowerCase()) - } - optionFilterProp="label" - options={ - effectiveConfig.competitor_intent_type === "airline" && airlineOptions.length > 0 - ? airlineOptions.map((a) => { - const primary = a.match.split("|")[0]?.trim() ?? a.id; - const variants = a.match - .split("|") - .map((s) => s.trim().toLowerCase()) - .filter(Boolean); - return { - value: primary.toLowerCase(), - label: `${primary}${variants.length > 1 ? ` (${variants.slice(1).join(", ")})` : ""}`, - }; - }) - : undefined - } - /> - - - {effectiveConfig.competitor_intent_type === "airline" && ( - - handleNestedArrayChange("locations", v ?? [])} - tokenSeparators={[","]} + } /> - - )} + + {effectiveConfig.competitor_intent_type === "airline" + ? "Select your airline from the list (excluded from competitors) or type to add a custom term" + : "Names/codes users use for your brand"} + + - {effectiveConfig.competitor_intent_type === "generic" && ( - + {effectiveConfig.competitor_intent_type === "airline" && ( + + Locations (optional) + handleNestedArrayChange("locations", v)} + tokenSeparators={[","]} + placeholder="Type and press Enter to add" + /> + Countries, cities, airports for disambiguation (e.g. qatar, doha) + + )} + + {effectiveConfig.competitor_intent_type === "generic" && ( + + Competitors + handleNestedArrayChange("competitors", v)} + tokenSeparators={[","]} + placeholder="Type and press Enter to add" + /> + Competitor names to detect (required for generic type) + + )} + + + Policy: Competitor comparison handleNestedArrayChange("competitors", v ?? [])} - tokenSeparators={[","]} - /> - - )} + value={effectiveConfig.policy?.competitor_comparison ?? "refuse"} + onValueChange={(v: string | null) => v !== null && handlePolicyChange("competitor_comparison", v)} + > + + + + + {COMPETITOR_COMPARISON_POLICIES.map((policy) => ( + + {policy.label} + + ))} + + + - - handlePolicyChange("competitor_comparison", v)} - style={{ width: "100%" }} - > - Refuse (block request) - Reframe (suggest alternative) - - + + + Policy: Possible competitor comparison + + + v !== null && handlePolicyChange("possible_competitor_comparison", v) + } + > + + + + + {POSSIBLE_COMPETITOR_COMPARISON_POLICIES.map((policy) => ( + + {policy.label} + + ))} + + + - - handlePolicyChange("possible_competitor_comparison", v)} - style={{ width: "100%" }} - > - Refuse (block request) - Reframe (suggest alternative to backend LLM) - - - - - Classify competitor intent by confidence (0–1). Higher confidence → stronger intent. - + + Confidence thresholds + + {THRESHOLDS.map((threshold) => ( + + {threshold.label} + handleConfigChange(threshold.field, v ?? threshold.fallback)} + min={0} + max={1} + step={0.05} + /> + {threshold.hint} + + ))} + + + Classify competitor intent by confidence (0–1). Higher confidence -> stronger intent. + - High (≥): Treat as full competitor comparison → uses "Competitor + High (≥): Treat as full competitor comparison -> uses "Competitor comparison" policy - Medium (≥): Treat as possible comparison → uses "Possible competitor + Medium (≥): Treat as possible comparison -> uses "Possible competitor comparison" policy - Low (≥): Log only; allow request. Below Low → allow with no action + Low (≥): Log only; allow request. Below Low -> allow with no action Raise thresholds to be more permissive; lower them to be stricter. - - } - > - - - handleConfigChange("threshold_high", v ?? 0.7)} - style={{ width: 80 }} - /> - - - handleConfigChange("threshold_medium", v ?? 0.45)} - style={{ width: 80 }} - /> - - - handleConfigChange("threshold_low", v ?? 0.3)} - style={{ width: 80 }} - /> - - - - + + + + ); }; diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/TagsInput.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/TagsInput.test.tsx new file mode 100644 index 00000000000..95b9b2d0f03 --- /dev/null +++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/TagsInput.test.tsx @@ -0,0 +1,88 @@ +import { useState } from "react"; +import { render, screen } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import { describe, expect, it, vi } from "vitest"; + +import { TagsInput, type TagsInputOption } from "./TagsInput"; + +const Harness = ({ + initial = [], + options, + onValueChange, +}: { + initial?: string[]; + options?: TagsInputOption[]; + onValueChange?: (value: string[]) => void; +}) => { + const [value, setValue] = useState(initial); + return ( + { + onValueChange?.(next); + setValue(next); + }} + /> + ); +}; + +describe("TagsInput", () => { + it("commits each token separated value and keeps the unterminated remainder in the field", async () => { + const user = userEvent.setup(); + const onValueChange = vi.fn(); + render(); + + const input = screen.getByRole("combobox"); + await user.type(input, "acme,globex,initech"); + + expect(onValueChange).toHaveBeenLastCalledWith(["acme", "globex"]); + expect(input).toHaveValue("initech"); + }); + + it("commits the pending value when the field loses focus", async () => { + const user = userEvent.setup(); + const onValueChange = vi.fn(); + render(); + + await user.type(screen.getByRole("combobox"), "acme"); + await user.tab(); + + expect(onValueChange).toHaveBeenLastCalledWith(["acme"]); + }); + + it("commits the pending value on Enter without submitting the surrounding form", async () => { + const user = userEvent.setup(); + const onSubmit = vi.fn((event: React.FormEvent) => event.preventDefault()); + const onValueChange = vi.fn(); + render( + + + Save + , + ); + + await user.type(screen.getByRole("combobox"), "acme{Enter}"); + + expect(onValueChange).toHaveBeenLastCalledWith(["acme"]); + expect(onSubmit).not.toHaveBeenCalled(); + }); + + it("ignores a value that is already a tag", async () => { + const user = userEvent.setup(); + const onValueChange = vi.fn(); + render(); + + await user.type(screen.getByRole("combobox"), "acme,"); + + expect(onValueChange).not.toHaveBeenCalled(); + }); + + it("labels a chip with the matching option label rather than the raw value", () => { + render(); + + expect(screen.getByLabelText("Qatar Airways (qr)")).toBeInTheDocument(); + }); +}); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/TagsInput.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/TagsInput.tsx new file mode 100644 index 00000000000..0d799474399 --- /dev/null +++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/TagsInput.tsx @@ -0,0 +1,139 @@ +"use client"; + +import React, { useState } from "react"; + +import { + Combobox, + ComboboxChip, + ComboboxChips, + ComboboxChipsInput, + ComboboxContent, + ComboboxEmpty, + ComboboxItem, + ComboboxList, + ComboboxValue, + useComboboxAnchor, +} from "@/components/ui/combobox"; + +export interface TagsInputOption { + label: string; + value: string; +} + +interface TagsInputProps { + value: string[]; + onValueChange: (value: string[]) => void; + options?: TagsInputOption[]; + placeholder?: string; + emptyText?: string; + tokenSeparators?: string[]; + loading?: boolean; + id?: string; +} + +const splitOnSeparators = (raw: string, separators: string[]): string[] => + separators.reduce((parts, separator) => parts.flatMap((part) => part.split(separator)), [raw]); + +const toOption = (options: TagsInputOption[], value: string): TagsInputOption => + options.find((option) => option.value === value) ?? { label: value, value }; + +const matchesQuery = (option: TagsInputOption, query: string): boolean => + option.label.toLowerCase().includes(query.trim().toLowerCase()); + +export const TagsInput = ({ + value, + onValueChange, + options = [], + placeholder, + emptyText = "No matching options", + tokenSeparators = [], + loading = false, + id, +}: TagsInputProps) => { + const anchor = useComboboxAnchor(); + const [query, setQuery] = useState(""); + + const selected = value.map((tag) => toOption(options, tag)); + const pending = query.trim(); + const isCreatable = pending.length > 0 && !options.some((option) => option.value === pending); + const items = isCreatable ? [{ label: pending, value: pending }, ...options] : options; + + const addTags = (tags: string[]) => { + const additions = tags + .map((tag) => tag.trim()) + .filter(Boolean) + .filter((tag, index, all) => all.indexOf(tag) === index && !value.includes(tag)); + if (additions.length > 0) onValueChange([...value, ...additions]); + }; + + const commitPending = () => { + setQuery(""); + addTags([query]); + }; + + const handleKeyDown = (event: React.KeyboardEvent) => { + if (event.key !== "Enter") return; + event.preventDefault(); + if (event.currentTarget.getAttribute("aria-activedescendant")) return; + commitPending(); + }; + + const handleInputValueChange = (next: string) => { + if (!tokenSeparators.some((separator) => next.includes(separator))) { + setQuery(next); + return; + } + const parts = splitOnSeparators(next, tokenSeparators); + setQuery(parts[parts.length - 1] ?? ""); + addTags(parts.slice(0, -1)); + }; + + return ( + { + setQuery(""); + onValueChange(next.map((option) => option.value)); + }} + inputValue={query} + onInputValueChange={handleInputValueChange} + isItemEqualToValue={(option: TagsInputOption, other: TagsInputOption) => option.value === other.value} + itemToStringLabel={(option: TagsInputOption) => option.label} + filter={matchesQuery} + openOnInputClick + > + } className="min-h-8 py-1 text-sm"> + + {(chips: TagsInputOption[]) => ( + <> + {chips.map((option) => ( + + {option.label} + + ))} + + + )} + + + + {emptyText} + + {(option: TagsInputOption) => ( + + {option.label} + + )} + + + + ); +}; diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/ThresholdInput.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/ThresholdInput.test.tsx new file mode 100644 index 00000000000..c9cd4eda086 --- /dev/null +++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/ThresholdInput.test.tsx @@ -0,0 +1,89 @@ +import { useState } from "react"; +import { render, screen } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import { describe, expect, it, vi } from "vitest"; + +import { ThresholdInput } from "./ThresholdInput"; + +const Harness = ({ + initial = 0.7, + onValueChange, +}: { + initial?: number; + onValueChange?: (v: number | null) => void; +}) => { + const [value, setValue] = useState(initial); + return ( + { + onValueChange?.(next); + setValue(next ?? initial); + }} + /> + ); +}; + +describe("ThresholdInput", () => { + it("displays the value at the precision of the step", () => { + render(); + + expect(screen.getByRole("spinbutton")).toHaveValue("0.70"); + }); + + it("reports the parsed value while typing and null once the field is empty", async () => { + const user = userEvent.setup(); + const onValueChange = vi.fn(); + render(); + + const input = screen.getByRole("spinbutton"); + await user.clear(input); + expect(onValueChange).toHaveBeenLastCalledWith(null); + + await user.type(input, "0.55"); + expect(onValueChange).toHaveBeenLastCalledWith(0.55); + }); + + it("clamps a value above the maximum when the field loses focus", async () => { + const user = userEvent.setup(); + const onValueChange = vi.fn(); + render(); + + const input = screen.getByRole("spinbutton"); + await user.clear(input); + await user.type(input, "5"); + await user.tab(); + + expect(onValueChange).toHaveBeenLastCalledWith(1); + expect(input).toHaveValue("1.00"); + }); + + it("steps by the step on the arrow keys and stops at the bounds", async () => { + const user = userEvent.setup(); + const onValueChange = vi.fn(); + render(); + + const input = screen.getByRole("spinbutton"); + await user.click(input); + await user.keyboard("{ArrowUp}"); + expect(onValueChange).toHaveBeenLastCalledWith(1); + + await user.keyboard("{ArrowUp}"); + expect(onValueChange).toHaveBeenLastCalledWith(1); + + await user.keyboard("{ArrowDown}"); + expect(onValueChange).toHaveBeenLastCalledWith(0.95); + }); + + it("exposes the bounds and the current value to assistive technology", () => { + render(); + + const input = screen.getByRole("spinbutton"); + expect(input).toHaveAttribute("aria-valuemin", "0"); + expect(input).toHaveAttribute("aria-valuemax", "1"); + expect(input).toHaveAttribute("aria-valuenow", "0.45"); + }); +}); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/ThresholdInput.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/ThresholdInput.tsx new file mode 100644 index 00000000000..a0fdb7e3aa7 --- /dev/null +++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/content_filter/ThresholdInput.tsx @@ -0,0 +1,76 @@ +"use client"; + +import { useState } from "react"; + +import { Input } from "@/components/ui/input"; + +interface ThresholdInputProps { + value: number; + onValueChange: (value: number | null) => void; + min: number; + max: number; + step: number; + id?: string; +} + +const decimalsOf = (step: number): number => (String(step).split(".")[1] ?? "").length; + +const clamp = (value: number, min: number, max: number): number => Math.min(Math.max(value, min), max); + +const parseDecimal = (raw: string): number | null => { + const trimmed = raw.trim(); + if (trimmed === "") return null; + const parsed = Number(trimmed); + return Number.isFinite(parsed) ? parsed : null; +}; + +export const ThresholdInput = ({ value, onValueChange, min, max, step, id }: ThresholdInputProps) => { + const [draft, setDraft] = useState(null); + const decimals = decimalsOf(step); + const display = draft ?? value.toFixed(decimals); + const current = parseDecimal(display); + + const stepBy = (direction: 1 | -1) => { + const next = clamp(Number(((current ?? value) + direction * step).toFixed(decimals)), min, max); + setDraft(next.toFixed(decimals)); + onValueChange(next); + }; + + const handleBlur = () => { + setDraft(null); + if (current === null) { + onValueChange(null); + return; + } + const clamped = clamp(current, min, max); + if (clamped !== current) onValueChange(clamped); + }; + + return ( + { + setDraft(event.target.value); + onValueChange(parseDecimal(event.target.value)); + }} + onBlur={handleBlur} + onKeyDown={(event) => { + if (event.key === "ArrowUp") { + event.preventDefault(); + stepBy(1); + } + if (event.key === "ArrowDown") { + event.preventDefault(); + stepBy(-1); + } + }} + /> + ); +}; diff --git a/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/VectorStoreForm.integration.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/VectorStoreForm.integration.test.tsx new file mode 100644 index 00000000000..3b9c714d354 --- /dev/null +++ b/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/VectorStoreForm.integration.test.tsx @@ -0,0 +1,191 @@ +import { render, screen } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import { beforeEach, describe, expect, it, vi } from "vitest"; + +import { vectorStoreCreateCall } from "@/components/networking"; +import { toast } from "@/lib/toast"; + +import VectorStoreForm from "./VectorStoreForm"; + +vi.mock("@/components/networking", () => ({ + vectorStoreCreateCall: vi.fn(), +})); + +vi.mock("@/components/llm_calls/fetch_models", () => ({ + fetchAvailableModels: vi.fn().mockResolvedValue([ + { model_group: "text-embedding-3-small", mode: "embedding" }, + { model_group: "gpt-4o", mode: "chat" }, + ]), +})); + +const mockCreate = vi.mocked(vectorStoreCreateCall); +const mockToast = vi.mocked(toast); + +const onSuccess = vi.fn(); + +const renderForm = () => + render( + , + ); + +const setupUser = () => userEvent.setup({ pointerEventsCheck: 0 }); + +const chooseFromSelect = async (user: ReturnType, index: number, optionText: string) => { + const trigger = screen.getAllByRole("combobox")[index]; + await user.click(trigger); + if (trigger.getAttribute("aria-expanded") !== "true") { + trigger.focus(); + await user.keyboard("{Enter}"); + } + const options = await screen.findAllByText(optionText); + await user.click(options[options.length - 1]); +}; + +const chooseProvider = (user: ReturnType, providerLabel: string) => + chooseFromSelect(user, 0, providerLabel); + +const submit = async (user: ReturnType) => + user.click(screen.getByRole("button", { name: "Create" })); + +const createdPayload = () => mockCreate.mock.calls[0][1]; + +describe("VectorStoreForm submit payload", () => { + beforeEach(() => { + vi.clearAllMocks(); + mockCreate.mockResolvedValue(undefined); + }); + + it("sends every payload key for the default provider, leaving untouched optional fields undefined", async () => { + const user = setupUser(); + renderForm(); + + await user.type(screen.getByPlaceholderText("Enter vector store ID from your provider"), "vs-bedrock"); + await submit(user); + + await vi.waitFor(() => expect(mockCreate).toHaveBeenCalledTimes(1)); + expect(mockCreate.mock.calls[0][0]).toBe("test-token"); + expect(createdPayload()).toStrictEqual({ + vector_store_id: "vs-bedrock", + custom_llm_provider: "bedrock", + vector_store_name: undefined, + vector_store_description: undefined, + vector_store_metadata: {}, + litellm_credential_name: undefined, + litellm_params: {}, + }); + expect(onSuccess).toHaveBeenCalledTimes(1); + }); + + it("sends the filled optional fields, parsed metadata and the selected credential", async () => { + const user = setupUser(); + renderForm(); + + await user.type(screen.getByPlaceholderText("Enter vector store ID from your provider"), "vs-full"); + const textboxes = screen.getAllByRole("textbox"); + await user.type(textboxes[1], "Support docs"); + await user.type(textboxes[2], "Docs for the support team"); + await user.clear(screen.getByPlaceholderText('{"key": "value"}')); + await user.type(screen.getByPlaceholderText('{"key": "value"}'), '{{"tier": "gold"}'); + await chooseFromSelect(user, 1, "bedrock-prod"); + await submit(user); + + await vi.waitFor(() => expect(mockCreate).toHaveBeenCalledTimes(1)); + expect(createdPayload()).toStrictEqual({ + vector_store_id: "vs-full", + custom_llm_provider: "bedrock", + vector_store_name: "Support docs", + vector_store_description: "Docs for the support team", + vector_store_metadata: { tier: "gold" }, + litellm_credential_name: "bedrock-prod", + litellm_params: {}, + }); + }); + + it("renames the milvus embedding model to litellm_embedding_model inside litellm_params", async () => { + const user = setupUser(); + renderForm(); + + await chooseProvider(user, "Milvus"); + await user.type(screen.getByPlaceholderText("Enter vector store ID from your provider"), "vs-milvus"); + await user.type(screen.getByPlaceholderText("username:password or api key"), "user:pass"); + await user.type(screen.getByPlaceholderText("https://your-milvus-endpoint.com/"), "https://milvus.example.com"); + await chooseFromSelect(user, 1, "text-embedding-3-small"); + await submit(user); + + await vi.waitFor(() => expect(mockCreate).toHaveBeenCalledTimes(1)); + expect(createdPayload().litellm_params).toStrictEqual({ + api_key: "user:pass", + api_base: "https://milvus.example.com", + litellm_embedding_model: "text-embedding-3-small", + }); + expect(createdPayload().custom_llm_provider).toBe("milvus"); + }); + + it("sends a provider field's seeded default even when the user never touches it", async () => { + const user = setupUser(); + renderForm(); + + await chooseProvider(user, "Vertex AI Search"); + await user.type( + screen.getByPlaceholderText('my-datastore_1234567890 (data store ID from Vertex AI / "Agent Search" console)'), + "vs-vertex", + ); + await user.type(screen.getByPlaceholderText("my-gcp-project-id"), "gcp-proj"); + await submit(user); + + await vi.waitFor(() => expect(mockCreate).toHaveBeenCalledTimes(1)); + expect(createdPayload().litellm_params).toStrictEqual({ + vertex_project: "gcp-proj", + vertex_location: "global", + vertex_collection_id: undefined, + vertex_engine_id: undefined, + }); + }); + + it("keeps values typed under one provider when a later provider reuses the same field name", async () => { + const user = setupUser(); + renderForm(); + + await chooseProvider(user, "PostgreSQL pgvector (LiteLLM Connector)"); + await user.type(screen.getByPlaceholderText("http://your-deployed-server:8000"), "http://pg:8000"); + await user.type(screen.getByPlaceholderText("your-deployed-api-key"), "pg-key"); + await chooseProvider(user, "Azure OpenAI"); + await user.type(screen.getByPlaceholderText("Enter vector store ID from your provider"), "vs-azure"); + await submit(user); + + await vi.waitFor(() => expect(mockCreate).toHaveBeenCalledTimes(1)); + expect(createdPayload().litellm_params).toStrictEqual({ + api_key: "pg-key", + api_base: "http://pg:8000", + }); + }); + + it("blocks the request and reports invalid metadata JSON instead of submitting", async () => { + const user = setupUser(); + renderForm(); + + await user.type(screen.getByPlaceholderText("Enter vector store ID from your provider"), "vs-bad-json"); + await user.clear(screen.getByPlaceholderText('{"key": "value"}')); + await user.type(screen.getByPlaceholderText('{"key": "value"}'), "not json"); + await submit(user); + + await vi.waitFor(() => expect(mockToast.fromError).toHaveBeenCalledWith("Invalid JSON in metadata field")); + expect(mockCreate).not.toHaveBeenCalled(); + }); + + it("keeps the required-field messages that block an empty submit", async () => { + const user = setupUser(); + renderForm(); + + await submit(user); + + expect(await screen.findByText("Please input the vector store ID from your api provider")).toBeInTheDocument(); + expect(mockCreate).not.toHaveBeenCalled(); + }); +}); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/VectorStoreForm.tsx b/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/VectorStoreForm.tsx index 321ff62b1df..97c633f4f13 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/VectorStoreForm.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/VectorStoreForm.tsx @@ -1,18 +1,37 @@ import React, { useState, useEffect } from "react"; -import { TextInput, Button as TremorButton } from "@tremor/react"; -import { Modal, Form, Select, Tooltip, Input, Alert } from "antd"; -import { InfoCircleOutlined } from "@ant-design/icons"; +import { Modal, Alert } from "antd"; +import { CircleHelp, Eye, EyeOff } from "lucide-react"; +import { useWatch } from "react-hook-form"; +import { z } from "zod/v4"; import { CredentialItem, vectorStoreCreateCall } from "@/components/networking"; import { VectorStoreProviders, vectorStoreProviderLogoMap, vectorStoreProviderMap, getProviderSpecificFields, + getVectorStoreProviderLogoAndName, VectorStoreFieldConfig, } from "@/components/vector_store_providers"; import { Logo } from "@/components/molecules/logo/Logo"; import { fetchAvailableModels, ModelGroup } from "@/components/llm_calls/fetch_models"; import { toast } from "@/lib/toast"; +import { FieldGroup } from "@/components/shared/form/field"; +import { FormField } from "@/components/shared/form/FormField"; +import { Button } from "@/components/ui/button"; +import { + Combobox, + ComboboxContent, + ComboboxEmpty, + ComboboxInput, + ComboboxItem, + ComboboxList, +} from "@/components/ui/combobox"; +import { Input } from "@/components/ui/input"; +import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "@/components/ui/input-group"; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; +import { Textarea } from "@/components/ui/textarea"; +import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; +import { useZodForm } from "@/lib/forms/useZodForm"; interface VectorStoreFormProps { isVisible: boolean; @@ -22,6 +41,103 @@ interface VectorStoreFormProps { credentials: CredentialItem[]; } +const PROVIDER_FIELD_NAMES = [ + "api_base", + "api_key", + "vertex_project", + "vertex_location", + "vertex_collection_id", + "vertex_engine_id", + "embedding_model", + "vector_bucket_name", + "index_name", + "aws_region_name", +] as const; + +type ProviderFieldName = (typeof PROVIDER_FIELD_NAMES)[number]; + +const isProviderFieldName = (name: string): name is ProviderFieldName => + (PROVIDER_FIELD_NAMES as readonly string[]).includes(name); + +const optionalText = z.string().optional(); + +const vectorStoreShape = { + custom_llm_provider: z.string().min(1, "Please select a provider"), + vector_store_id: z.string().min(1, "Please input the vector store ID from your api provider"), + vector_store_name: optionalText, + vector_store_description: optionalText, + litellm_credential_name: z.string().nullable().optional(), + api_base: optionalText, + api_key: optionalText, + vertex_project: optionalText, + vertex_location: optionalText, + vertex_collection_id: optionalText, + vertex_engine_id: optionalText, + embedding_model: optionalText, + vector_bucket_name: optionalText, + index_name: optionalText, + aws_region_name: optionalText, +}; + +const vectorStoreSchema = z.object(vectorStoreShape).superRefine((values, ctx) => { + getProviderSpecificFields(values.custom_llm_provider) + .filter((field) => field.required && isProviderFieldName(field.name) && !values[field.name]) + .forEach((field) => + ctx.addIssue({ + code: "custom", + path: [field.name], + message: + field.type === "select" + ? `Please select the ${field.label.toLowerCase()}` + : `Please input the ${field.label.toLowerCase()}`, + }), + ); +}); + +type VectorStoreFormValues = z.output; + +const EMPTY_VALUES: VectorStoreFormValues = { + custom_llm_provider: "bedrock", + vector_store_id: "", + vertex_location: "global", +}; + +interface CredentialOption { + label: string; + value: string | null; +} + +const labelWithHint = (label: string, hint: string): React.ReactNode => ( + <> + {label} + + } /> + {hint} + + +); + +const PasswordInput = React.forwardRef>( + (props, ref) => { + const [revealed, setRevealed] = useState(false); + return ( + + + + setRevealed(!revealed)} + > + {revealed ? : } + + + + ); + }, +); +PasswordInput.displayName = "PasswordInput"; + const VectorStoreForm: React.FC = ({ isVisible, onCancel, @@ -29,11 +145,11 @@ const VectorStoreForm: React.FC = ({ accessToken, credentials, }) => { - const [form] = Form.useForm(); + const form = useZodForm(vectorStoreSchema, { defaultValues: EMPTY_VALUES }); const [metadataJson, setMetadataJson] = useState("{}"); const [selectedProvider, setSelectedProvider] = useState("bedrock"); const [modelInfo, setModelInfo] = useState([]); - const vertexEngineId = Form.useWatch("vertex_engine_id", form); + const vertexEngineId = useWatch({ control: form.control, name: "vertex_engine_id" }); useEffect(() => { if (!accessToken) return; @@ -52,10 +168,23 @@ const VectorStoreForm: React.FC = ({ loadModels(); }, [accessToken]); - const handleCreate = async (formValues: any) => { + const credentialOptions: CredentialOption[] = [ + { value: null, label: "None" }, + ...credentials.map((credential) => ({ + value: credential.credential_name, + label: credential.credential_name, + })), + ]; + + const makeProviderChangeHandler = (onChange: (provider: string) => void) => (provider: string | null) => { + if (provider === null) return; + onChange(provider); + setSelectedProvider(provider); + }; + + const handleCreate = async (formValues: VectorStoreFormValues) => { if (!accessToken) return; try { - // Parse metadata JSON let metadata = {}; try { metadata = metadataJson.trim() ? JSON.parse(metadataJson) : {}; @@ -64,36 +193,28 @@ const VectorStoreForm: React.FC = ({ return; } - // Prepare the payload with provider-specific fields - const payload: any = { + const providerFields = getProviderSpecificFields(formValues.custom_llm_provider); + const litellmParams = Object.fromEntries( + providerFields.filter(isSupportedProviderField).map((field) => { + const value = formValues[field.name]; + if (formValues.custom_llm_provider === "milvus" && field.name === "embedding_model") { + return ["litellm_embedding_model", value]; + } + return [field.name, value]; + }), + ); + + await vectorStoreCreateCall(accessToken, { vector_store_id: formValues.vector_store_id, custom_llm_provider: formValues.custom_llm_provider, vector_store_name: formValues.vector_store_name, vector_store_description: formValues.vector_store_description, vector_store_metadata: metadata, litellm_credential_name: formValues.litellm_credential_name, - }; - - // pass all provider fields as litellm params dict - const providerFields = getProviderSpecificFields(formValues.custom_llm_provider); - const litellmParams = providerFields.reduce( - (acc, field) => { - // Special handling for Milvus: rename embedding_model to litellm_embedding_model - if (formValues.custom_llm_provider === "milvus" && field.name === "embedding_model") { - acc["litellm_embedding_model"] = formValues[field.name]; - } else { - acc[field.name] = formValues[field.name]; - } - return acc; - }, - {} as Record, - ); - - payload["litellm_params"] = litellmParams; - - await vectorStoreCreateCall(accessToken, payload); + litellm_params: litellmParams, + }); toast.success("Vector store created successfully"); - form.resetFields(); + form.reset(EMPTY_VALUES); setMetadataJson("{}"); onSuccess(); } catch (error) { @@ -103,312 +224,333 @@ const VectorStoreForm: React.FC = ({ }; const handleCancel = () => { - form.resetFields(); + form.reset(EMPTY_VALUES); setMetadataJson("{}"); setSelectedProvider("bedrock"); onCancel(); }; + const vectorStoreIdPlaceholder = + selectedProvider === "vertex_rag_engine" + ? '6917529027641081856 (corpus ID from Vertex AI / "RAG Engine" console)' + : selectedProvider === "vertex_ai/search_api" + ? vertexEngineId + ? "Any identifier you'll use to reference this in LiteLLM" + : 'my-datastore_1234567890 (data store ID from Vertex AI / "Agent Search" console)' + : "Enter vector store ID from your provider"; + return ( - - - Provider{" "} - - - - - } - name="custom_llm_provider" - rules={[{ required: true, message: "Please select a provider" }]} - initialValue="bedrock" - > - setSelectedProvider(value)}> - {Object.entries(VectorStoreProviders).map(([providerEnum, providerDisplayName]) => { - return ( - - - - {providerDisplayName} - - - ); - })} - - - - {/* PG Vector Setup Instructions */} - {selectedProvider === "pg_vector" && ( - - LiteLLM provides a server to connect to PG Vector. To use this provider: - - - Deploy the litellm-pgvector server from:{" "} - - https://github.com/BerriAI/litellm-pgvector - - - Configure your PostgreSQL database with pgvector extension - Start the server and note the API base URL and API key - Enter those details in the fields below - - - } - type="info" - showIcon - style={{ marginBottom: "16px" }} - /> - )} - - {/* Vertex RAG Engine Setup Instructions */} - {selectedProvider === "vertex_rag_engine" && ( - - To use Vertex AI RAG Engine: - - Note: Google Cloud has renamed this to "RAG Engine" in its console — the steps below still - apply. - - - - Set up your Vertex AI RAG Engine corpus following the guide:{" "} - - Vertex AI RAG Engine Overview - - - Create a corpus in your Google Cloud project - - Note the corpus ID from the Vertex AI console (now labeled "RAG Engine" in Google Cloud) - - Enter the corpus ID in the Vector Store ID field below - - - } - type="info" - showIcon - style={{ marginBottom: "16px" }} - /> - )} - - {/* Vertex AI Search Setup Instructions */} - {selectedProvider === "vertex_ai/search_api" && ( - - To use Vertex AI Search (Discovery Engine): - - Note: Google Cloud has renamed this to "Agent Search" in its console — the steps below still - apply. - - - - Enable the Discovery Engine API on your Google Cloud project and create a data store following the - guide:{" "} - - Create a Vertex AI Search data store - - - Pick a supported location: global, us, or eu - - For most data store types (Cloud Storage, BigQuery, Media): copy the data store ID and enter it in - the Vector Store ID field below. - - - For website, healthcare, and connector-based sources (Drive, Gmail, Slack, Jira, etc.): create a - search app on top of the data store, then copy the Engine ID and enter it in the - Engine ID field. The Vector Store ID is still required as the LiteLLM-side name for this record, but - it isn't used in the GCP URL when Engine ID is set. - - -
+ Block or reframe competitor comparison questions. When enabled, airline type auto-loads competitors from + IATA; generic type requires manual competitor list. +
+ Block or reframe competitor comparison questions. Airline type uses major airlines (excluding your brand); + generic requires manual competitor list. +
LiteLLM provides a server to connect to PG Vector. To use this provider:
To use Vertex AI RAG Engine:
- Note: Google Cloud has renamed this to "RAG Engine" in its console — the steps below still - apply. -
To use Vertex AI Search (Discovery Engine):
- Note: Google Cloud has renamed this to "Agent Search" in its console — the steps below still - apply. -
+ Note: Google Cloud has renamed this to "RAG Engine" in its console — the steps below + still apply. +
+ Note: Google Cloud has renamed this to "Agent Search" in its console — the steps below + still apply. +