样式完成

ui/packages/ai/AiCopilot.vue

@@ -1,4 +1,7 @@
 <script>
+import ChatContent from "./components/chatContent.vue";
+import ThinkingBar from "./components/thinkingBar.vue";
+
 export default {
   name: "AiCopilot",
   props: {
@@ -8,12 +11,23 @@ export default {
     return {
       show: false,
       expand: false,
-      prompt: ""
+      loading: true,
+      prompt: "",
+      history: [
+        {avatar: "https://cdn.sinoecare.com/i/2024/06/04/665ec6f5ef213.png", msg: "你好", uid: "ai"},
+        {avatar: "", msg: "AI 聊天机器人 ChatGPT 近日突然出现闪崩，响应超时或无法正常工作，故障长达近 7 小时。全球大量用户处于焦虑等待，因为许多人对此已经产生了依赖，工作不能自理。一些备选工具如 Perplexity、Claude 等也遭遇故障。摩根士丹利的数据显示，ChatGPT 故障后，谷歌 AI 聊天机器人 Gemini 搜索量激增 60%，达 327058 次，显示出用户把它视为 ChatGPT 的直接替代选项\n" +
+              "\n" +
+              "作者：RTE开发者社区\n" +
+              "链接：https://juejin.cn/post/7377025870630862874\n" +
+              "来源：稀土掘金\n" +
+              "著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。", uid: "me"},
+      ]
     }
   },
   computed: {
     expandBtn: v => v.expand ? "收起" : "展开"
   },
+  components: {ThinkingBar, ChatContent},
   methods: {
     handleSend() {
 
@@ -30,12 +44,11 @@ export default {
         <div class="expandBtn pointer" v-text="expandBtn" @click="expand=!expand"/>
         <div class="minimal pointer" v-text="'最小化'" @click="show=false"/>
       </div>
+      <thinking-bar v-show="loading"/>
       <div class="flex content">
         <div class="left" :class="{expand}"></div>
         <div class="right flex column gap-14">
-          <div class="fill">
-
-          </div>
+          <chat-content class="fill" :list="history"/>
           <div class="sendBox flex gap-14">
             <el-input type="textarea" class="fill input" autosize resize="none" v-model="prompt" placeholder="请输入..."
                       @change="handleSend"/>
@@ -97,7 +110,7 @@ export default {
     }
 
     .content {
-      height: calc(100% - 48px);
+      height: calc(100% - 50px);
 
       .left {
         width: 0;
@@ -117,6 +130,7 @@ export default {
         width: 420px;
         height: 100%;
         padding: 14px;
+        align-items: stretch;
 
         .sendBtn {
           width: 40px;
@@ -128,6 +142,10 @@ export default {
         }
       }
 
+      .chatPanel {
+        width: 100%;
+      }
+
       :deep(.sendBox) {
         width: 100%;
 

ui/packages/ai/components/chatContent.vue

@@ -0,0 +1,124 @@
+<template>
+  <section class="chatContent">
+    <div class="chat-wrapper" v-for="item in list" :key="item.id">
+      <div class="chat-text" :class="{right:item.uid == 'me'}">
+        <img class="avatar" :src="item.avatar" alt=""/>
+        <div class="content" v-text="item.msg"/>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+
+export default {
+  name: "chatContent",
+  props: {
+    list: {default: () => []}
+  },
+  watch: {
+    list: {
+      deep: true, handler() {
+        this.scrollBottom()
+      }
+    }
+  },
+  methods: {
+    scrollBottom() {
+      this.$el.scrollTop = this.$el.scrollHeight - this.$el.clientHeight
+    },
+    optimizeMessage(msg = "") {
+      return msg.trim()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.chatContent {
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 3px;
+    /* 设置滚动条宽度 */
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgb(66, 70, 86);
+    /* 设置滚动条滑块的背景色 */
+    border-radius: 50%;
+    /* 设置滑块的圆角 */
+  }
+
+  .chat-text {
+    display: flex;
+    gap: 12px;
+    font-size: 14px;
+    color: #333333;
+
+    .content {
+      position: relative;
+      max-width: 220px;
+      padding: 8px;
+      border-radius: 4px;
+      background: #F3F5F7;
+      word-break: break-all;
+
+      &:before {
+        content: " ";
+        width: 0;
+        height: 0;
+        border-top: 6px solid transparent;
+        border-bottom: 6px solid transparent;
+        border-right: 6px solid #F3F5F7;
+        position: absolute;
+        left: -6px;
+        top: 6px;
+      }
+    }
+
+    &.right {
+      flex-direction: row-reverse;
+
+      .content {
+        background: #CCE2FF;
+
+        &:before {
+          left: unset;
+          right: -6px;
+          border-left: 6px solid #CCE2FF;
+          border-right: none;
+        }
+      }
+    }
+  }
+
+  .avatar {
+    width: 36px;
+    height: auto;
+    align-self: flex-start;
+  }
+
+  .chat-friend {
+    width: 100%;
+    float: left;
+    margin-bottom: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-start;
+  }
+
+  .chat-me {
+    width: 100%;
+    float: right;
+    margin-bottom: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-end;
+  }
+}
+</style>

ui/packages/ai/components/thinkingBar.vue

@@ -0,0 +1,28 @@
+<template>
+  <section class="thinkingBar"/>
+</template>
+
+<script>
+export default {
+  name: "thinkingBar",
+}
+</script>
+
+<style lang="scss" scoped>
+.thinkingBar {
+  position: relative;
+  height: 2px;
+  background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);
+  background-size: 100%;
+  animation: shrink-and-expand 2s ease-in-out infinite alternate;
+
+  @keyframes shrink-and-expand {
+    0%, 100% {
+      transform: scaleX(1);
+    }
+    50% {
+      transform: scaleX(0);
+    }
+  }
+}
+</style>