From db0db959411a544521498792f82630eb3cca7327 Mon Sep 17 00:00:00 2001
From: "paola.trabucco" <paola.trabucco@accenture.com>
Date: Wed, 28 Aug 2024 10:38:03 +0200
Subject: [PATCH] askHermione/rephrase/summarize

---
 src/views/pages/canvas/Canvas.vue             | 158 ++++++++++++++++--
 src/views/pages/canvas/MdCanvas.vue           | 135 +++++++++++++--
 .../pages/canvas/ScenarioExecutionDialog.vue  |  16 +-
 3 files changed, 275 insertions(+), 34 deletions(-)

diff --git a/src/views/pages/canvas/Canvas.vue b/src/views/pages/canvas/Canvas.vue
index e9e8b69..6abb9fc 100644
--- a/src/views/pages/canvas/Canvas.vue
+++ b/src/views/pages/canvas/Canvas.vue
@@ -3,16 +3,40 @@
         <Dialog v-model:visible="execScenarioDialogVisible" modal :header="execScenario.name" :style="{ width: '70rem' }">
             <ScenarioExctuotionDialog :scenario="execScenario" @add="addFromDialog"/>
         </Dialog>
+        <Dialog v-model:visible="execHermioneDialogVisible" modal :header="modalTitle" :style="{ width: '70rem' }">
+            <div v-if="askDialog" class="card flex flex-col gap-4 p-1">
+                <div class="flex flex-col gap-2">
+                    <InputText id="question" type="text" placeholder="Write a Question" v-model="userQuestion" />
+                </div>    
+                <div class="flex justify-center">
+                    <Button label="Submit" @click="askHermione()" class=""/>
+                </div>
+            </div>
+
+            <div class="flex justify-center items-center">
+                <ProgressSpinner v-if="loadingData" style="width: 50px; height: 50px" strokeWidth="8" fill="transparent"
+                animationDuration=".5s" aria-label="Custom ProgressSpinner" />
+            </div>
+
+            <div v-if="dataLoaded" class="card flex flex-col gap-4 p-1">       
+                <div class="flex items-center gap-2 p-0">
+                    <button class="p-button p-button-primary" @click="addFromDialog()">Add to Canvas</button>
+                </div>     
+                <div class="flex mt-2">
+                    <Editor v-model="response" editorStyle="height: 320px" />
+                </div>
+            </div> 
+        </Dialog>
         <Editor  v-model="content"  editorStyle="height: 600px" @contextmenu="onRightClick" @selection-change="onSelectionChange" />
         <ContextMenu ref="menu" :model="items"  :style="{'white-space':'nowrap', 'width': 'auto'}" />
     </div>
 </template>
 
 <script setup>
-    import { ref ,computed} from 'vue';
-    import { onMounted } from 'vue';
     import { ScenarioService } from '@/service/ScenarioService.js';
-    import ScenarioExctuotionDialog from '@/views/pages/canvas/ScenarioExecutionDialog.vue';
+import ScenarioExctuotionDialog from '@/views/pages/canvas/ScenarioExecutionDialog.vue';
+import axios from 'axios';
+import { computed, onMounted, ref } from 'vue';
 
     const menu = ref();
     const currentSelection = ref(null);
@@ -22,31 +46,44 @@
     const items = ref([]);
     const execScenarioDialogVisible = ref(false);
     const execScenario = ref({name:""});
+    const userQuestion = ref(null)
+    const execHermioneDialogVisible = ref(false)
+    const response = ref('')
+    const dataLoaded = ref(false)
+    const loadingData = ref(false)
+    const askDialog = ref(false)
+    const modalTitle = ref(null)
 
-    const addFromDialog = (data) => {
-        console.log(data);
+    const addFromDialog = () => {
+        console.log(response);
         execScenarioDialogVisible.value = false;
-        content.value = content.value.substring(0, currentPosition.value) + data + content.value.substring(currentPosition.value);
-        
-    }
+        execHermioneDialogVisible.value = false;
 
+        if (currentSelection.value != null) {
+            content.value = content.value.substring(0, currentPosition.value) + response.value + content.value.substring(currentPosition.value + currentSelection.value.length);
+        } else {
+            content.value = content.value.substring(0, currentPosition.value) + response.value + content.value.substring(currentPosition.value);
+        }
+    }
+    
     const onRightClick = (event) => {
         if(currentSelection.value && currentSelection.value.length > 0) {
             items.value=[
-                {label: 'Summarize',icon: 'pi pi-language'},
-                {label: 'Rewrite', icon: 'pi pi-language'}
+                {label: 'Summarize',icon: 'pi pi-language', command:()=>openEditorAssistant(currentSelection.value, "summarize")},
+                {label: 'Rewrite', icon: 'pi pi-language', command:()=>openEditorAssistant(currentSelection.value, "rewrite")}
             ]
         }else {
             items.value=[
-                {  label: 'Ask Hermione', icon: 'pi pi-language'  },
+                {  label: 'Ask Hermione', icon: 'pi pi-language', command:()=>openAskDialog()  },
                 {  separator: true},
                 { label: 'Execute Scenario', icon: 'pi pi-volume-up',items: scenarioMenuItems}
             ]
         }
         menu.value.show(event);
     };
-
+/*
     const onSelectionChange = (event) => {
+        console.log("Testo selezionato", event)
         if(event.range.length === 0){
             currentSelection.value = null;
         } else{
@@ -54,6 +91,26 @@
         }
         currentPosition.value = event.range.index;
     };
+*/
+    const onSelectionChange = (event) => {
+      const { range, textValue } = event;
+        console.log(range, textValue)
+
+      if (range && textValue && range.length != 0) {
+        const start = range.index
+        const end = range.index + range.length
+
+        if (start != null && end != null && start <= end) {        
+            currentSelection.value = textValue.substring(start, end);
+            console.log(currentSelection.value)
+        } else {
+          currentSelection.value = null
+        }
+        currentPosition.value = event.range.index;
+
+        console.log("Testo selezionato", currentSelection.value)
+      }
+    };
 
     const scenarioMenuItems = computed(() => { 
         const scenario_items = [];
@@ -75,6 +132,83 @@
         execScenarioDialogVisible.value = true;
         execScenario.value = scenario;
     }
+
+    const openAskDialog = () => {
+        execHermioneDialogVisible.value = true;
+        askDialog.value = true
+        dataLoaded.value = false
+        modalTitle.value = "Ask Hermione"
+        userQuestion.value = ''
+    }
+
+    const openEditorAssistant = (text, action) => {
+        execHermioneDialogVisible.value=true
+        modalTitle.value = "Editor Assistant"
+        askDialog.value = false 
+        loadingData.value = true
+        dataLoaded.value = false
+
+        if (action === "rewrite") {
+            rephraseText(text)
+        } else {
+            summarizeText(text)
+        }
+    }
+
+    const rephraseText = (text) => {
+        const input = {
+            input: text
+        }
+        console.log("INPUT: ", input);
+
+        axios.post("/rephrase", input).then(resp => {
+            console.log("RESPONSE: ", resp.data);
+            response.value = resp.data.stringOutput
+            loadingData.value = false
+            dataLoaded.value = true
+        })
+        .catch(error => {
+            console.error('Error during the request:', error);
+        });
+    };
+
+    const summarizeText = (text) => {
+        const input = {
+            input: text
+        }
+        console.log("INPUT: ", input);
+
+        axios.post("/summarize", input).then(resp => {
+            console.log("RESPONSE: ", resp.data);
+            response.value = resp.data.stringOutput
+            loadingData.value = false
+            dataLoaded.value = true
+        })
+        .catch(error => {
+            console.error('Error during the request:', error);
+        });
+    };
+
+    const askHermione = () => {
+        const input = {
+            input: userQuestion.value
+        }
+        console.log("INPUT: ", input);
+
+        loadingData.value = true
+        
+        axios.post("/askHermione", input).then(resp => {
+            console.log("RESPONSE: ", resp.data);
+            response.value = resp.data.stringOutput
+            loadingData.value = false
+            dataLoaded.value = true
+            askDialog.value = false
+        })
+        .catch(error => {
+            console.error('Error during the request:', error);
+        });
+    };
+
     onMounted(() => {
         ScenarioService.getScenarios().then(resp=>{
             scenarios.value = resp.data
diff --git a/src/views/pages/canvas/MdCanvas.vue b/src/views/pages/canvas/MdCanvas.vue
index a377cc6..25a9829 100644
--- a/src/views/pages/canvas/MdCanvas.vue
+++ b/src/views/pages/canvas/MdCanvas.vue
@@ -4,7 +4,30 @@
             <MdScenarioExctuotionDialog :scenario="execScenario" @add="addFromDialog"/>
         </Dialog>
         <ContextMenu ref="menu" :model="items" :style="{'white-space':'nowrap', 'width': 'auto'}"/>
+        <Dialog v-model:visible="execHermioneDialogVisible" modal :header="modalTitle" :style="{ width: '70rem' }">
+            <div v-if="askDialog" class="card flex flex-col gap-4 p-1">
+                <div class="flex flex-col gap-2">
+                    <InputText id="question" type="text" placeholder="Write a Question" v-model="userQuestion" />
+                </div>    
+                <div class="flex justify-center">
+                    <Button label="Submit" @click="askHermione()" class=""/>
+                </div>
+            </div>
 
+            <div class="flex justify-center items-center">
+                <ProgressSpinner v-if="loadingData" style="width: 50px; height: 50px" strokeWidth="8" fill="transparent"
+                animationDuration=".5s" aria-label="Custom ProgressSpinner" />
+            </div>
+
+            <div v-if="dataLoaded" class="card flex flex-col gap-4 p-1">       
+                <div class="flex items-center gap-2 p-0">
+                    <button class="p-button p-button-primary" @click="addFromDialog(response)">Add to Canvas</button>
+                </div>     
+                <div class="flex mt-2">
+                    <Editor v-model="response" editorStyle="height: 320px; width: 930px" />
+                </div>
+            </div> 
+        </Dialog>
         <MdEditor class="editor" v-model="content" language="en-US" ref="editor"  @contextmenu="onRightClick" previewTheme="github" :toolbars="toolbars">     
             <template #defToolbars>
                 <Mark />
@@ -18,32 +41,36 @@
 </template>
 
 <script setup>
-    import { ref ,computed} from 'vue';
-    import { onMounted } from 'vue';
     import { ScenarioService } from '@/service/ScenarioService.js';
-    import MdScenarioExctuotionDialog from '@/views/pages/canvas/MdScenarioExecutionDialog.vue';
-
-    import { MdEditor,NormalToolbar ,ModalToolbar } from 'md-editor-v3';
-    import { Emoji, Mark, ExportPDF } from '@vavt/v3-extension';
-    
-    import '@vavt/v3-extension/lib/asset/style.css';
-    import 'md-editor-v3/lib/style.css';
-
+import MdScenarioExctuotionDialog from '@/views/pages/canvas/MdScenarioExecutionDialog.vue';
+import { Emoji, ExportPDF, Mark } from '@vavt/v3-extension';
+import '@vavt/v3-extension/lib/asset/style.css';
+import axios from 'axios';
+import { MdEditor } from 'md-editor-v3';
+import 'md-editor-v3/lib/style.css';
+import { computed, onMounted, ref } from 'vue';
 
     const menu = ref();
-    const currentSelection = ref(null);
-    const currentPosition = ref(null);
     const content = ref('# Welcome to Olympus Canvas....');
     const scenarios = ref([]);
     const items = ref([]);
     const execScenarioDialogVisible = ref(false);
     const execScenario = ref({name:""});
     const editor = ref();
+    const execHermioneDialogVisible = ref(false)
+    const modalTitle = ref('')
+    const askDialog = ref(false)
+    const loadingData = ref(false)
+    const dataLoaded = ref(false)
+    const response = ref(null)
+    const userQuestion = ref('')
 
 
     const addFromDialog = (data) => {
         console.log(data);
         execScenarioDialogVisible.value = false;
+        execHermioneDialogVisible.value = false;
+
          editor.value.insert((selectedText) => {
             return {
             targetValue: data,
@@ -57,12 +84,12 @@
     const onRightClick = (event) => {
         if(editor.value.getSelectedText().length > 0) {
             items.value=[
-                {label: 'Summarize',icon: 'pi pi-language'},
-                {label: 'Rewrite', icon: 'pi pi-language'}
+                {label: 'Summarize',icon: 'pi pi-language', command:()=>openEditorAssistant(editor.value.getSelectedText(), "summarize")},
+                {label: 'Rewrite', icon: 'pi pi-language', command:()=>openEditorAssistant(editor.value.getSelectedText(), "rewrite")}
             ]
         }else {
             items.value=[
-                {  label: 'Ask Hermione', icon: 'pi pi-language'  },
+                {  label: 'Ask Hermione', icon: 'pi pi-language', command:()=>openAskDialog()},
                 {  separator: true},
                 { label: 'Execute Scenario', icon: 'pi pi-volume-up',items: scenarioMenuItems}
             ]
@@ -91,6 +118,84 @@
         execScenarioDialogVisible.value = true;
         execScenario.value = scenario;
     }
+
+    
+    const openAskDialog = () => {
+        execHermioneDialogVisible.value = true;
+        askDialog.value = true
+        dataLoaded.value = false
+        modalTitle.value = "Ask Hermione"
+        userQuestion.value = ''
+    }
+
+    const openEditorAssistant = (text, action) => {
+        execHermioneDialogVisible.value=true
+        modalTitle.value = "Editor Assistant"
+        askDialog.value = false 
+        loadingData.value = true
+        dataLoaded.value = false
+
+        if (action === "rewrite") {
+            rephraseText(text)
+        } else {
+            summarizeText(text)
+        }
+    }
+
+    const rephraseText = (text) => {
+        const input = {
+            input: text
+        }
+        console.log("INPUT: ", input);
+
+        axios.post("/rephrase", input).then(resp => {
+            console.log("RESPONSE: ", resp.data);
+            response.value = resp.data.stringOutput
+            loadingData.value = false
+            dataLoaded.value = true
+        })
+        .catch(error => {
+            console.error('Error during the request:', error);
+        });
+    };
+
+    const summarizeText = (text) => {
+        const input = {
+            input: text
+        }
+        console.log("INPUT: ", input);
+
+        axios.post("/summarize", input).then(resp => {
+            console.log("RESPONSE: ", resp.data);
+            response.value = resp.data.stringOutput
+            loadingData.value = false
+            dataLoaded.value = true
+        })
+        .catch(error => {
+            console.error('Error during the request:', error);
+        });
+    };
+
+    const askHermione = () => {
+        const input = {
+            input: userQuestion.value
+        }
+        console.log("INPUT: ", input);
+
+        loadingData.value = true
+        askDialog.value = false
+        
+        axios.post("/askHermione", input).then(resp => {
+            console.log("RESPONSE: ", resp.data);
+            response.value = resp.data.stringOutput
+            loadingData.value = false
+            dataLoaded.value = true
+        })
+        .catch(error => {
+            console.error('Error during the request:', error);
+        });
+    };
+
     onMounted(() => {
         ScenarioService.getScenarios().then(resp=>{
             scenarios.value = resp.data
diff --git a/src/views/pages/canvas/ScenarioExecutionDialog.vue b/src/views/pages/canvas/ScenarioExecutionDialog.vue
index 614100b..4f42eae 100644
--- a/src/views/pages/canvas/ScenarioExecutionDialog.vue
+++ b/src/views/pages/canvas/ScenarioExecutionDialog.vue
@@ -15,8 +15,10 @@
             </div>
             
         </div>
-        <ProgressSpinner v-if="loading_data" style="width: 50px; height: 50px" strokeWidth="8" fill="transparent"
-            animationDuration=".5s" aria-label="Custom ProgressSpinner" />
+        <div class="flex justify-center items-center">
+            <ProgressSpinner v-if="loading_data" style="width: 50px; height: 50px" strokeWidth="8" fill="transparent"
+                animationDuration=".5s" aria-label="Custom ProgressSpinner" />
+        </div>
         <div v-if="data_loaded" class="card flex flex-col gap-4 p-1">
                 
             <div class="flex items-center gap-2 p-0">
@@ -32,12 +34,12 @@
 </template>
 
 <script setup>
-    import { ref ,defineEmits} from 'vue';
-    import InputText from 'primevue/inputtext';
-    import ProgressSpinner from 'primevue/progressspinner';
-    import Select from 'primevue/select';
-    import Textarea from 'primevue/textarea';
     import axios from 'axios';
+import InputText from 'primevue/inputtext';
+import ProgressSpinner from 'primevue/progressspinner';
+import Select from 'primevue/select';
+import Textarea from 'primevue/textarea';
+import { defineEmits, ref } from 'vue';
 
     import showdown from 'showdown';
     const loading_data = ref(false);