tdesign-miniprogram/packages/uniapp-pro-components/chat/chat-content/chat-content.vue at 2aa5ffa06321c68fd27c50165d117e7dbf7acabf · Tencent/tdesign-miniprogram · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<template>
  <view
    :class="classPrefix"
    :style="'' + tools._style([customStyle])"
  >
    <block v-if="status === 'error' || content.type === 'text'">
      <view :class="classPrefix + '__' + role + ' ' + classPrefix + '__' + status">
        <view class="_pre">
          <rich-text :nodes="textInfo" />
        </view>
      </view>
    </block>
    <block v-else>
      <view :class="classPrefix + '__assistant'">
        <t-chat-markdown
          :content="textInfo"
          :options="markdownProps && markdownProps.options"
          :streaming="markdownProps && markdownProps.streaming"
          @click="onClick"
        />
      </view>
    </block>
  </view>
</template>
<script>
import TChatMarkdown from '../chat-markdown/chat-markdown.vue';
import { prefix } from '@tdesign/uniapp/common/config';
import props from './props';
import tools from '@tdesign/uniapp/common/utils.wxs';
import { uniComponent } from '@tdesign/uniapp/common/src/index';

const name = `${prefix}-chat-content`;


export default {
  components: {
    TChatMarkdown,
  },
  ...uniComponent({
    name,
    options: {
      multipleSlots: true,
      styleIsolation: 'shared',
    },

    props: {
      ...props,
    },

    emits: [
      'click',
    ],
    data() {
      return {
        classPrefix: name,
        textInfo: '',
        tools,
      };
    },

    watch: {
      content: {
        handler() {
          this.setTextInfo();
        },
        immediate: true,
        deep: true,
      },
    },

    mounted() {
      this.setTextInfo();
    },

    methods: {
      getEscapeReplacement(ch) {
        const escapeReplacements = {
          '&': '&amp;',
          '<': '&lt;',
          '>': '&gt;',
          '"': '&quot;',
          '\'': '&#39;',
        };
        return escapeReplacements[ch];
      },
      escape(html, encode = false) {
        const escapeTest = /[&<>"']/;
        const escapeReplace = new RegExp(escapeTest.source, 'g');
        const escapeTestNoEncode = /[<>"']|&(?!(#\d{1,7}|#[Xx][a-fA-F0-9]{1,6}|\w+);)/;
        const escapeReplaceNoEncode = new RegExp(escapeTestNoEncode.source, 'g');
        if (encode) {
          if (escapeTest.test(html)) {
            return html.replace(escapeReplace, this.getEscapeReplacement);
          }
        } else if (escapeTestNoEncode.test(html)) {
          return html.replace(escapeReplaceNoEncode, this.getEscapeReplacement);
        }
        return html;
      },

      setTextInfo() {
      // error 状态下统一按纯文本处理，避免走 markdown 渲染
        if (this.content.type === 'text' || this.status === 'error') {
          this.textInfo = this.escape(this.content.data || '');
        } else {
          this.textInfo = this.content.data;
        }
      },

      onClick(e) {
        this.$emit('click', e);
      },
    },
  }),
};

</script>
<style scoped src="./chat-content.css"></style>