优化访客聊天窗口:展示消息时间并移除装饰蓝条
- 访客/客服气泡下方显示发送时间 - 去掉输入区顶部无用的蓝色渐变条
This commit is contained in:
@@ -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,17 +474,25 @@ 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={`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]" />
|
||||
) : (
|
||||
<p className="m-0 whitespace-pre-wrap break-words">{msg.content}</p>
|
||||
<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]" />
|
||||
) : (
|
||||
<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 && (
|
||||
|
||||
Reference in New Issue
Block a user