Workspace configs (#4202)

web/src/app/admin/settings/SettingsForm.tsx

@@ -26,7 +26,7 @@ export function Checkbox({
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }) {
   return (
-    <label className="flex text-sm cursor-pointer">
+    <label className="flex text-xs cursor-pointer">
       <input
         checked={checked}
         onChange={onChange}
@@ -34,7 +34,7 @@ export function Checkbox({
         className="mr-2 w-3.5 h-3.5 my-auto"
       />
       <div>
-        <Label>{label}</Label>
+        <Label small>{label}</Label>
         {sublabel && <SubLabel>{sublabel}</SubLabel>}
       </div>
     </label>
@@ -208,7 +208,7 @@ export function SettingsForm() {
   }
 
   return (
-    <div>
+    <div className="flex flex-col pb-8">
       {popup}
       <Title className="mb-4">Workspace Settings</Title>
       <Checkbox
@@ -307,6 +307,51 @@ export function SettingsForm() {
           </Button>
         </>
       )}
+
+      {/* Image Processing Settings */}
+      <Title className="mt-8 mb-4">Image Processing</Title>
+
+      <div className="flex flex-col gap-2">
+        <Checkbox
+          label="Enable Image Extraction and Analysis"
+          sublabel="Extract and analyze images from documents during indexing. This allows the system to process images and create searchable descriptions of them."
+          checked={settings.image_extraction_and_analysis_enabled ?? false}
+          onChange={(e) =>
+            handleToggleSettingsField(
+              "image_extraction_and_analysis_enabled",
+              e.target.checked
+            )
+          }
+        />
+
+        <Checkbox
+          label="Enable Search-time Image Analysis"
+          sublabel="Analyze images at search time when a user asks about images. This provides more detailed and query-specific image analysis but may increase search-time latency."
+          checked={settings.search_time_image_analysis_enabled ?? false}
+          onChange={(e) =>
+            handleToggleSettingsField(
+              "search_time_image_analysis_enabled",
+              e.target.checked
+            )
+          }
+        />
+
+        <IntegerInput
+          label="Maximum Image Size for Analysis (MB)"
+          sublabel="Images larger than this size will not be analyzed to prevent excessive resource usage."
+          value={settings.image_analysis_max_size_mb ?? null}
+          onChange={(e) => {
+            const value = e.target.value ? parseInt(e.target.value) : null;
+            if (value !== null && !isNaN(value) && value > 0) {
+              updateSettingField([
+                { fieldName: "image_analysis_max_size_mb", newValue: value },
+              ]);
+            }
+          }}
+          id="image-analysis-max-size"
+          placeholder="Enter maximum size in MB"
+        />
+      </div>
     </div>
   );
 }

web/src/app/admin/settings/interfaces.ts

@@ -21,6 +21,11 @@ export interface Settings {
   auto_scroll: boolean;
   temperature_override_enabled: boolean;
   query_history_type: QueryHistoryType;
+
+  // Image processing settings
+  image_extraction_and_analysis_enabled?: boolean;
+  search_time_image_analysis_enabled?: boolean;
+  image_analysis_max_size_mb?: number;
 }
 
 export enum NotificationType {