Merge pull request #197 from langflow-ai/109-design-sweep-polish-adding-from-cloud-connector-screen

design sweep for ingest for connector page

frontend/components/ui/button.tsx

@@ -3,7 +3,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none disabled:select-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none disabled:select-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {

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>
+  );
+};

frontend/components/ui/inputs/number-input.tsx

@@ -0,0 +1,74 @@
+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 top-0 p-[1px] py-[1.5px] flex items-center ">
+          <span className="text-sm text-placeholder-foreground mr-4 pointer-events-none">
+            {unit}
+          </span>
+          <div className="flex flex-col mt-[2px] mb-[2px]">
+            <Button
+              aria-label={`Increase ${label} value`}
+              className="h-5 rounded-l-none rounded-br-none border-input border-t-transparent border-r-transparent border-b-[0.5px] hover:border-t-[.5px] hover:border-foreground"
+              variant="outline"
+              size="iconSm"
+              onClick={() => onChange(value + 1)}
+            >
+              <Plus
+                className="text-muted-foreground hover:text-foreground"
+                size={8}
+              />
+            </Button>
+            <Button
+              aria-label={`Decrease ${label} value`}
+              className="h-5 rounded-l-none rounded-tr-none border-input border-b-transparent border-r-transparent hover:border-b-1 hover:border-b-[.5px] hover:border-foreground"
+              variant="outline"
+              size="iconSm"
+              onClick={() => onChange(value - 1)}
+            >
+              <Minus
+                className="text-muted-foreground hover:text-foreground"
+                size={8}
+              />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </LabelWrapper>
+  );
+};

frontend/src/app/globals.css

@@ -351,4 +351,17 @@
   .discord-error {
     @apply text-xs opacity-70;
   }
+
+  .box-shadow-inner::after {
+    content: " ";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    pointer-events: none;
+    background: linear-gradient(to top, hsl(var(--background)), transparent);
+    display: block;
+    width: 100%;
+    height: 30px;
+  }
 }

frontend/src/app/upload/[provider]/page.tsx

@@ -6,8 +6,12 @@ import { useEffect, useState } from "react";
 import { type CloudFile, UnifiedCloudPicker } from "@/components/cloud-picker";
 import type { IngestSettings } from "@/components/cloud-picker/types";
 import { Button } from "@/components/ui/button";
-import { Toast } from "@/components/ui/toast";
 import { useTask } from "@/contexts/task-context";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 // CloudFile interface is now imported from the unified cloud picker
 
@@ -36,7 +40,7 @@ export default function UploadProviderPage() {
   const [selectedFiles, setSelectedFiles] = useState<CloudFile[]>([]);
   const [isIngesting, setIsIngesting] = useState<boolean>(false);
   const [currentSyncTaskId, setCurrentSyncTaskId] = useState<string | null>(
-		null,
+    null
   );
   const [ingestSettings, setIngestSettings] = useState<IngestSettings>({
     chunkSize: 1000,
@@ -63,14 +67,14 @@ export default function UploadProviderPage() {
 
         if (!providerInfo || !providerInfo.available) {
           setError(
-						`Cloud provider "${provider}" is not available or configured.`,
+            `Cloud provider "${provider}" is not available or configured.`
           );
           return;
         }
 
         // Check connector status
         const statusResponse = await fetch(
-					`/api/connectors/${provider}/status`,
+          `/api/connectors/${provider}/status`
         );
         if (!statusResponse.ok) {
           throw new Error(`Failed to check ${provider} status`);
@@ -80,7 +84,7 @@ export default function UploadProviderPage() {
         const connections = statusData.connections || [];
         const activeConnection = connections.find(
           (conn: { is_active: boolean; connection_id: string }) =>
-						conn.is_active,
+            conn.is_active
         );
         const isConnected = activeConnection !== undefined;
 
@@ -91,7 +95,7 @@ export default function UploadProviderPage() {
         if (isConnected && activeConnection) {
           try {
             const tokenResponse = await fetch(
-							`/api/connectors/${provider}/token?connection_id=${activeConnection.connection_id}`,
+              `/api/connectors/${provider}/token?connection_id=${activeConnection.connection_id}`
             );
             if (tokenResponse.ok) {
               const tokenData = await tokenResponse.json();
@@ -126,7 +130,7 @@ export default function UploadProviderPage() {
         setError(
           error instanceof Error
             ? error.message
-						: "Failed to load connector information",
+            : "Failed to load connector information"
         );
       } finally {
         setIsLoading(false);
@@ -143,7 +147,7 @@ export default function UploadProviderPage() {
     if (!currentSyncTaskId) return;
 
     const currentTask = tasks.find(
-			(task) => task.task_id === currentSyncTaskId,
+      (task) => task.task_id === currentSyncTaskId
     );
 
     if (currentTask && currentTask.status === "completed") {
@@ -326,13 +330,15 @@ export default function UploadProviderPage() {
     );
   }
 
+  const hasSelectedFiles = selectedFiles.length > 0;
+
   return (
-		<div className="container mx-auto max-w-3xl p-6">
+    <div className="container mx-auto max-w-3xl px-6">
-			<div className="mb-6 flex gap-2 items-center">
+      <div className="mb-8 flex gap-2 items-center">
-				<Button variant="ghost" onClick={() => router.back()}>
+        <Button variant="ghost" onClick={() => router.back()} size="icon">
-					<ArrowLeft className="h-4 w-4 scale-125" />
+          <ArrowLeft size={18} />
         </Button>
-				<h2 className="text-2xl font-bold">
+        <h2 className="text-xl text-[18px] font-semibold">
           Add from {getProviderDisplayName()}
         </h2>
       </div>
@@ -345,32 +351,47 @@ export default function UploadProviderPage() {
           onFileSelected={handleFileSelected}
           selectedFiles={selectedFiles}
           isAuthenticated={true}
+          isIngesting={isIngesting}
           accessToken={accessToken || undefined}
           clientId={connector.clientId}
           onSettingsChange={setIngestSettings}
         />
       </div>
 
-			<div className="max-w-3xl mx-auto mt-6">
+      <div className="max-w-3xl mx-auto mt-6 sticky bottom-0 left-0 right-0 pb-6 bg-background pt-4">
         <div className="flex justify-between gap-3 mb-4">
           <Button
             variant="ghost"
-						className=" border bg-transparent border-border rounded-lg text-secondary-foreground"
+            className="border bg-transparent border-border rounded-lg text-secondary-foreground"
             onClick={() => router.back()}
           >
             Back
           </Button>
+          <Tooltip>
+            <TooltipTrigger>
               <Button
-						variant="secondary"
+                className="bg-foreground text-background hover:bg-foreground/90 font-semibold"
+                variant={!hasSelectedFiles ? "secondary" : undefined}
                 onClick={() => handleSync(connector)}
-						disabled={selectedFiles.length === 0 || isIngesting}
+                loading={isIngesting}
+                disabled={!hasSelectedFiles || isIngesting}
               >
-						{isIngesting ? (
+                {!hasSelectedFiles ? (
-							<>Ingesting {selectedFiles.length} Files...</>
+                  <>Ingest files</>
                 ) : (
-							<>Start ingest</>
+                  <>
+                    Ingest {selectedFiles.length} file
+                    {selectedFiles.length > 1 ? "s" : ""}
+                  </>
                 )}
               </Button>
+            </TooltipTrigger>
+            {!hasSelectedFiles ? (
+              <TooltipContent side="left">
+                Select at least one file before ingesting
+              </TooltipContent>
+            ) : null}
+          </Tooltip>
         </div>
       </div>
     </div>

frontend/src/components/cloud-picker/file-item.tsx

@@ -1,11 +1,16 @@
 "use client";
 
-import { Badge } from "@/components/ui/badge";
+import { FileText, Folder, Trash2 } from "lucide-react";
-import { FileText, Folder, Trash } from "lucide-react";
 import { CloudFile } from "./types";
+import GoogleDriveIcon from "@/app/settings/icons/google-drive-icon";
+import SharePointIcon from "@/app/settings/icons/share-point-icon";
+import OneDriveIcon from "@/app/settings/icons/one-drive-icon";
+import { Button } from "@/components/ui/button";
 
 interface FileItemProps {
+  provider: string;
   file: CloudFile;
+  shouldDisableActions: boolean;
   onRemove: (fileId: string) => void;
 }
 
@@ -41,27 +46,43 @@ const formatFileSize = (bytes?: number) => {
   return `${(bytes / Math.pow(1024, i)).toFixed(1)} ${sizes[i]}`;
 };
 
-export const FileItem = ({ file, onRemove }: FileItemProps) => (
+const getProviderIcon = (provider: string) => {
+  switch (provider) {
+    case "google_drive":
+      return <GoogleDriveIcon />;
+    case "onedrive":
+      return <OneDriveIcon />;
+    case "sharepoint":
+      return <SharePointIcon />;
+    default:
+      return <FileText className="h-6 w-6" />;
+  }
+};
+
+export const FileItem = ({ file, onRemove, provider }: FileItemProps) => (
   <div
     key={file.id}
-    className="flex items-center justify-between p-2 rounded-md text-xs"
+    className="flex items-center justify-between p-1.5 rounded-md text-xs"
   >
     <div className="flex items-center gap-2 flex-1 min-w-0">
-      {getFileIcon(file.mimeType)}
+      {provider ? getProviderIcon(provider) : getFileIcon(file.mimeType)}
       <span className="truncate font-medium text-sm mr-2">{file.name}</span>
-      <Badge variant="secondary" className="text-xs px-1 py-0.5 h-auto">
+      <span className="text-sm text-muted-foreground">
         {getMimeTypeLabel(file.mimeType)}
-      </Badge>
+      </span>
     </div>
-    <div className="flex items-center gap-2">
+    <div className="flex items-center gap-1">
       <span className="text-xs text-muted-foreground mr-4" title="file size">
         {formatFileSize(file.size) || "—"}
       </span>
-
+      <Button
-      <Trash
+        className="text-muted-foreground  hover:text-destructive"
-        className="text-muted-foreground w-5 h-5 cursor-pointer hover:text-destructive"
+        size="icon"
+        variant="ghost"
         onClick={() => onRemove(file.id)}
-      />
+      >
+        <Trash2 size={16} />
+      </Button>
     </div>
   </div>
 );

frontend/src/components/cloud-picker/file-list.tsx

@@ -5,38 +5,51 @@ import { CloudFile } from "./types";
 import { FileItem } from "./file-item";
 
 interface FileListProps {
+  provider: string;
   files: CloudFile[];
   onClearAll: () => void;
   onRemoveFile: (fileId: string) => void;
+  shouldDisableActions: boolean;
 }
 
 export const FileList = ({
+  provider,
   files,
   onClearAll,
   onRemoveFile,
+  shouldDisableActions,
 }: FileListProps) => {
   if (files.length === 0) {
     return null;
   }
 
   return (
-    <div className="space-y-2">
+    <div className="space-y-2 relative">
       <div className="flex items-center justify-between">
-        <p className="text-sm font-medium">Added files</p>
+        <p className="text-sm font-medium">Added files ({files.length})</p>
         <Button
+          ignoreTitleCase={true}
           onClick={onClearAll}
           size="sm"
           variant="ghost"
           className="text-sm text-muted-foreground"
         >
-          Clear all
+          Remove all
         </Button>
       </div>
-      <div className="max-h-64 overflow-y-auto space-y-1">
+      <div className="box-shadow-inner">
-        {files.map(file => (
+        <div className="max-h-[calc(100vh-720px)] overflow-y-auto space-y-1 pr-1 pb-4 relative">
-          <FileItem key={file.id} file={file} onRemove={onRemoveFile} />
+          {files.map((file) => (
+            <FileItem
+              key={file.id}
+              file={file}
+              onRemove={onRemoveFile}
+              provider={provider}
+              shouldDisableActions={shouldDisableActions}
+            />
           ))}
         </div>
       </div>
+    </div>
   );
 };

frontend/src/components/cloud-picker/ingest-settings.tsx

@@ -1,14 +1,28 @@
 "use client";
 
-import { Input } from "@/components/ui/input";
 import { Switch } from "@/components/ui/switch";
 import {
   Collapsible,
   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;
@@ -44,7 +58,7 @@ export const IngestSettings = ({
     <Collapsible
       open={isOpen}
       onOpenChange={onOpenChange}
-      className="border rounded-md p-4 border-muted-foreground/20"
+      className="border rounded-xl p-4 border-border"
     >
       <CollapsibleTrigger className="flex items-center gap-2 justify-between w-full -m-4 p-4 rounded-md transition-colors">
         <div className="flex items-center gap-2">
@@ -58,35 +72,85 @@ 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="pt-5 space-y-5">
+        <div className="mt-6">
-          <div className="flex items-center gap-4 w-full">
+          {/* 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="mt-6">
+          <div className="flex items-center gap-4 w-full mb-6">
             <div className="w-full">
-              <div className="text-sm mb-2 font-semibold">Chunk size</div>
+              <NumberInput
-              <Input
+                id="chunk-size"
-                type="number"
+                label="Chunk size"
                 value={currentSettings.chunkSize}
-                onChange={e =>
+                onChange={(value) => handleSettingsChange({ chunkSize: value })}
-                  handleSettingsChange({
+                unit="characters"
-                    chunkSize: parseInt(e.target.value) || 0,
-                  })
-                }
               />
             </div>
             <div className="w-full">
-              <div className="text-sm mb-2 font-semibold">Chunk overlap</div>
+              <NumberInput
-              <Input
+                id="chunk-overlap"
-                type="number"
+                label="Chunk overlap"
                 value={currentSettings.chunkOverlap}
-                onChange={e =>
+                onChange={(value) =>
-                  handleSettingsChange({
+                  handleSettingsChange({ chunkOverlap: value })
-                    chunkOverlap: parseInt(e.target.value) || 0,
-                  })
                 }
+                unit="characters"
               />
             </div>
           </div>
 
-          <div className="flex gap-2 items-center justify-between">
+          {/* <div className="flex gap-2 items-center justify-between">
+            <div>
+              <div className="text-sm font-semibold pb-2">Table Structure</div>
+              <div className="text-sm text-muted-foreground">
+                Capture table structure during ingest.
+              </div>
+            </div>
+            <Switch
+              id="table-structure"
+              checked={currentSettings.tableStructure}
+              onCheckedChange={(checked) =>
+                handleSettingsChange({ tableStructure: checked })
+              }
+            />
+          </div> */}
+
+          <div className="flex items-center justify-between border-b pb-3 mb-3">
             <div>
               <div className="text-sm font-semibold pb-2">OCR</div>
               <div className="text-sm text-muted-foreground">
@@ -95,13 +159,13 @@ export const IngestSettings = ({
             </div>
             <Switch
               checked={currentSettings.ocr}
-              onCheckedChange={checked =>
+              onCheckedChange={(checked) =>
                 handleSettingsChange({ ocr: checked })
               }
             />
           </div>
 
-          <div className="flex gap-2 items-center justify-between">
+          <div className="flex items-center justify-between">
             <div>
               <div className="text-sm pb-2 font-semibold">
                 Picture descriptions
@@ -112,26 +176,11 @@ export const IngestSettings = ({
             </div>
             <Switch
               checked={currentSettings.pictureDescriptions}
-              onCheckedChange={checked =>
+              onCheckedChange={(checked) =>
                 handleSettingsChange({ pictureDescriptions: checked })
               }
             />
           </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>

frontend/src/components/cloud-picker/picker-header.tsx

@@ -51,19 +51,13 @@ export const PickerHeader = ({
           Select files from {getProviderName(provider)} to ingest.
         </p>
         <Button
-          size="sm"
           onClick={onAddFiles}
           disabled={!isPickerLoaded || isPickerOpen || !accessToken}
           className="bg-foreground text-background hover:bg-foreground/90 font-semibold"
         >
           <Plus className="h-4 w-4" />
-          Add Files
+          {isPickerOpen ? "Opening picker..." : "Add files"}
         </Button>
-        <div className="text-xs text-muted-foreground pt-4">
-          csv, json, pdf,{" "}
-          <a className="underline dark:text-pink-400 text-pink-600">+16 more</a>{" "}
-          <b>150 MB</b> max
-        </div>
       </CardContent>
     </Card>
   );

frontend/src/components/cloud-picker/types.ts

@@ -25,6 +25,7 @@ export interface UnifiedCloudPickerProps {
   baseUrl?: string;
   // Ingest settings
   onSettingsChange?: (settings: IngestSettings) => void;
+  isIngesting: boolean;
 }
 
 export interface GoogleAPI {

frontend/src/components/cloud-picker/unified-cloud-picker.tsx

@@ -16,6 +16,7 @@ export const UnifiedCloudPicker = ({
   onFileSelected,
   selectedFiles = [],
   isAuthenticated,
+  isIngesting,
   accessToken,
   onPickerStateChange,
   clientId,
@@ -116,7 +117,7 @@ export const UnifiedCloudPicker = ({
       const handler = createProviderHandler(
         provider,
         accessToken,
-        isOpen => {
+        (isOpen) => {
           setIsPickerOpen(isOpen);
           onPickerStateChange?.(isOpen);
         },
@@ -126,8 +127,8 @@ export const UnifiedCloudPicker = ({
 
       handler.openPicker((files: CloudFile[]) => {
         // Merge new files with existing ones, avoiding duplicates
-        const existingIds = new Set(selectedFiles.map(f => f.id));
+        const existingIds = new Set(selectedFiles.map((f) => f.id));
-        const newFiles = files.filter(f => !existingIds.has(f.id));
+        const newFiles = files.filter((f) => !existingIds.has(f.id));
         onFileSelected([...selectedFiles, ...newFiles]);
       });
     } catch (error) {
@@ -138,7 +139,7 @@ export const UnifiedCloudPicker = ({
   };
 
   const handleRemoveFile = (fileId: string) => {
-    const updatedFiles = selectedFiles.filter(file => file.id !== fileId);
+    const updatedFiles = selectedFiles.filter((file) => file.id !== fileId);
     onFileSelected(updatedFiles);
   };
 
@@ -168,7 +169,8 @@ export const UnifiedCloudPicker = ({
   }
 
   return (
-    <div className="space-y-6">
+    <div>
+      <div className="mb-6">
         <PickerHeader
           provider={provider}
           onAddFiles={handleAddFiles}
@@ -177,11 +179,14 @@ export const UnifiedCloudPicker = ({
           accessToken={accessToken}
           isAuthenticated={isAuthenticated}
         />
+      </div>
 
       <FileList
+        provider={provider}
         files={selectedFiles}
         onClearAll={handleClearAll}
         onRemoveFile={handleRemoveFile}
+        shouldDisableActions={isIngesting}
       />
 
       <IngestSettings