Backoffice stage 2: chats (support + concierge, files)
- ChatThread per client/provider and channel; messages get files, internal notes, source (bot/mini app) and delivery errors; reply templates. Migration moves old concierge messages into threads. - Routing: subscribers write to the concierge, others to support; /support and /concierge in the client bot; staff can take, transfer, close and move threads. - Telegram: photos/documents from clients and providers, replies with the channel header, files sent from storage, notifications only to the assignee or the channel's staff, "Reply" into a specific thread. - New admin: /chats with list, conversation, notes, files, templates, client panel; "Message" button on the client card; dashboard counts threads awaiting reply. - Client mini app: in-app chat screen sharing the same conversation. - Old admin keeps working on the same data (notes hidden there). - Tests for routing, notes, assign/close/move, lists, recipients; separate test DB via TEST_DB_NAME; dev:chats-demo script. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This commit is contained in:
zabudko-ruandClaude Opus 5.5 committed
1 parent
d452824c62
commit
23ffb2bf1d
46 files changed
+4176
-144
No files matched your search
@@ -779,3 +779,157 @@
|
||||
background: var(--bc-bg);
|
||||
color: var(--bc-ink-3);
|
||||
}
|
||||
|
||||
/* ───── чат с командой ───── */
|
||||
.chat-screen {
|
||||
max-width: 560px;
|
||||
margin: 0 auto;
|
||||
height: 100dvh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.chat-screen__head {
|
||||
padding: 16px 16px 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.chat-switch {
|
||||
display: flex;
|
||||
padding: 4px;
|
||||
gap: 4px;
|
||||
border-radius: 999px;
|
||||
background: var(--bc-surface);
|
||||
}
|
||||
.chat-switch button {
|
||||
flex: 1;
|
||||
height: 36px;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: none;
|
||||
font: inherit;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: var(--bc-ink-2);
|
||||
}
|
||||
.chat-switch button[aria-pressed='true'] {
|
||||
background: var(--bc-plum);
|
||||
color: #f6e9dc;
|
||||
}
|
||||
.chat-upsell {
|
||||
align-self: flex-start;
|
||||
padding: 6px 12px;
|
||||
border-radius: 999px;
|
||||
background: var(--bc-pink);
|
||||
color: var(--bc-plum);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
}
|
||||
.chat-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px 16px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.chat-hint {
|
||||
text-align: center;
|
||||
margin: 4px 12px 8px;
|
||||
}
|
||||
.chat-day {
|
||||
align-self: center;
|
||||
margin: 10px 0 4px;
|
||||
padding: 3px 12px;
|
||||
border-radius: 999px;
|
||||
background: var(--bc-surface);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--bc-ink-3);
|
||||
}
|
||||
.chat-msg {
|
||||
align-self: flex-start;
|
||||
max-width: 82%;
|
||||
padding: 9px 13px 7px;
|
||||
border-radius: 20px 20px 20px 6px;
|
||||
background: var(--bc-surface);
|
||||
line-height: 1.4;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.chat-msg--mine {
|
||||
align-self: flex-end;
|
||||
border-radius: 20px 20px 6px 20px;
|
||||
background: var(--bc-plum);
|
||||
color: #f6e9dc;
|
||||
}
|
||||
.chat-msg__who {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--bc-accent);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.chat-msg__text {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.chat-msg__time {
|
||||
font-size: 11px;
|
||||
opacity: 0.6;
|
||||
text-align: right;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.chat-msg__img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: 260px;
|
||||
border-radius: 14px;
|
||||
margin: 2px -5px 6px;
|
||||
}
|
||||
.chat-msg__file {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
color: inherit;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.chat-compose {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 8px;
|
||||
padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
|
||||
background: var(--bc-bg);
|
||||
}
|
||||
.chat-compose__input {
|
||||
flex: 1;
|
||||
min-height: 44px;
|
||||
max-height: 140px;
|
||||
padding: 11px 16px;
|
||||
border-radius: 22px;
|
||||
border: 1.5px solid var(--bc-line);
|
||||
background: var(--bc-surface);
|
||||
font: inherit;
|
||||
font-size: 16px;
|
||||
resize: none;
|
||||
field-sizing: content;
|
||||
}
|
||||
.chat-compose__input:focus {
|
||||
outline: none;
|
||||
border-color: var(--bc-accent);
|
||||
}
|
||||
.chat-compose__btn,
|
||||
.chat-compose__send {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
flex: none;
|
||||
border-radius: 50%;
|
||||
border: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: var(--bc-surface);
|
||||
color: var(--bc-ink);
|
||||
}
|
||||
.chat-compose__send {
|
||||
background: var(--bc-accent);
|
||||
color: #fff;
|
||||
}
|
||||
.chat-compose__send:disabled {
|
||||
opacity: 0.4;
|
||||
}
|
||||
Reference in new issue
Block a user