Fixed web document rendering by changing cors

1 files changed, 49 insertions, 10 deletions

diff --git a/src/client/views/nodes/ChatBox/ChatBox.tsx b/src/client/views/nodes/ChatBox/ChatBox.tsx
index 383be0bb7..32ccbc35e 100644
--- a/src/client/views/nodes/ChatBox/ChatBox.tsx
+++ b/src/client/views/nodes/ChatBox/ChatBox.tsx
@@ -24,6 +24,8 @@ import { DocUtils } from '../../../documents/DocUtils';
 import { createRef } from 'react';
 import { ClientUtils } from '../../../../ClientUtils';
 import { ProgressBar } from './ProgressBar';
+import { DocumentView } from '../DocumentView';
+import { Networking } from '../../../Network';
 
 dotenv.config();
 
@@ -37,7 +39,7 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     @observable currentStep: string = ''; // Track current step name
     @observable expandedScratchpadIndex: number | null = null;
     @observable inputValue: string = '';
-    @observable private linked_docs_to_add: ObservableSet<Doc> = observable.set();
+    @observable private linked_docs_to_add: ObservableSet = observable.set();
     @observable private linked_csv_files: { filename: string; id: string; text: string }[] = [];
     @observable private isUploadingDocs: boolean = false;
     private openai: OpenAI;
@@ -45,7 +47,7 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     private vectorstore: Vectorstore;
     private agent: Agent; // Add the ChatBot instance
     private _oldWheel: HTMLDivElement | null = null;
-    private messagesRef: React.RefObject<HTMLDivElement>;
+    private messagesRef: React.RefObject;
 
     public static LayoutString(fieldKey: string) {
         return FieldView.LayoutString(ChatBox, fieldKey);
@@ -184,7 +186,7 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     };
 
     @action
-    askGPT = async (event: React.FormEvent<HTMLFormElement>): Promise<void> => {
+    askGPT = async (event: React.FormEvent): Promise => {
         event.preventDefault();
         this.inputValue = '';
 
@@ -244,14 +246,43 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     @action
     addLinkedUrlDoc = async (url: string, id: string) => {
-        const doc = Docs.Create.WebDocument(url);
+        const doc = Docs.Create.WebDocument(url, { data_useCors: true });
+
+        // const scriptsKey = Doc.LayoutFieldKey(doc) + '_allowScripts';
+        // doc[DocData][scriptsKey] = true;
+
+        console.log('Adding URL:', url);
+
+        //console.log('Layout Field Key:', doc[DocData][scriptsKey]);
 
         const linkDoc = Docs.Create.LinkDocument(this.Document, doc);
         LinkManager.Instance.addLink(linkDoc);
+        let canDisplay;
+
+        try {
+            // Fetch the URL content through the proxy
+            const { data } = await Networking.PostToServer('/proxyFetch', { url });
+
+            // Simulating header behavior as you can't fetch headers via the proxy
+            const xFrameOptions = data.headers?.['x-frame-options'];
+
+            if (xFrameOptions && xFrameOptions.toUpperCase() === 'SAMEORIGIN') {
+                console.log('URL cannot be displayed in an iframe:', url);
+                canDisplay = false;
+            } else {
+                console.log('URL can be displayed in an iframe:', url);
+                console.log(StrCast(linkDoc.canDisplay));
+                canDisplay = true;
+            }
+        } catch (error) {
+            console.error('Error fetching the URL from the server:', error);
+        }
 
         const chunkToAdd = {
             chunkId: id,
             chunkType: CHUNK_TYPE.URL,
+            url: url,
+            canDisplay: canDisplay,
         };
 
         doc.chunk_simpl = JSON.stringify({ chunks: [chunkToAdd] });
@@ -315,18 +346,26 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                             break;
                         case CHUNK_TYPE.TEXT:
                             DocumentManager.Instance.showDocument(doc, { willZoomCentered: true }, () => {
-                                const firstView = Array.from(doc[DocViews])[0];
-                                firstView.ComponentView?.search?.(citation.direct_text);
+                                const firstView = Array.from(doc[DocViews])[0] as DocumentView;
+                                firstView.ComponentView?.search?.(citation.direct_text ?? '');
                             });
                             break;
                         case CHUNK_TYPE.URL:
-                            DocumentManager.Instance.showDocument(doc, { willZoomCentered: true }, () => {
-                                const firstView = Array.from(doc[DocViews])[0];
-                            });
+                            console.log('Opening URL:', foundChunk.url);
+                            console.log('Can display:', foundChunk.canDisplay);
+                            if (!foundChunk.canDisplay) {
+                                console.log('Opening URL in new tab:', doc.displayUrl);
+                                window.open(StrCast(doc.displayUrl), '_blank');
+                            } else if (foundChunk.canDisplay) {
+                                console.log('Opening URL in Dash:', doc.displayUrl);
+                                DocumentManager.Instance.showDocument(doc, { willZoomCentered: true }, () => {
+                                    const firstView = Array.from(doc[DocViews])[0] as DocumentView;
+                                });
+                            }
                             break;
                         case CHUNK_TYPE.CSV:
                             DocumentManager.Instance.showDocument(doc, { willZoomCentered: true }, () => {
-                                const firstView = Array.from(doc[DocViews])[0];
+                                const firstView = Array.from(doc[DocViews])[0] as DocumentView;
                             });
                             break;
                         default: