From 457945a2a4ac674665595a6c11fdb375747fca80 Mon Sep 17 00:00:00 2001
From: Germey <cqc@cuiqingcai.com>
Date: Wed, 4 Oct 2023 01:38:50 +0800
Subject: [PATCH] update index

---
 src/components/chat/Message.vue           | 41 ++++++++++++++++-------
 src/components/common/CopyToClipboard.vue |  1 +
 src/pages/chat/Index.vue                  | 29 ++--------------
 3 files changed, 31 insertions(+), 40 deletions(-)

diff --git a/src/components/chat/Message.vue b/src/components/chat/Message.vue
index 4f937a3..f83d496 100644
--- a/src/components/chat/Message.vue
+++ b/src/components/chat/Message.vue
@@ -1,9 +1,12 @@
 <template>
-  <div :class="'message ' + message.role">
+  <div :class="'message ' + message.role" :role="message.role">
     <div class="content">
       <markdown-renderer :content="message?.content" />
       <answering-mark v-if="message.state === messageState.PENDING" />
     </div>
+    <div class="operations">
+      <copy-to-clipboard :content="message.content" class="btn-copy" />
+    </div>
   </div>
 </template>
 
@@ -17,7 +20,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import copy from 'copy-to-clipboard';
 import MarkdownRenderer from '@/components/common/MarkdownRenderer.vue';
 import { IChatMessage, IChatMessageState } from '@/operators';
-
+import CopyToClipboard from '../common/CopyToClipboard.vue';
 interface IData {
   copied: boolean;
   messageState: typeof IChatMessageState;
@@ -28,8 +31,9 @@ export default defineComponent({
   components: {
     // MessageContent,
     // ElImage,
-    // ElButton,
-    // FontAwesomeIcon
+    ElButton,
+    CopyToClipboard,
+    // FontAwesomeIcon,
     AnsweringMark,
     MarkdownRenderer
   },
@@ -52,15 +56,15 @@ export default defineComponent({
     // }
   },
   methods: {
-    // onCopy() {
-    //   copy(this.content.value, {
-    //     debug: true
-    //   });
-    //   this.copied = true;
-    //   setTimeout(() => {
-    //     this.copied = false;
-    //   }, 3000);
-    // },
+    onCopy() {
+      copy(this.message.content, {
+        debug: true
+      });
+      this.copied = true;
+      setTimeout(() => {
+        this.copied = false;
+      }, 3000);
+    }
     // onStop() {
     //   this.$emit('stop');
     // }
@@ -72,6 +76,9 @@ export default defineComponent({
 .message {
   display: flex;
   flex-direction: column;
+  &[role='system'] {
+    display: none;
+  }
   &.assistant {
     align-items: start;
     .content {
@@ -94,5 +101,13 @@ export default defineComponent({
     max-width: 800px;
     // background-color: aqua;
   }
+
+  .operations {
+    display: block;
+    .btn-copy {
+      color: var(--el-text-color-regular);
+      font-size: 14px;
+    }
+  }
 }
 </style>
diff --git a/src/components/common/CopyToClipboard.vue b/src/components/common/CopyToClipboard.vue
index 89a08e4..1035fb6 100644
--- a/src/components/common/CopyToClipboard.vue
+++ b/src/components/common/CopyToClipboard.vue
@@ -47,5 +47,6 @@ export default defineComponent({
 .icon-copy {
   margin-left: 5px;
   cursor: pointer;
+  color: inherit;
 }
 </style>
diff --git a/src/pages/chat/Index.vue b/src/pages/chat/Index.vue
index 637d424..049856d 100644
--- a/src/pages/chat/Index.vue
+++ b/src/pages/chat/Index.vue
@@ -1,12 +1,5 @@
 <template>
-  <div class="page">
-    <div class="left">3</div>
-    <div class="main">
-      <model-selector v-model="model" class="model-selector" />
-      <introduction />
-      <input-box v-model="question" class="input-box" />
-    </div>
-  </div>
+  <div class="page"></div>
 </template>
 
 <script lang="ts">
@@ -19,11 +12,7 @@ import InputBox from '@/components/chat/InputBox.vue';
 import ModelSelector from '@/components/chat/ModelSelector.vue';
 export default defineComponent({
   name: 'ChatIndex',
-  components: {
-    Introduction,
-    InputBox,
-    ModelSelector
-  },
+  components: {},
   data() {
     return {
       model: 'chatgpt',
@@ -49,20 +38,6 @@ export default defineComponent({
     flex: 1;
     overflow: hidden;
     position: relative;
-    .input-box {
-      display: block;
-      position: absolute;
-      bottom: 10px;
-      right: 10px;
-      left: 10px;
-    }
-    .model-selector {
-      position: absolute;
-      top: 30px;
-      left: 50%;
-      transform: translate(-50%, 0);
-      z-index: 100;
-    }
   }
 }
 </style>