@tylertech/forge-ai 0.13.13-dev.0 → 0.14.0-dev.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/custom-elements.json +5979 -5587
- package/dist/ai-chatbot/ai-chatbot.d.ts +16 -16
- package/dist/ai-chatbot/ai-chatbot.mjs +32 -60
- package/dist/ai-chatbot/index.d.ts +1 -1
- package/dist/ai-chatbot/types.d.ts +5 -5
- package/dist/ai-chatbot-launcher/ai-chatbot-launcher.d.ts +34 -1
- package/dist/ai-chatbot-launcher/ai-chatbot-launcher.mjs +219 -14
- package/dist/ai-chatbot-launcher/ai-chatbot-launcher.scss.mjs +1 -1
- package/dist/ai-conversations-panel/ai-conversations-panel.d.ts +3 -3
- package/dist/ai-conversations-panel/ai-conversations-panel.mjs +21 -21
- package/dist/ai-conversations-panel/ai-conversations-panel.scss.mjs +1 -1
- package/dist/ai-thread-actions-menu/ai-thread-actions-menu.mjs +1 -1
- package/dist/ai-threads-search/ai-threads-search.d.ts +36 -0
- package/dist/ai-threads-search/ai-threads-search.mjs +135 -67
- package/dist/ai-threads-search/ai-threads-search.scss.mjs +1 -1
- package/dist/core/overlay/overlay.d.ts +10 -0
- package/dist/core/overlay/overlay.mjs +15 -2
- package/dist/core/popover/popover.d.ts +10 -0
- package/dist/core/popover/popover.mjs +5 -0
- package/dist/utils.d.ts +18 -0
- package/dist/utils.mjs +35 -0
- package/package.json +1 -1
|
@@ -5,6 +5,7 @@ import { createRef, ref } from "lit/directives/ref.js";
|
|
|
5
5
|
import { when } from "lit/directives/when.js";
|
|
6
6
|
import { AiChatbotBase } from "../ai-chatbot/ai-chatbot-base.mjs";
|
|
7
7
|
import { DeleteThreadController } from "../utils/delete-thread-controller.mjs";
|
|
8
|
+
import { toggleState, forwardCancelableEvent } from "../utils.mjs";
|
|
8
9
|
import "../ai-attachment/ai-attachment.mjs";
|
|
9
10
|
import "../ai-chat-header/ai-chat-header.mjs";
|
|
10
11
|
import "../ai-edit-thread/ai-edit-thread.mjs";
|
|
@@ -12,10 +13,13 @@ import "../ai-file-picker/ai-file-picker.mjs";
|
|
|
12
13
|
import "../ai-icon/ai-icon.mjs";
|
|
13
14
|
import "../ai-message-thread/ai-message-thread.mjs";
|
|
14
15
|
import "../ai-prompt/ai-prompt.mjs";
|
|
16
|
+
import "../ai-spinner/ai-spinner.mjs";
|
|
15
17
|
import "../ai-suggestions/ai-suggestions.mjs";
|
|
16
18
|
import "../ai-voice-input/ai-voice-input.mjs";
|
|
17
19
|
import "../ai-gradient-container/ai-gradient-container.mjs";
|
|
18
20
|
import "../ai-thread-actions-menu/ai-thread-actions-menu.mjs";
|
|
21
|
+
import "../ai-threads-search/ai-threads-search.mjs";
|
|
22
|
+
import "../core/popover/popover.mjs";
|
|
19
23
|
import "../core/tooltip/tooltip.mjs";
|
|
20
24
|
import styles from "./ai-chatbot-launcher.scss.mjs";
|
|
21
25
|
var __defProp = Object.defineProperty;
|
|
@@ -36,7 +40,8 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
|
|
|
36
40
|
var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
37
41
|
var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
|
|
38
42
|
var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
|
|
39
|
-
var _headerRef, _internals, _deleteThreadController, _AiChatbotLauncherComponent_instances, transitionToConversation_fn, commitConversationTransition_fn, transitionToWelcome_fn, handleHeaderClear_fn, handleHeaderInfo_fn, handleThreadRename_fn, handleEditSave_fn, handleEditCancel_fn, handleThreadNameClick_fn, handleThreadDelete_fn, headingElement_get, promptTemplate_get, welcomeHeaderTemplate_get, welcomeSuggestionsTemplate_get, threadName_get, threadActionsMenu_get, conversationContentTemplate_get, promptSectionTemplate_get;
|
|
43
|
+
var _headerRef, _gradientContainerRef, _internals, _pendingThreadDeleteSource, _deleteThreadController, _AiChatbotLauncherComponent_instances, setViewState_fn, transitionToConversation_fn, commitConversationTransition_fn, transitionToWelcome_fn, transitionToHistory_fn, handleHistoryBack_fn, handleHeaderClear_fn, handleHeaderInfo_fn, handleThreadRename_fn, handleEditSave_fn, handleEditCancel_fn, handleThreadNameClick_fn, handleThreadDelete_fn, handleHistoryButtonClick_fn, handleHistoryPopoverToggle_fn, handleViewAllClick_fn, handleThreadsSearchQuery_fn, handleThreadsSearchLoadMore_fn, handleThreadsSearchSelect_fn, handleThreadsSearchNewChat_fn, handleThreadsSearchRename_fn, handleThreadsSearchDelete_fn, handleThreadsSearchDeleteConfirm_fn, headingElement_get, promptTemplate_get, welcomeHeaderTemplate_get, welcomeSuggestionsTemplate_get, threadName_get, threadActionsMenu_get, conversationContentTemplate_get, historyContentTemplate_get, mainContentTemplate_get, historyButtonTemplate_get, historyPopoverTemplate_get, promptSectionTemplate_get;
|
|
44
|
+
const HISTORY_POPOVER_INSET = 48;
|
|
40
45
|
const AiChatbotLauncherComponentTagName = "forge-ai-chatbot-launcher";
|
|
41
46
|
let AiChatbotLauncherComponent = class extends AiChatbotBase {
|
|
42
47
|
constructor() {
|
|
@@ -45,15 +50,28 @@ let AiChatbotLauncherComponent = class extends AiChatbotBase {
|
|
|
45
50
|
this.placeholder = "How can I help you today?";
|
|
46
51
|
this.showThreadRename = false;
|
|
47
52
|
this.showThreadDelete = false;
|
|
53
|
+
this.threads = [];
|
|
54
|
+
this.totalThreads = 0;
|
|
55
|
+
this.threadsLoading = false;
|
|
56
|
+
this.selectedThreadId = null;
|
|
48
57
|
this._viewState = "welcome";
|
|
49
58
|
this._skipAnimation = false;
|
|
50
59
|
this._editingThreadId = null;
|
|
60
|
+
this._historyPopoverOpen = false;
|
|
51
61
|
this._messageThreadRef = createRef();
|
|
52
62
|
this._promptRef = createRef();
|
|
53
63
|
__privateAdd(this, _headerRef, createRef());
|
|
64
|
+
__privateAdd(this, _gradientContainerRef, createRef());
|
|
54
65
|
__privateAdd(this, _internals);
|
|
66
|
+
__privateAdd(this, _pendingThreadDeleteSource, null);
|
|
55
67
|
__privateAdd(this, _deleteThreadController, new DeleteThreadController(this, {
|
|
56
68
|
onConfirm: (thread) => {
|
|
69
|
+
const source = __privateGet(this, _pendingThreadDeleteSource);
|
|
70
|
+
__privateSet(this, _pendingThreadDeleteSource, null);
|
|
71
|
+
if (source) {
|
|
72
|
+
source.confirmThreadDelete(thread);
|
|
73
|
+
return;
|
|
74
|
+
}
|
|
57
75
|
const onSuccess = () => {
|
|
58
76
|
};
|
|
59
77
|
const onError = (error) => {
|
|
@@ -84,6 +102,13 @@ let AiChatbotLauncherComponent = class extends AiChatbotBase {
|
|
|
84
102
|
startConversation() {
|
|
85
103
|
__privateMethod(this, _AiChatbotLauncherComponent_instances, commitConversationTransition_fn).call(this);
|
|
86
104
|
}
|
|
105
|
+
/**
|
|
106
|
+
* Navigates directly to the full history view (not the history popover).
|
|
107
|
+
*/
|
|
108
|
+
showHistory() {
|
|
109
|
+
this._historyPopoverOpen = false;
|
|
110
|
+
__privateMethod(this, _AiChatbotLauncherComponent_instances, transitionToHistory_fn).call(this);
|
|
111
|
+
}
|
|
87
112
|
_handleInfo() {
|
|
88
113
|
const header = __privateGet(this, _headerRef).value;
|
|
89
114
|
header?.showAgentInfo();
|
|
@@ -106,6 +131,7 @@ let AiChatbotLauncherComponent = class extends AiChatbotBase {
|
|
|
106
131
|
}
|
|
107
132
|
startNewChat() {
|
|
108
133
|
super.startNewChat();
|
|
134
|
+
this.selectedThreadId = null;
|
|
109
135
|
__privateMethod(this, _AiChatbotLauncherComponent_instances, transitionToWelcome_fn).call(this);
|
|
110
136
|
}
|
|
111
137
|
setMessages(messages) {
|
|
@@ -140,17 +166,27 @@ let AiChatbotLauncherComponent = class extends AiChatbotBase {
|
|
|
140
166
|
};
|
|
141
167
|
return html`
|
|
142
168
|
<div class=${classMap(classes)} role="region" aria-label="AI chatbot launcher" aria-busy=${this._isStreaming}>
|
|
143
|
-
${
|
|
144
|
-
${
|
|
169
|
+
${__privateGet(this, _AiChatbotLauncherComponent_instances, mainContentTemplate_get)} ${__privateGet(this, _AiChatbotLauncherComponent_instances, promptSectionTemplate_get)}
|
|
170
|
+
${this._viewState === "welcome" ? __privateGet(this, _AiChatbotLauncherComponent_instances, welcomeSuggestionsTemplate_get) : nothing}
|
|
145
171
|
</div>
|
|
146
|
-
${__privateGet(this, _deleteThreadController).template}
|
|
172
|
+
${__privateGet(this, _AiChatbotLauncherComponent_instances, historyPopoverTemplate_get)} ${__privateGet(this, _deleteThreadController).template}
|
|
147
173
|
`;
|
|
148
174
|
}
|
|
149
175
|
};
|
|
150
176
|
_headerRef = /* @__PURE__ */ new WeakMap();
|
|
177
|
+
_gradientContainerRef = /* @__PURE__ */ new WeakMap();
|
|
151
178
|
_internals = /* @__PURE__ */ new WeakMap();
|
|
179
|
+
_pendingThreadDeleteSource = /* @__PURE__ */ new WeakMap();
|
|
152
180
|
_deleteThreadController = /* @__PURE__ */ new WeakMap();
|
|
153
181
|
_AiChatbotLauncherComponent_instances = /* @__PURE__ */ new WeakSet();
|
|
182
|
+
setViewState_fn = function(next) {
|
|
183
|
+
if (this._viewState === next) {
|
|
184
|
+
return;
|
|
185
|
+
}
|
|
186
|
+
toggleState(__privateGet(this, _internals), this._viewState, false);
|
|
187
|
+
toggleState(__privateGet(this, _internals), next, true);
|
|
188
|
+
this._viewState = next;
|
|
189
|
+
};
|
|
154
190
|
transitionToConversation_fn = function() {
|
|
155
191
|
if (this._viewState === "conversation") {
|
|
156
192
|
return;
|
|
@@ -165,21 +201,20 @@ transitionToConversation_fn = function() {
|
|
|
165
201
|
__privateMethod(this, _AiChatbotLauncherComponent_instances, commitConversationTransition_fn).call(this);
|
|
166
202
|
};
|
|
167
203
|
commitConversationTransition_fn = function() {
|
|
168
|
-
|
|
169
|
-
return;
|
|
170
|
-
}
|
|
171
|
-
this._viewState = "conversation";
|
|
172
|
-
__privateGet(this, _internals).states.delete("welcome");
|
|
173
|
-
__privateGet(this, _internals).states.add("conversation");
|
|
204
|
+
__privateMethod(this, _AiChatbotLauncherComponent_instances, setViewState_fn).call(this, "conversation");
|
|
174
205
|
};
|
|
175
206
|
transitionToWelcome_fn = function() {
|
|
176
207
|
if (this._viewState === "welcome") {
|
|
177
208
|
return;
|
|
178
209
|
}
|
|
179
|
-
this._viewState = "welcome";
|
|
180
210
|
this._skipAnimation = false;
|
|
181
|
-
|
|
182
|
-
|
|
211
|
+
__privateMethod(this, _AiChatbotLauncherComponent_instances, setViewState_fn).call(this, "welcome");
|
|
212
|
+
};
|
|
213
|
+
transitionToHistory_fn = function() {
|
|
214
|
+
__privateMethod(this, _AiChatbotLauncherComponent_instances, setViewState_fn).call(this, "history");
|
|
215
|
+
};
|
|
216
|
+
handleHistoryBack_fn = function() {
|
|
217
|
+
__privateMethod(this, _AiChatbotLauncherComponent_instances, setViewState_fn).call(this, this._hasMessages ? "conversation" : "welcome");
|
|
183
218
|
};
|
|
184
219
|
handleHeaderClear_fn = function() {
|
|
185
220
|
this.clearMessages();
|
|
@@ -228,6 +263,49 @@ handleThreadDelete_fn = function() {
|
|
|
228
263
|
};
|
|
229
264
|
__privateGet(this, _deleteThreadController).show(thread);
|
|
230
265
|
};
|
|
266
|
+
handleHistoryButtonClick_fn = function() {
|
|
267
|
+
this._historyPopoverOpen = !this._historyPopoverOpen;
|
|
268
|
+
};
|
|
269
|
+
handleHistoryPopoverToggle_fn = function(evt) {
|
|
270
|
+
this._historyPopoverOpen = evt.detail.open;
|
|
271
|
+
};
|
|
272
|
+
handleViewAllClick_fn = function() {
|
|
273
|
+
this._historyPopoverOpen = false;
|
|
274
|
+
__privateMethod(this, _AiChatbotLauncherComponent_instances, transitionToHistory_fn).call(this);
|
|
275
|
+
};
|
|
276
|
+
handleThreadsSearchQuery_fn = function(evt) {
|
|
277
|
+
forwardCancelableEvent(this, evt, "forge-ai-chatbot-launcher-thread-search");
|
|
278
|
+
};
|
|
279
|
+
handleThreadsSearchLoadMore_fn = function(evt) {
|
|
280
|
+
this._dispatchHostEvent({ type: "forge-ai-chatbot-launcher-thread-load-more", detail: evt.detail });
|
|
281
|
+
};
|
|
282
|
+
handleThreadsSearchSelect_fn = function(evt) {
|
|
283
|
+
this._historyPopoverOpen = false;
|
|
284
|
+
this.selectedThreadId = evt.detail.id;
|
|
285
|
+
this._dispatchHostEvent({
|
|
286
|
+
type: "forge-ai-chatbot-launcher-thread-select",
|
|
287
|
+
detail: evt.detail
|
|
288
|
+
});
|
|
289
|
+
__privateMethod(this, _AiChatbotLauncherComponent_instances, setViewState_fn).call(this, "conversation");
|
|
290
|
+
};
|
|
291
|
+
handleThreadsSearchNewChat_fn = function() {
|
|
292
|
+
this._historyPopoverOpen = false;
|
|
293
|
+
const event = this._dispatchHostEvent({ type: "forge-ai-chatbot-launcher-new-chat", cancelable: true });
|
|
294
|
+
if (!event.defaultPrevented) {
|
|
295
|
+
this.startNewChat();
|
|
296
|
+
}
|
|
297
|
+
};
|
|
298
|
+
handleThreadsSearchRename_fn = function(evt) {
|
|
299
|
+
forwardCancelableEvent(this, evt, "forge-ai-chatbot-launcher-thread-rename");
|
|
300
|
+
};
|
|
301
|
+
handleThreadsSearchDelete_fn = function(evt) {
|
|
302
|
+
forwardCancelableEvent(this, evt, "forge-ai-chatbot-launcher-thread-delete");
|
|
303
|
+
};
|
|
304
|
+
handleThreadsSearchDeleteConfirm_fn = function(evt) {
|
|
305
|
+
evt.preventDefault();
|
|
306
|
+
__privateSet(this, _pendingThreadDeleteSource, evt.target);
|
|
307
|
+
__privateGet(this, _deleteThreadController).show(evt.detail.thread);
|
|
308
|
+
};
|
|
231
309
|
headingElement_get = function() {
|
|
232
310
|
switch (this.headingLevel) {
|
|
233
311
|
case 1:
|
|
@@ -279,6 +357,7 @@ promptTemplate_get = function() {
|
|
|
279
357
|
</forge-ai-file-picker>
|
|
280
358
|
`
|
|
281
359
|
)}
|
|
360
|
+
${__privateGet(this, _AiChatbotLauncherComponent_instances, historyButtonTemplate_get)}
|
|
282
361
|
${when(
|
|
283
362
|
this.voiceInput === "on",
|
|
284
363
|
() => html`
|
|
@@ -431,10 +510,121 @@ conversationContentTemplate_get = function() {
|
|
|
431
510
|
</div>
|
|
432
511
|
`;
|
|
433
512
|
};
|
|
513
|
+
historyContentTemplate_get = function() {
|
|
514
|
+
return html`
|
|
515
|
+
<div class="history">
|
|
516
|
+
<forge-ai-threads-search
|
|
517
|
+
header-title="Chat history"
|
|
518
|
+
?show-back-button=${true}
|
|
519
|
+
.threads=${this.threads}
|
|
520
|
+
.totalChats=${this.totalThreads}
|
|
521
|
+
.selectedThreadId=${this.selectedThreadId}
|
|
522
|
+
?show-thread-rename=${this.showThreadRename}
|
|
523
|
+
?show-thread-delete=${this.showThreadDelete}
|
|
524
|
+
@forge-ai-threads-search-back=${__privateMethod(this, _AiChatbotLauncherComponent_instances, handleHistoryBack_fn)}
|
|
525
|
+
@forge-ai-threads-search-query=${__privateMethod(this, _AiChatbotLauncherComponent_instances, handleThreadsSearchQuery_fn)}
|
|
526
|
+
@forge-ai-threads-search-load-more=${__privateMethod(this, _AiChatbotLauncherComponent_instances, handleThreadsSearchLoadMore_fn)}
|
|
527
|
+
@forge-ai-threads-search-select=${__privateMethod(this, _AiChatbotLauncherComponent_instances, handleThreadsSearchSelect_fn)}
|
|
528
|
+
@forge-ai-threads-search-new-chat=${__privateMethod(this, _AiChatbotLauncherComponent_instances, handleThreadsSearchNewChat_fn)}
|
|
529
|
+
@forge-ai-threads-search-rename=${__privateMethod(this, _AiChatbotLauncherComponent_instances, handleThreadsSearchRename_fn)}
|
|
530
|
+
@forge-ai-threads-search-delete=${__privateMethod(this, _AiChatbotLauncherComponent_instances, handleThreadsSearchDelete_fn)}
|
|
531
|
+
@forge-ai-threads-search-delete-confirm=${__privateMethod(this, _AiChatbotLauncherComponent_instances, handleThreadsSearchDeleteConfirm_fn)}>
|
|
532
|
+
</forge-ai-threads-search>
|
|
533
|
+
</div>
|
|
534
|
+
`;
|
|
535
|
+
};
|
|
536
|
+
mainContentTemplate_get = function() {
|
|
537
|
+
switch (this._viewState) {
|
|
538
|
+
case "welcome":
|
|
539
|
+
return __privateGet(this, _AiChatbotLauncherComponent_instances, welcomeHeaderTemplate_get);
|
|
540
|
+
case "history":
|
|
541
|
+
return __privateGet(this, _AiChatbotLauncherComponent_instances, historyContentTemplate_get);
|
|
542
|
+
default:
|
|
543
|
+
return __privateGet(this, _AiChatbotLauncherComponent_instances, conversationContentTemplate_get);
|
|
544
|
+
}
|
|
545
|
+
};
|
|
546
|
+
historyButtonTemplate_get = function() {
|
|
547
|
+
if (this.threads.length === 0 && this.totalThreads === 0 && !this.threadsLoading) {
|
|
548
|
+
return nothing;
|
|
549
|
+
}
|
|
550
|
+
return html`
|
|
551
|
+
<button
|
|
552
|
+
id="history-button"
|
|
553
|
+
slot="actions-start"
|
|
554
|
+
type="button"
|
|
555
|
+
class="forge-icon-button forge-icon-button--medium ai-icon-button"
|
|
556
|
+
aria-label="Chat history"
|
|
557
|
+
aria-expanded=${this._historyPopoverOpen}
|
|
558
|
+
?disabled=${this.threadsLoading}
|
|
559
|
+
@click=${__privateMethod(this, _AiChatbotLauncherComponent_instances, handleHistoryButtonClick_fn)}>
|
|
560
|
+
${when(
|
|
561
|
+
this.threadsLoading,
|
|
562
|
+
() => html`<forge-ai-spinner size="extra-small"></forge-ai-spinner>`,
|
|
563
|
+
() => html`
|
|
564
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
|
|
565
|
+
<path
|
|
566
|
+
d="M13.5 8H12v5l4.28 2.54.72-1.21-3.5-2.08zM13 3a9 9 0 0 0-9 9H1l3.96 4.03L9 12H6a7 7 0 0 1 7-7 7 7 0 0 1 7 7 7 7 0 0 1-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.9 8.9 0 0 0 13 21a9 9 0 0 0 9-9 9 9 0 0 0-9-9" />
|
|
567
|
+
</svg>
|
|
568
|
+
`
|
|
569
|
+
)}
|
|
570
|
+
</button>
|
|
571
|
+
${when(
|
|
572
|
+
!this.threadsLoading,
|
|
573
|
+
() => html`<forge-ai-tooltip slot="actions-start" for="history-button" placement="top"
|
|
574
|
+
>Chat history</forge-ai-tooltip
|
|
575
|
+
>`
|
|
576
|
+
)}
|
|
577
|
+
`;
|
|
578
|
+
};
|
|
579
|
+
historyPopoverTemplate_get = function() {
|
|
580
|
+
const chatCount = this.totalThreads > 0 ? this.totalThreads : this.threads.length;
|
|
581
|
+
const anchorWidth = __privateGet(this, _gradientContainerRef).value?.getBoundingClientRect().width;
|
|
582
|
+
const popoverWidth = anchorWidth ? anchorWidth - HISTORY_POPOVER_INSET * 2 : void 0;
|
|
583
|
+
return html`
|
|
584
|
+
<forge-ai-popover
|
|
585
|
+
.anchor=${__privateGet(this, _gradientContainerRef).value ?? null}
|
|
586
|
+
placement="bottom"
|
|
587
|
+
.offset=${8}
|
|
588
|
+
.flip=${true}
|
|
589
|
+
.autoSize=${true}
|
|
590
|
+
?open=${this._historyPopoverOpen}
|
|
591
|
+
@forge-ai-popover-toggle=${__privateMethod(this, _AiChatbotLauncherComponent_instances, handleHistoryPopoverToggle_fn)}>
|
|
592
|
+
<div class="history-popover" style=${popoverWidth ? `width: ${popoverWidth}px` : ""}>
|
|
593
|
+
<forge-ai-threads-search
|
|
594
|
+
header-title="Chat history"
|
|
595
|
+
.showNewChatButton=${false}
|
|
596
|
+
.showSearch=${chatCount > 5}
|
|
597
|
+
.threads=${this.threads}
|
|
598
|
+
.totalChats=${this.totalThreads}
|
|
599
|
+
.selectedThreadId=${this.selectedThreadId}
|
|
600
|
+
?show-thread-rename=${this.showThreadRename}
|
|
601
|
+
?show-thread-delete=${this.showThreadDelete}
|
|
602
|
+
@forge-ai-threads-search-query=${__privateMethod(this, _AiChatbotLauncherComponent_instances, handleThreadsSearchQuery_fn)}
|
|
603
|
+
@forge-ai-threads-search-load-more=${__privateMethod(this, _AiChatbotLauncherComponent_instances, handleThreadsSearchLoadMore_fn)}
|
|
604
|
+
@forge-ai-threads-search-select=${__privateMethod(this, _AiChatbotLauncherComponent_instances, handleThreadsSearchSelect_fn)}
|
|
605
|
+
@forge-ai-threads-search-rename=${__privateMethod(this, _AiChatbotLauncherComponent_instances, handleThreadsSearchRename_fn)}
|
|
606
|
+
@forge-ai-threads-search-delete=${__privateMethod(this, _AiChatbotLauncherComponent_instances, handleThreadsSearchDelete_fn)}
|
|
607
|
+
@forge-ai-threads-search-delete-confirm=${__privateMethod(this, _AiChatbotLauncherComponent_instances, handleThreadsSearchDeleteConfirm_fn)}>
|
|
608
|
+
<button
|
|
609
|
+
slot="header-actions"
|
|
610
|
+
type="button"
|
|
611
|
+
class="forge-button forge-button--dense history-popover__view-all"
|
|
612
|
+
@click=${__privateMethod(this, _AiChatbotLauncherComponent_instances, handleViewAllClick_fn)}>
|
|
613
|
+
<span>View all</span>
|
|
614
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="forge-icon" aria-hidden="true">
|
|
615
|
+
<path fill="none" d="M0 0h24v24H0z" />
|
|
616
|
+
<path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5z" />
|
|
617
|
+
</svg>
|
|
618
|
+
</button>
|
|
619
|
+
</forge-ai-threads-search>
|
|
620
|
+
</div>
|
|
621
|
+
</forge-ai-popover>
|
|
622
|
+
`;
|
|
623
|
+
};
|
|
434
624
|
promptSectionTemplate_get = function() {
|
|
435
625
|
return html`
|
|
436
626
|
<div class="prompt-section">
|
|
437
|
-
<forge-ai-gradient-container class="prompt-container" variant="medium">
|
|
627
|
+
<forge-ai-gradient-container class="prompt-container" variant="medium" ${ref(__privateGet(this, _gradientContainerRef))}>
|
|
438
628
|
${__privateGet(this, _AiChatbotLauncherComponent_instances, promptTemplate_get)}
|
|
439
629
|
</forge-ai-gradient-container>
|
|
440
630
|
${when(this.disclaimerText, () => html`<div class="disclaimer">${this.disclaimerText}</div>`)}
|
|
@@ -454,6 +644,18 @@ __decorateClass([
|
|
|
454
644
|
__decorateClass([
|
|
455
645
|
property({ type: Boolean, attribute: "show-thread-delete" })
|
|
456
646
|
], AiChatbotLauncherComponent.prototype, "showThreadDelete", 2);
|
|
647
|
+
__decorateClass([
|
|
648
|
+
property({ type: Array, attribute: false })
|
|
649
|
+
], AiChatbotLauncherComponent.prototype, "threads", 2);
|
|
650
|
+
__decorateClass([
|
|
651
|
+
property({ type: Number, attribute: "total-threads" })
|
|
652
|
+
], AiChatbotLauncherComponent.prototype, "totalThreads", 2);
|
|
653
|
+
__decorateClass([
|
|
654
|
+
property({ type: Boolean, attribute: "threads-loading" })
|
|
655
|
+
], AiChatbotLauncherComponent.prototype, "threadsLoading", 2);
|
|
656
|
+
__decorateClass([
|
|
657
|
+
property({ type: String, attribute: "selected-thread-id" })
|
|
658
|
+
], AiChatbotLauncherComponent.prototype, "selectedThreadId", 2);
|
|
457
659
|
__decorateClass([
|
|
458
660
|
state()
|
|
459
661
|
], AiChatbotLauncherComponent.prototype, "_viewState", 2);
|
|
@@ -463,6 +665,9 @@ __decorateClass([
|
|
|
463
665
|
__decorateClass([
|
|
464
666
|
state()
|
|
465
667
|
], AiChatbotLauncherComponent.prototype, "_editingThreadId", 2);
|
|
668
|
+
__decorateClass([
|
|
669
|
+
state()
|
|
670
|
+
], AiChatbotLauncherComponent.prototype, "_historyPopoverOpen", 2);
|
|
466
671
|
AiChatbotLauncherComponent = __decorateClass([
|
|
467
672
|
customElement(AiChatbotLauncherComponentTagName)
|
|
468
673
|
], AiChatbotLauncherComponent);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const styles = '/* prettier-ignore */\n/**\n * @license\n * Copyright Tyler Technologies, Inc.\n * License: Apache-2.0\n */\n.forge-icon {\n --_icon-color:var(--forge-icon-color, currentColor);\n --_icon-size:var(--forge-icon-size, 1em);\n --_icon-width:var(--forge-icon-width, var(--_icon-size));\n --_icon-height:var(--forge-icon-height, var(--_icon-size));\n --_icon-font-size:var(--forge-icon-font-size, calc(var(--forge-typography-font-size, 1rem) * 1.5));\n}\n\nimg.forge-icon, svg.forge-icon {\n display: inline-block;\n box-sizing: content-box;\n contain: content;\n font-size: var(--_icon-font-size);\n display: inline-block;\n}\n\nimg.forge-icon {\n width: var(--_icon-width);\n height: var(--_icon-height);\n}\n\nsvg {\n width: var(--_icon-width);\n height: var(--_icon-height);\n display: block;\n fill: var(--_icon-color);\n stroke: var(--_icon-color);\n stroke-width: 0;\n}\n\n/**\n * @license\n * Copyright Tyler Technologies, Inc.\n * License: Apache-2.0\n */\n.forge-button {\n --_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-primary, #3f51b5));\n --_button-text-color:var(--forge-button-text-color, var(--_button-primary-color));\n --_button-disabled-color:var(--forge-button-disabled-color, var(--forge-theme-surface-container, #e0e0e0));\n --_button-padding:var(--forge-button-padding, var(--forge-spacing-medium, 16px));\n --_button-display:var(--forge-button-display, inline-grid);\n --_button-justify:var(--forge-button-justify, center);\n --_button-shape:var(--forge-button-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));\n --_button-height:var(--forge-button-height, 36px);\n --_button-min-width:var(--forge-button-min-width, 64px);\n --_button-spacing:var(--forge-button-spacing, var(--forge-spacing-xsmall, 8px));\n --_button-border-width:var(--forge-button-border-width, medium);\n --_button-border-style:var(--forge-button-border-style, none);\n --_button-border-color:var(--forge-button-border-color, currentColor);\n --_button-shape-start-start-radius:var(--forge-button-shape-start-start-radius, var(--_button-shape));\n --_button-shape-start-end-radius:var(--forge-button-shape-start-end-radius, var(--_button-shape));\n --_button-shape-end-start-radius:var(--forge-button-shape-end-start-radius, var(--_button-shape));\n --_button-shape-end-end-radius:var(--forge-button-shape-end-end-radius, var(--_button-shape));\n --_button-padding-block:var(--forge-button-padding-block, var(--_button-0));\n --_button-padding-inline:var(--forge-button-padding-inline, var(--_button-padding));\n --_button-background:var(--forge-button-background, transparent);\n --_button-hover-background:var(--forge-button-hover-background, var(--_button-background));\n --_button-active-background:var(--forge-button-active-background, var(--_button-background));\n --_button-color:var(--forge-button-color, var(--_button-text-color));\n --_button-icon-size:var(--forge-button-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.125));\n --_button-shadow:var(--forge-button-shadow, none);\n --_button-hover-shadow:var(--forge-button-hover-shadow, none);\n --_button-active-shadow:var(--forge-button-active-shadow, none);\n --_button-cursor:var(--forge-button-cursor, pointer);\n --_button-transition-duration:var(--forge-button-transition-duration, var(--forge-animation-duration-short3, 150ms));\n --_button-transition-timing:var(--forge-button-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n --_button-text-padding-inline:var(--forge-button-text-padding-inline, var(--forge-spacing-xsmall, 8px));\n --_button-outlined-background:var(--forge-button-outlined-background, transparent);\n --_button-outlined-color:var(--forge-button-outlined-color, var(--_button-primary-color));\n --_button-outlined-border-width:var(--forge-button-outlined-border-width, var(--forge-border-thin, 1px));\n --_button-outlined-border-style:var(--forge-button-outlined-border-style, solid);\n --_button-outlined-border-color:var(--forge-button-outlined-border-color, var(--_button-primary-color));\n --_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-primary-container, #d1d5ed));\n --_button-tonal-disabled-background:var(--forge-button-tonal-disabled-background, var(--_button-disabled-color));\n --_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-primary-container, #222c62));\n --_button-tonal-disabled-color:var(--forge-button-tonal-disabled-color, var(--_button-disabled-text-color));\n --_button-filled-background:var(--forge-button-filled-background, var(--_button-primary-color));\n --_button-filled-disabled-background:var(--forge-button-filled-disabled-background, var(--_button-disabled-color));\n --_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-primary, #ffffff));\n --_button-filled-disabled-color:var(--forge-button-filled-disabled-color, var(--_button-disabled-text-color));\n --_button-raised-background:var(--forge-button-raised-background, var(--_button-primary-color));\n --_button-raised-disabled-background:var(--forge-button-raised-disabled-background, var(--_button-disabled-color));\n --_button-raised-color:var(--forge-button-raised-color, var(--forge-theme-on-primary, #ffffff));\n --_button-raised-disabled-color:var(--forge-button-raised-disabled-color, var(--_button-disabled-text-color));\n --_button-raised-shadow:var(--forge-button-raised-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12));\n --_button-raised-hover-shadow:var(--forge-button-raised-hover-shadow, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));\n --_button-raised-active-shadow:var(--forge-button-raised-active-shadow, 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12));\n --_button-raised-disabled-shadow:var(--forge-button-raised-disabled-shadow, none);\n --_button-link-color:var(--forge-button-link-color, var(--_button-primary-color));\n --_button-link-text-decoration:var(--forge-button-link-text-decoration, underline);\n --_button-link-height:var(--forge-button-link-height, auto);\n --_button-link-padding:var(--forge-button-link-padding, 0);\n --_button-link-line-height:var(--forge-button-link-line-height, normal);\n --_button-link-width:var(--forge-button-link-width, auto);\n --_button-link-hover-text-decoration:var(--forge-button-link-hover-text-decoration, none);\n --_button-link-active-opacity:var(--forge-button-link-active-opacity, 0.65);\n --_button-link-transition-duration:var(--forge-button-link-transition-duration, var(--forge-animation-duration-short3, 150ms));\n --_button-link-transition-timing:var(--forge-button-link-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n --_button-disabled-cursor:var(--forge-button-disabled-cursor, not-allowed);\n --_button-disabled-text-color:var(--forge-button-disabled-text-color, var(--forge-theme-text-low, rgba(0, 0, 0, 0.38)));\n --_button-disabled-background:var(--forge-button-disabled-background, transparent);\n --_button-disabled-border-color:var(--forge-button-disabled-border-color, var(--_button-disabled-color));\n --_button-disabled-shadow:var(--forge-button-disabled-shadow, none);\n --_button-dense-height:var(--forge-button-dense-height, 24px);\n --_button-pill-shape:var(--forge-button-pill-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));\n --_button-pill-padding-inline:var(--forge-button-pill-padding-inline, var(--forge-spacing-small, 12px));\n --_button-focus-indicator-offset:var(--forge-button-focus-indicator-offset, 4px);\n --_button-text-focus-indicator-offset:var(--forge-button-text-focus-indicator-offset, 0px);\n --_button-link-focus-indicator-offset:var(--forge-button-link-focus-indicator-offset, 2px);\n --_button-popover-icon-transition-duration:var(--forge-button-popover-icon-transition-duration, var(--forge-animation-duration-short3, 150ms));\n --_button-popover-icon-transition-timing:var(--forge-button-popover-icon-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n --_button-popover-icon-open-rotation:var(--forge-button-popover-icon-open-rotation, 180deg);\n}\n\n.forge-button {\n display: var(--_button-display);\n position: relative;\n outline: none;\n vertical-align: middle;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: var(--forge-typography-button-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n font-size: var(--forge-typography-button-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-button-font-size-scale, 0.875)));\n font-weight: var(--forge-typography-button-font-weight, 500);\n line-height: var(--forge-typography-button-line-height, normal);\n letter-spacing: var(--forge-typography-button-letter-spacing, 0.0714285714em);\n text-transform: var(--forge-typography-button-text-transform, inherit);\n text-decoration: var(--forge-typography-button-text-decoration, inherit);\n position: relative;\n display: var(--_button-display);\n grid-auto-flow: column;\n align-items: center;\n justify-content: var(--_button-justify);\n gap: var(--_button-spacing);\n z-index: 0;\n box-sizing: border-box;\n min-inline-size: var(--_button-min-width);\n height: var(--_button-height);\n inline-size: 100%;\n border-width: var(--_button-border-width);\n border-style: var(--_button-border-style);\n border-color: var(--_button-border-color);\n border-start-start-radius: var(--_button-shape-start-start-radius);\n border-start-end-radius: var(--_button-shape-start-end-radius);\n border-end-start-radius: var(--_button-shape-end-start-radius);\n border-end-end-radius: var(--_button-shape-end-end-radius);\n padding-block: var(--_button-padding-block);\n padding-inline: var(--_button-padding-inline);\n box-shadow: var(--_button-shadow);\n outline: none;\n user-select: none;\n -webkit-appearance: none;\n vertical-align: middle;\n text-decoration: none;\n white-space: nowrap;\n background: var(--_button-background);\n color: var(--_button-color);\n cursor: var(--_button-cursor);\n transition-property: box-shadow, background;\n transition-duration: var(--_button-transition-duration);\n transition-timing-function: var(--_button-transition-timing);\n}\n\n.forge-button::-moz-focus-inner {\n padding: 0;\n border: 0;\n}\n\n.forge-button:hover {\n --_button-shadow:var(--_button-hover-shadow);\n background: var(--_button-hover-background);\n}\n\n.forge-button:active {\n --_button-shadow:var(--_button-active-shadow);\n background: var(--_button-active-background);\n}\n\n.forge-button {\n position: relative;\n inline-size: auto;\n}\n\n.forge-button:not(:disabled):not(.forge-button--link) {\n --_state-layer-display:var(--forge-state-layer-display, flex);\n --_state-layer-color:var(--forge-state-layer-color, var(--forge-theme-on-surface, #000000));\n --_state-layer-hover-color:var(--forge-state-layer-hover-color, var(--_state-layer-color));\n --_state-layer-hover-opacity:var(--forge-state-layer-hover-opacity, 0.08);\n --_state-layer-pressed-color:var(--forge-state-layer-pressed-color, var(--_state-layer-color));\n --_state-layer-pressed-opacity:var(--forge-state-layer-pressed-opacity, 0.12);\n --_state-layer-hover-duration:var(--forge-state-layer-hover-duration, 15ms);\n --_state-layer-pressed-duration:var(--forge-state-layer-pressed-duration, 105ms);\n --_state-layer-animation-duration:var(--forge-state-layer-animation-duration, 375ms);\n}\n\n.forge-button:not(:disabled):not(.forge-button--link)::before {\n opacity: 0;\n position: absolute;\n backface-visibility: hidden;\n transform: translateZ(0);\n background-color: var(--_state-layer-hover-color);\n inset: 0;\n transition: opacity var(--_state-layer-hover-duration) linear, background-color var(--_state-layer-hover-duration) linear;\n --_state-layer-hover-duration:var(--forge-state-layer-hover-duration, 100ms);\n content: "";\n opacity: 0;\n border-radius: inherit;\n}\n\n.forge-button:not(:disabled):not(.forge-button--link):hover::before {\n background-color: var(--_state-layer-hover-color);\n opacity: var(--_state-layer-hover-opacity);\n}\n\n.forge-button:not(:disabled):not(.forge-button--link):active::before {\n opacity: var(--_state-layer-pressed-opacity);\n transition-duration: var(--_state-layer-pressed-duration);\n --_state-layer-pressed-opacity:var(--forge-state-layer-pressed-opacity, 0.18);\n}\n\n@keyframes forge-focus-indicator-outward-grow {\n from {\n outline-width: 0;\n }\n to {\n outline-width: var(--_focus-indicator-active-width);\n }\n}\n@keyframes forge-focus-indicator-outward-shrink {\n from {\n outline-width: var(--_focus-indicator-active-width);\n }\n}\n@keyframes forge-focus-indicator-inward-grow {\n from {\n border-width: 0;\n }\n to {\n border-width: var(--_focus-indicator-active-width);\n }\n}\n@keyframes forge-focus-indicator-inward-shrink {\n from {\n border-width: var(--_focus-indicator-active-width);\n }\n}\n.forge-button:not(:disabled) {\n outline: none;\n}\n\n.forge-button:not(:disabled):focus-visible::after {\n --_focus-indicator-display:var(--forge-focus-indicator-display, flex);\n --_focus-indicator-width:var(--forge-focus-indicator-width, var(--forge-border-medium, 2px));\n --_focus-indicator-active-width:var(--forge-focus-indicator-active-width, 6px);\n --_focus-indicator-color:var(--forge-focus-indicator-color, var(--forge-theme-primary, #3f51b5));\n --_focus-indicator-shape:var(--forge-focus-indicator-shape, calc(var(--forge-shape-extra-small, 1px) * var(--forge-shape-factor, 1)));\n --_focus-indicator-duration:var(--forge-focus-indicator-duration, var(--forge-animation-duration-long4, 600ms));\n --_focus-indicator-easing:var(--forge-focus-indicator-easing, var(--forge-animation-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)));\n --_focus-indicator-shape-start-start:var(--forge-focus-indicator-shape-start-start, var(--_focus-indicator-shape));\n --_focus-indicator-shape-start-end:var(--forge-focus-indicator-shape-start-end, var(--_focus-indicator-shape));\n --_focus-indicator-shape-end-end:var(--forge-focus-indicator-shape-end-end, var(--_focus-indicator-shape));\n --_focus-indicator-shape-end-start:var(--forge-focus-indicator-shape-end-start, var(--_focus-indicator-shape));\n --_focus-indicator-outward-offset:var(--forge-focus-indicator-outward-offset, var(--forge-spacing-xxsmall, 4px));\n --_focus-indicator-inward-offset:var(--forge-focus-indicator-inward-offset, 0px);\n --_focus-indicator-offset-block:var(--forge-focus-indicator-offset-block, 0);\n --_focus-indicator-offset-inline:var(--forge-focus-indicator-offset-inline, 0);\n}\n\n.forge-button:not(:disabled):focus-visible::after {\n animation-delay: 0s, calc(var(--_focus-indicator-duration) * 0.25);\n animation-duration: calc(var(--_focus-indicator-duration) * 0.25), calc(var(--_focus-indicator-duration) * 0.75);\n animation-timing-function: var(--_focus-indicator-easing);\n box-sizing: border-box;\n color: var(--_focus-indicator-color);\n display: none;\n pointer-events: none;\n position: absolute;\n margin-block: var(--_focus-indicator-offset-block);\n margin-inline: var(--_focus-indicator-offset-inline);\n animation-name: forge-focus-indicator-outward-grow, forge-focus-indicator-outward-shrink;\n border-end-end-radius: calc(var(--_focus-indicator-shape-end-end) + var(--_focus-indicator-outward-offset));\n border-end-start-radius: calc(var(--_focus-indicator-shape-end-start) + var(--_focus-indicator-outward-offset));\n border-start-end-radius: calc(var(--_focus-indicator-shape-start-end) + var(--_focus-indicator-outward-offset));\n border-start-start-radius: calc(var(--_focus-indicator-shape-start-start) + var(--_focus-indicator-outward-offset));\n inset: calc(-1 * var(--_focus-indicator-outward-offset));\n outline: var(--_focus-indicator-width) solid currentColor;\n content: "";\n display: block;\n}\n\n.forge-button:not(:disabled) {\n --forge-focus-indicator-color: var(--_button-primary-color);\n}\n\n.forge-button:disabled {\n cursor: var(--_button-disabled-cursor);\n --_button-background:var(--_button-disabled-background);\n --_button-color:var(--_button-disabled-text-color);\n --_button-shadow:var(--_button-disabled-shadow);\n pointer-events: none;\n pointer-events: initial;\n}\n\n.forge-button:where(:not(.forge-button--outlined, .forge-button--tonal, .forge-button--filled, .forge-button--raised, .forge-button--link)), .forge-button--text {\n --_button-padding-inline:var(--_button-text-padding-inline);\n}\n\n.forge-button--outlined {\n --_button-background:var(--_button-outlined-background);\n --_button-color:var(--_button-outlined-color);\n --_button-border-width:var(--_button-outlined-border-width);\n --_button-border-style:var(--_button-outlined-border-style);\n --_button-border-color:var(--_button-outlined-border-color);\n}\n\n.forge-button--outlined:disabled {\n --_button-border-color:var(--_button-disabled-border-color);\n}\n\n.forge-button--tonal {\n --_button-background:var(--_button-tonal-background);\n --_button-color:var(--_button-tonal-color);\n}\n\n.forge-button--tonal:disabled {\n --_button-background:var(--_button-tonal-disabled-background);\n --_button-color:var(--_button-tonal-disabled-color);\n}\n\n.forge-button--filled, .forge-button--raised {\n --_button-background:var(--_button-filled-background);\n --_button-color:var(--_button-filled-color);\n --forge-state-layer-color: var(--_button-filled-color);\n}\n\n.forge-button--filled:disabled, .forge-button--raised:disabled {\n --_button-background:var(--_button-filled-disabled-background);\n --_button-color:var(--_button-filled-disabled-color);\n}\n\n.forge-button--raised {\n --_button-background:var(--_button-raised-background);\n --_button-color:var(--_button-raised-color);\n --_button-shadow:var(--_button-raised-shadow);\n}\n\n.forge-button--raised:hover {\n --_button-shadow:var(--_button-raised-hover-shadow);\n}\n\n.forge-button--raised:active {\n --_button-shadow:var(--_button-raised-active-shadow);\n}\n\n.forge-button--raised:disabled {\n --_button-background:var(--_button-raised-disabled-background);\n --_button-color:var(--_button-raised-disabled-color);\n --_button-shadow:var(--_button-raised-disabled-shadow);\n}\n\n.forge-button--link {\n --_button-color:var(--_button-link-color);\n --_button-height:var(--_button-link-height);\n --_button-padding:var(--_button-link-padding);\n --_button-focus-indicator-offset:var(--_button-link-focus-indicator-offset);\n text-decoration: var(--_button-link-text-decoration);\n line-height: var(--_button-link-line-height);\n transition: opacity var(--_button-link-transition-duration) var(--_button-link-transition-timing);\n inline-size: var(--_button-link-width);\n}\n\n.forge-button--link:hover {\n text-decoration: var(--_button-link-hover-text-decoration);\n}\n\n.forge-button--link:active {\n opacity: var(--_button-link-active-opacity);\n}\n\n.forge-button--pill {\n --_button-shape:var(--_button-pill-shape);\n --_button-padding-inline:var(--_button-pill-padding-inline);\n --forge-focus-indicator-shape: var(--_button-pill-shape);\n}\n\n.forge-button {\n --forge-icon-font-size: var(--_button-icon-size);\n}\n\n.forge-button--dense {\n --_button-height:var(--_button-dense-height);\n}\n\n:host {\n display: block;\n height: 100%;\n}\n\n.launcher {\n display: flex;\n flex-direction: column;\n height: 100%;\n box-sizing: border-box;\n}\n\n.welcome {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--forge-spacing-xxsmall, 4px);\n animation: fade-in 300ms var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n max-inline-size: 768px;\n margin-inline: auto;\n width: 100%;\n box-sizing: border-box;\n padding-inline: var(--forge-spacing-xxlarge, 48px);\n}\n\n.welcome-header {\n display: flex;\n align-items: center;\n gap: var(--forge-spacing-xsmall, 8px);\n}\n\n.icon {\n --forge-ai-icon-size: 48px;\n color: var(--forge-theme-tertiary, #3d5afe);\n}\n\n.title {\n margin: 0;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: var(--forge-typography-heading6-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n font-size: var(--forge-typography-heading6-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading6-font-size-scale, 1.75)));\n font-weight: var(--forge-typography-heading6-font-weight, 500);\n line-height: var(--forge-typography-heading6-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading6-line-height-scale, 2.125)));\n letter-spacing: var(--forge-typography-heading6-letter-spacing, 0em);\n text-transform: var(--forge-typography-heading6-text-transform, inherit);\n text-decoration: var(--forge-typography-heading6-text-decoration, inherit);\n color: var(--forge-theme-text-high, rgba(0, 0, 0, 0.87));\n}\n\n.description {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: var(--forge-typography-body1-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n font-size: var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 0.875)));\n font-weight: var(--forge-typography-body1-font-weight, 400);\n line-height: var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));\n letter-spacing: var(--forge-typography-body1-letter-spacing, 0.0357142857em);\n text-transform: var(--forge-typography-body1-text-transform, inherit);\n text-decoration: var(--forge-typography-body1-text-decoration, inherit);\n color: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));\n text-align: center;\n margin-block-end: var(--forge-spacing-medium, 16px);\n}\n\n.prompt-container {\n --forge-card-outline-width: 0;\n inline-size: 100%;\n}\n\n.prompt-section {\n display: flex;\n flex-direction: column;\n gap: var(--forge-spacing-xsmall, 8px);\n width: 100%;\n box-sizing: border-box;\n}\n\n.disclaimer {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: var(--forge-typography-label1-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n font-size: var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, 0.75)));\n font-weight: var(--forge-typography-label1-font-weight, 400);\n line-height: var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));\n letter-spacing: var(--forge-typography-label1-letter-spacing, 0.0357142857em);\n text-transform: var(--forge-typography-label1-text-transform, inherit);\n text-decoration: var(--forge-typography-label1-text-decoration, inherit);\n color: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));\n text-align: center;\n}\n\n.welcome-suggestions {\n inline-size: 100%;\n margin-block-start: var(--forge-spacing-large, 24px);\n}\n.welcome-suggestions forge-ai-suggestions {\n margin-inline: var(--forge-spacing-medium, 16px);\n}\n\n.conversation {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-height: 0;\n}\n\n.conversation forge-ai-chat-header {\n flex-shrink: 0;\n max-inline-size: 768px;\n margin-inline: auto;\n width: 100%;\n}\n\n.conversation forge-ai-message-thread {\n --forge-ai-message-thread-content-max-width: 768px;\n --forge-ai-markdown-font-size: 1rem;\n --forge-ai-markdown-line-height: 1.6;\n flex: 1;\n min-height: 0;\n animation: fade-in var(--forge-animation-duration-medium2, 300ms) var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1));\n}\n\n.thread-name {\n margin-inline-start: -8px;\n display: flex;\n align-items: center;\n min-width: 0;\n flex: 1;\n max-width: 300px;\n}\n.thread-name__separator {\n --forge-icon-font-size: 1.125rem;\n display: flex;\n margin-inline-end: var(--forge-spacing-xxxsmall, 2px);\n}\n.thread-name__separator .forge-icon {\n fill: var(--forge-theme-text-low, rgba(0, 0, 0, 0.38));\n}\n.thread-name__text {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: var(--forge-typography-body2-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n font-size: var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1)));\n font-weight: var(--forge-typography-body2-font-weight, 400);\n line-height: var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375)));\n letter-spacing: var(--forge-typography-body2-letter-spacing, 0.015625em);\n text-transform: var(--forge-typography-body2-text-transform, inherit);\n text-decoration: var(--forge-typography-body2-text-decoration, inherit);\n display: block;\n margin-inline-start: var(--forge-spacing-xxsmall, 4px);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n color: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));\n}\n.thread-name__button {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: var(--forge-typography-body2-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n font-size: var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1)));\n font-weight: var(--forge-typography-body2-font-weight, 400);\n line-height: var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375)));\n letter-spacing: var(--forge-typography-body2-letter-spacing, 0.015625em);\n text-transform: var(--forge-typography-body2-text-transform, inherit);\n text-decoration: var(--forge-typography-body2-text-decoration, inherit);\n --forge-focus-indicator-outward-offset: 0px;\n display: block;\n padding-inline: var(--forge-spacing-xxxsmall, 2px);\n min-width: 0;\n}\n\n.session-files {\n display: flex;\n flex-direction: column;\n gap: var(--forge-spacing-xsmall, 8px);\n min-width: 0;\n}\n.session-files .session-files-header {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: var(--forge-typography-label1-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n font-size: var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, 0.75)));\n font-weight: var(--forge-typography-label1-font-weight, 400);\n line-height: var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));\n letter-spacing: var(--forge-typography-label1-letter-spacing, 0.0357142857em);\n text-transform: var(--forge-typography-label1-text-transform, inherit);\n text-decoration: var(--forge-typography-label1-text-decoration, inherit);\n color: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));\n}\n.session-files .session-files-list::-webkit-scrollbar {\n height: var(--forge-scrollbar-height, 16px);\n width: var(--forge-scrollbar-width, 16px);\n}\n.session-files .session-files-list::-webkit-scrollbar-track {\n background-color: var(--forge-scrollbar-track-container, var(--forge-theme-surface-container-low, #ebebeb));\n}\n.session-files .session-files-list::-webkit-scrollbar-track:hover {\n background-color: var(--forge-scrollbar-track-container-hover, var(--forge-theme-surface-container-low, #ebebeb));\n}\n.session-files .session-files-list::-webkit-scrollbar-corner {\n background-color: var(--forge-scrollbar-track-container, var(--forge-theme-surface-container-low, #ebebeb));\n}\n.session-files .session-files-list::-webkit-scrollbar-thumb {\n height: var(--forge-scrollbar-thumb-min-height, 32px);\n width: var(--forge-scrollbar-thumb-min-width, 32px);\n border-radius: var(--forge-scrollbar-border-radius, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));\n border-width: var(--forge-scrollbar-border-width, 3px);\n border-style: solid;\n border-color: transparent;\n background-color: var(--forge-scrollbar-thumb-container, var(--forge-theme-surface-container-medium, #c2c2c2));\n background-clip: content-box;\n}\n.session-files .session-files-list::-webkit-scrollbar-thumb:hover {\n background-color: var(--forge-scrollbar-thumb-container-hover, var(--forge-theme-surface-container-high, #9e9e9e));\n}\n.session-files .session-files-list {\n display: flex;\n gap: var(--forge-spacing-small, 12px);\n overflow-x: auto;\n padding-block-end: var(--forge-spacing-xxsmall, 4px);\n}\n\n@keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n@keyframes prompt-slide-down {\n from {\n transform: translateY(-30vh);\n }\n to {\n transform: translateY(0);\n }\n}\n:host(:state(welcome)) {\n --_ai-chatbot-launcher-align: var(--forge-ai-chatbot-launcher-align, center);\n}\n:host(:state(welcome)) .launcher {\n align-items: center;\n justify-content: var(--_ai-chatbot-launcher-align);\n gap: var(--forge-spacing-xxsmall, 4px);\n}\n:host(:state(welcome)) .welcome {\n display: flex;\n}\n:host(:state(welcome)) .conversation {\n display: none;\n}\n:host(:state(welcome)) .prompt-section {\n max-inline-size: 768px;\n width: 100%;\n}\n:host(:state(welcome)) .session-files {\n inline-size: 100%;\n}\n:host(:state(welcome)) .welcome-suggestions {\n max-inline-size: 768px;\n width: 100%;\n}\n\n:host(:state(conversation)) .welcome {\n display: none;\n}\n:host(:state(conversation)) .conversation {\n display: flex;\n}\n:host(:state(conversation)) .prompt-section {\n padding: var(--forge-spacing-medium, 16px) var(--forge-spacing-medium, 16px) var(--forge-spacing-xsmall, 8px);\n max-inline-size: 768px;\n margin-inline: auto;\n animation: prompt-slide-down var(--forge-animation-duration-medium2, 300ms) var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1));\n}\n:host(:state(conversation)) .prompt-container {\n --forge-card-outline-width: initial;\n border: none;\n background: transparent;\n}\n:host(:state(conversation)) forge-ai-prompt {\n max-inline-size: none;\n}\n\n.launcher.skip-animation .welcome,\n.launcher.skip-animation .conversation forge-ai-message-thread,\n.launcher.skip-animation .prompt-section {\n animation: none;\n}\n\nforge-ai-modal {\n --forge-ai-modal-width: fit-content;\n --forge-ai-modal-height: fit-content;\n}\n\n.delete-confirmation {\n display: flex;\n flex-direction: column;\n gap: var(--forge-spacing-medium, 16px);\n padding: var(--forge-spacing-medium, 16px);\n max-width: 90vw;\n}\n.delete-confirmation__title {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: var(--forge-typography-heading4-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n font-size: var(--forge-typography-heading4-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading4-font-size-scale, 1.25)));\n font-weight: var(--forge-typography-heading4-font-weight, 500);\n line-height: var(--forge-typography-heading4-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading4-line-height-scale, 1.5)));\n letter-spacing: var(--forge-typography-heading4-letter-spacing, 0.005em);\n text-transform: var(--forge-typography-heading4-text-transform, inherit);\n text-decoration: var(--forge-typography-heading4-text-decoration, inherit);\n margin: 0;\n}\n.delete-confirmation__text {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: var(--forge-typography-body1-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n font-size: var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 0.875)));\n font-weight: var(--forge-typography-body1-font-weight, 400);\n line-height: var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));\n letter-spacing: var(--forge-typography-body1-letter-spacing, 0.0357142857em);\n text-transform: var(--forge-typography-body1-text-transform, inherit);\n text-decoration: var(--forge-typography-body1-text-decoration, inherit);\n}\n.delete-confirmation__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--forge-spacing-small, 12px);\n}\n\nforge-ai-edit-thread {\n flex: 1;\n min-width: 0;\n}';
|
|
1
|
+
const styles = '/* prettier-ignore */\n/**\n * @license\n * Copyright Tyler Technologies, Inc.\n * License: Apache-2.0\n */\n.forge-icon {\n --_icon-color:var(--forge-icon-color, currentColor);\n --_icon-size:var(--forge-icon-size, 1em);\n --_icon-width:var(--forge-icon-width, var(--_icon-size));\n --_icon-height:var(--forge-icon-height, var(--_icon-size));\n --_icon-font-size:var(--forge-icon-font-size, calc(var(--forge-typography-font-size, 1rem) * 1.5));\n}\n\nimg.forge-icon, svg.forge-icon {\n display: inline-block;\n box-sizing: content-box;\n contain: content;\n font-size: var(--_icon-font-size);\n display: inline-block;\n}\n\nimg.forge-icon {\n width: var(--_icon-width);\n height: var(--_icon-height);\n}\n\nsvg {\n width: var(--_icon-width);\n height: var(--_icon-height);\n display: block;\n fill: var(--_icon-color);\n stroke: var(--_icon-color);\n stroke-width: 0;\n}\n\n/**\n * @license\n * Copyright Tyler Technologies, Inc.\n * License: Apache-2.0\n */\n.forge-icon-button {\n --_icon-button-display:var(--forge-icon-button-display, inline-flex);\n --_icon-button-size:var(--forge-icon-button-size, 48px);\n --_icon-button-gap:var(--forge-icon-button-gap, 0);\n --_icon-button-icon-color:var(--forge-icon-button-icon-color, currentColor);\n --_icon-button-background-color:var(--forge-icon-button-background-color, none);\n --_icon-button-icon-size:var(--forge-icon-button-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.5));\n --_icon-button-cursor:var(--forge-icon-button-cursor, pointer);\n --_icon-button-padding:var(--forge-icon-button-padding, var(--forge-spacing-xxsmall, 4px));\n --_icon-button-border:var(--forge-icon-button-border, none);\n --_icon-button-shadow:var(--forge-icon-button-shadow, none);\n --_icon-button-transition-duration:var(--forge-icon-button-transition-duration, var(--forge-animation-duration-short3, 150ms));\n --_icon-button-transition-timing:var(--forge-icon-button-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n --_icon-button-shape:var(--forge-icon-button-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));\n --_icon-button-shape-start-start:var(--forge-icon-button-shape-start-start, var(--_icon-button-shape));\n --_icon-button-shape-start-end:var(--forge-icon-button-shape-start-end, var(--_icon-button-shape));\n --_icon-button-shape-end-start:var(--forge-icon-button-shape-end-start, var(--_icon-button-shape));\n --_icon-button-shape-end-end:var(--forge-icon-button-shape-end-end, var(--_icon-button-shape));\n --_icon-button-shape-squared:var(--forge-icon-button-shape-squared, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));\n --_icon-button-outlined-border-width:var(--forge-icon-button-outlined-border-width, 1px);\n --_icon-button-outlined-border-style:var(--forge-icon-button-outlined-border-style, solid);\n --_icon-button-outlined-border-color:var(--forge-icon-button-outlined-border-color, var(--_icon-button-icon-color));\n --_icon-button-tonal-icon-color:var(--forge-icon-button-tonal-icon-color, var(--forge-theme-on-primary-container, #222c62));\n --_icon-button-tonal-background-color:var(--forge-icon-button-tonal-background-color, var(--forge-theme-primary-container, #d1d5ed));\n --_icon-button-filled-icon-color:var(--forge-icon-button-filled-icon-color, var(--forge-theme-on-primary, #ffffff));\n --_icon-button-filled-background-color:var(--forge-icon-button-filled-background-color, var(--forge-theme-primary, #3f51b5));\n --_icon-button-raised-shadow:var(--forge-icon-button-raised-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12));\n --_icon-button-raised-hover-shadow:var(--forge-icon-button-raised-hover-shadow, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));\n --_icon-button-raised-active-shadow:var(--forge-icon-button-raised-active-shadow, 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12));\n --_icon-button-raised-disabled-shadow:var(--forge-icon-button-raised-disabled-shadow, none);\n --_icon-button-density-small-size:var(--forge-icon-button-density-small-size, 24px);\n --_icon-button-density-small-padding:var(--forge-icon-button-density-small-padding, var(--forge-spacing-xxxsmall, 2px));\n --_icon-button-density-small-icon-size:var(--forge-icon-button-density-small-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.125));\n --_icon-button-density-medium-size:var(--forge-icon-button-density-medium-size, 36px);\n --_icon-button-density-medium-padding:var(--forge-icon-button-density-medium-padding, var(--forge-spacing-xxsmall, 4px));\n --_icon-button-density-large-size:var(--forge-icon-button-density-large-size, var(--_icon-button-size));\n --_icon-button-toggle-on-background-color:var(--forge-icon-button-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));\n --_icon-button-toggle-on-icon-color:var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));\n --_icon-button-outlined-toggle-on-background-color:var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));\n --_icon-button-outlined-toggle-on-icon-color:var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));\n --_icon-button-tonal-toggle-background-color:var(--forge-icon-button-tonal-toggle-background-color, var(--forge-theme-surface-container-low, #ebebeb));\n --_icon-button-tonal-toggle-on-background-color:var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));\n --_icon-button-tonal-toggle-on-icon-color:var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));\n --_icon-button-filled-toggle-background-color:var(--forge-icon-button-filled-toggle-background-color, var(--forge-theme-surface-container-low, #ebebeb));\n --_icon-button-filled-toggle-icon-color:var(--forge-icon-button-filled-toggle-icon-color, var(--forge-theme-primary, #3f51b5));\n --_icon-button-filled-toggle-on-background-color:var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-primary, #3f51b5));\n --_icon-button-filled-toggle-on-icon-color:var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-primary, #ffffff));\n --_icon-button-disabled-cursor:var(--forge-icon-button-disabled-cursor, not-allowed);\n --_icon-button-disabled-opacity:var(--forge-icon-button-disabled-opacity, 0.38);\n --_icon-button-popover-icon-padding:var(--forge-icon-button-popover-icon-padding, var(--forge-spacing-xsmall, 8px));\n --_icon-button-focus-indicator-color:var(--forge-icon-button-focus-indicator-color, var(--forge-theme-primary, #3f51b5));\n}\n\n.forge-icon-button {\n display: var(--_icon-button-display);\n position: relative;\n outline: none;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n position: relative;\n z-index: 0;\n display: var(--_icon-button-display);\n align-items: center;\n justify-content: center;\n gap: var(--_icon-button-gap);\n box-sizing: border-box;\n height: var(--_icon-button-density-large-size);\n min-width: var(--_icon-button-density-large-size);\n border: var(--_icon-button-border);\n border-start-start-radius: var(--_icon-button-shape-start-start);\n border-start-end-radius: var(--_icon-button-shape-start-end);\n border-end-start-radius: var(--_icon-button-shape-end-start);\n border-end-end-radius: var(--_icon-button-shape-end-end);\n padding: var(--_icon-button-padding);\n box-shadow: var(--_icon-button-shadow);\n color: var(--_icon-button-icon-color);\n background: var(--_icon-button-background-color);\n font-size: var(--_icon-button-icon-size);\n cursor: var(--_icon-button-cursor);\n user-select: none;\n transition-property: box-shadow, background;\n transition-duration: var(--_icon-button-transition-duration);\n transition-timing-function: var(--_icon-button-transition-timing);\n}\n\n.forge-icon-button img, .forge-icon-button svg {\n height: var(--_icon-button-icon-size);\n width: var(--_icon-button-icon-size);\n}\n\n.forge-icon-button svg {\n fill: currentColor;\n}\n\n.forge-icon-button:not(:disabled) {\n --_state-layer-display:var(--forge-state-layer-display, flex);\n --_state-layer-color:var(--forge-state-layer-color, var(--forge-theme-on-surface, #000000));\n --_state-layer-hover-color:var(--forge-state-layer-hover-color, var(--_state-layer-color));\n --_state-layer-hover-opacity:var(--forge-state-layer-hover-opacity, 0.08);\n --_state-layer-pressed-color:var(--forge-state-layer-pressed-color, var(--_state-layer-color));\n --_state-layer-pressed-opacity:var(--forge-state-layer-pressed-opacity, 0.12);\n --_state-layer-hover-duration:var(--forge-state-layer-hover-duration, 15ms);\n --_state-layer-pressed-duration:var(--forge-state-layer-pressed-duration, 105ms);\n --_state-layer-animation-duration:var(--forge-state-layer-animation-duration, 375ms);\n}\n\n.forge-icon-button:not(:disabled)::before {\n opacity: 0;\n position: absolute;\n backface-visibility: hidden;\n transform: translateZ(0);\n background-color: var(--_state-layer-hover-color);\n inset: 0;\n transition: opacity var(--_state-layer-hover-duration) linear, background-color var(--_state-layer-hover-duration) linear;\n --_state-layer-hover-duration:var(--forge-state-layer-hover-duration, 100ms);\n content: "";\n opacity: 0;\n border-radius: inherit;\n}\n\n.forge-icon-button:not(:disabled):hover::before {\n background-color: var(--_state-layer-hover-color);\n opacity: var(--_state-layer-hover-opacity);\n}\n\n.forge-icon-button:not(:disabled):active::before {\n opacity: var(--_state-layer-pressed-opacity);\n transition-duration: var(--_state-layer-pressed-duration);\n --_state-layer-pressed-opacity:var(--forge-state-layer-pressed-opacity, 0.18);\n}\n\n.forge-icon-button:not(:disabled) {\n --forge-state-layer-color: var(--_icon-button-icon-color);\n}\n\n@keyframes forge-focus-indicator-outward-grow {\n from {\n outline-width: 0;\n }\n to {\n outline-width: var(--_focus-indicator-active-width);\n }\n}\n@keyframes forge-focus-indicator-outward-shrink {\n from {\n outline-width: var(--_focus-indicator-active-width);\n }\n}\n@keyframes forge-focus-indicator-inward-grow {\n from {\n border-width: 0;\n }\n to {\n border-width: var(--_focus-indicator-active-width);\n }\n}\n@keyframes forge-focus-indicator-inward-shrink {\n from {\n border-width: var(--_focus-indicator-active-width);\n }\n}\n.forge-icon-button:not(:disabled) {\n outline: none;\n}\n\n.forge-icon-button:not(:disabled):focus-visible::after {\n --_focus-indicator-display:var(--forge-focus-indicator-display, flex);\n --_focus-indicator-width:var(--forge-focus-indicator-width, var(--forge-border-medium, 2px));\n --_focus-indicator-active-width:var(--forge-focus-indicator-active-width, 6px);\n --_focus-indicator-color:var(--forge-focus-indicator-color, var(--forge-theme-primary, #3f51b5));\n --_focus-indicator-shape:var(--forge-focus-indicator-shape, calc(var(--forge-shape-extra-small, 1px) * var(--forge-shape-factor, 1)));\n --_focus-indicator-duration:var(--forge-focus-indicator-duration, var(--forge-animation-duration-long4, 600ms));\n --_focus-indicator-easing:var(--forge-focus-indicator-easing, var(--forge-animation-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)));\n --_focus-indicator-shape-start-start:var(--forge-focus-indicator-shape-start-start, var(--_focus-indicator-shape));\n --_focus-indicator-shape-start-end:var(--forge-focus-indicator-shape-start-end, var(--_focus-indicator-shape));\n --_focus-indicator-shape-end-end:var(--forge-focus-indicator-shape-end-end, var(--_focus-indicator-shape));\n --_focus-indicator-shape-end-start:var(--forge-focus-indicator-shape-end-start, var(--_focus-indicator-shape));\n --_focus-indicator-outward-offset:var(--forge-focus-indicator-outward-offset, var(--forge-spacing-xxsmall, 4px));\n --_focus-indicator-inward-offset:var(--forge-focus-indicator-inward-offset, 0px);\n --_focus-indicator-offset-block:var(--forge-focus-indicator-offset-block, 0);\n --_focus-indicator-offset-inline:var(--forge-focus-indicator-offset-inline, 0);\n}\n\n.forge-icon-button:not(:disabled):focus-visible::after {\n animation-delay: 0s, calc(var(--_focus-indicator-duration) * 0.25);\n animation-duration: calc(var(--_focus-indicator-duration) * 0.25), calc(var(--_focus-indicator-duration) * 0.75);\n animation-timing-function: var(--_focus-indicator-easing);\n box-sizing: border-box;\n color: var(--_focus-indicator-color);\n display: none;\n pointer-events: none;\n position: absolute;\n margin-block: var(--_focus-indicator-offset-block);\n margin-inline: var(--_focus-indicator-offset-inline);\n animation-name: forge-focus-indicator-outward-grow, forge-focus-indicator-outward-shrink;\n border-end-end-radius: calc(var(--_focus-indicator-shape-end-end) + var(--_focus-indicator-outward-offset));\n border-end-start-radius: calc(var(--_focus-indicator-shape-end-start) + var(--_focus-indicator-outward-offset));\n border-start-end-radius: calc(var(--_focus-indicator-shape-start-end) + var(--_focus-indicator-outward-offset));\n border-start-start-radius: calc(var(--_focus-indicator-shape-start-start) + var(--_focus-indicator-outward-offset));\n inset: calc(-1 * var(--_focus-indicator-outward-offset));\n outline: var(--_focus-indicator-width) solid currentColor;\n content: "";\n display: block;\n}\n\n.forge-icon-button:not(:disabled) {\n --forge-focus-indicator-color: var(--_icon-button-focus-indicator-color);\n --forge-focus-indicator-shape: var(--_icon-button-shape);\n}\n\n.forge-icon-button:not(:disabled):where(.forge-icon-button--text, :not(:where(.forge-icon-button--outlined, .forge-icon-button--tonal, .forge-icon-button--filled, .forge-icon-button--raised))) {\n --forge-focus-indicator-outward-offset: 0px;\n}\n\n.forge-icon-button--outlined {\n border-width: var(--_icon-button-outlined-border-width);\n border-style: var(--_icon-button-outlined-border-style);\n border-color: var(--_icon-button-outlined-border-color);\n}\n\n.forge-icon-button--tonal {\n --_icon-button-icon-color:var(--_icon-button-tonal-icon-color);\n --_icon-button-background-color:var(--_icon-button-tonal-background-color);\n}\n\n.forge-icon-button--filled, .forge-icon-button--raised {\n --_icon-button-icon-color:var(--_icon-button-filled-icon-color);\n --_icon-button-background-color:var(--_icon-button-filled-background-color);\n}\n\n.forge-icon-button--raised {\n --_icon-button-shadow:var(--_icon-button-raised-shadow);\n}\n\n.forge-icon-button--raised:hover {\n --_icon-button-raised-shadow:var(--_icon-button-raised-hover-shadow);\n}\n\n.forge-icon-button--raised:active {\n --_icon-button-raised-shadow:var(--_icon-button-raised-active-shadow);\n}\n\n.forge-icon-button--squared {\n --_icon-button-shape:var(--_icon-button-shape-squared);\n}\n\n.forge-icon-button--small {\n --_icon-button-size:var(--_icon-button-density-small-size);\n --_icon-button-icon-size:var(--_icon-button-density-small-icon-size);\n --_icon-button-padding:var(--_icon-button-density-small-padding);\n}\n\n.forge-icon-button--small > * {\n font-size: var(--_icon-button-density-small-icon-size);\n}\n\n.forge-icon-button--medium {\n --_icon-button-size:var(--_icon-button-density-medium-size);\n --_icon-button-padding:var(--_icon-button-density-medium-padding);\n}\n\n.forge-icon-button:disabled {\n pointer-events: none;\n opacity: var(--_icon-button-disabled-opacity);\n pointer-events: auto;\n cursor: not-allowed;\n}\n\n.forge-icon-button forge-circular-progress {\n --forge-circular-progress-indicator-color: var(--_icon-button-icon-color);\n --forge-circular-progress-track-color: transparent;\n --forge-circular-progress-size: 1em;\n}\n\n/**\n * @license\n * Copyright Tyler Technologies, Inc.\n * License: Apache-2.0\n */\n.forge-button {\n --_button-primary-color:var(--forge-button-primary-color, var(--forge-theme-primary, #3f51b5));\n --_button-text-color:var(--forge-button-text-color, var(--_button-primary-color));\n --_button-disabled-color:var(--forge-button-disabled-color, var(--forge-theme-surface-container, #e0e0e0));\n --_button-padding:var(--forge-button-padding, var(--forge-spacing-medium, 16px));\n --_button-display:var(--forge-button-display, inline-grid);\n --_button-justify:var(--forge-button-justify, center);\n --_button-shape:var(--forge-button-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));\n --_button-height:var(--forge-button-height, 36px);\n --_button-min-width:var(--forge-button-min-width, 64px);\n --_button-spacing:var(--forge-button-spacing, var(--forge-spacing-xsmall, 8px));\n --_button-border-width:var(--forge-button-border-width, medium);\n --_button-border-style:var(--forge-button-border-style, none);\n --_button-border-color:var(--forge-button-border-color, currentColor);\n --_button-shape-start-start-radius:var(--forge-button-shape-start-start-radius, var(--_button-shape));\n --_button-shape-start-end-radius:var(--forge-button-shape-start-end-radius, var(--_button-shape));\n --_button-shape-end-start-radius:var(--forge-button-shape-end-start-radius, var(--_button-shape));\n --_button-shape-end-end-radius:var(--forge-button-shape-end-end-radius, var(--_button-shape));\n --_button-padding-block:var(--forge-button-padding-block, var(--_button-0));\n --_button-padding-inline:var(--forge-button-padding-inline, var(--_button-padding));\n --_button-background:var(--forge-button-background, transparent);\n --_button-hover-background:var(--forge-button-hover-background, var(--_button-background));\n --_button-active-background:var(--forge-button-active-background, var(--_button-background));\n --_button-color:var(--forge-button-color, var(--_button-text-color));\n --_button-icon-size:var(--forge-button-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.125));\n --_button-shadow:var(--forge-button-shadow, none);\n --_button-hover-shadow:var(--forge-button-hover-shadow, none);\n --_button-active-shadow:var(--forge-button-active-shadow, none);\n --_button-cursor:var(--forge-button-cursor, pointer);\n --_button-transition-duration:var(--forge-button-transition-duration, var(--forge-animation-duration-short3, 150ms));\n --_button-transition-timing:var(--forge-button-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n --_button-text-padding-inline:var(--forge-button-text-padding-inline, var(--forge-spacing-xsmall, 8px));\n --_button-outlined-background:var(--forge-button-outlined-background, transparent);\n --_button-outlined-color:var(--forge-button-outlined-color, var(--_button-primary-color));\n --_button-outlined-border-width:var(--forge-button-outlined-border-width, var(--forge-border-thin, 1px));\n --_button-outlined-border-style:var(--forge-button-outlined-border-style, solid);\n --_button-outlined-border-color:var(--forge-button-outlined-border-color, var(--_button-primary-color));\n --_button-tonal-background:var(--forge-button-tonal-background, var(--forge-theme-primary-container, #d1d5ed));\n --_button-tonal-disabled-background:var(--forge-button-tonal-disabled-background, var(--_button-disabled-color));\n --_button-tonal-color:var(--forge-button-tonal-color, var(--forge-theme-on-primary-container, #222c62));\n --_button-tonal-disabled-color:var(--forge-button-tonal-disabled-color, var(--_button-disabled-text-color));\n --_button-filled-background:var(--forge-button-filled-background, var(--_button-primary-color));\n --_button-filled-disabled-background:var(--forge-button-filled-disabled-background, var(--_button-disabled-color));\n --_button-filled-color:var(--forge-button-filled-color, var(--forge-theme-on-primary, #ffffff));\n --_button-filled-disabled-color:var(--forge-button-filled-disabled-color, var(--_button-disabled-text-color));\n --_button-raised-background:var(--forge-button-raised-background, var(--_button-primary-color));\n --_button-raised-disabled-background:var(--forge-button-raised-disabled-background, var(--_button-disabled-color));\n --_button-raised-color:var(--forge-button-raised-color, var(--forge-theme-on-primary, #ffffff));\n --_button-raised-disabled-color:var(--forge-button-raised-disabled-color, var(--_button-disabled-text-color));\n --_button-raised-shadow:var(--forge-button-raised-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12));\n --_button-raised-hover-shadow:var(--forge-button-raised-hover-shadow, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));\n --_button-raised-active-shadow:var(--forge-button-raised-active-shadow, 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12));\n --_button-raised-disabled-shadow:var(--forge-button-raised-disabled-shadow, none);\n --_button-link-color:var(--forge-button-link-color, var(--_button-primary-color));\n --_button-link-text-decoration:var(--forge-button-link-text-decoration, underline);\n --_button-link-height:var(--forge-button-link-height, auto);\n --_button-link-padding:var(--forge-button-link-padding, 0);\n --_button-link-line-height:var(--forge-button-link-line-height, normal);\n --_button-link-width:var(--forge-button-link-width, auto);\n --_button-link-hover-text-decoration:var(--forge-button-link-hover-text-decoration, none);\n --_button-link-active-opacity:var(--forge-button-link-active-opacity, 0.65);\n --_button-link-transition-duration:var(--forge-button-link-transition-duration, var(--forge-animation-duration-short3, 150ms));\n --_button-link-transition-timing:var(--forge-button-link-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n --_button-disabled-cursor:var(--forge-button-disabled-cursor, not-allowed);\n --_button-disabled-text-color:var(--forge-button-disabled-text-color, var(--forge-theme-text-low, rgba(0, 0, 0, 0.38)));\n --_button-disabled-background:var(--forge-button-disabled-background, transparent);\n --_button-disabled-border-color:var(--forge-button-disabled-border-color, var(--_button-disabled-color));\n --_button-disabled-shadow:var(--forge-button-disabled-shadow, none);\n --_button-dense-height:var(--forge-button-dense-height, 24px);\n --_button-pill-shape:var(--forge-button-pill-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));\n --_button-pill-padding-inline:var(--forge-button-pill-padding-inline, var(--forge-spacing-small, 12px));\n --_button-focus-indicator-offset:var(--forge-button-focus-indicator-offset, 4px);\n --_button-text-focus-indicator-offset:var(--forge-button-text-focus-indicator-offset, 0px);\n --_button-link-focus-indicator-offset:var(--forge-button-link-focus-indicator-offset, 2px);\n --_button-popover-icon-transition-duration:var(--forge-button-popover-icon-transition-duration, var(--forge-animation-duration-short3, 150ms));\n --_button-popover-icon-transition-timing:var(--forge-button-popover-icon-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n --_button-popover-icon-open-rotation:var(--forge-button-popover-icon-open-rotation, 180deg);\n}\n\n.forge-button {\n display: var(--_button-display);\n position: relative;\n outline: none;\n vertical-align: middle;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: var(--forge-typography-button-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n font-size: var(--forge-typography-button-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-button-font-size-scale, 0.875)));\n font-weight: var(--forge-typography-button-font-weight, 500);\n line-height: var(--forge-typography-button-line-height, normal);\n letter-spacing: var(--forge-typography-button-letter-spacing, 0.0714285714em);\n text-transform: var(--forge-typography-button-text-transform, inherit);\n text-decoration: var(--forge-typography-button-text-decoration, inherit);\n position: relative;\n display: var(--_button-display);\n grid-auto-flow: column;\n align-items: center;\n justify-content: var(--_button-justify);\n gap: var(--_button-spacing);\n z-index: 0;\n box-sizing: border-box;\n min-inline-size: var(--_button-min-width);\n height: var(--_button-height);\n inline-size: 100%;\n border-width: var(--_button-border-width);\n border-style: var(--_button-border-style);\n border-color: var(--_button-border-color);\n border-start-start-radius: var(--_button-shape-start-start-radius);\n border-start-end-radius: var(--_button-shape-start-end-radius);\n border-end-start-radius: var(--_button-shape-end-start-radius);\n border-end-end-radius: var(--_button-shape-end-end-radius);\n padding-block: var(--_button-padding-block);\n padding-inline: var(--_button-padding-inline);\n box-shadow: var(--_button-shadow);\n outline: none;\n user-select: none;\n -webkit-appearance: none;\n vertical-align: middle;\n text-decoration: none;\n white-space: nowrap;\n background: var(--_button-background);\n color: var(--_button-color);\n cursor: var(--_button-cursor);\n transition-property: box-shadow, background;\n transition-duration: var(--_button-transition-duration);\n transition-timing-function: var(--_button-transition-timing);\n}\n\n.forge-button::-moz-focus-inner {\n padding: 0;\n border: 0;\n}\n\n.forge-button:hover {\n --_button-shadow:var(--_button-hover-shadow);\n background: var(--_button-hover-background);\n}\n\n.forge-button:active {\n --_button-shadow:var(--_button-active-shadow);\n background: var(--_button-active-background);\n}\n\n.forge-button {\n position: relative;\n inline-size: auto;\n}\n\n.forge-button:not(:disabled):not(.forge-button--link) {\n --_state-layer-display:var(--forge-state-layer-display, flex);\n --_state-layer-color:var(--forge-state-layer-color, var(--forge-theme-on-surface, #000000));\n --_state-layer-hover-color:var(--forge-state-layer-hover-color, var(--_state-layer-color));\n --_state-layer-hover-opacity:var(--forge-state-layer-hover-opacity, 0.08);\n --_state-layer-pressed-color:var(--forge-state-layer-pressed-color, var(--_state-layer-color));\n --_state-layer-pressed-opacity:var(--forge-state-layer-pressed-opacity, 0.12);\n --_state-layer-hover-duration:var(--forge-state-layer-hover-duration, 15ms);\n --_state-layer-pressed-duration:var(--forge-state-layer-pressed-duration, 105ms);\n --_state-layer-animation-duration:var(--forge-state-layer-animation-duration, 375ms);\n}\n\n.forge-button:not(:disabled):not(.forge-button--link)::before {\n opacity: 0;\n position: absolute;\n backface-visibility: hidden;\n transform: translateZ(0);\n background-color: var(--_state-layer-hover-color);\n inset: 0;\n transition: opacity var(--_state-layer-hover-duration) linear, background-color var(--_state-layer-hover-duration) linear;\n --_state-layer-hover-duration:var(--forge-state-layer-hover-duration, 100ms);\n content: "";\n opacity: 0;\n border-radius: inherit;\n}\n\n.forge-button:not(:disabled):not(.forge-button--link):hover::before {\n background-color: var(--_state-layer-hover-color);\n opacity: var(--_state-layer-hover-opacity);\n}\n\n.forge-button:not(:disabled):not(.forge-button--link):active::before {\n opacity: var(--_state-layer-pressed-opacity);\n transition-duration: var(--_state-layer-pressed-duration);\n --_state-layer-pressed-opacity:var(--forge-state-layer-pressed-opacity, 0.18);\n}\n\n@keyframes forge-focus-indicator-outward-grow {\n from {\n outline-width: 0;\n }\n to {\n outline-width: var(--_focus-indicator-active-width);\n }\n}\n@keyframes forge-focus-indicator-outward-shrink {\n from {\n outline-width: var(--_focus-indicator-active-width);\n }\n}\n@keyframes forge-focus-indicator-inward-grow {\n from {\n border-width: 0;\n }\n to {\n border-width: var(--_focus-indicator-active-width);\n }\n}\n@keyframes forge-focus-indicator-inward-shrink {\n from {\n border-width: var(--_focus-indicator-active-width);\n }\n}\n.forge-button:not(:disabled) {\n outline: none;\n}\n\n.forge-button:not(:disabled):focus-visible::after {\n --_focus-indicator-display:var(--forge-focus-indicator-display, flex);\n --_focus-indicator-width:var(--forge-focus-indicator-width, var(--forge-border-medium, 2px));\n --_focus-indicator-active-width:var(--forge-focus-indicator-active-width, 6px);\n --_focus-indicator-color:var(--forge-focus-indicator-color, var(--forge-theme-primary, #3f51b5));\n --_focus-indicator-shape:var(--forge-focus-indicator-shape, calc(var(--forge-shape-extra-small, 1px) * var(--forge-shape-factor, 1)));\n --_focus-indicator-duration:var(--forge-focus-indicator-duration, var(--forge-animation-duration-long4, 600ms));\n --_focus-indicator-easing:var(--forge-focus-indicator-easing, var(--forge-animation-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)));\n --_focus-indicator-shape-start-start:var(--forge-focus-indicator-shape-start-start, var(--_focus-indicator-shape));\n --_focus-indicator-shape-start-end:var(--forge-focus-indicator-shape-start-end, var(--_focus-indicator-shape));\n --_focus-indicator-shape-end-end:var(--forge-focus-indicator-shape-end-end, var(--_focus-indicator-shape));\n --_focus-indicator-shape-end-start:var(--forge-focus-indicator-shape-end-start, var(--_focus-indicator-shape));\n --_focus-indicator-outward-offset:var(--forge-focus-indicator-outward-offset, var(--forge-spacing-xxsmall, 4px));\n --_focus-indicator-inward-offset:var(--forge-focus-indicator-inward-offset, 0px);\n --_focus-indicator-offset-block:var(--forge-focus-indicator-offset-block, 0);\n --_focus-indicator-offset-inline:var(--forge-focus-indicator-offset-inline, 0);\n}\n\n.forge-button:not(:disabled):focus-visible::after {\n animation-delay: 0s, calc(var(--_focus-indicator-duration) * 0.25);\n animation-duration: calc(var(--_focus-indicator-duration) * 0.25), calc(var(--_focus-indicator-duration) * 0.75);\n animation-timing-function: var(--_focus-indicator-easing);\n box-sizing: border-box;\n color: var(--_focus-indicator-color);\n display: none;\n pointer-events: none;\n position: absolute;\n margin-block: var(--_focus-indicator-offset-block);\n margin-inline: var(--_focus-indicator-offset-inline);\n animation-name: forge-focus-indicator-outward-grow, forge-focus-indicator-outward-shrink;\n border-end-end-radius: calc(var(--_focus-indicator-shape-end-end) + var(--_focus-indicator-outward-offset));\n border-end-start-radius: calc(var(--_focus-indicator-shape-end-start) + var(--_focus-indicator-outward-offset));\n border-start-end-radius: calc(var(--_focus-indicator-shape-start-end) + var(--_focus-indicator-outward-offset));\n border-start-start-radius: calc(var(--_focus-indicator-shape-start-start) + var(--_focus-indicator-outward-offset));\n inset: calc(-1 * var(--_focus-indicator-outward-offset));\n outline: var(--_focus-indicator-width) solid currentColor;\n content: "";\n display: block;\n}\n\n.forge-button:not(:disabled) {\n --forge-focus-indicator-color: var(--_button-primary-color);\n}\n\n.forge-button:disabled {\n cursor: var(--_button-disabled-cursor);\n --_button-background:var(--_button-disabled-background);\n --_button-color:var(--_button-disabled-text-color);\n --_button-shadow:var(--_button-disabled-shadow);\n pointer-events: none;\n pointer-events: initial;\n}\n\n.forge-button:where(:not(.forge-button--outlined, .forge-button--tonal, .forge-button--filled, .forge-button--raised, .forge-button--link)), .forge-button--text {\n --_button-padding-inline:var(--_button-text-padding-inline);\n}\n\n.forge-button--outlined {\n --_button-background:var(--_button-outlined-background);\n --_button-color:var(--_button-outlined-color);\n --_button-border-width:var(--_button-outlined-border-width);\n --_button-border-style:var(--_button-outlined-border-style);\n --_button-border-color:var(--_button-outlined-border-color);\n}\n\n.forge-button--outlined:disabled {\n --_button-border-color:var(--_button-disabled-border-color);\n}\n\n.forge-button--tonal {\n --_button-background:var(--_button-tonal-background);\n --_button-color:var(--_button-tonal-color);\n}\n\n.forge-button--tonal:disabled {\n --_button-background:var(--_button-tonal-disabled-background);\n --_button-color:var(--_button-tonal-disabled-color);\n}\n\n.forge-button--filled, .forge-button--raised {\n --_button-background:var(--_button-filled-background);\n --_button-color:var(--_button-filled-color);\n --forge-state-layer-color: var(--_button-filled-color);\n}\n\n.forge-button--filled:disabled, .forge-button--raised:disabled {\n --_button-background:var(--_button-filled-disabled-background);\n --_button-color:var(--_button-filled-disabled-color);\n}\n\n.forge-button--raised {\n --_button-background:var(--_button-raised-background);\n --_button-color:var(--_button-raised-color);\n --_button-shadow:var(--_button-raised-shadow);\n}\n\n.forge-button--raised:hover {\n --_button-shadow:var(--_button-raised-hover-shadow);\n}\n\n.forge-button--raised:active {\n --_button-shadow:var(--_button-raised-active-shadow);\n}\n\n.forge-button--raised:disabled {\n --_button-background:var(--_button-raised-disabled-background);\n --_button-color:var(--_button-raised-disabled-color);\n --_button-shadow:var(--_button-raised-disabled-shadow);\n}\n\n.forge-button--link {\n --_button-color:var(--_button-link-color);\n --_button-height:var(--_button-link-height);\n --_button-padding:var(--_button-link-padding);\n --_button-focus-indicator-offset:var(--_button-link-focus-indicator-offset);\n text-decoration: var(--_button-link-text-decoration);\n line-height: var(--_button-link-line-height);\n transition: opacity var(--_button-link-transition-duration) var(--_button-link-transition-timing);\n inline-size: var(--_button-link-width);\n}\n\n.forge-button--link:hover {\n text-decoration: var(--_button-link-hover-text-decoration);\n}\n\n.forge-button--link:active {\n opacity: var(--_button-link-active-opacity);\n}\n\n.forge-button--pill {\n --_button-shape:var(--_button-pill-shape);\n --_button-padding-inline:var(--_button-pill-padding-inline);\n --forge-focus-indicator-shape: var(--_button-pill-shape);\n}\n\n.forge-button {\n --forge-icon-font-size: var(--_button-icon-size);\n}\n\n.forge-button--dense {\n --_button-height:var(--_button-dense-height);\n}\n\n:host {\n display: block;\n height: 100%;\n}\n\n.launcher {\n display: flex;\n flex-direction: column;\n height: 100%;\n box-sizing: border-box;\n}\n\n.welcome {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--forge-spacing-xxsmall, 4px);\n animation: fade-in 300ms var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n max-inline-size: 768px;\n margin-inline: auto;\n width: 100%;\n box-sizing: border-box;\n padding-inline: var(--forge-spacing-xxlarge, 48px);\n}\n\n.welcome-header {\n display: flex;\n align-items: center;\n gap: var(--forge-spacing-xsmall, 8px);\n}\n\n.icon {\n --forge-ai-icon-size: 48px;\n color: var(--forge-theme-tertiary, #3d5afe);\n}\n\n.title {\n margin: 0;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: var(--forge-typography-heading6-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n font-size: var(--forge-typography-heading6-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading6-font-size-scale, 1.75)));\n font-weight: var(--forge-typography-heading6-font-weight, 500);\n line-height: var(--forge-typography-heading6-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading6-line-height-scale, 2.125)));\n letter-spacing: var(--forge-typography-heading6-letter-spacing, 0em);\n text-transform: var(--forge-typography-heading6-text-transform, inherit);\n text-decoration: var(--forge-typography-heading6-text-decoration, inherit);\n color: var(--forge-theme-text-high, rgba(0, 0, 0, 0.87));\n}\n\n.description {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: var(--forge-typography-body1-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n font-size: var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 0.875)));\n font-weight: var(--forge-typography-body1-font-weight, 400);\n line-height: var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));\n letter-spacing: var(--forge-typography-body1-letter-spacing, 0.0357142857em);\n text-transform: var(--forge-typography-body1-text-transform, inherit);\n text-decoration: var(--forge-typography-body1-text-decoration, inherit);\n color: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));\n text-align: center;\n margin-block-end: var(--forge-spacing-medium, 16px);\n}\n\n.prompt-container {\n --forge-card-outline-width: 0;\n inline-size: 100%;\n}\n\n.prompt-section {\n display: flex;\n flex-direction: column;\n gap: var(--forge-spacing-xsmall, 8px);\n width: 100%;\n box-sizing: border-box;\n}\n\n.disclaimer {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: var(--forge-typography-label1-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n font-size: var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, 0.75)));\n font-weight: var(--forge-typography-label1-font-weight, 400);\n line-height: var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));\n letter-spacing: var(--forge-typography-label1-letter-spacing, 0.0357142857em);\n text-transform: var(--forge-typography-label1-text-transform, inherit);\n text-decoration: var(--forge-typography-label1-text-decoration, inherit);\n color: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));\n text-align: center;\n}\n\n.welcome-suggestions {\n inline-size: 100%;\n margin-block-start: var(--forge-spacing-large, 24px);\n}\n.welcome-suggestions forge-ai-suggestions {\n margin-inline: var(--forge-spacing-medium, 16px);\n}\n\n.conversation {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-height: 0;\n}\n\n.conversation forge-ai-chat-header {\n flex-shrink: 0;\n max-inline-size: 768px;\n margin-inline: auto;\n width: 100%;\n}\n\n.conversation forge-ai-message-thread {\n --forge-ai-message-thread-content-max-width: 768px;\n --forge-ai-markdown-font-size: 1rem;\n --forge-ai-markdown-line-height: 1.6;\n flex: 1;\n min-height: 0;\n animation: fade-in var(--forge-animation-duration-medium2, 300ms) var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1));\n}\n\n.ai-icon-button,\n.ai-icon-button > svg {\n fill: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));\n}\n\n.history {\n display: none;\n flex-direction: column;\n}\n\n.history-popover {\n display: flex;\n flex-direction: column;\n min-width: 280px;\n min-height: 200px;\n max-height: min(400px, var(--ai-overlay-available-height, 400px));\n}\n.history-popover forge-ai-threads-search {\n display: grid;\n flex: 1;\n min-height: 0;\n}\n.history-popover__view-all {\n flex-shrink: 0;\n color: var(--forge-theme-text-medium);\n font-size: 0.75rem;\n margin-inline-end: calc(var(--forge-spacing-xsmall, 8px) * -1);\n --forge-icon-font-size: 0.75rem;\n --forge-focus-indicator-outward-offset: 0px;\n}\n\n.thread-name {\n margin-inline-start: -8px;\n display: flex;\n align-items: center;\n min-width: 0;\n flex: 1;\n max-width: 300px;\n}\n.thread-name__separator {\n --forge-icon-font-size: 1.125rem;\n display: flex;\n margin-inline-end: var(--forge-spacing-xxxsmall, 2px);\n}\n.thread-name__separator .forge-icon {\n fill: var(--forge-theme-text-low, rgba(0, 0, 0, 0.38));\n}\n.thread-name__text {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: var(--forge-typography-body2-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n font-size: var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1)));\n font-weight: var(--forge-typography-body2-font-weight, 400);\n line-height: var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375)));\n letter-spacing: var(--forge-typography-body2-letter-spacing, 0.015625em);\n text-transform: var(--forge-typography-body2-text-transform, inherit);\n text-decoration: var(--forge-typography-body2-text-decoration, inherit);\n display: block;\n margin-inline-start: var(--forge-spacing-xxsmall, 4px);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n color: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));\n}\n.thread-name__button {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: var(--forge-typography-body2-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n font-size: var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1)));\n font-weight: var(--forge-typography-body2-font-weight, 400);\n line-height: var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375)));\n letter-spacing: var(--forge-typography-body2-letter-spacing, 0.015625em);\n text-transform: var(--forge-typography-body2-text-transform, inherit);\n text-decoration: var(--forge-typography-body2-text-decoration, inherit);\n --forge-focus-indicator-outward-offset: 0px;\n display: block;\n padding-inline: var(--forge-spacing-xxxsmall, 2px);\n min-width: 0;\n}\n\n.session-files {\n display: flex;\n flex-direction: column;\n gap: var(--forge-spacing-xsmall, 8px);\n min-width: 0;\n}\n.session-files .session-files-header {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: var(--forge-typography-label1-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n font-size: var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, 0.75)));\n font-weight: var(--forge-typography-label1-font-weight, 400);\n line-height: var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));\n letter-spacing: var(--forge-typography-label1-letter-spacing, 0.0357142857em);\n text-transform: var(--forge-typography-label1-text-transform, inherit);\n text-decoration: var(--forge-typography-label1-text-decoration, inherit);\n color: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));\n}\n.session-files .session-files-list::-webkit-scrollbar {\n height: var(--forge-scrollbar-height, 16px);\n width: var(--forge-scrollbar-width, 16px);\n}\n.session-files .session-files-list::-webkit-scrollbar-track {\n background-color: var(--forge-scrollbar-track-container, var(--forge-theme-surface-container-low, #ebebeb));\n}\n.session-files .session-files-list::-webkit-scrollbar-track:hover {\n background-color: var(--forge-scrollbar-track-container-hover, var(--forge-theme-surface-container-low, #ebebeb));\n}\n.session-files .session-files-list::-webkit-scrollbar-corner {\n background-color: var(--forge-scrollbar-track-container, var(--forge-theme-surface-container-low, #ebebeb));\n}\n.session-files .session-files-list::-webkit-scrollbar-thumb {\n height: var(--forge-scrollbar-thumb-min-height, 32px);\n width: var(--forge-scrollbar-thumb-min-width, 32px);\n border-radius: var(--forge-scrollbar-border-radius, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));\n border-width: var(--forge-scrollbar-border-width, 3px);\n border-style: solid;\n border-color: transparent;\n background-color: var(--forge-scrollbar-thumb-container, var(--forge-theme-surface-container-medium, #c2c2c2));\n background-clip: content-box;\n}\n.session-files .session-files-list::-webkit-scrollbar-thumb:hover {\n background-color: var(--forge-scrollbar-thumb-container-hover, var(--forge-theme-surface-container-high, #9e9e9e));\n}\n.session-files .session-files-list {\n display: flex;\n gap: var(--forge-spacing-small, 12px);\n overflow-x: auto;\n padding-block-end: var(--forge-spacing-xxsmall, 4px);\n}\n\n@keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n@keyframes prompt-slide-down {\n from {\n transform: translateY(-30vh);\n }\n to {\n transform: translateY(0);\n }\n}\n:host(:state(welcome)) {\n --_ai-chatbot-launcher-align: var(--forge-ai-chatbot-launcher-align, center);\n}\n:host(:state(welcome)) .launcher {\n align-items: center;\n justify-content: var(--_ai-chatbot-launcher-align);\n gap: var(--forge-spacing-xxsmall, 4px);\n}\n:host(:state(welcome)) .welcome {\n display: flex;\n}\n:host(:state(welcome)) .conversation {\n display: none;\n}\n:host(:state(welcome)) .history {\n display: none;\n}\n:host(:state(welcome)) .prompt-section {\n max-inline-size: 768px;\n width: 100%;\n}\n:host(:state(welcome)) .session-files {\n inline-size: 100%;\n}\n:host(:state(welcome)) .welcome-suggestions {\n max-inline-size: 768px;\n width: 100%;\n}\n\n:host(:state(conversation)) .welcome {\n display: none;\n}\n:host(:state(conversation)) .conversation {\n display: flex;\n}\n:host(:state(conversation)) .history {\n display: none;\n}\n:host(:state(conversation)) .prompt-section {\n padding: var(--forge-spacing-medium, 16px) var(--forge-spacing-medium, 16px) var(--forge-spacing-xsmall, 8px);\n max-inline-size: 768px;\n margin-inline: auto;\n animation: prompt-slide-down var(--forge-animation-duration-medium2, 300ms) var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1));\n}\n:host(:state(conversation)) .prompt-container {\n --forge-card-outline-width: initial;\n border: none;\n background: transparent;\n}\n:host(:state(conversation)) forge-ai-prompt {\n max-inline-size: none;\n}\n\n:host(:state(history)) .welcome {\n display: none;\n}\n:host(:state(history)) .conversation {\n display: none;\n}\n:host(:state(history)) .history {\n display: flex;\n flex: 1;\n min-height: 0;\n animation: fade-in var(--forge-animation-duration-medium2, 300ms) var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1));\n}\n:host(:state(history)) .prompt-section {\n display: none;\n}\n\n.launcher.skip-animation .welcome,\n.launcher.skip-animation .conversation forge-ai-message-thread,\n.launcher.skip-animation .history,\n.launcher.skip-animation .prompt-section {\n animation: none;\n}\n\nforge-ai-modal {\n --forge-ai-modal-width: fit-content;\n --forge-ai-modal-height: fit-content;\n}\n\n.delete-confirmation {\n display: flex;\n flex-direction: column;\n gap: var(--forge-spacing-medium, 16px);\n padding: var(--forge-spacing-medium, 16px);\n max-width: 90vw;\n}\n.delete-confirmation__title {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: var(--forge-typography-heading4-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n font-size: var(--forge-typography-heading4-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading4-font-size-scale, 1.25)));\n font-weight: var(--forge-typography-heading4-font-weight, 500);\n line-height: var(--forge-typography-heading4-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading4-line-height-scale, 1.5)));\n letter-spacing: var(--forge-typography-heading4-letter-spacing, 0.005em);\n text-transform: var(--forge-typography-heading4-text-transform, inherit);\n text-decoration: var(--forge-typography-heading4-text-decoration, inherit);\n margin: 0;\n}\n.delete-confirmation__text {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: var(--forge-typography-body1-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n font-size: var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 0.875)));\n font-weight: var(--forge-typography-body1-font-weight, 400);\n line-height: var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));\n letter-spacing: var(--forge-typography-body1-letter-spacing, 0.0357142857em);\n text-transform: var(--forge-typography-body1-text-transform, inherit);\n text-decoration: var(--forge-typography-body1-text-decoration, inherit);\n}\n.delete-confirmation__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--forge-spacing-small, 12px);\n}\n\nforge-ai-edit-thread {\n flex: 1;\n min-width: 0;\n}';
|
|
2
2
|
export {
|
|
3
3
|
styles as default
|
|
4
4
|
};
|
|
@@ -57,7 +57,7 @@ export declare const AiConversationsPanelComponentTagName: keyof HTMLElementTagN
|
|
|
57
57
|
export declare class AiConversationsPanelComponent extends LitElement {
|
|
58
58
|
#private;
|
|
59
59
|
static styles: CSSResult;
|
|
60
|
-
|
|
60
|
+
threads: Thread[];
|
|
61
61
|
/**
|
|
62
62
|
* Total number of threads available. When set to a positive number and fewer threads
|
|
63
63
|
* are loaded than the total, infinite scroll is enabled. Leave at 0 (default) to disable
|
|
@@ -65,8 +65,8 @@ export declare class AiConversationsPanelComponent extends LitElement {
|
|
|
65
65
|
*/
|
|
66
66
|
totalChats: number;
|
|
67
67
|
selectedThreadId: string | null;
|
|
68
|
-
|
|
69
|
-
|
|
68
|
+
showThreadRename: boolean;
|
|
69
|
+
showThreadDelete: boolean;
|
|
70
70
|
loading: boolean;
|
|
71
71
|
private _viewState;
|
|
72
72
|
private _isSearching;
|