chat 操作

wujingjing

2024-06-28 9b1a1d20b0699ba3c44764679a05d5c35ca63cbd

chat 操作

 src/components/chat/Chat.vue

@@ -10,19 +10,16 @@
                    <img class="rounded-full size-12 mr-4" :src="roleImageMap[item.role]" alt="" srcset="" />

                    <div class="flex">
                        <div v-if="item.content">
                        <div class="relative" v-if="item.content">
                            <div
                                :class="{ 'bg-[#d8d8ff]': item.role === RoleEnum.assistant, 'bg-white': item.role === RoleEnum.user }"
                                class="prose text-sm rounded-[6px] p-4 leading-relaxed max-w-[100ch]"
                                v-html="md.render(item.content)"
                            ></div>
                            <div class="">
                                <SvgIcon name="ele-CopyDocument"/>
                                <SvgIcon name="ele-Check"/>
                                <SvgIcon name="ywicon icon-dianzan"/>
                                <SvgIcon name="ywicon icon-buzan"/>


                            <div v-if="item.role === RoleEnum.assistant" class="absolute flex items-center right-0 space-x-2 mr-2 mt-2">
                                <SvgIcon class="cursor-pointer" name="ele-CopyDocument" @click="copyClick(item.content)" />
                                <SvgIcon class="cursor-pointer" name="ywicon icon-dianzan" />
                                <SvgIcon class="cursor-pointer" size="12" name="ywicon icon-buzan" />
                            </div>
                        </div>

@@ -40,12 +37,13 @@

<script setup lang="ts">
import cryptoJS from 'crypto-js';
import { ElMessage } from 'element-plus';
import { nextTick, onMounted, ref, watch } from 'vue';
import useClipboard from 'vue-clipboard3';
import Loding from './components/Loding.vue';
import { md } from './libs/markdown';
import { RoleEnum, type ChatMessage, roleImageMap } from './types';
import { RoleEnum, roleImageMap, type ChatMessage } from './types';
import PlayBar from '/@/components/chat/components/playBar/PlayBar.vue';
import router from '/@/router';

let apiKey = '';
let isConfig = ref(false);
@@ -98,7 +96,7 @@
        // }
        const a = new Promise<string>((resolve) => {
            setTimeout(() => {
                resolve('你好 ');
                resolve('你好，我是AI语言模型 ');
            }, 500);
        });

@@ -198,6 +196,16 @@
};

watch(messageList.value, () => nextTick(() => scrollToBottom()));

//#region ====================== 聊天内容操作 ======================

const { toClipboard } = useClipboard();

const copyClick = (content) => {
    ElMessage.success('复制成功');
    toClipboard(content);
};
//#endregion
</script>

<style scoped>