Canvas feature release 1

src/views/pages/ScenarioExec.vue

@@ -64,7 +64,7 @@
             <Panel class="mt-6">
                 <template #header>
                 <div class="flex items-center gap-2">
-                    <span class="font-bold">AI Response</span>
+                    <span class="font-bold">Hermione Response</span>
                 </div>
                 </template>
                 <template #icons>
@@ -75,14 +75,12 @@
                     </div>
                 </template>
                 
-                <div class="flex mt-2">
                     <div class="card flex flex-col gap-4 w-full">
-                        <div v-if="scenario_output != null">
-                            <vue-markdown :source="scenario_output" />
-                        </div>
+                    <div v-if="scenario_output != null">
+                        <MdPreview class="editor" v-model="scenario_output" language="en-US"  />
                     </div>
                 </div>
-            </Panel>
+             </Panel>
             <Dialog v-model:visible="debug_modal" maximizable modal :header="scenario.name" :style="{ width: '75%' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
                 
                 <div class="flex">
@@ -107,8 +105,10 @@ import ProgressSpinner from 'primevue/progressspinner';
 import Select from 'primevue/select';
 import Textarea from 'primevue/textarea';
 import { onMounted, ref } from 'vue';
-import VueMarkdown from 'vue-markdown-render';
 import { useRoute, useRouter } from 'vue-router';
+import { MdPreview } from 'md-editor-v3';
+import 'md-editor-v3/lib/style.css';
+
 
 const router = useRouter();
 const route = useRoute();
@@ -205,4 +205,13 @@ onMounted(() => {
         width: 100%;
     }
 
+
+.editor ol {
+    list-style-type: decimal !important;
+}
+
+.editor ul {
+    list-style-type: disc !important;
+}
+ 
 </style>