From 01084d2a8957e18c8bdededba51e6777550bb81b Mon Sep 17 00:00:00 2001
From: Brent O'Neill <brent.oneill@datastax.com>
Date: Fri, 3 Oct 2025 15:30:45 -0600
Subject: [PATCH] wip commit

---
 frontend/src/app/upload/[provider]/page.tsx   |  9 ++---
 .../src/components/cloud-picker/file-item.tsx | 37 +++++++++++++++----
 .../src/components/cloud-picker/file-list.tsx | 16 ++++++--
 .../cloud-picker/ingest-settings.tsx          | 12 +++---
 .../cloud-picker/unified-cloud-picker.tsx     |  9 +++--
 5 files changed, 55 insertions(+), 28 deletions(-)

diff --git a/frontend/src/app/upload/[provider]/page.tsx b/frontend/src/app/upload/[provider]/page.tsx
index 8e0a306c..e3f3f57e 100644
--- a/frontend/src/app/upload/[provider]/page.tsx
+++ b/frontend/src/app/upload/[provider]/page.tsx
@@ -328,7 +328,7 @@ export default function UploadProviderPage() {
 
   return (
     <div className="container mx-auto max-w-3xl p-6">
-      <div className="mb-8 flex gap-2 items-center">
+      <div className="mb- flex gap-2 items-center">
         <Button variant="ghost" onClick={() => router.back()} size="icon">
           <ArrowLeft size={18} />
         </Button>
@@ -366,12 +366,9 @@ export default function UploadProviderPage() {
             disabled={selectedFiles.length === 0 || isIngesting}
           >
             {isIngesting ? (
-              <>
-                Ingesting {selectedFiles.length} file
-                {selectedFiles.length > 1 ? "s" : ""}...
-              </>
+              <>Ingesting {selectedFiles.length} Files...</>
             ) : (
-              <>Ingest files</>
+              <>Start ingest</>
             )}
           </Button>
         </div>
diff --git a/frontend/src/components/cloud-picker/file-item.tsx b/frontend/src/components/cloud-picker/file-item.tsx
index 3f6b5ab5..e9bdec38 100644
--- a/frontend/src/components/cloud-picker/file-item.tsx
+++ b/frontend/src/components/cloud-picker/file-item.tsx
@@ -1,10 +1,15 @@
 "use client";
 
 import { Badge } from "@/components/ui/badge";
-import { FileText, Folder, Trash } from "lucide-react";
+import { FileText, Folder, Trash, Trash2 } 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;
   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"
   >
     <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">
         {getMimeTypeLabel(file.mimeType)}
       </Badge>
     </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>
-
-      <Trash
-        className="text-muted-foreground w-5 h-5 cursor-pointer hover:text-destructive"
+      <Button
+        className="text-muted-foreground  hover:text-destructive"
+        size="icon"
+        variant="ghost"
         onClick={() => onRemove(file.id)}
-      />
+      >
+        <Trash2 size={16} />
+      </Button>
     </div>
   </div>
 );
diff --git a/frontend/src/components/cloud-picker/file-list.tsx b/frontend/src/components/cloud-picker/file-list.tsx
index 775d78c4..b584249a 100644
--- a/frontend/src/components/cloud-picker/file-list.tsx
+++ b/frontend/src/components/cloud-picker/file-list.tsx
@@ -5,12 +5,14 @@ import { CloudFile } from "./types";
 import { FileItem } from "./file-item";
 
 interface FileListProps {
+  provider: string;
   files: CloudFile[];
   onClearAll: () => void;
   onRemoveFile: (fileId: string) => void;
 }
 
 export const FileList = ({
+  provider,
   files,
   onClearAll,
   onRemoveFile,
@@ -22,19 +24,25 @@ export const FileList = ({
   return (
     <div className="space-y-2">
       <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">
-        {files.map(file => (
-          <FileItem key={file.id} file={file} onRemove={onRemoveFile} />
+        {files.map((file) => (
+          <FileItem
+            key={file.id}
+            file={file}
+            onRemove={onRemoveFile}
+            provider={provider}
+          />
         ))}
       </div>
     </div>
diff --git a/frontend/src/components/cloud-picker/ingest-settings.tsx b/frontend/src/components/cloud-picker/ingest-settings.tsx
index d5843a2a..8c72ce6b 100644
--- a/frontend/src/components/cloud-picker/ingest-settings.tsx
+++ b/frontend/src/components/cloud-picker/ingest-settings.tsx
@@ -44,7 +44,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">
@@ -65,7 +65,7 @@ export const IngestSettings = ({
               <Input
                 type="number"
                 value={currentSettings.chunkSize}
-                onChange={e =>
+                onChange={(e) =>
                   handleSettingsChange({
                     chunkSize: parseInt(e.target.value) || 0,
                   })
@@ -77,7 +77,7 @@ export const IngestSettings = ({
               <Input
                 type="number"
                 value={currentSettings.chunkOverlap}
-                onChange={e =>
+                onChange={(e) =>
                   handleSettingsChange({
                     chunkOverlap: parseInt(e.target.value) || 0,
                   })
@@ -95,7 +95,7 @@ export const IngestSettings = ({
             </div>
             <Switch
               checked={currentSettings.ocr}
-              onCheckedChange={checked =>
+              onCheckedChange={(checked) =>
                 handleSettingsChange({ ocr: checked })
               }
             />
@@ -112,7 +112,7 @@ export const IngestSettings = ({
             </div>
             <Switch
               checked={currentSettings.pictureDescriptions}
-              onCheckedChange={checked =>
+              onCheckedChange={(checked) =>
                 handleSettingsChange({ pictureDescriptions: checked })
               }
             />
@@ -126,7 +126,7 @@ export const IngestSettings = ({
             <Input
               disabled
               value={currentSettings.embeddingModel}
-              onChange={e =>
+              onChange={(e) =>
                 handleSettingsChange({ embeddingModel: e.target.value })
               }
               placeholder="text-embedding-3-small"
diff --git a/frontend/src/components/cloud-picker/unified-cloud-picker.tsx b/frontend/src/components/cloud-picker/unified-cloud-picker.tsx
index fd77698f..0a4699af 100644
--- a/frontend/src/components/cloud-picker/unified-cloud-picker.tsx
+++ b/frontend/src/components/cloud-picker/unified-cloud-picker.tsx
@@ -116,7 +116,7 @@ export const UnifiedCloudPicker = ({
       const handler = createProviderHandler(
         provider,
         accessToken,
-        isOpen => {
+        (isOpen) => {
           setIsPickerOpen(isOpen);
           onPickerStateChange?.(isOpen);
         },
@@ -126,8 +126,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 newFiles = files.filter(f => !existingIds.has(f.id));
+        const existingIds = new Set(selectedFiles.map((f) => f.id));
+        const newFiles = files.filter((f) => !existingIds.has(f.id));
         onFileSelected([...selectedFiles, ...newFiles]);
       });
     } catch (error) {
@@ -138,7 +138,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);
   };
 
@@ -179,6 +179,7 @@ export const UnifiedCloudPicker = ({
       />
 
       <FileList
+        provider={provider}
         files={selectedFiles}
         onClearAll={handleClearAll}
         onRemoveFile={handleRemoveFile}