From dd43513bc12e7a40cef3a1962eca88e7fea125ea Mon Sep 17 00:00:00 2001 From: Alfredo Gallardo Date: Tue, 28 Nov 2023 13:29:03 -0300 Subject: [PATCH 1/2] - feature: replace pdf with html in send page to agent feature --- .../src/components/popup/popup-embeder.ts | 11 ----------- .../src/hooks/use-global-popup-chrome-message.ts | 8 +++++--- .../communication/internal/types.ts | 5 +++-- .../src/service-worker/context-menu.ts | 16 ++++++++++++++-- 4 files changed, 22 insertions(+), 18 deletions(-) diff --git a/apps/shinkai-visor/src/components/popup/popup-embeder.ts b/apps/shinkai-visor/src/components/popup/popup-embeder.ts index 8f1b9d3a9..f3f90b306 100644 --- a/apps/shinkai-visor/src/components/popup/popup-embeder.ts +++ b/apps/shinkai-visor/src/components/popup/popup-embeder.ts @@ -1,4 +1,3 @@ -import { generatePdfFromCurrentPage } from '../../helpers/pdf-generator'; import { srcUrlResolver } from '../../helpers/src-url-resolver'; import { sendContentScriptMessage } from '../../service-worker/communication/internal'; import { @@ -66,16 +65,6 @@ chrome.runtime.onMessage.addListener(async (message: ServiceWorkerInternalMessag baseContainer.style.pointerEvents = isVisible ? 'auto' : 'none'; } break; - case ServiceWorkerInternalMessageType.SendPageToAgent: { - const pageAsPdf = await generatePdfFromCurrentPage(message.data.filename, document.body); - if (pageAsPdf) { - message.data = { - ...message.data, - pdf: pageAsPdf, - } - } - break; - } default: break; } diff --git a/apps/shinkai-visor/src/hooks/use-global-popup-chrome-message.ts b/apps/shinkai-visor/src/hooks/use-global-popup-chrome-message.ts index abf4a61b5..5c7d2e6f0 100644 --- a/apps/shinkai-visor/src/hooks/use-global-popup-chrome-message.ts +++ b/apps/shinkai-visor/src/hooks/use-global-popup-chrome-message.ts @@ -19,12 +19,14 @@ export const useGlobalPopupChromeMessage = () => { sendContentScriptMessage({ type: ContentScriptBridgeMessageType.TogglePopupVisibility, data: true }); break; } - case ServiceWorkerInternalMessageType.SendPageToAgent: - history.push({ pathname: '/inboxes/create-job', state: { files: [message.data.pdf] } }); + case ServiceWorkerInternalMessageType.SendPageToAgent: { + const file = dataUrlToFile(message.data.fileDataUrl, message.data.filename); + history.push({ pathname: '/inboxes/create-job', state: { files: [file] } }); sendContentScriptMessage({ type: ContentScriptBridgeMessageType.TogglePopupVisibility, data: true }); break; + } case ServiceWorkerInternalMessageType.SendCaptureToAgent: { - const imageFile = dataUrlToFile(message.data.image, message.data.filename); + const imageFile = dataUrlToFile(message.data.imageDataUrl, message.data.filename); history.push({ pathname: '/inboxes/create-job', state: { files: [imageFile] } }); sendContentScriptMessage({ type: ContentScriptBridgeMessageType.TogglePopupVisibility, data: true }); break; diff --git a/apps/shinkai-visor/src/service-worker/communication/internal/types.ts b/apps/shinkai-visor/src/service-worker/communication/internal/types.ts index b77df5b7c..1980d5bc6 100644 --- a/apps/shinkai-visor/src/service-worker/communication/internal/types.ts +++ b/apps/shinkai-visor/src/service-worker/communication/internal/types.ts @@ -26,12 +26,13 @@ export type ServiceWorkerInternalMessage = | { type: ServiceWorkerInternalMessageType.SendPageToAgent; data: { - pdf?: File; filename: string; + fileDataUrl: string; + fileType: string; } } | { type: ServiceWorkerInternalMessageType.RehydrateStore, data?: never } | { type: ServiceWorkerInternalMessageType.CopyToClipboard, data: { content: string } } | { type: ServiceWorkerInternalMessageType.CaptureImage, data: { image: string } } - | { type: ServiceWorkerInternalMessageType.SendCaptureToAgent, data: { image: string, filename: string } }; + | { type: ServiceWorkerInternalMessageType.SendCaptureToAgent, data: { imageDataUrl: string, filename: string } }; ; diff --git a/apps/shinkai-visor/src/service-worker/context-menu.ts b/apps/shinkai-visor/src/service-worker/context-menu.ts index e83982d65..dbe858332 100644 --- a/apps/shinkai-visor/src/service-worker/context-menu.ts +++ b/apps/shinkai-visor/src/service-worker/context-menu.ts @@ -1,3 +1,5 @@ +import { Buffer } from 'buffer'; + import { ServiceWorkerInternalMessage, ServiceWorkerInternalMessageType } from "./communication/internal/types"; enum ContextMenu { @@ -11,10 +13,20 @@ const sendPageToAgent = async (info: chrome.contextMenus.OnClickData, tab: chrom if (!tab?.id) { return; } + const [htmlContent] = await chrome.scripting.executeScript({ + target: { tabId: tab?.id }, + func: () => { + return document.documentElement.outerHTML; + }, + args: [], + }); + const fileType = 'text/html'; const message: ServiceWorkerInternalMessage = { type: ServiceWorkerInternalMessageType.SendPageToAgent, data: { - filename: `${encodeURIComponent(tab.url || Date.now())}.pdf` + filename: `${encodeURIComponent(tab.url || Date.now())}.html`, + fileType: fileType, + fileDataUrl: `data:${fileType};base64,${Buffer.from(htmlContent.result).toString('base64')}`, }, }; chrome.tabs.sendMessage(tab.id, message); @@ -53,7 +65,7 @@ const sendCaptureToAgent = async (info: chrome.contextMenus.OnClickData, tab: ch console.log('cropped image', croppedImage); message = { type: ServiceWorkerInternalMessageType.SendCaptureToAgent, - data: { image: croppedImage, filename: `${encodeURIComponent(tab.url || 'capture')}.jpeg` }, + data: { imageDataUrl: croppedImage, filename: `${encodeURIComponent(tab.url || 'capture')}.jpeg` }, }; chrome.tabs.sendMessage(tab.id, message); } From 20d71cea91770fba429095e18ae9d294e3936e20 Mon Sep 17 00:00:00 2001 From: Alfredo Gallardo Date: Tue, 28 Nov 2023 13:29:50 -0300 Subject: [PATCH 2/2] - fix: removed unused file --- .../src/helpers/pdf-generator.ts | 34 ------------------- 1 file changed, 34 deletions(-) delete mode 100644 apps/shinkai-visor/src/helpers/pdf-generator.ts diff --git a/apps/shinkai-visor/src/helpers/pdf-generator.ts b/apps/shinkai-visor/src/helpers/pdf-generator.ts deleted file mode 100644 index 5efad9c56..000000000 --- a/apps/shinkai-visor/src/helpers/pdf-generator.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { jsPDF } from 'jspdf'; - -const IGNORED_ELEMENTS = ['img', 'svg']; - -export const generatePdfFromCurrentPage = async (fileName: string, html: HTMLElement): Promise => { - try { - const pdf = new jsPDF({ orientation: 'portrait', unit: 'mm', format: 'a4', compress: true }); - const getPdfFromHtml = async (html: HTMLElement | string): Promise => { - return new Promise((resolve, reject) => { - pdf.html(html, { - html2canvas: { - scale: 0.1, - ignoreElements(element) { - return IGNORED_ELEMENTS.includes(element.tagName); - }, - }, - margin: 2, - autoPaging: 'text', - image: { type: 'jpeg', quality: 0.1 }, - callback: (doc) => { - const output = doc.output('blob'); - resolve(output); - }, - }); - }); - }; - const siteAsPdfBlob = await getPdfFromHtml(html); - const siteAsPdfFile = new File([siteAsPdfBlob], fileName, { type: siteAsPdfBlob.type }); - return siteAsPdfFile; - } catch (e) { - console.log('errror generating pdf', e); - return undefined; - } -};