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

Replaced emoticons

Browse Source
This commit is contained in:
augmentedpotato
2026-04-19 13:33:52 -06:00
parent 33bb0a3ad7
commit 3c64a859b4
10 changed files with 60 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
web/components/FloatingChat.js
View File

@@ -20,6 +20,7 @@ export default function FloatingChat() {
} = useChatWidget();
const [input, setInput] = useState("");
const [fabHovered, setFabHovered] = useState(false);
const messagesEndRef = useRef(null);
const prevAiLengthRef = useRef(0);
const prevLiveLengthRef = useRef(0);
@@ -65,8 +66,15 @@ const prevLiveLengthRef = useRef(0);
return (
<>
{/* Floating toggle button */}
<button onClick={toggleOpen} style={s.fab} aria-label={isOpen ? "Close chat" : "Open chat"}>
<span style={{ fontSize: "1.4rem", lineHeight: 1 }}>{isOpen ? "✕" : "💬"}</span>
<button onClick={toggleOpen} style={s.fab} aria-label={isOpen ? "Close chat" : "Open chat"} onMouseEnter={() => setFabHovered(true)} onMouseLeave={() => setFabHovered(false)}>
{isOpen ? (
<span style={{ fontSize: "1.4rem", lineHeight: 1 }}>✕</span>
) : (
<span style={{ position: "relative", width: 24, height: 24, display: "inline-block" }}>
<img src="/bootstrap/chat.svg" alt="" style={{ width: 24, height: 24, position: "absolute", inset: 0, filter: "brightness(0) invert(1)", opacity: fabHovered ? 0 : 1, transition: "opacity 0.15s" }} />
<img src="/bootstrap/chat-fill.svg" alt="" style={{ width: 24, height: 24, position: "absolute", inset: 0, filter: "brightness(0) invert(1)", opacity: fabHovered ? 1 : 0, transition: "opacity 0.15s" }} />
</span>
)}
{!isOpen && openConvCount > 0 && <span style={s.fabBadge}>{openConvCount}</span>}
</button>
@@ -77,7 +85,7 @@ const prevLiveLengthRef = useRef(0);
{/* Header */}
<div style={s.header}>
<div style={s.headerLeft}>
<div style={s.headerAvatar}>🐾</div>
<div style={s.headerAvatar}><img src="/bootstrap/person-circle.svg" alt="assistant" style={{ width: "100%", height: "100%", filter: "brightness(0) invert(1)" }} /></div>
<div>
<div style={s.headerTitle}>Leon's Assistant</div>
<div style={s.headerSub}>
@@ -99,7 +107,7 @@ const prevLiveLengthRef = useRef(0);
{/* Guest */}
{!user && (
<div style={s.guestBody}>
<span style={{ fontSize: "2.5rem" }}>🐾</span>
<img src="/bootstrap/person-circle.svg" alt="assistant" style={{ width: "2.5rem", height: "2.5rem", opacity: 0.6 }} />
<p style={{ color: "#555", fontSize: "0.95rem", margin: "0.75rem 0 1.25rem", textAlign: "center" }}>
Log in to chat with our pet assistant!
</p>
@@ -129,7 +137,7 @@ const prevLiveLengthRef = useRef(0);
{!convsLoading && conversations.length === 0 && (
<div style={{ ...s.empty, flex: 1 }}>
<span style={{ fontSize: "2rem" }}>💬</span>
<img src="/bootstrap/chat.svg" alt="chat" style={{ width: 32, height: 32, opacity: 0.5 }} />
<p style={s.emptyText}>No conversations yet.<br />Start a live chat above.</p>
</div>
)}
@@ -223,7 +231,7 @@ const prevLiveLengthRef = useRef(0);
return (
<div key={msg.id} style={{ ...s.row, ...(isUser ? s.rowUser : s.rowOther) }}>
{!isUser && (
<div style={s.otherAvatar}>{msg.senderRole === "BOT" ? "🐾" : "👤"}</div>
<div style={s.otherAvatar}><img src="/bootstrap/person-circle.svg" alt="assistant" style={{ width: "100%", height: "100%" }} /></div>
)}
<div style={{ ...s.bubble, ...(isUser ? s.bubbleUser : s.bubbleOther) }}>
{!isUser && (
@@ -282,7 +290,7 @@ const prevLiveLengthRef = useRef(0);
<div style={s.messages}>
{aiMessages.length === 0 && (
<div style={s.empty}>
<span style={{ fontSize: "2rem" }}>🐾</span>
<img src="/bootstrap/person-circle.svg" alt="assistant" style={{ width: "2rem", height: "2rem", opacity: 0.5 }} />
<p style={s.emptyText}>
Hi{user?.fullName ? `, ${user.fullName.split(" ")[0]}` : ""}!<br />
Ask me anything about pets.
@@ -292,7 +300,7 @@ const prevLiveLengthRef = useRef(0);
{aiMessages.map((msg) => (
<div key={msg.id} style={{ ...s.row, ...(msg.role === "user" ? s.rowUser : s.rowOther) }}>
{msg.role === "assistant" && <div style={s.otherAvatar}>🐾</div>}
{msg.role === "assistant" && <div style={s.otherAvatar}><img src="/bootstrap/person-circle.svg" alt="assistant" style={{ width: "100%", height: "100%" }} /></div>}
<div style={{ ...s.bubble, ...(msg.role === "user" ? s.bubbleUser : s.bubbleOther) }}>
{msg.content.split("\n").map((line, i, arr) => (
<span key={i}>{line}{i < arr.length - 1 && <br />}</span>
@@ -308,7 +316,7 @@ const prevLiveLengthRef = useRef(0);
{aiSending && (
<div style={{ ...s.row, ...s.rowOther }}>
<div style={s.otherAvatar}>🐾</div>
<div style={s.otherAvatar}><img src="/bootstrap/person-circle.svg" alt="assistant" style={{ width: "100%", height: "100%" }} /></div>
<div style={{ ...s.bubble, ...s.bubbleOther, ...s.typingBubble }}>
<span className="fc-dot" />
<span className="fc-dot" style={{ animationDelay: "0.2s" }} />

7
web/components/Navigation.js
View File

@@ -14,8 +14,11 @@ const cartBadgeCls = "absolute -top-1 -right-1.5 bg-[#e53935] text-white rounded
function CartIcon({ itemCount, onClick }) {
return (
<Link href="/cart" className={cartBtnCls} aria-label="Cart" onClick={onClick}>
🛒
<Link href="/cart" className={`${cartBtnCls} group`} aria-label="Cart" onClick={onClick}>
<span className="relative w-6 h-6 inline-block">
<img src="/bootstrap/cart.svg" alt="" className="w-6 h-6 absolute inset-0 transition-opacity duration-150 group-hover:opacity-0" />
<img src="/bootstrap/cart-fill.svg" alt="" className="w-6 h-6 absolute inset-0 transition-opacity duration-150 opacity-0 group-hover:opacity-100" />
</span>
{itemCount > 0 && (
<span className={cartBadgeCls}>{itemCount > 99 ? "99+" : itemCount}</span>
)}