From 819de8f7dddb09b9d217f303dd84ff720c2fbc87 Mon Sep 17 00:00:00 2001 From: Ryan526 Date: Wed, 25 Sep 2024 10:52:54 -0400 Subject: [PATCH] Add file upload functionality Fixes #465 Add file upload functionality to chat interface. * **Chat.svelte** - Add a file input element for uploading files. - Handle file input change event to read the file. - Update the `submitForm` function to include file data in the request. * **ChatOptionMenu.svelte** - Add an option to upload files in the dropdown menu. - Handle file input change event to read the file. * **ApiUtil.svelte** - Add a new endpoint for file uploads. * **Storage.svelte** - Add a function to handle file uploads and store them appropriately. --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/Niek/chatgpt-web/issues/465?shareId=XXXX-XXXX-XXXX-XXXX). --- src/lib/ApiUtil.svelte | 4 +++- src/lib/Chat.svelte | 23 ++++++++++++++++++++++- src/lib/ChatOptionMenu.svelte | 20 ++++++++++++++++++++ src/lib/Storage.svelte | 10 ++++++++++ 4 files changed, 55 insertions(+), 2 deletions(-) diff --git a/src/lib/ApiUtil.svelte b/src/lib/ApiUtil.svelte index 74b15e5f..e15cd044 100644 --- a/src/lib/ApiUtil.svelte +++ b/src/lib/ApiUtil.svelte @@ -5,6 +5,7 @@ const endpointGenerations = import.meta.env.VITE_ENDPOINT_GENERATIONS || '/v1/images/generations' const endpointModels = import.meta.env.VITE_ENDPOINT_MODELS || '/v1/models' const endpointEmbeddings = import.meta.env.VITE_ENDPOINT_EMBEDDINGS || '/v1/embeddings' + const endpointFileUploads = import.meta.env.VITE_ENDPOINT_FILE_UPLOADS || '/v1/files' const petalsBase = import.meta.env.VITE_PEDALS_WEBSOCKET || 'wss://chat.petals.dev' const endpointPetals = import.meta.env.VITE_PEDALS_WEBSOCKET || '/api/v2/generate' @@ -13,6 +14,7 @@ export const getEndpointGenerations = ():string => endpointGenerations export const getEndpointModels = ():string => endpointModels export const getEndpointEmbeddings = ():string => endpointEmbeddings + export const getEndpointFileUploads = ():string => endpointFileUploads export const getPetalsBase = ():string => petalsBase export const getPetalsWebsocket = ():string => endpointPetals - \ No newline at end of file + diff --git a/src/lib/Chat.svelte b/src/lib/Chat.svelte index 9edccf69..45da05bc 100644 --- a/src/lib/Chat.svelte +++ b/src/lib/Chat.svelte @@ -51,6 +51,8 @@ let recording = false let lastSubmitRecorded = false + let fileInput: HTMLInputElement + $: chat = $chatsStorage.find((chat) => chat.id === chatId) as Chat $: chatSettings = chat?.settings let showSettingsModal @@ -217,6 +219,21 @@ chatRequest.controller.abort() } + const handleFileInputChange = (event: Event) => { + const input = event.target as HTMLInputElement + const file = input.files?.[0] + if (file) { + const reader = new FileReader() + reader.onload = (e) => { + const content = e.target?.result as string + const fileMessage: Message = { role: 'user', content, uuid: uuidv4() } + addMessage(chatId, fileMessage) + submitForm() + } + reader.readAsText(file) + } + } + const submitForm = async (recorded: boolean = false, skipInput: boolean = false, fillMessage: Message|undefined = undefined): Promise => { // Compose the system prompt message if there are no messages yet - disabled for now if (chatRequest.updating) return @@ -426,6 +443,10 @@

+

+ + +

{#if chatRequest.updating}