新增 Plus 黑色风格模板

web/src/components/ChatReply.vue

@@ -62,6 +62,7 @@ export default defineComponent({
     }
 
     .content {
+      min-height 20px;
       word-break break-word;
       padding: 8px 10px;
       color var(--content-color)

web/src/components/plus/ChatPrompt.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="chat-line chat-line-right">
+    <div class="chat-item">
+      <div class="content">{{ content }}</div>
+      <div class="triangle"></div>
+    </div>
+
+    <div class="chat-icon">
+      <img :src="icon" alt="User"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import {defineComponent} from "vue"
+
+export default defineComponent({
+  name: 'ChatPrompt',
+  props: {
+    content: {
+      type: String,
+      default: '',
+    },
+    icon: {
+      type: String,
+      default: 'images/user-icon.png',
+    }
+  },
+  data() {
+    return {}
+  },
+})
+</script>
+
+<style lang="stylus">
+.chat-line-right {
+  justify-content: flex-end;
+
+  .chat-icon {
+    margin-left 5px;
+
+    img {
+      border-radius 5px;
+    }
+  }
+
+  .chat-item {
+    position: relative;
+    padding: 0 5px 0 0;
+    overflow: hidden;
+
+    .triangle {
+      width: 0;
+      height: 0;
+      border-top: 5px solid transparent;
+      border-bottom: 5px solid transparent;
+      border-left: 5px solid #223A34;
+      position: absolute;
+      right: 0;
+      top: 10px;
+    }
+
+    .content {
+      word-break break-word;
+      padding: 12px 15px;
+      background-color: #223A34;
+      color var(--content-color);
+      font-size: var(--content-font-size);
+      border-radius: 5px;
+
+      p {
+        line-height 1.5
+      }
+
+      p:last-child {
+        margin-bottom: 0
+      }
+
+      p:first-child {
+        margin-top 0
+      }
+    }
+  }
+}
+</style>

web/src/components/plus/ChatReply.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="chat-line chat-line-left">
+    <div class="chat-icon">
+      <img :src="icon" alt="ChatGPT">
+    </div>
+
+    <div class="chat-item">
+      <div class="triangle"></div>
+      <div class="content" v-html="content"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {defineComponent} from "vue"
+
+export default defineComponent({
+  name: 'ChatReply',
+  props: {
+    content: {
+      type: String,
+      default: '',
+    },
+    icon: {
+      type: String,
+      default: 'images/gpt-icon.png',
+    }
+  },
+  data() {
+    return {}
+  },
+})
+</script>
+
+<style lang="stylus">
+.chat-line-left {
+  justify-content: flex-start;
+
+  .chat-icon {
+    margin-right 5px;
+
+    img {
+      border-radius 5px;
+    }
+  }
+
+  .chat-item {
+    display: inline-block;
+    position: relative;
+    padding: 0 0 0 5px;
+    overflow: hidden;
+
+    .triangle {
+      width: 0;
+      height: 0;
+      border-top: 5px solid transparent;
+      border-bottom: 5px solid transparent;
+      border-right: 5px solid #404042;
+      position: absolute;
+      left: 0;
+      top: 13px;
+    }
+
+    .content {
+      min-height 20px;
+      word-break break-word;
+      padding: 12px 15px;
+      color var(--content-color)
+      background-color: #404042;
+      font-size: var(--content-font-size);
+      border-radius: 5px;
+
+      p {
+        line-height 1.5
+      }
+
+      p:last-child {
+        margin-bottom: 0
+      }
+
+      p:first-child {
+        margin-top 0
+      }
+
+      p > code {
+        color #cc0000
+        background-color #f1f1f1
+      }
+    }
+  }
+}
+
+</style>