language menu

1 files changed, 35 insertions, 20 deletions

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>
                                 )}