bunnyquery 1.2.2 → 1.3.0

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.
@@ -0,0 +1,194 @@
1
+ /**
2
+ * @skapi/chat-engine — shared chat-display styles.
3
+ *
4
+ * The conversation surface (message bubbles, rendered markdown, in-bubble file/
5
+ * link anchors, the queue/cancel affordances) must look IDENTICAL in agent.vue
6
+ * (the Vue admin chatbox) and the BunnyQuery widget. These rules are authored
7
+ * ONCE here and consumed by both:
8
+ * - agent.vue imports this file as a NON-scoped <style> block (so the rules
9
+ * also reach the v-html `.bq-md` markdown, which has no scope attribute).
10
+ * - the widget concatenates it into the shipped bunnyquery.css at build time.
11
+ *
12
+ * Each consumer supplies the `--bq-*` design tokens (light + dark) and keeps its
13
+ * OWN container/layout rules — `.bq-chat`, `.bq-messages` padding, the
14
+ * `.bq-history-loading` treatment, the empty-greeting, and the bubble max-width
15
+ * — which legitimately differ between an embedded admin panel and a standalone
16
+ * widget. Colors here are theme-reactive (tokens + rgba(127,127,127,…) neutral
17
+ * transparency) so the surface works in both light and dark schemes.
18
+ *
19
+ * Token contract (the consumer must define these): --bq-paper, --bq-line,
20
+ * --bq-muted, --bq-main, --bq-success-bg, --bq-success-border, --bq-danger,
21
+ * --bq-danger-bg, --bq-warning, --bq-warning-bg, --bq-warning-border,
22
+ * --bq-code-bg, --bq-code-fg.
23
+ */
24
+
25
+ /* ---- messages + bubbles --------------------------------------------------*/
26
+ .bq-message { display: flex; margin-bottom: 0.5rem; }
27
+ .bq-message.is-user { justify-content: flex-end; }
28
+ .bq-message.is-assistant { justify-content: flex-start; }
29
+
30
+ .bq-bubble {
31
+ padding: 0.55rem 0.7rem;
32
+ border: 1px solid var(--bq-line);
33
+ white-space: pre-wrap;
34
+ line-height: 1.45;
35
+ font-size: 0.83rem;
36
+ background: var(--bq-paper);
37
+ }
38
+ .bq-bubble span { word-break: break-word; }
39
+ .bq-message.is-user .bq-bubble { background: var(--bq-paper); }
40
+ .bq-message.is-assistant:not(.is-error) .bq-bubble {
41
+ background: var(--bq-success-bg);
42
+ border-color: var(--bq-success-border);
43
+ }
44
+ .bq-message.is-error .bq-bubble {
45
+ background: var(--bq-danger-bg);
46
+ border-color: var(--bq-danger);
47
+ color: var(--bq-danger);
48
+ }
49
+ .bq-message.is-cancelled .bq-bubble {
50
+ background: var(--bq-danger-bg);
51
+ border-color: var(--bq-danger);
52
+ color: var(--bq-danger);
53
+ opacity: 0.65;
54
+ }
55
+ .bq-message.is-pending-older .bq-bubble {
56
+ background: var(--bq-warning-bg);
57
+ border-color: var(--bq-warning-border);
58
+ color: var(--bq-warning);
59
+ transition: opacity 0.25s ease;
60
+ }
61
+ .bq-message.is-sending-to-server .bq-bubble { opacity: 0.4; }
62
+
63
+ /* ---- queue / cancel affordances -----------------------------------------*/
64
+ .bq-pending-note {
65
+ display: block;
66
+ margin-top: 0.35rem;
67
+ font-size: 0.7rem;
68
+ color: var(--bq-warning);
69
+ font-style: italic;
70
+ }
71
+ .bq-cancel-error {
72
+ display: block;
73
+ margin-top: 0.3rem;
74
+ font-size: 0.68rem;
75
+ color: var(--bq-danger);
76
+ font-style: italic;
77
+ clear: both;
78
+ }
79
+ .bq-cancel-queue-btn {
80
+ float: right;
81
+ margin: -0.25rem -0.25rem 0.2rem 0.4rem;
82
+ width: 1.1rem;
83
+ height: 1.1rem;
84
+ min-height: 0;
85
+ display: inline-flex;
86
+ align-items: center;
87
+ justify-content: center;
88
+ padding: 0;
89
+ border: 1px solid var(--bq-warning-border);
90
+ background: transparent;
91
+ color: var(--bq-warning);
92
+ font-size: 0.85rem;
93
+ line-height: 1;
94
+ cursor: pointer;
95
+ box-shadow: none;
96
+ border-radius: 0;
97
+ flex-shrink: 0;
98
+ }
99
+ .bq-cancel-queue-btn:hover:not(.is-disabled) { background: var(--bq-warning-bg); color: var(--bq-warning); }
100
+ .bq-cancel-queue-btn.is-disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }
101
+
102
+ /* ---- in-bubble file / link anchors --------------------------------------*/
103
+ .bq-file-download,
104
+ .bq-link-button {
105
+ color: var(--bq-main);
106
+ text-decoration: none;
107
+ cursor: pointer;
108
+ background: transparent;
109
+ border: 0;
110
+ padding: 0;
111
+ font: inherit;
112
+ }
113
+ .bq-file-download:hover,
114
+ .bq-link-button:hover { color: var(--bq-main); text-decoration: underline; background: transparent; }
115
+ .bq-link-button {
116
+ display: inline-block;
117
+ max-width: 100%;
118
+ overflow: hidden;
119
+ text-overflow: ellipsis;
120
+ white-space: nowrap;
121
+ vertical-align: bottom;
122
+ }
123
+ /* While the temporary URL is being re-resolved the click is swallowed — show a
124
+ busy cursor and dim it so it reads as "working, don't click again". */
125
+ .bq-link-button.is-refreshing { cursor: progress; opacity: 0.6; }
126
+
127
+ /* ---- rendered-markdown body ----------------------------------------------*/
128
+ /* Overrides the bubble's `white-space: pre-wrap` since marked already produces
129
+ structural HTML; pre/code reinstate pre-wrap for their own content. */
130
+ .bq-md { white-space: normal; word-break: break-word; }
131
+ .bq-md > :first-child { margin-top: 0; }
132
+ .bq-md > :last-child { margin-bottom: 0; }
133
+ .bq-md p { margin: 0.4em 0; }
134
+ .bq-md h1 { font-size: 1.3em; }
135
+ .bq-md h2 { font-size: 1.18em; }
136
+ .bq-md h3 { font-size: 1.08em; }
137
+ .bq-md h4, .bq-md h5, .bq-md h6 { font-size: 1em; }
138
+ .bq-md h1, .bq-md h2, .bq-md h3, .bq-md h4, .bq-md h5, .bq-md h6 {
139
+ margin: 0.8em 0 0.35em;
140
+ line-height: 1.25;
141
+ font-weight: 600;
142
+ }
143
+ .bq-md ul, .bq-md ol { margin: 0.4em 0; padding-left: 1.4em; }
144
+ .bq-md li { margin: 0.15em 0; }
145
+ .bq-md li > p { margin: 0.2em 0; }
146
+ .bq-md blockquote {
147
+ margin: 0.5em 0;
148
+ padding: 0.2em 0.8em;
149
+ border-left: 3px solid var(--bq-line);
150
+ color: var(--bq-muted);
151
+ background: rgba(127, 127, 127, 0.08);
152
+ }
153
+ .bq-md hr { border: none; border-top: 1px solid var(--bq-line); margin: 0.8em 0; }
154
+ .bq-md a { color: var(--bq-main); text-decoration: underline; }
155
+ .bq-md a:hover { text-decoration: none; }
156
+ .bq-md code {
157
+ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
158
+ font-size: 0.9em;
159
+ padding: 0.1em 0.35em;
160
+ background: rgba(127, 127, 127, 0.16);
161
+ border-radius: 0;
162
+ white-space: pre-wrap;
163
+ word-break: break-word;
164
+ }
165
+ .bq-md pre {
166
+ margin: 0.5em 0;
167
+ padding: 0.6em 0.8em;
168
+ background: var(--bq-code-bg);
169
+ color: var(--bq-code-fg);
170
+ border-radius: 0;
171
+ overflow-x: auto;
172
+ white-space: pre;
173
+ }
174
+ .bq-md pre code {
175
+ background: transparent;
176
+ color: inherit;
177
+ padding: 0;
178
+ font-size: 0.85em;
179
+ white-space: pre;
180
+ word-break: normal;
181
+ }
182
+ .bq-md table {
183
+ border-collapse: collapse;
184
+ margin: 0.5em 0;
185
+ font-size: 0.95em;
186
+ display: block;
187
+ overflow-x: auto;
188
+ }
189
+ .bq-md th, .bq-md td { border: 1px solid var(--bq-line); padding: 0.3em 0.55em; text-align: left; }
190
+ .bq-md th { background: rgba(127, 127, 127, 0.1); font-weight: 600; }
191
+ .bq-md img { max-width: 100%; height: auto; border-radius: 4px; }
192
+ .bq-md strong { font-weight: 600; }
193
+ .bq-md em { font-style: italic; }
194
+ .bq-md del { text-decoration: line-through; }