hermione scenarios

src/layout/AppLayout.vue

@@ -2,7 +2,6 @@
 import { useLayout } from '@/layout/composables/layout';
 import { computed, ref, watch } from 'vue';
 import AppFooter from './AppFooter.vue';
-import AppSidebar from './AppSidebar.vue';
 import AppTopbar from './AppTopbar.vue';
 
 const { layoutConfig, layoutState, isSidebarActive, resetMenu } = useLayout();
@@ -21,8 +20,8 @@ const containerClass = computed(() => {
     return {
         'layout-theme-light': !layoutConfig.darkTheme,
         'layout-theme-dark': layoutConfig.darkTheme,
-        'layout-overlay': layoutConfig.menuMode === 'overlay',
+        //'layout-overlay': layoutConfig.menuMode === 'overlay',
-        'layout-static': layoutConfig.menuMode === 'static',
+        //'layout-static': layoutConfig.menuMode === 'static',
         'layout-static-inactive': layoutState.staticMenuDesktopInactive && layoutConfig.menuMode === 'static',
         'layout-overlay-active': layoutState.overlayMenuActive,
         'layout-mobile-active': layoutState.staticMenuMobileActive
@@ -55,9 +54,9 @@ const isOutsideClicked = (event) => {
 <template>
     <div class="layout-wrapper" :class="containerClass">
         <app-topbar></app-topbar>
-        <div class="layout-sidebar">
+    <!--   <div class="layout-sidebar">
             <app-sidebar></app-sidebar>
-        </div>
+        </div>--> 
         <div class="layout-main-container">
             <div class="layout-main">
                 <router-view></router-view>

src/layout/AppTopbar.vue

@@ -29,11 +29,11 @@ const { onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout();
                 <span>HERMIONE</span>
             </router-link>
         </div>
-
+<!--
         <button class="layout-menu-button layout-topbar-action" @click="onMenuToggle">
             <i class="pi pi-bars"></i>
         </button>
-
+-->
         <div class="layout-topbar-actions">
             <div class="layout-config-menu">
                 <button type="button" class="layout-topbar-action" @click="toggleDarkMode">

src/router/index.js

@@ -1,4 +1,5 @@
 import AppLayout from '@/layout/AppLayout.vue';
+
 import { createRouter, createWebHistory } from 'vue-router';
 
 const router = createRouter({
@@ -9,14 +10,20 @@ const router = createRouter({
             component: AppLayout,
             children: [
             {
-                    path: '/scenario', 
+                path: 'scenario',
                 children: [
-                        {path: 'list', name: 'scenario-list', component: () => import('@/views/pages/ScenarioExec.vue')},
+                {
-                        {path: ':id', name: 'scenario-exec', component: () => import('@/views/pages/ScenarioExec.vue')}
+                    path: '/',
-        
+                    name: 'scenario-list',
-                    ]
+                    component: () => import('@/views/pages/ScenarioList.vue')
-   
                 },
+                {
+                    path: 'exec/:id',
+                    name: 'scenario-exec',
+                    component: () => import('@/views/pages/ScenarioExec.vue')
+                }
+                ]
+            }
             ]
         }    
     ]

src/service/ScenarioService.js

@@ -0,0 +1,8 @@
+import axios from 'axios';
+export const ScenarioService = {
+    
+    getScenarios() {
+        return axios.get('http://localhost:8081/scenarios')
+
+    }
+}

src/service/Scenarios.js

@@ -1,131 +0,0 @@
-export const ScenarioService = {
-
-    getScenari(){
-        return {
-            "id": "66a5ff66fc2ae458a491f161",
-            "name": "simple rag for ATF",
-            "steps": [
-                {
-                    "type": "RAG_QUERY",
-                    "description": null,
-                    "name": "Query Vector DB Rag",
-                    "order": 1,
-                    "attributes": {
-                        "rag_threasold": 0.8,
-                        "rag_topk": 5,
-                        "rag_filter": "KsApplicatioName == 'atf'",
-                        "rag_output_variable": "rag_output",
-                        "rag_input": "$shared.user_input$"
-                    }
-                },
-                {
-                    "type": "SIMPLE_QUERY_AI",
-                    "description": null,
-                    "name": "Query AI",
-                    "order": 2,
-                    "attributes": {
-                        "qai_system_prompt_template": "You are the most expert about ATF application. \nUse the following documentation to provide answer to the user question : \ncontext:\n\n$shared.rag_output$",
-                        "qai_user_input": "$shared.user_input$",
-                        "qai_output_variable": "scenario_output"
-                    }
-                }
-            ],
-            "inputs": [
-                {
-                    "name": "input_question",
-                    "type": "text",
-                    "label": "Question"
-                }
-            ]
-        }
-    },
-    getScenarios() {
-        return [
-            {
-                "id": "66a5ff66fc2ae458a491f161",
-                "name": "simple rag for ATF",
-                "steps": [
-                    {
-                        "type": "RAG_QUERY",
-                        "description": null,
-                        "name": "Query Vector DB Rag",
-                        "order": 1,
-                        "attributes": {
-                            "rag_threasold": 0.8,
-                            "rag_topk": 5,
-                            "rag_filter": "KsApplicatioName == 'atf'",
-                            "rag_output_variable": "rag_output",
-                            "rag_input": "$shared.user_input$"
-                        }
-                    },
-                    {
-                        "type": "SIMPLE_QUERY_AI",
-                        "description": null,
-                        "name": "Query AI",
-                        "order": 2,
-                        "attributes": {
-                            "qai_system_prompt_template": "You are the most expert about ATF application. \nUse the following documentation to provide answer to the user question : \ncontext:\n\n$shared.rag_output$",
-                            "qai_user_input": "$shared.user_input$",
-                            "qai_output_variable": "scenario_output"
-                        }
-                    }
-                ],
-                "inputs": [
-                    {
-                        "name": "input_question",
-                        "type": "text",
-                        "label": "Question"
-                    }
-                ]
-            },
-            {
-                "id": "66a7bbb7c5c2e1863e5d6db0",
-                "name": "better rag",
-                "steps": [
-                    {
-                        "type": "SIMPLE_QUERY_AI",
-                        "description": null,
-                        "name": "Extract Keywords AI",
-                        "order": 0,
-                        "attributes": {
-                            "qai_system_prompt_template": "You are able to identify all the keywords from user sentence or question. Reply to the user with only a list of the keywords seprated by spaces and nothing else.",
-                            "qai_user_input": "$shared.user_input$",
-                            "qai_output_variable": "keywords"
-                        }
-                    },
-                    {
-                        "type": "RAG_QUERY",
-                        "description": null,
-                        "name": "Query Rag",
-                        "order": 1,
-                        "attributes": {
-                            "rag_threasold": 0.7,
-                            "rag_topk": 5,
-                            "rag_filter": "KsApplicatioName == 'atf'",
-                            "rag_output_variable": "rag_output",
-                            "rag_input": "$shared.keywords$"
-                        }
-                    },
-                    {
-                        "type": "SIMPLE_QUERY_AI",
-                        "description": null,
-                        "name": "Query AI",
-                        "order": 2,
-                        "attributes": {
-                            "qai_system_prompt_template": "You are the most expert about ATF application. \nUse the following documentation to provide answer to the user question : \ncontext:\n\n$shared.rag_output$",
-                            "qai_user_input": "$shared.user_input$",
-                            "qai_output_variable": "scenario_output"
-                        }
-                    }
-                ],
-                "inputs": [
-                    {
-                        "name": "input_question",
-                        "type": "text",
-                        "label": "Question"
-                    }
-                ]
-            }
-        ];
-    }
-}

src/views/pages/ScenarioExec.vue

@@ -1,6 +1,81 @@
 <template>
-    <div className="card">
+    <div v-if="loading">Loading...</div>
-        <h5>Empty Page</h5>
+    <div v-else>
-        <p>Use this page to start from scratch and place your custom content.</p>
+        <div v-for="input in scenario.inputs" :key="input.name" class="input-container">
+            <label :for="input.name"><b>{{ input.name }}</b></label>
+            <div class="input-wrapper">
+                <InputText :id="input.name" v-model="value" :placeholder="`Type ${input.name}`" class="full-width-input"/>
+                <Button label="Send" severity="info" @click="execScenario(input)" class="send-button"></Button>
+            </div>
+        </div>
+        <div>
+            <p>{{ scenario_output }}</p>
+        </div>
     </div>
 </template>
+
+<script setup>
+import axios from 'axios';
+import InputText from 'primevue/inputtext';
+import { onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+const value = ref('');
+const scenario = ref(null);
+const inputs = ref([]);
+const scenario_output = ref('');
+const loading = ref(false); 
+
+const route = useRoute();
+
+onMounted(async () => {
+    loading.value = true
+    const id = route.params.id;       
+    axios.get('http://localhost:8081/scenarios/' + id )
+        .then(response => {
+            console.log(response);
+            loading.value = false
+           scenario.value  = response.data
+        });      
+});
+
+const execScenario = (input) => {
+    const data = {
+        scenario_id: scenario.value.id,
+        inputs: {
+            [input.name]: value.value
+        }
+    }
+
+    console.log(data)
+
+    axios.post('http://localhost:8081/scenarios/execute', data)
+        .then(response => {
+            console.log(response);
+            scenario_output.value = response.data.stringOutput
+        });
+   
+}
+</script>
+
+<style scoped>
+.input-container {
+    margin-bottom: 1em;
+}
+
+.input-wrapper {
+    display: flex;
+    align-items: center; 
+    gap: 0.5em; 
+    margin-top: 10px;
+}
+
+.send-button {
+    margin-left: 0.5em; 
+}
+
+.full-width-input {
+    width: 100%;
+}
+
+</style>

src/views/pages/ScenarioList.vue

@@ -0,0 +1,87 @@
+<template>
+    <div v-if="loading">Loading...</div>
+    <div v-else>
+        <DataView :value="scenarios" :layout="layout" paginator :rows="5">
+        <template #header>
+            <div class="flex justify-end">
+                <SelectButton v-model="layout" :options="options" :allowEmpty="false">
+                    <template #option="{ option }">
+                        <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
+                    </template>
+                </SelectButton>
+            </div>
+        </template>
+
+        <template #list="slotProps">
+            <div class="flex flex-col">
+                <div v-for="(item, index) in slotProps.items" :key="index">
+                    <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
+                        <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
+                            <div class="flex flex-row md:flex-col justify-between items-start gap-2">
+                                <div>
+                                    <div class="text-lg font-medium mt-2">{{ item.name }}</div>
+                                    <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.description }}</span>
+                                </div>
+                            </div>
+                            <div class="flex flex-col md:items-end gap-8">
+                                <div class="flex flex-row-reverse md:flex-row gap-2">
+                                    <Button @click="executeScenario(item.id)" label="Load" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </template>
+
+
+        <template #grid="slotProps">
+            <div class="grid grid-cols-12 gap-4">
+                <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12 sm:col-span-6 md:col-span-4 xl:col-span-6 p-2">
+                    <div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col">
+                            <div class="text-lg font-medium mt-2">{{ item.name }}</div>
+                            <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.description }}</span>
+                        <div class="pt-6">
+                            <div class="flex flex-col gap-6 mt-6">
+                                <div class="flex gap-2">
+                                    <Button @click="executeScenario(item.id)" label="Load" class="flex-auto whitespace-nowrap"></Button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </DataView>
+    </div>
+</template>
+
+<script setup>
+
+import DataView from 'primevue/dataview';
+import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { ScenarioService } from '../../service/ScenarioService.js';
+
+    const router = useRouter()
+    const layout = ref('grid');
+    const options = ref(['list', 'grid']);
+    const scenarios = ref([])
+    const loading = ref(false)
+
+    
+    onMounted(() => {
+        loading.value = true
+        ScenarioService.getScenarios().then(resp=>{
+            scenarios.value = resp.data
+            loading.value = false
+            console.log(scenarios.value)
+        })
+        
+    });
+
+    const executeScenario = (id) => {
+        console.log(id);
+        router.push({ name: 'scenario-exec', params: { id: id } });
+    }
+</script>