anentrypoint-design 0.0.163 → 0.0.165
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/chat.css +101 -2
- package/dist/247420.css +224 -2
- package/dist/247420.js +12 -12
- package/package.json +1 -1
- package/src/community-app.js +219 -0
- package/src/components/agent-chat.js +156 -0
- package/src/components/chat.js +12 -2
- package/src/components.js +4 -0
package/chat.css
CHANGED
|
@@ -1,2 +1,101 @@
|
|
|
1
|
-
/* chat.css — chat-specific styles.
|
|
2
|
-
|
|
1
|
+
/* chat.css — chat-specific styles. Most chat styles live in app-shell.css under
|
|
2
|
+
the .chat-* prefix. This file carries the AgentChat kit styles (the reusable
|
|
3
|
+
multi-agent orchestration chat surface). */
|
|
4
|
+
|
|
5
|
+
.agentchat {
|
|
6
|
+
display: flex;
|
|
7
|
+
flex-direction: column;
|
|
8
|
+
min-height: 0;
|
|
9
|
+
flex: 1;
|
|
10
|
+
gap: var(--space-2, 8px);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
/* agent + model picker, new/stop, status — wraps on narrow widths */
|
|
14
|
+
.agentchat-controls {
|
|
15
|
+
display: flex;
|
|
16
|
+
align-items: center;
|
|
17
|
+
flex-wrap: wrap;
|
|
18
|
+
gap: var(--space-2, 8px);
|
|
19
|
+
}
|
|
20
|
+
.agentchat-controls .select,
|
|
21
|
+
.agentchat-controls [role="combobox"] { min-width: 130px; max-width: 240px; }
|
|
22
|
+
|
|
23
|
+
.agentchat-status {
|
|
24
|
+
display: inline-flex;
|
|
25
|
+
align-items: center;
|
|
26
|
+
gap: .4em;
|
|
27
|
+
white-space: nowrap;
|
|
28
|
+
margin-left: auto;
|
|
29
|
+
font-size: .85em;
|
|
30
|
+
color: var(--muted, #8a8f98);
|
|
31
|
+
}
|
|
32
|
+
/* status disc — a CSS-drawn dot, not a glyph; pulses while streaming */
|
|
33
|
+
.agentchat-status .status-dot-disc {
|
|
34
|
+
flex: none; width: 8px; height: 8px; border-radius: 50%;
|
|
35
|
+
background: var(--muted, #8a8f98);
|
|
36
|
+
}
|
|
37
|
+
.agentchat-status .status-dot-disc.status-dot-live {
|
|
38
|
+
background: var(--accent, #50c878);
|
|
39
|
+
animation: agentchat-pulse 2s infinite;
|
|
40
|
+
}
|
|
41
|
+
@keyframes agentchat-pulse {
|
|
42
|
+
0% { box-shadow: 0 0 0 0 rgba(80, 200, 120, .5); }
|
|
43
|
+
70% { box-shadow: 0 0 0 6px rgba(80, 200, 120, 0); }
|
|
44
|
+
100% { box-shadow: 0 0 0 0 rgba(80, 200, 120, 0); }
|
|
45
|
+
}
|
|
46
|
+
@media (prefers-reduced-motion: reduce) {
|
|
47
|
+
.agentchat-status .status-dot-disc { animation: none !important; }
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/* working-directory bar */
|
|
51
|
+
.agentchat-cwd {
|
|
52
|
+
display: flex;
|
|
53
|
+
align-items: center;
|
|
54
|
+
gap: var(--space-2, 8px);
|
|
55
|
+
font-size: .85em;
|
|
56
|
+
color: var(--muted, #8a8f98);
|
|
57
|
+
flex-wrap: wrap;
|
|
58
|
+
}
|
|
59
|
+
.agentchat-cwd-text {
|
|
60
|
+
overflow: hidden;
|
|
61
|
+
text-overflow: ellipsis;
|
|
62
|
+
white-space: nowrap;
|
|
63
|
+
max-width: 60ch;
|
|
64
|
+
}
|
|
65
|
+
.agentchat-cwd-btn {
|
|
66
|
+
background: none;
|
|
67
|
+
border: 1px solid var(--border, #2a2f3a);
|
|
68
|
+
color: inherit;
|
|
69
|
+
border-radius: 6px;
|
|
70
|
+
padding: 2px 8px;
|
|
71
|
+
cursor: pointer;
|
|
72
|
+
font: inherit;
|
|
73
|
+
}
|
|
74
|
+
.agentchat-cwd-btn:hover { border-color: var(--accent, #50c878); }
|
|
75
|
+
.agentchat-cwd-input {
|
|
76
|
+
flex: 1;
|
|
77
|
+
min-width: 12ch;
|
|
78
|
+
background: var(--surface, #11151c);
|
|
79
|
+
border: 1px solid var(--border, #2a2f3a);
|
|
80
|
+
color: var(--text, #e6e9ee);
|
|
81
|
+
border-radius: 6px;
|
|
82
|
+
padding: 4px 8px;
|
|
83
|
+
font: inherit;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/* head + thread */
|
|
87
|
+
.agentchat-head {
|
|
88
|
+
display: flex;
|
|
89
|
+
align-items: baseline;
|
|
90
|
+
gap: .5em;
|
|
91
|
+
}
|
|
92
|
+
.agentchat-title { font-size: 1em; margin: 0; }
|
|
93
|
+
.agentchat-sub { font-size: .85em; color: var(--muted, #8a8f98); }
|
|
94
|
+
.agentchat-thread {
|
|
95
|
+
flex: 1;
|
|
96
|
+
min-height: 0;
|
|
97
|
+
overflow-y: auto;
|
|
98
|
+
display: flex;
|
|
99
|
+
flex-direction: column;
|
|
100
|
+
gap: var(--space-2, 8px);
|
|
101
|
+
}
|
package/dist/247420.css
CHANGED
|
@@ -4522,8 +4522,107 @@
|
|
|
4522
4522
|
}
|
|
4523
4523
|
|
|
4524
4524
|
/* chat.css */
|
|
4525
|
-
/* chat.css — chat-specific styles.
|
|
4526
|
-
|
|
4525
|
+
/* chat.css — chat-specific styles. Most chat styles live in app-shell.css under
|
|
4526
|
+
the .chat-* prefix. This file carries the AgentChat kit styles (the reusable
|
|
4527
|
+
multi-agent orchestration chat surface). */
|
|
4528
|
+
|
|
4529
|
+
.ds-247420 .agentchat {
|
|
4530
|
+
display: flex;
|
|
4531
|
+
flex-direction: column;
|
|
4532
|
+
min-height: 0;
|
|
4533
|
+
flex: 1;
|
|
4534
|
+
gap: var(--space-2, 8px);
|
|
4535
|
+
}
|
|
4536
|
+
|
|
4537
|
+
/* agent + model picker, new/stop, status — wraps on narrow widths */
|
|
4538
|
+
.ds-247420 .agentchat-controls {
|
|
4539
|
+
display: flex;
|
|
4540
|
+
align-items: center;
|
|
4541
|
+
flex-wrap: wrap;
|
|
4542
|
+
gap: var(--space-2, 8px);
|
|
4543
|
+
}
|
|
4544
|
+
.ds-247420 .agentchat-controls .select,
|
|
4545
|
+
.ds-247420 .agentchat-controls [role="combobox"] { min-width: 130px; max-width: 240px; }
|
|
4546
|
+
|
|
4547
|
+
.ds-247420 .agentchat-status {
|
|
4548
|
+
display: inline-flex;
|
|
4549
|
+
align-items: center;
|
|
4550
|
+
gap: .4em;
|
|
4551
|
+
white-space: nowrap;
|
|
4552
|
+
margin-left: auto;
|
|
4553
|
+
font-size: .85em;
|
|
4554
|
+
color: var(--muted, #8a8f98);
|
|
4555
|
+
}
|
|
4556
|
+
/* status disc — a CSS-drawn dot, not a glyph; pulses while streaming */
|
|
4557
|
+
.ds-247420 .agentchat-status .status-dot-disc {
|
|
4558
|
+
flex: none; width: 8px; height: 8px; border-radius: 50%;
|
|
4559
|
+
background: var(--muted, #8a8f98);
|
|
4560
|
+
}
|
|
4561
|
+
.ds-247420 .agentchat-status .status-dot-disc.status-dot-live {
|
|
4562
|
+
background: var(--accent, #50c878);
|
|
4563
|
+
animation: agentchat-pulse 2s infinite;
|
|
4564
|
+
}
|
|
4565
|
+
@keyframes agentchat-pulse {
|
|
4566
|
+
0% { box-shadow: 0 0 0 0 rgba(80, 200, 120, .5); }
|
|
4567
|
+
70% { box-shadow: 0 0 0 6px rgba(80, 200, 120, 0); }
|
|
4568
|
+
100% { box-shadow: 0 0 0 0 rgba(80, 200, 120, 0); }
|
|
4569
|
+
}
|
|
4570
|
+
@media (prefers-reduced-motion: reduce) {
|
|
4571
|
+
.ds-247420 .agentchat-status .status-dot-disc { animation: none !important; }
|
|
4572
|
+
}
|
|
4573
|
+
|
|
4574
|
+
/* working-directory bar */
|
|
4575
|
+
.ds-247420 .agentchat-cwd {
|
|
4576
|
+
display: flex;
|
|
4577
|
+
align-items: center;
|
|
4578
|
+
gap: var(--space-2, 8px);
|
|
4579
|
+
font-size: .85em;
|
|
4580
|
+
color: var(--muted, #8a8f98);
|
|
4581
|
+
flex-wrap: wrap;
|
|
4582
|
+
}
|
|
4583
|
+
.ds-247420 .agentchat-cwd-text {
|
|
4584
|
+
overflow: hidden;
|
|
4585
|
+
text-overflow: ellipsis;
|
|
4586
|
+
white-space: nowrap;
|
|
4587
|
+
max-width: 60ch;
|
|
4588
|
+
}
|
|
4589
|
+
.ds-247420 .agentchat-cwd-btn {
|
|
4590
|
+
background: none;
|
|
4591
|
+
border: 1px solid var(--border, #2a2f3a);
|
|
4592
|
+
color: inherit;
|
|
4593
|
+
border-radius: 6px;
|
|
4594
|
+
padding: 2px 8px;
|
|
4595
|
+
cursor: pointer;
|
|
4596
|
+
font: inherit;
|
|
4597
|
+
}
|
|
4598
|
+
.ds-247420 .agentchat-cwd-btn:hover { border-color: var(--accent, #50c878); }
|
|
4599
|
+
.ds-247420 .agentchat-cwd-input {
|
|
4600
|
+
flex: 1;
|
|
4601
|
+
min-width: 12ch;
|
|
4602
|
+
background: var(--surface, #11151c);
|
|
4603
|
+
border: 1px solid var(--border, #2a2f3a);
|
|
4604
|
+
color: var(--text, #e6e9ee);
|
|
4605
|
+
border-radius: 6px;
|
|
4606
|
+
padding: 4px 8px;
|
|
4607
|
+
font: inherit;
|
|
4608
|
+
}
|
|
4609
|
+
|
|
4610
|
+
/* head + thread */
|
|
4611
|
+
.ds-247420 .agentchat-head {
|
|
4612
|
+
display: flex;
|
|
4613
|
+
align-items: baseline;
|
|
4614
|
+
gap: .5em;
|
|
4615
|
+
}
|
|
4616
|
+
.ds-247420 .agentchat-title { font-size: 1em; margin: 0; }
|
|
4617
|
+
.ds-247420 .agentchat-sub { font-size: .85em; color: var(--muted, #8a8f98); }
|
|
4618
|
+
.ds-247420 .agentchat-thread {
|
|
4619
|
+
flex: 1;
|
|
4620
|
+
min-height: 0;
|
|
4621
|
+
overflow-y: auto;
|
|
4622
|
+
display: flex;
|
|
4623
|
+
flex-direction: column;
|
|
4624
|
+
gap: var(--space-2, 8px);
|
|
4625
|
+
}
|
|
4527
4626
|
|
|
4528
4627
|
/* editor-primitives.css */
|
|
4529
4628
|
/* editor-primitives.css — chrome for in-engine editors, inspectors, IDEs,
|
|
@@ -5427,3 +5526,126 @@
|
|
|
5427
5526
|
.ds-247420 .ov-lightbox-stage { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); max-width: 92vw; max-height: 90vh; }
|
|
5428
5527
|
.ds-247420 .ov-lightbox-video { max-width: 92vw; max-height: 82vh; border-radius: var(--r-1); background: #000; }
|
|
5429
5528
|
.ds-247420 .ov-lightbox-label { color: #fff; font-size: var(--fs-0, 12px); opacity: .85; }
|
|
5529
|
+
|
|
5530
|
+
/* community-app.css */
|
|
5531
|
+
/* community-app.css — layout glue for mountCommunityApp (the full chat/community
|
|
5532
|
+
app GUI). Reuses the canonical app/body/main classes from app-shell.css and
|
|
5533
|
+
the community + voice component classes from community.css; this part only adds
|
|
5534
|
+
the app-composition wrapper, the server+channel rail pills, the voice view grid,
|
|
5535
|
+
and the category-color tokens the consumer avatars use. All scoped under
|
|
5536
|
+
.ds-247420. Additive — defines only the ca- prefix, group, rail-empty, vx-view
|
|
5537
|
+
classes plus the cat color tokens. */
|
|
5538
|
+
|
|
5539
|
+
.ds-247420 {
|
|
5540
|
+
--cat-green: #3F8A4A;
|
|
5541
|
+
--cat-purple: #6B3A78;
|
|
5542
|
+
--cat-mascot: #F07AA8;
|
|
5543
|
+
--cat-sun: #FFD86B;
|
|
5544
|
+
--cat-flame: #FF8454;
|
|
5545
|
+
--cat-sky: #6FA9FF;
|
|
5546
|
+
}
|
|
5547
|
+
|
|
5548
|
+
.ds-247420.ds-247420 .ca-app {
|
|
5549
|
+
display: flex;
|
|
5550
|
+
flex-direction: column;
|
|
5551
|
+
height: 100vh;
|
|
5552
|
+
min-height: 0;
|
|
5553
|
+
overflow: hidden;
|
|
5554
|
+
}
|
|
5555
|
+
.ds-247420.ds-247420 .ca-app > .app-body {
|
|
5556
|
+
display: flex;
|
|
5557
|
+
flex-direction: row;
|
|
5558
|
+
flex: 1;
|
|
5559
|
+
min-height: 0;
|
|
5560
|
+
overflow: hidden;
|
|
5561
|
+
}
|
|
5562
|
+
.ds-247420.ds-247420 .ca-app > .app-body > .app-main {
|
|
5563
|
+
display: flex;
|
|
5564
|
+
flex-direction: column;
|
|
5565
|
+
flex: 1;
|
|
5566
|
+
min-width: 0;
|
|
5567
|
+
min-height: 0;
|
|
5568
|
+
overflow: hidden;
|
|
5569
|
+
padding: 0;
|
|
5570
|
+
}
|
|
5571
|
+
|
|
5572
|
+
/* server + channel rail */
|
|
5573
|
+
.ds-247420.ds-247420 .ca-rail {
|
|
5574
|
+
display: flex;
|
|
5575
|
+
flex-direction: column;
|
|
5576
|
+
gap: 2px;
|
|
5577
|
+
width: 220px;
|
|
5578
|
+
min-width: 220px;
|
|
5579
|
+
padding: 8px;
|
|
5580
|
+
overflow-y: auto;
|
|
5581
|
+
overflow-x: hidden;
|
|
5582
|
+
background: var(--bg-2, color-mix(in oklab, var(--bg) 92%, var(--fg)));
|
|
5583
|
+
scrollbar-width: thin;
|
|
5584
|
+
}
|
|
5585
|
+
.ds-247420.ds-247420 .ca-rail .group {
|
|
5586
|
+
font-size: 11px;
|
|
5587
|
+
font-weight: 600;
|
|
5588
|
+
letter-spacing: 0.04em;
|
|
5589
|
+
text-transform: uppercase;
|
|
5590
|
+
color: var(--fg-3, color-mix(in oklab, var(--fg) 55%, transparent));
|
|
5591
|
+
padding: 10px 8px 4px;
|
|
5592
|
+
}
|
|
5593
|
+
.ds-247420.ds-247420 .ca-rail a {
|
|
5594
|
+
display: flex;
|
|
5595
|
+
align-items: center;
|
|
5596
|
+
gap: 8px;
|
|
5597
|
+
padding: 6px 8px;
|
|
5598
|
+
border-radius: 6px;
|
|
5599
|
+
color: var(--fg-2, color-mix(in oklab, var(--fg) 78%, transparent));
|
|
5600
|
+
text-decoration: none;
|
|
5601
|
+
font-size: var(--fs-sm, 14px);
|
|
5602
|
+
line-height: 1.2;
|
|
5603
|
+
transition: background 0.1s, color 0.1s;
|
|
5604
|
+
}
|
|
5605
|
+
.ds-247420.ds-247420 .ca-rail a:hover { background: color-mix(in oklab, var(--fg) 8%, transparent); color: var(--fg); }
|
|
5606
|
+
.ds-247420.ds-247420 .ca-rail a.active { background: color-mix(in oklab, var(--accent) 22%, transparent); color: var(--fg); }
|
|
5607
|
+
.ds-247420.ds-247420 .ca-rail a .glyph {
|
|
5608
|
+
display: inline-flex;
|
|
5609
|
+
align-items: center;
|
|
5610
|
+
justify-content: center;
|
|
5611
|
+
width: 18px;
|
|
5612
|
+
flex-shrink: 0;
|
|
5613
|
+
color: var(--fg-3, currentColor);
|
|
5614
|
+
}
|
|
5615
|
+
.ds-247420.ds-247420 .ca-rail a > span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
5616
|
+
.ds-247420.ds-247420 .ca-rail a .count {
|
|
5617
|
+
flex-shrink: 0;
|
|
5618
|
+
min-width: 18px;
|
|
5619
|
+
padding: 0 5px;
|
|
5620
|
+
border-radius: 9px;
|
|
5621
|
+
background: var(--accent);
|
|
5622
|
+
color: var(--green-fg, #fff);
|
|
5623
|
+
font-size: 11px;
|
|
5624
|
+
font-weight: 600;
|
|
5625
|
+
text-align: center;
|
|
5626
|
+
}
|
|
5627
|
+
.ds-247420.ds-247420 .ca-rail .rail-empty {
|
|
5628
|
+
padding: 8px;
|
|
5629
|
+
color: var(--fg-3, color-mix(in oklab, var(--fg) 50%, transparent));
|
|
5630
|
+
font-size: var(--fs-sm, 14px);
|
|
5631
|
+
font-style: italic;
|
|
5632
|
+
}
|
|
5633
|
+
|
|
5634
|
+
/* voice channel view */
|
|
5635
|
+
.ds-247420.ds-247420 .vx-view {
|
|
5636
|
+
display: flex;
|
|
5637
|
+
flex-direction: column;
|
|
5638
|
+
flex: 1;
|
|
5639
|
+
min-height: 0;
|
|
5640
|
+
overflow: hidden;
|
|
5641
|
+
}
|
|
5642
|
+
.ds-247420.ds-247420 .vx-view .vx-grid {
|
|
5643
|
+
display: grid;
|
|
5644
|
+
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
|
5645
|
+
gap: 12px;
|
|
5646
|
+
flex: 1;
|
|
5647
|
+
min-height: 0;
|
|
5648
|
+
padding: 16px;
|
|
5649
|
+
overflow-y: auto;
|
|
5650
|
+
align-content: start;
|
|
5651
|
+
}
|