feat: add SharePoint integration with session validation and UI components

frontend/src/components/ConnectedStateSkeleton.tsx

@@ -0,0 +1,13 @@
+const ConnectedStateSkeleton = () => (
+  <div className="mb-4">
+    <div className="flex w-full animate-pulse items-center justify-between rounded-[10px] bg-gray-200 px-4 py-2 dark:bg-gray-700">
+      <div className="flex items-center gap-2">
+        <div className="h-4 w-4 rounded bg-gray-300 dark:bg-gray-600"></div>
+        <div className="h-4 w-32 rounded bg-gray-300 dark:bg-gray-600"></div>
+      </div>
+      <div className="h-4 w-16 rounded bg-gray-300 dark:bg-gray-600"></div>
+    </div>
+  </div>
+);
+
+export default ConnectedStateSkeleton;

frontend/src/components/ConnectorAuth.tsx

@@ -150,7 +150,7 @@ const ConnectorAuth: React.FC<ConnectorAuthProps> = ({
       {isConnected ? (
         <div className="mb-4">
           <div className="flex w-full items-center justify-between rounded-[10px] bg-[#8FDD51] px-4 py-2 text-sm font-medium text-[#212121]">
-            <div className="flex items-center gap-2">
+            <div className="flex max-w-[500px] items-center gap-2">
               <svg className="h-4 w-4" viewBox="0 0 24 24">
                 <path
                   fill="currentColor"

frontend/src/components/FileSelectionSkeleton.tsx

@@ -0,0 +1,13 @@
+const FilesSectionSkeleton = () => (
+  <div className="rounded-lg border border-[#EEE6FF78] dark:border-[#6A6A6A]">
+    <div className="p-4">
+      <div className="mb-4 flex items-center justify-between">
+        <div className="h-5 w-24 animate-pulse rounded bg-gray-200 dark:bg-gray-700"></div>
+        <div className="h-8 w-24 animate-pulse rounded bg-gray-200 dark:bg-gray-700"></div>
+      </div>
+      <div className="h-4 w-40 animate-pulse rounded bg-gray-200 dark:bg-gray-700"></div>
+    </div>
+  </div>
+);
+
+export default FilesSectionSkeleton;

frontend/src/components/GoogleDrivePicker.tsx

@@ -7,7 +7,10 @@ import {
   getSessionToken,
   setSessionToken,
   removeSessionToken,
+  validateProviderSession,
 } from '../utils/providerUtils';
+import ConnectedStateSkeleton from './ConnectedStateSkeleton';
+import FilesSectionSkeleton from './FileSelectionSkeleton';
 
 interface PickerFile {
   id: string;
@@ -50,20 +53,9 @@ const GoogleDrivePicker: React.FC<GoogleDrivePickerProps> = ({
 
   const validateSession = async (sessionToken: string) => {
     try {
-      const apiHost = import.meta.env.VITE_API_HOST;
-      const validateResponse = await fetch(
-        `${apiHost}/api/connectors/validate-session`,
-        {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            Authorization: `Bearer ${token}`,
-          },
-          body: JSON.stringify({
-            provider: 'google_drive',
-            session_token: sessionToken,
-          }),
-        },
+      const validateResponse = await validateProviderSession(
+        token,
+        'google_drive',
       );
 
       if (!validateResponse.ok) {
@@ -234,30 +226,6 @@ const GoogleDrivePicker: React.FC<GoogleDrivePickerProps> = ({
     onSelectionChange([], []);
   };
 
-  const ConnectedStateSkeleton = () => (
-    <div className="mb-4">
-      <div className="flex w-full animate-pulse items-center justify-between rounded-[10px] bg-gray-200 px-4 py-2 dark:bg-gray-700">
-        <div className="flex items-center gap-2">
-          <div className="h-4 w-4 rounded bg-gray-300 dark:bg-gray-600"></div>
-          <div className="h-4 w-32 rounded bg-gray-300 dark:bg-gray-600"></div>
-        </div>
-        <div className="h-4 w-16 rounded bg-gray-300 dark:bg-gray-600"></div>
-      </div>
-    </div>
-  );
-
-  const FilesSectionSkeleton = () => (
-    <div className="rounded-lg border border-[#EEE6FF78] dark:border-[#6A6A6A]">
-      <div className="p-4">
-        <div className="mb-4 flex items-center justify-between">
-          <div className="h-5 w-24 animate-pulse rounded bg-gray-200 dark:bg-gray-700"></div>
-          <div className="h-8 w-24 animate-pulse rounded bg-gray-200 dark:bg-gray-700"></div>
-        </div>
-        <div className="h-4 w-40 animate-pulse rounded bg-gray-200 dark:bg-gray-700"></div>
-      </div>
-    </div>
-  );
-
   return (
     <div>
       {isValidating ? (

frontend/src/components/SharePointPicker.tsx

@@ -0,0 +1,175 @@
+import { useTranslation } from 'react-i18next';
+import ConnectorAuth from './ConnectorAuth';
+import { useEffect, useState } from 'react';
+
+import {
+  getSessionToken,
+  setSessionToken,
+  removeSessionToken,
+  validateProviderSession,
+} from '../utils/providerUtils';
+import ConnectedStateSkeleton from './ConnectedStateSkeleton';
+import FilesSectionSkeleton from './FileSelectionSkeleton';
+
+interface SharePointPickerProps {
+  token: string | null;
+}
+
+const SharePointPicker: React.FC<SharePointPickerProps> = ({ token }) => {
+  const { t } = useTranslation();
+  const [isLoading, setIsLoading] = useState(false);
+  const [userEmail, setUserEmail] = useState<string>('');
+  const [isConnected, setIsConnected] = useState(false);
+  const [authError, setAuthError] = useState<string>('');
+  const [accessToken, setAccessToken] = useState<string | null>(null);
+  const [isValidating, setIsValidating] = useState(false);
+
+  useEffect(() => {
+    const sessionToken = getSessionToken('share_point');
+    if (sessionToken) {
+      setIsValidating(true);
+      setIsConnected(true); // Optimistically set as connected for skeleton
+      validateSession(sessionToken);
+    }
+  }, [token]);
+
+  const validateSession = async (sessionToken: string) => {
+    try {
+      const validateResponse = await validateProviderSession(
+        token,
+        'share_point',
+      );
+
+      if (!validateResponse.ok) {
+        setIsConnected(false);
+        setAuthError(
+          t('modals.uploadDoc.connectors.sharePoint.sessionExpired'),
+        );
+        setIsValidating(false);
+        return false;
+      }
+
+      const validateData = await validateResponse.json();
+      if (validateData.success) {
+        setUserEmail(
+          validateData.user_email ||
+            t('modals.uploadDoc.connectors.auth.connectedUser'),
+        );
+        setIsConnected(true);
+        setAuthError('');
+        setAccessToken(validateData.access_token || null);
+        setIsValidating(false);
+
+        return true;
+      } else {
+        setIsConnected(false);
+        setAuthError(
+          validateData.error ||
+            t('modals.uploadDoc.connectors.sharePoint.sessionExpiredGeneric'),
+        );
+        setIsValidating(false);
+        return false;
+      }
+    } catch (error) {
+      console.error('Error validating session:', error);
+      setAuthError(t('modals.uploadDoc.connectors.sharePoint.validateFailed'));
+      setIsConnected(false);
+      setIsValidating(false);
+      return false;
+    }
+  };
+
+  const handleDisconnect = async () => {
+    const sessionToken = getSessionToken('share_point');
+    if (sessionToken) {
+      try {
+        const apiHost = import.meta.env.VITE_API_HOST;
+        await fetch(`${apiHost}/api/connectors/disconnect`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${token}`,
+          },
+          body: JSON.stringify({
+            provider: 'share_point',
+            session_token: sessionToken,
+          }),
+        });
+      } catch (err) {
+        console.error('Error disconnecting from SharePoint:', err);
+      }
+    }
+
+    removeSessionToken('share_point');
+    setIsConnected(false);
+    setAccessToken(null);
+    setUserEmail('');
+    setAuthError('');
+  };
+
+  const handleOpenPicker = async () => {
+    alert('Feature not supported yet.');
+  };
+
+  return (
+    <div>
+      {isValidating ? (
+        <>
+          <ConnectedStateSkeleton />
+          <FilesSectionSkeleton />
+        </>
+      ) : (
+        <>
+          <ConnectorAuth
+            provider="share_point"
+            label={t('modals.uploadDoc.connectors.sharePoint.connect')}
+            onSuccess={(data) => {
+              setUserEmail(
+                data.user_email ||
+                  t('modals.uploadDoc.connectors.auth.connectedUser'),
+              );
+              setIsConnected(true);
+              setAuthError('');
+
+              if (data.session_token) {
+                setSessionToken('share_point', data.session_token);
+                validateSession(data.session_token);
+              }
+            }}
+            onError={(error) => {
+              setAuthError(error);
+              setIsConnected(false);
+            }}
+            isConnected={isConnected}
+            userEmail={userEmail}
+            onDisconnect={handleDisconnect}
+            errorMessage={authError}
+          />
+
+          {isConnected && (
+            <div className="rounded-lg border border-[#EEE6FF78] dark:border-[#6A6A6A]">
+              <div className="p-4">
+                <div className="mb-4 flex items-center justify-between">
+                  <h3 className="text-sm font-medium">
+                    {t('modals.uploadDoc.connectors.sharePoint.selectedFiles')}
+                  </h3>
+                  <button
+                    onClick={() => handleOpenPicker()}
+                    className="rounded-md bg-[#A076F6] px-3 py-1 text-sm text-white hover:bg-[#8A5FD4]"
+                    disabled={isLoading}
+                  >
+                    {isLoading
+                      ? t('modals.uploadDoc.connectors.sharePoint.loading')
+                      : t('modals.uploadDoc.connectors.sharePoint.selectFiles')}
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+};
+
+export default SharePointPicker;

frontend/src/locale/en.json

@@ -297,6 +297,10 @@
         "google_drive": {
           "label": "Google Drive",
           "heading": "Upload from Google Drive"
+        },
+        "share_point": {
+          "label": "SharePoint",
+          "heading": "Upload from SharePoint"
         }
       },
       "connectors": {
@@ -326,6 +330,24 @@
           "remove": "Remove",
           "folderAlt": "Folder",
           "fileAlt": "File"
+        },
+        "sharePoint": {
+          "connect": "Connect to SharePoint",
+          "sessionExpired": "Session expired. Please reconnect to SharePoint.",
+          "sessionExpiredGeneric": "Session expired. Please reconnect your account.",
+          "validateFailed": "Failed to validate session. Please reconnect.",
+          "noSession": "No valid session found. Please reconnect to SharePoint.",
+          "noAccessToken": "No access token available. Please reconnect to SharePoint.",
+          "pickerFailed": "Failed to open file picker. Please try again.",
+          "selectedFiles": "Selected Files",
+          "selectFiles": "Select Files",
+          "loading": "Loading...",
+          "noFilesSelected": "No files or folders selected",
+          "folders": "Folders",
+          "files": "Files",
+          "remove": "Remove",
+          "folderAlt": "Folder",
+          "fileAlt": "File"
         }
       }
     },

frontend/src/locale/es.json

@@ -260,6 +260,10 @@
         "google_drive": {
           "label": "Google Drive",
           "heading": "Subir desde Google Drive"
+        },
+        "share_point": {
+          "label": "SharePoint",
+          "heading": "Subir desde SharePoint"
         }
       },
       "connectors": {
@@ -289,6 +293,24 @@
           "remove": "Eliminar",
           "folderAlt": "Carpeta",
           "fileAlt": "Archivo"
+        },
+        "sharePoint": {
+          "connect": "Conectar a SharePoint",
+          "sessionExpired": "Sesión expirada. Por favor, reconecte a SharePoint.",
+          "sessionExpiredGeneric": "Sesión expirada. Por favor, reconecte su cuenta.",
+          "validateFailed": "Error al validar la sesión. Por favor, reconecte.",
+          "noSession": "No se encontró una sesión válida. Por favor, reconecte a SharePoint.",
+          "noAccessToken": "No hay token de acceso disponible. Por favor, reconecte a SharePoint.",
+          "pickerFailed": "Error al abrir el selector de archivos. Por favor, inténtelo de nuevo.",
+          "selectedFiles": "Archivos Seleccionados",
+          "selectFiles": "Seleccionar Archivos",
+          "loading": "Cargando...",
+          "noFilesSelected": "No hay archivos o carpetas seleccionados",
+          "folders": "Carpetas",
+          "files": "Archivos",
+          "remove": "Eliminar",
+          "folderAlt": "Carpeta",
+          "fileAlt": "Archivo"
         }
       }
     },