Chat Saving

saving chat history

web/components/FloatingChat.js

@@ -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) }}>
+                     <span style={{ ...s.statusBadge, ...s.statusOpen }}>Active</span>
-                      {conv.status}
-                    </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,