Feat: add initial Google Drive connector support (#11147)

### What problem does this PR solve? This feature is primarily ported from the [Onyx](https://github.com/onyx-dot-app/onyx) project with necessary modifications. Thanks for such a brilliant project. Minor: consistently use `google_drive` rather than `google_driver`. <img width="566" height="731" alt="image" src="https://github.com/user-attachments/assets/6f64e70e-881e-42c7-b45f-809d3e0024a4" /> <img width="904" height="830" alt="image" src="https://github.com/user-attachments/assets/dfa7d1ef-819a-4a82-8c52-0999f48ed4a6" /> <img width="911" height="869" alt="image" src="https://github.com/user-attachments/assets/39e792fb-9fbe-4f3d-9b3c-b2265186bc22" /> <img width="947" height="323" alt="image" src="https://github.com/user-attachments/assets/27d70e96-d9c0-42d9-8c89-276919b6d61d" /> ### Type of change - [x] New Feature (non-breaking change which adds functionality)
2025-12-08 20:42:30 +08:00 · 2025-11-10 19:15:02 +08:00
parent 29ea059f90
commit df16a80f25
31 changed files with 7147 additions and 3681 deletions
--- a/web/src/pages/user-setting/data-source/component/google-drive-token-field.tsx
+++ b/web/src/pages/user-setting/data-source/component/google-drive-token-field.tsx
@ -0,0 +1,66 @@
+import { useMemo, useState } from 'react';
+
+import { FileUploader } from '@/components/file-uploader';
+import message from '@/components/ui/message';
+import { Textarea } from '@/components/ui/textarea';
+import { FileMimeType } from '@/constants/common';
+
+type GoogleDriveTokenFieldProps = {
+  value?: string;
+  onChange: (value: any) => void;
+  placeholder?: string;
+};
+
+const GoogleDriveTokenField = ({
+  value,
+  onChange,
+  placeholder,
+}: GoogleDriveTokenFieldProps) => {
+  const [files, setFiles] = useState<File[]>([]);
+
+  const handleValueChange = useMemo(
+    () => (nextFiles: File[]) => {
+      if (!nextFiles.length) {
+        setFiles([]);
+        return;
+      }
+      const file = nextFiles[nextFiles.length - 1];
+      file
+        .text()
+        .then((text) => {
+          JSON.parse(text);
+          onChange(text);
+          setFiles([file]);
+          message.success('JSON uploaded');
+        })
+        .catch(() => {
+          message.error('Invalid JSON file.');
+          setFiles([]);
+        });
+    },
+    [onChange],
+  );
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Textarea
+        value={value || ''}
+        onChange={(event) => onChange(event.target.value)}
+        placeholder={
+          placeholder ||
+          '{ "token": "...", "refresh_token": "...", "client_id": "...", ... }'
+        }
+        className="min-h-[120px] max-h-60 overflow-y-auto"
+      />
+      <FileUploader
+        className="py-4"
+        value={files}
+        onValueChange={handleValueChange}
+        accept={{ '*.json': [FileMimeType.Json] }}
+        maxFileCount={1}
+      />
+    </div>
+  );
+};
+
+export default GoogleDriveTokenField;