@3cr/viewer-browser 0.0.200 → 0.0.220

package/src/components/modal/AskAI.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-dialog v-model:model-value="modalState" max-width="800" theme="light">
+  <v-dialog v-model="modalState" max-width="800" theme="light">
     <v-card class="prompt-box pa-2 py-4" rounded="xl">
       <v-card-title class="text-body-1 d-flex align-center text-wrap mx-3 mb-4">
         <span>{{ questionText }}</span>
@@ -8,16 +8,8 @@
       <div class="bordered-gradient-box" v-if="smartResponses">
         <div class="prompt" style="font-size: 28px">
           <!--          &#129668;-->
-          <v-img
-            src="@/assets/magic_wand.svg"
-            class="animated"
-            max-width="42"
-          />
-          &nbsp;&nbsp;&nbsp;<span
-            style="font-size: 18px"
-            v-html="smartResponses?.GptResponse"
-          >
-          </span>
+          <v-img src="@/assets/magic_wand.svg" class="animated" max-width="42" />
+          &nbsp;&nbsp;&nbsp;<span style="font-size: 18px" v-html="smartResponses?.GptResponse"> </span>
         </div>
       </div>
 
@@ -26,19 +18,13 @@
         <div class="loading"></div>
       </div>
       <v-card-text class="py-0">
-        <span
-          class="text-caption"
-          style="font-size: 10px !important; line-height: 10px !important"
-          >* 3Dicom's Annotiva AI is powered by AI Large Language Models (LLMs)
-          which generate general health information for improved patient
-          comprehension. <br />It is NOT for diagnostic usage.
+        <span class="text-caption" style="font-size: 10px !important; line-height: 10px !important"
+          >* 3Dicom's Annotiva AI is powered by AI Large Language Models (LLMs) which generate general health
+          information for improved patient comprehension. <br />It is NOT for diagnostic usage.
         </span>
       </v-card-text>
 
-      <v-card-title
-        v-if="smartResponses"
-        class="text-body-1 d-flex align-center text-wrap mx-3 mt-6 mb-0"
-      >
+      <v-card-title v-if="smartResponses" class="text-body-1 d-flex align-center text-wrap mx-3 mt-6 mb-0">
         Still Curious?
       </v-card-title>
       <v-card-text class="py-0">
@@ -49,11 +35,7 @@
               text-wrap: wrap;
               word-wrap: break-word;
               min-height: 36px;
-              background: linear-gradient(
-                to right,
-                rgba(38, 55, 245, 0.85),
-                rgba(145, 78, 245, 0.85)
-              );
+              background: linear-gradient(to right, rgba(38, 55, 245, 0.85), rgba(145, 78, 245, 0.85));
             "
             class="text-wrap mb-1 px-4 v-chip--selected text-white"
             @click="askFollowUpQuestion(action)"
@@ -67,13 +49,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from "vue";
-import {
-  GptQuestion,
-  GptResponsePayload,
-  GptService,
-} from "@/services/gpt/gpt.service";
-const smartResponses = ref<GptResponsePayload | null>(null);
+import { computed, ref, watch } from 'vue';
+import { GptService } from '@/services/gpt.service';
+import { GptQuestion } from '@/types/gpt-question';
+import { GptResponsePayload } from '@/types/gpt-response-payload';
+
 interface Props {
   modal?: boolean;
   questionText: string;
@@ -82,7 +62,7 @@ interface Props {
 }
 
 type Emits = {
-  "update:modal": [value: boolean];
+  'update:modal': [value: boolean];
   askFollowup: [value: GptQuestion];
 };
 
@@ -90,21 +70,23 @@ const props = defineProps<Props>();
 
 const emit = defineEmits<Emits>();
 
-const item = ref();
+const item = ref<number>();
+
+const smartResponses = ref<GptResponsePayload>();
+
 const modalState = computed({
   get(): boolean {
     return props.modal;
   },
   set(value: boolean): void {
-    emit("update:modal", value);
-  },
+    emit('update:modal', value);
+  }
 });
 
 watch(
   modalState,
   async (val: boolean) => {
     if (val) {
-      smartResponses.value = null;
       await getSmartResponses();
     }
   },
@@ -120,23 +102,25 @@ async function getSmartResponses(): Promise<void> {
   );
 }
 
-async function askFollowUpQuestion(question: GptQuestion): Promise<void> {
-  emit("askFollowup", question);
+function askFollowUpQuestion(question: GptQuestion): void {
+  emit('askFollowup', question);
 }
 </script>
+
 <style>
 .loading {
   font-size: 30px;
 }
+
 .loading:after {
   overflow: hidden;
   display: inline-block;
   vertical-align: bottom;
   -webkit-animation: ellipsis steps(4, end) 900ms infinite;
   animation: ellipsis steps(4, end) 900ms infinite;
-  content: "\2026";
+  content: '\2026';
   /* ascii code for the ellipsis character */
-  width: 0px;
+  width: 0;
 }
 
 @keyframes ellipsis {
@@ -171,14 +155,16 @@ async function askFollowUpQuestion(question: GptQuestion): Promise<void> {
 }
 
 .prompt::before {
-  content: "";
+  content: '';
   position: absolute;
   inset: 0;
   border-radius: 16px;
   padding: 3px;
   background: linear-gradient(to right, #6fb3f2, #4e51f5);
 
-  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
 }
@@ -212,10 +198,12 @@ async function askFollowUpQuestion(question: GptQuestion): Promise<void> {
 .record-button:active {
   background: #3b3edf;
 }
+
 .animated {
   animation: pulse 2s infinite;
   transition: all 2s ease-in-out;
 }
+
 @keyframes pulse {
   0% {
     transform: scale(1);
@@ -224,13 +212,9 @@ async function askFollowUpQuestion(question: GptQuestion): Promise<void> {
     transform: scale(1.2);
   }
 }
+
 .btn-grad {
-  background-image: linear-gradient(
-    to right,
-    #2b5876 0%,
-    #4e4376 51%,
-    #2b5876 100%
-  );
+  background-image: linear-gradient(to right, #2b5876 0%, #4e4376 51%, #2b5876 100%);
   margin: 10px;
   padding: 15px 45px;
   text-align: center;
@@ -242,6 +226,7 @@ async function askFollowUpQuestion(question: GptQuestion): Promise<void> {
   border-radius: 10px;
   display: block;
 }
+
 .btn-grad:hover {
   background-position: right center; /* change the direction of the change here */
   color: #fff;

package/src/components/modal/CloseViewerModal.vue

@@ -1,66 +1,35 @@
 <template>
-  <v-dialog data-testid="dialog" v-model:model-value="modalState">
-    <v-card
-      class="pa-1 ma-auto position-relative motif-background"
-      width="600"
-      theme="dark"
-    >
+  <v-dialog data-testid="dialog" v-model="modalState">
+    <v-card class="pa-1 ma-auto position-relative motif-background" width="600" theme="dark">
       <v-card-title class="text-center">Close Viewer?</v-card-title>
-      <v-card-text class="text-center mb-2">
-        Are you sure you want to close the Online Viewer?
-      </v-card-text>
+      <v-card-text class="text-center mb-2"> Are you sure you want to close the Online Viewer? </v-card-text>
       <v-card-actions>
-        <v-btn
-          variant="flat"
-          color="secondary"
-          @click="modalState = false"
-        >
-          Cancel
-        </v-btn>
+        <v-btn data-testid="cancel" variant="flat" color="secondary" @click="modalState = false"> Cancel </v-btn>
         <v-spacer />
-        <v-btn
-          data-testid="close"
-          color="red"
-          variant="flat"
-          @click="closeModal"
-          v-if="showOption('OnSaveSession')"
-        >
+        <v-btn v-if="options?.OnSaveSession" data-testid="close" color="red" variant="flat" @click="closeModal">
           Close without saving
         </v-btn>
-        <v-btn
-          data-testid="save"
-          color="primary"
-          variant="flat"
-          @click="closeModalSave"
-          v-if="showOption('OnSaveSession')"
-        >
+        <v-btn v-if="options?.OnSaveSession" data-testid="save" color="primary" variant="flat" @click="closeModalSave">
           Save Session
         </v-btn>
-        <v-btn
-          data-testid="close"
-          color="flat"
-          variant="tonal"
-          @click="closeModal" v-else>
-          Close Viewer
-        </v-btn>
+        <v-btn data-testid="close" color="flat" variant="tonal" @click="closeModal" v-else> Close Viewer </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
 </template>
 
 <script setup lang="ts">
-import {computed} from "vue";
-import {LoadViewerOptions} from "@/models/LoadViewerOptions";
-import {dataOverlayState, scanState} from "@/dataLayer/scanState";
+import { computed } from 'vue';
+import { dataOverlayState, mcadObjectState, scanState } from '@/models/scanState';
+import { useViewerOptions } from '@/composables/useViewerOptions';
 
 interface Props {
-  options: LoadViewerOptions,
   modal?: boolean;
 }
 
 type Emits = {
   'update:modal': [boolean];
-  'close': [void];
+  close: [void];
 };
 
 const props = withDefaults(defineProps<Props>(), {
@@ -69,6 +38,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>();
 
+const options = useViewerOptions();
+
 const modalState = computed({
   get(): boolean {
     return props.modal;
@@ -79,26 +50,20 @@ const modalState = computed({
 });
 
 async function closeModal(): Promise<void> {
-  await executeOption('OnExitViewer');
+  if (options.value.OnExitViewer) {
+    await options.value.OnExitViewer();
+  }
   modalState.value = false;
   emit('close');
 }
 
 async function closeModalSave(): Promise<void> {
-  const scnState = scanState.value;
-  const dtaOverlayState = dataOverlayState.value.DataOverlay;
-  await executeOption('OnSaveSession', scnState, dtaOverlayState, null);
-  await closeModal();
-}
-
-function showOption(key: keyof LoadViewerOptions): boolean {
-  return props.options[key] !== undefined;
-}
-
-async function executeOption(key: keyof LoadViewerOptions, ...args: any[]): Promise<void> {
-  const functionToExecute = props.options[key];
-  if (functionToExecute !== undefined) {
-    await functionToExecute(...args);
+  if (options.value.OnSaveSession) {
+    const scan = scanState.value;
+    const dataOverlay = dataOverlayState.value.DataOverlay;
+    const mcad = mcadObjectState.value.Models;
+    options.value.OnSaveSession(scan, dataOverlay, mcad);
   }
+  await closeModal();
 }
 </script>