RecentRunner/group-2-threaded-project-petshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Chat Saving

Browse Source 
saving chat history
This commit is contained in:
Nikitha
2026-04-14 22:02:05 -06:00
parent 2282f0da6f
commit f57fe9e233
1 changed files with 60 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
web/components/FloatingChat.js
View File

@@ -130,22 +130,66 @@ export default function FloatingChat() {
</div>
)}
{conversations.map((conv) => (
<button key={conv.id} style={s.convItem} onClick={() => openLiveConversation(conv.id, token)}>
{/*open & active conversations*/}
{conversations.filter(c => c.status === "OPEN" && c.staffId).length > 0 && (
<div style={s.sectionLabel}> Active
</div>
)}
{conversations.filter(c => c.status === "OPEN" && c.staffId).map((conv) => (
<button key={conv.Id} style={s.convItem} onClick={() => openLiveConversation(conv.id, token)}>
<div style={s.convTop}>
<span style={s.convSubject}>{conv.subject || `Conversation #${conv.id}`}</span>
<span style={{ ...s.statusBadge, ...(conv.status === "OPEN" ? s.statusOpen : s.statusClosed) }}>
{conv.status}
</span>
<span style={{ ...s.statusBadge, ...s.statusOpen }}>Active</span>
</div>
<div style={s.convBottom}>
<span style={s.convMode}>{conv.mode === "HUMAN" ? "👤 Live Support" : "🤖 AI Support"}</span>
<span style={s.convMode}>Live Support</span>
<span style={s.convDate}>{conv.createdAt ? new Date(conv.createdAt).toLocaleDateString() : ""}</span>
</div>
</button>
))}
</div>
))}
{/* Unclaimed - waiting for staff */}
{conversations.filter(c => c.status === "OPEN" && !c.staffId).length > 0 && (
<div style={s.sectionLabel}> Waiting </div>
)}
{conversations.filter(c => c.status === "OPEN" && !c.staffId).map((conv) => (
<button key={conv.id} style={s.convItem} onClick={() => openLiveConversation(conv.id, token)}>
<div style={s.convTop}>
<span style={s.convSubject}>{conv.subject || `Conversation #${conv.id}`}</span>
<span style={{ ...s.statusBadge, ...s.statusUnclaimed }}>Waiting</span>
</div>
<div style={s.convBottom}>
<span style={s.convMode}>⏳ Waiting for agent</span>
<span style={s.convDate}>{conv.createdAt ? new Date(conv.createdAt).toLocaleDateString() : ""}</span>
</div>
</button>
))}
{/* Closed convesations*/}
{conversations.filter(c => c.status === "CLOSED").length > 0 && (
<div style={s.sectionLabel}> Closed</div>
)}
{conversations.filter(c => c.status === "CLOSED").map((conv) => (
<button key={conv.id} style={{ ...s.convItem, ...s.convItemClosed }} onClick={() => openLiveConversation(conv.id, token)}>
<div style={s.convTop}>
<span style={{ ...s.convSubject, color: "#aaa" }}>{conv.subject || `Conversation #${conv.id}`}</span>
<span style={{ ...s.statusBadge, ...s.statusClosed }}>Closed</span>
</div>
</button>
))}
</div>
)}
{/* Live chat view */}
{user && view === "live" && (
@@ -457,6 +501,14 @@ const s = {
padding: "0.45rem 0.85rem", borderBottom: "1px solid #f0f0f0",
background: "#fafafa", flexShrink: 0,
},
statusUnclaimed: { background: "#fff8e1", color: "#f57f17" },
sectionLabel: {
fontSize: "0.7rem", fontWeight: 700, color: "#aaa",
padding: "0.4rem 0.85rem 0.2rem", textTransform: "uppercase",
letterSpacing: "0.05em", background: "#fafafa",
},
convItemClosed: { background: "#fafafa", opacity: 0.75 },
closedBanner: {
background: "#f5f5f5", borderTop: "1px solid #e0e0e0", color: "#888",
padding: "0.65rem 0.85rem", fontSize: "0.84rem", textAlign: "center", flexShrink: 0,