diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte index 0cbd18b8b..36430ed44 100644 --- a/src/lib/components/chat/MessageInput.svelte +++ b/src/lib/components/chat/MessageInput.svelte @@ -90,14 +90,49 @@ }); }; + const screenCaptureHandler = async () => { + try { + // Request screen media + const mediaStream = await navigator.mediaDevices.getDisplayMedia({ + video: { cursor: 'never' }, + audio: false + }); + // Once the user selects a screen, temporarily create a video element + const video = document.createElement('video'); + video.srcObject = mediaStream; + // Ensure the video loads without affecting user experience or tab switching + await video.play(); + // Set up the canvas to match the video dimensions + const canvas = document.createElement('canvas'); + canvas.width = video.videoWidth; + canvas.height = video.videoHeight; + // Grab a single frame from the video stream using the canvas + const context = canvas.getContext('2d'); + context.drawImage(video, 0, 0, canvas.width, canvas.height); + // Stop all video tracks (stop screen sharing) after capturing the image + mediaStream.getTracks().forEach((track) => track.stop()); + + // bring back focus to this current tab, so that the user can see the screen capture + window.focus(); + + // Convert the canvas to a Base64 image URL + const imageUrl = canvas.toDataURL('image/png'); + // Add the captured image to the files array to render it + files = [...files, { type: 'image', url: imageUrl }]; + // Clean memory: Clear video srcObject + video.srcObject = null; + } catch (error) { + // Handle any errors (e.g., user cancels screen sharing) + console.error('Error capturing screen:', error); + } + }; + const uploadFileHandler = async (file, fullContext: boolean = false) => { if ($_user?.role !== 'admin' && !($_user?.permissions?.chat?.file_upload ?? true)) { toast.error($i18n.t('You do not have permission to upload files.')); return null; } - console.log(file); - const tempItemId = uuidv4(); const fileItem = { type: 'file', @@ -359,64 +394,13 @@ {/if} -
-
- { - if (availableToolIds.includes(e.id) || ($_user?.role ?? 'user') === 'admin') { - a[e.id] = { - name: e.name, - description: e.meta.description, - enabled: false - }; - } - return a; - }, {})} - uploadFilesHandler={() => { - filesInputElement.click(); - }} - uploadGoogleDriveHandler={async () => { - try { - const fileData = await createPicker(); - if (fileData) { - const file = new File([fileData.blob], fileData.name, { - type: fileData.blob.type - }); - await uploadFileHandler(file); - } else { - console.log('No file was selected from Google Drive'); - } - } catch (error) { - console.error('Google Drive Error:', error); - toast.error( - $i18n.t('Error accessing Google Drive: {{error}}', { - error: error.message - }) - ); - } - }} - onClose={async () => { - await tick(); - - const chatInput = document.getElementById('chat-input'); - chatInput?.focus(); - }} - > -