1957 lines
48 KiB
Vue
1957 lines
48 KiB
Vue
<!--
|
||
Copyright 2024-2026 ReplyPier
|
||
|
||
Licensed under the Apache License, Version 2.0 (the "License");
|
||
you may not use this file except in compliance with the License.
|
||
You may obtain a copy of the License at
|
||
|
||
http://www.apache.org/licenses/LICENSE-2.0
|
||
|
||
Unless required by applicable law or agreed to in writing, software
|
||
distributed under the License is distributed on an "AS IS" BASIS,
|
||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||
See the License for the specific language governing permissions and
|
||
limitations under the License.
|
||
-->
|
||
|
||
<script setup lang="ts">
|
||
import { onMounted, watch, ref, computed } from 'vue'
|
||
import type { ChatDetail, Message } from '@/types/chat'
|
||
import { useConversationChat } from '@/composables/useConversationChat'
|
||
import { useConversationFiles } from '@/composables/useConversationFiles'
|
||
import { useVisualViewport } from '@/composables/useVisualViewport'
|
||
import { useJiraTicket } from '@/composables/useJiraTicket'
|
||
import JiraTicketModal from '@/components/jira/JiraTicketModal.vue'
|
||
import TicketCreateModal from '@/components/tickets/TicketCreateModal.vue'
|
||
import { ticketService } from '@/services/tickets'
|
||
import { permissionChecks } from '@/utils/permissions'
|
||
import FileUpload from '@/components/common/FileUpload.vue'
|
||
import { userService } from '@/services/user'
|
||
import WhatsAppTemplatePicker from '@/components/conversations/WhatsAppTemplatePicker.vue'
|
||
import MessageStatusTicks from '@/components/conversations/MessageStatusTicks.vue'
|
||
import QuickReplyChips from '@/components/conversations/QuickReplyChips.vue'
|
||
import MessageTag from '@/components/conversations/MessageTag.vue'
|
||
import { navIconSvg } from '@/components/layout/navIcons'
|
||
import { getInitials } from '@/utils/text'
|
||
import { marked } from 'marked'
|
||
import { sanitizeHtml } from '@/utils/sanitize'
|
||
import type { Renderer } from 'marked'
|
||
|
||
const props = defineProps<{
|
||
chat: ChatDetail
|
||
}>()
|
||
|
||
const emit = defineEmits<{
|
||
(e: 'refresh'): void
|
||
(e: 'chatUpdated', data: ChatDetail): void
|
||
(e: 'clearUnread', sessionId: string): void
|
||
(e: 'view-product', productId: string): void
|
||
(e: 'back'): void
|
||
(e: 'info'): void
|
||
}>()
|
||
|
||
// Create a local ref to track the current chat state
|
||
const currentChat = ref(props.chat)
|
||
|
||
const {
|
||
newMessage,
|
||
messagesContainer,
|
||
formattedMessages,
|
||
isLoading,
|
||
showTakeoverButton,
|
||
showTakenOverStatus,
|
||
isChatClosed,
|
||
canSendMessage,
|
||
scrollToBottom,
|
||
handleTakeover,
|
||
handleRouteToHuman,
|
||
isWaitingForHuman,
|
||
handlerCaption,
|
||
handledByAI,
|
||
replaceChatFromProps,
|
||
templateCanReopen,
|
||
clearTemplateSuggestion
|
||
} = useConversationChat(props.chat, emit)
|
||
|
||
// Templates are a WhatsApp-only way back into a conversation whose 24h window
|
||
// closed, and they need the account the conversation arrived on.
|
||
const showTemplatePicker = ref(false)
|
||
const canUseTemplates = computed(
|
||
() => currentChat.value.channel === 'whatsapp' && !!currentChat.value.channel_account_id
|
||
)
|
||
|
||
const handleTemplateSent = () => {
|
||
showTemplatePicker.value = false
|
||
clearTemplateSuggestion()
|
||
emit('refresh')
|
||
}
|
||
|
||
// Add file handling functionality
|
||
const {
|
||
fileUploadRef,
|
||
uploadedFiles,
|
||
handleFilesUploaded,
|
||
handleFileUploadError,
|
||
handleChatPaste,
|
||
handleSendMessageWithAttachments,
|
||
formatFileSize,
|
||
isImageAttachment,
|
||
getDownloadUrl,
|
||
getImageUrl
|
||
} = useConversationFiles(currentChat, newMessage, canSendMessage, scrollToBottom)
|
||
|
||
// Add Jira ticket functionality
|
||
const {
|
||
jiraConnected,
|
||
checkJiraStatus
|
||
} = useJiraTicket()
|
||
|
||
// State for Jira ticket modal
|
||
const showJiraTicketModal = ref(false)
|
||
const ticketSummary = ref('')
|
||
|
||
// Native ticketing: preferred over Jira when the user can manage tickets.
|
||
// One native ticket per session — the button flips to "View ticket".
|
||
const showTicketModal = ref(false)
|
||
const canUseNativeTickets = permissionChecks.canManageTickets()
|
||
const linkedTicketId = ref<string | null>(null)
|
||
const showTicketMenu = ref(false)
|
||
|
||
async function refreshLinkedTicket() {
|
||
if (!canUseNativeTickets || !currentChat.value?.session_id) return
|
||
const ticket = await ticketService.getTicketBySession(currentChat.value.session_id)
|
||
linkedTicketId.value = ticket?.id || null
|
||
}
|
||
|
||
|
||
// Add marked configuration
|
||
marked.setOptions({
|
||
renderer: new marked.Renderer(),
|
||
gfm: true,
|
||
breaks: true
|
||
})
|
||
|
||
// Configure marked renderer to add target="_blank" to links
|
||
const renderer = new marked.Renderer() as Renderer
|
||
renderer.link = function({ href, title, text }) {
|
||
if (!href) return text || ''
|
||
const link = `<a href="${href}"${title ? ` title="${title}"` : ''}>${text}</a>`
|
||
return link.replace(/^<a /, '<a target="_blank" rel="nofollow" ')
|
||
}
|
||
marked.use({ renderer })
|
||
|
||
// Create helper function to render and sanitize markdown
|
||
const renderMarkdown = (text: string) => {
|
||
return sanitizeHtml(marked.parse(text, { async: false }) as string)
|
||
}
|
||
|
||
// Computed property to determine if the current user can create a ticket
|
||
const canCreateTicket = computed(() => {
|
||
// Can only create ticket if:
|
||
// 1. User can send messages (already handled by canSendMessage)
|
||
// 2. Chat is not closed
|
||
// 3. Current user is the one who took over the chat
|
||
return canSendMessage.value &&
|
||
!isChatClosed.value &&
|
||
currentChat.value.user_id === userService.getUserId();
|
||
})
|
||
|
||
// Function to handle create ticket
|
||
const handleCreateTicket = async () => {
|
||
// Get a summary from the last few messages
|
||
const lastMessages = formattedMessages.value.slice(-3)
|
||
const summary = lastMessages.map(m => m.message).join(' ').substring(0, 100) + '...'
|
||
|
||
ticketSummary.value = summary
|
||
showJiraTicketModal.value = true
|
||
}
|
||
|
||
// Function to handle ticket created
|
||
const handleTicketCreated = (ticketKey: string) => {
|
||
// Add ticket key to message input
|
||
newMessage.value = `Jira 工单已创建：${ticketKey}`
|
||
// Close the modal
|
||
showJiraTicketModal.value = false
|
||
}
|
||
|
||
// ── Thread presentation ─────────────────────────────────────────────────
|
||
const currentUserName = userService.getUserName() || '人工客服'
|
||
|
||
const customerName = computed(
|
||
() => props.chat.customer.full_name || props.chat.customer.email || '访客'
|
||
)
|
||
const customerSubline = computed(() => {
|
||
const email = props.chat.customer.email
|
||
if (props.chat.customer.full_name) return email || '未留下邮箱'
|
||
return email || '匿名访客 · 未留下姓名与邮箱'
|
||
})
|
||
|
||
const CHANNEL_LABELS: Record<string, string> = {
|
||
web: '网页组件',
|
||
shopify: 'Shopify',
|
||
whatsapp: 'WhatsApp',
|
||
messenger: 'Messenger',
|
||
instagram: 'Instagram',
|
||
telegram: 'Telegram',
|
||
slack: 'Slack',
|
||
email: '邮件',
|
||
sms: '短信',
|
||
line: 'LINE',
|
||
api: 'API'
|
||
}
|
||
const channelLabel = (channel?: string | null) =>
|
||
(channel && CHANNEL_LABELS[channel]) || channel || '网页组件'
|
||
|
||
const formatClock = (iso: string) => {
|
||
const date = new Date(iso)
|
||
if (Number.isNaN(date.getTime())) return ''
|
||
return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
|
||
}
|
||
|
||
const dayLabel = (iso: string) => {
|
||
const date = new Date(iso)
|
||
const now = new Date()
|
||
const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate())
|
||
const startOfMessageDay = new Date(date.getFullYear(), date.getMonth(), date.getDate())
|
||
const dayDiff = Math.round(
|
||
(startOfToday.getTime() - startOfMessageDay.getTime()) / 86400000
|
||
)
|
||
const formatted = new Intl.DateTimeFormat('zh-CN', {
|
||
month: 'long',
|
||
day: 'numeric'
|
||
}).format(date)
|
||
|
||
if (dayDiff === 0) return `今天 · ${formatted}`
|
||
if (dayDiff === 1) return `昨天 · ${formatted}`
|
||
return formatted
|
||
}
|
||
|
||
// Who authored a bubble. The backend keeps the visitor / AI / human split in
|
||
// message_type, which is what the three designs key off.
|
||
type MessageKind = 'visitor' | 'ai' | 'human'
|
||
const messageKind = (type?: string): MessageKind => {
|
||
if (type === 'user') return 'visitor'
|
||
if (type === 'agent') return 'human'
|
||
return 'ai'
|
||
}
|
||
|
||
const isOwnMessage = (message: Message) =>
|
||
!!message.user_name && message.user_name === currentUserName
|
||
|
||
const whoLabel = (message: Message) => {
|
||
if (message.message_type === 'agent') {
|
||
return isOwnMessage(message)
|
||
? '你 · 人工客服'
|
||
: `${message.user_name || '客服'} · 人工客服`
|
||
}
|
||
return `AI · ${message.agent_name || props.chat.agent.name || '客服'}`
|
||
}
|
||
|
||
const avatarText = (message: Message) => {
|
||
if (messageKind(message.message_type) === 'human') {
|
||
return isOwnMessage(message) ? '你' : getInitials(message.user_name, '客')
|
||
}
|
||
return getInitials(customerName.value, '访')
|
||
}
|
||
|
||
const avatarTone = (message: Message) => {
|
||
const kind = messageKind(message.message_type)
|
||
return kind === 'human' ? 'ink' : kind === 'ai' ? 'celadon' : ''
|
||
}
|
||
|
||
const isEndEvent = (message: Message) =>
|
||
Boolean(message.end_chat || message.attributes?.end_chat)
|
||
|
||
// Hand-off notices are stored as ordinary agent/bot rows with this flag, not as
|
||
// message_type 'system' — they belong on the rule, not in a bubble.
|
||
const isHandoverEvent = (message: Message) =>
|
||
Boolean(message.attributes?.handover_notice)
|
||
|
||
const eventIcon = (message: Message) =>
|
||
isEndEvent(message) ? 'lock' : isHandoverEvent(message) ? 'headset' : 'clock'
|
||
|
||
// One stream that interleaves day dividers, system events and bubbles. System
|
||
// messages are the backend's own record of a hand-off or a close, so they get
|
||
// the rule-and-pill treatment instead of a bubble.
|
||
interface FormattedMessage extends Message {
|
||
timeAgo: string
|
||
}
|
||
|
||
interface DayItem {
|
||
key: string
|
||
kind: 'day'
|
||
label: string
|
||
}
|
||
|
||
interface MessageItem {
|
||
key: string
|
||
kind: 'event' | MessageKind
|
||
message: FormattedMessage
|
||
}
|
||
|
||
type StreamItem = DayItem | MessageItem
|
||
|
||
const streamItems = computed<StreamItem[]>(() => {
|
||
const items: StreamItem[] = []
|
||
let lastDay = ''
|
||
|
||
formattedMessages.value.forEach((message, index) => {
|
||
const dayKey = new Date(message.created_at).toDateString()
|
||
if (dayKey !== lastDay) {
|
||
items.push({
|
||
key: `day-${dayKey}`,
|
||
kind: 'day',
|
||
label: dayLabel(message.created_at)
|
||
})
|
||
lastDay = dayKey
|
||
}
|
||
|
||
if (message.message_type === 'system' || isHandoverEvent(message)) {
|
||
items.push({ key: `message-${index}`, kind: 'event', message })
|
||
return
|
||
}
|
||
|
||
items.push({
|
||
key: `message-${index}`,
|
||
kind: messageKind(message.message_type),
|
||
message
|
||
})
|
||
})
|
||
|
||
return items
|
||
})
|
||
|
||
const composerPlaceholder = computed(
|
||
() => `回复 ${customerName.value}… 支持粘贴截图`
|
||
)
|
||
|
||
// Keep the composer above the on-screen keyboard on installed iOS PWAs, where
|
||
// the keyboard overlays the viewport instead of resizing it
|
||
useVisualViewport(() => scrollToBottom())
|
||
|
||
// Watch for chat changes and update the internal state
|
||
watch(() => props.chat, (newChat) => {
|
||
if (newChat) {
|
||
// Only sync local state to avoid emitting events back to parent
|
||
currentChat.value = newChat
|
||
replaceChatFromProps(newChat)
|
||
}
|
||
}, { immediate: true })
|
||
|
||
// Check Jira status on mount
|
||
onMounted(async () => {
|
||
scrollToBottom()
|
||
await checkJiraStatus()
|
||
await refreshLinkedTicket()
|
||
})
|
||
|
||
watch(() => currentChat.value?.session_id, () => refreshLinkedTicket())
|
||
</script>
|
||
|
||
<template>
|
||
<div class="chat-layout">
|
||
<header class="thread-head">
|
||
<button
|
||
class="icon-btn sm back-btn"
|
||
aria-label="返回会话列表"
|
||
@click="emit('back')"
|
||
>
|
||
<span class="back-glyph" v-html="navIconSvg('chevronRight', 18)"></span>
|
||
</button>
|
||
|
||
<div class="thread-who">
|
||
<div class="thread-name">
|
||
<h2>{{ customerName }}</h2>
|
||
<span v-if="handledByAI" class="chip chip-ai"><i class="d"></i>AI 接待中</span>
|
||
<span v-else-if="isWaitingForHuman" class="chip chip-wait"><i class="d"></i>等待人工</span>
|
||
<span v-else-if="showTakenOverStatus" class="chip">
|
||
<span class="chip-glyph" v-html="navIconSvg('headset', 12)"></span>
|
||
由 {{ chat.user_name || '其他客服' }} 接管
|
||
</span>
|
||
<span v-else-if="isChatClosed" class="chip chip-quiet">已结束</span>
|
||
<span v-else class="chip chip-human">人工接待中 · 你</span>
|
||
</div>
|
||
<div class="thread-meta">
|
||
<span>{{ customerSubline }}</span>
|
||
<i></i>
|
||
<span>{{ channelLabel(chat.channel) }}</span>
|
||
<i></i>
|
||
<span>{{ chat.agent.name || 'AI 客服' }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="thread-actions">
|
||
<!-- The thread only streams once a human takes the chat over; while the
|
||
AI is answering this is how you pull the latest turns. -->
|
||
<button
|
||
class="icon-btn sm"
|
||
title="刷新会话"
|
||
aria-label="刷新会话"
|
||
@click="emit('refresh')"
|
||
>
|
||
<span v-html="navIconSvg('refresh', 16)"></span>
|
||
</button>
|
||
|
||
<button
|
||
v-if="canUseTemplates && !isChatClosed"
|
||
class="btn btn-ghost btn-sm"
|
||
title="发送模板"
|
||
aria-label="发送模板"
|
||
@click="showTemplatePicker = true"
|
||
>
|
||
<span class="btn-glyph" v-html="navIconSvg('message', 15)"></span>
|
||
<span class="btn-label">发送模板</span>
|
||
</button>
|
||
|
||
<template v-if="canCreateTicket">
|
||
<!-- A native ticket already exists for this conversation -->
|
||
<button
|
||
v-if="linkedTicketId"
|
||
class="btn btn-ghost btn-sm"
|
||
@click="$router.push(`/tickets/${linkedTicketId}`)"
|
||
>
|
||
<span class="btn-glyph" v-html="navIconSvg('ticket', 15)"></span>
|
||
<span class="btn-label">查看工单</span>
|
||
</button>
|
||
|
||
<!-- Jira connected: keep the familiar Jira flow primary, native in
|
||
the dropdown (orgs that configured Jira keep their board). -->
|
||
<div v-else-if="jiraConnected" class="ticket-btn-group">
|
||
<button class="btn btn-ghost btn-sm" @click="handleCreateTicket">
|
||
<span class="btn-glyph" v-html="navIconSvg('ticket', 15)"></span>
|
||
<span class="btn-label">创建工单</span>
|
||
</button>
|
||
<button
|
||
v-if="canUseNativeTickets"
|
||
class="ticket-menu-toggle"
|
||
title="更多工单选项"
|
||
aria-label="更多工单选项"
|
||
@click="showTicketMenu = !showTicketMenu"
|
||
>
|
||
<span v-html="navIconSvg('chevronDown', 14)"></span>
|
||
</button>
|
||
<div v-if="showTicketMenu" class="ticket-menu">
|
||
<button
|
||
class="ticket-menu-item"
|
||
@click="showTicketMenu = false; showTicketModal = true"
|
||
>
|
||
创建 ReplyPier 工单
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- No Jira: native ticketing is the flow -->
|
||
<button
|
||
v-else-if="canUseNativeTickets"
|
||
class="btn btn-ghost btn-sm"
|
||
@click="showTicketModal = true"
|
||
>
|
||
<span class="btn-glyph" v-html="navIconSvg('ticket', 15)"></span>
|
||
<span class="btn-label">创建工单</span>
|
||
</button>
|
||
</template>
|
||
|
||
<button
|
||
class="icon-btn sm"
|
||
aria-label="会话详情"
|
||
title="会话详情"
|
||
@click="emit('info')"
|
||
>
|
||
<span v-html="navIconSvg('panel', 16)"></span>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="chat-content">
|
||
<div class="messages" ref="messagesContainer" aria-label="对话消息">
|
||
<div class="stream-inner">
|
||
<template v-for="item in streamItems" :key="item.key">
|
||
<div v-if="item.kind === 'day'" class="day">{{ item.label }}</div>
|
||
|
||
<div
|
||
v-else-if="item.kind === 'event'"
|
||
class="event"
|
||
:class="{
|
||
warn: isEndEvent(item.message),
|
||
take: isHandoverEvent(item.message),
|
||
}"
|
||
>
|
||
<span class="event-pill">
|
||
<span
|
||
class="event-glyph"
|
||
v-html="navIconSvg(eventIcon(item.message), 13)"
|
||
></span>
|
||
<span class="event-text">{{ item.message.message || '会话事件' }}</span>
|
||
<time class="num">{{ formatClock(item.message.created_at) }}</time>
|
||
</span>
|
||
</div>
|
||
|
||
<div
|
||
v-else
|
||
class="msg"
|
||
:class="[item.kind, { out: item.kind !== 'visitor' }]"
|
||
>
|
||
<span class="avatar" :class="avatarTone(item.message)">
|
||
<span
|
||
v-if="item.kind === 'ai'"
|
||
class="ai-glyph"
|
||
v-html="navIconSvg('sparkles', 14)"
|
||
></span>
|
||
<template v-else>{{ avatarText(item.message) }}</template>
|
||
</span>
|
||
|
||
<div class="msg-body">
|
||
<div class="bubble">
|
||
<!-- Product message -->
|
||
<template v-if="item.message.message_type === 'product' && item.message.attributes?.shopify_output?.products?.length">
|
||
<div class="products-carousel">
|
||
<div v-html="renderMarkdown(item.message.message || '')" class="product-message-text"></div>
|
||
<div class="carousel-items">
|
||
<div
|
||
v-for="product in item.message.attributes.shopify_output.products"
|
||
:key="product.id"
|
||
class="product-card-compact"
|
||
>
|
||
<div class="product-image-compact" v-if="product.image?.src">
|
||
<img :src="product.image.src" :alt="product.title || ''" class="product-thumbnail">
|
||
</div>
|
||
<div class="product-info-compact">
|
||
<div class="product-text-area">
|
||
<div class="product-title-compact">{{ product.title }}</div>
|
||
<div class="product-variant-compact" v-if="product.variant_title">{{ product.variant_title }}</div>
|
||
<div class="product-price-compact">{{ product.price }}</div>
|
||
</div>
|
||
<div class="product-actions-compact">
|
||
<button
|
||
class="view-details-button-compact"
|
||
@click="$emit('view-product', String(product?.id || 'unknown'))"
|
||
>
|
||
查看商品 <span class="external-link-icon" v-html="navIconSvg('arrowUpRight', 12)"></span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- Regular message with markdown -->
|
||
<template v-else>
|
||
<MessageTag
|
||
v-if="item.message.attributes?.interactive_reply"
|
||
icon="fa-solid fa-hand-pointer"
|
||
label="按钮回复"
|
||
/>
|
||
<MessageTag
|
||
v-if="item.message.attributes?.source === 'app'"
|
||
icon="fa-solid fa-plug"
|
||
:label="`由 ${item.message.attributes?.app_name || '应用'} 发送`"
|
||
/>
|
||
<div class="bubble-text" v-html="renderMarkdown(item.message.message || '')"></div>
|
||
<QuickReplyChips :sent="item.message.attributes?.interactive_sent" />
|
||
|
||
<!-- Display attachments if present -->
|
||
<div v-if="item.message.attachments && item.message.attachments.length > 0" class="message-attachments">
|
||
<div
|
||
v-for="attachment in item.message.attachments"
|
||
:key="attachment.id"
|
||
class="attachment-item"
|
||
>
|
||
<!-- Image attachment - render as image -->
|
||
<template v-if="isImageAttachment(attachment.content_type)">
|
||
<div class="attachment-image-container">
|
||
<img
|
||
:src="getImageUrl(attachment.file_url)"
|
||
:alt="attachment.filename"
|
||
class="attachment-image"
|
||
/>
|
||
<div class="attachment-image-info">
|
||
<a
|
||
:href="getDownloadUrl(attachment.file_url)"
|
||
target="_blank"
|
||
class="attachment-link"
|
||
>
|
||
<font-awesome-icon icon="fa-solid fa-download" />
|
||
{{ attachment.filename }}
|
||
<span class="attachment-size">({{ formatFileSize(attachment.file_size) }})</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<!-- Other file types - render as download link -->
|
||
<template v-else>
|
||
<a
|
||
:href="getDownloadUrl(attachment.file_url)"
|
||
target="_blank"
|
||
class="attachment-link"
|
||
>
|
||
<font-awesome-icon icon="fa-solid fa-paperclip" />
|
||
{{ attachment.filename }}
|
||
<span class="attachment-size">({{ formatFileSize(attachment.file_size) }})</span>
|
||
</a>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
|
||
<div class="msg-meta">
|
||
<span
|
||
v-for="(source, sourceIndex) in (item.message.sources || [])"
|
||
:key="`${item.key}-source-${sourceIndex}`"
|
||
class="cite"
|
||
:title="source.type"
|
||
>
|
||
<span class="cite-glyph" v-html="navIconSvg('book', 12)"></span>
|
||
依据 · {{ source.name }}
|
||
</span>
|
||
|
||
<span
|
||
v-if="item.kind !== 'visitor'"
|
||
class="who"
|
||
:class="{ 'who-ai': item.kind === 'ai' }"
|
||
>
|
||
{{ whoLabel(item.message) }}
|
||
</span>
|
||
|
||
<time class="num" :title="item.message.timeAgo">
|
||
{{ formatClock(item.message.created_at) }}
|
||
</time>
|
||
|
||
<MessageStatusTicks
|
||
:status="item.message.channel_status"
|
||
:on-accent="item.kind === 'human'"
|
||
/>
|
||
|
||
<span v-if="item.message.attributes?.delivery_status === 'failed'" class="delivery-failed">
|
||
<span class="fail-glyph" v-html="navIconSvg('x', 12)"></span> 未送达
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<div v-if="formattedMessages.length === 0" class="thread-empty">
|
||
<span class="thread-empty-glyph" v-html="navIconSvg('message', 20)"></span>
|
||
<p>还没有消息</p>
|
||
<span>这段会话开始后，消息会出现在这里。</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- Jira Ticket Modal -->
|
||
<JiraTicketModal
|
||
v-if="showJiraTicketModal"
|
||
:chat-id="currentChat.session_id"
|
||
:initial-summary="ticketSummary"
|
||
@close="showJiraTicketModal = false"
|
||
@ticket-created="handleTicketCreated"
|
||
/>
|
||
|
||
<!-- Native ticket modal (AI-drafted from this conversation) -->
|
||
<TicketCreateModal
|
||
:open="showTicketModal"
|
||
:session-id="currentChat.session_id"
|
||
:session-label="chat.customer.full_name || chat.customer.email || '此会话'"
|
||
@close="showTicketModal = false"
|
||
@created="refreshLinkedTicket"
|
||
/>
|
||
|
||
<!-- Unclaimed: the composer is replaced by the primary "Take over chat"
|
||
action. Covers both an AI-handled chat and one the AI has queued for a
|
||
human, so claiming never requires opening the details panel. -->
|
||
<footer v-if="showTakeoverButton" class="chat-input takeover-footer">
|
||
<p class="takeover-caption">{{ handlerCaption }}</p>
|
||
<div class="takeover-actions">
|
||
<button class="btn btn-primary takeover-button" :disabled="isLoading" @click="handleTakeover">
|
||
<span class="btn-glyph" v-html="navIconSvg('headset', 16)"></span>
|
||
接管会话
|
||
</button>
|
||
<!-- Claiming it yourself was the only way to silence the AI. This queues
|
||
it for whoever is free instead. -->
|
||
<button
|
||
v-if="handledByAI"
|
||
class="btn btn-ghost hand-over-button"
|
||
:disabled="isLoading"
|
||
@click="handleRouteToHuman"
|
||
>
|
||
<span class="btn-glyph" v-html="navIconSvg('transfer', 15)"></span>
|
||
转给团队
|
||
</button>
|
||
</div>
|
||
</footer>
|
||
|
||
<footer class="chat-input" v-else-if="!isChatClosed && !handledByAI">
|
||
<!-- The agent has just been told a reply couldn't be delivered; offer the
|
||
one action that gets the conversation back rather than leaving them
|
||
to retype into a composer that will fail again. -->
|
||
<div v-if="templateCanReopen && canUseTemplates" class="window-closed-notice">
|
||
<div class="window-closed-text">
|
||
<span class="btn-glyph" v-html="navIconSvg('clock', 14)"></span>
|
||
<span>该客户的 24 小时窗口已关闭，发送已审核的模板可重新开启。</span>
|
||
</div>
|
||
<button class="btn btn-primary btn-sm" @click="showTemplatePicker = true">
|
||
发送模板
|
||
</button>
|
||
</div>
|
||
|
||
<div
|
||
class="composer"
|
||
:class="{ disabled: !canSendMessage }"
|
||
@paste="handleChatPaste"
|
||
>
|
||
<div class="composer-row">
|
||
<input
|
||
v-model="newMessage"
|
||
type="text"
|
||
:placeholder="composerPlaceholder"
|
||
class="message-input"
|
||
@keyup.enter="handleSendMessageWithAttachments"
|
||
:disabled="!canSendMessage"
|
||
>
|
||
</div>
|
||
|
||
<div class="composer-bar">
|
||
<FileUpload
|
||
ref="fileUploadRef"
|
||
:max-files="3"
|
||
@filesUploaded="handleFilesUploaded"
|
||
@error="handleFileUploadError"
|
||
/>
|
||
<span class="as-role">
|
||
以 <b>{{ currentUserName }}</b> 身份回复
|
||
</span>
|
||
<span class="hint"><kbd>Enter</kbd> 发送</span>
|
||
<button
|
||
class="btn btn-primary btn-sm send-button"
|
||
@click="handleSendMessageWithAttachments"
|
||
:disabled="(!newMessage.trim() && uploadedFiles.length === 0) || !canSendMessage"
|
||
aria-label="发送"
|
||
>
|
||
发送
|
||
<span class="btn-glyph" v-html="navIconSvg('send', 14)"></span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="!canSendMessage" class="input-message">
|
||
{{ handlerCaption }}
|
||
</div>
|
||
</footer>
|
||
|
||
<footer v-else-if="handledByAI" class="chat-closed-footer">
|
||
<div class="chat-closed-message">
|
||
<span v-html="navIconSvg('lock', 15)"></span>
|
||
此会话正由 AI 客服处理
|
||
</div>
|
||
</footer>
|
||
<footer v-else class="chat-closed-footer">
|
||
<div class="chat-closed-message">
|
||
<span v-html="navIconSvg('lock', 15)"></span>
|
||
此会话已结束
|
||
</div>
|
||
</footer>
|
||
|
||
<WhatsAppTemplatePicker
|
||
v-if="showTemplatePicker && currentChat.channel_account_id"
|
||
:account-id="currentChat.channel_account_id"
|
||
:session-id="currentChat.session_id"
|
||
@close="showTemplatePicker = false"
|
||
@sent="handleTemplateSent"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.chat-layout {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
flex: 1;
|
||
min-height: 0;
|
||
width: 100%;
|
||
background: var(--paper);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* ── Thread header ─────────────────────────────────── */
|
||
.thread-head {
|
||
flex: none;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
padding: 16px 28px;
|
||
border-bottom: 1px solid var(--line);
|
||
background: color-mix(in srgb, var(--surface) 70%, transparent);
|
||
backdrop-filter: blur(8px);
|
||
}
|
||
|
||
.back-btn {
|
||
display: none;
|
||
margin-left: -8px;
|
||
}
|
||
|
||
.back-glyph {
|
||
display: inline-flex;
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
.back-glyph :deep(svg) {
|
||
display: block;
|
||
}
|
||
|
||
.thread-who {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.thread-name {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.thread-name h2 {
|
||
font-family: var(--font-serif);
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.03em;
|
||
color: var(--ink);
|
||
margin: 0;
|
||
min-width: 0;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.thread-name .chip {
|
||
flex: none;
|
||
height: 22px;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.chip-glyph {
|
||
display: inline-flex;
|
||
}
|
||
|
||
.chip-glyph :deep(svg) {
|
||
display: block;
|
||
}
|
||
|
||
.thread-meta {
|
||
margin-top: 3px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 12.5px;
|
||
color: var(--muted);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.thread-meta i {
|
||
width: 3px;
|
||
height: 3px;
|
||
border-radius: 50%;
|
||
background: var(--faint);
|
||
flex: none;
|
||
}
|
||
|
||
.thread-actions {
|
||
margin-left: auto;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
flex: none;
|
||
}
|
||
|
||
.btn-glyph {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.btn-glyph :deep(svg) {
|
||
display: block;
|
||
}
|
||
|
||
.ticket-btn-group {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.ticket-btn-group .btn {
|
||
border-top-right-radius: 0;
|
||
border-bottom-right-radius: 0;
|
||
}
|
||
|
||
.ticket-menu-toggle {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 28px;
|
||
height: 32px;
|
||
padding: 0;
|
||
border: 1px solid var(--line-2);
|
||
border-left: 0;
|
||
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
|
||
background: var(--surface);
|
||
color: var(--text2);
|
||
cursor: pointer;
|
||
transition:
|
||
border-color var(--t-fast),
|
||
color var(--t-fast);
|
||
}
|
||
|
||
.ticket-menu-toggle:hover {
|
||
border-color: var(--line-3);
|
||
color: var(--ink);
|
||
}
|
||
|
||
.ticket-menu {
|
||
position: absolute;
|
||
top: calc(100% + 6px);
|
||
right: 0;
|
||
z-index: 30;
|
||
min-width: 190px;
|
||
padding: 4px;
|
||
background: var(--surface);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius-md);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.ticket-menu-item {
|
||
display: block;
|
||
width: 100%;
|
||
padding: 8px 12px;
|
||
border: 0;
|
||
border-radius: var(--radius-sm);
|
||
background: transparent;
|
||
color: var(--text2);
|
||
font-size: 12.5px;
|
||
text-align: left;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.ticket-menu-item:hover {
|
||
background: var(--surface-2);
|
||
color: var(--ink);
|
||
}
|
||
|
||
/* ── Stream ────────────────────────────────────────── */
|
||
.chat-content {
|
||
flex: 1 1 auto;
|
||
min-height: 0;
|
||
position: relative;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.messages {
|
||
position: absolute;
|
||
inset: 0;
|
||
overflow-y: auto;
|
||
padding: 28px 28px 12px;
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
.stream-inner {
|
||
max-width: 780px;
|
||
min-height: 100%;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 18px;
|
||
}
|
||
|
||
.day {
|
||
align-self: center;
|
||
font-family: var(--font-serif);
|
||
font-size: 12.5px;
|
||
letter-spacing: 0.3em;
|
||
color: var(--muted);
|
||
padding: 4px 0 6px;
|
||
}
|
||
|
||
.msg {
|
||
display: flex;
|
||
gap: 12px;
|
||
max-width: 80%;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.msg.out {
|
||
align-self: flex-end;
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
.msg .avatar {
|
||
--a: 30px;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.msg-body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 7px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.msg.out .msg-body {
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.bubble {
|
||
padding: 12px 16px;
|
||
border-radius: 16px;
|
||
font-size: 14.5px;
|
||
line-height: 1.8;
|
||
word-break: break-word;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.msg.visitor .bubble {
|
||
background: var(--surface);
|
||
border: 1px solid var(--line);
|
||
border-top-left-radius: 5px;
|
||
box-shadow: var(--shadow-sm);
|
||
color: var(--ink-2);
|
||
}
|
||
|
||
.msg.ai .bubble {
|
||
background: var(--bubble-ai);
|
||
border: 1px solid var(--celadon-line);
|
||
border-top-right-radius: 5px;
|
||
color: var(--ink-2);
|
||
}
|
||
|
||
.msg.human .bubble {
|
||
background: var(--bubble-human);
|
||
color: var(--bubble-human-fg);
|
||
border-top-right-radius: 5px;
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.msg-meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
font-size: 11.5px;
|
||
color: var(--muted);
|
||
padding: 0 2px;
|
||
}
|
||
|
||
.msg.out .msg-meta {
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.msg-meta .who {
|
||
color: var(--ink-2);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.msg.ai .msg-meta .who {
|
||
color: var(--celadon);
|
||
}
|
||
|
||
.msg-meta time {
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
/* Knowledge-base citation — 青瓷 dashed capsule */
|
||
.cite {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
height: 24px;
|
||
padding: 0 10px 0 8px;
|
||
border-radius: var(--radius-pill);
|
||
border: 1px dashed var(--celadon-line);
|
||
background: var(--surface);
|
||
color: var(--celadon);
|
||
font-size: 11.5px;
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
transition: border-style var(--t-fast);
|
||
}
|
||
|
||
.cite:hover {
|
||
border-style: solid;
|
||
}
|
||
|
||
.cite-glyph {
|
||
display: inline-flex;
|
||
flex: none;
|
||
}
|
||
|
||
.cite-glyph :deep(svg) {
|
||
display: block;
|
||
}
|
||
|
||
/* System events — rule, pill, timestamp */
|
||
.event {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
font-size: 12.5px;
|
||
color: var(--muted);
|
||
margin: 6px 0;
|
||
}
|
||
|
||
.event::before,
|
||
.event::after {
|
||
content: '';
|
||
flex: 1;
|
||
height: 1px;
|
||
background: linear-gradient(90deg, transparent, var(--line-2));
|
||
}
|
||
|
||
.event::after {
|
||
background: linear-gradient(270deg, transparent, var(--line-2));
|
||
}
|
||
|
||
.event-pill {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 5px 14px;
|
||
border-radius: var(--radius-pill);
|
||
border: 1px solid var(--line);
|
||
background: var(--surface);
|
||
max-width: 78%;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.event-glyph {
|
||
display: inline-flex;
|
||
flex: none;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.event-glyph :deep(svg) {
|
||
display: block;
|
||
}
|
||
|
||
.event-text {
|
||
min-width: 0;
|
||
}
|
||
|
||
.event time {
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
color: var(--muted);
|
||
flex: none;
|
||
}
|
||
|
||
.event.warn .event-pill {
|
||
color: var(--vermilion);
|
||
border-color: var(--vermilion-line);
|
||
background: color-mix(in srgb, var(--vermilion) 5%, var(--surface));
|
||
}
|
||
|
||
.event.warn .event-glyph {
|
||
color: var(--vermilion);
|
||
}
|
||
|
||
/* A hand-off is notable, not alarming: ink rather than 朱砂. */
|
||
.event.take .event-pill {
|
||
color: var(--ink);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.event.take .event-glyph {
|
||
color: var(--ink);
|
||
}
|
||
|
||
.thread-empty {
|
||
margin: auto;
|
||
padding: 48px 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 5px;
|
||
text-align: center;
|
||
}
|
||
|
||
.thread-empty-glyph {
|
||
width: 46px;
|
||
height: 46px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 6px;
|
||
border-radius: 50%;
|
||
border: 1px solid var(--line);
|
||
background: var(--surface);
|
||
color: var(--muted);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.thread-empty p {
|
||
font-family: var(--font-serif);
|
||
font-size: 17px;
|
||
font-weight: 600;
|
||
color: var(--ink);
|
||
}
|
||
|
||
.thread-empty span:last-child {
|
||
font-size: 12.5px;
|
||
color: var(--muted);
|
||
}
|
||
|
||
/* Payload inside a bubble */
|
||
.bubble-text :deep(p) {
|
||
margin: 0;
|
||
}
|
||
|
||
.bubble-text :deep(p + p),
|
||
.bubble-text :deep(ul + p),
|
||
.bubble-text :deep(p + ul) {
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.bubble-text :deep(ul),
|
||
.bubble-text :deep(ol) {
|
||
margin: 4px 0 0;
|
||
padding-left: 1.2em;
|
||
}
|
||
|
||
.bubble-text :deep(a) {
|
||
color: var(--indigo);
|
||
text-decoration: underline;
|
||
text-underline-offset: 2px;
|
||
}
|
||
|
||
.msg.human .bubble-text :deep(a) {
|
||
color: var(--bubble-human-fg);
|
||
}
|
||
|
||
.msg.human .bubble-text :deep(a:hover) {
|
||
opacity: 0.75;
|
||
}
|
||
|
||
.bubble-text :deep(img) {
|
||
max-width: 100%;
|
||
border-radius: var(--radius-sm);
|
||
margin: 8px 0;
|
||
}
|
||
|
||
.bubble-text :deep(code) {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.92em;
|
||
padding: 1px 5px;
|
||
border-radius: 5px;
|
||
background: var(--surface-sunk);
|
||
}
|
||
|
||
.msg.human .message-tag {
|
||
background: color-mix(in srgb, var(--bubble-human-fg) 10%, transparent);
|
||
border-color: color-mix(in srgb, var(--bubble-human-fg) 22%, transparent);
|
||
color: color-mix(in srgb, var(--bubble-human-fg) 78%, transparent);
|
||
}
|
||
|
||
/* ── Attachments ───────────────────────────────────── */
|
||
.message-attachments {
|
||
margin-top: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
.attachment-item {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.attachment-link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 7px;
|
||
padding: 6px 10px;
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius-sm);
|
||
background: var(--surface-2);
|
||
color: var(--ink-2);
|
||
font-size: 12.5px;
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
text-decoration: none;
|
||
transition: border-color var(--t-fast);
|
||
}
|
||
|
||
.attachment-link:hover {
|
||
border-color: var(--line-3);
|
||
}
|
||
|
||
.attachment-link :deep(svg) {
|
||
width: 13px;
|
||
height: 13px;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.attachment-size {
|
||
color: var(--muted);
|
||
font-size: 11px;
|
||
margin-left: 2px;
|
||
}
|
||
|
||
.msg.human .attachment-link {
|
||
background: color-mix(in srgb, var(--bubble-human-fg) 12%, transparent);
|
||
border-color: color-mix(in srgb, var(--bubble-human-fg) 22%, transparent);
|
||
color: var(--bubble-human-fg);
|
||
}
|
||
|
||
.msg.human .attachment-link :deep(svg),
|
||
.msg.human .attachment-size {
|
||
color: color-mix(in srgb, var(--bubble-human-fg) 72%, transparent);
|
||
}
|
||
|
||
.attachment-image-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
max-width: 350px;
|
||
}
|
||
|
||
.attachment-image {
|
||
width: 100%;
|
||
max-height: 400px;
|
||
border-radius: var(--radius-sm);
|
||
object-fit: contain;
|
||
border: 1px solid var(--line);
|
||
}
|
||
|
||
.attachment-image-info {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.attachment-image-info .attachment-link {
|
||
margin: 0;
|
||
padding: 4px 8px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* ── Product carousel ──────────────────────────────── */
|
||
.products-carousel {
|
||
margin: 2px 0;
|
||
width: 100%;
|
||
padding: 6px;
|
||
background: var(--surface-2);
|
||
border-radius: var(--radius-card);
|
||
}
|
||
|
||
.product-message-text {
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.carousel-items {
|
||
display: flex;
|
||
flex-direction: row;
|
||
gap: 8px;
|
||
margin-top: 2px;
|
||
overflow-x: auto;
|
||
padding: 2px 2px 10px;
|
||
scroll-snap-type: x mandatory;
|
||
-webkit-overflow-scrolling: touch;
|
||
scrollbar-width: thin;
|
||
}
|
||
|
||
.product-card-compact {
|
||
width: 180px;
|
||
flex: none;
|
||
overflow: hidden;
|
||
background: var(--surface);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius-card);
|
||
box-shadow: var(--shadow-sm);
|
||
transition: box-shadow var(--t-fast), transform var(--t-fast);
|
||
}
|
||
|
||
.product-card-compact:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.product-image-compact {
|
||
width: 100%;
|
||
aspect-ratio: 1;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.product-thumbnail {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
transition: transform var(--t-med);
|
||
}
|
||
|
||
.product-thumbnail:hover {
|
||
transform: scale(1.04);
|
||
}
|
||
|
||
.product-info-compact {
|
||
padding: 9px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
}
|
||
|
||
.product-title-compact {
|
||
font-size: 12.5px;
|
||
font-weight: 500;
|
||
line-height: 1.4;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
min-height: 2.8em;
|
||
color: var(--ink);
|
||
}
|
||
|
||
.product-variant-compact {
|
||
font-size: 11px;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.product-price-compact {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: var(--ink);
|
||
}
|
||
|
||
.view-details-button-compact {
|
||
width: 100%;
|
||
padding: 6px 10px;
|
||
border: 1px solid var(--line-2);
|
||
border-radius: var(--radius-pill);
|
||
background: var(--surface-2);
|
||
color: var(--ink-2);
|
||
font-size: 11.5px;
|
||
font-weight: 500;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 4px;
|
||
cursor: pointer;
|
||
transition: border-color var(--t-fast), color var(--t-fast);
|
||
}
|
||
|
||
.view-details-button-compact:hover {
|
||
border-color: var(--line-3);
|
||
color: var(--ink);
|
||
}
|
||
|
||
.external-link-icon {
|
||
display: inline-flex;
|
||
line-height: 1;
|
||
}
|
||
|
||
.external-link-icon :deep(svg) {
|
||
display: block;
|
||
}
|
||
|
||
/* ── Composer ──────────────────────────────────────── */
|
||
.chat-input {
|
||
flex: 0 0 auto;
|
||
width: 100%;
|
||
padding: 10px 28px 22px;
|
||
}
|
||
|
||
.composer {
|
||
max-width: 780px;
|
||
margin: 0 auto;
|
||
background: var(--surface);
|
||
border: 1px solid var(--line-2);
|
||
border-radius: var(--radius-xl);
|
||
box-shadow: var(--shadow-sm);
|
||
transition:
|
||
border-color var(--t-fast),
|
||
box-shadow var(--t-fast);
|
||
}
|
||
|
||
.composer:focus-within {
|
||
border-color: var(--line-3);
|
||
box-shadow: var(--shadow-sm), var(--ring);
|
||
}
|
||
|
||
.composer.disabled {
|
||
opacity: 0.72;
|
||
background: var(--surface-2);
|
||
}
|
||
|
||
.composer-row {
|
||
padding: 14px 18px 2px;
|
||
}
|
||
|
||
.message-input {
|
||
width: 100%;
|
||
padding: 2px 0;
|
||
border: 0;
|
||
outline: none;
|
||
background: none;
|
||
color: var(--ink);
|
||
font-family: var(--font-sans);
|
||
font-size: 14.5px;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.message-input::placeholder {
|
||
color: var(--faint);
|
||
}
|
||
|
||
.message-input:disabled {
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.composer-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
padding: 4px 10px 10px 12px;
|
||
}
|
||
|
||
.as-role {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
font-size: 12px;
|
||
color: var(--muted);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.as-role b {
|
||
color: var(--ink-2);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.composer-bar .hint {
|
||
margin-left: auto;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
font-size: 11.5px;
|
||
color: var(--muted);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.composer-bar .send-button {
|
||
margin-left: 6px;
|
||
}
|
||
|
||
/* The attachment control is shared with other surfaces; compact it to a
|
||
toolbar glyph and let previews ride inline instead of stacking a panel. */
|
||
.composer-bar :deep(.file-upload-container) {
|
||
display: contents;
|
||
}
|
||
|
||
.composer-bar :deep(.upload-button) {
|
||
width: 32px;
|
||
height: 32px;
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius-sm);
|
||
background: transparent;
|
||
color: var(--text2);
|
||
}
|
||
|
||
.composer-bar :deep(.upload-button:hover:not(:disabled)) {
|
||
background: var(--surface-2);
|
||
border-color: var(--line-2);
|
||
color: var(--ink);
|
||
}
|
||
|
||
.composer-bar :deep(.upload-button svg) {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
|
||
.composer-bar :deep(.file-previews) {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
gap: 6px;
|
||
max-width: 44%;
|
||
overflow-x: auto;
|
||
margin: 0;
|
||
padding: 3px 6px;
|
||
background: var(--surface-2);
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius-sm);
|
||
}
|
||
|
||
.composer-bar :deep(.file-preview) {
|
||
gap: 6px;
|
||
padding: 2px 4px;
|
||
border: 0;
|
||
border-radius: 5px;
|
||
background: transparent;
|
||
box-shadow: none;
|
||
transform: none;
|
||
}
|
||
|
||
.composer-bar :deep(.file-preview:hover) {
|
||
transform: none;
|
||
box-shadow: none;
|
||
border-color: transparent;
|
||
}
|
||
|
||
.composer-bar :deep(.file-preview::before) {
|
||
display: none;
|
||
}
|
||
|
||
.composer-bar :deep(.file-preview-content) {
|
||
width: 22px;
|
||
height: 22px;
|
||
border-radius: 5px;
|
||
background: var(--surface-sunk);
|
||
box-shadow: none;
|
||
}
|
||
|
||
.composer-bar :deep(.file-preview-content::after) {
|
||
display: none;
|
||
}
|
||
|
||
.composer-bar :deep(.file-preview-image) {
|
||
width: 22px;
|
||
height: 22px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.composer-bar :deep(.file-preview-icon svg) {
|
||
width: 13px;
|
||
height: 13px;
|
||
}
|
||
|
||
.composer-bar :deep(.file-preview-icon) {
|
||
color: var(--muted);
|
||
}
|
||
|
||
.composer-bar :deep(.file-preview-name) {
|
||
max-width: 120px;
|
||
color: var(--ink-2);
|
||
font-size: 11.5px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.composer-bar :deep(.file-preview-size) {
|
||
color: var(--muted);
|
||
font-size: 10.5px;
|
||
}
|
||
|
||
.composer-bar :deep(.file-preview-remove) {
|
||
width: 18px;
|
||
height: 18px;
|
||
min-width: 18px;
|
||
border: 0;
|
||
border-radius: 4px;
|
||
background: transparent;
|
||
color: var(--muted);
|
||
font-size: 13px;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.composer-bar :deep(.file-preview-remove:hover) {
|
||
background: var(--vermilion-soft);
|
||
color: var(--vermilion);
|
||
}
|
||
|
||
.composer-bar :deep(.upload-progress) {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 11.5px;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.window-closed-notice {
|
||
max-width: 780px;
|
||
margin: 0 auto 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
padding: 10px 14px;
|
||
border: 1px solid var(--brass-line);
|
||
border-radius: var(--radius-md);
|
||
background: var(--brass-soft);
|
||
}
|
||
|
||
.window-closed-text {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 12.5px;
|
||
line-height: 1.55;
|
||
color: var(--ink-2);
|
||
}
|
||
|
||
.window-closed-text .btn-glyph {
|
||
color: var(--brass);
|
||
}
|
||
|
||
.input-message {
|
||
max-width: 780px;
|
||
margin: 8px auto 0;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
color: var(--muted);
|
||
}
|
||
|
||
/* ── Takeover / closed footers ─────────────────────── */
|
||
.takeover-footer {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.takeover-caption {
|
||
max-width: 780px;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
font-size: 12.5px;
|
||
color: var(--muted);
|
||
}
|
||
|
||
.takeover-actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
max-width: 780px;
|
||
margin: 0 auto;
|
||
width: 100%;
|
||
}
|
||
|
||
.takeover-button {
|
||
flex: 1;
|
||
height: 44px;
|
||
}
|
||
|
||
.hand-over-button {
|
||
flex: none;
|
||
height: 44px;
|
||
}
|
||
|
||
.chat-closed-footer {
|
||
flex: 0 0 auto;
|
||
padding: 12px 28px 22px;
|
||
width: 100%;
|
||
}
|
||
|
||
.chat-closed-message {
|
||
max-width: 780px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
padding: 13px 18px;
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius-card);
|
||
background: var(--surface);
|
||
color: var(--muted);
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* ── Post-bubble status ────────────────────────────── */
|
||
.delivery-failed {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
font-size: 11px;
|
||
color: var(--vermilion);
|
||
}
|
||
|
||
.fail-glyph {
|
||
display: inline-flex;
|
||
}
|
||
|
||
.fail-glyph :deep(svg) {
|
||
display: block;
|
||
}
|
||
|
||
.ai-glyph {
|
||
display: inline-flex;
|
||
}
|
||
|
||
.ai-glyph :deep(svg) {
|
||
display: block;
|
||
}
|
||
|
||
/* ── Responsive ────────────────────────────────────── */
|
||
@media (max-width: 1440px) {
|
||
.thread-head {
|
||
padding: 12px 18px;
|
||
gap: 10px;
|
||
}
|
||
|
||
.thread-meta {
|
||
display: none;
|
||
}
|
||
|
||
.thread-name h2 {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.messages {
|
||
padding: 22px 18px 10px;
|
||
}
|
||
|
||
.chat-input {
|
||
padding: 8px 18px 16px;
|
||
}
|
||
|
||
.chat-closed-footer {
|
||
padding: 10px 18px 16px;
|
||
}
|
||
|
||
/* The three-column desktop gives the thread less width than the viewport,
|
||
so the action labels yield to the customer name before the thread does. */
|
||
.thread-actions .btn-label {
|
||
display: none;
|
||
}
|
||
|
||
.thread-actions .btn {
|
||
width: 32px;
|
||
padding: 0;
|
||
}
|
||
}
|
||
|
||
/* Mobile: full-screen chat pane */
|
||
@media (max-width: 768px) {
|
||
.back-btn {
|
||
display: inline-flex;
|
||
}
|
||
|
||
.thread-head {
|
||
padding: 8px 8px 8px 6px;
|
||
gap: 2px;
|
||
}
|
||
|
||
.thread-name h2 {
|
||
font-size: 16px;
|
||
max-width: 46vw;
|
||
}
|
||
|
||
.thread-name {
|
||
gap: 6px;
|
||
flex-wrap: wrap;
|
||
row-gap: 3px;
|
||
}
|
||
|
||
.thread-actions {
|
||
gap: 0;
|
||
}
|
||
|
||
.thread-actions .btn,
|
||
.thread-actions .icon-btn.sm,
|
||
.back-btn {
|
||
width: 38px;
|
||
height: 38px;
|
||
}
|
||
|
||
.thread-actions .btn {
|
||
border-color: transparent;
|
||
background: transparent;
|
||
}
|
||
|
||
.messages {
|
||
padding: 18px 12px 8px;
|
||
}
|
||
|
||
.stream-inner {
|
||
gap: 14px;
|
||
}
|
||
|
||
.msg {
|
||
max-width: 88%;
|
||
gap: 8px;
|
||
}
|
||
|
||
.msg .avatar {
|
||
--a: 26px;
|
||
}
|
||
|
||
.bubble {
|
||
padding: 10px 13px;
|
||
font-size: 14px;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.day {
|
||
font-size: 11.5px;
|
||
letter-spacing: 0.24em;
|
||
}
|
||
|
||
.event {
|
||
font-size: 11.5px;
|
||
gap: 8px;
|
||
}
|
||
|
||
.event-pill {
|
||
max-width: 88%;
|
||
padding: 4px 10px;
|
||
gap: 6px;
|
||
}
|
||
|
||
.composer-bar .hint {
|
||
display: none;
|
||
}
|
||
|
||
.composer-bar {
|
||
padding: 2px 8px 8px 10px;
|
||
}
|
||
|
||
.composer-row {
|
||
padding: 12px 14px 0;
|
||
}
|
||
|
||
.as-role {
|
||
font-size: 11.5px;
|
||
}
|
||
|
||
.chat-input {
|
||
padding: 8px 12px calc(12px + var(--safe-bottom) + var(--kb-offset, 0px));
|
||
}
|
||
|
||
.chat-closed-footer {
|
||
padding: 8px 12px calc(12px + var(--safe-bottom));
|
||
}
|
||
|
||
.window-closed-notice {
|
||
border-radius: var(--radius-sm);
|
||
}
|
||
|
||
.takeover-button,
|
||
.hand-over-button {
|
||
height: 46px;
|
||
}
|
||
|
||
.composer-bar :deep(.file-previews) {
|
||
order: -1;
|
||
max-width: 100%;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.thread-name .chip {
|
||
display: none;
|
||
}
|
||
|
||
.thread-name h2 {
|
||
max-width: 52vw;
|
||
}
|
||
}
|
||
</style>
|