mirror of
https://github.com/arsvendg/Stirling-PDF.git
synced 2026-07-14 10:34:06 +02:00
EthanHealy01andGitHub
1698769928
### To test
- Ask the agent to “list all the things you can do and put them in a
markdown table”. I know we’re explicitly asking it for markdown, but I
don’t want to update the system prompt to ask it to make tables when
necessary because it’ll probably turn everything into a table, not sure
though, we can test in future.
- Notice how the loading is different
- Notice how the user chat is in a bubble but the agent chat is flat
(super standard design practice in AI tools, and looks much better when
the agent outputs mardown, expecially tables and needs room to do so)
- Ask it to do something different, then close the chat, and see that
the agent is marked as running and has a green outline and a green dot.
- Play around with resizing the chat to make it bigger/smaller
Open to any and all criticisms on any of the design choices, and of
course the usual, code etc.
Resizing
<img width="1572" height="812" alt="Screenshot 2026-06-01 at 2 47 53 PM"
src="https://github.com/user-attachments/assets/ec0ac1d0-01da-4025-bf7e-eea4eb544181"
/>
Loading (cool animation not visible through screenshot obviously)
<img width="559" height="141" alt="Screenshot 2026-06-01 at 2 53 41 PM"
src="https://github.com/user-attachments/assets/99f0b1f5-1719-4d78-8947-21b142293052"
/>
Removed bubbles for agent chat (maybe controversial, let me know) and
markdown now renders properly again
<img width="654" height="1060" alt="Screenshot 2026-06-01 at 2 55 01 PM"
src="https://github.com/user-attachments/assets/445f0889-a632-4751-9a16-f80ae388c632"
/>
468 lines
10 KiB
CSS
468 lines
10 KiB
CSS
.chat-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* Match the right-rail toolbar background so dark-mode doesn't show a
|
|
lighter card behind the chat, and so the agent-card → pill morph
|
|
doesn't flash a different colour mid-transition. */
|
|
background: var(--bg-toolbar);
|
|
}
|
|
|
|
.chat-panel--embedded {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Top header: agent pill + close. */
|
|
.chat-panel__header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 1rem 1rem 0.75rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.chat-panel__agent-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding: 0.4rem 0.75rem 0.4rem 0.4rem;
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: 9999px;
|
|
background: var(--mantine-color-body);
|
|
cursor: pointer;
|
|
transition:
|
|
background 120ms ease-out,
|
|
border-color 120ms ease-out;
|
|
/* Pair with .agent-button to morph between the card and the pill. */
|
|
view-transition-name: stirling-agent;
|
|
}
|
|
|
|
/* Match the active-tool morph timing for a consistent rail feel. */
|
|
::view-transition-group(stirling-agent),
|
|
::view-transition-old(stirling-agent),
|
|
::view-transition-new(stirling-agent) {
|
|
animation-duration: 220ms;
|
|
animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
|
|
}
|
|
|
|
.chat-panel__agent-pill:hover {
|
|
background: var(--mantine-color-default-hover);
|
|
}
|
|
|
|
.chat-panel__agent-pill-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1.75rem;
|
|
height: 1.75rem;
|
|
border-radius: 9999px;
|
|
background: var(--mantine-color-blue-light);
|
|
color: var(--mantine-color-blue-filled);
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.chat-panel__agent-pill--loading {
|
|
border-color: color-mix(
|
|
in srgb,
|
|
var(--mantine-color-blue-5) 60%,
|
|
var(--border-subtle)
|
|
);
|
|
}
|
|
|
|
[data-mantine-color-scheme="dark"] .chat-panel__agent-pill--loading {
|
|
border-color: color-mix(
|
|
in srgb,
|
|
var(--mantine-color-blue-4) 55%,
|
|
var(--border-subtle)
|
|
);
|
|
}
|
|
|
|
/* Dark-mode: let the pill blend into the rail. Just a thin border, no fill —
|
|
so it doesn't read as a clashing lighter card on the dark toolbar. */
|
|
[data-mantine-color-scheme="dark"] .chat-panel__agent-pill {
|
|
background: transparent;
|
|
border-color: var(--border-subtle);
|
|
}
|
|
|
|
[data-mantine-color-scheme="dark"] .chat-panel__agent-pill:hover {
|
|
background: rgba(255, 255, 255, 0.04);
|
|
}
|
|
|
|
[data-mantine-color-scheme="dark"] .chat-panel__agent-pill-icon {
|
|
background: color-mix(
|
|
in srgb,
|
|
var(--mantine-color-blue-filled) 18%,
|
|
transparent
|
|
);
|
|
color: var(--mantine-color-blue-3, var(--mantine-color-blue-filled));
|
|
}
|
|
|
|
/* Same treatment for the input pill and quick-action cards. */
|
|
[data-mantine-color-scheme="dark"] .chat-panel-input {
|
|
background: transparent;
|
|
box-shadow:
|
|
0 0 0 1px var(--border-subtle),
|
|
0 6px 16px rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
[data-mantine-color-scheme="dark"] .chat-panel-input:focus-within {
|
|
box-shadow:
|
|
0 0 0 1px color-mix(in srgb, var(--mantine-color-blue-3) 40%, transparent),
|
|
0 8px 22px color-mix(in srgb, var(--mantine-color-blue-6) 18%, transparent);
|
|
}
|
|
|
|
[data-mantine-color-scheme="dark"] .chat-quick-action {
|
|
background: transparent;
|
|
}
|
|
|
|
[data-mantine-color-scheme="dark"] .chat-quick-action:hover {
|
|
background: rgba(255, 255, 255, 0.04);
|
|
border-color: var(--border-subtle);
|
|
}
|
|
|
|
.chat-panel__agent-pill-label {
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
flex: 1;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.chat-panel-messages {
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* Quick action cards above the input. */
|
|
.chat-panel__quick-actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
padding: 0.75rem 0.75rem 0.25rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.chat-panel__quick-actions-label {
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
margin-top: 0.25rem;
|
|
margin-bottom: 0.1rem;
|
|
}
|
|
|
|
/* File pills shown above the quick actions when files are loaded. */
|
|
.chat-file-pills {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.35rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.chat-file-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.3rem;
|
|
max-width: 11rem;
|
|
padding: 0.2rem 0.35rem 0.2rem 0.45rem;
|
|
border: 1px solid var(--mantine-color-blue-light);
|
|
border-radius: 9999px;
|
|
background: var(--mantine-color-blue-light);
|
|
color: var(--mantine-color-blue-filled);
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.chat-file-pill__icon {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.chat-file-pill__label {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.chat-file-pill__remove {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: 9999px;
|
|
background: transparent;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
opacity: 0.7;
|
|
transition:
|
|
background 120ms ease-out,
|
|
opacity 120ms ease-out;
|
|
}
|
|
|
|
.chat-file-pill__remove:hover {
|
|
background: var(--mantine-color-default-hover);
|
|
opacity: 1;
|
|
}
|
|
|
|
.chat-file-pill--more {
|
|
background: transparent;
|
|
border: 1px dashed var(--border-subtle);
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
padding: 0.2rem 0.55rem;
|
|
}
|
|
|
|
.chat-file-pill--more:hover {
|
|
background: var(--mantine-color-default-hover);
|
|
}
|
|
|
|
.chat-quick-action {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 0.6rem 0.75rem;
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: 0.65rem;
|
|
background: var(--mantine-color-body);
|
|
transition:
|
|
background 120ms ease-out,
|
|
border-color 120ms ease-out;
|
|
}
|
|
|
|
.chat-quick-action:hover {
|
|
background: var(--mantine-color-default-hover);
|
|
border-color: var(--mantine-color-default-border);
|
|
}
|
|
|
|
.chat-quick-action__icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border-radius: 0.5rem;
|
|
background: var(--mantine-color-blue-light);
|
|
color: var(--mantine-color-blue-filled);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Input area: textarea on top row, action icons on bottom row. */
|
|
.chat-panel-input {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
padding: 0.85rem 1rem 0.75rem;
|
|
margin: 0.75rem 0.75rem 1rem;
|
|
border: none;
|
|
border-radius: 1.1rem;
|
|
background: var(--mantine-color-body);
|
|
flex-shrink: 0;
|
|
box-shadow:
|
|
0 0 0 1px rgba(0, 0, 0, 0.04),
|
|
0 4px 14px rgba(15, 23, 42, 0.08);
|
|
transition: box-shadow 160ms ease-out;
|
|
}
|
|
|
|
.chat-panel-input:focus-within {
|
|
box-shadow:
|
|
0 0 0 1px color-mix(in srgb, var(--mantine-color-blue-6) 20%, transparent),
|
|
0 6px 18px color-mix(in srgb, var(--mantine-color-blue-6) 12%, transparent);
|
|
}
|
|
|
|
/* Kill the Mantine Textarea's own border/outline — the wrapper owns the chrome. */
|
|
.chat-panel-input__field,
|
|
.chat-panel-input__field:focus,
|
|
.chat-panel-input__field:focus-visible {
|
|
font-size: 0.95rem;
|
|
padding: 0.15rem 0 !important;
|
|
background: transparent !important;
|
|
border: none !important;
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.chat-panel-input__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
/* Message layout */
|
|
.chat-message {
|
|
display: flex;
|
|
}
|
|
|
|
.chat-message-user {
|
|
justify-content: flex-end;
|
|
margin: 0.2rem 0;
|
|
}
|
|
|
|
.chat-message-user__inner {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
max-width: 85%;
|
|
}
|
|
|
|
.chat-message-assistant {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
/* Hover action row — copy, like, timestamp */
|
|
.chat-message-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.15rem;
|
|
margin-top: 0.3rem;
|
|
opacity: 0;
|
|
transition: opacity 120ms ease-out;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.chat-message:hover .chat-message-actions,
|
|
.chat-message-actions:focus-within {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.chat-message-action-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: 0.375rem;
|
|
background: transparent;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
transition:
|
|
background 100ms ease-out,
|
|
color 100ms ease-out;
|
|
}
|
|
|
|
.chat-message-action-btn:hover {
|
|
background: var(--mantine-color-default-hover);
|
|
color: var(--mantine-color-text);
|
|
}
|
|
|
|
.chat-message-action-btn--active {
|
|
color: var(--mantine-color-blue-filled);
|
|
}
|
|
|
|
.chat-message-timestamp {
|
|
font-size: 0.7rem;
|
|
color: var(--text-muted);
|
|
padding: 0 0.25rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Bubble styling — user only */
|
|
|
|
.chat-bubble {
|
|
width: fit-content;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.chat-bubble-user {
|
|
background: var(--mantine-color-blue-filled) !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.chat-bubble-user * {
|
|
color: white !important;
|
|
}
|
|
|
|
/* Assistant messages: no bubble, free-flowing with side padding */
|
|
.chat-bubble-assistant {
|
|
width: 100%;
|
|
padding: 0 0.5rem;
|
|
font-size: var(--mantine-font-size-sm);
|
|
}
|
|
|
|
.chat-bubble-assistant p {
|
|
margin: 0 0 0.5em;
|
|
}
|
|
|
|
.chat-bubble-assistant p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Thinking indicator */
|
|
.chat-thinking {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.125rem 0.5rem;
|
|
color: var(--mantine-color-blue-filled);
|
|
}
|
|
|
|
/* ─── Stirling logo thinking animation ─────────────────────────────────── */
|
|
|
|
.stirling-thinking__path-right {
|
|
animation: stirling-orbit-right 2s ease-in-out infinite;
|
|
}
|
|
|
|
.stirling-thinking__path-left {
|
|
animation: stirling-orbit-left 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes stirling-orbit-right {
|
|
0%,
|
|
100% {
|
|
transform: translate(0, 0);
|
|
opacity: 0.5;
|
|
}
|
|
25% {
|
|
transform: translate(-1px, -5px);
|
|
opacity: 0.45;
|
|
}
|
|
50% {
|
|
transform: translate(-6px, 0);
|
|
opacity: 0.9;
|
|
}
|
|
75% {
|
|
transform: translate(-1px, 5px);
|
|
opacity: 0.55;
|
|
}
|
|
}
|
|
|
|
@keyframes stirling-orbit-left {
|
|
0%,
|
|
100% {
|
|
transform: translate(0, 0);
|
|
opacity: 1;
|
|
}
|
|
25% {
|
|
transform: translate(1px, 5px);
|
|
opacity: 0.85;
|
|
}
|
|
50% {
|
|
transform: translate(6px, 0);
|
|
opacity: 0.5;
|
|
}
|
|
75% {
|
|
transform: translate(1px, -5px);
|
|
opacity: 0.85;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.stirling-thinking__path-right {
|
|
animation: none;
|
|
opacity: 0.5;
|
|
}
|
|
.stirling-thinking__path-left {
|
|
animation: none;
|
|
opacity: 1;
|
|
}
|
|
}
|