changes

Opetushallitus · Sep 17, 2024 · 23e7bbd · 23e7bbd
1 parent 8b5471f
commit 23e7bbd
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 22 deletions.
diff --git a/vue/package.json b/vue/package.json
@@ -8,6 +8,7 @@
     "gen:api": "./scripts/buildapi.sh",
     "gen:api:eperusteet": "./scripts/buildapi.sh -s eperusteet",
     "gen:api:ylops": "./scripts/buildapi.sh -s ylops",
+    "gen:api:ai": "./scripts/buildapi.sh -s ai",
     "lint": "vue-cli-service lint --no-fix",
     "lint:fix": "vue-cli-service lint",
     "styleguide": "vue-cli-service styleguidist",

diff --git a/vue/src/api/ai.ts b/vue/src/api/ai.ts
@@ -46,3 +46,4 @@ export type Model = AiApi.Model;
 export type MessageDto = AiApi.MessageDto;
 export type FeedbackDto = AiApi.FeedbackDto;
 export type ThreadMessagesDto = AiApi.ThreadMessagesDto;
+export type PageThreadMessagesDto = AiApi.PageThreadMessagesDto;
diff --git a/vue/src/components/EpOpsAi/EpOpsAiMessage.vue b/vue/src/components/EpOpsAi/EpOpsAiMessage.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="message"
-    :class="'role-'+message.role"
+    :class="{['role-' + message.role]: true, 'no-edit': !isEditing}"
     :ref="message.lastMessage ? 'lastMessage' : message.messageId">
     <EpSpinner v-if="prosessingMessage && message.lastMessage" class="mr-auto"/>
     <div class="d-flex" v-else>
@@ -21,28 +21,30 @@
     <div v-html="message.content"></div>
     <div class="mt-1 d-flex align-items-center" v-if="message.createdAt">
       <span class="message-sent">{{$t('lahetetty')}}: {{$sdt(message.createdAt)}}</span>
-      <template v-if="message.threadId && message.role !== 'user' && !feedbackDisabled">
-        <span class="ml-2">|</span>
-        <span class="ml-2">{{$t('kerro-mita-pidit-vastauksesta')}}:</span>
-        <div class="d-inline-block ml-2 link-style clickable" @click="feedbackResult(message, positiveFeedback)">
-          <EpMaterialIcon class="thumb" :outlined="message.feedback?.result !== positiveFeedback">thumb_up</EpMaterialIcon>
-        </div>
-        <div class="d-inline-block ml-2 link-style clickable" @click="feedbackResult(message, negativeFeedback)">
-          <EpMaterialIcon class="thumb" :outlined="message.feedback?.result !== negativeFeedback">thumb_down</EpMaterialIcon>
-        </div>
+      <template v-if="isEditing">
+        <template v-if="message.threadId && message.role !== 'user'">
+          <span class="ml-2">|</span>
+          <span class="ml-2">{{$t('kerro-mita-pidit-vastauksesta')}}:</span>
+          <div class="d-inline-block ml-2 link-style clickable" @click="feedbackResult(message, positiveFeedback)">
+            <EpMaterialIcon class="thumb" :outlined="message.feedback?.result !== positiveFeedback">thumb_up</EpMaterialIcon>
+          </div>
+          <div class="d-inline-block ml-2 link-style clickable" @click="feedbackResult(message, negativeFeedback)">
+            <EpMaterialIcon class="thumb" :outlined="message.feedback?.result !== negativeFeedback">thumb_down</EpMaterialIcon>
+          </div>
+        </template>
+        <EpButton
+          v-if="message.feedback?.result && !feedbackOpen && !message.feedback?.comment"
+          class="ml-3 vapaa-palaute-link"
+          variant="link"
+          size="sm"
+          @click="openFeedback()"
+          :paddingx="false">
+          {{ $t('anna-vapaamuotoinen-palaute') }}
+        </EpButton>
       </template>
-      <EpButton
-        v-if="message.feedback?.result && !feedbackOpen && !message.feedback?.comment"
-        class="ml-3 vapaa-palaute-link"
-        variant="link"
-        size="sm"
-        @click="openFeedback()"
-        :paddingx="false">
-        {{ $t('anna-vapaamuotoinen-palaute') }}
-      </EpButton>
     </div>
     <div class="mt-2" v-if="message.feedback?.result">
-      <div class="font-weight-600">
+      <div class="font-weight-600" v-if="isEditing">
         <template v-if="feedbackOpen">
           {{ $t('opsai-tekstipalaute') }}:
           <div class="d-flex w-100 mt-1">
@@ -55,6 +57,11 @@
           {{ $t('opsai-palaute-kiitos') }}
         </template>
       </div>
+      <div v-else class="d-flex no-edit feedback p-2">
+        <EpMaterialIcon v-if="message.feedback.result === positiveFeedback" class="feedback-thumb" >thumb_up</EpMaterialIcon>
+        <EpMaterialIcon v-if="message.feedback.result === negativeFeedback" class="feedback-thumb" >thumb_down</EpMaterialIcon>
+        <div class="font-weight-600 ml-2 feedback-comment">{{message.feedback.comment}}</div>
+      </div>
     </div>
   </div>
 </template>
@@ -77,7 +84,7 @@ export default class EpOpsAiMessage extends Vue {
   private prosessingMessage!: boolean;
 
   @Prop({ required: false, default: false, type: Boolean })
-  private feedbackDisabled!: boolean;
+  private isEditing!: boolean;
 
   positiveFeedback = FeedbackDtoResultEnum.POSITIVE;
   negativeFeedback = FeedbackDtoResultEnum.NEGATIVE;
@@ -125,6 +132,10 @@ export default class EpOpsAiMessage extends Vue {
     background-color: #C1EAFF;
     margin-left: auto !important;
     border-bottom-right-radius: 0;
+    &.no-edit {
+      width: 50%;
+      max-width: 50%;
+    }
   }
 
   &.role-assistant {
@@ -133,12 +144,29 @@ export default class EpOpsAiMessage extends Vue {
     margin-right: auto !important;
     background-color: $white;
     border-top-left-radius: 0;
+
+    &.no-edit {
+      background-color: #EDEDED;
+      width: 80%;
+      max-width: 80%;
+    }
   }
 
   .message-sent {
     font-size: 0.8rem;
     color: #999;
   }
+
+  .feedback-thumb {
+    color: $blue-lighten-5;
+  }
+
+  .no-edit {
+    &.feedback {
+      background-color: $white;
+      border-radius: 0.5rem;
+    }
+  }
 }
 
 </style>
diff --git a/vue/src/translations/locale-fi.json b/vue/src/translations/locale-fi.json
@@ -4404,5 +4404,8 @@
     "sisaltotyyppi": "Sisältötyyppi",
     "nayta-vain-palautteita-sisaltavat-keskustelut": "Näytä vain palautteita sisältävät keskustelut",
     "naytetaan-x-keskustelua": "Näytetään {kpl} keskustelua",
-    "ops-tai-totsu": "Ops tai totsu"
+    "ops-tai-totsu": "Ops tai totsu",
+    "tile-opsai": "Ops.Ai",
+    "tile-opsai-kuvaus": "Ops.Ai keskusteluhistoria",
+    "route-opsai": "Ops.Ai"
 }