mirror of
https://github.com/open-webui/open-webui
synced 2025-01-01 08:42:14 +00:00
feat: Add Google Drive file picker integration to chat interface
This commit is contained in:
parent
96c865404d
commit
61b1a8fdab
@ -9,6 +9,7 @@
|
|||||||
|
|
||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
import { page } from '$app/stores';
|
import { page } from '$app/stores';
|
||||||
|
import { loadGoogleAuthApi, loadGoogleDriveApi, createPicker } from '$lib/utils/google-drive-picker';
|
||||||
|
|
||||||
import { get, type Unsubscriber, type Writable } from 'svelte/store';
|
import { get, type Unsubscriber, type Writable } from 'svelte/store';
|
||||||
import type { i18n as i18nType } from 'i18next';
|
import type { i18n as i18nType } from 'i18next';
|
||||||
@ -300,6 +301,12 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
|
// Initialize Google APIs
|
||||||
|
await Promise.all([
|
||||||
|
loadGoogleAuthApi(),
|
||||||
|
loadGoogleDriveApi()
|
||||||
|
]);
|
||||||
|
|
||||||
window.addEventListener('message', onMessageHandler);
|
window.addEventListener('message', onMessageHandler);
|
||||||
$socket?.on('chat-events', chatEventHandler);
|
$socket?.on('chat-events', chatEventHandler);
|
||||||
|
|
||||||
@ -349,6 +356,47 @@
|
|||||||
|
|
||||||
// File upload functions
|
// File upload functions
|
||||||
|
|
||||||
|
const uploadGoogleDriveFile = async (fileData) => {
|
||||||
|
const fileItem = {
|
||||||
|
type: 'doc',
|
||||||
|
name: fileData.name,
|
||||||
|
collection_name: '',
|
||||||
|
status: 'uploading',
|
||||||
|
url: fileData.url,
|
||||||
|
error: ''
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
files = [...files, fileItem];
|
||||||
|
const res = await processWeb(localStorage.token, '', fileData.url);
|
||||||
|
|
||||||
|
if (res) {
|
||||||
|
fileItem.status = 'uploaded';
|
||||||
|
fileItem.collection_name = res.collection_name;
|
||||||
|
fileItem.file = {
|
||||||
|
...res.file,
|
||||||
|
...fileItem.file
|
||||||
|
};
|
||||||
|
|
||||||
|
files = files;
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
files = files.filter((f) => f.name !== fileData.name);
|
||||||
|
toast.error(JSON.stringify(e));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleGoogleDrivePicker = async () => {
|
||||||
|
try {
|
||||||
|
const fileData = await createPicker();
|
||||||
|
if (fileData) {
|
||||||
|
await uploadGoogleDriveFile(fileData);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
toast.error('Error accessing Google Drive: ' + error.message);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const uploadWeb = async (url) => {
|
const uploadWeb = async (url) => {
|
||||||
console.log(url);
|
console.log(url);
|
||||||
|
|
||||||
|
80
src/lib/utils/google-drive-picker.ts
Normal file
80
src/lib/utils/google-drive-picker.ts
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
// Google Drive Picker API configuration
|
||||||
|
const API_KEY = 'YOUR_API_KEY';
|
||||||
|
const CLIENT_ID = 'YOUR_CLIENT_ID';
|
||||||
|
const SCOPE = ['https://www.googleapis.com/auth/drive.readonly'];
|
||||||
|
|
||||||
|
let pickerApiLoaded = false;
|
||||||
|
let oauthToken: string | null = null;
|
||||||
|
|
||||||
|
export const loadGoogleDriveApi = () => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const script = document.createElement('script');
|
||||||
|
script.src = 'https://apis.google.com/js/api.js';
|
||||||
|
script.onload = () => {
|
||||||
|
gapi.load('picker', () => {
|
||||||
|
pickerApiLoaded = true;
|
||||||
|
resolve(true);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
script.onerror = reject;
|
||||||
|
document.body.appendChild(script);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const loadGoogleAuthApi = () => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const script = document.createElement('script');
|
||||||
|
script.src = 'https://accounts.google.com/gsi/client';
|
||||||
|
script.onload = resolve;
|
||||||
|
script.onerror = reject;
|
||||||
|
document.body.appendChild(script);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getAuthToken = async () => {
|
||||||
|
if (!oauthToken) {
|
||||||
|
const tokenClient = google.accounts.oauth2.initTokenClient({
|
||||||
|
client_id: CLIENT_ID,
|
||||||
|
scope: SCOPE.join(' '),
|
||||||
|
callback: (response: any) => {
|
||||||
|
if (response.access_token) {
|
||||||
|
oauthToken = response.access_token;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
await tokenClient.requestAccessToken();
|
||||||
|
}
|
||||||
|
return oauthToken;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const createPicker = async () => {
|
||||||
|
if (!pickerApiLoaded) {
|
||||||
|
await loadGoogleDriveApi();
|
||||||
|
}
|
||||||
|
|
||||||
|
const token = await getAuthToken();
|
||||||
|
if (!token) {
|
||||||
|
throw new Error('Unable to get OAuth token');
|
||||||
|
}
|
||||||
|
|
||||||
|
const picker = new google.picker.PickerBuilder()
|
||||||
|
.addView(google.picker.ViewId.DOCS)
|
||||||
|
.setOAuthToken(token)
|
||||||
|
.setDeveloperKey(API_KEY)
|
||||||
|
.setCallback((data: any) => {
|
||||||
|
if (data[google.picker.Response.ACTION] === google.picker.Action.PICKED) {
|
||||||
|
const doc = data[google.picker.Response.DOCUMENTS][0];
|
||||||
|
const fileId = doc[google.picker.Document.ID];
|
||||||
|
const fileName = doc[google.picker.Document.NAME];
|
||||||
|
const fileUrl = doc[google.picker.Document.URL];
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: fileId,
|
||||||
|
name: fileName,
|
||||||
|
url: fileUrl
|
||||||
|
};
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.build();
|
||||||
|
picker.setVisible(true);
|
||||||
|
};
|
Loading…
Reference in New Issue
Block a user