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

Merge pull request #309 from RecentRunner/websitefinal

Browse Source 
merge websitefinal
This commit is contained in:
Harkamal
2026-04-15 12:26:47 -06:00
committed by GitHub
parent 15e08834a0 d723f3e3cc
commit 08cdb941a4
4 changed files with 120 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
web/app/globals.css
View File

@@ -30,7 +30,7 @@ body {
padding: 0.5rem 2rem;
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
min-height: 70px;
/* border-radius: 0px 0px 10px 10px; */
}
@@ -65,17 +65,18 @@ body {
.nav-link {
color: #2f2f2f;
text-decoration: none;
font-size: 1.1rem;
font-weight: 700;
font-size: 1.05rem;
font-weight: 600;
padding: 0.5rem 1rem;
border-radius: 4px;
transition: all 0.3s ease;
border-radius: 6px;
transition: background-color 0.25s ease, color 0.25s ease;
position: relative;
}
/* Alternative Hover Effect - Background */
.nav-link:hover {
background-color: rgba(255, 255, 255, 0.171);
background-color: rgba(255, 255, 255, 0.25);
}

80
web/components/FloatingChat.js
View File

@@ -21,10 +21,20 @@ export default function FloatingChat() {
const [input, setInput] = useState("");
const messagesEndRef = useRef(null);
const prevAiLengthRef = useRef(0);
const prevLiveLengthRef = useRef(0);
useEffect(() => {
if (isOpen) messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
}, [aiMessages, liveMessages, isOpen]);
if (!isOpen) return;
const aiGrew = aiMessages.length > prevAiLengthRef.current;
const liveGrew = liveMessages.length > prevLiveLengthRef.current;
prevAiLengthRef.current = aiMessages.length;
prevLiveLengthRef.current = liveMessages.length;
if (aiGrew || liveGrew) {
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
}
}, [aiMessages, liveMessages, isOpen]);
useEffect(() => {
if (view === "history" && token && isOpen) loadConversations(token);
@@ -130,22 +140,66 @@ export default function FloatingChat() {
</div>
)}
{conversations.map((conv) => (
{/*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 +511,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,

4
web/components/Navigation.js
View File

@@ -52,7 +52,7 @@ export default function DisplayNav() {
<Link href="/appointments" className="nav-link">Appointments</Link>
<Link href="/ai-chat" className="nav-link">Help</Link>
<Link href="/contact" className="nav-link">Contact</Link>
<Link href="/about" className="nav-link">About</Link>
{/*} <Link href="/about" className="nav-link">About</Link> */}
</div>
<div className="nav-auth">
@@ -128,7 +128,7 @@ export default function DisplayNav() {
<Link href="/appointments" className="nav-drawer-link" onClick={closeMenu}>Appointments</Link>
<Link href="/ai-chat" className="nav-drawer-link" onClick={closeMenu}>Help</Link>
<Link href="/contact" className="nav-drawer-link" onClick={closeMenu}>Contact</Link>
<Link href="/about" className="nav-drawer-link" onClick={closeMenu}>About</Link>
{/* <Link href="/about" className="nav-drawer-link" onClick={closeMenu}>About</Link> */}
<div className="nav-drawer-divider" />

56
web/context/ChatWidgetContext.js
View File

@@ -6,13 +6,23 @@ const ChatWidgetContext = createContext(null);
const API_BASE = "";
export function ChatWidgetProvider({ children }) {
const [isOpen, setIsOpen] = useState(false);
const [view, setView] = useState("ai"); // "ai" | "history" | "live"
const [isOpen, setIsOpen] = useState(false);
const [view, setView] = useState("ai"); // "ai" | "history" | "live"
// AI chat
const [aiMessages, setAiMessages] = useState([]);
const [aiSending, setAiSending] = useState(false);
const [aiError, setAiError] = useState(null);
const [aiMessages, setAiMessages] = useState(() => {
try {
const saved = localStorage.getItem("fc_aiMessages");
return saved ? JSON.parse(saved) : [];
} catch { return []; }
});
const [aiSending, setAiSending] = useState(false);
const [aiError, setAiError] = useState(null);
// Persist aiMessages to localStorage
useEffect(() => {
localStorage.setItem("fc_aiMessages", JSON.stringify(aiMessages));
}, [aiMessages]);
// Keep a ref so sendAiMessage stays stable (no stale-closure over messages)
const aiMessagesRef = useRef(aiMessages);
@@ -41,17 +51,18 @@ export function ChatWidgetProvider({ children }) {
}
}, []);
//Live chat
const [conversations, setConversations] = useState([]);
const [convsLoading, setConvsLoading] = useState(false);
const [activeConvId, setActiveConvId] = useState(null);
const [activeConv, setActiveConv] = useState(null);
const [liveMessages, setLiveMessages] = useState([]);
const [liveSending, setLiveSending] = useState(false);
// Live chat
const [conversations, setConversations] = useState([]);
const [convsLoading, setConvsLoading] = useState(false);
const [activeConvId, setActiveConvId] = useState(null);
const [activeConv, setActiveConv] = useState(null);
const [liveMessages, setLiveMessages] = useState([]);
const [liveSending, setLiveSending] = useState(false);
const [switchingToHuman, setSwitchingToHuman] = useState(false);
const pollRef = useRef(null);
const pollRef = useRef(null);
const activeConvIdRef = useRef(null);
const tokenRef = useRef(null); // FIX: store token so polling can restart
const stopPolling = useCallback(() => {
if (pollRef.current) { clearInterval(pollRef.current); pollRef.current = null; }
@@ -87,6 +98,7 @@ export function ChatWidgetProvider({ children }) {
const openLiveConversation = useCallback(async (convId, token) => {
if (!convId || !token) return;
stopPolling();
tokenRef.current = token; // FIX: save token for polling restart
setActiveConvId(convId);
activeConvIdRef.current = convId;
setLiveMessages([]);
@@ -137,12 +149,22 @@ export function ChatWidgetProvider({ children }) {
}
}, [switchingToHuman, openLiveConversation]);
// Stop polling when navigating away from live view or closing widget
useEffect(() => { if (view !== "live") stopPolling(); }, [view, stopPolling]);
useEffect(() => { if (!isOpen) stopPolling(); }, [isOpen, stopPolling]);
// FIX: Single effect that handles both stopping AND restarting polling
useEffect(() => {
if (!isOpen || view !== "live") {
stopPolling();
} else if (isOpen && view === "live" && activeConvIdRef.current && tokenRef.current) {
stopPolling();
fetchLiveMessages(activeConvIdRef.current, tokenRef.current);
pollRef.current = setInterval(
() => fetchLiveMessages(activeConvIdRef.current, tokenRef.current),
2500
);
}
}, [isOpen, view, stopPolling, fetchLiveMessages]);
const toggleOpen = useCallback(() => setIsOpen((o) => !o), []);
const openView = useCallback((v) => setView(v), []);
const openView = useCallback((v) => setView(v), []);
return (
<ChatWidgetContext.Provider value={{