caimei-applets-caimei/pages/user/chats/components/chat-html.vue

<template>
    <view>
        <view class="cm_ai_answer chat">
            <view class="cm_ai_html chat">
                <view class="h1">Hi，我是采美AI助手 <text class="iconfont icon-AIzhushou"></text></view>
                我是您的AI助手，欢迎向我提出您的疑问，我会根据你给出的问题提供相对应的回答~
            </view>
        </view>
        <view v-for="(chat, index) in messages" :key="index" class="cm_ai_answer"
            :class="chat.from === 'me' ? 'user' : ''">
            <view class="cm_ai_html" :class="chat.from === 'me' ? 'user' : ''">
                <template v-if="chat.from === 'me'">
                    <text>{{ chat.question }}</text>
                </template>
                <template v-else>
                    <text v-if="chat.typing">{{ chat.question.substring(0, chat.currentLength) }}</text>
                    <text v-else>{{ chat.question }}</text>
                </template>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: 'chatHtml',
        props: {
            messages: {
                type: Array
            }
        },
        data() {
            return {
                chatList: [],
            }
        },
        created() {

        },
        computed: {

        },
        watch: {
            messages: {
                handler: function(val) {
                    console.log('messages', val)
                    this.startTypingEffect(this.messages[this.messages.length - 1])
                }
            }
        },
        methods: {
            startTypingEffect(message) {
                if (!message.typing) {
                    message.typing = true // 标记为正在打字  
                    let currentLength = 0
                    const typeEffect = () => {
                        if (currentLength < message.question.length) {
                            message.currentLength++ // 增加已显示的文本长度  
                            // 如果需要，可以在这里添加一些性能优化或条件检查  
                            setTimeout(typeEffect, 30) // 每100毫秒增加一个字符  
                            this.$emit('scrollUpdate', true)
                        } else {
                            message.typing = false // 打字完成  
                            this.$emit('scrollUpdate', true)
                        }
                    }
                    typeEffect() // 开始打字效果  
                }
            }
        }
    }
</script>

<style lang="scss">
    .chat-container {
        height: 100%;
        /* 或者你需要的固定高度 */
        overflow-y: auto;
        /* 允许y轴滚动 */
    }

    .cm_ai_answer {
        width: 100%;
        height: auto;
        box-sizing: border-box;
        position: relative;
        margin: 20rpx 0;
        display: flex;
        justify-content: flex-start;

        &.user {
            justify-content: flex-end;
        }

        .cm_ai_html {
            min-height: 80rpx;
            border-radius: 0 30rpx 30rpx 30rpx;
            line-height: 1.5715;
            background-color: #FFFFFF;
            box-sizing: border-box;
            padding: 24rpx;
            font-size: 28rpx;
            color: #666666;
            letter-spacing: 0.5rpx;

            .h1 {
                font-size: $font-size-48;
                font-weight: 600;
                color: #333333;
                line-height: 110rpx;
                letter-spacing: 2rpx;
                .icon-AIzhushou{
                    font-size: 56rpx;
                    color: #ff5b00;
                    font-weight: normal;
                }
            }
            &.user {
                min-height: 80rpx;
                border-radius: 30rpx 30rpx 0 30rpx;
                background-color: rgba(255, 91, 0, 0.1);
                font-size: 28rpx;
                color: #333333;
            }

            .cm_ai_html_loading {
                width: 60rpx;
                height: 14rpx;
            }
        }
    }
</style>