Merge pull request #193 from gaiin-platform/feature/sharepoint

Feature/sharepoint

Author: karelyrodri

components/DataSources/DataSourceSelector.tsx

@@ -56,6 +56,16 @@ export const DataSourceSelector: FC<Props> = ({ onDataSourceSelected,
 
     }, [loading]);
 
+    const getIntegrationName = (integration: string) => {
+        switch (integration) {
+            case "microsoft_drive":
+                return "OneDrive";
+            case "microsoft_sharepoint":
+                return "SharePoint";
+        }
+        return capitalize(integration.split('_')[0]);
+    }
+
     useEffect(() => {
         if (selectRef.current) {
             selectRef.current.focus();
@@ -159,7 +169,7 @@ export const DataSourceSelector: FC<Props> = ({ onDataSourceSelected,
                                     {translateIntegrationIcon(key)}
                                 </div>
                                 <div className="ml-2">
-                                    {capitalize(key.split('_')[0])}
+                                    {getIntegrationName(key)}
                                 </div>
                             </div>
                         </a>
@@ -174,6 +184,7 @@ export const DataSourceSelector: FC<Props> = ({ onDataSourceSelected,
                 >
                     Close
                 </button>}
+                <br></br>
 
 
                 {/*    <a href="#"*/}
@@ -260,10 +271,9 @@ export const DataSourceSelector: FC<Props> = ({ onDataSourceSelected,
                         }}
                     />
                 )}
-                {userIntegrations && 
+                {userIntegrations &&
                  userIntegrations.map((key) =>
-                    selectedPage === key ? 
-                    <div key={key}>
+                    <div key={key} style={{ display: selectedPage === key ? 'block' : 'none' }}>
                      <DataSourcesTableScrollingIntegrations
                         onDataSourceSelected={onIntegrationDataSourceSelected}
                         disallowedFileExtensions={disallowedFileExtensions}
@@ -281,8 +291,8 @@ export const DataSourceSelector: FC<Props> = ({ onDataSourceSelected,
                             enableHiding: false,
                         }}
                         enableDownload={onClose ? false : true}
-                    /> 
-                    </div> : null )
+                    />
+                    </div>)
                 }
 
             </div>

components/DataSources/DataSourcesTableScrollingIntegrations.tsx

@@ -189,7 +189,7 @@ const DataSourcesTableScrollingIntegrations: FC<Props> = ({ driveId,
             </ActionButton> 
             {folderHistory.map((item, index) => (
                 <React.Fragment key={item.id || index}>
-                    {/* <span className="mx-1 text-gray-500">/</span> */}
+                    <span className="mx-1 text-gray-500">/</span>
                     <button
                     className="cursor-pointer text-blue-500 hover:text-blue-700"
                     onClick={(e) => {
@@ -319,13 +319,18 @@ const DataSourcesTableScrollingIntegrations: FC<Props> = ({ driveId,
                         {isFolder ? (
                           <div className="flex flex-row items-center gap-2">
                             <IconFolder size={16} className="flex items-center" />
-                            <span 
+                            <span
                               className="text-gray-400 cursor-pointer hover:text-blue-500"
                               onClick={(e) => {
                                 e.stopPropagation();
-                                const newHistory = [...folderHistory, { id: record.id, name: record.name }];
-                                setFolderHistory(newHistory);
-                                onFolderPathChange?.(newHistory);
+                                // Use functional update to avoid stale closure
+                                setFolderHistory((prevHistory) => {
+                                //   console.log('Current folderHistory:', prevHistory);
+                                  const newHistory = [...prevHistory, { id: record.id, name: record.name }];
+                                //   console.log('New history:', newHistory);
+                                  onFolderPathChange?.(newHistory);
+                                  return newHistory;
+                                });
                                 setIsLoading(true);
                                 fetchFiles(record.id);
                               }}
@@ -426,9 +431,12 @@ const DataSourcesTableScrollingIntegrations: FC<Props> = ({ driveId,
               const isFolder = record.mimeType.toLowerCase().includes("folder");
 
               if (isFolder) {
-                const newHistory = [...folderHistory, { id: record.id, name: record.name }];
-                setFolderHistory(newHistory);
-                onFolderPathChange?.(newHistory);
+                // Use functional update to avoid stale closure
+                setFolderHistory((prevHistory) => {
+                  const newHistory = [...prevHistory, { id: record.id, name: record.name }];
+                  onFolderPathChange?.(newHistory);
+                  return newHistory;
+                });
                 setIsLoading(true);
                 fetchFiles(record.id);
               } else {

components/Promptbar/components/AssistantModalComponents/AssistantDriveDataSources.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useContext, useState, useEffect } from 'react';
-import { IconBrandGoogleDrive, IconAlertTriangle, IconFolder, IconFolders } from '@tabler/icons-react';
+import { IconAlertTriangle, IconFolder, IconFolders } from '@tabler/icons-react';
 import HomeContext from '@/pages/api/home/home.context';
 import { capitalize } from '@/utils/app/data';
 import DataSourcesTableScrollingIntegrations from '@/components/DataSources/DataSourcesTableScrollingIntegrations';
@@ -15,6 +15,7 @@ import { getScheduledTask } from '@/services/scheduledTasksService';
 import { cronToDriveRescanSchedule } from '@/utils/app/scheduledTasks';
 import { AssistantDefinition } from '@/types/assistant';
 import { getDriveFileIntegrationTypes } from '@/utils/app/integrations';
+import { translateIntegrationIcon } from '@/components/Integrations/IntegrationsDialog';
 
 
  // Add helper function to check if there are any files selected
@@ -78,6 +79,7 @@ export const AssistantDriveDataSources: FC<Props> = ({
   const [supportedDriveIntegrations, setSupportedDriveIntegrations] = useState<string[] | null>(null);
 
   const [selectedIntegration, setSelectedIntegration] = useState<string>('');
+  const [selectedMicrosoftService, setSelectedMicrosoftService] = useState<'microsoft_drive' | 'microsoft_sharepoint'>('microsoft_drive');
   const [connectedDriveIntegrations, setConnectedDriveIntegrations] = useState<string[] | null>(null);
   const [currentFolderPath, setCurrentFolderPath] = useState<string[]>([]);
   const [currentFolderHistory, setCurrentFolderHistory] = useState<Array<{id: string | null, name: string}>>([]);
@@ -433,8 +435,13 @@ export const AssistantDriveDataSources: FC<Props> = ({
   }
 
   const handleOnTabChange = (integrationProvider: string) => {
-    const integration = integrationProvider.toLowerCase() + "_drive";
-    setSelectedIntegration(integration);
+    if (integrationProvider.toLowerCase() === 'microsoft') {
+      // For Microsoft, use the selected service (OneDrive or SharePoint)
+      setSelectedIntegration(selectedMicrosoftService);
+    } else {
+      const integration = integrationProvider.toLowerCase() + "_drive";
+      setSelectedIntegration(integration);
+    }
   }
 
       // Initialize drive rescan schedule from existing scheduled tasks
@@ -496,13 +503,60 @@ export const AssistantDriveDataSources: FC<Props> = ({
               {renderRescanScheduler()}
             </div>}
 
-         <IntegrationTabs open={true} 
+         <IntegrationTabs open={true}
            onConnectedIntegrations={handleOnConnectedIntegrations}
            onSupportedIntegrations={handleOnSupportedIntegrations}
            onTabChange={handleOnTabChange}
-           allowedIntegrations={Object.values(integrationProviders).map(provider => provider + "_drive")}
+           allowedIntegrations={[
+             ...Object.values(integrationProviders).map(provider => provider + "_drive"),
+             'microsoft_sharepoint' // Add SharePoint explicitly
+           ]}
           />
-    
+
+        {/* Microsoft Service Selector - shown when Microsoft tab is active */}
+        {selectedIntegration && (selectedIntegration.startsWith('microsoft_')) && (
+          <div className="mb-4 px-4">
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 flex items-center gap-2">
+              <span className="flex items-center gap-2">
+                Select Service
+              </span>
+              {/* Connection status indicator */}
+              {connectedDriveIntegrations?.includes(selectedMicrosoftService) ? (
+                <span className="ml-auto text-xs text-green-600 dark:text-green-400 flex items-center gap-1">
+                  <span className="w-2 h-2 bg-green-500 rounded-full"></span>
+                  Connected
+                </span>
+              ) : (
+                <span className="ml-auto text-xs text-red-600 dark:text-red-400 flex items-center gap-1">
+                  <span className="w-2 h-2 bg-red-500 rounded-full"></span>
+                  Disconnected
+                </span>
+              )}
+            </label>
+            <div className="relative">
+              <select
+                value={selectedMicrosoftService}
+                onChange={(e) => {
+                  const newService = e.target.value as 'microsoft_drive' | 'microsoft_sharepoint';
+                  setSelectedMicrosoftService(newService);
+                  setSelectedIntegration(newService);
+                }}
+                className="w-full p-2 pl-10 border border-gray-300 dark:border-[#454652] rounded-md bg-white dark:bg-[#40414F] text-gray-900 dark:text-white text-sm cursor-pointer"
+              >
+                <option value="microsoft_drive">
+                  OneDrive 
+                </option>
+                <option value="microsoft_sharepoint">
+                  SharePoint 
+                </option>
+              </select>
+              <div className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none">
+                {translateIntegrationIcon(selectedMicrosoftService)}
+              </div>
+            </div>
+          </div>
+        )}
+
         {/* File Display */}
         {selectedIntegration && (
         <>