change layouts
This commit is contained in:
Bartal Læarsson
+42
-6
@@ -14,11 +14,33 @@ use crate::{
|
||||
const MAX_MESSAGE_CHARS: usize = 1_000;
|
||||
const MAX_NAME_CHARS: usize = 40;
|
||||
|
||||
#[derive(Clone, Copy)]
|
||||
enum MessageView {
|
||||
User,
|
||||
Supporter,
|
||||
}
|
||||
|
||||
fn render_message(msg: &Message) -> String {
|
||||
let (bubble_class, label) = match msg.sender {
|
||||
MessageSender::User => ("msg-user", "You"),
|
||||
MessageSender::Supporter => ("msg-supporter", "Support"),
|
||||
MessageSender::System => ("msg-system", ""),
|
||||
render_message_for(msg, MessageView::User)
|
||||
}
|
||||
|
||||
fn render_supporter_message(msg: &Message) -> String {
|
||||
render_message_for(msg, MessageView::Supporter)
|
||||
}
|
||||
|
||||
fn render_message_for(msg: &Message, view: MessageView) -> String {
|
||||
let bubble_class = match msg.sender {
|
||||
MessageSender::User => "msg-user",
|
||||
MessageSender::Supporter => "msg-supporter",
|
||||
MessageSender::System => "msg-system",
|
||||
};
|
||||
|
||||
let label = match (view, &msg.sender) {
|
||||
(_, MessageSender::System) => "",
|
||||
(MessageView::User, MessageSender::User) => "You",
|
||||
(MessageView::User, MessageSender::Supporter) => "Support",
|
||||
(MessageView::Supporter, MessageSender::User) => "User",
|
||||
(MessageView::Supporter, MessageSender::Supporter) => "You",
|
||||
};
|
||||
|
||||
if msg.sender == MessageSender::System {
|
||||
@@ -83,6 +105,20 @@ pub async fn get_messages(
|
||||
Html(html)
|
||||
}
|
||||
|
||||
/// GET /supporter/messages/:session_id
|
||||
pub async fn get_supporter_messages(
|
||||
Path(session_id): Path<String>,
|
||||
State(state): State<Arc<AppState>>,
|
||||
) -> Html<String> {
|
||||
let Some(session) = state.sessions.get(&session_id) else {
|
||||
return Html(render_system_notice(
|
||||
"Session not found. Chat history may have been cleared.",
|
||||
));
|
||||
};
|
||||
let html: String = session.messages.iter().map(render_supporter_message).collect();
|
||||
Html(html)
|
||||
}
|
||||
|
||||
/// POST /send/:session_id — user sends a message
|
||||
pub async fn send_message(
|
||||
ConnectInfo(addr): ConnectInfo<SocketAddr>,
|
||||
@@ -162,7 +198,7 @@ pub async fn supporter_send_message(
|
||||
content,
|
||||
timestamp: Utc::now(),
|
||||
};
|
||||
let rendered = render_message(&msg);
|
||||
let rendered = render_supporter_message(&msg);
|
||||
session.messages.push(msg);
|
||||
session.status = SessionStatus::Active;
|
||||
|
||||
@@ -212,7 +248,7 @@ pub async fn get_sessions(State(state): State<Arc<AppState>>) -> Html<String> {
|
||||
let escaped_name = html_escape(name);
|
||||
html.push_str(&format!(
|
||||
"<button class=\"session-item\" \
|
||||
hx-get=\"/messages/{id}\" \
|
||||
hx-get=\"/supporter/messages/{id}\" \
|
||||
hx-target=\"#supporter-messages\" \
|
||||
hx-swap=\"innerHTML\" \
|
||||
data-session-id=\"{id}\" \
|
||||
|
||||
@@ -40,6 +40,7 @@ async fn main() {
|
||||
.route("/ws/user/:session_id", get(handlers::ws::user_ws))
|
||||
.route("/ws/supporter/:supporter_id", get(handlers::ws::supporter_ws))
|
||||
.route("/messages/:session_id", get(handlers::chat::get_messages))
|
||||
.route("/supporter/messages/:session_id", get(handlers::chat::get_supporter_messages))
|
||||
.route("/send/:session_id", post(handlers::chat::send_message))
|
||||
.route(
|
||||
"/supporter/send/:session_id",
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
|
||||
<title>Support Chat</title>
|
||||
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
|
||||
<style>
|
||||
|
||||
+219
-94
@@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
|
||||
<title>Support Dashboard</title>
|
||||
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
|
||||
<style>
|
||||
@@ -20,25 +20,32 @@
|
||||
--danger-text: #ffd1d1;
|
||||
--text: #eceff4;
|
||||
--muted: #9aa3b2;
|
||||
--user: #8f9cff;
|
||||
--supporter: #2b303a;
|
||||
--radius: 10px;
|
||||
--own: #8f9cff;
|
||||
--peer: #2b303a;
|
||||
--radius: 12px;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: var(--app-height, 100dvh);
|
||||
background: var(--bg);
|
||||
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
color: var(--text);
|
||||
overflow: hidden;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
button, input { font: inherit; }
|
||||
|
||||
.layout {
|
||||
display: grid;
|
||||
grid-template-columns: 280px minmax(0, 1fr);
|
||||
grid-template-rows: 56px minmax(0, 1fr);
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
grid-template-columns: 320px minmax(0, 1fr);
|
||||
grid-template-rows: 58px minmax(0, 1fr);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: var(--app-height, 100dvh);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
@@ -46,15 +53,32 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0 1.25rem;
|
||||
padding: 0.6rem 1rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.menu-button {
|
||||
display: none;
|
||||
background: var(--surface2);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 0.55rem 0.75rem;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.topbar h1 {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.01em;
|
||||
min-width: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.topbar-timer {
|
||||
@@ -62,20 +86,31 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: auto;
|
||||
font-size: 0.82rem;
|
||||
font-size: 0.86rem;
|
||||
color: var(--danger-text);
|
||||
background: var(--danger-soft);
|
||||
padding: 0.34rem 0.75rem;
|
||||
border-radius: 20px;
|
||||
padding: 0.42rem 0.85rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--danger);
|
||||
font-weight: 800;
|
||||
font-weight: 850;
|
||||
letter-spacing: 0.01em;
|
||||
box-shadow: 0 0 0 1px rgba(217, 61, 61, 0.08), 0 8px 24px rgba(217, 61, 61, 0.08);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.drawer-backdrop {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.58);
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
border-right: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
@@ -85,6 +120,13 @@
|
||||
.sidebar-header {
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
@@ -92,13 +134,26 @@
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.close-sidebar {
|
||||
display: none;
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
border-radius: 10px;
|
||||
padding: 0.5rem 0.7rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#session-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0.5rem;
|
||||
padding: 0.55rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.3rem;
|
||||
gap: 0.35rem;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
#session-list::-webkit-scrollbar,
|
||||
@@ -112,20 +167,20 @@
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius);
|
||||
padding: 0.7rem 0.8rem;
|
||||
padding: 0.8rem;
|
||||
cursor: pointer;
|
||||
color: var(--text);
|
||||
font-size: 0.88rem;
|
||||
font-size: 0.9rem;
|
||||
transition: background 0.15s, border-color 0.15s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.3rem;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.session-item:hover { background: var(--surface2); border-color: var(--border); }
|
||||
.session-item.selected { background: var(--surface2); border-color: var(--accent); }
|
||||
|
||||
.session-name { font-weight: 700; }
|
||||
.session-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
.session-meta {
|
||||
display: flex;
|
||||
@@ -152,40 +207,57 @@
|
||||
|
||||
.no-sessions {
|
||||
padding: 1.5rem 1rem;
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.88rem;
|
||||
color: var(--muted);
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.main-panel {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: stretch;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
background: var(--bg);
|
||||
padding: 1.1rem;
|
||||
}
|
||||
|
||||
.main-header,
|
||||
#supporter-messages,
|
||||
.typing-bubble,
|
||||
#reply-area {
|
||||
width: min(760px, 100%);
|
||||
.chat-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: min(960px, 100%);
|
||||
height: 100%;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 18px 55px rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
|
||||
.main-header {
|
||||
padding: 0.85rem 1rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
min-height: 54px;
|
||||
background: var(--bg);
|
||||
gap: 0.55rem;
|
||||
padding: 0.9rem 1rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
min-height: 52px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.active-copy {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.1rem;
|
||||
}
|
||||
|
||||
#active-session-name {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
font-size: 0.96rem;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -193,7 +265,7 @@
|
||||
}
|
||||
|
||||
#active-session-meta {
|
||||
font-size: 0.78rem;
|
||||
font-size: 0.72rem;
|
||||
color: var(--muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -202,11 +274,12 @@
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
padding: 1rem;
|
||||
padding: 0.9rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
scroll-behavior: smooth;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
@@ -220,31 +293,32 @@
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.msg-wrap { display: flex; }
|
||||
.msg-user-wrap { justify-content: flex-end; }
|
||||
.msg-supporter-wrap { justify-content: flex-start; }
|
||||
.msg-user-wrap { justify-content: flex-start; }
|
||||
.msg-supporter-wrap { justify-content: flex-end; }
|
||||
|
||||
.msg-user, .msg-supporter {
|
||||
max-width: min(72%, 520px);
|
||||
max-width: 78%;
|
||||
padding: 0.58rem 0.85rem;
|
||||
border-radius: 16px;
|
||||
font-size: 0.88rem;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.48;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.msg-user {
|
||||
background: var(--user);
|
||||
color: #111318;
|
||||
border-bottom-right-radius: 4px;
|
||||
background: var(--peer);
|
||||
color: var(--text);
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
|
||||
.msg-supporter {
|
||||
background: var(--supporter);
|
||||
color: var(--text);
|
||||
border-bottom-left-radius: 4px;
|
||||
background: var(--own);
|
||||
color: #111318;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.msg-label {
|
||||
@@ -271,7 +345,7 @@
|
||||
.msg-system-text {
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted);
|
||||
background: var(--surface);
|
||||
background: var(--bg);
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 20px;
|
||||
text-align: center;
|
||||
@@ -279,8 +353,9 @@
|
||||
|
||||
.typing-bubble {
|
||||
display: none;
|
||||
padding: 0 1rem 0.55rem;
|
||||
padding: 0 0.9rem 0.55rem;
|
||||
justify-content: flex-start;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.typing-bubble.visible { display: flex; }
|
||||
@@ -292,7 +367,7 @@
|
||||
gap: 4px;
|
||||
min-width: 48px;
|
||||
padding: 0.58rem 0.78rem;
|
||||
background: var(--supporter);
|
||||
background: var(--peer);
|
||||
border-radius: 16px;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
@@ -304,7 +379,7 @@
|
||||
bottom: -4px;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
background: var(--supporter);
|
||||
background: var(--peer);
|
||||
transform: rotate(45deg);
|
||||
border-radius: 2px;
|
||||
}
|
||||
@@ -327,22 +402,23 @@
|
||||
|
||||
#reply-area {
|
||||
border-top: 1px solid var(--border);
|
||||
padding: 0.65rem 1rem 0.8rem;
|
||||
padding: 0.65rem 0.85rem max(0.8rem, env(safe-area-inset-bottom));
|
||||
display: none;
|
||||
background: var(--bg);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#reply-area.visible { display: flex; gap: 0.5rem; }
|
||||
#reply-area.visible { display: flex; gap: 0.45rem; }
|
||||
|
||||
#reply-area input[type="text"] {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 0.58rem 0.85rem;
|
||||
background: var(--surface);
|
||||
padding: 0.62rem 0.85rem;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--text);
|
||||
font-size: 0.9rem;
|
||||
font-size: 16px;
|
||||
line-height: 1.25;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
@@ -350,13 +426,13 @@
|
||||
#reply-area input[type="text"]:focus { border-color: var(--accent); }
|
||||
|
||||
#reply-area button {
|
||||
padding: 0.58rem 1rem;
|
||||
padding: 0.62rem 0.95rem;
|
||||
background: var(--accent);
|
||||
color: #111318;
|
||||
border: none;
|
||||
border-radius: var(--radius);
|
||||
font-weight: 700;
|
||||
font-size: 0.88rem;
|
||||
font-size: 0.92rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
white-space: nowrap;
|
||||
@@ -365,63 +441,74 @@
|
||||
#reply-area button:hover { background: var(--accent-dim); }
|
||||
|
||||
@media (max-width: 820px) {
|
||||
html, body { overflow: hidden; }
|
||||
|
||||
.layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
grid-template-rows: auto auto minmax(0, 1fr);
|
||||
grid-template-rows: 58px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.topbar {
|
||||
min-height: 56px;
|
||||
padding: 0.65rem 0.85rem;
|
||||
flex-wrap: wrap;
|
||||
min-height: 58px;
|
||||
padding: 0.55rem 0.75rem;
|
||||
}
|
||||
|
||||
.menu-button { display: inline-flex; }
|
||||
|
||||
.topbar h1 { font-size: 0.95rem; }
|
||||
|
||||
.topbar-timer {
|
||||
margin-left: 0;
|
||||
font-size: 0.78rem;
|
||||
padding: 0.3rem 0.65rem;
|
||||
padding: 0.36rem 0.65rem;
|
||||
}
|
||||
|
||||
.drawer-backdrop.visible { display: block; }
|
||||
|
||||
.sidebar {
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
max-height: 30vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
height: var(--app-height, 100dvh);
|
||||
width: min(88vw, 340px);
|
||||
border-right: 1px solid var(--border);
|
||||
z-index: 50;
|
||||
transform: translateX(-102%);
|
||||
transition: transform 0.2s ease;
|
||||
box-shadow: 16px 0 40px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.sidebar-header { padding: 0.7rem 0.85rem; }
|
||||
.sidebar.open { transform: translateX(0); }
|
||||
.close-sidebar { display: inline-flex; }
|
||||
|
||||
#session-list {
|
||||
flex-direction: row;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
padding: 0.5rem 0.75rem 0.65rem;
|
||||
.main-panel {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
padding: 0.75rem;
|
||||
align-items: stretch;
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.session-item {
|
||||
min-width: 190px;
|
||||
max-width: 230px;
|
||||
.chat-shell {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
height: 100%;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.main-header,
|
||||
#supporter-messages,
|
||||
.typing-bubble,
|
||||
#reply-area { width: 100%; }
|
||||
|
||||
.main-header { padding: 0.75rem 0.85rem; min-height: 48px; }
|
||||
#supporter-messages { padding: 0.85rem; }
|
||||
.main-header { padding: 0.8rem 0.9rem; }
|
||||
.msg-user, .msg-supporter { max-width: 86%; }
|
||||
#reply-area { padding: 0.6rem 0.75rem 0.75rem; }
|
||||
#reply-area.visible { gap: 0.4rem; }
|
||||
#reply-area button { padding-inline: 0.85rem; }
|
||||
}
|
||||
|
||||
@media (max-width: 460px) {
|
||||
.topbar { align-items: flex-start; flex-direction: column; gap: 0.45rem; }
|
||||
.topbar-timer { width: 100%; justify-content: center; text-align: center; }
|
||||
.sidebar { max-height: 28vh; }
|
||||
.session-item { min-width: 165px; }
|
||||
#reply-area.visible { gap: 0.4rem; }
|
||||
#reply-area button { padding-inline: 0.85rem; }
|
||||
.topbar h1 { display: none; }
|
||||
.topbar-timer { flex: 1; margin-left: 0; }
|
||||
.main-panel { padding: 0.55rem; }
|
||||
.chat-shell { border-radius: 16px; }
|
||||
.main-header { min-height: 50px; }
|
||||
#supporter-messages { padding: 0.8rem; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -429,12 +516,18 @@
|
||||
|
||||
<div class="layout">
|
||||
<header class="topbar">
|
||||
<button class="menu-button" type="button" onclick="openSidebar()">Chats</button>
|
||||
<h1>Support dashboard</h1>
|
||||
<span class="topbar-timer" hx-get="/reset-countdown" hx-trigger="load, every 1s" hx-swap="innerHTML">Reset in --:--</span>
|
||||
</header>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-header">Conversations</div>
|
||||
<div id="drawer-backdrop" class="drawer-backdrop" onclick="closeSidebar()"></div>
|
||||
|
||||
<aside id="sidebar" class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<span class="sidebar-title">Conversations</span>
|
||||
<button class="close-sidebar" type="button" onclick="closeSidebar()">Close</button>
|
||||
</div>
|
||||
<div id="session-list"
|
||||
hx-get="/sessions"
|
||||
hx-trigger="load, refresh, every 5s"
|
||||
@@ -444,14 +537,18 @@
|
||||
</aside>
|
||||
|
||||
<section class="main-panel">
|
||||
<div class="chat-shell">
|
||||
<div class="main-header">
|
||||
<div class="active-copy">
|
||||
<span id="active-session-name" style="color: var(--muted)">Select a conversation</span>
|
||||
<span id="active-session-meta"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="supporter-messages">
|
||||
<div class="empty-state">
|
||||
<p>No conversation selected</p>
|
||||
<p>Open the chat list and choose a conversation.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -465,6 +562,7 @@
|
||||
<input type="text" id="reply-input" placeholder="Reply to user..." autocomplete="off" maxlength="1000" />
|
||||
<button id="reply-btn">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -474,10 +572,33 @@
|
||||
let lastTypingSessionId = null;
|
||||
let supporterTypingActive = false;
|
||||
|
||||
function setAppHeight() {
|
||||
const height = window.visualViewport ? window.visualViewport.height : window.innerHeight;
|
||||
document.documentElement.style.setProperty('--app-height', `${height}px`);
|
||||
}
|
||||
|
||||
setAppHeight();
|
||||
window.addEventListener('resize', setAppHeight);
|
||||
if (window.visualViewport) {
|
||||
window.visualViewport.addEventListener('resize', setAppHeight);
|
||||
window.visualViewport.addEventListener('scroll', setAppHeight);
|
||||
}
|
||||
|
||||
function openSidebar() {
|
||||
document.getElementById('sidebar').classList.add('open');
|
||||
document.getElementById('drawer-backdrop').classList.add('visible');
|
||||
}
|
||||
|
||||
function closeSidebar() {
|
||||
document.getElementById('sidebar').classList.remove('open');
|
||||
document.getElementById('drawer-backdrop').classList.remove('visible');
|
||||
}
|
||||
|
||||
function selectSession(button) {
|
||||
document.querySelectorAll('.session-item').forEach(function(b) { b.classList.remove('selected'); });
|
||||
button.classList.add('selected');
|
||||
setActiveSession(button.dataset.sessionId, button.dataset.sessionName);
|
||||
closeSidebar();
|
||||
}
|
||||
|
||||
function setActiveSession(sessionId, name) {
|
||||
@@ -485,7 +606,7 @@
|
||||
activeSessionId = sessionId;
|
||||
document.getElementById('active-session-name').textContent = name;
|
||||
document.getElementById('active-session-name').style.color = '';
|
||||
document.getElementById('active-session-meta').textContent = '#' + sessionId.slice(0, 8);
|
||||
document.getElementById('active-session-meta').textContent = 'Session #' + sessionId.slice(0, 8);
|
||||
document.getElementById('reply-area').classList.add('visible');
|
||||
document.getElementById('reply-input').value = '';
|
||||
hideUserTyping();
|
||||
@@ -500,7 +621,8 @@
|
||||
document.getElementById('active-session-meta').textContent = '';
|
||||
document.getElementById('reply-area').classList.remove('visible');
|
||||
hideUserTyping();
|
||||
document.getElementById('supporter-messages').innerHTML = '<div class="empty-state"><p>Chat history was cleared. New conversations will appear here.</p></div>';
|
||||
closeSidebar();
|
||||
document.getElementById('supporter-messages').innerHTML = '<div class="empty-state"><p>Chat history was cleared.</p><p>New conversations will appear in the chat list.</p></div>';
|
||||
htmx.trigger('#session-list', 'refresh');
|
||||
}
|
||||
|
||||
@@ -575,6 +697,7 @@
|
||||
msgs.insertAdjacentHTML('beforeend', html);
|
||||
input.value = '';
|
||||
scrollSupporterMessages();
|
||||
setAppHeight();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -583,6 +706,8 @@
|
||||
});
|
||||
|
||||
document.getElementById('reply-input').addEventListener('input', handleReplyInput);
|
||||
document.getElementById('reply-input').addEventListener('focus', () => setTimeout(setAppHeight, 80));
|
||||
document.getElementById('reply-input').addEventListener('blur', () => setTimeout(setAppHeight, 80));
|
||||
|
||||
function connectSupporterWS() {
|
||||
const wsProtocol = location.protocol === 'https:' ? 'wss' : 'ws';
|
||||
@@ -610,7 +735,7 @@
|
||||
|
||||
if (data === activeSessionId) {
|
||||
hideUserTyping();
|
||||
fetch(`/messages/${activeSessionId}`)
|
||||
fetch(`/supporter/messages/${activeSessionId}`)
|
||||
.then(r => r.text())
|
||||
.then(html => {
|
||||
document.getElementById('supporter-messages').innerHTML = html;
|
||||
|
||||
+42
-11
@@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
|
||||
<title>Support Chat</title>
|
||||
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
|
||||
<style>
|
||||
@@ -25,18 +25,26 @@
|
||||
--radius: 12px;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: var(--app-height, 100dvh);
|
||||
overflow: hidden;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--bg);
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
color: var(--text);
|
||||
padding: 4.4rem 1rem 1rem;
|
||||
padding: 4.4rem 1rem max(1rem, env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
button, input { font: inherit; }
|
||||
|
||||
.page-timer {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -88,7 +96,8 @@
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--text);
|
||||
font-size: 0.95rem;
|
||||
font-size: 16px;
|
||||
line-height: 1.25;
|
||||
margin-bottom: 1rem;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
@@ -115,8 +124,7 @@
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
width: min(390px, 100%);
|
||||
height: min(620px, calc(100vh - 5.4rem));
|
||||
height: min(620px, calc(100dvh - 5.4rem));
|
||||
height: min(620px, calc(var(--app-height, 100dvh) - 5.4rem));
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 20px;
|
||||
@@ -269,8 +277,9 @@
|
||||
#chat-form {
|
||||
display: flex;
|
||||
gap: 0.45rem;
|
||||
padding: 0.65rem 0.85rem 0.8rem;
|
||||
padding: 0.65rem 0.85rem max(0.8rem, env(safe-area-inset-bottom));
|
||||
border-top: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#chat-form input[type="text"] {
|
||||
@@ -281,7 +290,8 @@
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--text);
|
||||
font-size: 0.9rem;
|
||||
font-size: 16px;
|
||||
line-height: 1.25;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
@@ -304,12 +314,15 @@
|
||||
#chat-form button:hover { background: var(--accent-dim); }
|
||||
|
||||
@media (max-width: 520px) {
|
||||
body { align-items: stretch; padding: 4.2rem 0.75rem 0.75rem; }
|
||||
body { align-items: stretch; padding: 4.2rem 0.75rem max(0.75rem, env(safe-area-inset-bottom)); }
|
||||
.page-timer { top: 0.75rem; width: calc(100% - 1.5rem); text-align: center; justify-content: center; }
|
||||
#start-form { align-self: center; padding: 1.45rem; border-radius: 18px; }
|
||||
#chat-container { height: calc(100vh - 5rem); height: calc(100dvh - 5rem); border-radius: 18px; }
|
||||
#chat-container { width: 100%; height: calc(var(--app-height, 100dvh) - 5rem); max-height: none; border-radius: 18px; }
|
||||
.chat-session-id { display: none; }
|
||||
.msg-user, .msg-supporter { max-width: 86%; }
|
||||
#messages { padding: 0.8rem; }
|
||||
#chat-form { gap: 0.4rem; }
|
||||
#chat-form button { padding-inline: 0.85rem; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -333,6 +346,18 @@
|
||||
let ws = null;
|
||||
let userTypingActive = false;
|
||||
|
||||
function setAppHeight() {
|
||||
const height = window.visualViewport ? window.visualViewport.height : window.innerHeight;
|
||||
document.documentElement.style.setProperty('--app-height', `${height}px`);
|
||||
}
|
||||
|
||||
setAppHeight();
|
||||
window.addEventListener('resize', setAppHeight);
|
||||
if (window.visualViewport) {
|
||||
window.visualViewport.addEventListener('resize', setAppHeight);
|
||||
window.visualViewport.addEventListener('scroll', setAppHeight);
|
||||
}
|
||||
|
||||
function scrollMessages() {
|
||||
const el = document.getElementById('messages');
|
||||
if (el) el.scrollTop = el.scrollHeight;
|
||||
@@ -424,6 +449,12 @@
|
||||
hideSupporterTyping();
|
||||
htmx.trigger('#messages', 'refresh');
|
||||
};
|
||||
const chatInput = document.getElementById('chat-input');
|
||||
if (chatInput) {
|
||||
chatInput.addEventListener('focus', () => setTimeout(setAppHeight, 80));
|
||||
chatInput.addEventListener('blur', () => setTimeout(setAppHeight, 80));
|
||||
}
|
||||
setAppHeight();
|
||||
ws.onerror = () => console.warn('WebSocket error; polling will continue.');
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user