update model toggling

app/src/App.vue

@@ -3,10 +3,8 @@ import Login from "./components/icons/login.vue";
 import { auth, username } from "./assets/script/auth";
 import Light from "./components/icons/light.vue";
 import Star from "./components/icons/star.vue";
-import { ref } from "vue";
-import {mobile} from "./assets/script/shared";
+import { mobile, gpt4 } from "./assets/script/shared";
 
-const gpt4 = ref(false);
 
 function goto() {
   window.location.href = "https://deeptrain.net/login?app=chatnio";

app/src/assets/script/conversation.ts

@@ -3,12 +3,14 @@ import type { Ref } from "vue";
 import axios from "axios";
 import { auth, token } from "./auth";
 import { ws_api } from "./conf";
+import { gpt4 } from "./shared";
 
 type Message = {
   content: string;
   role: string;
   time: string;
   stamp: number;
+  gpt4?: boolean;
 }
 
 type StreamMessage = {
@@ -132,6 +134,7 @@ export class Conversation {
       role: "user",
       time: new Date().toLocaleTimeString(),
       stamp: new Date().getTime(),
+      gpt4: gpt4.value,
     })
     nextTick(() => {
       this.refresh();
@@ -144,6 +147,7 @@ export class Conversation {
       role: "bot",
       time: new Date().toLocaleTimeString(),
       stamp: new Date().getTime(),
+      gpt4: gpt4.value,
     })
     this.typingEffect(this.len.value - 1, content);
   }
@@ -154,6 +158,7 @@ export class Conversation {
       role: "bot",
       time: new Date().toLocaleTimeString(),
       stamp: new Date().getTime(),
+      gpt4: gpt4.value,
     })
     this.dynamicTypingEffect(this.len.value - 1, content, end);
   }

app/src/assets/script/shared.ts

@@ -1,6 +1,7 @@
 import {ref} from "vue";
 
 export const mobile = ref<boolean>((document.body.clientWidth < document.body.clientHeight) && (document.body.clientWidth < 600));
+export const gpt4 = ref(false);
 
 window.addEventListener("resize", () => {
   mobile.value = (document.body.clientWidth < document.body.clientHeight) && (document.body.clientWidth < 600);

app/src/views/HomeView.vue

@@ -46,7 +46,7 @@ onMounted(() => {
         </div>
         <div class="message" :class="{'user': message.role === 'user'}">
           <div class="grow" v-if="message.role === 'user'"></div>
-          <div class="avatar openai" v-else><openai /></div>
+          <div class="avatar openai" :class="{'gpt4': message.gpt4}" v-else><openai /></div>
           <div class="content">
             <span v-if="message.role === 'user'">{{ message.content }}</span>
             <md-preview v-model="message.content" theme="dark" v-else />
@@ -283,7 +283,7 @@ onMounted(() => {
   transition: .5s;
 }
 
-.avatar.openai svg {
+.avatar.openai.gpt4 svg {
   fill: #FFD700;
 }