switchboard/core
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Releases 9 Wiki Activity

Feat v0.5.2 chat surface

Browse Source 
Chat surface package (packages/chat/) with conversation list, message
thread, compose bar, participant sidebar, create conversation dialog,
typing indicators, read receipts, message editing, and message deletion.
Built on chat-core library with realtime event subscriptions.

Fix stale token login deadlock: REST client auth endpoints excluded
from 401 retry loop, 8s defensive boot timeout on auth.boot().

Fix bundled package permissions: auto-grant with NULL granted_by and
set status active on install.

Switch docker-compose to named volume for remote Docker host compat.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jeffrey Smith
2026-03-30 14:48:18 +00:00
parent 7155aaf663
commit a0cd724d35
12 changed files with 1476 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

521
packages/chat/css/main.css Normal file
View File

@@ -0,0 +1,521 @@
/* ═══════════════════════════════════════════
Chat Surface — Styles (v0.1.0)
═══════════════════════════════════════════ */
/* ── Layout ─────────────────────────────── */
.chat-app {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
background: var(--bg-primary, #fff);
color: var(--text-primary, #1a1a1a);
}
.chat-loading {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.chat-body {
display: flex;
flex: 1;
min-height: 0;
}
.chat-main {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
/* ── Topbar extras ──────────────────────── */
.chat-topbar__thread-title {
font-weight: 600;
font-size: 14px;
margin-right: 8px;
color: var(--text-secondary, #666);
}
/* ── Sidebar ────────────────────────────── */
.chat-sidebar {
width: 280px;
min-width: 280px;
border-right: 1px solid var(--border, #e2e2e2);
display: flex;
flex-direction: column;
background: var(--bg-secondary, #fafafa);
}
.chat-sidebar__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid var(--border, #e2e2e2);
}
.chat-sidebar__title {
font-weight: 600;
font-size: 14px;
}
.chat-sidebar__list {
flex: 1;
overflow-y: auto;
}
.chat-sidebar__empty {
padding: 24px 16px;
text-align: center;
color: var(--text-muted, #999);
font-size: 13px;
}
.chat-sidebar__item {
padding: 10px 16px;
cursor: pointer;
border-bottom: 1px solid var(--border-light, #f0f0f0);
transition: background 0.1s;
}
.chat-sidebar__item:hover {
background: var(--bg-hover, #f0f0f0);
}
.chat-sidebar__item--active {
background: var(--bg-active, #e8f0fe);
}
.chat-sidebar__item-top {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 2px;
}
.chat-sidebar__item-title {
font-weight: 600;
font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
margin-right: 8px;
}
.chat-sidebar__item-time {
font-size: 11px;
color: var(--text-muted, #999);
white-space: nowrap;
}
.chat-sidebar__item-bottom {
display: flex;
align-items: center;
gap: 6px;
}
.chat-sidebar__item-preview {
font-size: 12px;
color: var(--text-secondary, #666);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
}
.chat-sidebar__badge {
background: var(--primary, #2563eb);
color: #fff;
font-size: 11px;
font-weight: 600;
min-width: 18px;
height: 18px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 5px;
flex-shrink: 0;
}
/* ── Message Thread ─────────────────────── */
.chat-thread {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.chat-thread--empty {
align-items: center;
justify-content: center;
color: var(--text-muted, #999);
}
.chat-thread__messages {
flex: 1;
overflow-y: auto;
padding: 16px;
display: flex;
flex-direction: column;
gap: 4px;
}
.chat-thread__loading {
display: flex;
justify-content: center;
padding: 24px;
}
.chat-thread__load-more {
align-self: center;
background: none;
border: 1px solid var(--border, #e2e2e2);
border-radius: 4px;
padding: 4px 12px;
font-size: 12px;
color: var(--text-secondary, #666);
cursor: pointer;
margin-bottom: 8px;
}
.chat-thread__load-more:hover {
background: var(--bg-hover, #f0f0f0);
}
.chat-thread__typing {
padding: 4px 16px 8px;
font-size: 12px;
color: var(--text-muted, #999);
font-style: italic;
}
/* ── Message Bubble ─────────────────────── */
.chat-msg {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 4px 0;
position: relative;
}
.chat-msg--own {
flex-direction: row-reverse;
}
.chat-msg--system {
justify-content: center;
padding: 2px 0;
}
.chat-msg--system span {
font-size: 12px;
color: var(--text-muted, #999);
font-style: italic;
}
.chat-msg--deleted {
justify-content: center;
padding: 2px 0;
}
.chat-msg--deleted em {
font-size: 12px;
color: var(--text-muted, #999);
}
.chat-msg__body {
max-width: 65%;
background: var(--bg-secondary, #f5f5f5);
border-radius: 12px;
padding: 8px 12px;
}
.chat-msg--own .chat-msg__body {
background: var(--primary, #2563eb);
color: #fff;
}
.chat-msg__name {
font-size: 11px;
font-weight: 600;
color: var(--text-secondary, #666);
display: block;
margin-bottom: 2px;
}
.chat-msg__content {
font-size: 14px;
line-height: 1.4;
white-space: pre-wrap;
word-break: break-word;
}
.chat-msg__meta {
display: flex;
gap: 6px;
align-items: center;
margin-top: 2px;
}
.chat-msg__time {
font-size: 10px;
color: var(--text-muted, #999);
}
.chat-msg--own .chat-msg__time {
color: rgba(255, 255, 255, 0.7);
}
.chat-msg__edited {
font-size: 10px;
color: var(--text-muted, #999);
font-style: italic;
}
.chat-msg--own .chat-msg__edited {
color: rgba(255, 255, 255, 0.7);
}
/* ── Message Actions ────────────────────── */
.chat-msg__actions {
display: flex;
gap: 2px;
position: absolute;
top: 0;
right: 0;
background: var(--bg-primary, #fff);
border: 1px solid var(--border, #e2e2e2);
border-radius: 6px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
padding: 2px;
}
.chat-msg--own .chat-msg__actions {
right: auto;
left: 0;
}
.chat-msg__action {
background: none;
border: none;
padding: 4px 6px;
cursor: pointer;
border-radius: 4px;
font-size: 14px;
line-height: 1;
color: var(--text-secondary, #666);
}
.chat-msg__action:hover {
background: var(--bg-hover, #f0f0f0);
}
.chat-msg__action--danger:hover {
background: var(--danger-bg, #fee);
color: var(--danger, #dc2626);
}
/* ── Message Edit ───────────────────────── */
.chat-msg__edit {
display: flex;
flex-direction: column;
gap: 6px;
}
.chat-msg__edit-input {
width: 100%;
min-width: 200px;
border: 1px solid var(--border, #e2e2e2);
border-radius: 6px;
padding: 6px 8px;
font-size: 14px;
font-family: inherit;
resize: vertical;
background: var(--bg-primary, #fff);
color: var(--text-primary, #1a1a1a);
}
.chat-msg__edit-actions {
display: flex;
gap: 6px;
justify-content: flex-end;
}
/* ── Compose Bar ────────────────────────── */
.chat-compose {
display: flex;
align-items: flex-end;
gap: 8px;
padding: 12px 16px;
border-top: 1px solid var(--border, #e2e2e2);
background: var(--bg-primary, #fff);
}
.chat-compose__input {
flex: 1;
border: 1px solid var(--border, #e2e2e2);
border-radius: 8px;
padding: 8px 12px;
font-size: 14px;
font-family: inherit;
resize: none;
line-height: 1.4;
max-height: 160px;
background: var(--bg-primary, #fff);
color: var(--text-primary, #1a1a1a);
}
.chat-compose__input:focus {
outline: none;
border-color: var(--primary, #2563eb);
box-shadow: 0 0 0 2px var(--primary-light, rgba(37, 99, 235, 0.15));
}
/* ── Participant Sidebar ────────────────── */
.chat-participants {
width: 240px;
min-width: 240px;
border-left: 1px solid var(--border, #e2e2e2);
display: flex;
flex-direction: column;
background: var(--bg-secondary, #fafafa);
}
.chat-participants__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid var(--border, #e2e2e2);
font-weight: 600;
font-size: 13px;
}
.chat-participants__list {
flex: 1;
overflow-y: auto;
padding: 8px 0;
}
.chat-participants__item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 16px;
}
.chat-participants__name {
flex: 1;
font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chat-participants__badge {
font-size: 10px;
color: var(--primary, #2563eb);
font-weight: 600;
margin-left: 4px;
}
.chat-participants__status {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--text-muted, #ccc);
flex-shrink: 0;
}
.chat-participants__status--online {
background: var(--success, #16a34a);
}
.chat-participants__remove {
background: none;
border: none;
color: var(--text-muted, #999);
cursor: pointer;
font-size: 16px;
padding: 0 4px;
line-height: 1;
}
.chat-participants__remove:hover {
color: var(--danger, #dc2626);
}
/* ── New Conversation Dialog ────────────── */
.chat-new {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 320px;
}
.chat-new__type {
display: flex;
gap: 16px;
}
.chat-new__type label {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
cursor: pointer;
}
.chat-new__title {
border: 1px solid var(--border, #e2e2e2);
border-radius: 6px;
padding: 8px 10px;
font-size: 14px;
font-family: inherit;
background: var(--bg-primary, #fff);
color: var(--text-primary, #1a1a1a);
}
.chat-new__selected {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.chat-new__chip {
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--bg-active, #e8f0fe);
color: var(--primary, #2563eb);
font-size: 12px;
font-weight: 500;
padding: 3px 8px;
border-radius: 12px;
}
.chat-new__chip button {
background: none;
border: none;
color: inherit;
cursor: pointer;
font-size: 14px;
padding: 0;
line-height: 1;
}