Web and AI chat
This commit is contained in:
augmentedpotato
770
web/app/chat/page.js
Normal file
770
web/app/chat/page.js
Normal file
@@ -0,0 +1,770 @@
|
||||
"use client";
|
||||
|
||||
import dynamic from "next/dynamic";
|
||||
import { useState, useEffect, useRef, useCallback } from "react";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
|
||||
const API_BASE = "";
|
||||
const POLL_INTERVAL = 2500;
|
||||
|
||||
function ChatPage() {
|
||||
const { user, token, loading: authLoading } = useAuth();
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const conversationIdParam = searchParams.get("id");
|
||||
|
||||
const [conversation, setConversation] = useState(null);
|
||||
const [messages, setMessages] = useState([]);
|
||||
const [input, setInput] = useState("");
|
||||
const [sending, setSending] = useState(false);
|
||||
const [loadingConv, setLoadingConv] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
const messagesEndRef = useRef(null);
|
||||
const inputRef = useRef(null);
|
||||
const pollRef = useRef(null);
|
||||
const lastMessageIdRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!authLoading && !user) {
|
||||
router.push("/login?next=" + encodeURIComponent("/chat" + (conversationIdParam ? `?id=${conversationIdParam}` : "")));
|
||||
}
|
||||
}, [authLoading, user, router, conversationIdParam]);
|
||||
|
||||
useEffect(() => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
|
||||
}, [messages]);
|
||||
|
||||
const fetchMessages = useCallback(async (convId) => {
|
||||
if (!token || !convId) return;
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/api/v1/chat/conversations/${convId}/messages`, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
});
|
||||
|
||||
if (!res.ok) return;
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
if (Array.isArray(data)) {
|
||||
setMessages(data);
|
||||
|
||||
if (data.length > 0) {
|
||||
lastMessageIdRef.current = data[data.length - 1].id;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
catch {
|
||||
//Silent fail
|
||||
}
|
||||
}, [token]);
|
||||
|
||||
const fetchConversation = useCallback(async (convId) => {
|
||||
if (!token || !convId) return null;
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/api/v1/chat/conversations/${convId}`, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
});
|
||||
|
||||
if (!res.ok) return null;
|
||||
const data = await res.json();
|
||||
setConversation(data);
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
|
||||
catch {
|
||||
|
||||
return null;
|
||||
}
|
||||
}, [token]);
|
||||
|
||||
const startPolling = useCallback((convId) => {
|
||||
if (pollRef.current) clearInterval(pollRef.current);
|
||||
pollRef.current = setInterval(async () => {
|
||||
if (!token || !convId) return;
|
||||
try {
|
||||
const [msgsRes, convRes] = await Promise.all([
|
||||
fetch(`${API_BASE}/api/v1/chat/conversations/${convId}/messages`, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
}),
|
||||
fetch(`${API_BASE}/api/v1/chat/conversations/${convId}`, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
}),
|
||||
]);
|
||||
if (msgsRes.ok) {
|
||||
const data = await msgsRes.json();
|
||||
if (Array.isArray(data)) {
|
||||
const lastId = data.length > 0 ? data[data.length - 1].id : null;
|
||||
if (lastId !== lastMessageIdRef.current) {
|
||||
lastMessageIdRef.current = lastId;
|
||||
setMessages(data);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (convRes.ok) {
|
||||
const convData = await convRes.json();
|
||||
setConversation(convData);
|
||||
}
|
||||
}
|
||||
|
||||
catch {
|
||||
//Silent
|
||||
}
|
||||
}, POLL_INTERVAL);
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!token || authLoading) return;
|
||||
|
||||
async function init() {
|
||||
setLoadingConv(true);
|
||||
setError(null);
|
||||
|
||||
let convId = conversationIdParam ? Number(conversationIdParam) : null;
|
||||
|
||||
if (!convId) {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/api/v1/chat/conversations`, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
});
|
||||
if (res.ok) {
|
||||
const list = await res.json();
|
||||
const open = Array.isArray(list)
|
||||
? list.find((c) => c.status === "OPEN")
|
||||
: null;
|
||||
if (open) convId = open.id;
|
||||
}
|
||||
} catch {
|
||||
//
|
||||
}
|
||||
}
|
||||
|
||||
if (!convId) {
|
||||
setLoadingConv(false);
|
||||
setConversation(null);
|
||||
return;
|
||||
}
|
||||
|
||||
await fetchConversation(convId);
|
||||
await fetchMessages(convId);
|
||||
setLoadingConv(false);
|
||||
startPolling(convId);
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
return () => {
|
||||
if (pollRef.current) clearInterval(pollRef.current);
|
||||
};
|
||||
}, [token, authLoading, conversationIdParam, fetchConversation, fetchMessages, startPolling]);
|
||||
|
||||
async function handleSend(e) {
|
||||
e?.preventDefault();
|
||||
const text = input.trim();
|
||||
if (!text || sending || !conversation) return;
|
||||
|
||||
setInput("");
|
||||
setSending(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/api/v1/chat/conversations/${conversation.id}/messages`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify({ content: text }),
|
||||
});
|
||||
|
||||
if (res.status === 401) {
|
||||
router.push("/login?next=" + encodeURIComponent("/chat"));
|
||||
return;
|
||||
}
|
||||
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => null);
|
||||
setError(data?.message || "Failed to send message.");
|
||||
setInput(text);
|
||||
return;
|
||||
}
|
||||
|
||||
const msg = await res.json();
|
||||
setMessages((prev) => {
|
||||
if (prev.some((m) => m.id === msg.id)) return prev;
|
||||
return [...prev, msg];
|
||||
});
|
||||
lastMessageIdRef.current = msg.id;
|
||||
} catch {
|
||||
setError("Network error. Please try again.");
|
||||
setInput(text);
|
||||
} finally {
|
||||
setSending(false);
|
||||
inputRef.current?.focus();
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeyDown(e) {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleSend();
|
||||
}
|
||||
}
|
||||
|
||||
async function handleNewConversation() {
|
||||
setError(null);
|
||||
setLoadingConv(true);
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/api/v1/chat/conversations`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify({ message: "Hi, I'd like to speak with a support agent." }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => null);
|
||||
setError(data?.message || "Failed to start a conversation.");
|
||||
setLoadingConv(false);
|
||||
return;
|
||||
}
|
||||
const conv = await res.json();
|
||||
|
||||
// Mark as human-requested
|
||||
await fetch(`${API_BASE}/api/v1/chat/conversations/${conv.id}/request-human`, {
|
||||
method: "POST",
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
});
|
||||
|
||||
setConversation(conv);
|
||||
await fetchMessages(conv.id);
|
||||
setLoadingConv(false);
|
||||
startPolling(conv.id);
|
||||
router.replace(`/chat?id=${conv.id}`, { scroll: false });
|
||||
} catch {
|
||||
setError("Network error. Please try again.");
|
||||
setLoadingConv(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (authLoading || loadingConv) {
|
||||
return (
|
||||
<main style={s.page}>
|
||||
<p style={s.loading}>Loading...</p>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
if (!user) return null;
|
||||
|
||||
const isHuman = conversation?.mode === "HUMAN";
|
||||
const hasStaff = !!conversation?.staffId;
|
||||
const isClosed = conversation?.status === "CLOSED";
|
||||
|
||||
const staffStatusLabel = isClosed
|
||||
? "Conversation closed"
|
||||
: hasStaff
|
||||
? "Support agent connected"
|
||||
: isHuman
|
||||
? "Waiting for a support agent..."
|
||||
: "Support";
|
||||
|
||||
const staffStatusColor = isClosed ? "#999" : hasStaff ? "#4CAF50" : "#ff8c00";
|
||||
|
||||
return (
|
||||
<main style={s.page}>
|
||||
<section style={s.hero}>
|
||||
<h1 style={s.heroTitle}>Live Support Chat</h1>
|
||||
<p style={s.heroSubtitle}>Chat with our support team in real time</p>
|
||||
<div style={s.titleDecoration} />
|
||||
</section>
|
||||
|
||||
<section style={s.chatSection}>
|
||||
{!conversation ? (
|
||||
<div style={s.noConvCard}>
|
||||
<div style={s.noConvIcon}>💬</div>
|
||||
<h2 style={s.noConvTitle}>No active conversation</h2>
|
||||
<p style={s.noConvText}>Start a new conversation to chat with our support team.</p>
|
||||
{error && <div style={s.errorInline}>{error}</div>}
|
||||
<button style={s.startBtn} onClick={handleNewConversation}>
|
||||
Start a Conversation
|
||||
</button>
|
||||
<button style={s.backBtn} onClick={() => router.push("/ai-chat")}>
|
||||
Back to AI Assistant
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div style={s.chatCard}>
|
||||
<div style={s.chatHeader}>
|
||||
<div style={s.chatHeaderLeft}>
|
||||
<div style={s.agentAvatar}>👤</div>
|
||||
<div>
|
||||
<div style={s.chatHeaderTitle}>
|
||||
{hasStaff ? "Support Agent" : "Leon's Pet Store Support"}
|
||||
</div>
|
||||
<div style={{ ...s.chatHeaderStatus, color: staffStatusColor }}>
|
||||
<span style={{ ...s.statusDot, background: staffStatusColor }} />
|
||||
{staffStatusLabel}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
style={s.aiBtn}
|
||||
onClick={() => router.push("/ai-chat")}
|
||||
title="Back to AI Assistant"
|
||||
>
|
||||
AI Assistant
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{!hasStaff && !isClosed && (
|
||||
<div style={s.waitingBanner}>
|
||||
<span style={s.waitingSpinner} />
|
||||
A support agent will be with you shortly. You can send messages while you wait.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={s.messagesArea}>
|
||||
{messages.length === 0 && (
|
||||
<div style={s.emptyState}>
|
||||
<p style={s.emptyText}>
|
||||
Your conversation has started. A support agent will join soon.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{messages.map((msg) => {
|
||||
const isOwn = msg.senderId === user.id;
|
||||
return (
|
||||
<div
|
||||
key={msg.id}
|
||||
style={{
|
||||
...s.messageRow,
|
||||
...(isOwn ? s.messageRowUser : s.messageRowAgent),
|
||||
}}
|
||||
>
|
||||
{!isOwn && (
|
||||
<div style={s.agentAvatarSmall}>👤</div>
|
||||
)}
|
||||
<div
|
||||
style={{
|
||||
...s.messageBubble,
|
||||
...(isOwn ? s.bubbleUser : s.bubbleAgent),
|
||||
}}
|
||||
>
|
||||
{msg.content && msg.content.split("\n").map((line, i, arr) => (
|
||||
<span key={i}>
|
||||
{line}
|
||||
{i < arr.length - 1 && <br />}
|
||||
</span>
|
||||
))}
|
||||
{msg.attachmentUrl && (
|
||||
<div style={s.attachment}>
|
||||
<a
|
||||
href={msg.attachmentUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style={s.attachmentLink}
|
||||
>
|
||||
📎 {msg.attachmentName || "Attachment"}
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
<div style={{ ...s.timestamp, ...(isOwn ? s.timestampUser : {}) }}>
|
||||
{msg.timestamp ? new Date(msg.timestamp).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : ""}
|
||||
</div>
|
||||
</div>
|
||||
{isOwn && (
|
||||
<div style={s.userAvatarSmall}>
|
||||
{user.fullName ? user.fullName.charAt(0).toUpperCase() : "U"}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div style={s.errorBar}>
|
||||
{error}
|
||||
<button style={s.errorClose} onClick={() => setError(null)}>✕</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isClosed ? (
|
||||
<div style={s.closedBanner}>
|
||||
This conversation has been closed.
|
||||
<button style={s.newConvBtn} onClick={handleNewConversation}>
|
||||
Start New Conversation
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<form style={s.inputArea} onSubmit={handleSend}>
|
||||
<textarea
|
||||
ref={inputRef}
|
||||
style={s.textarea}
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
placeholder="Type a message..."
|
||||
rows={1}
|
||||
disabled={sending}
|
||||
maxLength={2000}
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
style={{
|
||||
...s.sendBtn,
|
||||
...((!input.trim() || sending) ? s.sendBtnDisabled : {}),
|
||||
}}
|
||||
disabled={!input.trim() || sending}
|
||||
>
|
||||
{sending ? "..." : "Send"}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
const s = {
|
||||
page: {
|
||||
minHeight: "100vh",
|
||||
background: "#fafaf8",
|
||||
fontFamily: "inherit",
|
||||
},
|
||||
loading: {
|
||||
textAlign: "center",
|
||||
padding: "4rem",
|
||||
color: "#888",
|
||||
fontSize: "1rem",
|
||||
},
|
||||
hero: {
|
||||
background: "linear-gradient(135deg, #333 0%, #555 100%)",
|
||||
padding: "2.5rem 1.5rem 2rem",
|
||||
textAlign: "center",
|
||||
color: "white",
|
||||
},
|
||||
heroTitle: {
|
||||
fontSize: "clamp(1.6rem, 4vw, 2.4rem)",
|
||||
fontWeight: 800,
|
||||
margin: 0,
|
||||
letterSpacing: "-0.5px",
|
||||
},
|
||||
heroSubtitle: {
|
||||
fontSize: "clamp(0.9rem, 2vw, 1.1rem)",
|
||||
marginTop: "0.5rem",
|
||||
opacity: 0.85,
|
||||
},
|
||||
titleDecoration: {
|
||||
width: 60,
|
||||
height: 4,
|
||||
background: "rgba(255,255,255,0.4)",
|
||||
borderRadius: 2,
|
||||
margin: "1rem auto 0",
|
||||
},
|
||||
chatSection: {
|
||||
maxWidth: 800,
|
||||
margin: "0 auto",
|
||||
padding: "1.5rem 1rem 2rem",
|
||||
},
|
||||
noConvCard: {
|
||||
background: "white",
|
||||
borderRadius: 16,
|
||||
boxShadow: "0 4px 24px rgba(0,0,0,0.08)",
|
||||
padding: "3rem 2rem",
|
||||
textAlign: "center",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
gap: "1rem",
|
||||
},
|
||||
noConvIcon: { fontSize: "3rem" },
|
||||
noConvTitle: { fontSize: "1.4rem", fontWeight: 700, color: "#1a1a1a", margin: 0 },
|
||||
noConvText: { color: "#666", fontSize: "0.95rem", maxWidth: 360 },
|
||||
errorInline: {
|
||||
background: "#fff0f0",
|
||||
color: "#c0392b",
|
||||
border: "1px solid #ffd0d0",
|
||||
borderRadius: 8,
|
||||
padding: "0.6rem 1rem",
|
||||
fontSize: "0.875rem",
|
||||
width: "100%",
|
||||
maxWidth: 360,
|
||||
},
|
||||
startBtn: {
|
||||
background: "#333",
|
||||
color: "white",
|
||||
border: "none",
|
||||
borderRadius: 10,
|
||||
padding: "0.7rem 2rem",
|
||||
fontSize: "0.95rem",
|
||||
fontWeight: 600,
|
||||
cursor: "pointer",
|
||||
},
|
||||
backBtn: {
|
||||
background: "none",
|
||||
border: "1.5px solid #ff8c00",
|
||||
color: "#ff8c00",
|
||||
borderRadius: 10,
|
||||
padding: "0.6rem 1.5rem",
|
||||
fontSize: "0.9rem",
|
||||
fontWeight: 600,
|
||||
cursor: "pointer",
|
||||
},
|
||||
chatCard: {
|
||||
background: "white",
|
||||
borderRadius: 16,
|
||||
boxShadow: "0 4px 24px rgba(0,0,0,0.08)",
|
||||
overflow: "hidden",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
height: "calc(100vh - 220px)",
|
||||
minHeight: 450,
|
||||
},
|
||||
chatHeader: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
padding: "1rem 1.25rem",
|
||||
borderBottom: "1px solid #f0f0f0",
|
||||
background: "#fff",
|
||||
flexShrink: 0,
|
||||
},
|
||||
chatHeaderLeft: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "0.75rem",
|
||||
},
|
||||
agentAvatar: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: "50%",
|
||||
background: "linear-gradient(135deg, #444, #666)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
fontSize: "1.2rem",
|
||||
flexShrink: 0,
|
||||
},
|
||||
chatHeaderTitle: {
|
||||
fontWeight: 700,
|
||||
fontSize: "1rem",
|
||||
color: "#1a1a1a",
|
||||
},
|
||||
chatHeaderStatus: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "0.35rem",
|
||||
fontSize: "0.8rem",
|
||||
marginTop: 2,
|
||||
},
|
||||
statusDot: {
|
||||
display: "inline-block",
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: "50%",
|
||||
},
|
||||
aiBtn: {
|
||||
background: "white",
|
||||
border: "2px solid #ff8c00",
|
||||
color: "#ff8c00",
|
||||
borderRadius: 8,
|
||||
padding: "0.45rem 0.9rem",
|
||||
fontSize: "0.82rem",
|
||||
fontWeight: 600,
|
||||
cursor: "pointer",
|
||||
whiteSpace: "nowrap",
|
||||
},
|
||||
waitingBanner: {
|
||||
background: "#fff8f0",
|
||||
borderBottom: "1px solid #ffe0b2",
|
||||
color: "#e65100",
|
||||
padding: "0.6rem 1.25rem",
|
||||
fontSize: "0.83rem",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "0.6rem",
|
||||
flexShrink: 0,
|
||||
},
|
||||
waitingSpinner: {
|
||||
display: "inline-block",
|
||||
width: 12,
|
||||
height: 12,
|
||||
border: "2px solid #ff8c00",
|
||||
borderTopColor: "transparent",
|
||||
borderRadius: "50%",
|
||||
animation: "spin 0.8s linear infinite",
|
||||
flexShrink: 0,
|
||||
},
|
||||
messagesArea: {
|
||||
flex: 1,
|
||||
overflowY: "auto",
|
||||
padding: "1.25rem",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "0.75rem",
|
||||
},
|
||||
emptyState: {
|
||||
flex: 1,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
margin: "auto",
|
||||
},
|
||||
emptyText: {
|
||||
color: "#888",
|
||||
fontSize: "0.9rem",
|
||||
textAlign: "center",
|
||||
},
|
||||
messageRow: {
|
||||
display: "flex",
|
||||
alignItems: "flex-end",
|
||||
gap: "0.5rem",
|
||||
},
|
||||
messageRowUser: { flexDirection: "row-reverse" },
|
||||
messageRowAgent: { flexDirection: "row" },
|
||||
agentAvatarSmall: {
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderRadius: "50%",
|
||||
background: "linear-gradient(135deg, #444, #666)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
fontSize: "0.85rem",
|
||||
flexShrink: 0,
|
||||
},
|
||||
userAvatarSmall: {
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderRadius: "50%",
|
||||
background: "#ff8c00",
|
||||
color: "white",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
fontSize: "0.8rem",
|
||||
fontWeight: 700,
|
||||
flexShrink: 0,
|
||||
},
|
||||
messageBubble: {
|
||||
maxWidth: "72%",
|
||||
padding: "0.65rem 0.9rem",
|
||||
borderRadius: 14,
|
||||
fontSize: "0.92rem",
|
||||
lineHeight: 1.55,
|
||||
wordBreak: "break-word",
|
||||
},
|
||||
bubbleUser: {
|
||||
background: "#ff8c00",
|
||||
color: "white",
|
||||
borderBottomRightRadius: 4,
|
||||
},
|
||||
bubbleAgent: {
|
||||
background: "#f4f4f4",
|
||||
color: "#1a1a1a",
|
||||
borderBottomLeftRadius: 4,
|
||||
},
|
||||
timestamp: {
|
||||
fontSize: "0.7rem",
|
||||
color: "#aaa",
|
||||
marginTop: "0.3rem",
|
||||
textAlign: "left",
|
||||
},
|
||||
timestampUser: { textAlign: "right", color: "rgba(255,255,255,0.7)" },
|
||||
attachment: { marginTop: "0.4rem" },
|
||||
attachmentLink: {
|
||||
color: "inherit",
|
||||
fontSize: "0.85rem",
|
||||
opacity: 0.85,
|
||||
},
|
||||
errorBar: {
|
||||
background: "#fff0f0",
|
||||
borderTop: "1px solid #ffd0d0",
|
||||
color: "#c0392b",
|
||||
padding: "0.65rem 1.25rem",
|
||||
fontSize: "0.875rem",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
flexShrink: 0,
|
||||
},
|
||||
errorClose: {
|
||||
background: "none",
|
||||
border: "none",
|
||||
color: "#c0392b",
|
||||
cursor: "pointer",
|
||||
fontSize: "0.9rem",
|
||||
padding: "0 0.25rem",
|
||||
},
|
||||
closedBanner: {
|
||||
background: "#f5f5f5",
|
||||
borderTop: "1px solid #e0e0e0",
|
||||
color: "#666",
|
||||
padding: "0.85rem 1.25rem",
|
||||
fontSize: "0.875rem",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
flexShrink: 0,
|
||||
},
|
||||
newConvBtn: {
|
||||
background: "#333",
|
||||
color: "white",
|
||||
border: "none",
|
||||
borderRadius: 8,
|
||||
padding: "0.4rem 1rem",
|
||||
fontSize: "0.82rem",
|
||||
fontWeight: 600,
|
||||
cursor: "pointer",
|
||||
},
|
||||
inputArea: {
|
||||
display: "flex",
|
||||
gap: "0.6rem",
|
||||
padding: "0.85rem 1.25rem",
|
||||
borderTop: "1px solid #f0f0f0",
|
||||
background: "#fff",
|
||||
flexShrink: 0,
|
||||
alignItems: "flex-end",
|
||||
},
|
||||
textarea: {
|
||||
flex: 1,
|
||||
border: "1.5px solid #e0e0e0",
|
||||
borderRadius: 10,
|
||||
padding: "0.6rem 0.85rem",
|
||||
fontSize: "0.92rem",
|
||||
resize: "none",
|
||||
outline: "none",
|
||||
fontFamily: "inherit",
|
||||
lineHeight: 1.5,
|
||||
maxHeight: 120,
|
||||
overflowY: "auto",
|
||||
},
|
||||
sendBtn: {
|
||||
background: "#333",
|
||||
color: "white",
|
||||
border: "none",
|
||||
borderRadius: 10,
|
||||
padding: "0.6rem 1.2rem",
|
||||
fontSize: "0.92rem",
|
||||
fontWeight: 600,
|
||||
cursor: "pointer",
|
||||
flexShrink: 0,
|
||||
},
|
||||
sendBtnDisabled: {
|
||||
background: "#aaa",
|
||||
cursor: "not-allowed",
|
||||
},
|
||||
};
|
||||
|
||||
export default dynamic(() => Promise.resolve(ChatPage), { ssr: false });
|
||||
Reference in New Issue
Block a user