FiDA_Front/src/views/home/agent/components/Item.vue

<template>
	<div class="agent-item">
		<div class="message-wrapper flex" :class="{ 'is-user': content.isUser }">
			<div class="thumb">
				<img :src="content.isUser ? userThumb : agentThumb" class="thumb-icon" />
			</div>
			<div
				class="message-context"
				v-show="!content.loading && !content.thinking && !content.streaming"
			>
				<div class="message-txt markdown-body">
					<div v-html="formatMessage"></div>
				</div>
				<div class="operate flex" :class="{ 'is-user': content.isUser }">
					<template v-if="content.isUser">
						<SvgIcon name="copy" size="16" color="#000" @click.stop="handleCopyText" />
					</template>
					<template v-else>
						<SvgIcon
							v-for="operate in operateList"
							:key="operate.name"
							:name="operate.name"
							:size="operate.name === 'refreshTransparent' ? '14' : '16'"
							color="#000000A6"
							@click.stop="operate.action"
						/>
					</template>
				</div>
			</div>
			<div class="message-context" v-show="content.loading">
				<div class="generating">Generating...</div>
			</div>
			<div class="message-context" v-show="content.thinking">
				<div class="thinking">
					<div class="thinking-header flex align-center" @click="toggleThinkingCollapsed">
						<span>思考中</span>
						<!-- <SvgIcon :name="content.thinkingCollapsed ? 'arrowDown' : 'arrowUp'" size="16" color="#666" /> -->
					</div>
					<div class="thinking-content" v-show="!content.thinkingCollapsed">
						<pre>{{ content.thinkingText }}</pre>
					</div>
				</div>
			</div>
			<div class="message-context" v-show="content.streaming">
				<div class="message-txt">
					<div v-html="formatMessage"></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { ref, onMounted, computed } from 'vue'
	import { useI18n } from 'vue-i18n'
	import gsap from 'gsap'
	import userThumb from '@/assets/images/user-thumb.jpg'
	import agentThumb from '@/assets/images/agent-thumb.jpg'
	import markdownIt from 'markdown-it'

	const md = new markdownIt()

	const { t } = useI18n()

	const props = defineProps<{
		content: Object
	}>()

	const formatMessage = computed(() => {
		// MARKDOWN.renderer.rules.link_open = (tokens, idx, options, env, self) => {
		// 	const aIndex = tokens[idx].attrIndex('target')
		// 	if (aIndex < 0) {
		// 		tokens[idx].attrPush(['target', '_blank'])
		// 	} else {
		// 		tokens[idx].attrs[aIndex][1] = '_blank'
		// 	}
		// 	return self.renderToken(tokens, idx, options, env, self)
		// }
    const str = md.render(props.content.text)
    // console.log('str',str)
		return str
	})

	const emit = defineEmits(['regenerate'])

	const operateList = ref([
		{
			name: 'thumbUp',
			action: () => {
				console.log('thumbUp')
			}
		},
		{
			name: 'thumbDown',
			action: () => {
				console.log('thumbDown')
			}
		},
		{
			name: 'refreshTransparent',
			action: () => {
				emit('regenerate')
			}
		},
		{
			name: 'copy',
			action: () => {
				handleCopyText()
			}
		}
	])

	const loading = ref(false)

	const handleCopyText = () => {
		navigator.clipboard
			.writeText(props.content.text)
			.then(() => {
				// console.log('Text copied to clipboard');
				ElMessage({
					message: t('agent.copySuccess'),
					type: 'success',
					offset: 300
				})
			})
			.catch((err) => {
				console.error('Could not copy text: ', err)
				ElMessage({
					message: t('agent.copyFailed'),
					type: 'error',
					offset: 300
				})
			})
	}

	const toggleThinkingCollapsed = () => {
		props.content.thinkingCollapsed = !props.content.thinkingCollapsed
	}
</script>

<style lang="less" scoped>
	.c-svg {
		width: initial;
		cursor: pointer;
	}
	.agent-item {
		font-family: 'Regular';
		font-size: 1.4rem;
		.message-wrapper {
			column-gap: 0.9rem;
			// align-items: flex-start;
			&.is-user {
				text-align: right;
				flex-direction: row-reverse;
				column-gap: 1.3rem;
			}

			.thumb {
				flex-shrink: 0;
				width: 4.4rem;
				height: 4.4rem;
				border-radius: 50%;
				border: 0.1rem solid #e5dfdf;
				.thumb-icon {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
      .message-context{
        line-height: 2rem;
        font-size: 1.4rem;
      }
		}
		.operate {
			margin-top: 1.3rem;
			column-gap: 1.2rem;
			&.is-user {
				justify-content: flex-end;
			}
		}
	}

	.generating {
		font-family: 'GeneralBold';
		font-weight: 600;
		font-size: 1.55rem;
		background: linear-gradient(45deg, #f2ab4a, #ff6b75, #fe3b55);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		text-fill-color: transparent;
	}

	.thinking {
		border: 1px solid #ddd;
		border-radius: 8px;
		padding: 1rem;
		background-color: #f9f9f9;

		.thinking-header {
			cursor: pointer;
			font-weight: bold;
			justify-content: space-between;
		}

		.thinking-content {
			margin-top: 0.5rem;
			pre {
				white-space: pre-wrap;
				font-family: inherit;
				font-size: 1.2rem;
				color: #666;
			}
		}
	}
</style>