apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-04-27 17:56:25 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

replace custom folder tree with Google Picker in Drive configs

Browse source
This commit is contained in:
CREDO23 2026-03-10 20:29:09 +02:00
parent a42a5a936c
commit 2c9d01ba2d
2 changed files with 90 additions and 121 deletions
Download patch file Download diff file Expand all files Collapse all files

92
surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/composio-drive-config.tsx
View file

@ -6,12 +6,12 @@ import {
FileText, FileText,
FolderClosed, FolderClosed,
Image, Image,
Loader2,
Presentation, Presentation,
X, X,
} from "lucide-react"; } from "lucide-react";
import type { FC } from "react"; import type { FC } from "react";
import { useEffect, useState } from "react"; import { useCallback, useEffect, useState } from "react";
import { ComposioDriveFolderTree } from "@/components/connectors/composio-drive-folder-tree";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { import {
@ -23,6 +23,7 @@ import {
} from "@/components/ui/select"; } from "@/components/ui/select";
import { Switch } from "@/components/ui/switch"; import { Switch } from "@/components/ui/switch";
import type { SearchSourceConnector } from "@/contracts/types/connector.types"; import type { SearchSourceConnector } from "@/contracts/types/connector.types";
import { type PickerResult, useGooglePicker } from "@/hooks/use-google-picker";
interface ComposioDriveConfigProps { interface ComposioDriveConfigProps {
connector: SearchSourceConnector; connector: SearchSourceConnector;
@ -30,7 +31,7 @@ interface ComposioDriveConfigProps {
onNameChange?: (name: string) => void; onNameChange?: (name: string) => void;
} }
interface SelectedFolder { interface SelectedItem {
id: string; id: string;
name: string; name: string;
} }
@ -47,10 +48,8 @@ const DEFAULT_INDEXING_OPTIONS: IndexingOptions = {
include_subfolders: true, include_subfolders: true,
}; };
// Helper to get appropriate icon for file type based on file name
function getFileIconFromName(fileName: string, className: string = "size-3.5 shrink-0") { function getFileIconFromName(fileName: string, className: string = "size-3.5 shrink-0") {
const lowerName = fileName.toLowerCase(); const lowerName = fileName.toLowerCase();
// Spreadsheets
if ( if (
lowerName.endsWith(".xlsx") || lowerName.endsWith(".xlsx") ||
lowerName.endsWith(".xls") || lowerName.endsWith(".xls") ||
@ -59,7 +58,6 @@ function getFileIconFromName(fileName: string, className: string = "size-3.5 shr
) { ) {
return <FileSpreadsheet className={`${className} text-green-500`} />; return <FileSpreadsheet className={`${className} text-green-500`} />;
} }
// Presentations
if ( if (
lowerName.endsWith(".pptx") || lowerName.endsWith(".pptx") ||
lowerName.endsWith(".ppt") || lowerName.endsWith(".ppt") ||
@ -67,7 +65,6 @@ function getFileIconFromName(fileName: string, className: string = "size-3.5 shr
) { ) {
return <Presentation className={`${className} text-orange-500`} />; return <Presentation className={`${className} text-orange-500`} />;
} }
// Documents (word, text only - not PDF)
if ( if (
lowerName.endsWith(".docx") || lowerName.endsWith(".docx") ||
lowerName.endsWith(".doc") || lowerName.endsWith(".doc") ||
@ -78,7 +75,6 @@ function getFileIconFromName(fileName: string, className: string = "size-3.5 shr
) { ) {
return <FileText className={`${className} text-gray-500`} />; return <FileText className={`${className} text-gray-500`} />;
} }
// Images
if ( if (
lowerName.endsWith(".png") || lowerName.endsWith(".png") ||
lowerName.endsWith(".jpg") || lowerName.endsWith(".jpg") ||
@ -89,7 +85,6 @@ function getFileIconFromName(fileName: string, className: string = "size-3.5 shr
) { ) {
return <Image className={`${className} text-purple-500`} />; return <Image className={`${className} text-purple-500`} />;
} }
// Default (including PDF)
return <File className={`${className} text-gray-500`} />; return <File className={`${className} text-gray-500`} />;
} }
@ -99,22 +94,18 @@ export const ComposioDriveConfig: FC<ComposioDriveConfigProps> = ({
}) => { }) => {
const isIndexable = connector.config?.is_indexable as boolean; const isIndexable = connector.config?.is_indexable as boolean;
// Initialize with existing selected folders and files from connector config const existingFolders = (connector.config?.selected_folders as SelectedItem[] | undefined) || [];
const existingFolders = const existingFiles = (connector.config?.selected_files as SelectedItem[] | undefined) || [];
(connector.config?.selected_folders as SelectedFolder[] | undefined) || [];
const existingFiles = (connector.config?.selected_files as SelectedFolder[] | undefined) || [];
const existingIndexingOptions = const existingIndexingOptions =
(connector.config?.indexing_options as IndexingOptions | undefined) || DEFAULT_INDEXING_OPTIONS; (connector.config?.indexing_options as IndexingOptions | undefined) || DEFAULT_INDEXING_OPTIONS;
const [selectedFolders, setSelectedFolders] = useState<SelectedFolder[]>(existingFolders); const [selectedFolders, setSelectedFolders] = useState<SelectedItem[]>(existingFolders);
const [selectedFiles, setSelectedFiles] = useState<SelectedFolder[]>(existingFiles); const [selectedFiles, setSelectedFiles] = useState<SelectedItem[]>(existingFiles);
const [showFolderSelector, setShowFolderSelector] = useState(false);
const [indexingOptions, setIndexingOptions] = useState<IndexingOptions>(existingIndexingOptions); const [indexingOptions, setIndexingOptions] = useState<IndexingOptions>(existingIndexingOptions);
// Update selected folders and files when connector config changes
useEffect(() => { useEffect(() => {
const folders = (connector.config?.selected_folders as SelectedFolder[] | undefined) || []; const folders = (connector.config?.selected_folders as SelectedItem[] | undefined) || [];
const files = (connector.config?.selected_files as SelectedFolder[] | undefined) || []; const files = (connector.config?.selected_files as SelectedItem[] | undefined) || [];
const options = const options =
(connector.config?.indexing_options as IndexingOptions | undefined) || (connector.config?.indexing_options as IndexingOptions | undefined) ||
DEFAULT_INDEXING_OPTIONS; DEFAULT_INDEXING_OPTIONS;
@ -124,8 +115,8 @@ export const ComposioDriveConfig: FC<ComposioDriveConfigProps> = ({
}, [connector.config]); }, [connector.config]);
const updateConfig = ( const updateConfig = (
folders: SelectedFolder[], folders: SelectedItem[],
files: SelectedFolder[], files: SelectedItem[],
options: IndexingOptions options: IndexingOptions
) => { ) => {
if (onConfigChange) { if (onConfigChange) {
@ -138,15 +129,26 @@ export const ComposioDriveConfig: FC<ComposioDriveConfigProps> = ({
} }
}; };
const handleSelectFolders = (folders: SelectedFolder[]) => { const handlePicked = useCallback(
(result: PickerResult) => {
const folders = result.folders.map((f) => ({ id: f.id, name: f.name }));
const files = result.files.map((f) => ({ id: f.id, name: f.name }));
setSelectedFolders(folders); setSelectedFolders(folders);
updateConfig(folders, selectedFiles, indexingOptions);
};
const handleSelectFiles = (files: SelectedFolder[]) => {
setSelectedFiles(files); setSelectedFiles(files);
updateConfig(selectedFolders, files, indexingOptions); updateConfig(folders, files, indexingOptions);
}; },
// eslint-disable-next-line react-hooks/exhaustive-deps
[indexingOptions, connector.config]
);
const {
openPicker,
loading: pickerLoading,
error: pickerError,
} = useGooglePicker({
connectorId: connector.id,
onPicked: handlePicked,
});
const handleIndexingOptionChange = (key: keyof IndexingOptions, value: number | boolean) => { const handleIndexingOptionChange = (key: keyof IndexingOptions, value: number | boolean) => {
const newOptions = { ...indexingOptions, [key]: value }; const newOptions = { ...indexingOptions, [key]: value };
@ -155,20 +157,19 @@ export const ComposioDriveConfig: FC<ComposioDriveConfigProps> = ({
}; };
const handleRemoveFolder = (folderId: string) => { const handleRemoveFolder = (folderId: string) => {
const newFolders = selectedFolders.filter((folder) => folder.id !== folderId); const newFolders = selectedFolders.filter((f) => f.id !== folderId);
setSelectedFolders(newFolders); setSelectedFolders(newFolders);
updateConfig(newFolders, selectedFiles, indexingOptions); updateConfig(newFolders, selectedFiles, indexingOptions);
}; };
const handleRemoveFile = (fileId: string) => { const handleRemoveFile = (fileId: string) => {
const newFiles = selectedFiles.filter((file) => file.id !== fileId); const newFiles = selectedFiles.filter((f) => f.id !== fileId);
setSelectedFiles(newFiles); setSelectedFiles(newFiles);
updateConfig(selectedFolders, newFiles, indexingOptions); updateConfig(selectedFolders, newFiles, indexingOptions);
}; };
const totalSelected = selectedFolders.length + selectedFiles.length; const totalSelected = selectedFolders.length + selectedFiles.length;
// Only show configuration if the connector is indexable
if (!isIndexable) { if (!isIndexable) {
return <div className="space-y-6" />; return <div className="space-y-6" />;
} }
@ -241,35 +242,18 @@ export const ComposioDriveConfig: FC<ComposioDriveConfigProps> = ({
</div> </div>
)} )}
{showFolderSelector ? (
<div className="space-y-2 sm:space-y-3">
<ComposioDriveFolderTree
connectorId={connector.id}
selectedFolders={selectedFolders}
onSelectFolders={handleSelectFolders}
selectedFiles={selectedFiles}
onSelectFiles={handleSelectFiles}
/>
<Button <Button
type="button" type="button"
variant="outline" variant="outline"
size="sm" onClick={openPicker}
onClick={() => setShowFolderSelector(false)} disabled={pickerLoading}
className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-white/10 text-xs sm:text-sm h-8 sm:h-9" className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-white/10 text-xs sm:text-sm h-8 sm:h-9"
> >
Done Selecting {pickerLoading && <Loader2 className="size-3.5 mr-1.5 animate-spin" />}
{totalSelected > 0 ? "Change Selection" : "Select from Google Drive"}
</Button> </Button>
</div>
) : ( {pickerError && <p className="text-xs text-destructive">{pickerError}</p>}
<Button
type="button"
variant="outline"
onClick={() => setShowFolderSelector(true)}
className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-white/10 text-xs sm:text-sm h-8 sm:h-9"
>
{totalSelected > 0 ? "Change Selection" : "Select Folders & Files"}
</Button>
)}
</div> </div>
{/* Indexing Options */} {/* Indexing Options */}

91
surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/google-drive-config.tsx
View file

@ -6,12 +6,12 @@ import {
FileText, FileText,
FolderClosed, FolderClosed,
Image, Image,
Loader2,
Presentation, Presentation,
X, X,
} from "lucide-react"; } from "lucide-react";
import type { FC } from "react"; import type { FC } from "react";
import { useEffect, useState } from "react"; import { useCallback, useEffect, useState } from "react";
import { GoogleDriveFolderTree } from "@/components/connectors/google-drive-folder-tree";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { import {
@ -22,9 +22,10 @@ import {
SelectValue, SelectValue,
} from "@/components/ui/select"; } from "@/components/ui/select";
import { Switch } from "@/components/ui/switch"; import { Switch } from "@/components/ui/switch";
import { type PickerResult, useGooglePicker } from "@/hooks/use-google-picker";
import type { ConnectorConfigProps } from "../index"; import type { ConnectorConfigProps } from "../index";
interface SelectedFolder { interface SelectedItem {
id: string; id: string;
name: string; name: string;
} }
@ -41,10 +42,8 @@ const DEFAULT_INDEXING_OPTIONS: IndexingOptions = {
include_subfolders: true, include_subfolders: true,
}; };
// Helper to get appropriate icon for file type based on file name
function getFileIconFromName(fileName: string, className: string = "size-3.5 shrink-0") { function getFileIconFromName(fileName: string, className: string = "size-3.5 shrink-0") {
const lowerName = fileName.toLowerCase(); const lowerName = fileName.toLowerCase();
// Spreadsheets
if ( if (
lowerName.endsWith(".xlsx") || lowerName.endsWith(".xlsx") ||
lowerName.endsWith(".xls") || lowerName.endsWith(".xls") ||
@ -53,7 +52,6 @@ function getFileIconFromName(fileName: string, className: string = "size-3.5 shr
) { ) {
return <FileSpreadsheet className={`${className} text-green-500`} />; return <FileSpreadsheet className={`${className} text-green-500`} />;
} }
// Presentations
if ( if (
lowerName.endsWith(".pptx") || lowerName.endsWith(".pptx") ||
lowerName.endsWith(".ppt") || lowerName.endsWith(".ppt") ||
@ -61,7 +59,6 @@ function getFileIconFromName(fileName: string, className: string = "size-3.5 shr
) { ) {
return <Presentation className={`${className} text-orange-500`} />; return <Presentation className={`${className} text-orange-500`} />;
} }
// Documents (word, text only - not PDF)
if ( if (
lowerName.endsWith(".docx") || lowerName.endsWith(".docx") ||
lowerName.endsWith(".doc") || lowerName.endsWith(".doc") ||
@ -72,7 +69,6 @@ function getFileIconFromName(fileName: string, className: string = "size-3.5 shr
) { ) {
return <FileText className={`${className} text-gray-500`} />; return <FileText className={`${className} text-gray-500`} />;
} }
// Images
if ( if (
lowerName.endsWith(".png") || lowerName.endsWith(".png") ||
lowerName.endsWith(".jpg") || lowerName.endsWith(".jpg") ||
@ -83,27 +79,22 @@ function getFileIconFromName(fileName: string, className: string = "size-3.5 shr
) { ) {
return <Image className={`${className} text-purple-500`} />; return <Image className={`${className} text-purple-500`} />;
} }
// Default (including PDF)
return <File className={`${className} text-gray-500`} />; return <File className={`${className} text-gray-500`} />;
} }
export const GoogleDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfigChange }) => { export const GoogleDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfigChange }) => {
// Initialize with existing selected folders and files from connector config const existingFolders = (connector.config?.selected_folders as SelectedItem[] | undefined) || [];
const existingFolders = const existingFiles = (connector.config?.selected_files as SelectedItem[] | undefined) || [];
(connector.config?.selected_folders as SelectedFolder[] | undefined) || [];
const existingFiles = (connector.config?.selected_files as SelectedFolder[] | undefined) || [];
const existingIndexingOptions = const existingIndexingOptions =
(connector.config?.indexing_options as IndexingOptions | undefined) || DEFAULT_INDEXING_OPTIONS; (connector.config?.indexing_options as IndexingOptions | undefined) || DEFAULT_INDEXING_OPTIONS;
const [selectedFolders, setSelectedFolders] = useState<SelectedFolder[]>(existingFolders); const [selectedFolders, setSelectedFolders] = useState<SelectedItem[]>(existingFolders);
const [selectedFiles, setSelectedFiles] = useState<SelectedFolder[]>(existingFiles); const [selectedFiles, setSelectedFiles] = useState<SelectedItem[]>(existingFiles);
const [showFolderSelector, setShowFolderSelector] = useState(false);
const [indexingOptions, setIndexingOptions] = useState<IndexingOptions>(existingIndexingOptions); const [indexingOptions, setIndexingOptions] = useState<IndexingOptions>(existingIndexingOptions);
// Update selected folders and files when connector config changes
useEffect(() => { useEffect(() => {
const folders = (connector.config?.selected_folders as SelectedFolder[] | undefined) || []; const folders = (connector.config?.selected_folders as SelectedItem[] | undefined) || [];
const files = (connector.config?.selected_files as SelectedFolder[] | undefined) || []; const files = (connector.config?.selected_files as SelectedItem[] | undefined) || [];
const options = const options =
(connector.config?.indexing_options as IndexingOptions | undefined) || (connector.config?.indexing_options as IndexingOptions | undefined) ||
DEFAULT_INDEXING_OPTIONS; DEFAULT_INDEXING_OPTIONS;
@ -113,8 +104,8 @@ export const GoogleDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfi
}, [connector.config]); }, [connector.config]);
const updateConfig = ( const updateConfig = (
folders: SelectedFolder[], folders: SelectedItem[],
files: SelectedFolder[], files: SelectedItem[],
options: IndexingOptions options: IndexingOptions
) => { ) => {
if (onConfigChange) { if (onConfigChange) {
@ -127,15 +118,26 @@ export const GoogleDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfi
} }
}; };
const handleSelectFolders = (folders: SelectedFolder[]) => { const handlePicked = useCallback(
(result: PickerResult) => {
const folders = result.folders.map((f) => ({ id: f.id, name: f.name }));
const files = result.files.map((f) => ({ id: f.id, name: f.name }));
setSelectedFolders(folders); setSelectedFolders(folders);
updateConfig(folders, selectedFiles, indexingOptions);
};
const handleSelectFiles = (files: SelectedFolder[]) => {
setSelectedFiles(files); setSelectedFiles(files);
updateConfig(selectedFolders, files, indexingOptions); updateConfig(folders, files, indexingOptions);
}; },
// eslint-disable-next-line react-hooks/exhaustive-deps
[indexingOptions, connector.config]
);
const {
openPicker,
loading: pickerLoading,
error: pickerError,
} = useGooglePicker({
connectorId: connector.id,
onPicked: handlePicked,
});
const handleIndexingOptionChange = (key: keyof IndexingOptions, value: number | boolean) => { const handleIndexingOptionChange = (key: keyof IndexingOptions, value: number | boolean) => {
const newOptions = { ...indexingOptions, [key]: value }; const newOptions = { ...indexingOptions, [key]: value };
@ -144,13 +146,13 @@ export const GoogleDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfi
}; };
const handleRemoveFolder = (folderId: string) => { const handleRemoveFolder = (folderId: string) => {
const newFolders = selectedFolders.filter((folder) => folder.id !== folderId); const newFolders = selectedFolders.filter((f) => f.id !== folderId);
setSelectedFolders(newFolders); setSelectedFolders(newFolders);
updateConfig(newFolders, selectedFiles, indexingOptions); updateConfig(newFolders, selectedFiles, indexingOptions);
}; };
const handleRemoveFile = (fileId: string) => { const handleRemoveFile = (fileId: string) => {
const newFiles = selectedFiles.filter((file) => file.id !== fileId); const newFiles = selectedFiles.filter((f) => f.id !== fileId);
setSelectedFiles(newFiles); setSelectedFiles(newFiles);
updateConfig(selectedFolders, newFiles, indexingOptions); updateConfig(selectedFolders, newFiles, indexingOptions);
}; };
@ -225,35 +227,18 @@ export const GoogleDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfi
</div> </div>
)} )}
{showFolderSelector ? (
<div className="space-y-2 sm:space-y-3">
<GoogleDriveFolderTree
connectorId={connector.id}
selectedFolders={selectedFolders}
onSelectFolders={handleSelectFolders}
selectedFiles={selectedFiles}
onSelectFiles={handleSelectFiles}
/>
<Button <Button
type="button" type="button"
variant="outline" variant="outline"
size="sm" onClick={openPicker}
onClick={() => setShowFolderSelector(false)} disabled={pickerLoading}
className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-white/10 text-xs sm:text-sm h-8 sm:h-9" className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-white/10 text-xs sm:text-sm h-8 sm:h-9"
> >
Done Selecting {pickerLoading && <Loader2 className="size-3.5 mr-1.5 animate-spin" />}
{totalSelected > 0 ? "Change Selection" : "Select from Google Drive"}
</Button> </Button>
</div>
) : ( {pickerError && <p className="text-xs text-destructive">{pickerError}</p>}
<Button
type="button"
variant="outline"
onClick={() => setShowFolderSelector(true)}
className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-white/10 text-xs sm:text-sm h-8 sm:h-9"
>
{totalSelected > 0 ? "Change Selection" : "Select Folders & Files"}
</Button>
)}
</div> </div>
{/* Indexing Options */} {/* Indexing Options */}