优化访客聊天窗口:展示消息时间并移除装饰蓝条

- 访客/客服气泡下方显示发送时间
- 去掉输入区顶部无用的蓝色渐变条
This commit is contained in:
yml2213
2026-07-15 12:47:33 +08:00
parent cd28796440
commit b26fc58436
+10 -6
View File
@@ -466,7 +466,7 @@ const VisitorChat = ({
{messages.map(msg => (
msg.sender === 'visitor' ? (
<div key={msg.id} className="flex justify-end max-w-[85%] ml-auto">
<div key={msg.id} className="flex flex-col items-end max-w-[85%] ml-auto gap-1">
<div className={`rounded-xl bg-[#2563eb] text-white text-[13px] leading-normal ${msg.type === 'image' ? 'p-1.5' : 'px-4 py-3'}`}>
{msg.type === 'image' ? (
<ChatImage src={msg.content} alt="图片" className="max-w-[180px] max-h-[180px]" />
@@ -474,12 +474,16 @@ const VisitorChat = ({
<p className="m-0 whitespace-pre-wrap break-words">{msg.content}</p>
)}
</div>
{msg.time && (
<span className="text-[11px] text-neutral-400 pr-0.5">{msg.time}</span>
)}
</div>
) : (
<div key={msg.id} className="flex gap-2 max-w-[85%]">
<div className="w-8 h-8 rounded-full bg-neutral-200 flex items-center justify-center shrink-0 mt-0.5">
<CustomerServiceOutlined className="text-xs text-neutral-500" />
</div>
<div className="min-w-0 flex flex-col gap-1">
<div className={`rounded-xl bg-white border border-neutral-200 text-[13px] text-neutral-800 leading-normal ${msg.type === 'image' ? 'p-1.5' : 'px-4 py-3'}`}>
{msg.type === 'image' ? (
<ChatImage src={msg.content} alt="图片" className="max-w-[180px] max-h-[180px]" />
@@ -487,6 +491,10 @@ const VisitorChat = ({
<p className="m-0 whitespace-pre-wrap break-words">{msg.content}</p>
)}
</div>
{msg.time && (
<span className="text-[11px] text-neutral-400 pl-0.5">{msg.time}</span>
)}
</div>
</div>
)
))}
@@ -509,11 +517,7 @@ const VisitorChat = ({
<div ref={chatEndRef} />
</section>
<footer className="shrink-0 relative px-4 py-3 bg-white border-t border-neutral-200">
<div
className="absolute top-0 left-0 right-0 h-[3px] pointer-events-none opacity-40"
style={{ background: 'linear-gradient(90deg, transparent 0%, #2563eb 50%, transparent 100%)' }}
/>
<footer className="shrink-0 px-4 py-3 bg-white border-t border-neutral-200">
{sendError && <div className="mb-2 text-xs text-red-500">{sendError}</div>}
{!agentsOnline && !sessionEnded && (