language menu

9 files changed, 137 insertions, 34 deletions

diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss
index 232362c5c..13ef8acec 100644
--- a/src/client/views/ContextMenu.scss
+++ b/src/client/views/ContextMenu.scss
@@ -116,7 +116,9 @@
 }
 
 .contextMenu-itemSelected {
-    background: lightgoldenrodyellow;
+    background: white;
+    color: black;
+    // background: lightgoldenrodyellow;
     border-style: none;
 }
 
diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index d784a14b8..348d248c8 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -182,7 +182,8 @@ export class ContextMenu extends ObservableReactComponent<{}> {
 
     @computed get menuItems() {
         if (!this._searchString) {
-            return this._items.map((item, ind) => <ContextMenuItem key={item.description + ind} {...item} noexpand={this.itemsNeedSearch ? true : (item as any).noexpand} closeMenu={this.closeMenu} />);
+            console.log('HERESDF');
+            return this._items.map((item, ind) => <ContextMenuItem key={item.description + ind} {...item} selected={ind === this._selectedIndex} noexpand={this.itemsNeedSearch ? true : (item as any).noexpand} closeMenu={this.closeMenu} />);
         }
         return this.filteredItems.map((value, index) =>
             Array.isArray(value) ? (
@@ -250,6 +251,11 @@ export class ContextMenu extends ObservableReactComponent<{}> {
     }
 
     @action
+    setLangIndex = (ind: number) => {
+        this._selectedIndex = ind;
+    };
+
+    @action
     onKeyDown = (e: React.KeyboardEvent) => {
         if (e.key === 'ArrowDown') {
             if (this._selectedIndex < this.flatItems.length - 1) {
diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx
index eb1030eec..21faad0c1 100644
--- a/src/client/views/ContextMenuItem.tsx
+++ b/src/client/views/ContextMenuItem.tsx
@@ -12,7 +12,7 @@ export interface OriginalMenuProps {
     description: string;
     event: (stuff?: any) => void;
     undoable?: boolean;
-    icon: IconProp | JSX.Element; // maybe should be optional (icon?)
+    icon?: IconProp | JSX.Element; // maybe should be optional (icon?)
     closeMenu?: () => void;
 }
 
diff --git a/src/client/views/nodes/ComparisonBox.scss b/src/client/views/nodes/ComparisonBox.scss
index f7389e39b..41ff56514 100644
--- a/src/client/views/nodes/ComparisonBox.scss
+++ b/src/client/views/nodes/ComparisonBox.scss
@@ -28,17 +28,96 @@
         padding-bottom: 10px;
         padding-left: 5px;
         padding-right: 5px;
-        width: 100%;
+        // width: 80%;
         border-radius: 2px;
         height: 15%;
-        display: flex;
+        display: inline-block;
         bottom: 0;
+        // right: 0;
+
+        &.schema-header-button {
+            color: gray;
+            margin: 3px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            svg {
+                width: 15px;
+            }
+        }
+
+        &.submit {
+            width: 80%;
+            // float: right;
+
+            // position: absolute;
+            // position: 10px;
+            // padding-left: 35%;
+            // padding-right: 80%;
+            // // width: 80px;
+            // // right: 0;
+            // right: 0;
+            // bottom: 0;
+        }
+        &.record {
+            width: 20%;
+            float: left;
+            border-radius: 2px;
+            // right: 0;
+            // height: 30%;
+        }
 
         button {
-            flex: 1;
-            position: relative;
+            // flex: 1;
+            // position: relative;
         }
     }
+
+    .dropbtn {
+        background-color: #3498db;
+        color: white;
+        padding: 16px;
+        font-size: 16px;
+        border: none;
+    }
+
+    .dropup {
+        position: absolute;
+        display: inline-block;
+        margin-top: 150px;
+        bottom: 0;
+    }
+
+    .dropup-content {
+        display: none;
+        position: absolute;
+        background-color: #f1f1f1;
+        min-width: 160px;
+        bottom: 40px;
+        z-index: 1000;
+    }
+
+    .dropup-content a {
+        color: black;
+        padding: 12px 16px;
+        text-decoration: none;
+        display: block;
+    }
+
+    .dropup-content a:hover {
+        background-color: #ccc;
+    }
+
+    .dropup:hover .dropup-content {
+        display: block;
+    }
+
+    .dropup:hover .dropbtn {
+        background-color: #2980b9;
+    }
+
     textarea {
         flex: 1;
         padding: 10px;
diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index 06ecf8893..3d2a1f0a9 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -602,10 +602,10 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     // });
     // };
 
-    @observable listening = false;
+    @observable private _listening = false;
     @observable transcriptElement = '';
     SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-    recognition = new this.SpeechRecognition();
+    @observable recognition = new this.SpeechRecognition();
 
     handleResult = (e: SpeechRecognitionEvent) => {
         let interimTranscript = '';
@@ -625,31 +625,39 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     setListening = () => {
         const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
         if (SpeechRecognition) {
-            console.log('here');
-            // const recognition = new SpeechRecognition();
-            this.recognition.continuous = true; // Continue listening even if the user pauses
-            this.recognition.interimResults = true; // Show interim results
-            this.recognition.lang = 'en-US'; // Set language (optional)
+            this.recognition.continuous = true;
+            this.recognition.interimResults = true;
+            this.recognition.lang = 'en-US';
             this.recognition.onresult = this.handleResult.bind(this);
-            // recognition.onend = this.handleEnd.bind(this);
-
-            // this.handleResult;
-            // recognition.stop();
         }
+        ContextMenu.Instance.setLangIndex(0);
     };
 
-    setLanguage = (language: string) => {
+    setLanguage = (e: React.MouseEvent, language: string, ind: number) => {
         this.recognition.lang = language;
+        ContextMenu.Instance.setLangIndex(ind);
     };
 
     startListening = () => {
         this.recognition.start();
-        this.listening = true;
+        this._listening = true;
     };
 
     stopListening = () => {
         this.recognition.stop();
-        this.listening = false;
+        this._listening = false;
+    };
+
+    openContextMenu = (x: number, y: number) => {
+        ContextMenu.Instance.clearItems();
+        ContextMenu.Instance.addItem({ description: 'English', event: e => this.setLanguage(e, 'en-US', 0) }); //prettier-ignore
+        ContextMenu.Instance.addItem({ description: 'Spanish', event: e => this.setLanguage(e, 'es-ES', 1 )}); //prettier-ignore
+        ContextMenu.Instance.addItem({ description: 'French', event: e => this.setLanguage(e, 'fr-FR', 2) }); //prettier-ignore
+        ContextMenu.Instance.addItem({ description: 'Italian', event: e => this.setLanguage(e, 'it-IT', 3) }); //prettier-ignore
+        ContextMenu.Instance.addItem({ description: 'Mandarin Chinese', event: e => this.setLanguage(e, 'zh-CH', 4) }); //prettier-ignore
+        ContextMenu.Instance.addItem({ description: 'Japanese', event: e => this.setLanguage(e, 'ja', 5) }); //prettier-ignore
+        ContextMenu.Instance.addItem({ description: 'Korean', event: e => this.setLanguage(e, 'ko', 6) }); //prettier-ignore
+        ContextMenu.Instance.displayMenu(x, y);
     };
 
     render() {
@@ -725,7 +733,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                 const dataSplit = StrCast(this.dataDoc.data).includes('Keyword: ') ? StrCast(this.dataDoc.data).split('Keyword: ') : StrCast(this.dataDoc.data).split('Answer: ');
                 const newDoc = Docs.Create.TextDocument(dataSplit[1]);
                 if (this.Document.image) DocCast(newDoc).image = DocCast(this.Document.image);
-                console.log('D' + this.Document.image);
+                // console.log('D' + this.Document.image);
                 //if (DocCast(DocCast(newDoc).dataDoc)) DocCast(DocCast(newDoc).dataDoc)['image'] = this.dataDoc['image'];
 
                 // console.log('HI' + this.Document.image);
@@ -821,17 +829,24 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                                 </div>
                             ) : null}
                         </div>
-                        <div style={{ display: 'inline-block' }}>
-                            <div className="submit-button" style={{ overflow: 'hidden' }}>
-                                <button style={{ width: '10px' }} onClick={this.listening ? this.stopListening : this.startListening}>
+                        <div>
+                            <div className="submit-button" style={{ overflow: 'hidden', display: 'flex', width: '100%' }}>
+                                <div
+                                    className="submit-buttonschema-header-button"
+                                    onPointerDown={e => this.openContextMenu(e.clientX, e.clientY)}
+                                    style={{ position: 'absolute', top: '1px', left: '11px', zIndex: '100', width: '5px', height: '5px', cursor: 'pointer' }}>
+                                    <FontAwesomeIcon color={'white'} icon="caret-down" />
+                                </div>
+                                <button className="submit-buttonrecord" onClick={this._listening ? this.stopListening : this.startListening} style={{ background: this._listening ? 'lightgray' : '', borderRadius: '2px' }}>
                                     {<FontAwesomeIcon icon="microphone" size="lg" />}
                                 </button>
+
                                 {this.layoutDoc[`_${this._props.fieldKey}_usePath`] !== 'alternate' ? (
-                                    <button type="button" onClick={this.handleRenderGPTClick} style={{ borderRadius: '2px', marginBottom: '3px' }}>
+                                    <button className="submit-buttonsubmit" type="button" onClick={this.handleRenderGPTClick} style={{ borderRadius: '2px', marginBottom: '3px', width: '300%' }}>
                                         Submit
                                     </button>
                                 ) : (
-                                    <button type="button" onClick={this.handleRenderClick} style={{ borderRadius: '2px' }}>
+                                    <button className="submit-buttonsubmit" type="button" onClick={this.handleRenderClick} style={{ borderRadius: '2px' }}>
                                         Redo the Question
                                     </button>
                                 )}
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 65a645560..93c07f3a8 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -377,7 +377,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             const hrefBase64 = await this.createCanvas();
             const response = await gptImageLabel(hrefBase64, 'Make flashcards out of this image with each question and answer labeled as "question" and "answer". Do not label each flashcard and do not include asterisks: ');
             console.log(response);
-            AnchorMenu.Instance.transferToFlashcard(response);
+            AnchorMenu.Instance.transferToFlashcard(response, NumCast(this.layoutDoc['x']), NumCast(this.layoutDoc['y']));
         } catch (error) {
             console.log('Error');
         }
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 0be51816f..3c12db965 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -1046,7 +1046,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
             );
             //const response = await gptImageLabel(u, 'Make flashcards out of this text with each question and answer labeled as question and answer. Do not label each flashcard and do not include asterisks: ');
             // console.log(response);
-            AnchorMenu.Instance.transferToFlashcard(response || 'Something went wrong');
+            AnchorMenu.Instance.transferToFlashcard(response || 'Something went wrong', NumCast(this.dataDoc['x']), NumCast(this.dataDoc['y']));
             // this._props.addto_;
             // this.Document[DocData].description = response.trim();
             // return response; // Return the response
diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx
index dcd76979f..31941a299 100644
--- a/src/client/views/pdf/AnchorMenu.tsx
+++ b/src/client/views/pdf/AnchorMenu.tsx
@@ -134,7 +134,7 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
      * Transfers the flashcard text generated by GPT on flashcards and creates a collection out them.
      */
 
-    transferToFlashcard = (text: string) => {
+    transferToFlashcard = (text: string, x: number, y: number) => {
         // put each question generated by GPT on the front of the flashcard
         var senArr = text.trim().split('Question: ');
         var collectionArr: Doc[] = [];
@@ -154,9 +154,10 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
         });
 
         console.log(collectionArr);
-        newCol.x = this._x;
-        newCol.y = this._y;
-        newCol.zIndex = 100;
+        newCol.x = x;
+        newCol.y = y;
+        console.log(this._x);
+        newCol.zIndex = 1000;
 
         this.addToCollection?.(newCol);
         this._loading = false;
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index 1af7b1fc0..9d06f81ed 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -556,7 +556,7 @@ export class PDFViewer extends ObservableReactComponent<IViewerProps> {
             const res = await gptAPICall(queryText, GPTCallType.FLASHCARD);
 
             console.log(res);
-            AnchorMenu.Instance.transferToFlashcard(res || 'Something went wrong');
+            AnchorMenu.Instance.transferToFlashcard(res || 'Something went wrong', NumCast(this._props.layoutDoc['x']), NumCast(this._props.layoutDoc['y']));
             this._selectionText = '';
         } catch (err) {
             console.error(err);