You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
54 lines
2.1 KiB
54 lines
2.1 KiB
<template>
|
|
<view class="chat-row" :class="{ 'chat-left': showLeft, 'chat-right': showRight }">
|
|
<view class="bubble" :class="bubbleClass">
|
|
<text class="bubble-content">{{ msg.content }}</text>
|
|
<text class="bubble-time">{{ msg.time }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { computed } from 'vue'
|
|
|
|
export default {
|
|
name: 'ChatBubble',
|
|
props: {
|
|
msg: { type: Object, required: true },
|
|
viewer: { type: String, default: 'customer' } // 'customer' or 'staff'
|
|
},
|
|
setup(props) {
|
|
const showLeft = computed(() => {
|
|
if (props.msg.senderType === 'system') return false
|
|
// customer viewer: staff messages on left, customer on right
|
|
// staff viewer: customer messages on left, staff on right
|
|
if (props.viewer === 'staff') return props.msg.senderType === 'customer'
|
|
return props.msg.senderType === 'staff'
|
|
})
|
|
const showRight = computed(() => {
|
|
if (props.msg.senderType === 'system') return false
|
|
if (props.viewer === 'staff') return props.msg.senderType === 'staff'
|
|
return props.msg.senderType === 'customer'
|
|
})
|
|
const bubbleClass = computed(() => ({
|
|
'bubble-left': showLeft.value,
|
|
'bubble-right': showRight.value,
|
|
'bubble-system': props.msg.senderType === 'system',
|
|
}))
|
|
return { showLeft, showRight, bubbleClass }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.chat-row{display:flex;padding:12rpx 20rpx}
|
|
.chat-left{justify-content:flex-start}
|
|
.chat-right{justify-content:flex-end}
|
|
.bubble{max-width:70%;padding:16rpx 24rpx;border-radius:20rpx;font-size:28rpx}
|
|
.bubble-left{background:var(--bg-card);border:1px solid var(--border)}
|
|
.bubble-left .bubble-content{color:var(--text)}
|
|
.bubble-right{background:linear-gradient(135deg,var(--orange),#FF8C5A)}
|
|
.bubble-right .bubble-content{color:#fff}
|
|
.bubble-system{background:rgba(74,144,217,.15);border:1px solid rgba(74,144,217,.3);max-width:90%;margin:0 auto}
|
|
.bubble-system .bubble-content{color:var(--blue);font-size:24rpx}
|
|
.bubble-time{font-size:20rpx;color:var(--text-muted);display:block;text-align:right;margin-top:8rpx}
|
|
</style>
|