update conversation

src/components/chat/Message.vue

@@ -0,0 +1,93 @@
+<template>
+  <div :class="'message ' + message.role">
+    <div class="content">
+      <markdown-renderer :content="message?.content" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { IContent, IError, IMessage, IMessageState } from '@/operators/message/models';
+import { defineComponent } from 'vue';
+// import MessageContent from './MessageContent.vue';
+import { ElImage, ElButton } from 'element-plus';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import copy from 'copy-to-clipboard';
+import MarkdownRenderer from '@/components/common/MarkdownRenderer.vue';
+
+interface IData {
+  copied: boolean;
+  messageState: typeof IMessageState;
+}
+
+export default defineComponent({
+  name: 'Message',
+  components: {
+    // MessageContent,
+    // ElImage,
+    // ElButton,
+    // FontAwesomeIcon
+    MarkdownRenderer
+  },
+  props: {
+    message: {
+      type: Object as () => IMessage,
+      required: true
+    }
+  },
+  emits: ['stop'],
+  data(): IData {
+    return {
+      copied: false,
+      messageState: IMessageState
+    };
+  },
+  computed: {
+    // conversationId() {
+    //   return this.$route.params?.id?.toString();
+    // }
+  },
+  methods: {
+    // onCopy() {
+    //   copy(this.content.value, {
+    //     debug: true
+    //   });
+    //   this.copied = true;
+    //   setTimeout(() => {
+    //     this.copied = false;
+    //   }, 3000);
+    // },
+    // onStop() {
+    //   this.$emit('stop');
+    // }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.message {
+  display: flex;
+  flex-direction: column;
+  &.assistant {
+    align-items: start;
+    .content {
+      background-color: var(--el-bg-color-page);
+      color: var(--el-color-black);
+      border-bottom-left-radius: 0;
+    }
+  }
+  &.user {
+    align-items: end;
+    .content {
+      background-color: var(--el-color-primary);
+      color: var(--el-color-white);
+      border-bottom-right-radius: 0;
+    }
+  }
+  .content {
+    border-radius: 10px;
+    padding: 8px 15px;
+    // background-color: aqua;
+  }
+}
+</style>

src/components/common/MarkdownRenderer.vue

@@ -31,7 +31,8 @@ export default defineComponent({
 .markdown-body {
   background: none;
   padding-top: 3px;
-  color: var(--el-text-color-primary);
+  color: inherit;
+  // color: var(--el-text-color-primary);
   ol {
     list-style: initial;
   }

src/operators/message/models.ts

@@ -17,9 +17,14 @@ export enum IMessageState {
   FAILED = 'failed'
 }
 
+export const ROLE_SYSTEM = 'system';
+export const ROLE_ASSISTANT = 'assistant';
+export const ROLE_USER = 'user';
+
 export interface IMessage {
   state?: IMessageState;
-  content: IContent;
-  author: IUser | IBot;
+  content: string;
+  author?: IUser | IBot;
+  role?: typeof ROLE_SYSTEM | typeof ROLE_ASSISTANT | typeof ROLE_USER;
   error?: IError;
 }

src/pages/chat/Conversation.vue

@@ -1,3 +1,49 @@
 <template>
-  <div>hi</div>
+  <div class="page">
+    <div v-for="(message, messageIndex) in messages" :key="messageIndex">
+      <message :message="message" class="message" />
+    </div>
+  </div>
 </template>
+
+<script lang="ts">
+import { IMessage, ROLE_ASSISTANT, ROLE_SYSTEM, ROLE_USER } from '@/operators/message/models';
+import { defineComponent } from 'vue';
+import Message from '@/components/chat/Message.vue';
+export interface IData {
+  messages: IMessage[];
+}
+
+export default defineComponent({
+  name: 'ChatConversation',
+  components: {
+    // Introduction,
+    // InputBox,
+    // ModelSelector,
+    Message
+  },
+  data(): IData {
+    return {
+      messages: [
+        {
+          role: ROLE_USER,
+          content: 'hello'
+        },
+        {
+          role: ROLE_ASSISTANT,
+          content: 'hello, how can I assist you?'
+        }
+      ]
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.page {
+  padding: 20px;
+  .message {
+    margin-bottom: 10px;
+  }
+}
+</style>