@budibase/frontend-core 3.43.0 → 3.44.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.
- package/package.json +2 -2
- package/src/api/agents.ts +26 -57
- package/src/api/ai.ts +26 -0
- package/src/api/chatLinks.ts +26 -6
- package/src/api/escalations.ts +6 -2
- package/src/api/index.ts +15 -5
- package/src/api/types.ts +1 -2
- package/src/components/Chatbox/index.svelte +61 -324
- package/src/components/index.ts +0 -2
- package/src/utils/download.test.js +34 -0
- package/src/api/chatApps.ts +0 -268
- package/src/components/Chatbox/ChatConversationPanel.svelte +0 -401
- package/src/components/Chatbox/ChatNavigationPanel.svelte +0 -326
|
@@ -1,326 +0,0 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import { ActionMenu, Body, Icon, MenuItem } from "@budibase/bbui"
|
|
3
|
-
import { createEventDispatcher } from "svelte"
|
|
4
|
-
|
|
5
|
-
type EnabledAgentListItem = {
|
|
6
|
-
agentId: string
|
|
7
|
-
name?: string
|
|
8
|
-
isDefault?: boolean
|
|
9
|
-
icon?: string
|
|
10
|
-
iconColor?: string
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
type ConversationListItem = {
|
|
14
|
-
_id?: string
|
|
15
|
-
title?: string
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
type ConversationWithId = ConversationListItem & {
|
|
19
|
-
_id: string
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
export let enabledAgentList: EnabledAgentListItem[] = []
|
|
23
|
-
export let conversationHistory: ConversationListItem[] = []
|
|
24
|
-
export let selectedConversationId: string | undefined
|
|
25
|
-
export let selectedAgentName: string | undefined
|
|
26
|
-
export let hideAgents = false
|
|
27
|
-
export let deletingChat = false
|
|
28
|
-
|
|
29
|
-
$: defaultAgent =
|
|
30
|
-
enabledAgentList.find(agent => agent.isDefault) || enabledAgentList[0]
|
|
31
|
-
|
|
32
|
-
$: conversationsWithId = conversationHistory.filter(
|
|
33
|
-
(conversation): conversation is ConversationWithId =>
|
|
34
|
-
Boolean(conversation._id)
|
|
35
|
-
)
|
|
36
|
-
|
|
37
|
-
const dispatch = createEventDispatcher<{
|
|
38
|
-
agentSelected: { agentId: string }
|
|
39
|
-
conversationSelected: { conversationId: string }
|
|
40
|
-
conversationDeleted: { conversationId: string }
|
|
41
|
-
}>()
|
|
42
|
-
|
|
43
|
-
const selectAgent = (agentId: string) => {
|
|
44
|
-
dispatch("agentSelected", { agentId })
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
const selectConversation = (conversationId: string) => {
|
|
48
|
-
dispatch("conversationSelected", { conversationId })
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
const deleteConversation = (conversationId: string) => {
|
|
52
|
-
dispatch("conversationDeleted", { conversationId })
|
|
53
|
-
}
|
|
54
|
-
</script>
|
|
55
|
-
|
|
56
|
-
<div class="chat-nav-shell">
|
|
57
|
-
<div class="chat-nav-content">
|
|
58
|
-
{#if selectedAgentName}
|
|
59
|
-
<div class="list-section current-agent-section">
|
|
60
|
-
<div class="current-agent-name">{selectedAgentName}</div>
|
|
61
|
-
</div>
|
|
62
|
-
{/if}
|
|
63
|
-
|
|
64
|
-
{#if defaultAgent?.agentId}
|
|
65
|
-
<div class="list-section">
|
|
66
|
-
<button
|
|
67
|
-
class="new-chat"
|
|
68
|
-
on:click={() => selectAgent(defaultAgent.agentId)}
|
|
69
|
-
>
|
|
70
|
-
<span class="new-chat-icon">
|
|
71
|
-
<Icon name="plus" size="S" />
|
|
72
|
-
</span>
|
|
73
|
-
<span class="new-chat-label">New chat</span>
|
|
74
|
-
</button>
|
|
75
|
-
</div>
|
|
76
|
-
{/if}
|
|
77
|
-
|
|
78
|
-
{#if !hideAgents}
|
|
79
|
-
<div class="list-section">
|
|
80
|
-
<div class="list-title">Agents</div>
|
|
81
|
-
{#if enabledAgentList.length}
|
|
82
|
-
{#each enabledAgentList as agent (agent.agentId)}
|
|
83
|
-
<button
|
|
84
|
-
class="list-item list-item-button"
|
|
85
|
-
on:click={() => selectAgent(agent.agentId)}
|
|
86
|
-
>
|
|
87
|
-
<span class="list-item-icon">
|
|
88
|
-
<Icon name={agent.icon || "robot"} size="S" />
|
|
89
|
-
</span>
|
|
90
|
-
{agent.name}
|
|
91
|
-
</button>
|
|
92
|
-
{/each}
|
|
93
|
-
{:else}
|
|
94
|
-
<Body size="XS" color="var(--spectrum-global-color-gray-500)">
|
|
95
|
-
No agents
|
|
96
|
-
</Body>
|
|
97
|
-
{/if}
|
|
98
|
-
</div>
|
|
99
|
-
{/if}
|
|
100
|
-
|
|
101
|
-
<div class="list-section">
|
|
102
|
-
<div class="list-title">Recent Chats</div>
|
|
103
|
-
{#if conversationsWithId.length}
|
|
104
|
-
{#each conversationsWithId as conversation (conversation._id)}
|
|
105
|
-
<div
|
|
106
|
-
class="conversation-row"
|
|
107
|
-
class:selected={selectedConversationId === conversation._id}
|
|
108
|
-
>
|
|
109
|
-
<button
|
|
110
|
-
class="list-item list-item-button conversation-button"
|
|
111
|
-
on:click={() => selectConversation(conversation._id)}
|
|
112
|
-
>
|
|
113
|
-
<span class="conversation-title">
|
|
114
|
-
{conversation.title || "Untitled Chat"}
|
|
115
|
-
</span>
|
|
116
|
-
</button>
|
|
117
|
-
|
|
118
|
-
<ActionMenu align="right" disabled={deletingChat}>
|
|
119
|
-
<button
|
|
120
|
-
slot="control"
|
|
121
|
-
class="conversation-actions"
|
|
122
|
-
type="button"
|
|
123
|
-
aria-label={`Open actions for ${
|
|
124
|
-
conversation.title || "Untitled Chat"
|
|
125
|
-
}`}
|
|
126
|
-
>
|
|
127
|
-
<Icon size="S" name="dots-three" />
|
|
128
|
-
</button>
|
|
129
|
-
<MenuItem
|
|
130
|
-
on:click={() => selectConversation(conversation._id)}
|
|
131
|
-
icon="chat-circle"
|
|
132
|
-
>
|
|
133
|
-
View chat
|
|
134
|
-
</MenuItem>
|
|
135
|
-
<MenuItem
|
|
136
|
-
on:click={() => deleteConversation(conversation._id)}
|
|
137
|
-
icon="trash"
|
|
138
|
-
disabled={deletingChat}
|
|
139
|
-
>
|
|
140
|
-
{deletingChat ? "Deleting..." : "Delete chat"}
|
|
141
|
-
</MenuItem>
|
|
142
|
-
</ActionMenu>
|
|
143
|
-
</div>
|
|
144
|
-
{/each}
|
|
145
|
-
{:else}
|
|
146
|
-
<Body size="XS" color="var(--spectrum-global-color-gray-500)">
|
|
147
|
-
No recent chats
|
|
148
|
-
</Body>
|
|
149
|
-
{/if}
|
|
150
|
-
</div>
|
|
151
|
-
</div>
|
|
152
|
-
</div>
|
|
153
|
-
|
|
154
|
-
<style>
|
|
155
|
-
.chat-nav-shell {
|
|
156
|
-
display: flex;
|
|
157
|
-
width: 260px;
|
|
158
|
-
min-width: 260px;
|
|
159
|
-
border-right: var(--border-light);
|
|
160
|
-
background: transparent;
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
.chat-nav-content {
|
|
164
|
-
display: flex;
|
|
165
|
-
flex-direction: column;
|
|
166
|
-
gap: var(--spacing-xl);
|
|
167
|
-
width: 100%;
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
.list-section {
|
|
171
|
-
padding: var(--spacing-m);
|
|
172
|
-
display: flex;
|
|
173
|
-
flex-direction: column;
|
|
174
|
-
gap: var(--spacing-xxs);
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
.list-section + .list-section {
|
|
178
|
-
padding-top: 0;
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
.current-agent-section {
|
|
182
|
-
padding-bottom: var(--spacing-m);
|
|
183
|
-
}
|
|
184
|
-
|
|
185
|
-
.current-agent-name {
|
|
186
|
-
font-size: 14px;
|
|
187
|
-
line-height: 17px;
|
|
188
|
-
color: var(--spectrum-global-color-gray-800);
|
|
189
|
-
padding: var(--spacing-xs) 0;
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
.new-chat {
|
|
193
|
-
display: flex;
|
|
194
|
-
align-items: center;
|
|
195
|
-
gap: var(--spacing-s);
|
|
196
|
-
background: transparent;
|
|
197
|
-
border: none;
|
|
198
|
-
padding: var(--spacing-xs) 0;
|
|
199
|
-
font: inherit;
|
|
200
|
-
color: var(--spectrum-global-color-gray-700);
|
|
201
|
-
text-align: left;
|
|
202
|
-
width: 100%;
|
|
203
|
-
cursor: pointer;
|
|
204
|
-
}
|
|
205
|
-
|
|
206
|
-
.new-chat-icon {
|
|
207
|
-
display: inline-flex;
|
|
208
|
-
align-items: center;
|
|
209
|
-
justify-content: center;
|
|
210
|
-
width: 28px;
|
|
211
|
-
height: 28px;
|
|
212
|
-
border-radius: 50%;
|
|
213
|
-
background: var(--spectrum-semantic-cta-color-background-default);
|
|
214
|
-
color: var(--spectrum-global-color-gray-50);
|
|
215
|
-
}
|
|
216
|
-
|
|
217
|
-
.new-chat-label {
|
|
218
|
-
font-size: 14px;
|
|
219
|
-
color: var(--spectrum-global-color-gray-800);
|
|
220
|
-
}
|
|
221
|
-
|
|
222
|
-
.new-chat:hover .new-chat-icon {
|
|
223
|
-
background: var(--spectrum-semantic-cta-color-background-hover);
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
.list-item {
|
|
227
|
-
display: flex;
|
|
228
|
-
align-items: center;
|
|
229
|
-
gap: var(--spacing-s);
|
|
230
|
-
background: transparent;
|
|
231
|
-
border: none;
|
|
232
|
-
padding: var(--spacing-xs) 0;
|
|
233
|
-
font: inherit;
|
|
234
|
-
color: var(--spectrum-global-color-gray-700);
|
|
235
|
-
text-align: left;
|
|
236
|
-
width: 100%;
|
|
237
|
-
white-space: nowrap;
|
|
238
|
-
overflow: hidden;
|
|
239
|
-
text-overflow: ellipsis;
|
|
240
|
-
}
|
|
241
|
-
|
|
242
|
-
.conversation-row {
|
|
243
|
-
display: flex;
|
|
244
|
-
align-items: center;
|
|
245
|
-
gap: var(--spacing-xxs);
|
|
246
|
-
min-width: 0;
|
|
247
|
-
}
|
|
248
|
-
|
|
249
|
-
.conversation-button {
|
|
250
|
-
flex: 1 1 auto;
|
|
251
|
-
min-width: 0;
|
|
252
|
-
}
|
|
253
|
-
|
|
254
|
-
.conversation-title {
|
|
255
|
-
overflow: hidden;
|
|
256
|
-
text-overflow: ellipsis;
|
|
257
|
-
}
|
|
258
|
-
|
|
259
|
-
.conversation-actions {
|
|
260
|
-
display: inline-flex;
|
|
261
|
-
align-items: center;
|
|
262
|
-
justify-content: center;
|
|
263
|
-
width: 24px;
|
|
264
|
-
height: 24px;
|
|
265
|
-
padding: 0;
|
|
266
|
-
border: none;
|
|
267
|
-
background: transparent;
|
|
268
|
-
color: var(--spectrum-global-color-gray-600);
|
|
269
|
-
cursor: pointer;
|
|
270
|
-
flex: 0 0 auto;
|
|
271
|
-
opacity: 0;
|
|
272
|
-
pointer-events: none;
|
|
273
|
-
transition:
|
|
274
|
-
opacity 120ms ease,
|
|
275
|
-
color 120ms ease;
|
|
276
|
-
}
|
|
277
|
-
|
|
278
|
-
.conversation-row:hover .conversation-actions,
|
|
279
|
-
.conversation-row:focus-within .conversation-actions {
|
|
280
|
-
opacity: 1;
|
|
281
|
-
pointer-events: auto;
|
|
282
|
-
}
|
|
283
|
-
|
|
284
|
-
.conversation-actions:hover,
|
|
285
|
-
.conversation-actions:focus-visible {
|
|
286
|
-
color: var(--spectrum-global-color-gray-900);
|
|
287
|
-
}
|
|
288
|
-
|
|
289
|
-
.conversation-actions:disabled {
|
|
290
|
-
cursor: default;
|
|
291
|
-
opacity: 0.5;
|
|
292
|
-
pointer-events: none;
|
|
293
|
-
}
|
|
294
|
-
|
|
295
|
-
.list-item-icon {
|
|
296
|
-
display: inline-flex;
|
|
297
|
-
align-items: center;
|
|
298
|
-
justify-content: center;
|
|
299
|
-
}
|
|
300
|
-
|
|
301
|
-
.list-item-button {
|
|
302
|
-
cursor: pointer;
|
|
303
|
-
}
|
|
304
|
-
|
|
305
|
-
.list-item-button:hover {
|
|
306
|
-
color: var(--spectrum-global-color-gray-900);
|
|
307
|
-
}
|
|
308
|
-
|
|
309
|
-
.conversation-row.selected .list-item {
|
|
310
|
-
color: var(--spectrum-global-color-gray-900);
|
|
311
|
-
font-weight: 600;
|
|
312
|
-
}
|
|
313
|
-
|
|
314
|
-
.conversation-row.selected .conversation-actions {
|
|
315
|
-
color: var(--spectrum-global-color-gray-900);
|
|
316
|
-
}
|
|
317
|
-
|
|
318
|
-
.list-title {
|
|
319
|
-
font-size: 14px;
|
|
320
|
-
line-height: 17px;
|
|
321
|
-
letter-spacing: 0;
|
|
322
|
-
color: var(--spectrum-global-color-gray-600);
|
|
323
|
-
font-weight: 400;
|
|
324
|
-
margin-bottom: var(--spacing-xs);
|
|
325
|
-
}
|
|
326
|
-
</style>
|