@bikdotai/bik-component-library 0.0.862 → 0.0.863-beta.1
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/dist/cjs/components/bik-copilot/BIKCopilot.js +2 -0
- package/dist/cjs/components/bik-copilot/BIKCopilot.js.map +1 -0
- package/dist/cjs/components/bik-copilot/ControlledCopilot.js +2 -0
- package/dist/cjs/components/bik-copilot/ControlledCopilot.js.map +1 -0
- package/dist/cjs/components/bik-copilot/ControlledCopilot.styled.js +27 -0
- package/dist/cjs/components/bik-copilot/ControlledCopilot.styled.js.map +1 -0
- package/dist/cjs/components/bik-copilot/CopilotBall.js +2 -0
- package/dist/cjs/components/bik-copilot/CopilotBall.js.map +1 -0
- package/dist/cjs/components/bik-copilot/CopilotBall.styled.js +42 -0
- package/dist/cjs/components/bik-copilot/CopilotBall.styled.js.map +1 -0
- package/dist/cjs/components/bik-copilot/CopilotPanel.js +2 -0
- package/dist/cjs/components/bik-copilot/CopilotPanel.js.map +1 -0
- package/dist/cjs/components/bik-copilot/CopilotPanel.styled.js +460 -0
- package/dist/cjs/components/bik-copilot/CopilotPanel.styled.js.map +1 -0
- package/dist/cjs/components/bik-copilot/copilotPlacement.js +2 -0
- package/dist/cjs/components/bik-copilot/copilotPlacement.js.map +1 -0
- package/dist/cjs/components/bik-copilot/services/copilotDb.js +2 -0
- package/dist/cjs/components/bik-copilot/services/copilotDb.js.map +1 -0
- package/dist/cjs/components/bik-copilot/services/copilotIcebreakersClient.js +2 -0
- package/dist/cjs/components/bik-copilot/services/copilotIcebreakersClient.js.map +1 -0
- package/dist/cjs/components/bik-copilot/services/copilotMessagesClient.js +2 -0
- package/dist/cjs/components/bik-copilot/services/copilotMessagesClient.js.map +1 -0
- package/dist/cjs/components/bik-copilot/services/copilotPageSession.js +2 -0
- package/dist/cjs/components/bik-copilot/services/copilotPageSession.js.map +1 -0
- package/dist/cjs/components/bik-copilot/services/copilotSseParser.js +7 -0
- package/dist/cjs/components/bik-copilot/services/copilotSseParser.js.map +1 -0
- package/dist/cjs/components/bik-copilot/services/copilotStreamClient.js +2 -0
- package/dist/cjs/components/bik-copilot/services/copilotStreamClient.js.map +1 -0
- package/dist/cjs/components/bik-copilot/useCopilotIcebreakers.js +2 -0
- package/dist/cjs/components/bik-copilot/useCopilotIcebreakers.js.map +1 -0
- package/dist/cjs/components/bik-copilot/useCopilotStreamChat.js +2 -0
- package/dist/cjs/components/bik-copilot/useCopilotStreamChat.js.map +1 -0
- package/dist/cjs/components/bik-copilot/useDraggableFloater.js +2 -0
- package/dist/cjs/components/bik-copilot/useDraggableFloater.js.map +1 -0
- package/dist/cjs/index.js +1 -1
- package/dist/esm/components/bik-copilot/BIKCopilot.d.ts +32 -0
- package/dist/esm/components/bik-copilot/BIKCopilot.js +114 -0
- package/dist/esm/components/bik-copilot/BIKCopilot.js.map +1 -0
- package/dist/esm/components/bik-copilot/ControlledCopilot.d.ts +14 -0
- package/dist/esm/components/bik-copilot/ControlledCopilot.js +170 -0
- package/dist/esm/components/bik-copilot/ControlledCopilot.js.map +1 -0
- package/dist/esm/components/bik-copilot/ControlledCopilot.styled.d.ts +7 -0
- package/dist/esm/components/bik-copilot/ControlledCopilot.styled.js +31 -0
- package/dist/esm/components/bik-copilot/ControlledCopilot.styled.js.map +1 -0
- package/dist/esm/components/bik-copilot/CopilotBall.d.ts +13 -0
- package/dist/esm/components/bik-copilot/CopilotBall.js +50 -0
- package/dist/esm/components/bik-copilot/CopilotBall.js.map +1 -0
- package/dist/esm/components/bik-copilot/CopilotBall.styled.d.ts +9 -0
- package/dist/esm/components/bik-copilot/CopilotBall.styled.js +46 -0
- package/dist/esm/components/bik-copilot/CopilotBall.styled.js.map +1 -0
- package/dist/esm/components/bik-copilot/CopilotPanel.d.ts +9 -0
- package/dist/esm/components/bik-copilot/CopilotPanel.js +379 -0
- package/dist/esm/components/bik-copilot/CopilotPanel.js.map +1 -0
- package/dist/esm/components/bik-copilot/CopilotPanel.styled.d.ts +64 -0
- package/dist/esm/components/bik-copilot/CopilotPanel.styled.js +496 -0
- package/dist/esm/components/bik-copilot/CopilotPanel.styled.js.map +1 -0
- package/dist/esm/components/bik-copilot/copilotPlacement.d.ts +24 -0
- package/dist/esm/components/bik-copilot/copilotPlacement.js +38 -0
- package/dist/esm/components/bik-copilot/copilotPlacement.js.map +1 -0
- package/dist/esm/components/bik-copilot/index.d.ts +16 -0
- package/dist/esm/components/bik-copilot/model.d.ts +674 -0
- package/dist/esm/components/bik-copilot/services/copilotDb.d.ts +90 -0
- package/dist/esm/components/bik-copilot/services/copilotDb.js +96 -0
- package/dist/esm/components/bik-copilot/services/copilotDb.js.map +1 -0
- package/dist/esm/components/bik-copilot/services/copilotIcebreakersClient.d.ts +11 -0
- package/dist/esm/components/bik-copilot/services/copilotIcebreakersClient.js +54 -0
- package/dist/esm/components/bik-copilot/services/copilotIcebreakersClient.js.map +1 -0
- package/dist/esm/components/bik-copilot/services/copilotMessagesClient.d.ts +23 -0
- package/dist/esm/components/bik-copilot/services/copilotMessagesClient.js +78 -0
- package/dist/esm/components/bik-copilot/services/copilotMessagesClient.js.map +1 -0
- package/dist/esm/components/bik-copilot/services/copilotPageSession.d.ts +37 -0
- package/dist/esm/components/bik-copilot/services/copilotPageSession.js +35 -0
- package/dist/esm/components/bik-copilot/services/copilotPageSession.js.map +1 -0
- package/dist/esm/components/bik-copilot/services/copilotSseParser.d.ts +22 -0
- package/dist/esm/components/bik-copilot/services/copilotSseParser.js +52 -0
- package/dist/esm/components/bik-copilot/services/copilotSseParser.js.map +1 -0
- package/dist/esm/components/bik-copilot/services/copilotStreamClient.d.ts +31 -0
- package/dist/esm/components/bik-copilot/services/copilotStreamClient.js +103 -0
- package/dist/esm/components/bik-copilot/services/copilotStreamClient.js.map +1 -0
- package/dist/esm/components/bik-copilot/useCopilotIcebreakers.d.ts +17 -0
- package/dist/esm/components/bik-copilot/useCopilotIcebreakers.js +60 -0
- package/dist/esm/components/bik-copilot/useCopilotIcebreakers.js.map +1 -0
- package/dist/esm/components/bik-copilot/useCopilotStreamChat.d.ts +20 -0
- package/dist/esm/components/bik-copilot/useCopilotStreamChat.js +333 -0
- package/dist/esm/components/bik-copilot/useCopilotStreamChat.js.map +1 -0
- package/dist/esm/components/bik-copilot/useDraggableFloater.d.ts +9 -0
- package/dist/esm/components/bik-copilot/useDraggableFloater.js +118 -0
- package/dist/esm/components/bik-copilot/useDraggableFloater.js.map +1 -0
- package/dist/esm/index.d.ts +1 -0
- package/dist/esm/index.js +832 -782
- package/dist/esm/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,496 @@
|
|
|
1
|
+
import t from "styled-components";
|
|
2
|
+
import { COLORS as e } from "../../constants/Theme.js";
|
|
3
|
+
const i = t.div`
|
|
4
|
+
display: flex;
|
|
5
|
+
flex-direction: column;
|
|
6
|
+
min-height: 0;
|
|
7
|
+
overflow: hidden;
|
|
8
|
+
background: ${e.surface.standard};
|
|
9
|
+
border: 1px solid ${e.stroke.primary};
|
|
10
|
+
border-radius: 16px;
|
|
11
|
+
box-shadow: 0 16px 48px rgba(40, 3, 78, 0.18);
|
|
12
|
+
`, a = t.div`
|
|
13
|
+
display: flex;
|
|
14
|
+
align-items: flex-start;
|
|
15
|
+
gap: 10px;
|
|
16
|
+
padding: 12px 12px 12px 16px;
|
|
17
|
+
border-bottom: 1px solid ${e.stroke.primary};
|
|
18
|
+
flex-shrink: 0;
|
|
19
|
+
`, s = t.div`
|
|
20
|
+
width: 32px;
|
|
21
|
+
height: 32px;
|
|
22
|
+
flex-shrink: 0;
|
|
23
|
+
border-radius: 8px;
|
|
24
|
+
background: ${e.background.base};
|
|
25
|
+
display: flex;
|
|
26
|
+
align-items: center;
|
|
27
|
+
justify-content: center;
|
|
28
|
+
color: ${e.content.brand};
|
|
29
|
+
overflow: hidden;
|
|
30
|
+
`, d = t.div`
|
|
31
|
+
display: flex;
|
|
32
|
+
flex-direction: column;
|
|
33
|
+
gap: 2px;
|
|
34
|
+
min-width: 0;
|
|
35
|
+
flex: 1;
|
|
36
|
+
`, l = t.div`
|
|
37
|
+
display: flex;
|
|
38
|
+
align-items: center;
|
|
39
|
+
gap: 6px;
|
|
40
|
+
`, p = t.span`
|
|
41
|
+
padding: 1px 6px;
|
|
42
|
+
border-radius: 4px;
|
|
43
|
+
background: ${e.background.brandLight};
|
|
44
|
+
color: ${e.content.brand};
|
|
45
|
+
font-size: 10px;
|
|
46
|
+
font-weight: 600;
|
|
47
|
+
line-height: 16px;
|
|
48
|
+
white-space: nowrap;
|
|
49
|
+
`, c = t.div`
|
|
50
|
+
display: flex;
|
|
51
|
+
align-items: center;
|
|
52
|
+
gap: 2px;
|
|
53
|
+
flex-shrink: 0;
|
|
54
|
+
`, x = t.button`
|
|
55
|
+
width: 28px;
|
|
56
|
+
height: 28px;
|
|
57
|
+
display: flex;
|
|
58
|
+
align-items: center;
|
|
59
|
+
justify-content: center;
|
|
60
|
+
padding: 0;
|
|
61
|
+
border: none;
|
|
62
|
+
border-radius: 6px;
|
|
63
|
+
background: transparent;
|
|
64
|
+
color: ${e.content.secondary};
|
|
65
|
+
cursor: pointer;
|
|
66
|
+
transition: background 0.15s ease, color 0.15s ease;
|
|
67
|
+
|
|
68
|
+
&:hover {
|
|
69
|
+
background: ${e.surface.hovered};
|
|
70
|
+
color: ${e.content.primary};
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
&:focus-visible {
|
|
74
|
+
outline: 2px solid ${e.stroke.brand};
|
|
75
|
+
outline-offset: 1px;
|
|
76
|
+
}
|
|
77
|
+
`, g = t.div`
|
|
78
|
+
position: relative;
|
|
79
|
+
flex: 1;
|
|
80
|
+
min-height: 0;
|
|
81
|
+
display: flex;
|
|
82
|
+
flex-direction: column;
|
|
83
|
+
`, b = t.div`
|
|
84
|
+
flex: 1;
|
|
85
|
+
min-height: 0;
|
|
86
|
+
overflow-y: auto;
|
|
87
|
+
padding: 16px;
|
|
88
|
+
display: flex;
|
|
89
|
+
flex-direction: column;
|
|
90
|
+
gap: 12px;
|
|
91
|
+
|
|
92
|
+
&::-webkit-scrollbar {
|
|
93
|
+
width: 6px;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
&::-webkit-scrollbar-thumb {
|
|
97
|
+
background: ${e.background.inactive};
|
|
98
|
+
border-radius: 3px;
|
|
99
|
+
}
|
|
100
|
+
`, f = t.div`
|
|
101
|
+
position: absolute;
|
|
102
|
+
left: 0;
|
|
103
|
+
right: 0;
|
|
104
|
+
bottom: 0;
|
|
105
|
+
height: 72px;
|
|
106
|
+
pointer-events: none;
|
|
107
|
+
opacity: ${(n) => n.$visible ? 1 : 0};
|
|
108
|
+
transition: opacity 0.2s ease;
|
|
109
|
+
background: linear-gradient(
|
|
110
|
+
to bottom,
|
|
111
|
+
${e.surface.standard}00 0%,
|
|
112
|
+
${e.surface.standard}B3 55%,
|
|
113
|
+
${e.surface.standard} 100%
|
|
114
|
+
);
|
|
115
|
+
|
|
116
|
+
&::after {
|
|
117
|
+
content: '';
|
|
118
|
+
position: absolute;
|
|
119
|
+
inset: 0;
|
|
120
|
+
backdrop-filter: blur(2px);
|
|
121
|
+
-webkit-backdrop-filter: blur(2px);
|
|
122
|
+
mask-image: linear-gradient(to bottom, transparent 0%, #000 60%);
|
|
123
|
+
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 60%);
|
|
124
|
+
}
|
|
125
|
+
`, u = t.button`
|
|
126
|
+
position: absolute;
|
|
127
|
+
left: 50%;
|
|
128
|
+
bottom: 12px;
|
|
129
|
+
transform: translateX(-50%)
|
|
130
|
+
translateY(${(n) => n.$visible ? "0" : "6px"});
|
|
131
|
+
width: 28px;
|
|
132
|
+
height: 28px;
|
|
133
|
+
display: flex;
|
|
134
|
+
align-items: center;
|
|
135
|
+
justify-content: center;
|
|
136
|
+
padding: 0;
|
|
137
|
+
border: 1px solid ${e.stroke.primary};
|
|
138
|
+
border-radius: 999px;
|
|
139
|
+
background: ${e.surface.standard};
|
|
140
|
+
color: ${e.content.secondary};
|
|
141
|
+
box-shadow: 0 2px 8px rgba(40, 3, 78, 0.16);
|
|
142
|
+
cursor: pointer;
|
|
143
|
+
opacity: ${(n) => n.$visible ? 1 : 0};
|
|
144
|
+
/* Hidden to the pointer and to focus order while it is faded out. */
|
|
145
|
+
visibility: ${(n) => n.$visible ? "visible" : "hidden"};
|
|
146
|
+
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease,
|
|
147
|
+
background 0.15s ease, color 0.15s ease;
|
|
148
|
+
|
|
149
|
+
&:hover {
|
|
150
|
+
background: ${e.surface.hovered};
|
|
151
|
+
color: ${e.content.primary};
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
&:focus-visible {
|
|
155
|
+
outline: 2px solid ${e.stroke.brand};
|
|
156
|
+
outline-offset: 1px;
|
|
157
|
+
}
|
|
158
|
+
`, h = t.div`
|
|
159
|
+
flex: 1;
|
|
160
|
+
display: flex;
|
|
161
|
+
flex-direction: column;
|
|
162
|
+
align-items: center;
|
|
163
|
+
justify-content: center;
|
|
164
|
+
gap: 8px;
|
|
165
|
+
text-align: center;
|
|
166
|
+
padding: 8px 4px;
|
|
167
|
+
`, m = t.div`
|
|
168
|
+
color: ${e.content.brand};
|
|
169
|
+
display: flex;
|
|
170
|
+
align-items: center;
|
|
171
|
+
justify-content: center;
|
|
172
|
+
margin-bottom: 4px;
|
|
173
|
+
`, y = t.div`
|
|
174
|
+
display: flex;
|
|
175
|
+
flex-direction: column;
|
|
176
|
+
align-items: center;
|
|
177
|
+
gap: 8px;
|
|
178
|
+
margin-top: 12px;
|
|
179
|
+
width: 100%;
|
|
180
|
+
`, k = t.button`
|
|
181
|
+
display: inline-flex;
|
|
182
|
+
align-items: center;
|
|
183
|
+
gap: 6px;
|
|
184
|
+
max-width: 100%;
|
|
185
|
+
padding: 8px 14px;
|
|
186
|
+
border: 1px solid ${e.stroke.primary};
|
|
187
|
+
border-radius: 999px;
|
|
188
|
+
background: ${e.surface.standard};
|
|
189
|
+
color: ${e.content.primary};
|
|
190
|
+
font-family: Inter;
|
|
191
|
+
font-size: 13px;
|
|
192
|
+
line-height: 18px;
|
|
193
|
+
text-align: left;
|
|
194
|
+
cursor: pointer;
|
|
195
|
+
transition: border-color 0.15s ease, background 0.15s ease;
|
|
196
|
+
|
|
197
|
+
svg {
|
|
198
|
+
flex-shrink: 0;
|
|
199
|
+
color: ${e.content.brand};
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
&:hover:not(:disabled) {
|
|
203
|
+
border-color: ${e.stroke.brand};
|
|
204
|
+
background: ${e.background.brandVeryLight};
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
&:disabled {
|
|
208
|
+
cursor: not-allowed;
|
|
209
|
+
opacity: 0.5;
|
|
210
|
+
}
|
|
211
|
+
`, $ = t.div`
|
|
212
|
+
font-family: Inter;
|
|
213
|
+
font-size: 13px;
|
|
214
|
+
line-height: 20px;
|
|
215
|
+
word-break: break-word;
|
|
216
|
+
overflow-wrap: break-word;
|
|
217
|
+
|
|
218
|
+
${(n) => n.$role === "user" ? `
|
|
219
|
+
align-self: flex-end;
|
|
220
|
+
max-width: 85%;
|
|
221
|
+
padding: 10px 14px;
|
|
222
|
+
border-radius: 12px;
|
|
223
|
+
border-bottom-right-radius: 4px;
|
|
224
|
+
background: ${e.background.brandLight};
|
|
225
|
+
color: ${e.content.primary};
|
|
226
|
+
` : n.$role === "system" ? `
|
|
227
|
+
align-self: center;
|
|
228
|
+
max-width: 90%;
|
|
229
|
+
padding: 6px 10px;
|
|
230
|
+
border-radius: 8px;
|
|
231
|
+
background: ${e.surface.grey};
|
|
232
|
+
color: ${e.content.secondary};
|
|
233
|
+
font-size: 12px;
|
|
234
|
+
text-align: center;
|
|
235
|
+
` : `
|
|
236
|
+
align-self: flex-start;
|
|
237
|
+
max-width: 90%;
|
|
238
|
+
padding: 10px 14px;
|
|
239
|
+
border-radius: 12px;
|
|
240
|
+
border-bottom-left-radius: 4px;
|
|
241
|
+
background: ${e.surface.grey};
|
|
242
|
+
color: ${e.content.primary};
|
|
243
|
+
border: 1px solid ${e.stroke.primary};
|
|
244
|
+
`}
|
|
245
|
+
|
|
246
|
+
/* Markdown emitted by renderMarkdownLite */
|
|
247
|
+
h1,
|
|
248
|
+
h2,
|
|
249
|
+
h3,
|
|
250
|
+
h4 {
|
|
251
|
+
font-size: 14px;
|
|
252
|
+
font-weight: 600;
|
|
253
|
+
margin: 4px 0;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
pre {
|
|
257
|
+
background: ${e.background.base};
|
|
258
|
+
border-radius: 6px;
|
|
259
|
+
padding: 8px;
|
|
260
|
+
margin: 6px 0;
|
|
261
|
+
overflow-x: auto;
|
|
262
|
+
font-size: 12px;
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
a {
|
|
266
|
+
color: ${e.content.brand};
|
|
267
|
+
}
|
|
268
|
+
`, v = t.div`
|
|
269
|
+
align-self: flex-start;
|
|
270
|
+
display: inline-flex;
|
|
271
|
+
align-items: center;
|
|
272
|
+
gap: 8px;
|
|
273
|
+
padding: 12px 14px;
|
|
274
|
+
border-radius: 12px;
|
|
275
|
+
border-bottom-left-radius: 4px;
|
|
276
|
+
background: ${e.surface.grey};
|
|
277
|
+
border: 1px solid ${e.stroke.primary};
|
|
278
|
+
`, w = t.div`
|
|
279
|
+
align-self: center;
|
|
280
|
+
display: inline-flex;
|
|
281
|
+
align-items: center;
|
|
282
|
+
gap: 8px;
|
|
283
|
+
padding: 4px 0;
|
|
284
|
+
font-family: Inter;
|
|
285
|
+
font-size: 11px;
|
|
286
|
+
line-height: 16px;
|
|
287
|
+
color: ${e.content.placeholder};
|
|
288
|
+
`, I = t.div`
|
|
289
|
+
display: flex;
|
|
290
|
+
flex-direction: column;
|
|
291
|
+
align-items: stretch;
|
|
292
|
+
gap: 8px;
|
|
293
|
+
margin-top: 4px;
|
|
294
|
+
`, z = t.div`
|
|
295
|
+
font-family: Inter;
|
|
296
|
+
font-size: 11px;
|
|
297
|
+
line-height: 16px;
|
|
298
|
+
color: ${e.content.placeholder};
|
|
299
|
+
`, L = t.button`
|
|
300
|
+
display: flex;
|
|
301
|
+
align-items: center;
|
|
302
|
+
gap: 8px;
|
|
303
|
+
width: 100%;
|
|
304
|
+
padding: 10px 14px;
|
|
305
|
+
border: 1px solid ${e.stroke.primary};
|
|
306
|
+
border-radius: 10px;
|
|
307
|
+
background: ${e.surface.standard};
|
|
308
|
+
color: ${e.content.primary};
|
|
309
|
+
font-family: Inter;
|
|
310
|
+
font-size: 13px;
|
|
311
|
+
line-height: 18px;
|
|
312
|
+
text-align: left;
|
|
313
|
+
cursor: pointer;
|
|
314
|
+
transition: border-color 0.15s ease, background 0.15s ease;
|
|
315
|
+
|
|
316
|
+
svg {
|
|
317
|
+
flex-shrink: 0;
|
|
318
|
+
color: ${e.content.secondary};
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
&:hover:not(:disabled) {
|
|
322
|
+
border-color: ${e.stroke.brand};
|
|
323
|
+
background: ${e.background.brandVeryLight};
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
&:disabled {
|
|
327
|
+
cursor: not-allowed;
|
|
328
|
+
opacity: 0.5;
|
|
329
|
+
}
|
|
330
|
+
`, H = t.div`
|
|
331
|
+
align-self: flex-start;
|
|
332
|
+
display: inline-flex;
|
|
333
|
+
align-items: center;
|
|
334
|
+
gap: 6px;
|
|
335
|
+
font-family: Inter;
|
|
336
|
+
font-size: 12px;
|
|
337
|
+
line-height: 18px;
|
|
338
|
+
color: ${e.content.secondary};
|
|
339
|
+
|
|
340
|
+
svg {
|
|
341
|
+
flex-shrink: 0;
|
|
342
|
+
color: ${e.content.inactive};
|
|
343
|
+
}
|
|
344
|
+
`, M = t.div`
|
|
345
|
+
align-self: flex-start;
|
|
346
|
+
display: flex;
|
|
347
|
+
align-items: center;
|
|
348
|
+
gap: 2px;
|
|
349
|
+
margin-top: -4px;
|
|
350
|
+
`, A = t.button`
|
|
351
|
+
display: inline-flex;
|
|
352
|
+
align-items: center;
|
|
353
|
+
gap: 4px;
|
|
354
|
+
height: 24px;
|
|
355
|
+
padding: 0 6px;
|
|
356
|
+
border: none;
|
|
357
|
+
border-radius: 6px;
|
|
358
|
+
background: transparent;
|
|
359
|
+
color: ${e.content.placeholder};
|
|
360
|
+
font-family: Inter;
|
|
361
|
+
font-size: 11px;
|
|
362
|
+
line-height: 16px;
|
|
363
|
+
cursor: pointer;
|
|
364
|
+
transition: background 0.15s ease, color 0.15s ease;
|
|
365
|
+
|
|
366
|
+
svg {
|
|
367
|
+
flex-shrink: 0;
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
&:hover {
|
|
371
|
+
background: ${e.surface.hovered};
|
|
372
|
+
color: ${e.content.secondary};
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
&:focus-visible {
|
|
376
|
+
outline: 2px solid ${e.stroke.brand};
|
|
377
|
+
outline-offset: 1px;
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
/* Confirmation reads as success, not as another affordance. */
|
|
381
|
+
&[data-copied='true'],
|
|
382
|
+
&[data-copied='true']:hover {
|
|
383
|
+
color: ${e.content.positive};
|
|
384
|
+
}
|
|
385
|
+
`, B = t.span`
|
|
386
|
+
font-family: Inter;
|
|
387
|
+
font-size: 13px;
|
|
388
|
+
line-height: 20px;
|
|
389
|
+
color: ${e.content.secondary};
|
|
390
|
+
`, S = t.div`
|
|
391
|
+
margin: 0 16px;
|
|
392
|
+
padding: 8px 10px;
|
|
393
|
+
border-radius: 8px;
|
|
394
|
+
background: ${e.background.negative.light};
|
|
395
|
+
color: ${e.content.negative};
|
|
396
|
+
font-family: Inter;
|
|
397
|
+
font-size: 12px;
|
|
398
|
+
line-height: 18px;
|
|
399
|
+
flex-shrink: 0;
|
|
400
|
+
`, j = t.div`
|
|
401
|
+
padding: 12px 16px 4px;
|
|
402
|
+
flex-shrink: 0;
|
|
403
|
+
`, C = t.div`
|
|
404
|
+
display: flex;
|
|
405
|
+
align-items: flex-end;
|
|
406
|
+
gap: 8px;
|
|
407
|
+
padding: 8px 8px 8px 12px;
|
|
408
|
+
border: 1px solid
|
|
409
|
+
${(n) => n.$focused ? e.stroke.brand : e.stroke.primary};
|
|
410
|
+
border-radius: 12px;
|
|
411
|
+
background: ${e.surface.standard};
|
|
412
|
+
transition: border-color 0.15s ease;
|
|
413
|
+
`, T = t.textarea`
|
|
414
|
+
flex: 1;
|
|
415
|
+
border: none;
|
|
416
|
+
outline: none;
|
|
417
|
+
resize: none;
|
|
418
|
+
background: transparent;
|
|
419
|
+
font-family: Inter;
|
|
420
|
+
font-size: 13px;
|
|
421
|
+
line-height: 20px;
|
|
422
|
+
color: ${e.content.primary};
|
|
423
|
+
max-height: 96px;
|
|
424
|
+
min-height: 20px;
|
|
425
|
+
padding: 4px 0;
|
|
426
|
+
|
|
427
|
+
&::placeholder {
|
|
428
|
+
color: ${e.content.placeholder};
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
&:disabled {
|
|
432
|
+
cursor: not-allowed;
|
|
433
|
+
}
|
|
434
|
+
`, F = t.button`
|
|
435
|
+
width: 28px;
|
|
436
|
+
height: 28px;
|
|
437
|
+
flex-shrink: 0;
|
|
438
|
+
display: flex;
|
|
439
|
+
align-items: center;
|
|
440
|
+
justify-content: center;
|
|
441
|
+
padding: 0;
|
|
442
|
+
border: none;
|
|
443
|
+
border-radius: 8px;
|
|
444
|
+
background: ${(n) => n.$active ? e.background.brand : e.background.brandLight};
|
|
445
|
+
color: ${(n) => n.$active ? e.content.primaryInverse : e.content.inactive};
|
|
446
|
+
cursor: ${(n) => n.$active ? "pointer" : "not-allowed"};
|
|
447
|
+
transition: background 0.15s ease, color 0.15s ease;
|
|
448
|
+
|
|
449
|
+
&:focus-visible {
|
|
450
|
+
outline: 2px solid ${e.stroke.brand};
|
|
451
|
+
outline-offset: 1px;
|
|
452
|
+
}
|
|
453
|
+
`, E = t.div`
|
|
454
|
+
padding: 6px 16px 12px;
|
|
455
|
+
text-align: center;
|
|
456
|
+
font-family: Inter;
|
|
457
|
+
font-size: 11px;
|
|
458
|
+
line-height: 16px;
|
|
459
|
+
color: ${e.content.placeholder};
|
|
460
|
+
flex-shrink: 0;
|
|
461
|
+
`;
|
|
462
|
+
export {
|
|
463
|
+
E as Disclaimer,
|
|
464
|
+
h as EmptyState,
|
|
465
|
+
m as EmptyStateIcon,
|
|
466
|
+
S as ErrorBanner,
|
|
467
|
+
L as FollowUpChip,
|
|
468
|
+
I as FollowUpList,
|
|
469
|
+
z as FollowUpsLabel,
|
|
470
|
+
c as HeaderActions,
|
|
471
|
+
s as HeaderAvatar,
|
|
472
|
+
p as HeaderBadge,
|
|
473
|
+
d as HeaderText,
|
|
474
|
+
l as HeaderTitleRow,
|
|
475
|
+
w as HistoryLoader,
|
|
476
|
+
x as IconAction,
|
|
477
|
+
j as InputArea,
|
|
478
|
+
C as InputWrapper,
|
|
479
|
+
H as InterruptedNote,
|
|
480
|
+
u as JumpToLatestButton,
|
|
481
|
+
A as MessageAction,
|
|
482
|
+
M as MessageActions,
|
|
483
|
+
$ as MessageBubble,
|
|
484
|
+
T as MessageInput,
|
|
485
|
+
b as MessagesArea,
|
|
486
|
+
g as MessagesViewport,
|
|
487
|
+
i as PanelContainer,
|
|
488
|
+
a as PanelHeader,
|
|
489
|
+
f as ScrollFade,
|
|
490
|
+
F as SendButton,
|
|
491
|
+
k as SuggestionChip,
|
|
492
|
+
y as SuggestionList,
|
|
493
|
+
v as ThinkingBubble,
|
|
494
|
+
B as ThinkingLabel
|
|
495
|
+
};
|
|
496
|
+
//# sourceMappingURL=CopilotPanel.styled.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CopilotPanel.styled.js","sources":["../../../../src/components/bik-copilot/CopilotPanel.styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const PanelContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-height: 0;\n\toverflow: hidden;\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 16px;\n\tbox-shadow: 0 16px 48px rgba(40, 3, 78, 0.18);\n`;\n\nexport const PanelHeader = styled.div`\n\tdisplay: flex;\n\talign-items: flex-start;\n\tgap: 10px;\n\tpadding: 12px 12px 12px 16px;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tflex-shrink: 0;\n`;\n\nexport const HeaderAvatar = styled.div`\n\twidth: 32px;\n\theight: 32px;\n\tflex-shrink: 0;\n\tborder-radius: 8px;\n\tbackground: ${COLORS.background.base};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tcolor: ${COLORS.content.brand};\n\toverflow: hidden;\n`;\n\nexport const HeaderText = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px;\n\tmin-width: 0;\n\tflex: 1;\n`;\n\nexport const HeaderTitleRow = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 6px;\n`;\n\nexport const HeaderBadge = styled.span`\n\tpadding: 1px 6px;\n\tborder-radius: 4px;\n\tbackground: ${COLORS.background.brandLight};\n\tcolor: ${COLORS.content.brand};\n\tfont-size: 10px;\n\tfont-weight: 600;\n\tline-height: 16px;\n\twhite-space: nowrap;\n`;\n\nexport const HeaderActions = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 2px;\n\tflex-shrink: 0;\n`;\n\nexport const IconAction = styled.button`\n\twidth: 28px;\n\theight: 28px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tpadding: 0;\n\tborder: none;\n\tborder-radius: 6px;\n\tbackground: transparent;\n\tcolor: ${COLORS.content.secondary};\n\tcursor: pointer;\n\ttransition: background 0.15s ease, color 0.15s ease;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.hovered};\n\t\tcolor: ${COLORS.content.primary};\n\t}\n\n\t&:focus-visible {\n\t\toutline: 2px solid ${COLORS.stroke.brand};\n\t\toutline-offset: 1px;\n\t}\n`;\n\n/**\n * Wraps the scroller so the bottom fade and the jump-to-latest button can be\n * absolutely positioned over it.\n */\nexport const MessagesViewport = styled.div`\n\tposition: relative;\n\tflex: 1;\n\tmin-height: 0;\n\tdisplay: flex;\n\tflex-direction: column;\n`;\n\nexport const MessagesArea = styled.div`\n\tflex: 1;\n\tmin-height: 0;\n\toverflow-y: auto;\n\tpadding: 16px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 12px;\n\n\t&::-webkit-scrollbar {\n\t\twidth: 6px;\n\t}\n\n\t&::-webkit-scrollbar-thumb {\n\t\tbackground: ${COLORS.background.inactive};\n\t\tborder-radius: 3px;\n\t}\n`;\n\n/**\n * Softens the cut-off edge of a long answer the reader has scrolled up from, so\n * the clipped line reads as continuing rather than as the end of the message.\n *\n * Two layers, because one element cannot ramp a gradient and a blur\n * independently: the element itself whitens the text out, and `::after` lays a\n * masked blur over it that strengthens towards the bottom. Browsers without\n * `backdrop-filter` still get the fade.\n */\nexport const ScrollFade = styled.div<{ $visible: boolean }>`\n\tposition: absolute;\n\tleft: 0;\n\tright: 0;\n\tbottom: 0;\n\theight: 72px;\n\tpointer-events: none;\n\topacity: ${(props) => (props.$visible ? 1 : 0)};\n\ttransition: opacity 0.2s ease;\n\tbackground: linear-gradient(\n\t\tto bottom,\n\t\t${COLORS.surface.standard}00 0%,\n\t\t${COLORS.surface.standard}B3 55%,\n\t\t${COLORS.surface.standard} 100%\n\t);\n\n\t&::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tbackdrop-filter: blur(2px);\n\t\t-webkit-backdrop-filter: blur(2px);\n\t\tmask-image: linear-gradient(to bottom, transparent 0%, #000 60%);\n\t\t-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 60%);\n\t}\n`;\n\nexport const JumpToLatestButton = styled.button<{ $visible: boolean }>`\n\tposition: absolute;\n\tleft: 50%;\n\tbottom: 12px;\n\ttransform: translateX(-50%)\n\t\ttranslateY(${(props) => (props.$visible ? '0' : '6px')});\n\twidth: 28px;\n\theight: 28px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tpadding: 0;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 999px;\n\tbackground: ${COLORS.surface.standard};\n\tcolor: ${COLORS.content.secondary};\n\tbox-shadow: 0 2px 8px rgba(40, 3, 78, 0.16);\n\tcursor: pointer;\n\topacity: ${(props) => (props.$visible ? 1 : 0)};\n\t/* Hidden to the pointer and to focus order while it is faded out. */\n\tvisibility: ${(props) => (props.$visible ? 'visible' : 'hidden')};\n\ttransition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease,\n\t\tbackground 0.15s ease, color 0.15s ease;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.hovered};\n\t\tcolor: ${COLORS.content.primary};\n\t}\n\n\t&:focus-visible {\n\t\toutline: 2px solid ${COLORS.stroke.brand};\n\t\toutline-offset: 1px;\n\t}\n`;\n\nexport const EmptyState = styled.div`\n\tflex: 1;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 8px;\n\ttext-align: center;\n\tpadding: 8px 4px;\n`;\n\nexport const EmptyStateIcon = styled.div`\n\tcolor: ${COLORS.content.brand};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-bottom: 4px;\n`;\n\nexport const SuggestionList = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tgap: 8px;\n\tmargin-top: 12px;\n\twidth: 100%;\n`;\n\nexport const SuggestionChip = styled.button`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 6px;\n\tmax-width: 100%;\n\tpadding: 8px 14px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 999px;\n\tbackground: ${COLORS.surface.standard};\n\tcolor: ${COLORS.content.primary};\n\tfont-family: Inter;\n\tfont-size: 13px;\n\tline-height: 18px;\n\ttext-align: left;\n\tcursor: pointer;\n\ttransition: border-color 0.15s ease, background 0.15s ease;\n\n\tsvg {\n\t\tflex-shrink: 0;\n\t\tcolor: ${COLORS.content.brand};\n\t}\n\n\t&:hover:not(:disabled) {\n\t\tborder-color: ${COLORS.stroke.brand};\n\t\tbackground: ${COLORS.background.brandVeryLight};\n\t}\n\n\t&:disabled {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n`;\n\nexport const MessageBubble = styled.div<{\n\t$role: 'user' | 'assistant' | 'system';\n}>`\n\tfont-family: Inter;\n\tfont-size: 13px;\n\tline-height: 20px;\n\tword-break: break-word;\n\toverflow-wrap: break-word;\n\n\t${(props) => {\n\t\tif (props.$role === 'user') {\n\t\t\treturn `\n\t\t\t\talign-self: flex-end;\n\t\t\t\tmax-width: 85%;\n\t\t\t\tpadding: 10px 14px;\n\t\t\t\tborder-radius: 12px;\n\t\t\t\tborder-bottom-right-radius: 4px;\n\t\t\t\tbackground: ${COLORS.background.brandLight};\n\t\t\t\tcolor: ${COLORS.content.primary};\n\t\t\t`;\n\t\t}\n\t\tif (props.$role === 'system') {\n\t\t\treturn `\n\t\t\t\talign-self: center;\n\t\t\t\tmax-width: 90%;\n\t\t\t\tpadding: 6px 10px;\n\t\t\t\tborder-radius: 8px;\n\t\t\t\tbackground: ${COLORS.surface.grey};\n\t\t\t\tcolor: ${COLORS.content.secondary};\n\t\t\t\tfont-size: 12px;\n\t\t\t\ttext-align: center;\n\t\t\t`;\n\t\t}\n\t\treturn `\n\t\t\talign-self: flex-start;\n\t\t\tmax-width: 90%;\n\t\t\tpadding: 10px 14px;\n\t\t\tborder-radius: 12px;\n\t\t\tborder-bottom-left-radius: 4px;\n\t\t\tbackground: ${COLORS.surface.grey};\n\t\t\tcolor: ${COLORS.content.primary};\n\t\t\tborder: 1px solid ${COLORS.stroke.primary};\n\t\t`;\n\t}}\n\n\t/* Markdown emitted by renderMarkdownLite */\n\th1,\n\th2,\n\th3,\n\th4 {\n\t\tfont-size: 14px;\n\t\tfont-weight: 600;\n\t\tmargin: 4px 0;\n\t}\n\n\tpre {\n\t\tbackground: ${COLORS.background.base};\n\t\tborder-radius: 6px;\n\t\tpadding: 8px;\n\t\tmargin: 6px 0;\n\t\toverflow-x: auto;\n\t\tfont-size: 12px;\n\t}\n\n\ta {\n\t\tcolor: ${COLORS.content.brand};\n\t}\n`;\n\nexport const ThinkingBubble = styled.div`\n\talign-self: flex-start;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 12px 14px;\n\tborder-radius: 12px;\n\tborder-bottom-left-radius: 4px;\n\tbackground: ${COLORS.surface.grey};\n\tborder: 1px solid ${COLORS.stroke.primary};\n`;\n\n/** Sits above the oldest message while the page before it is fetched. */\nexport const HistoryLoader = styled.div`\n\talign-self: center;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 4px 0;\n\tfont-family: Inter;\n\tfont-size: 11px;\n\tline-height: 16px;\n\tcolor: ${COLORS.content.placeholder};\n`;\n\nexport const FollowUpList = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: stretch;\n\tgap: 8px;\n\tmargin-top: 4px;\n`;\n\nexport const FollowUpsLabel = styled.div`\n\tfont-family: Inter;\n\tfont-size: 11px;\n\tline-height: 16px;\n\tcolor: ${COLORS.content.placeholder};\n`;\n\nexport const FollowUpChip = styled.button`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\twidth: 100%;\n\tpadding: 10px 14px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 10px;\n\tbackground: ${COLORS.surface.standard};\n\tcolor: ${COLORS.content.primary};\n\tfont-family: Inter;\n\tfont-size: 13px;\n\tline-height: 18px;\n\ttext-align: left;\n\tcursor: pointer;\n\ttransition: border-color 0.15s ease, background 0.15s ease;\n\n\tsvg {\n\t\tflex-shrink: 0;\n\t\tcolor: ${COLORS.content.secondary};\n\t}\n\n\t&:hover:not(:disabled) {\n\t\tborder-color: ${COLORS.stroke.brand};\n\t\tbackground: ${COLORS.background.brandVeryLight};\n\t}\n\n\t&:disabled {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n`;\n\n/**\n * Bubble-less on purpose: a stopped reply is a note about the transcript, not a\n * message in it.\n */\nexport const InterruptedNote = styled.div`\n\talign-self: flex-start;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 6px;\n\tfont-family: Inter;\n\tfont-size: 12px;\n\tline-height: 18px;\n\tcolor: ${COLORS.content.secondary};\n\n\tsvg {\n\t\tflex-shrink: 0;\n\t\tcolor: ${COLORS.content.inactive};\n\t}\n`;\n\n/**\n * Actions under a finished assistant reply. Kept low-contrast so a row of icons\n * under every message does not compete with the answer itself.\n */\nexport const MessageActions = styled.div`\n\talign-self: flex-start;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 2px;\n\tmargin-top: -4px;\n`;\n\nexport const MessageAction = styled.button`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 4px;\n\theight: 24px;\n\tpadding: 0 6px;\n\tborder: none;\n\tborder-radius: 6px;\n\tbackground: transparent;\n\tcolor: ${COLORS.content.placeholder};\n\tfont-family: Inter;\n\tfont-size: 11px;\n\tline-height: 16px;\n\tcursor: pointer;\n\ttransition: background 0.15s ease, color 0.15s ease;\n\n\tsvg {\n\t\tflex-shrink: 0;\n\t}\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.hovered};\n\t\tcolor: ${COLORS.content.secondary};\n\t}\n\n\t&:focus-visible {\n\t\toutline: 2px solid ${COLORS.stroke.brand};\n\t\toutline-offset: 1px;\n\t}\n\n\t/* Confirmation reads as success, not as another affordance. */\n\t&[data-copied='true'],\n\t&[data-copied='true']:hover {\n\t\tcolor: ${COLORS.content.positive};\n\t}\n`;\n\nexport const ThinkingLabel = styled.span`\n\tfont-family: Inter;\n\tfont-size: 13px;\n\tline-height: 20px;\n\tcolor: ${COLORS.content.secondary};\n`;\n\nexport const ErrorBanner = styled.div`\n\tmargin: 0 16px;\n\tpadding: 8px 10px;\n\tborder-radius: 8px;\n\tbackground: ${COLORS.background.negative.light};\n\tcolor: ${COLORS.content.negative};\n\tfont-family: Inter;\n\tfont-size: 12px;\n\tline-height: 18px;\n\tflex-shrink: 0;\n`;\n\nexport const InputArea = styled.div`\n\tpadding: 12px 16px 4px;\n\tflex-shrink: 0;\n`;\n\nexport const InputWrapper = styled.div<{ $focused: boolean }>`\n\tdisplay: flex;\n\talign-items: flex-end;\n\tgap: 8px;\n\tpadding: 8px 8px 8px 12px;\n\tborder: 1px solid\n\t\t${(props) => (props.$focused ? COLORS.stroke.brand : COLORS.stroke.primary)};\n\tborder-radius: 12px;\n\tbackground: ${COLORS.surface.standard};\n\ttransition: border-color 0.15s ease;\n`;\n\nexport const MessageInput = styled.textarea`\n\tflex: 1;\n\tborder: none;\n\toutline: none;\n\tresize: none;\n\tbackground: transparent;\n\tfont-family: Inter;\n\tfont-size: 13px;\n\tline-height: 20px;\n\tcolor: ${COLORS.content.primary};\n\tmax-height: 96px;\n\tmin-height: 20px;\n\tpadding: 4px 0;\n\n\t&::placeholder {\n\t\tcolor: ${COLORS.content.placeholder};\n\t}\n\n\t&:disabled {\n\t\tcursor: not-allowed;\n\t}\n`;\n\nexport const SendButton = styled.button<{ $active: boolean }>`\n\twidth: 28px;\n\theight: 28px;\n\tflex-shrink: 0;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tpadding: 0;\n\tborder: none;\n\tborder-radius: 8px;\n\tbackground: ${(props) =>\n\t\tprops.$active ? COLORS.background.brand : COLORS.background.brandLight};\n\tcolor: ${(props) =>\n\t\tprops.$active ? COLORS.content.primaryInverse : COLORS.content.inactive};\n\tcursor: ${(props) => (props.$active ? 'pointer' : 'not-allowed')};\n\ttransition: background 0.15s ease, color 0.15s ease;\n\n\t&:focus-visible {\n\t\toutline: 2px solid ${COLORS.stroke.brand};\n\t\toutline-offset: 1px;\n\t}\n`;\n\nexport const Disclaimer = styled.div`\n\tpadding: 6px 16px 12px;\n\ttext-align: center;\n\tfont-family: Inter;\n\tfont-size: 11px;\n\tline-height: 16px;\n\tcolor: ${COLORS.content.placeholder};\n\tflex-shrink: 0;\n`;\n"],"names":["PanelContainer","styled","COLORS","PanelHeader","HeaderAvatar","HeaderText","HeaderTitleRow","HeaderBadge","HeaderActions","IconAction","MessagesViewport","MessagesArea","ScrollFade","props","JumpToLatestButton","EmptyState","EmptyStateIcon","SuggestionList","SuggestionChip","MessageBubble","ThinkingBubble","HistoryLoader","FollowUpList","FollowUpsLabel","FollowUpChip","InterruptedNote","MessageActions","MessageAction","ThinkingLabel","ErrorBanner","InputArea","InputWrapper","MessageInput","SendButton","Disclaimer"],"mappings":"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"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { CopilotBallPosition, CopilotViewport } from './model';
|
|
2
|
+
export interface CopilotPanelPlacementOptions {
|
|
3
|
+
ballPosition: CopilotBallPosition;
|
|
4
|
+
ballSize: number;
|
|
5
|
+
panelWidth: number;
|
|
6
|
+
panelHeight: number;
|
|
7
|
+
gap: number;
|
|
8
|
+
viewport: CopilotViewport;
|
|
9
|
+
}
|
|
10
|
+
export interface CopilotPanelPlacement {
|
|
11
|
+
left: number;
|
|
12
|
+
top: number;
|
|
13
|
+
width: number;
|
|
14
|
+
height: number;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* Places the panel next to the ball, on whichever side has room.
|
|
18
|
+
*
|
|
19
|
+
* The panel opens towards the middle of the screen: a ball parked bottom-right
|
|
20
|
+
* gets a panel above and to its left, a ball parked top-left gets one below and
|
|
21
|
+
* to its right. The result is always clamped inside the viewport, and the panel
|
|
22
|
+
* shrinks on viewports too small to hold it at full size.
|
|
23
|
+
*/
|
|
24
|
+
export declare const getCopilotPanelPlacement: ({ ballPosition, ballSize, panelWidth, panelHeight, gap, viewport, }: CopilotPanelPlacementOptions) => CopilotPanelPlacement;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
const M = (t, I, R) => Math.min(Math.max(t, I), Math.max(I, R)), E = ({
|
|
2
|
+
ballPosition: t,
|
|
3
|
+
ballSize: I,
|
|
4
|
+
panelWidth: R,
|
|
5
|
+
panelHeight: P,
|
|
6
|
+
gap: n,
|
|
7
|
+
viewport: h
|
|
8
|
+
}) => {
|
|
9
|
+
if (!h.width || !h.height)
|
|
10
|
+
return {
|
|
11
|
+
left: 8,
|
|
12
|
+
top: 8,
|
|
13
|
+
width: R,
|
|
14
|
+
height: P
|
|
15
|
+
};
|
|
16
|
+
const _ = Math.min(R, h.width - 16), e = Math.min(
|
|
17
|
+
P,
|
|
18
|
+
h.height - 16
|
|
19
|
+
), c = t.x + I / 2, s = t.y + I / 2, T = c > h.width / 2, X = s > h.height / 2, d = T ? t.x + I - _ : t.x, A = X ? t.y - n - e : t.y + I + n;
|
|
20
|
+
return {
|
|
21
|
+
left: M(
|
|
22
|
+
d,
|
|
23
|
+
8,
|
|
24
|
+
h.width - _ - 8
|
|
25
|
+
),
|
|
26
|
+
top: M(
|
|
27
|
+
A,
|
|
28
|
+
8,
|
|
29
|
+
h.height - e - 8
|
|
30
|
+
),
|
|
31
|
+
width: _,
|
|
32
|
+
height: e
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
export {
|
|
36
|
+
E as getCopilotPanelPlacement
|
|
37
|
+
};
|
|
38
|
+
//# sourceMappingURL=copilotPlacement.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"copilotPlacement.js","sources":["../../../../src/components/bik-copilot/copilotPlacement.ts"],"sourcesContent":["import { CopilotBallPosition, CopilotViewport } from './model';\n\n/** Smallest gap kept between the panel and the viewport edges. */\nconst VIEWPORT_MARGIN_PX = 8;\n\nexport interface CopilotPanelPlacementOptions {\n\tballPosition: CopilotBallPosition;\n\tballSize: number;\n\tpanelWidth: number;\n\tpanelHeight: number;\n\tgap: number;\n\tviewport: CopilotViewport;\n}\n\nexport interface CopilotPanelPlacement {\n\tleft: number;\n\ttop: number;\n\twidth: number;\n\theight: number;\n}\n\nconst clamp = (value: number, min: number, max: number) =>\n\tMath.min(Math.max(value, min), Math.max(min, max));\n\n/**\n * Places the panel next to the ball, on whichever side has room.\n *\n * The panel opens towards the middle of the screen: a ball parked bottom-right\n * gets a panel above and to its left, a ball parked top-left gets one below and\n * to its right. The result is always clamped inside the viewport, and the panel\n * shrinks on viewports too small to hold it at full size.\n */\nexport const getCopilotPanelPlacement = ({\n\tballPosition,\n\tballSize,\n\tpanelWidth,\n\tpanelHeight,\n\tgap,\n\tviewport,\n}: CopilotPanelPlacementOptions): CopilotPanelPlacement => {\n\tif (!viewport.width || !viewport.height) {\n\t\treturn {\n\t\t\tleft: VIEWPORT_MARGIN_PX,\n\t\t\ttop: VIEWPORT_MARGIN_PX,\n\t\t\twidth: panelWidth,\n\t\t\theight: panelHeight,\n\t\t};\n\t}\n\n\tconst width = Math.min(panelWidth, viewport.width - VIEWPORT_MARGIN_PX * 2);\n\tconst height = Math.min(\n\t\tpanelHeight,\n\t\tviewport.height - VIEWPORT_MARGIN_PX * 2,\n\t);\n\n\tconst ballCenterX = ballPosition.x + ballSize / 2;\n\tconst ballCenterY = ballPosition.y + ballSize / 2;\n\tconst opensLeftwards = ballCenterX > viewport.width / 2;\n\tconst opensUpwards = ballCenterY > viewport.height / 2;\n\n\t// Align the panel's near edge with the ball's, then push it towards the\n\t// screen centre.\n\tconst preferredLeft = opensLeftwards\n\t\t? ballPosition.x + ballSize - width\n\t\t: ballPosition.x;\n\tconst preferredTop = opensUpwards\n\t\t? ballPosition.y - gap - height\n\t\t: ballPosition.y + ballSize + gap;\n\n\treturn {\n\t\tleft: clamp(\n\t\t\tpreferredLeft,\n\t\t\tVIEWPORT_MARGIN_PX,\n\t\t\tviewport.width - width - VIEWPORT_MARGIN_PX,\n\t\t),\n\t\ttop: clamp(\n\t\t\tpreferredTop,\n\t\t\tVIEWPORT_MARGIN_PX,\n\t\t\tviewport.height - height - VIEWPORT_MARGIN_PX,\n\t\t),\n\t\twidth,\n\t\theight,\n\t};\n};\n"],"names":["clamp","value","min","max","getCopilotPanelPlacement","ballPosition","ballSize","panelWidth","panelHeight","gap","viewport","width","height","ballCenterX","ballCenterY","opensLeftwards","opensUpwards","preferredLeft","preferredTop"],"mappings":"AAqBA,MAAMA,IAAQ,CAACC,GAAeC,GAAaC,MAC1C,KAAK,IAAI,KAAK,IAAIF,GAAOC,CAAG,GAAG,KAAK,IAAIA,GAAKC,CAAG,CAAC,GAUrCC,IAA2B,CAAC;AAAA,EACxC,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,KAAAC;AAAA,EACA,UAAAC;AACD,MAA2D;AAC1D,MAAI,CAACA,EAAS,SAAS,CAACA,EAAS;AAChC,WAAO;AAAA,MACN,MAAM;AAAA,MACN,KAAK;AAAA,MACL,OAAOH;AAAA,MACP,QAAQC;AAAA,IAAA;AAIV,QAAMG,IAAQ,KAAK,IAAIJ,GAAYG,EAAS,QAAQ,EAAsB,GACpEE,IAAS,KAAK;AAAA,IACnBJ;AAAA,IACAE,EAAS,SAAS;AAAA,EAAqB,GAGlCG,IAAcR,EAAa,IAAIC,IAAW,GAC1CQ,IAAcT,EAAa,IAAIC,IAAW,GAC1CS,IAAiBF,IAAcH,EAAS,QAAQ,GAChDM,IAAeF,IAAcJ,EAAS,SAAS,GAI/CO,IAAgBF,IACnBV,EAAa,IAAIC,IAAWK,IAC5BN,EAAa,GACVa,IAAeF,IAClBX,EAAa,IAAII,IAAMG,IACvBP,EAAa,IAAIC,IAAWG;AAE/B,SAAO;AAAA,IACN,MAAMT;AAAA,MACLiB;AAAA,MACA;AAAA,MACAP,EAAS,QAAQC,IAAQ;AAAA,IAAA;AAAA,IAE1B,KAAKX;AAAA,MACJkB;AAAA,MACA;AAAA,MACAR,EAAS,SAASE,IAAS;AAAA,IAAA;AAAA,IAE5B,OAAAD;AAAA,IACA,QAAAC;AAAA,EAAA;AAEF;"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export { ControlledCopilot, default as default } from './ControlledCopilot';
|
|
2
|
+
export { BIKCopilot } from './BIKCopilot';
|
|
3
|
+
export { COPILOT_BALL_ATTRIBUTE, CopilotBall } from './CopilotBall';
|
|
4
|
+
export { CopilotPanel } from './CopilotPanel';
|
|
5
|
+
export { getCopilotPanelPlacement } from './copilotPlacement';
|
|
6
|
+
export { DEFAULT_COPILOT_AGENT, DEFAULT_COPILOT_ROUTE, useCopilotIcebreakers, } from './useCopilotIcebreakers';
|
|
7
|
+
export { useCopilotStreamChat } from './useCopilotStreamChat';
|
|
8
|
+
export { useDraggableFloater } from './useDraggableFloater';
|
|
9
|
+
export { COPILOT_ICEBREAKERS_PATH, fetchCopilotIcebreakers, } from './services/copilotIcebreakersClient';
|
|
10
|
+
export { COPILOT_ENDPOINT_PATH, streamCopilotChat, } from './services/copilotStreamClient';
|
|
11
|
+
export { CopilotSseParser } from './services/copilotSseParser';
|
|
12
|
+
export { COPILOT_HISTORY_PAGE_SIZE, COPILOT_MESSAGES_PATH, fetchCopilotMessages, } from './services/copilotMessagesClient';
|
|
13
|
+
export { COPILOT_SESSION_TTL_MS, MAX_PERSISTED_MESSAGES, copilotSessionKey, createCopilotSession, createCopilotSessionId, deleteCopilotSession, findLatestCopilotSessionId, isCopilotSessionExpired, listCopilotSessionKeys, loadCopilotSession, persistCopilotTurn, pruneCopilotSessions, saveCopilotSession, } from './services/copilotDb';
|
|
14
|
+
export { clearCopilotPageSessions, getCopilotSessionIdForRoute, resetCopilotSessionForRoute, resolveCopilotSessionIdForRoute, } from './services/copilotPageSession';
|
|
15
|
+
export type { CopilotPanelPlacement, CopilotPanelPlacementOptions, } from './copilotPlacement';
|
|
16
|
+
export type { ControlledCopilotProps, BIKCopilotProps, CopilotAgent, CopilotBallPosition, CopilotBallProps, CopilotCorner, CopilotDragHandlers, CopilotIcebreakersResult, CopilotAnswerPayload, CopilotMessage, CopilotMessagesPage, CopilotPanelProps, CopilotSessionRecord, CopilotShellProps, CopilotStreamEvent, CopilotStreamHandlers, CopilotStreamRequest, CopilotTransportOptions, CopilotViewport, CopilotStoredMessageRow, FetchCopilotIcebreakersOptions, FetchCopilotMessagesOptions, StreamCopilotChatOptions, UseCopilotIcebreakersOptions, UseCopilotIcebreakersResult, UseCopilotStreamChatOptions, UseCopilotStreamChatResult, UseDraggableFloaterOptions, UseDraggableFloaterResult, } from './model';
|