1 files changed, 29 insertions, 2 deletions

diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index 7a86ee802..358557ad7 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -28,8 +28,8 @@ import { AnchorMenu } from './AnchorMenu';
 import { Annotation } from './Annotation';
 import { GPTPopup } from './GPTPopup/GPTPopup';
 import './PDFViewer.scss';
-// The workerSrc property shall be specified.
-// Pdfjs.GlobalWorkerOptions.workerSrc = 'https://unpkg.com/pdfjs-dist@4.4.168/build/pdf.worker.mjs';
+import { GPTCallType, gptAPICall } from '../../apis/gpt/GPT';
+import ReactLoading from 'react-loading';
 
 interface IViewerProps extends FieldViewProps {
     pdfBox: PDFBox;
@@ -64,6 +64,7 @@ export class PDFViewer extends ObservableReactComponent<IViewerProps> {
     @observable _textSelecting = true;
     @observable _showWaiting = true;
     @observable Index: number = -1;
+    @observable private _loading = false;
 
     private _pdfViewer!: PDFJSViewer.PDFViewer;
     private _styleRule: number | undefined; // stylesheet rule for making hyperlinks clickable
@@ -394,6 +395,23 @@ export class PDFViewer extends ObservableReactComponent<IViewerProps> {
         }
     };
 
+    /**
+     * Create a flashcard pile based on the selected text of a pdf.
+     */
+    gptPDFFlashcards = async () => {
+        const queryText = this._selectionText;
+        this._loading = true;
+        try {
+            const res = await gptAPICall(queryText, GPTCallType.FLASHCARD);
+
+            AnchorMenu.Instance.transferToFlashcard(res || 'Something went wrong', NumCast(this._props.layoutDoc['x']), NumCast(this._props.layoutDoc['y']));
+            this._selectionText = '';
+        } catch (err) {
+            console.error(err);
+        }
+        this._loading = false;
+    };
+
     @action
     finishMarquee = (/* x?: number, y?: number */) => {
         this._getAnchor = AnchorMenu.Instance?.GetAnchor;
@@ -411,8 +429,10 @@ export class PDFViewer extends ObservableReactComponent<IViewerProps> {
         document.removeEventListener('pointerup', this.onSelectEnd);
 
         const sel = window.getSelection();
+
         if (sel) {
             AnchorMenu.Instance.setSelectedText(sel.toString());
+            AnchorMenu.Instance.setLocation(NumCast(this._props.layoutDoc['x']), NumCast(this._props.layoutDoc['y']));
         }
 
         if (sel?.type === 'Range') {
@@ -424,6 +444,7 @@ export class PDFViewer extends ObservableReactComponent<IViewerProps> {
         GPTPopup.Instance.addDoc = this._props.sidebarAddDoc;
         // allows for creating collection
         AnchorMenu.Instance.addToCollection = this._props.DocumentView?.()._props.addDocument;
+        AnchorMenu.Instance.gptFlashcards = this.gptPDFFlashcards;
         AnchorMenu.Instance.AddDrawingAnnotation = this.addDrawingAnnotation;
     };
 
@@ -459,6 +480,7 @@ export class PDFViewer extends ObservableReactComponent<IViewerProps> {
             this._mainCont.current!.style.transform = '';
         }
         this._selectionContent = selRange.cloneContents();
+
         this._selectionText = this._selectionContent?.textContent || '';
 
         // clear selection
@@ -617,6 +639,11 @@ export class PDFViewer extends ObservableReactComponent<IViewerProps> {
                         />
                     )}
                 </div>
+                {this._loading ? (
+                    <div className="loading-spinner" style={{ position: 'absolute' }}>
+                        <ReactLoading type="spin" height={80} width={80} color={'blue'} />
+                    </div>
+                ) : null}
             </div>
         );
     }