dguiducci
78cdcf4cc7
Nightly Build / build (push) Successful in 7m49s
A source had exactly one live conversation, so the copilot could only ever replace a chat, never add one: the trash button reset the source and the old conversation was left orphaned. Working on two things at once meant losing one. The tab bar now holds two kinds of tab. A primary tab is a source — it shows whatever `web` or `project-7` currently points at, which is where background delivery lands (notify, a finished async task, an inbound Telegram message) and what a reset moves to a fresh row. A secondary tab, opened with `+`, is one specific conversation: its source points elsewhere, so it is unreachable by source name and is addressed by id throughout — REST, WebSocket, event filtering. `POST /api/sessions/new` creates one without touching `sources`, which is the whole difference from a reset; its agent and run-context still come from the source, so an extra project tab is the coordinator with the project's context. Project "Open chat" is untouched and still resumes the project's own. The load-bearing half is in ChatHub: the input queue and the model pin are now keyed by session, not by source. Two tabs on one source would otherwise serialize into a single queue and a single turn, and share a `/model` pin — the odd one out, since the security group was already per-session and persisted. The source-taking methods survive as one-line resolvers, so Telegram, mobile and cron are untouched. Because queues now grow with conversations rather than with the handful of sources, a reset retires the queue it replaces instead of leaving a consumer task parked forever. Events are filtered per conversation, so anything a chat must see has to carry a session id: `show_file_to_user`'s OpenFile and the security-group revalidation were emitting untagged and would have reached nobody. A primary connection additionally follows NewSession for its source, so a second window does not keep talking to a conversation another window just reset. Tabs can be renamed by double-click — `chat_sessions.title` existed and was dead until now. An empty name stores NULL, so the box is also the undo.
322 lines
6.9 KiB
CSS
322 lines
6.9 KiB
CSS
/* ── Copilot panel ─────────────────────────────────────────────────────────── */
|
|
|
|
app-copilot {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
width: var(--copilot-width);
|
|
height: 100%;
|
|
border-left: 1px solid var(--toolbar-border);
|
|
background: var(--copilot-bg);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
app-copilot.collapsed:not([mode="full"]) {
|
|
width: 0;
|
|
min-width: 0;
|
|
border: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ── Full mode (home route): the chat fills the workspace ──────────────────── */
|
|
|
|
app-copilot[mode="full"] {
|
|
flex: 1;
|
|
width: auto;
|
|
min-width: 0;
|
|
border-left: none;
|
|
}
|
|
|
|
/* Center the conversation in a readable column on wide screens. */
|
|
app-copilot[mode="full"] .copilot-header,
|
|
app-copilot[mode="full"] .copilot-tabs,
|
|
app-copilot[mode="full"] .copilot-messages,
|
|
app-copilot[mode="full"] .copilot-input-area {
|
|
padding-left: max(1.25rem, calc((100% - 860px) / 2));
|
|
padding-right: max(1.25rem, calc((100% - 860px) / 2));
|
|
}
|
|
|
|
app-copilot[mode="full"] .copilot-header {
|
|
font-size: 1rem;
|
|
padding-top: 0.9rem;
|
|
padding-bottom: 0.9rem;
|
|
}
|
|
|
|
app-copilot[mode="full"] .copilot-msg {
|
|
max-width: 80%;
|
|
}
|
|
|
|
/* ── Welcome hero (empty state, full mode) ─────────────────────────────────── */
|
|
|
|
.chat-hero {
|
|
margin: auto;
|
|
text-align: center;
|
|
max-width: 560px;
|
|
padding: 2rem 1rem;
|
|
}
|
|
|
|
.chat-hero-logo {
|
|
width: 88px;
|
|
height: 88px;
|
|
border-radius: 24px;
|
|
box-shadow: var(--card-shadow);
|
|
}
|
|
|
|
.chat-hero-title {
|
|
font-size: 1.6rem;
|
|
font-weight: 700;
|
|
margin: 1.1rem 0 0.3rem;
|
|
}
|
|
|
|
.chat-hero-sub {
|
|
color: var(--placeholder-color);
|
|
font-size: 1rem;
|
|
margin: 0 0 1.75rem;
|
|
}
|
|
|
|
.chat-suggestions {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 0.6rem;
|
|
text-align: left;
|
|
}
|
|
|
|
.chat-suggestion {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
border: 1px solid var(--card-border);
|
|
background: var(--card-bg);
|
|
color: var(--msg-assistant-text);
|
|
border-radius: var(--radius-md);
|
|
padding: 0.75rem 0.95rem;
|
|
font-size: 0.92rem;
|
|
cursor: pointer;
|
|
transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
|
|
}
|
|
|
|
.chat-suggestion i {
|
|
color: var(--accent);
|
|
font-size: 1rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.chat-suggestion:hover {
|
|
border-color: var(--accent);
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--card-shadow);
|
|
}
|
|
|
|
@media (max-width: 560px) {
|
|
.chat-suggestions { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
/* ── Privacy chip (chat header) ────────────────────────────────────────────── */
|
|
|
|
.chat-privacy {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.3rem;
|
|
margin-left: 0.5rem;
|
|
font-size: 0.72rem;
|
|
font-weight: 600;
|
|
padding: 0.18rem 0.6rem;
|
|
border-radius: 999px;
|
|
background: var(--accent-soft);
|
|
color: var(--accent);
|
|
cursor: default;
|
|
}
|
|
|
|
.chat-privacy i {
|
|
font-size: 0.68rem;
|
|
}
|
|
|
|
.copilot-resize-handle {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 5px;
|
|
cursor: col-resize;
|
|
z-index: 20;
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
.copilot-resize-handle:hover,
|
|
.copilot-resize-handle:active {
|
|
background: rgba(var(--accent-rgb), 0.35);
|
|
}
|
|
|
|
.copilot-expand-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
flex: 1;
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: var(--accent);
|
|
font-size: 1.1rem;
|
|
writing-mode: vertical-rl;
|
|
padding: 1rem 0;
|
|
}
|
|
|
|
.copilot-expand-btn:hover {
|
|
background: var(--sidebar-hover);
|
|
}
|
|
|
|
.copilot-collapse-btn {
|
|
flex-shrink: 0;
|
|
padding: 0.2rem 0.4rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.copilot-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.7rem 1rem;
|
|
border-bottom: 1px solid var(--toolbar-border);
|
|
font-weight: 600;
|
|
font-size: 0.875rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.copilot-header i {
|
|
font-size: 1rem;
|
|
color: var(--accent);
|
|
}
|
|
|
|
/* ── Tabs (General + project chats) ─────────────────────────────────────────── */
|
|
.copilot-tabs {
|
|
display: flex;
|
|
align-items: stretch;
|
|
gap: 2px;
|
|
padding: 0 0.5rem;
|
|
border-bottom: 1px solid var(--toolbar-border);
|
|
overflow-x: auto;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.copilot-tab {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
max-width: 160px;
|
|
padding: 0.4rem 0.6rem;
|
|
font-size: 0.78rem;
|
|
cursor: pointer;
|
|
border-bottom: 2px solid transparent;
|
|
color: var(--bs-secondary-color, #6c757d);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.copilot-tab:hover {
|
|
background: var(--toolbar-border);
|
|
}
|
|
|
|
.copilot-tab--active {
|
|
color: var(--bs-body-color, inherit);
|
|
border-bottom-color: var(--accent);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.copilot-tab-label {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.copilot-tab-close {
|
|
border: none;
|
|
background: none;
|
|
padding: 0;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
color: inherit;
|
|
opacity: 0.6;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.copilot-tab-close:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Inline rename: sits in the tab's own box so the bar doesn't reflow while
|
|
typing. Sized off the label so a long name still scrolls within its tab. */
|
|
.copilot-tab-rename {
|
|
width: 100%;
|
|
min-width: 80px;
|
|
border: none;
|
|
border-radius: var(--radius-sm);
|
|
padding: 0 0.2rem;
|
|
font: inherit;
|
|
color: var(--bs-body-color, inherit);
|
|
background: var(--bs-body-bg, #fff);
|
|
outline: 2px solid var(--accent);
|
|
}
|
|
|
|
/* ── New-chat menu ──────────────────────────────────────────────────────────── */
|
|
.copilot-tab-new {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.copilot-tab-add {
|
|
border: none;
|
|
background: none;
|
|
padding: 0.2rem 0.4rem;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
color: var(--bs-secondary-color, #6c757d);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.copilot-tab-add:hover {
|
|
background: var(--toolbar-border);
|
|
color: var(--bs-body-color, inherit);
|
|
}
|
|
|
|
.copilot-tab-menu {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
z-index: 20;
|
|
min-width: 180px;
|
|
max-height: 260px;
|
|
overflow-y: auto;
|
|
padding: 0.25rem;
|
|
border: 1px solid var(--toolbar-border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--bs-body-bg, #fff);
|
|
box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
|
|
}
|
|
|
|
.copilot-tab-menu-item {
|
|
display: block;
|
|
width: 100%;
|
|
border: none;
|
|
background: none;
|
|
padding: 0.4rem 0.6rem;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 0.82rem;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
color: inherit;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.copilot-tab-menu-item:hover {
|
|
background: var(--toolbar-border);
|
|
}
|
|
|
|
.copilot-tab-menu-empty {
|
|
padding: 0.4rem 0.6rem;
|
|
font-size: 0.82rem;
|
|
color: var(--bs-secondary-color, #6c757d);
|
|
}
|