131 lines
2.4 KiB
Vue
131 lines
2.4 KiB
Vue
<template>
|
|
<div class="chat-message" :class="{ 'user-message': isUser, 'ai-message': !isUser }">
|
|
<div class="message-content">
|
|
<div class="message-text" v-html="parsedContent"></div>
|
|
<div class="message-time">{{ formattedTime }}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import MarkdownIt from 'markdown-it';
|
|
import { computed } from 'vue';
|
|
|
|
const md = new MarkdownIt();
|
|
|
|
export default {
|
|
name: 'ChatMessage',
|
|
|
|
props: {
|
|
message: {
|
|
type: Object,
|
|
required: true,
|
|
validator: (value) => {
|
|
return value.content !== undefined && value.sender !== undefined && value.timestamp !== undefined;
|
|
}
|
|
}
|
|
},
|
|
|
|
setup(props) {
|
|
// Determine if the message is from the user
|
|
const isUser = computed(() => props.message.sender === 'user');
|
|
|
|
// Format the timestamp
|
|
const formattedTime = computed(() => {
|
|
const date = new Date(props.message.timestamp);
|
|
return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
|
});
|
|
|
|
const parsedContent = computed(() => {
|
|
if (props.message.sender === 'user') {
|
|
return props.message.content;
|
|
}
|
|
return md.render(props.message.content);
|
|
});
|
|
|
|
return {
|
|
isUser,
|
|
formattedTime,
|
|
parsedContent
|
|
};
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.chat-message {
|
|
display: flex;
|
|
margin-bottom: 16px;
|
|
animation: fadeIn 0.3s ease-in-out;
|
|
}
|
|
|
|
.user-message {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.ai-message {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.message-content {
|
|
max-width: 80%;
|
|
padding: 12px 16px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.user-message .message-content {
|
|
background-color: #1890ff;
|
|
color: white;
|
|
border-top-right-radius: 4px;
|
|
}
|
|
|
|
.ai-message .message-content {
|
|
background-color: #f0f2f5;
|
|
color: #333;
|
|
border-top-left-radius: 4px;
|
|
}
|
|
|
|
.message-text {
|
|
font-size: 16px;
|
|
line-height: 1.5;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.message-time {
|
|
font-size: 12px;
|
|
margin-top: 4px;
|
|
text-align: right;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.user-message .message-time {
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.ai-message .message-time {
|
|
color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.message-content {
|
|
max-width: 90%;
|
|
}
|
|
|
|
.message-text {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
</style>
|