From a0a2b2cc3b48a4dc9f94d21c7f16008faeff6854 Mon Sep 17 00:00:00 2001
From: Brent O'Neill <brent.oneill@datastax.com>
Date: Mon, 6 Oct 2025 10:40:57 -0600
Subject: [PATCH] updated inputs in Ingest Settings for cloud-picker component

---
 .../components/ui/inputs/embedding-model.tsx  | 62 ++++++++++++
 .../components/ui/inputs/number-input.tsx     | 68 +++++++++++++
 .../cloud-picker/ingest-settings.tsx          | 98 +++++++++++++------
 3 files changed, 197 insertions(+), 31 deletions(-)
 create mode 100644 frontend/components/ui/inputs/embedding-model.tsx
 create mode 100644 frontend/components/ui/inputs/number-input.tsx

diff --git a/frontend/components/ui/inputs/embedding-model.tsx b/frontend/components/ui/inputs/embedding-model.tsx
new file mode 100644
index 00000000..ded138ad
--- /dev/null
+++ b/frontend/components/ui/inputs/embedding-model.tsx
@@ -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>
+  );
+};
diff --git a/frontend/components/ui/inputs/number-input.tsx b/frontend/components/ui/inputs/number-input.tsx
new file mode 100644
index 00000000..44e04fcb
--- /dev/null
+++ b/frontend/components/ui/inputs/number-input.tsx
@@ -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>
+  );
+};
diff --git a/frontend/src/components/cloud-picker/ingest-settings.tsx b/frontend/src/components/cloud-picker/ingest-settings.tsx
index 8c72ce6b..422e1a70 100644
--- a/frontend/src/components/cloud-picker/ingest-settings.tsx
+++ b/frontend/src/components/cloud-picker/ingest-settings.tsx
@@ -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>