vuepress-theme-uniapp-official 1.6.4 → 1.6.5

package/components/DcloudSearchPage/{components/AIChat → AIChat}/index.vue

@@ -1,11 +1,9 @@
 <template>
   <div class="chat-wrapper">
-    <header class="chat-header">
-      <div class="title">DCloud 文档 AI 助手</div>
-      <SelectPlatform :currentCategory="currentCategory" :platforms="aiPlatforms" @change="platformChange" />
-    </header>
-
-    <main ref="msgList" class="chat-messages">
+    <main ref="msgList" class="chat-messages" :style="{ 'padding-bottom': msgListPaddingBottom + 'px' }">
+      <div class="title">
+        <span>DCloud 文档 AI 助手</span>
+      </div>
       <transition-group name="fade-up" tag="div">
 
         <div v-for="m in messages" :key="m.id" :class="['msg', m.role]">
@@ -16,12 +14,8 @@
             <span class="time">{{ m.time }}</span>
 
             <!-- <div class="actions" v-if="m.role === 'assistant'">
-              <span class="icon" :class="{ active: m.like === 1 }" @click="setLike(m, 1)">
-                👍
-              </span>
-              <span class="icon" :class="{ active: m.like === -1 }" @click="setLike(m, -1)">
-                👎
-              </span>
+              <LikeButton :active="!!m.like" type="like" @click.stop="like(m)" />
+              <LikeButton :active="!!m.dislike" type="dislike" @click.stop="dislike(m)" />
             </div> -->
           </div>
 
@@ -30,27 +24,46 @@
 
       <Skeleton style="width: 60%" v-if="sending" />
     </main>
-
-    <footer class="chat-input-bar">
-      <div class="input-container">
-        <textarea ref="input" v-model="inputText" class="chat-input" rows="1" placeholder="请输入内容…" @input="autoGrow"
-          @keydown.enter.exact.prevent="send" inputmode="text" enterkeyhint="newline"></textarea>
-
-        <button class="send-btn" :disabled="sending" @click="send">
-          发送
-        </button>
+    <footer ref="footer" class="chat-input-bar"
+      :style="{ top: !hasMessage ? '50%' : 'auto', bottom: !hasMessage ? 'auto' : '0' }">
+      <div class="input-container"
+        :class="{ 'not-support-backdrop-filter': notSupportBackdrop, 'error-border': inputError }">
+        <form>
+          <textarea ref="input" v-model="inputText" name="input-container_input" class="chat-input" required rows="1"
+            :minlength="MAX_AI_ANSWER_LENGTH" placeholder="请输入内容…" @input="answerInput"
+            @keydown.enter.exact.prevent="send" inputmode="text" enterkeyhint="newline"></textarea>
+        </form>
+
+        <div class="footer-toolbar" @click.self="inputBottomClick">
+          <div class="footer-toolbar_left">
+            <SelectPlatform :currentCategory="currentCategory" :platforms="aiPlatforms" @change="platformChange" />
+          </div>
+          <div class="footer-toolbar_right">
+            <span v-if="inputError" class="error-tips">
+              输入内容不少于 {{ MAX_AI_ANSWER_LENGTH }} 个字符
+            </span>
+            <span class="tips">
+              ↵ 发送 / shift + ↵ 换行
+            </span>
+            <button class="send-btn" :disabled="sending" @click="send">
+              发送
+            </button>
+          </div>
+        </div>
       </div>
     </footer>
   </div>
 </template>
 
 <script setup>
-import { ref, nextTick, watchEffect, onMounted } from 'vue'
+import { ref, nextTick, watchEffect, onMounted, computed } from 'vue'
 import { renderMarkdown } from "./markdown-loader";
-import SelectPlatform from './SelectPlatform.vue';
-import { ajax } from '../../utils/postDcloudServer';
 import searchPageConfig from '@theme-config/searchPage';
-import Skeleton from '../Skeleton';
+import { MAX_AI_ANSWER_LENGTH } from '../constants';
+import SelectPlatform from '../components/SelectPlatform.vue';
+import LikeButton from '../components/LikeButton.vue';
+import Skeleton from '../components/Skeleton.vue';
+import { ajax } from '../utils/postDcloudServer';
 
 const { aiPlatforms = [], aiChatForDocSearch = 'https://ai-assist-api.dcloud.net.cn/tbox/chatForDocSearch' } = searchPageConfig;
 
@@ -74,6 +87,18 @@ const sendPlatform = ref(props.currentCategory)
 
 const msgList = ref(null)
 const input = ref(null)
+const footer = ref(null)
+
+const hasMessage = computed(() => messages.value.length > 0)
+const inputError = computed(() => {
+  return inputText.value.length > 0 && inputText.value.trim().length < MAX_AI_ANSWER_LENGTH;
+})
+
+const notSupportBackdrop = ref(false);
+if (!(CSS && typeof CSS.supports === 'function' && CSS.supports('backdrop-filter', 'blur(10px)'))) {
+  // 不支持 backdrop-filter，则使用更简单的样式
+  notSupportBackdrop.value = true;
+}
 
 function setSessionMessages(value) {
   sessionStorage.setItem('__UNIDOC_MESSAGES__', JSON.stringify(value));
@@ -97,6 +122,14 @@ watchEffect(() => {
   }
 })
 
+const msgListPaddingBottom = ref(120);
+function changeMsgListPadding() {
+  nextTick(() => {
+    const footerHeight = footer.value ? footer.value.offsetHeight : 0;
+    msgListPaddingBottom.value = footerHeight + 20; // 20px 额外空间
+  });
+}
+
 function formatTime() {
   const d = new Date()
   return `${d.getHours().toString().padStart(2, '0')}:${d
@@ -112,8 +145,20 @@ function autoGrow() {
   if (inputText.value.length === 0) {
     return
   }
-  el.style.height = el.scrollHeight + 'px'
-  el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' })
+  // TODO +2 是解决在输入第一行时有滚动条的问题，需进一步优化
+  el.style.height = el.scrollHeight + 2 + 'px'
+}
+
+function answerInput() {
+  autoGrow()
+  changeMsgListPadding()
+}
+
+function inputBottomClick() {
+  nextTick(() => {
+    input.value.focus()
+    input.value.scrollTo({ top: input.value.scrollHeight, behavior: 'smooth' })
+  })
 }
 
 function scrollToBottom() {
@@ -129,10 +174,6 @@ async function renderHTML(raw) {
   return rendered
 }
 
-function setLike(msg, val) {
-  msg.like = msg.like === val ? 0 : val
-}
-
 function fakeAITyping(text, msgObj) {
   return new Promise(resolve => {
     let i = 0
@@ -168,11 +209,13 @@ function getChatHistory() {
 }
 
 async function send() {
-  if (!inputText.value.trim() || sending.value) return
-
   const userText = inputText.value.trim()
+
+  if (!userText || sending.value) return
+  if (inputError.value) return
+
   inputText.value = ''
-  autoGrow()
+  answerInput()
 
   // 用户消息
   messages.value.push({
@@ -181,7 +224,6 @@ async function send() {
     raw: userText,
     rendered: await renderHTML(userText),
     time: formatTime(),
-    like: 0
   })
   scrollToBottom()
 
@@ -212,7 +254,8 @@ async function send() {
     rendered: await renderHTML(fakeReply),
     time: formatTime(),
     isTyping: false,
-    like: 0
+    like: false,
+    dislike: false
   }
 
   messages.value.push(aiMsg)
@@ -224,33 +267,58 @@ async function send() {
   scrollToBottom()
 }
 
+function like(m) {
+  console.log('like');
+  m.like = !m.like;
+  if (m.like) {
+    m.dislike = false;
+  }
+}
+
+function dislike(m) {
+  console.log('dislike');
+  m.dislike = !m.dislike;
+  if (m.dislike) {
+    m.like = false;
+  }
+}
+
 window.addEventListener('resize', scrollToBottom)
 </script>
 
 <style lang="stylus">
+.__backdrop-filter__
+  backdrop-filter blur(15px)
+.__not-support-backdrop-filter__
+  background-color: #fff
+
 .chat-wrapper
   display flex
+  position relative
   flex-direction column
   height calc(100vh - 56px - 40px)
   background #f9fafb
   overflow hidden
 
-  .chat-header
+  /* .chat-header
     height 56px
     display flex
     align-items center
     padding 0 16px
     background white
-    border-bottom 1px solid #eee
+    border-bottom 1px solid #eee */
 
   .title
-    font-size 18px
+    margin-top 30px
+    text-align center
+    font-size 30px
     font-weight 600
+    color #cecece
 
   .chat-messages
     flex 1
     overflow-y auto
-    padding 16px
+    padding 16px 16px 120px
     box-sizing border-box
 
   .msg
@@ -314,54 +382,72 @@ window.addEventListener('resize', scrollToBottom)
     align-items center
 
   .actions
+    margin-left 20px
     display flex
-    gap 10px
-
-  .icon
-    cursor pointer
-    opacity .5
-    transition .2s
-    &.active
-      opacity 1
-      color $accentColor
 
   .chat-input-bar
     padding 10px
-    background white
-    border-top 1px solid #eee
+    position absolute
+    left 10px
+    right 10px
+    bottom 0
     display flex
     align-items flex-end
     justify-content center
 
   .input-container
-    display flex
-    align-items flex-end
     width 100%
-    background #fff
-    border 1px solid rgba(0,0,0,.1)
+    border 1px solid rgba(0,0,0,.2)
     border-radius 20px
     padding 8px 12px
-    box-shadow 0 2px 8px rgba(0,0,0,.06)
+    box-shadow 0 2px 10px rgba(0,0,0,.2)
     transition border-color .2s
+    @extend .__backdrop-filter__
     &:focus-within
       border-color $accentColor
       box-shadow 0 0 0 2px rgba($accentColor, .2)
+    &.error-border, &.error-border:focus-within
+      border-color: #e00 !important;
+      box-shadow 0 0 0 2px rgba(#e00, .2)
+    &.not-support-backdrop-filter
+      @extend .__not-support-backdrop-filter__
+
+    .footer-toolbar
+      display flex
+      align-items center
+      justify-content space-between
+      .footer-toolbar_left, .footer-toolbar_right
+        display flex
+        align-items center
+        justify-content center
+        .error-tips
+          margin-right 12px
+          font-size 12px
+          color #e00
+        .tips
+          font-size 12px
+          color #888
 
   .chat-input
-    flex 1
+    width 100%
+    box-sizing border-box
     resize none
     outline none
     border none
     padding 8px 10px
-    line-height 1.5
+    line-height 1.2
     max-height 160px
     overflow-y auto
     font-size 15px
     transition: height 0.2s;
+    background-color transparent
+    -webkit-user-select: auto;
+    -webkit-touch-callout: auto;
+    word-break: break-word;
 
   .send-btn
     margin-left 8px
-    padding 8px 14px
+    padding 6px 10px
     border none
     border-radius 8px
     background $accentColor

package/components/DcloudSearchPage/components/AIAnswer.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="ai-answer-card">
+    <div class="ai-answer-header">
+      <span class="ai-answer-icon">🤖</span>
+      <span class="ai-answer-title">{{ item.title }}</span>
+    </div>
+
+    <div v-if="hasMessage" class="ai-answer-msg" v-html="item.msg" />
+    <Skeleton v-else />
+
+    <div class="ai-answer-footer">
+      <div class="ai-answer-footer_left">
+        本回答由 AI 生成，可能已过期、失效或不适用于当前情形，仅供参考
+      </div>
+
+      <!-- <div v-show="hasMessage" class="ai-answer-footer_right">
+        <LikeButton :active="status.like" type="like" @click.stop="like" />
+        <LikeButton :active="status.dislike" type="dislike" @click.stop="dislike" />
+      </div> -->
+    </div>
+  </div>
+</template>
+
+<script setup>
+import searchPageConfig from '@theme-config/searchPage';
+import Skeleton from './Skeleton.vue';
+import LikeButton from './LikeButton.vue';
+import { computed, reactive } from 'vue';
+
+const {
+  aiChatForDocSearch = 'https://ai-assist-api.dcloud.net.cn/tbox/chatForDocSearch'
+} = searchPageConfig;
+
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true
+  }
+})
+
+const hasMessage = computed(() => {
+  return props.item.msg && props.item.msg.length > 0;
+})
+
+const status = reactive({
+  like: false,
+  dislike: false
+})
+
+function like() {
+  console.log('like');
+  status.like = !status.like;
+  if (status.like) {
+    status.dislike = false;
+  }
+}
+
+function dislike() {
+  console.log('dislike');
+  status.dislike = !status.dislike;
+  if (status.dislike) {
+    status.like = false;
+  }
+}
+</script>
+
+<style lang="stylus">
+.ai-answer-card
+  padding 14px 16px
+  margin-top 12px
+  background #fff
+  border-radius 12px
+  border 1px solid rgba(0,0,0,0.06)
+  box-shadow 0 2px 8px rgba(0,0,0,0.04)
+  transition box-shadow .25s //, transform .2s
+  cursor pointer
+
+  &:hover
+    box-shadow 0 4px 14px rgba(0,0,0,0.08)
+    // transform translateY(-1px)
+
+.ai-answer-header
+  display flex
+  align-items center
+  margin-bottom 8px
+
+.ai-answer-icon
+  font-size 18px
+  margin-right 6px
+
+.ai-answer-title
+  font-weight 600
+  font-size 15px
+  color #333
+
+.ai-answer-msg
+  font-size 14px
+  line-height 1.6
+  color #444
+  word-break break-word
+  animation fadeIn .25s ease
+
+  /* --- reset 内容区 --- */
+  pre
+    margin 0
+    padding 6px 8px
+    border-radius 10px
+    background #f6f8fa
+    white-space pre-wrap
+    word-break break-word
+
+    & + pre
+      margin-top 8px
+
+  code
+    white-space pre-wrap
+    word-break break-word
+
+  h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure, blockquote
+    margin 0
+    padding 0
+
+  ul, ol
+    list-style none
+
+@keyframes fadeIn
+  from
+    opacity 0
+    transform translateY(4px)
+  to
+    opacity 1
+    transform translateY(0)
+
+.ai-answer-footer
+  margin-top 12px
+  padding-top 10px
+  border-top 1px solid rgba(0,0,0,.06)
+  display flex
+  align-items center
+  justify-content space-between
+  font-size 12px
+  color #888
+
+  .ai-answer-footer_right
+    display flex
+</style>

package/components/DcloudSearchPage/components/LikeButton.vue

@@ -0,0 +1,60 @@
+<template>
+  <button class="ai-feedback-btn" :class="{ active: props.active }" @click="emit('click', $event)">
+    <svg viewBox="0 0 24 24" class="icon">
+      <path v-if="isLike"
+        d="M2 10h4v12H2V10zm6.31 0L11 4.06a1 1 0 0 1 1-.56h.09c.87 0 1.6.63 1.74 1.49L14.8 10H21a1 1 0 0 1 1 1v1.09c0 .27-.06.53-.17.77l-3.14 6.58A2 2 0 0 1 16.85 20H10a1 1 0 0 1-1-1V10h-.69z"
+        fill="currentColor" />
+      <path v-if="isDislike"
+        d="M22 14h-4V2h4v12zM15.69 14L13 19.94a1 1 0 0 1-.91.56H12c-.87 0-1.6-.63-1.74-1.49L9.2 14H3a1 1 0 0 1-1-1v-1.09c0-.27.06-.53.17-.77l3.14-6.58A2 2 0 0 1 7.15 4H14a1 1 0 0 1 1 1v9h.69z"
+        fill="currentColor" />
+    </svg>
+  </button>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  active: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  type: {
+    type: String,
+    required: true
+  }
+})
+
+const emit = defineEmits(['click']);
+
+const isLike = computed(() => props.type === 'like');
+const isDislike = computed(() => props.type === 'dislike');
+</script>
+
+<style lang="stylus" scoped>
+.ai-feedback-btn
+  border none
+  background transparent
+  cursor pointer
+  padding 6px
+  display flex
+  align-items center
+  justify-content center
+  border-radius 6px
+  transition background .2s, transform .2s, opacity .2s
+  opacity .75
+
+  &.active .icon
+    color $accentColor
+  &:hover
+    opacity 1
+    background rgba(0,0,0,0.06)
+    transform scale(1.12)
+
+  .icon
+    width 18px
+    height 18px
+    display block
+    color #666
+</style>

package/components/DcloudSearchPage/components/{AIChat/SelectPlatform.vue → SelectPlatform.vue}

@@ -14,6 +14,12 @@ const props = defineProps({
   }
 })
 
+const notSupportBackdrop = ref(false);
+if (!(CSS && typeof CSS.supports === 'function' && CSS.supports('backdrop-filter', 'blur(10px)'))) {
+  // 不支持 backdrop-filter，则使用更简单的样式
+  notSupportBackdrop.value = true;
+}
+
 const emit = defineEmits(['change'])
 
 const platform = ref(
@@ -27,7 +33,7 @@ watch(platform, (v) => emit('change', v))
 
 <template>
   <div class="select-platform">
-    <select name="select" v-model="platform">
+    <select name="select" v-model="platform" :class="{ 'not-support-backdrop-filter': notSupportBackdrop }">
       <template v-for="value in props.platforms">
         <option :key="value" :value="value">{{ value }}</option>
       </template>
@@ -37,7 +43,6 @@ watch(platform, (v) => emit('change', v))
 
 <style lang="stylus" scoped>
 .select-platform
-  margin-left auto
 
   select
     color black
@@ -46,17 +51,16 @@ watch(platform, (v) => emit('change', v))
     border 1px solid rgba(0,0,0,.12)
     border-radius 8px
     font-size 14px
-    background white
+    background-color: transparent
     cursor pointer
     outline none
     transition border .2s
+    &.not-support-backdrop-filter
+      background-color: #fff
 
     &:hover
-      border-color $accentColor
-
-    &:focus
-      border-color $accentColor
-      box-shadow 0 0 0 2px rgba($accentColor, .2)
+      // border-color $accentColor
+      box-shadow 0 0 10px 0px rgba($accentColor,0.3)
 
     &:active
       border-color $accentColor

package/components/DcloudSearchPage/constants.js

@@ -0,0 +1,2 @@
+export const DEFAULT_ENABLE_AI = true; // 默认启用 AI 助手
+export const MAX_AI_ANSWER_LENGTH = 6; // AI 消息最大长度

package/components/DcloudSearchPage/index.vue

@@ -16,7 +16,7 @@
 					<div class="tab" :class="{ active: !isAI }" @click="isAI = false">
 						搜索文档
 					</div>
-					<div class="divider" style="width: 1px;height: 80%; background-color: #ccc; margin: 0 10px;"></div>
+					<div class="divider" style="width: 1px;height: 80%; background-color: #eee; margin: 0 10px;"></div>
 					<div class="tab" :class="{ active: isAI }" @click="isAI = true">
 						问 AI
 					</div>
@@ -87,15 +87,7 @@
 										<Results v-if="!item.isAI" :key="item.sourceId" :title="item.title" :results="item.items"
 											:onSelect="item.onSelect" />
 										<template v-else>
-											<div class="ai-answer-card">
-												<div class="ai-answer-header">
-													<span class="ai-answer-icon">🤖</span>
-													<span class="ai-answer-title">{{ item.title }}</span>
-												</div>
-
-												<div v-if="item.msg.length" class="ai-answer-msg" v-html="item.msg" />
-												<Skeleton v-else />
-											</div>
+											<AIAnswer :item="item" />
 										</template>
 									</template>
 								</template>
@@ -146,20 +138,21 @@ import searchPageConfig from '@theme-config/searchPage';
 import NavbarLogo from '../NavbarLogo.vue';
 import Results from './components/Results.vue';
 import pagination from './components/pagination.vue';
-import AIChat from './components/AIChat/index.vue';
+import AIChat from './AIChat/index.vue';
+import AIAnswer from './components/AIAnswer.vue';
 import MainNavbarLink from '../MainNavbarLink.vue';
-import Skeleton from './components/Skeleton.vue';
 import { search as searchClient } from './utils/searchClient';
 import { postExt, postAsk } from './utils/postDcloudServer';
-import { forbidScroll, debounce } from '../../util';
+import { forbidScroll } from '../../util';
 import { removeHighlightTags, isEditingContent } from './utils/searchUtils';
 import Base64 from './utils/Base64';
 import { ajax } from './utils/postDcloudServer';
-import { renderMarkdown } from "./components/AIChat/markdown-loader";
+import { renderMarkdown } from "./AIChat/markdown-loader";
+import { DEFAULT_ENABLE_AI, MAX_AI_ANSWER_LENGTH } from './constants';
 import 'highlight.js/styles/github.min.css'
 
 const {
-	enableAI = true,
+	enableAI = DEFAULT_ENABLE_AI,
 	category,
 	translations: {
 		searchBox: { placeholder, buttonText, searchBy },
@@ -185,7 +178,7 @@ export default {
 
 	props: ['options'],
 
-	components: { NavbarLogo, Results, pagination, MainNavbarLink, AIChat, Skeleton },
+	components: { NavbarLogo, Results, pagination, MainNavbarLink, AIChat, AIAnswer },
 
 	data() {
 		return {
@@ -250,6 +243,9 @@ export default {
 					? 'translateX(100%)'
 					: 'translateX(0%)'
 			}
+		},
+		showAIMessage() {
+			return this.searchValue.trim().length >= MAX_AI_ANSWER_LENGTH || this.aiMessage.msg.trim().length > 0
 		}
 	},
 
@@ -343,6 +339,8 @@ export default {
 				if (this.isAI) {
 					height = height - 200
 				}
+				// 最小高度
+				if (height < 200) height = 200;
 				searchResult.style.height = height + 'px';;
 			}
 		},
@@ -391,7 +389,7 @@ export default {
 							this.totalPage = nbPages;
 							this.curPage = page + 1;
 
-							if (this.curPage === 1 && this.enableAI) {
+							if (this.enableAI && this.curPage === 1 && this.showAIMessage) {
 								this.resultList.splice(1, 0, this.aiMessage);
 							}
 						})
@@ -442,6 +440,7 @@ export default {
 
 		searchByAI() {
 			try {
+				if (!this.showAIMessage) return;
 				this.searchAIResult = ajax(aiChatForDocSearch, 'POST', {
 					"question": this.searchValue,
 					"group_name": this.currentCategory.text
@@ -580,5 +579,4 @@ export default {
 
 <style lang="stylus">
 	@import './index'
-	@import './ai-result.styl'
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuepress-theme-uniapp-official",
-  "version": "1.6.4",
+  "version": "1.6.5",
   "description": "uni-app official website theme for vuepress",
   "main": "index.js",
   "repository": {
@@ -45,9 +45,9 @@
     "vuepress-plugin-mermaidjs": "1.9.1",
     "vuepress-plugin-named-chunks": "^1.1.4",
     "vuepress-plugin-zooming": "^1.1.8",
-    "vuepress-plugin-check-md2": "^1.0.5",
     "vuepress-plugin-noscript-code": "^1.0.2",
-    "vuepress-plugin-expandable-row": "^1.0.10"
+    "vuepress-plugin-expandable-row": "^1.0.10",
+    "vuepress-plugin-check-md2": "^1.0.5"
   },
   "resolutions": {
     "terser-webpack-plugin": "1.4.6",

package/components/DcloudSearchPage/ai-result.styl

@@ -1,61 +0,0 @@
-.ai-answer-card
-  padding 14px 16px
-  margin-top 12px
-  background #fff
-  border-radius 12px
-  border 1px solid rgba(0,0,0,0.06)
-  box-shadow 0 2px 8px rgba(0,0,0,0.04)
-  transition box-shadow .25s, transform .2s
-  cursor pointer
-
-  &:hover
-    box-shadow 0 4px 14px rgba(0,0,0,0.08)
-    transform translateY(-1px)
-  /* 重置部分元素样式，防止样式冲突 */
-  pre
-    margin: 0
-    padding: 5px
-    border-radius 10px
-    background #f6f8fa
-    & + pre
-      margin-top 8px
-  pre, code
-    white-space: pre-wrap;    /* 允许换行 */
-    word-wrap: break-word;    /* 允许长行断开 */
-    word-break: break-word;
-  h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure, blockquote
-    line-height: normal
-    margin: 0
-    padding: 0
-  ul, ol
-    list-style: none
-
-.ai-answer-header
-  display flex
-  align-items center
-  margin-bottom 8px
-
-.ai-answer-icon
-  font-size 18px
-  margin-right 6px
-
-.ai-answer-title
-  font-weight 600
-  font-size 15px
-  color #333
-
-.ai-answer-msg
-  font-size 14px
-  line-height normal
-  color #555
-  // white-space pre-wrap
-  word-break break-word
-  animation fadeIn .3s ease
-
-@keyframes fadeIn
-  from
-    opacity 0
-    transform translateY(4px)
-  to
-    opacity 1
-    transform translateY(0)