byt-lingxiao-ai 0.2.5 → 0.2.6

package/components/AiMessage.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="chat-window-message-ai">
+    <div class="ai-render">
+      <div class="ai-thinking" @click="$emit('thinking-click')">
+        <div class="ai-thinking-time">思考用时{{ message.time }}秒</div>
+        <div class="ai-thinking-content" v-if="thinkStatus">{{ message.thinking }}</div>
+      </div>
+      <div class="ai-content">{{ message.content }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AiMessage',
+  props: {
+    message: {
+      type: Object,
+      required: true
+    },
+    thinkStatus: {
+      type: Boolean,
+      default: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chat-window-message-ai {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  max-width: 100%;
+  border-radius: 12px;
+  background: #f6f8fc;
+  padding: 8px 12px;
+}
+
+.ai-render {
+  width: 100%;
+}
+
+.ai-thinking {
+  margin-bottom: 8px;
+}
+
+.ai-thinking-time {
+  border-radius: 9px;
+  background: #ECEDF4;
+  color: #86909C;
+  font-family: "Alibaba PuHuiTi 2.0";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  padding: 0 30px 0 30px;
+  height: 28px;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  user-select: none;
+  cursor: pointer;
+}
+
+.ai-thinking-time::before {
+  content: '';
+  position: absolute;
+  left: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 16px;
+  height: 16px;
+  background: url('./assets/think.png') no-repeat;
+  background-size: cover;
+}
+
+.ai-thinking-time::after {
+  content: '';
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 16px;
+  height: 16px;
+  background: url('./assets/arrow.png') no-repeat;
+  background-size: cover;
+}
+
+.ai-thinking-content {
+  color: #86909C;
+  font-family: "Alibaba PuHuiTi 2.0";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  padding: 8px 0 8px 12px;
+}
+
+.ai-content {
+  color: #4E5969;
+  text-align: justify;
+  font-family: "Alibaba PuHuiTi 2.0";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+}
+</style>

package/components/ChatAvatar.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="chat-ai" @click="$emit('click')">
+    <div :class="['chat-ai-avater', status]"></div>
+    <div class="chat-ai-text">{{ statusText }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ChatAvatar',
+  props: {
+    status: {
+      type: String,
+      required: true,
+      validator: (value) => ['normal', 'thinking', 'output'].includes(value)
+    }
+  },
+  computed: {
+    statusText() {
+      const textMap = {
+        'normal': '凌霄AI',
+        'thinking': '思考中',
+        'output': '语音中'
+      }
+      return textMap[this.status]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chat-ai {
+  display: flex;
+  width: 38px;
+  padding: 2px 2px 9px 2px;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  border-radius: 40px;
+  background: linear-gradient(180deg, #3e5beb 0%, #5ca5f9 100%);
+  box-shadow: 0 2px 11.6px 0 rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  user-select: none;
+}
+
+.chat-ai-avater {
+  border-radius: 67px;
+  border: 1px solid #0f66e4;
+  background: #124087;
+  display: flex;
+  width: 34px;
+  height: 33px;
+  padding: 2px 2px 1px 2px;
+  justify-content: center;
+  align-items: center;
+  background-size: cover;
+  background-position: center;
+}
+
+.chat-ai-avater.normal {
+  background-image: url('./assets/normal.png');
+}
+
+.chat-ai-avater.thinking {
+  background-image: url('./assets/thinking.png');
+}
+
+.chat-ai-avater.output {
+  background-image: url('./assets/output.png');
+}
+
+.chat-ai-text {
+  color: #fff;
+  font-family: 'PingFang SC';
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+  width: 20px;
+  margin: 0 auto;
+  text-align: center;
+}
+</style>

package/components/ChatInputBox.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="chat-window-footer">
+    <div class="chat-window-textarea">
+      <el-input
+        type="textarea"
+        class="chat-window-input"
+        placeholder="有什么我能帮您的吗？"
+        rows="2"
+        resize="none"
+        :value="value"
+        @input="$emit('input', $event)"
+        @keydown.native="handleKeyDown"
+      ></el-input>
+      <div class="chat-window-bar">
+        <div class="chat-window-send" @click="$emit('send')">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="none"
+          >
+            <g clip-path="url(#clip0_640_2107)">
+              <path
+                d="M18.6427 2.37822C19.3253 2.47432 19.8025 3.10738 19.7065 3.79002C19.6871 3.97072 19.5381 4.41327 19.5403 4.41161L14.9673 17.8079L14.9632 17.8093C14.7858 18.3838 14.212 18.7607 13.5971 18.6744C13.4173 18.6492 13.2504 18.5862 13.1055 18.4949L13.0973 18.4977L9.83449 16.3686C9.58371 16.2584 9.4276 15.9939 9.46729 15.7115C9.5154 15.3691 9.83278 15.1317 10.1751 15.1798C10.293 15.1964 10.3988 15.2448 10.4853 15.3161L13.4054 17.2314L13.4073 17.2317C13.4452 17.2566 13.4882 17.2746 13.5364 17.2814C13.6911 17.3029 13.8371 17.2052 13.8793 17.0593L18.0469 4.89796L8.27396 14.3367L7.77435 17.8916C7.72706 18.2281 7.41369 18.464 7.07727 18.4169C6.74073 18.3696 6.50469 18.0564 6.55198 17.7198L7.07633 13.9889C7.08231 13.9464 7.09382 13.9066 7.10727 13.867C7.13549 13.7645 7.19079 13.6657 7.27291 13.5866L17.0754 4.12041L2.68514 8.17767L2.68487 8.1796C2.58481 8.21873 2.50686 8.31058 2.49042 8.42643C2.47412 8.5424 2.52417 8.65007 2.6093 8.71729L2.60903 8.71922L3.28261 9.16101L3.28013 9.16461C3.47505 9.29254 3.58819 9.52563 3.55386 9.77111C3.50575 10.1134 3.18836 10.3509 2.84602 10.3028C2.75512 10.29 2.6708 10.2584 2.59833 10.2127L2.59806 10.2147L1.37843 9.42001L1.37951 9.41227C1.02215 9.14901 0.816644 8.70195 0.882687 8.23203C0.951867 7.74096 1.29791 7.35545 1.73968 7.21445L1.73995 7.21251L17.7833 2.57104C18.0287 2.41036 18.3294 2.3342 18.6427 2.37822Z"
+                fill="#013378"
+              />
+              <path
+                d="M3.1309 10.9936C3.2178 10.5684 3.82528 10.5684 3.91218 10.9936C4.10411 11.9326 4.83794 12.6664 5.77697 12.8584C6.20213 12.9453 6.20213 13.5527 5.77697 13.6397C4.83794 13.8316 4.10411 14.5654 3.91218 15.5044C3.82528 15.9296 3.2178 15.9296 3.1309 15.5044C2.93897 14.5654 2.20513 13.8316 1.26611 13.6397C0.840944 13.5527 0.840944 12.9453 1.26611 12.8584C2.20513 12.6664 2.93897 11.9326 3.1309 10.9936Z"
+                fill="#2B80F6"
+              />
+              <path
+                d="M6.20382 8.56242C6.25596 8.30732 6.62045 8.30732 6.67259 8.56242C6.78775 9.12583 7.22805 9.56613 7.79146 9.68129C8.04656 9.73343 8.04656 10.0979 7.79146 10.1501C7.22805 10.2652 6.78775 10.7055 6.67259 11.2689C6.62045 11.524 6.25596 11.524 6.20382 11.2689C6.08866 10.7055 5.64836 10.2652 5.08495 10.1501C4.82985 10.0979 4.82985 9.73343 5.08495 9.68129C5.64836 9.56613 6.08866 9.12583 6.20382 8.56242Z"
+                fill="#2B80F6"
+              />
+            </g>
+            <defs>
+              <clipPath id="clip0_640_2107">
+                <rect width="20" height="20" fill="white" />
+              </clipPath>
+            </defs>
+          </svg>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ChatInputBox',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    handleKeyDown(e) {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault()
+        this.$emit('send')
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+::v-deep .el-textarea__inner {
+  border: none !important;
+  padding: 0 5px;
+  font-family: 'PingFang SC' !important;
+}
+
+::v-deep .el-textarea__inner::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::v-deep .el-textarea__inner::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 3px;
+}
+
+::v-deep .el-textarea__inner::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.chat-window-footer {
+  padding: 16px;
+}
+
+.chat-window-textarea {
+  min-height: 99px;
+  max-height: 180px;
+  border-radius: 8px;
+  border: 1px solid #f2f2f2;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+}
+
+.chat-window-input {
+  padding: 10px 12px;
+  font-size: 16px;
+  font-family: 'PingFang SC';
+}
+
+.chat-window-bar {
+  display: flex;
+  justify-content: flex-end;
+  padding: 8px;
+}
+
+.chat-window-send {
+  width: 70px;
+  height: 36px;
+  flex-shrink: 0;
+  border-radius: 6px;
+  background: rgba(43, 128, 246, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+</style>

package/components/ChatMessageList.vue

@@ -0,0 +1,81 @@
+<template>
+  <div ref="chatArea" class="chat-window-content scrollbar-hide">
+    <div
+      class="chat-window-message"
+      v-for="message in messages"
+      :key="message.id"
+    >
+      <UserMessage 
+        v-if="message.type === 'user'"
+        :content="message.content"
+      />
+      <AiMessage 
+        v-else
+        :message="message"
+        :think-status="thinkStatus"
+        @thinking-click="$emit('thinking-click')"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import UserMessage from './UserMessage.vue'
+import AiMessage from './AiMessage.vue'
+
+export default {
+  name: 'ChatMessageList',
+  components: {
+    UserMessage,
+    AiMessage
+  },
+  props: {
+    messages: {
+      type: Array,
+      required: true
+    },
+    thinkStatus: {
+      type: Boolean,
+      default: true
+    }
+  },
+  methods: {
+    scrollToBottom() {
+      this.$nextTick(() => {
+        const chatArea = this.$refs.chatArea
+        if (chatArea) {
+          chatArea.scrollTop = chatArea.scrollHeight
+        }
+      })
+    }
+  },
+  watch: {
+    messages: {
+      handler() {
+        this.scrollToBottom()
+      },
+      deep: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chat-window-content {
+  flex: 1;
+  padding: 16px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+</style>

package/components/ChatRobot.vue

@@ -0,0 +1,38 @@
+<template>
+  <div :class="['chat-robot', status]"></div>
+</template>
+
+<script>
+export default {
+  name: 'ChatRobot',
+  props: {
+    status: {
+      type: String,
+      required: true,
+      validator: (value) => ['entering', 'waiting', 'speaking'].includes(value)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chat-robot {
+  width: 150px;
+  height: 200px;
+}
+
+.chat-robot.entering {
+  background-image: url('./assets/entering.png');
+  background-size: cover;
+}
+
+.chat-robot.waiting {
+  background-image: url('./assets/waiting.png');
+  background-size: cover;
+}
+
+.chat-robot.speaking {
+  background-image: url('./assets/speaking.png');
+  background-size: cover;
+}
+</style>