Develop scenario/scenario executions chat

This commit is contained in:
2025-03-18 17:11:13 +01:00
parent 38b21032e7
commit 49b0863a60
6 changed files with 737 additions and 745 deletions

View File

@@ -9,7 +9,12 @@
{{ scenario.description }}
</h2>
</div>
<div class="flex mt-6">
<div v-if="data_loaded && chat_enabled" class="flex mt-6 justify-center">
<div class="card flex flex-col gap-4 w-full items-center">
<Button label="Return to scenario" @click="chatDisabled" size="large" iconPos="right" icon="pi pi-backward" class="w-auto"></Button>
</div>
</div>
<div v-else class="flex mt-6">
<div class="card flex flex-col gap-4 w-full">
<MdPreview :class="['markdown-content', 'ml-[-20px]']" v-model="scenario.hint" language="en-US" />
@@ -143,7 +148,16 @@
</div>
</div>
</div>
<div class="flex justify-center">
<div v-if="data_loaded && scenario.chatEnabled" class="flex justify-center">
<div v-if ="!chat_enabled" class="flex gap-4">
<Button :disabled="loadingStore.exectuion_loading || !isInputFilled" label="Execute" @click="execScenario" size="large" iconPos="right" icon="pi pi-cog"></Button>
<Button label="Open Chat" @click="chatEnabled" size="large" iconPos="right" icon="pi pi-comments"></Button>
</div>
<!-- <div v-else>
<Button label="Return to scenario" @click="chatDisabled" size="large" iconPos="right" icon="pi pi-backward"></Button>
</div> -->
</div>
<div v-else class="flex justify-center">
<Button :disabled="loadingStore.exectuion_loading || !isInputFilled" label="Execute" @click="execScenario" size="large" iconPos="right" icon="pi pi-cog"></Button>
</div>
</template>
@@ -163,7 +177,7 @@
<div id="timer" class="timer">00:00</div>
</div>
</div>
<div v-if="data_loaded">
<div v-if="data_loaded && !chat_enabled">
<Panel class="mt-6">
<template #header>
<div class="flex items-center gap-2">
@@ -234,6 +248,18 @@
</div>
</Dialog>
</div>
<div v-if="data_loaded && chat_enabled" class="mt-4">
<Panel class="mt-6">
<template #header>
<div class="flex items-center gap-2 mt-2">
<span class="font-bold">Chat with WizardAI</span>
</div>
</template>
<div class="card flex flex-col gap-4 w-full">
<ChatClient :scenarioExecutionId="exec_id"/>
</div>
</Panel>
</div>
</template>
<script setup>
@@ -256,13 +282,12 @@ import { computed, onMounted, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { JellyfishLoader } from 'vue3-spinner';
import { ScenarioService } from '../../service/ScenarioService';
import ChatClient from '@/components/ChatClient.vue';
const loadingStore = LoadingStore();
const toast = useToast();
const zip = ref(null);
const router = useRouter();
const route = useRoute();
const value = ref('');
const rating = ref(0);
const scenario = ref({});
const scenario_response = ref(null);
@@ -298,6 +323,7 @@ const files = ref([]);
const fileContent = ref('');
const fileType = ref('');
const reqMultiFile = ref(false);
const chat_enabled = ref(false);
let startTime = ref(null);
let timerInterval = ref(null);
@@ -387,6 +413,14 @@ const getInputComponent = (type) => {
}
};
const chatEnabled = () =>{
chat_enabled.value = true;
}
const chatDisabled = () =>{
chat_enabled.value = false;
}
const execScenario = () => {
if (numberPrFiles.value !== 1 && reqMultiFile.value) {
toast.add({