FLO/user-to-supporter-chat-rust
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change layouts

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