model fix

Opetushallitus · Sep 6, 2024 · 2eef453 · 2eef453
1 parent ecf1dc8
commit 2eef453
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 28 deletions.
diff --git a/eperusteet-frontend-utils b/eperusteet-frontend-utils
diff --git a/src/components/EpOpsAiChat/EpOpsAiChat.vue b/src/components/EpOpsAiChat/EpOpsAiChat.vue
@@ -15,7 +15,7 @@
         <div class="d-flex flex-column w-100">
           <div class="d-flex w-100 align-items-center">
             <h5 class="mr-auto header-text">{{'OpsAI, ' + topic}}</h5>
-            <EpButton variant="link" icon="settings" v-b-toggle.opsai-settings>Muokkaa OpsAI:n parametreja</EpButton>
+            <EpButton variant="link" icon="settings" v-b-toggle.opsai-settings v-if="sourceAvailable">Muokkaa OpsAI:n parametreja</EpButton>
             <div @click="close" class="clickable mt-1">
               <EpMaterialIcon>close</EpMaterialIcon>
             </div>
@@ -60,8 +60,10 @@
         </div>
       </template>
       <div class="content">
-        <div v-if="currentSourceNotAvailable">
-          <p>{{$t('valittu-lahde-ei-tue-opsai')}}</p>
+        <div class="messages" v-if="!sourceAvailable">
+          <div class="message error">
+            {{$t('valittu-lahde-ei-tue-opsai')}}
+          </div>
         </div>
         <EpSpinner class="pt-5" v-else-if="!thread" />
         <div v-else class="messages h-100 d-flex flex-column" ref="messages">
@@ -90,7 +92,7 @@
         </div>
       </div>
       <template v-slot:modal-footer>
-        <div class="new-message d-flex w-100 align-items-center">
+        <div class="new-message d-flex w-100 align-items-center" :class="{'disabled-events': !sourceAvailable}">
           <EpInput :placeholder="$t('kirjoita-viestisi-tahan')"
             type="string"
             v-model="message"
@@ -128,7 +130,6 @@ export default class EpOpsAiChat extends Vue {
 
   opsAiStore: OpsAiStore | null = null;
   message: string = '';
-  currentSourceNotAvailable: boolean = false;
   assistantSettings: Assistant | null = null;
 
   async mounted() {
@@ -142,19 +143,17 @@ export default class EpOpsAiChat extends Vue {
       return;
     }
 
-    this.currentSourceNotAvailable = false;
     this.message = '';
-    try {
-      await this.opsAiStore?.fetch(this.sourceId, this.sourceType, this.revision);
-      this.opsAiStore?.setWelcomeMessage('assistant', this.$t('opsai-keskustelun-avaus'));
-      this.assistantSettings = {
-        ...this.opsAiStore?.assistant.value,
-      };
-    }
-    catch (e) {
-      console.log(e);
-      this.currentSourceNotAvailable = true;
-    }
+    await this.opsAiStore?.fetch(this.sourceId, this.sourceType, this.revision);
+    this.opsAiStore?.setWelcomeMessage('assistant', this.$t('opsai-keskustelun-avaus'));
+    this.assistantSettings = {
+      ...this.opsAiStore?.assistant.value,
+      ...(!!_.find(this.opsAiStore?.models?.value, { defaultModel: true }) && { model: _.find((this.opsAiStore?.models?.value as any), { defaultModel: true }).id }),
+    };
+  }
+
+  get sourceAvailable() {
+    return this.opsAiStore?.sourceAvailable.value;
   }
 
   get isAvailable() {
@@ -163,7 +162,6 @@ export default class EpOpsAiChat extends Vue {
 
   close() {
     this.$bvModal.hide('ai-modal');
-    this.assistantSettings = null;
   }
 
   get thread() {
@@ -231,7 +229,7 @@ export default class EpOpsAiChat extends Vue {
   }
 
   get models() {
-    return this.opsAiStore?.models.value;
+    return _.map(this.opsAiStore?.models.value, 'id');
   }
 }
 </script>
@@ -297,6 +295,14 @@ export default class EpOpsAiChat extends Vue {
         border-top-left-radius: 0;
       }
 
+      &.error {
+        background-color: $red;
+        color: $white;
+        border-top-left-radius: 0;
+        max-width: 700px;
+        display: inline-block;
+      }
+
       .message-sent {
         margin-top: 0.5rem;
         font-size: 0.8rem;

diff --git a/src/stores/OpsAiStore.ts b/src/stores/OpsAiStore.ts
@@ -1,14 +1,15 @@
-import { ChatApi, Message, Thread, Run, FileApi, Assistant, AssistantApi, Api, ModelApi, HistoryApi } from '@shared/api/ai';
+import { ChatApi, Message, Thread, Run, FileApi, Assistant, AssistantApi, Api, ModelApi, HistoryApi, Model } from '@shared/api/ai';
 import { computed, reactive } from '@vue/composition-api';
 import { Kielet } from '@shared/stores/kieli';
 import * as _ from 'lodash';
 
 export class OpsAiStore {
   public state = reactive({
     available: false,
+    sourceAvailable: true,
     thread: null as Thread | null,
     assistant: null as Assistant | null,
-    models: null as string[] | null,
+    models: null as Model[] | null,
     fileId: null as string | null,
     messages: [] as Message[],
     currentRun: null as Run | null,
@@ -24,6 +25,7 @@ export class OpsAiStore {
   public readonly prosessingMessage = computed(() => this.state.currentRun
     && (this.state.currentRun.status === 'queued' || this.state.currentRun.status === 'in_progress'));
   public readonly models = computed(() => this.state.models);
+  public readonly sourceAvailable = computed(() => this.state.sourceAvailable);
 
   public async init() {
     this.state.available = (await Api.get('/api/available')).data;
@@ -32,14 +34,16 @@ export class OpsAiStore {
   public async fetch(sourceId, sourceType, revision) {
     try {
       this.state.messages = [];
-      this.state.fileId = (await FileApi.upload(sourceType, sourceId, Kielet.getSisaltoKieli.value, revision)).data.id!;
-      this.state.thread = (await ChatApi.createThread()).data;
-      this.state.assistant = (await AssistantApi.getAssistants()).data[0];
-      this.state.models = (await ModelApi.getModels()).data;
+      [this.state.fileId, this.state.thread, this.state.models, this.state.assistant] = await Promise.all([
+        FileApi.upload(sourceType, sourceId, Kielet.getSisaltoKieli.value, revision).then(res => res.data.id!),
+        ChatApi.createThread().then(res => res.data),
+        ModelApi.getModels().then(res => res.data),
+        AssistantApi.getAssistants().then(res => res.data[0]),
+      ]);
     }
     catch (e) {
       console.log(e);
-      this.state.available = false;
+      this.state.sourceAvailable = false;
     }
   }
 
@@ -76,7 +80,7 @@ export class OpsAiStore {
       this.addMessage('assistant');
 
       await ChatApi.addMessage(this.state.thread.id!, this.state.fileId!, message);
-      this.state.currentRun = (await ChatApi.runThread(this.state.thread.id!, 'gpt-4o', assistant.instructions, assistant.temperature, assistant.top_p)).data;
+      this.state.currentRun = (await ChatApi.runThread(this.state.thread.id!, assistant.model, assistant.instructions, assistant.temperature, assistant.top_p)).data;
       await this.waitRunStatus();
     }
   }