chat-html.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. <template>
  2. <view>
  3. <view class="cm_ai_answer chat">
  4. <view class="cm_ai_html chat">
  5. <view class="h1">Hi,我是采美AI助手 <text class="iconfont icon-AIzhushou"></text></view>
  6. 我是您的AI助手,欢迎向我提出您的疑问,我会根据你给出的问题提供相对应的回答~
  7. </view>
  8. </view>
  9. <view v-for="(chat, index) in messages" :key="index" class="cm_ai_answer"
  10. :class="chat.from === 'me' ? 'user' : ''">
  11. <view class="cm_ai_html" :class="chat.from === 'me' ? 'user' : ''">
  12. <template v-if="chat.from === 'me'">
  13. <text>{{ chat.question }}</text>
  14. </template>
  15. <template v-else>
  16. <text v-if="chat.typing">{{ chat.question.substring(0, chat.currentLength) }}</text>
  17. <text v-else>{{ chat.question }}</text>
  18. </template>
  19. </view>
  20. </view>
  21. </view>
  22. </template>
  23. <script>
  24. export default {
  25. name: 'chatHtml',
  26. props: {
  27. messages: {
  28. type: Array
  29. }
  30. },
  31. data() {
  32. return {
  33. chatList: [],
  34. }
  35. },
  36. created() {
  37. },
  38. computed: {
  39. },
  40. watch: {
  41. messages: {
  42. handler: function(val) {
  43. console.log('messages', val)
  44. this.startTypingEffect(this.messages[this.messages.length - 1])
  45. }
  46. }
  47. },
  48. methods: {
  49. startTypingEffect(message) {
  50. if (!message.typing) {
  51. message.typing = true // 标记为正在打字
  52. let currentLength = 0
  53. const typeEffect = () => {
  54. if (currentLength < message.question.length) {
  55. message.currentLength++ // 增加已显示的文本长度
  56. // 如果需要,可以在这里添加一些性能优化或条件检查
  57. setTimeout(typeEffect, 30) // 每100毫秒增加一个字符
  58. this.$emit('scrollUpdate', true)
  59. } else {
  60. message.typing = false // 打字完成
  61. this.$emit('scrollUpdate', true)
  62. }
  63. }
  64. typeEffect() // 开始打字效果
  65. }
  66. }
  67. }
  68. }
  69. </script>
  70. <style lang="scss">
  71. .chat-container {
  72. height: 100%;
  73. /* 或者你需要的固定高度 */
  74. overflow-y: auto;
  75. /* 允许y轴滚动 */
  76. }
  77. .cm_ai_answer {
  78. width: 100%;
  79. height: auto;
  80. box-sizing: border-box;
  81. position: relative;
  82. margin: 20rpx 0;
  83. display: flex;
  84. justify-content: flex-start;
  85. &.user {
  86. justify-content: flex-end;
  87. }
  88. .cm_ai_html {
  89. min-height: 80rpx;
  90. border-radius: 0 30rpx 30rpx 30rpx;
  91. line-height: 1.5715;
  92. background-color: #FFFFFF;
  93. box-sizing: border-box;
  94. padding: 24rpx;
  95. font-size: 28rpx;
  96. color: #666666;
  97. letter-spacing: 0.5rpx;
  98. .h1 {
  99. font-size: $font-size-48;
  100. font-weight: 600;
  101. color: #333333;
  102. line-height: 110rpx;
  103. letter-spacing: 2rpx;
  104. .icon-AIzhushou{
  105. font-size: 56rpx;
  106. color: #ff5b00;
  107. font-weight: normal;
  108. }
  109. }
  110. &.user {
  111. min-height: 80rpx;
  112. border-radius: 30rpx 30rpx 0 30rpx;
  113. background-color: rgba(255, 91, 0, 0.1);
  114. font-size: 28rpx;
  115. color: #333333;
  116. }
  117. .cm_ai_html_loading {
  118. width: 60rpx;
  119. height: 14rpx;
  120. }
  121. }
  122. }
  123. </style>