chat: 改进聊天内容基于角色的显示逻辑

在[index.vue](file://src/pages/chats/[id]/index.vue)中，根据消息的`role`属性调整消息的显示方式，以区分不同角色（`assistant`、`system`和`user`）的消息显示。

同时，移除了无用的注释代码，并对界面布局进行了微调，以优化用户阅读体验。

src/components/AppBar.vue

@@ -72,6 +72,18 @@ const chats = computed<ApiV1ChatsGet200Response>(() => {
 });
 chatStore.getChats();
 
+let waitUpdate = false;
+chatStore.$subscribe(() => {
+  if (waitUpdate) {
+    return;
+  }
+  waitUpdate = true;
+  setTimeout(() => {
+    chatStore.getChats();
+    waitUpdate = false;
+  }, 1000);
+});
+
 // 恼
 // setInterval(() => {
 //   chats.value.data = chatStore.chats.data

src/pages/chats/[id]/index.vue

@@ -22,8 +22,13 @@
       </template>
 
       <v-card-text class="bg-surface-light pt-4">
-        <!-- {{ message.content }} -->
+        <div v-if="message.role == 'assistant' || message.role == 'system'">
           <vue-markdown :source="message.content" />
+        </div>
+
+        <div v-else-if="message.role == 'user'" class="text-right">
+          <vue-markdown :source="message.content" />
+        </div>
       </v-card-text>
     </v-card>