@tylertech/forge-ai 0.13.10 → 0.13.11
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 +118 -2
- package/dist/ai-assistant-response/ai-assistant-response.d.ts +1 -0
- package/dist/ai-assistant-response/ai-assistant-response.mjs +32 -3
- package/dist/ai-assistant-response/ai-assistant-response.scss.mjs +1 -1
- package/dist/ai-chain-of-thought/thought-detail/thought-detail.mjs +1 -1
- package/dist/ai-chain-of-thought/thought-image/thought-image.mjs +1 -1
- package/dist/ai-chain-of-thought/thought-search-result/thought-search-result.mjs +2 -2
- package/dist/ai-chat-header/ai-chat-header.mjs +27 -10
- package/dist/ai-chatbot-launcher/ai-chatbot-launcher.mjs +7 -2
- package/dist/ai-conversations-panel/ai-conversations-panel.mjs +6 -6
- package/dist/ai-copy-button/ai-copy-button.mjs +2 -2
- package/dist/ai-dialog/ai-dialog.d.ts +4 -0
- package/dist/ai-dialog/ai-dialog.mjs +10 -3
- package/dist/ai-dropdown-menu/ai-dropdown-menu-item.mjs +10 -2
- package/dist/ai-dropdown-menu/ai-dropdown-menu.d.ts +5 -0
- package/dist/ai-dropdown-menu/ai-dropdown-menu.mjs +4 -0
- package/dist/ai-edit-thread/ai-edit-thread.mjs +2 -2
- package/dist/ai-embedded-chat/ai-embedded-chat.d.ts +4 -0
- package/dist/ai-embedded-chat/ai-embedded-chat.mjs +5 -0
- package/dist/ai-error-message/ai-error-message.mjs +2 -1
- package/dist/ai-file-picker/ai-file-picker.mjs +1 -1
- package/dist/ai-floating-chat/ai-floating-chat.d.ts +5 -0
- package/dist/ai-floating-chat/ai-floating-chat.mjs +5 -0
- package/dist/ai-icon/ai-icon.mjs +1 -1
- package/dist/ai-message-thread/ai-message-thread.mjs +9 -24
- package/dist/ai-message-thread/ai-message-thread.scss.mjs +1 -1
- package/dist/ai-modal/ai-modal.d.ts +4 -0
- package/dist/ai-modal/ai-modal.mjs +5 -1
- package/dist/ai-prompt/ai-prompt.mjs +3 -3
- package/dist/ai-reasoning-header/ai-reasoning-header.mjs +3 -3
- package/dist/ai-response-message-toolbar/ai-response-message-toolbar.mjs +6 -6
- package/dist/ai-slash-command-menu/ai-slash-command-menu.mjs +1 -1
- package/dist/ai-spinner/ai-spinner.mjs +1 -1
- package/dist/ai-suggestions/ai-suggestions.mjs +1 -1
- package/dist/ai-thread-actions-menu/ai-thread-actions-menu.mjs +14 -3
- package/dist/ai-threads/ai-threads.mjs +5 -3
- package/dist/ai-threads-search/ai-threads-search.mjs +3 -3
- package/dist/ai-tool-call-indicator/ai-tool-call-indicator.mjs +30 -5
- package/dist/ai-user-message-toolbar/ai-user-message-toolbar.mjs +3 -3
- package/dist/ai-voice-input/ai-voice-input.mjs +1 -1
- package/dist/tools/ai-data-table/ai-data-table.mjs +8 -3
- package/dist/tools/ai-paginator/ai-paginator.mjs +2 -2
- package/package.json +6 -6
|
@@ -85,7 +85,7 @@ let AiConversationsPanelComponent = class extends LitElement {
|
|
|
85
85
|
class="close-button forge-icon-button forge-icon-button--medium"
|
|
86
86
|
@click=${__privateMethod(this, _AiConversationsPanelComponent_instances, handleCloseClick_fn)}
|
|
87
87
|
aria-label="Close conversations panel">
|
|
88
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
88
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
|
|
89
89
|
<path fill="none" d="M0 0h24v24H0z" />
|
|
90
90
|
<path
|
|
91
91
|
d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
|
|
@@ -98,7 +98,7 @@ let AiConversationsPanelComponent = class extends LitElement {
|
|
|
98
98
|
<ul class="forge-list forge-list--dense forge-list--navlist chat-actions-list" role="list">
|
|
99
99
|
<li class="forge-list-item new-chat-item" role="listitem">
|
|
100
100
|
<button @click=${__privateMethod(this, _AiConversationsPanelComponent_instances, handleNewChatClick_fn)}>
|
|
101
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="forge-icon">
|
|
101
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="forge-icon" aria-hidden="true">
|
|
102
102
|
<path
|
|
103
103
|
d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2m0 14H5.2L4 17.2V4h16zm-4-7v2h-3v3h-2v-3H8V9h3V6h2v3z" />
|
|
104
104
|
</svg>
|
|
@@ -107,7 +107,7 @@ let AiConversationsPanelComponent = class extends LitElement {
|
|
|
107
107
|
</li>
|
|
108
108
|
<li class="forge-list-item new-chat-item" role="listitem">
|
|
109
109
|
<button @click=${__privateMethod(this, _AiConversationsPanelComponent_instances, handleSearchChatsClick_fn)}>
|
|
110
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="forge-icon">
|
|
110
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="forge-icon" aria-hidden="true">
|
|
111
111
|
<path
|
|
112
112
|
d="M9 6v2H2V6zm0 5v2H2v-2zm9 5v2H2v-2zm1.31-4.5c.44-.68.69-1.5.69-2.39 0-2.5-2-4.5-4.5-4.5s-4.5 2-4.5 4.5 2 4.5 4.5 4.5c.87 0 1.69-.25 2.38-.68L21 16l1.39-1.39zm-3.81.11c-1.38 0-2.5-1.11-2.5-2.5s1.12-2.5 2.5-2.5a2.5 2.5 0 0 1 0 5" />
|
|
113
113
|
</svg>
|
|
@@ -382,7 +382,7 @@ headerSearch_get = function() {
|
|
|
382
382
|
class="back-button forge-icon-button forge-icon-button--medium"
|
|
383
383
|
@click=${__privateMethod(this, _AiConversationsPanelComponent_instances, handleBackClick_fn)}
|
|
384
384
|
aria-label="Back to recent chats">
|
|
385
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
385
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
|
|
386
386
|
<path fill="none" d="M0 0h24v24H0z" />
|
|
387
387
|
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20z" />
|
|
388
388
|
</svg>
|
|
@@ -393,7 +393,7 @@ headerSearch_get = function() {
|
|
|
393
393
|
class="close-button forge-icon-button forge-icon-button--medium"
|
|
394
394
|
@click=${__privateMethod(this, _AiConversationsPanelComponent_instances, handleCloseClick_fn)}
|
|
395
395
|
aria-label="Close conversations panel">
|
|
396
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
396
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
|
|
397
397
|
<path fill="none" d="M0 0h24v24H0z" />
|
|
398
398
|
<path
|
|
399
399
|
d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
|
|
@@ -407,7 +407,7 @@ _chatsLabel = /* @__PURE__ */ new WeakMap();
|
|
|
407
407
|
searchFieldSearch_get = function() {
|
|
408
408
|
return html`
|
|
409
409
|
<div class="forge-field forge-field--small search-field">
|
|
410
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="forge-icon">
|
|
410
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="forge-icon" aria-hidden="true">
|
|
411
411
|
<path fill="none" d="M0 0h24v24H0z" />
|
|
412
412
|
<path
|
|
413
413
|
d="M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14" />
|
|
@@ -35,13 +35,13 @@ let AiCopyButtonComponent = class extends LitElement {
|
|
|
35
35
|
__privateAdd(this, _copied, false);
|
|
36
36
|
__privateAdd(this, _copiedTimeout);
|
|
37
37
|
__privateAdd(this, _copyIcon, html`
|
|
38
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
38
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
|
|
39
39
|
<path
|
|
40
40
|
d="M19 21H8V7h11m0-2H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2m-3-4H4a2 2 0 0 0-2 2v14h2V3h12z" />
|
|
41
41
|
</svg>
|
|
42
42
|
`);
|
|
43
43
|
__privateAdd(this, _checkIcon, html`
|
|
44
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
44
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
|
|
45
45
|
<path d="M21 7 9 19l-5.5-5.5 1.41-1.41L9 16.17 19.59 5.59z" />
|
|
46
46
|
</svg>
|
|
47
47
|
`);
|
|
@@ -32,6 +32,10 @@ export declare class AiDialogComponent extends LitElement {
|
|
|
32
32
|
* When false, the dialog will be positioned at the bottom-right corner with a fixed width.
|
|
33
33
|
*/
|
|
34
34
|
expanded: boolean;
|
|
35
|
+
/**
|
|
36
|
+
* Accessible label for the dialog, announced by screen readers when it opens.
|
|
37
|
+
*/
|
|
38
|
+
label: string;
|
|
35
39
|
private _isFullscreen;
|
|
36
40
|
private _isClosing;
|
|
37
41
|
/**
|
|
@@ -33,6 +33,7 @@ let AiDialogComponent = class extends LitElement {
|
|
|
33
33
|
__privateAdd(this, _AiDialogComponent_instances);
|
|
34
34
|
this.open = false;
|
|
35
35
|
this.expanded = false;
|
|
36
|
+
this.label = "AI Assistant";
|
|
36
37
|
this._isFullscreen = window.innerWidth <= VIEWPORT_WIDTH_THRESHOLD;
|
|
37
38
|
this._isClosing = false;
|
|
38
39
|
__privateAdd(this, _mediaQuery);
|
|
@@ -160,7 +161,7 @@ popoverTemplate_get = function() {
|
|
|
160
161
|
<dialog
|
|
161
162
|
${ref(__privateGet(this, _popoverElementRef))}
|
|
162
163
|
aria-modal="false"
|
|
163
|
-
aria-
|
|
164
|
+
aria-label=${this.label}
|
|
164
165
|
popover="manual"
|
|
165
166
|
class="${dialogClasses}"
|
|
166
167
|
@toggle=${__privateMethod(this, _AiDialogComponent_instances, handlePopoverToggle_fn)}>
|
|
@@ -172,7 +173,7 @@ popoverTemplate_get = function() {
|
|
|
172
173
|
tabindex="0"
|
|
173
174
|
@pointerdown=${__privateGet(this, _dragController)?.handlePointerDown}
|
|
174
175
|
@keydown=${__privateGet(this, _dragController)?.handleKeyDown}>
|
|
175
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
176
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
|
|
176
177
|
<path fill="none" d="M0 0h24v24H0z" />
|
|
177
178
|
<path d="M20 9H4v2h16zM4 15h16v-2H4z" />
|
|
178
179
|
</svg>
|
|
@@ -183,7 +184,10 @@ popoverTemplate_get = function() {
|
|
|
183
184
|
};
|
|
184
185
|
modalTemplate_get = function() {
|
|
185
186
|
return html`
|
|
186
|
-
<forge-ai-modal
|
|
187
|
+
<forge-ai-modal
|
|
188
|
+
${ref(__privateGet(this, _aiModalElementRef))}
|
|
189
|
+
label=${this.label}
|
|
190
|
+
@forge-ai-modal-close=${__privateMethod(this, _AiDialogComponent_instances, handleDialogClose_fn)}>
|
|
187
191
|
${__privateGet(this, _content)}
|
|
188
192
|
</forge-ai-modal>
|
|
189
193
|
`;
|
|
@@ -282,6 +286,9 @@ __decorateClass([
|
|
|
282
286
|
__decorateClass([
|
|
283
287
|
property({ type: Boolean })
|
|
284
288
|
], AiDialogComponent.prototype, "expanded", 2);
|
|
289
|
+
__decorateClass([
|
|
290
|
+
property({ type: String })
|
|
291
|
+
], AiDialogComponent.prototype, "label", 2);
|
|
285
292
|
__decorateClass([
|
|
286
293
|
state()
|
|
287
294
|
], AiDialogComponent.prototype, "_isFullscreen", 2);
|
|
@@ -99,7 +99,11 @@ let ForgeAiDropdownMenuItemComponent = class extends LitElement {
|
|
|
99
99
|
}
|
|
100
100
|
};
|
|
101
101
|
this._submenuArrowIcon = html`
|
|
102
|
-
<svg
|
|
102
|
+
<svg
|
|
103
|
+
class="ai-dropdown-menu-item__submenu-arrow"
|
|
104
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
105
|
+
viewBox="0 0 24 24"
|
|
106
|
+
aria-hidden="true">
|
|
103
107
|
<path d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z" />
|
|
104
108
|
</svg>
|
|
105
109
|
`;
|
|
@@ -227,7 +231,11 @@ let ForgeAiDropdownMenuItemComponent = class extends LitElement {
|
|
|
227
231
|
get _selectionIcon() {
|
|
228
232
|
const iconPath = this.selectionMode === "multi" ? "M21 7 9 19l-5.5-5.5 1.41-1.41L9 16.17 19.59 5.59z" : "M12 8a4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0-4-4";
|
|
229
233
|
return html`
|
|
230
|
-
<svg
|
|
234
|
+
<svg
|
|
235
|
+
class="ai-dropdown-menu-item__selection-svg"
|
|
236
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
237
|
+
viewBox="0 0 24 24"
|
|
238
|
+
aria-hidden="true">
|
|
231
239
|
<path d="${iconPath}" />
|
|
232
240
|
</svg>
|
|
233
241
|
`;
|
|
@@ -117,6 +117,11 @@ export declare class ForgeAiDropdownMenuComponent extends LitElement {
|
|
|
117
117
|
* Only applies to root-level menus; submenus always use 'right-start'.
|
|
118
118
|
*/
|
|
119
119
|
popoverPlacement: PopoverPlacement;
|
|
120
|
+
/**
|
|
121
|
+
* Accessible label for the trigger button. Set this for icon-only triggers
|
|
122
|
+
* that have no visible text so screen readers can announce the button.
|
|
123
|
+
*/
|
|
124
|
+
triggerLabel?: string;
|
|
120
125
|
private _isSubmenu;
|
|
121
126
|
private _navigationController;
|
|
122
127
|
private _selectionManager;
|
|
@@ -272,6 +272,7 @@ triggerButton_get = function() {
|
|
|
272
272
|
[densityClass]: !!densityClass
|
|
273
273
|
})}
|
|
274
274
|
type="button"
|
|
275
|
+
aria-label=${ifDefined(this.triggerLabel)}
|
|
275
276
|
aria-expanded=${this.open}
|
|
276
277
|
aria-haspopup=${this._ariaHasPopup}
|
|
277
278
|
aria-controls="dropdown-content"
|
|
@@ -327,6 +328,9 @@ __decorateClass([
|
|
|
327
328
|
__decorateClass([
|
|
328
329
|
property({ attribute: "popover-placement" })
|
|
329
330
|
], ForgeAiDropdownMenuComponent.prototype, "popoverPlacement", 2);
|
|
331
|
+
__decorateClass([
|
|
332
|
+
property({ attribute: "trigger-label" })
|
|
333
|
+
], ForgeAiDropdownMenuComponent.prototype, "triggerLabel", 2);
|
|
330
334
|
__decorateClass([
|
|
331
335
|
state()
|
|
332
336
|
], ForgeAiDropdownMenuComponent.prototype, "_isSubmenu", 2);
|
|
@@ -48,7 +48,7 @@ let AiEditThreadComponent = class extends LitElement {
|
|
|
48
48
|
class="forge-icon-button forge-icon-button--squared forge-icon-button--small"
|
|
49
49
|
@click=${__privateMethod(this, _AiEditThreadComponent_instances, handleCancel_fn)}
|
|
50
50
|
aria-label="Cancel">
|
|
51
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="forge-icon">
|
|
51
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="forge-icon" aria-hidden="true">
|
|
52
52
|
<path
|
|
53
53
|
d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
|
|
54
54
|
</svg>
|
|
@@ -57,7 +57,7 @@ let AiEditThreadComponent = class extends LitElement {
|
|
|
57
57
|
class="forge-icon-button forge-icon-button--squared forge-icon-button--small"
|
|
58
58
|
@click=${__privateMethod(this, _AiEditThreadComponent_instances, handleSave_fn)}
|
|
59
59
|
aria-label="Save">
|
|
60
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="forge-icon">
|
|
60
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="forge-icon" aria-hidden="true">
|
|
61
61
|
<path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
|
|
62
62
|
</svg>
|
|
63
63
|
</button>
|
|
@@ -45,6 +45,10 @@ export declare class AiEmbeddedChatComponent extends LitElement {
|
|
|
45
45
|
threadId?: string;
|
|
46
46
|
fileUpload: FeatureToggle;
|
|
47
47
|
placeholder: string;
|
|
48
|
+
/**
|
|
49
|
+
* Accessible label for the modal, announced by screen readers when expanded.
|
|
50
|
+
*/
|
|
51
|
+
label: string;
|
|
48
52
|
suggestions?: Suggestion[];
|
|
49
53
|
private _isModalFullscreen;
|
|
50
54
|
updated(): void;
|
|
@@ -39,6 +39,7 @@ let AiEmbeddedChatComponent = class extends LitElement {
|
|
|
39
39
|
this.gradientVariant = "medium";
|
|
40
40
|
this.fileUpload = "off";
|
|
41
41
|
this.placeholder = "Ask a question...";
|
|
42
|
+
this.label = "AI Assistant";
|
|
42
43
|
this._isModalFullscreen = false;
|
|
43
44
|
__privateAdd(this, _modalRef, createRef());
|
|
44
45
|
}
|
|
@@ -55,6 +56,7 @@ let AiEmbeddedChatComponent = class extends LitElement {
|
|
|
55
56
|
<forge-ai-modal
|
|
56
57
|
${ref(__privateGet(this, _modalRef))}
|
|
57
58
|
?open=${this.expanded}
|
|
59
|
+
label=${this.label}
|
|
58
60
|
@forge-ai-modal-close=${__privateMethod(this, _AiEmbeddedChatComponent_instances, handleModalClose_fn)}
|
|
59
61
|
@forge-ai-modal-fullscreen-change=${__privateMethod(this, _AiEmbeddedChatComponent_instances, handleModalFullscreenChange_fn)}>
|
|
60
62
|
${__privateGet(this, _AiEmbeddedChatComponent_instances, chatInterface_get)}
|
|
@@ -152,6 +154,9 @@ __decorateClass([
|
|
|
152
154
|
__decorateClass([
|
|
153
155
|
property()
|
|
154
156
|
], AiEmbeddedChatComponent.prototype, "placeholder", 2);
|
|
157
|
+
__decorateClass([
|
|
158
|
+
property()
|
|
159
|
+
], AiEmbeddedChatComponent.prototype, "label", 2);
|
|
155
160
|
__decorateClass([
|
|
156
161
|
property({ attribute: false })
|
|
157
162
|
], AiEmbeddedChatComponent.prototype, "suggestions", 2);
|
|
@@ -20,7 +20,8 @@ let AiErrorMessageComponent = class extends LitElement {
|
|
|
20
20
|
viewBox="0 0 24 24"
|
|
21
21
|
height="24"
|
|
22
22
|
width="24"
|
|
23
|
-
fill="currentColor"
|
|
23
|
+
fill="currentColor"
|
|
24
|
+
aria-hidden="true">
|
|
24
25
|
<path fill="none" d="M0 0h24v24H0z" />
|
|
25
26
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-2h2zm0-4h-2V7h2z" />
|
|
26
27
|
</svg>
|
|
@@ -151,7 +151,7 @@ emitError_fn = function(type, message, filename) {
|
|
|
151
151
|
buttonContent_get = function() {
|
|
152
152
|
if (this.variant === "icon-button") {
|
|
153
153
|
return html`<slot name="icon">
|
|
154
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="forge-icon custom-icon">
|
|
154
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="forge-icon custom-icon" aria-hidden="true">
|
|
155
155
|
<path fill="none" d="M0 0h24v24H0z" />
|
|
156
156
|
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z" />
|
|
157
157
|
</svg>
|
|
@@ -30,6 +30,11 @@ export declare class AiFloatingChatComponent extends LitElement {
|
|
|
30
30
|
static styles: CSSResult;
|
|
31
31
|
open: boolean;
|
|
32
32
|
expanded: boolean;
|
|
33
|
+
/**
|
|
34
|
+
* Accessible label for the dialog, announced by screen readers when it opens.
|
|
35
|
+
* Set this to match the slotted chatbot's title.
|
|
36
|
+
*/
|
|
37
|
+
label: string;
|
|
33
38
|
private _userExpanded;
|
|
34
39
|
render(): TemplateResult;
|
|
35
40
|
show(): void;
|
|
@@ -28,6 +28,7 @@ let AiFloatingChatComponent = class extends LitElement {
|
|
|
28
28
|
__privateAdd(this, _AiFloatingChatComponent_instances);
|
|
29
29
|
this.open = false;
|
|
30
30
|
this.expanded = false;
|
|
31
|
+
this.label = "AI Assistant";
|
|
31
32
|
this._userExpanded = false;
|
|
32
33
|
__privateAdd(this, _dialogRef, createRef());
|
|
33
34
|
}
|
|
@@ -37,6 +38,7 @@ let AiFloatingChatComponent = class extends LitElement {
|
|
|
37
38
|
${ref(__privateGet(this, _dialogRef))}
|
|
38
39
|
?open=${this.open}
|
|
39
40
|
?expanded=${this.expanded}
|
|
41
|
+
label=${this.label}
|
|
40
42
|
@forge-ai-dialog-fullscreen-change=${__privateMethod(this, _AiFloatingChatComponent_instances, handleFullscreenChange_fn)}
|
|
41
43
|
@forge-ai-dialog-close=${__privateMethod(this, _AiFloatingChatComponent_instances, handleDialogClose_fn)}>
|
|
42
44
|
<slot
|
|
@@ -130,6 +132,9 @@ __decorateClass([
|
|
|
130
132
|
__decorateClass([
|
|
131
133
|
property({ type: Boolean })
|
|
132
134
|
], AiFloatingChatComponent.prototype, "expanded", 2);
|
|
135
|
+
__decorateClass([
|
|
136
|
+
property({ type: String })
|
|
137
|
+
], AiFloatingChatComponent.prototype, "label", 2);
|
|
133
138
|
__decorateClass([
|
|
134
139
|
state()
|
|
135
140
|
], AiFloatingChatComponent.prototype, "_userExpanded", 2);
|
package/dist/ai-icon/ai-icon.mjs
CHANGED
|
@@ -31,7 +31,7 @@ let AiIconComponent = class extends LitElement {
|
|
|
31
31
|
this.outline = false;
|
|
32
32
|
__privateAdd(this, _internals);
|
|
33
33
|
__privateAdd(this, _svg, html`
|
|
34
|
-
<svg width="24" height="24" viewBox="-2 -2 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
34
|
+
<svg width="24" height="24" viewBox="-2 -2 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
|
35
35
|
<path
|
|
36
36
|
d="M9.375 10.625L15 12.5L9.375 14.375L7.5 20L5.625 14.375L0 12.5L5.625 10.625L7.5 5L9.375 10.625ZM16.25 3.75L20 5L16.25 6.25L15 10L13.75 6.25L10 5L13.75 3.75L15 0L16.25 3.75Z" />
|
|
37
37
|
</svg>
|
|
@@ -30,7 +30,7 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
|
|
|
30
30
|
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);
|
|
31
31
|
var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
|
|
32
32
|
var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
|
|
33
|
-
var _markdownController, _canAutoScroll, _resizeObserver, _AiMessageThreadComponent_instances, scheduleScroll_fn, checkScrollState_fn, _handleScroll, _handleScrollToBottomClick, scrollToBottomButton_get, handleCopy_fn, handleResend_fn, handleThumbsUp_fn, handleThumbsDown_fn, handleUserCopy_fn, handleUserResend_fn, handleUserEdit_fn, renderToolCall_fn, renderAssistantResponse_fn, emptyState_get, thinkingIndicator_get, messages_get, dispatchEvent_fn;
|
|
33
|
+
var _markdownController, _canAutoScroll, _resizeObserver, _AiMessageThreadComponent_instances, scheduleScroll_fn, checkScrollState_fn, _handleScroll, _handleScrollToBottomClick, scrollToBottomButton_get, handleCopy_fn, handleResend_fn, handleThumbsUp_fn, handleThumbsDown_fn, handleUserCopy_fn, handleUserResend_fn, handleUserEdit_fn, renderToolCall_fn, activeResponse_get, renderAssistantResponse_fn, emptyState_get, thinkingIndicator_get, messages_get, dispatchEvent_fn;
|
|
34
34
|
const AiMessageThreadComponentTagName = "forge-ai-message-thread";
|
|
35
35
|
const SCROLL_THRESHOLD = 100;
|
|
36
36
|
let AiMessageThreadComponent = class extends LitElement {
|
|
@@ -126,7 +126,7 @@ scrollToBottomButton_get = function() {
|
|
|
126
126
|
class=${`forge-fab scroll-to-bottom-button${hiddenClass}`}
|
|
127
127
|
aria-label="Scroll to bottom"
|
|
128
128
|
@click=${__privateGet(this, _handleScrollToBottomClick)}>
|
|
129
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
129
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
|
|
130
130
|
<path d="M7.03 13.92h4V5l2.01-.03v8.95h3.99l-5 5Z" />
|
|
131
131
|
</svg>
|
|
132
132
|
</button>
|
|
@@ -177,6 +177,10 @@ renderToolCall_fn = function(toolCall) {
|
|
|
177
177
|
.toolCall=${toolCall}
|
|
178
178
|
.toolDefinition=${toolDefinition}></forge-ai-chatbot-tool-call>`;
|
|
179
179
|
};
|
|
180
|
+
activeResponse_get = function() {
|
|
181
|
+
const lastItem = this.messageItems[this.messageItems.length - 1];
|
|
182
|
+
return lastItem?.type === "assistant" ? lastItem.data : void 0;
|
|
183
|
+
};
|
|
180
184
|
renderAssistantResponse_fn = function(response) {
|
|
181
185
|
return html`
|
|
182
186
|
<forge-ai-assistant-response
|
|
@@ -184,6 +188,7 @@ renderAssistantResponse_fn = function(response) {
|
|
|
184
188
|
.tools=${this.tools}
|
|
185
189
|
?enable-reactions=${this.enableReactions}
|
|
186
190
|
?debug-mode=${this.debugMode}
|
|
191
|
+
?show-thinking=${this.showThinking && response === __privateGet(this, _AiMessageThreadComponent_instances, activeResponse_get)}
|
|
187
192
|
@forge-ai-assistant-response-copy=${(e) => __privateMethod(this, _AiMessageThreadComponent_instances, handleCopy_fn).call(this, e.detail.responseId)}
|
|
188
193
|
@forge-ai-assistant-response-resend=${(e) => __privateMethod(this, _AiMessageThreadComponent_instances, handleResend_fn).call(this, e.detail.responseId)}
|
|
189
194
|
@forge-ai-assistant-response-thumbs-up=${(e) => __privateMethod(this, _AiMessageThreadComponent_instances, handleThumbsUp_fn).call(this, e.detail.responseId, e.detail.feedback)}
|
|
@@ -212,28 +217,8 @@ thinkingIndicator_get = function() {
|
|
|
212
217
|
if (!this.showThinking) {
|
|
213
218
|
return nothing;
|
|
214
219
|
}
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
const response = lastItem.data;
|
|
218
|
-
const hasTextContent = response.children.some((c) => {
|
|
219
|
-
if (c.type !== "text") {
|
|
220
|
-
return false;
|
|
221
|
-
}
|
|
222
|
-
const content = typeof c.content === "string" ? c.content : "";
|
|
223
|
-
return content.trim().length > 0;
|
|
224
|
-
});
|
|
225
|
-
if (hasTextContent) {
|
|
226
|
-
return nothing;
|
|
227
|
-
}
|
|
228
|
-
const hasActiveResponseToolCall = response.children.some((c) => {
|
|
229
|
-
if (c.type !== "toolCall") {
|
|
230
|
-
return false;
|
|
231
|
-
}
|
|
232
|
-
return c.data.status === "parsing" || c.data.status === "executing" || c.data.status === "pending";
|
|
233
|
-
});
|
|
234
|
-
if (hasActiveResponseToolCall) {
|
|
235
|
-
return nothing;
|
|
236
|
-
}
|
|
220
|
+
if (__privateGet(this, _AiMessageThreadComponent_instances, activeResponse_get)) {
|
|
221
|
+
return nothing;
|
|
237
222
|
}
|
|
238
223
|
return html`<div class="thinking-indicator">
|
|
239
224
|
<forge-ai-thinking-indicator class="status-indicator" show-text></forge-ai-thinking-indicator>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const styles = '/* prettier-ignore */\n@keyframes fadein {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n/**\n * @license\n * Copyright Tyler Technologies, Inc.\n * License: Apache-2.0\n */\n.forge-fab {\n --_fab-display:var(--forge-fab-display, inline-flex);\n --_fab-gap:var(--forge-fab-gap, var(--forge-spacing-xsmall, 8px));\n --_fab-background:var(--forge-fab-background, var(--forge-theme-secondary, #ffc107));\n --_fab-color:var(--forge-fab-color, var(--forge-theme-on-secondary, #000000));\n --_fab-size:var(--forge-fab-size, 56px);\n --_fab-padding:var(--forge-fab-padding, var(--forge-spacing-xsmall, 8px));\n --_fab-shadow:var(--forge-fab-shadow, 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12));\n --_fab-hover-shadow:var(--forge-fab-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 --_fab-active-shadow:var(--forge-fab-active-shadow, 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12));\n --_fab-lowered-shadow:var(--forge-fab-lowered-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));\n --_fab-lowered-hover-shadow:var(--forge-fab-lowered-hover-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 --_fab-lowered-active-shadow:var(--forge-fab-lowered-active-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));\n --_fab-transition-duration:var(--forge-fab-transition-duration, var(--forge-animation-duration-short3, 150ms));\n --_fab-transition-timing:var(--forge-fab-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n --_fab-shape:var(--forge-fab-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));\n --_fab-shape-start-start:var(--forge-fab-shape-start-start, var(--_fab-shape));\n --_fab-shape-start-end:var(--forge-fab-shape-start-end, var(--_fab-shape));\n --_fab-shape-end-start:var(--forge-fab-shape-end-start, var(--_fab-shape));\n --_fab-shape-end-end:var(--forge-fab-shape-end-end, var(--_fab-shape));\n --_fab-extended-padding:var(--forge-fab-extended-padding, var(--forge-spacing-medium-large, 20px));\n --_fab-extended-min-width:var(--forge-fab-extended-min-width, 96px);\n --_fab-density-small-size:var(--forge-fab-density-small-size, 40px);\n --_fab-density-medium-size:var(--forge-fab-density-medium-size, var(--_fab-size));\n --_fab-density-large-size:var(--forge-fab-density-large-size, 96px);\n --_fab-disabled-cursor:var(--forge-fab-disabled-cursor, not-allowed);\n --_fab-disabled-background:var(--forge-fab-disabled-background, var(--forge-theme-surface-container, #e0e0e0));\n --_fab-disabled-color:var(--forge-fab-disabled-color, var(--forge-theme-on-surface-container, #000000));\n --_fab-disabled-opacity:var(--forge-fab-disabled-opacity, 0.38);\n}\n\n.forge-fab {\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: inline-flex;\n justify-content: center;\n align-items: center;\n gap: var(--_fab-gap);\n z-index: 0;\n background: var(--_fab-background);\n color: var(--_fab-color);\n cursor: pointer;\n box-shadow: var(--_fab-shadow);\n box-sizing: border-box;\n height: var(--_fab-density-medium-size);\n min-width: var(--_fab-density-medium-size);\n padding-inline: var(--_fab-padding);\n border-width: medium;\n border-style: none;\n border-color: currentColor;\n border-top-left-radius: var(--_fab-shape-start-start);\n border-top-right-radius: var(--_fab-shape-start-end);\n border-bottom-left-radius: var(--_fab-shape-end-start);\n border-bottom-right-radius: var(--_fab-shape-end-end);\n user-select: none;\n white-space: nowrap;\n transition-property: box-shadow, background, color;\n transition-duration: var(--_fab-transition-duration);\n transition-timing-function: var(--_fab-transition-timing);\n}\n\n.forge-fab:hover {\n --_fab-shadow:var(--_fab-hover-shadow);\n}\n\n.forge-fab:active {\n --_fab-shadow:var(--_fab-active-shadow);\n}\n\n.forge-fab: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-fab: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-fab:not(:disabled):hover::before {\n background-color: var(--_state-layer-hover-color);\n opacity: var(--_state-layer-hover-opacity);\n}\n\n.forge-fab: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@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-fab:not(:disabled) {\n outline: none;\n}\n\n.forge-fab: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-fab: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-fab:not(:disabled) {\n --forge-focus-indicator-color: var(--_fab-background);\n --forge-focus-indicator-shape-start-start: var(--_fab-shape-start-start);\n --forge-focus-indicator-shape-start-end: var(--_fab-shape-start-end);\n --forge-focus-indicator-shape-end-start: var(--_fab-shape-end-start);\n --forge-focus-indicator-shape-end-end: var(--_fab-shape-end-end);\n}\n\n.forge-fab--extended {\n --_fab-padding:var(--_fab-extended-padding);\n min-width: var(--_fab-extended-min-width);\n}\n\n.forge-fab:disabled {\n cursor: var(--_fab-disabled-cursor);\n --_fab-background:var(--_fab-disabled-background);\n --_fab-color:var(--_fab-disabled-color);\n pointer-events: none;\n opacity: var(--_fab-disabled-opacity);\n pointer-events: auto;\n cursor: not-allowed;\n}\n\n.forge-fab--dense, .forge-fab--small {\n --_fab-size:var(--_fab-density-small-size);\n}\n\n.forge-fab--large {\n --_fab-size:var(--_fab-density-large-size);\n --_fab-shape:var(--forge-fab-shape, calc(var(--forge-shape-extra-large, 16px) * var(--forge-shape-factor, 1)));\n}\n\n.forge-fab--flat {\n --_fab-shadow:var(--_fab-lowered-shadow);\n}\n\n.forge-fab--flat:hover {\n --_fab-shadow:var(--_fab-lowered-hover-shadow);\n}\n\n.forge-fab--flat:active {\n --_fab-shadow:var(--_fab-lowered-active-shadow);\n}\n\n:host {\n display: grid;\n height: 100%;\n position: relative;\n}\n\n.message-thread::-webkit-scrollbar {\n height: var(--forge-scrollbar-height, 16px);\n width: var(--forge-scrollbar-width, 16px);\n}\n.message-thread::-webkit-scrollbar-track {\n background-color: var(--forge-scrollbar-track-container, var(--forge-theme-surface-container-low, #ebebeb));\n}\n.message-thread::-webkit-scrollbar-track:hover {\n background-color: var(--forge-scrollbar-track-container-hover, var(--forge-theme-surface-container-low, #ebebeb));\n}\n.message-thread::-webkit-scrollbar-corner {\n background-color: var(--forge-scrollbar-track-container, var(--forge-theme-surface-container-low, #ebebeb));\n}\n.message-thread::-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.message-thread::-webkit-scrollbar-thumb:hover {\n background-color: var(--forge-scrollbar-thumb-container-hover, var(--forge-theme-surface-container-high, #9e9e9e));\n}\n.message-thread {\n overflow-y: auto;\n}\n@media not all and (min-resolution: 0.001dpcm) {\n @supports (-webkit-appearance: none) {\n .message-thread {\n overflow-y: scroll;\n }\n }\n}\n\n.message-thread-content {\n display: flex;\n flex-direction: column;\n gap: var(--forge-spacing-xlarge, 32px);\n padding: var(--forge-spacing-medium, 16px) var(--forge-spacing-medium, 16px) var(--forge-spacing-xxlarge, 48px) var(--forge-spacing-medium, 16px);\n max-inline-size: var(--forge-ai-message-thread-content-max-width, none);\n margin-inline: auto;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n}\n\nforge-ai-empty-state {\n margin-block: auto;\n}\n\n.thinking-indicator {\n margin-block-start: var(--forge-spacing-xsmall, 8px);\n}\n\n.system-message {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: var(--forge-typography-subheading2-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n font-size: var(--forge-typography-subheading2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-subheading2-font-size-scale, 1)));\n font-weight: var(--forge-typography-subheading2-font-weight, 400);\n line-height: var(--forge-typography-subheading2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-subheading2-line-height-scale, 1.25)));\n letter-spacing: var(--forge-typography-subheading2-letter-spacing, normal);\n text-transform: var(--forge-typography-subheading2-text-transform, inherit);\n text-decoration: var(--forge-typography-subheading2-text-decoration, inherit);\n color: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));\n padding-block: var(--forge-spacing-small, 12px);\n font-style: italic;\n}\n\n.scroll-to-bottom-button {\n --forge-fab-size: 40px;\n --forge-fab-background: var(--forge-theme-surface-bright, #ffffff);\n --forge-fab-color: var(--forge-theme-text-high, rgba(0, 0, 0, 0.87));\n position: absolute;\n bottom: var(--forge-spacing-xxsmall, 4px);\n left: 50%;\n transform: translateX(-50%) translateY(0);\n opacity: 1;\n visibility: visible;\n z-index: 1;\n transition: opacity var(--forge-animation-duration-short2, 100ms) var(--forge-animation-easing-accelerate, cubic-bezier(0.3, 0, 1, 1)), transform var(--forge-animation-duration-short2, 100ms) var(--forge-animation-easing-accelerate, cubic-bezier(0.3, 0, 1, 1)), visibility 0s 0s;\n}\n.scroll-to-bottom-button--hidden {\n opacity: 0;\n transform: translateX(-50%) translateY(24px);\n visibility: hidden;\n pointer-events: none;\n transition: opacity var(--forge-animation-duration-short2, 100ms) var(--forge-animation-easing-accelerate, cubic-bezier(0.3, 0, 1, 1)), transform var(--forge-animation-duration-short2, 100ms) var(--forge-animation-easing-accelerate, cubic-bezier(0.3, 0, 1, 1)), visibility 0s var(--forge-animation-duration-short2, 100ms);\n}\n.scroll-to-bottom-button svg {\n width: 24px;\n height: 24px;\n fill: currentColor;\n}\n\nforge-ai-user-message,\nforge-ai-response-message,\nforge-ai-error-message {\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 font-size: var(--forge-ai-markdown-font-size, 0.875rem);\n line-height: var(--forge-ai-markdown-line-height, 1.5rem);\n color: var(--forge-theme-on-surface, #000000);\n overflow-wrap: break-word;\n}\nforge-ai-user-message h1,\nforge-ai-user-message h2,\nforge-ai-user-message h3,\nforge-ai-user-message h4,\nforge-ai-user-message h5,\nforge-ai-user-message h6,\nforge-ai-response-message h1,\nforge-ai-response-message h2,\nforge-ai-response-message h3,\nforge-ai-response-message h4,\nforge-ai-response-message h5,\nforge-ai-response-message h6,\nforge-ai-error-message h1,\nforge-ai-error-message h2,\nforge-ai-error-message h3,\nforge-ai-error-message h4,\nforge-ai-error-message h5,\nforge-ai-error-message h6 {\n margin: 1.75rem 0 var(--forge-spacing-small, 12px);\n}\nforge-ai-user-message strong,\nforge-ai-response-message strong,\nforge-ai-error-message strong {\n font-weight: 500;\n}\nforge-ai-user-message a,\nforge-ai-response-message a,\nforge-ai-error-message a {\n color: var(--forge-theme-primary, #3f51b5);\n}\nforge-ai-user-message hr,\nforge-ai-response-message hr,\nforge-ai-error-message hr {\n border: none;\n border-top: 1px solid var(--forge-theme-outline, #e0e0e0);\n}\nforge-ai-user-message code,\nforge-ai-response-message code,\nforge-ai-error-message code {\n color: var(--forge-theme-on-surface-container-low, #000000);\n background-color: var(--forge-theme-surface-container-low, #ebebeb);\n border-radius: calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1));\n padding: var(--forge-spacing-xxxsmall, 2px) var(--forge-spacing-xxsmall, 4px);\n font-size: 0.75em;\n}\nforge-ai-user-message pre,\nforge-ai-response-message pre,\nforge-ai-error-message pre {\n border: 1px solid var(--forge-theme-outline, #e0e0e0);\n border-radius: calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1));\n margin: 0;\n max-width: 100%;\n overflow-x: auto;\n}\nforge-ai-user-message pre:focus-visible,\nforge-ai-response-message pre:focus-visible,\nforge-ai-error-message pre:focus-visible {\n outline: 2px solid var(--forge-theme-primary, #3f51b5);\n outline-offset: 2px;\n}\nforge-ai-user-message pre code,\nforge-ai-response-message pre code,\nforge-ai-error-message pre code {\n display: block;\n padding: var(--forge-spacing-xsmall, 8px) var(--forge-spacing-small, 12px);\n color: var(--forge-theme-on-surface-container-minimum, #000000);\n background: var(--forge-theme-surface-container-minimum, #f5f5f5);\n white-space: pre;\n}\nforge-ai-user-message [data-scroll-region=table],\nforge-ai-response-message [data-scroll-region=table],\nforge-ai-error-message [data-scroll-region=table] {\n max-width: 100%;\n overflow-x: auto;\n border-radius: calc(var(--forge-shape-large, 8px) * var(--forge-shape-factor, 1));\n margin-block: var(--forge-spacing-medium, 16px);\n}\nforge-ai-user-message [data-scroll-region=table]:focus-visible,\nforge-ai-response-message [data-scroll-region=table]:focus-visible,\nforge-ai-error-message [data-scroll-region=table]:focus-visible {\n outline: 2px solid var(--forge-theme-primary, #3f51b5);\n outline-offset: 2px;\n}\nforge-ai-user-message [data-scroll-region=table] table,\nforge-ai-response-message [data-scroll-region=table] table,\nforge-ai-error-message [data-scroll-region=table] table {\n margin-block: 0;\n}\nforge-ai-user-message table,\nforge-ai-response-message table,\nforge-ai-error-message table {\n width: 100%;\n border-spacing: 0;\n background-color: var(--forge-theme-surface, #ffffff);\n border-radius: calc(var(--forge-shape-large, 8px) * var(--forge-shape-factor, 1));\n overflow: hidden;\n margin-block: var(--forge-spacing-medium, 16px);\n}\nforge-ai-user-message table thead,\nforge-ai-response-message table thead,\nforge-ai-error-message table thead {\n color: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));\n font-weight: bold;\n text-align: left;\n font-size: calc(var(--forge-typography-font-size, 1rem) * 0.75);\n box-sizing: border-box;\n}\nforge-ai-user-message table tr,\nforge-ai-response-message table tr,\nforge-ai-error-message table tr {\n height: 36px;\n height: 32px;\n}\nforge-ai-user-message table tr:nth-child(even),\nforge-ai-response-message table tr:nth-child(even),\nforge-ai-error-message table tr:nth-child(even) {\n background-color: var(--forge-theme-surface-dim, #fafafa);\n}\nforge-ai-user-message table tr:last-child td,\nforge-ai-response-message table tr:last-child td,\nforge-ai-error-message table tr:last-child td {\n border-bottom: none;\n}\nforge-ai-user-message table th,\nforge-ai-user-message table td,\nforge-ai-response-message table th,\nforge-ai-response-message table td,\nforge-ai-error-message table th,\nforge-ai-error-message table td {\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 padding-block: var(--forge-spacing-xsmall, 8px);\n padding-inline-start: var(--forge-spacing-xsmall, 8px);\n padding-inline-end: var(--forge-spacing-medium, 16px);\n border-bottom-width: 1px;\n border-bottom-style: solid;\n border-bottom-color: var(--forge-theme-outline, #e0e0e0);\n}\nforge-ai-user-message table th,\nforge-ai-response-message table th,\nforge-ai-error-message table th {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: var(--forge-typography-label2-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n font-size: var(--forge-typography-label2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, 0.8125)));\n font-weight: var(--forge-typography-label2-font-weight, 400);\n line-height: var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));\n letter-spacing: var(--forge-typography-label2-letter-spacing, 0.0096153846em);\n text-transform: var(--forge-typography-label2-text-transform, inherit);\n text-decoration: var(--forge-typography-label2-text-decoration, inherit);\n font-weight: 600;\n}\nforge-ai-user-message > p:has(+ ol),\nforge-ai-user-message > p:has(+ ul),\nforge-ai-response-message > p:has(+ ol),\nforge-ai-response-message > p:has(+ ul),\nforge-ai-error-message > p:has(+ ol),\nforge-ai-error-message > p:has(+ ul) {\n margin-block-end: var(--forge-spacing-small, 12px);\n}\nforge-ai-user-message > ul,\nforge-ai-response-message > ul,\nforge-ai-error-message > ul {\n list-style-type: disc;\n padding-inline-start: 1.6875rem;\n}\nforge-ai-user-message > ol,\nforge-ai-response-message > ol,\nforge-ai-error-message > ol {\n padding-inline-start: 1.75rem;\n}\nforge-ai-user-message > ol,\nforge-ai-user-message > ul,\nforge-ai-response-message > ol,\nforge-ai-response-message > ul,\nforge-ai-error-message > ol,\nforge-ai-error-message > ul {\n margin: var(--forge-spacing-xsmall, 8px) 0;\n margin-block-end: var(--forge-spacing-medium, 16px);\n}\nforge-ai-user-message > :first-child,\nforge-ai-response-message > :first-child,\nforge-ai-error-message > :first-child {\n margin-block-start: 0;\n}\nforge-ai-user-message > p,\nforge-ai-response-message > p,\nforge-ai-error-message > p {\n margin-block-end: var(--forge-spacing-medium, 16px);\n overflow-wrap: anywhere;\n}\nforge-ai-user-message > p:first-child,\nforge-ai-response-message > p:first-child,\nforge-ai-error-message > p:first-child {\n margin-block-start: 0;\n}\nforge-ai-user-message > p:last-child,\nforge-ai-response-message > p:last-child,\nforge-ai-error-message > p:last-child {\n margin-block-end: 0;\n}';
|
|
1
|
+
const styles = '/* prettier-ignore */\n@keyframes fadein {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n/**\n * @license\n * Copyright Tyler Technologies, Inc.\n * License: Apache-2.0\n */\n.forge-fab {\n --_fab-display:var(--forge-fab-display, inline-flex);\n --_fab-gap:var(--forge-fab-gap, var(--forge-spacing-xsmall, 8px));\n --_fab-background:var(--forge-fab-background, var(--forge-theme-secondary, #ffc107));\n --_fab-color:var(--forge-fab-color, var(--forge-theme-on-secondary, #000000));\n --_fab-size:var(--forge-fab-size, 56px);\n --_fab-padding:var(--forge-fab-padding, var(--forge-spacing-xsmall, 8px));\n --_fab-shadow:var(--forge-fab-shadow, 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12));\n --_fab-hover-shadow:var(--forge-fab-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 --_fab-active-shadow:var(--forge-fab-active-shadow, 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12));\n --_fab-lowered-shadow:var(--forge-fab-lowered-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));\n --_fab-lowered-hover-shadow:var(--forge-fab-lowered-hover-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 --_fab-lowered-active-shadow:var(--forge-fab-lowered-active-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));\n --_fab-transition-duration:var(--forge-fab-transition-duration, var(--forge-animation-duration-short3, 150ms));\n --_fab-transition-timing:var(--forge-fab-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n --_fab-shape:var(--forge-fab-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));\n --_fab-shape-start-start:var(--forge-fab-shape-start-start, var(--_fab-shape));\n --_fab-shape-start-end:var(--forge-fab-shape-start-end, var(--_fab-shape));\n --_fab-shape-end-start:var(--forge-fab-shape-end-start, var(--_fab-shape));\n --_fab-shape-end-end:var(--forge-fab-shape-end-end, var(--_fab-shape));\n --_fab-extended-padding:var(--forge-fab-extended-padding, var(--forge-spacing-medium-large, 20px));\n --_fab-extended-min-width:var(--forge-fab-extended-min-width, 96px);\n --_fab-density-small-size:var(--forge-fab-density-small-size, 40px);\n --_fab-density-medium-size:var(--forge-fab-density-medium-size, var(--_fab-size));\n --_fab-density-large-size:var(--forge-fab-density-large-size, 96px);\n --_fab-disabled-cursor:var(--forge-fab-disabled-cursor, not-allowed);\n --_fab-disabled-background:var(--forge-fab-disabled-background, var(--forge-theme-surface-container, #e0e0e0));\n --_fab-disabled-color:var(--forge-fab-disabled-color, var(--forge-theme-on-surface-container, #000000));\n --_fab-disabled-opacity:var(--forge-fab-disabled-opacity, 0.38);\n}\n\n.forge-fab {\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: inline-flex;\n justify-content: center;\n align-items: center;\n gap: var(--_fab-gap);\n z-index: 0;\n background: var(--_fab-background);\n color: var(--_fab-color);\n cursor: pointer;\n box-shadow: var(--_fab-shadow);\n box-sizing: border-box;\n height: var(--_fab-density-medium-size);\n min-width: var(--_fab-density-medium-size);\n padding-inline: var(--_fab-padding);\n border-width: medium;\n border-style: none;\n border-color: currentColor;\n border-top-left-radius: var(--_fab-shape-start-start);\n border-top-right-radius: var(--_fab-shape-start-end);\n border-bottom-left-radius: var(--_fab-shape-end-start);\n border-bottom-right-radius: var(--_fab-shape-end-end);\n user-select: none;\n white-space: nowrap;\n transition-property: box-shadow, background, color;\n transition-duration: var(--_fab-transition-duration);\n transition-timing-function: var(--_fab-transition-timing);\n}\n\n.forge-fab:hover {\n --_fab-shadow:var(--_fab-hover-shadow);\n}\n\n.forge-fab:active {\n --_fab-shadow:var(--_fab-active-shadow);\n}\n\n.forge-fab: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-fab: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-fab:not(:disabled):hover::before {\n background-color: var(--_state-layer-hover-color);\n opacity: var(--_state-layer-hover-opacity);\n}\n\n.forge-fab: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@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-fab:not(:disabled) {\n outline: none;\n}\n\n.forge-fab: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-fab: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-fab:not(:disabled) {\n --forge-focus-indicator-color: var(--_fab-background);\n --forge-focus-indicator-shape-start-start: var(--_fab-shape-start-start);\n --forge-focus-indicator-shape-start-end: var(--_fab-shape-start-end);\n --forge-focus-indicator-shape-end-start: var(--_fab-shape-end-start);\n --forge-focus-indicator-shape-end-end: var(--_fab-shape-end-end);\n}\n\n.forge-fab--extended {\n --_fab-padding:var(--_fab-extended-padding);\n min-width: var(--_fab-extended-min-width);\n}\n\n.forge-fab:disabled {\n cursor: var(--_fab-disabled-cursor);\n --_fab-background:var(--_fab-disabled-background);\n --_fab-color:var(--_fab-disabled-color);\n pointer-events: none;\n opacity: var(--_fab-disabled-opacity);\n pointer-events: auto;\n cursor: not-allowed;\n}\n\n.forge-fab--dense, .forge-fab--small {\n --_fab-size:var(--_fab-density-small-size);\n}\n\n.forge-fab--large {\n --_fab-size:var(--_fab-density-large-size);\n --_fab-shape:var(--forge-fab-shape, calc(var(--forge-shape-extra-large, 16px) * var(--forge-shape-factor, 1)));\n}\n\n.forge-fab--flat {\n --_fab-shadow:var(--_fab-lowered-shadow);\n}\n\n.forge-fab--flat:hover {\n --_fab-shadow:var(--_fab-lowered-hover-shadow);\n}\n\n.forge-fab--flat:active {\n --_fab-shadow:var(--_fab-lowered-active-shadow);\n}\n\n:host {\n display: grid;\n height: 100%;\n position: relative;\n}\n\n.message-thread::-webkit-scrollbar {\n height: var(--forge-scrollbar-height, 16px);\n width: var(--forge-scrollbar-width, 16px);\n}\n.message-thread::-webkit-scrollbar-track {\n background-color: var(--forge-scrollbar-track-container, var(--forge-theme-surface-container-low, #ebebeb));\n}\n.message-thread::-webkit-scrollbar-track:hover {\n background-color: var(--forge-scrollbar-track-container-hover, var(--forge-theme-surface-container-low, #ebebeb));\n}\n.message-thread::-webkit-scrollbar-corner {\n background-color: var(--forge-scrollbar-track-container, var(--forge-theme-surface-container-low, #ebebeb));\n}\n.message-thread::-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.message-thread::-webkit-scrollbar-thumb:hover {\n background-color: var(--forge-scrollbar-thumb-container-hover, var(--forge-theme-surface-container-high, #9e9e9e));\n}\n.message-thread {\n overflow-y: auto;\n}\n@media not all and (min-resolution: 0.001dpcm) {\n @supports (-webkit-appearance: none) {\n .message-thread {\n overflow-y: scroll;\n }\n }\n}\n\n.message-thread-content {\n --_message-thread-item-spacing: var(--forge-spacing-xlarge, 32px);\n display: flex;\n flex-direction: column;\n padding: var(--forge-spacing-medium, 16px) var(--forge-spacing-medium, 16px) var(--forge-spacing-xxlarge, 48px) var(--forge-spacing-medium, 16px);\n max-inline-size: var(--forge-ai-message-thread-content-max-width, none);\n margin-inline: auto;\n width: 100%;\n min-height: 100%;\n box-sizing: border-box;\n}\n\n.message-thread-content > * + * {\n margin-block-start: var(--_message-thread-item-spacing);\n}\n\nforge-ai-empty-state {\n margin-block: auto;\n}\n\n.system-message {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: var(--forge-typography-subheading2-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n font-size: var(--forge-typography-subheading2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-subheading2-font-size-scale, 1)));\n font-weight: var(--forge-typography-subheading2-font-weight, 400);\n line-height: var(--forge-typography-subheading2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-subheading2-line-height-scale, 1.25)));\n letter-spacing: var(--forge-typography-subheading2-letter-spacing, normal);\n text-transform: var(--forge-typography-subheading2-text-transform, inherit);\n text-decoration: var(--forge-typography-subheading2-text-decoration, inherit);\n color: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));\n padding-block: var(--forge-spacing-small, 12px);\n font-style: italic;\n}\n\n.scroll-to-bottom-button {\n --forge-fab-size: 40px;\n --forge-fab-background: var(--forge-theme-surface-bright, #ffffff);\n --forge-fab-color: var(--forge-theme-text-high, rgba(0, 0, 0, 0.87));\n position: absolute;\n bottom: var(--forge-spacing-xxsmall, 4px);\n left: 50%;\n transform: translateX(-50%) translateY(0);\n opacity: 1;\n visibility: visible;\n z-index: 1;\n transition: opacity var(--forge-animation-duration-short2, 100ms) var(--forge-animation-easing-accelerate, cubic-bezier(0.3, 0, 1, 1)), transform var(--forge-animation-duration-short2, 100ms) var(--forge-animation-easing-accelerate, cubic-bezier(0.3, 0, 1, 1)), visibility 0s 0s;\n}\n.scroll-to-bottom-button--hidden {\n opacity: 0;\n transform: translateX(-50%) translateY(24px);\n visibility: hidden;\n pointer-events: none;\n transition: opacity var(--forge-animation-duration-short2, 100ms) var(--forge-animation-easing-accelerate, cubic-bezier(0.3, 0, 1, 1)), transform var(--forge-animation-duration-short2, 100ms) var(--forge-animation-easing-accelerate, cubic-bezier(0.3, 0, 1, 1)), visibility 0s var(--forge-animation-duration-short2, 100ms);\n}\n.scroll-to-bottom-button svg {\n width: 24px;\n height: 24px;\n fill: currentColor;\n}\n\nforge-ai-user-message,\nforge-ai-response-message,\nforge-ai-error-message {\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 font-size: var(--forge-ai-markdown-font-size, 0.875rem);\n line-height: var(--forge-ai-markdown-line-height, 1.5rem);\n color: var(--forge-theme-on-surface, #000000);\n overflow-wrap: break-word;\n}\nforge-ai-user-message h1,\nforge-ai-user-message h2,\nforge-ai-user-message h3,\nforge-ai-user-message h4,\nforge-ai-user-message h5,\nforge-ai-user-message h6,\nforge-ai-response-message h1,\nforge-ai-response-message h2,\nforge-ai-response-message h3,\nforge-ai-response-message h4,\nforge-ai-response-message h5,\nforge-ai-response-message h6,\nforge-ai-error-message h1,\nforge-ai-error-message h2,\nforge-ai-error-message h3,\nforge-ai-error-message h4,\nforge-ai-error-message h5,\nforge-ai-error-message h6 {\n margin: 1.75rem 0 var(--forge-spacing-small, 12px);\n}\nforge-ai-user-message strong,\nforge-ai-response-message strong,\nforge-ai-error-message strong {\n font-weight: 500;\n}\nforge-ai-user-message a,\nforge-ai-response-message a,\nforge-ai-error-message a {\n color: var(--forge-theme-primary, #3f51b5);\n}\nforge-ai-user-message hr,\nforge-ai-response-message hr,\nforge-ai-error-message hr {\n border: none;\n border-top: 1px solid var(--forge-theme-outline, #e0e0e0);\n}\nforge-ai-user-message code,\nforge-ai-response-message code,\nforge-ai-error-message code {\n color: var(--forge-theme-on-surface-container-low, #000000);\n background-color: var(--forge-theme-surface-container-low, #ebebeb);\n border-radius: calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1));\n padding: var(--forge-spacing-xxxsmall, 2px) var(--forge-spacing-xxsmall, 4px);\n font-size: 0.75em;\n}\nforge-ai-user-message pre,\nforge-ai-response-message pre,\nforge-ai-error-message pre {\n border: 1px solid var(--forge-theme-outline, #e0e0e0);\n border-radius: calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1));\n margin: 0;\n max-width: 100%;\n overflow-x: auto;\n}\nforge-ai-user-message pre:focus-visible,\nforge-ai-response-message pre:focus-visible,\nforge-ai-error-message pre:focus-visible {\n outline: 2px solid var(--forge-theme-primary, #3f51b5);\n outline-offset: 2px;\n}\nforge-ai-user-message pre code,\nforge-ai-response-message pre code,\nforge-ai-error-message pre code {\n display: block;\n padding: var(--forge-spacing-xsmall, 8px) var(--forge-spacing-small, 12px);\n color: var(--forge-theme-on-surface-container-minimum, #000000);\n background: var(--forge-theme-surface-container-minimum, #f5f5f5);\n white-space: pre;\n}\nforge-ai-user-message [data-scroll-region=table],\nforge-ai-response-message [data-scroll-region=table],\nforge-ai-error-message [data-scroll-region=table] {\n max-width: 100%;\n overflow-x: auto;\n border-radius: calc(var(--forge-shape-large, 8px) * var(--forge-shape-factor, 1));\n margin-block: var(--forge-spacing-medium, 16px);\n}\nforge-ai-user-message [data-scroll-region=table]:focus-visible,\nforge-ai-response-message [data-scroll-region=table]:focus-visible,\nforge-ai-error-message [data-scroll-region=table]:focus-visible {\n outline: 2px solid var(--forge-theme-primary, #3f51b5);\n outline-offset: 2px;\n}\nforge-ai-user-message [data-scroll-region=table] table,\nforge-ai-response-message [data-scroll-region=table] table,\nforge-ai-error-message [data-scroll-region=table] table {\n margin-block: 0;\n}\nforge-ai-user-message table,\nforge-ai-response-message table,\nforge-ai-error-message table {\n width: 100%;\n border-spacing: 0;\n background-color: var(--forge-theme-surface, #ffffff);\n border-radius: calc(var(--forge-shape-large, 8px) * var(--forge-shape-factor, 1));\n overflow: hidden;\n margin-block: var(--forge-spacing-medium, 16px);\n}\nforge-ai-user-message table thead,\nforge-ai-response-message table thead,\nforge-ai-error-message table thead {\n color: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));\n font-weight: bold;\n text-align: left;\n font-size: calc(var(--forge-typography-font-size, 1rem) * 0.75);\n box-sizing: border-box;\n}\nforge-ai-user-message table tr,\nforge-ai-response-message table tr,\nforge-ai-error-message table tr {\n height: 36px;\n height: 32px;\n}\nforge-ai-user-message table tr:nth-child(even),\nforge-ai-response-message table tr:nth-child(even),\nforge-ai-error-message table tr:nth-child(even) {\n background-color: var(--forge-theme-surface-dim, #fafafa);\n}\nforge-ai-user-message table tr:last-child td,\nforge-ai-response-message table tr:last-child td,\nforge-ai-error-message table tr:last-child td {\n border-bottom: none;\n}\nforge-ai-user-message table th,\nforge-ai-user-message table td,\nforge-ai-response-message table th,\nforge-ai-response-message table td,\nforge-ai-error-message table th,\nforge-ai-error-message table td {\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 padding-block: var(--forge-spacing-xsmall, 8px);\n padding-inline-start: var(--forge-spacing-xsmall, 8px);\n padding-inline-end: var(--forge-spacing-medium, 16px);\n border-bottom-width: 1px;\n border-bottom-style: solid;\n border-bottom-color: var(--forge-theme-outline, #e0e0e0);\n}\nforge-ai-user-message table th,\nforge-ai-response-message table th,\nforge-ai-error-message table th {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: var(--forge-typography-label2-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n font-size: var(--forge-typography-label2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, 0.8125)));\n font-weight: var(--forge-typography-label2-font-weight, 400);\n line-height: var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));\n letter-spacing: var(--forge-typography-label2-letter-spacing, 0.0096153846em);\n text-transform: var(--forge-typography-label2-text-transform, inherit);\n text-decoration: var(--forge-typography-label2-text-decoration, inherit);\n font-weight: 600;\n}\nforge-ai-user-message > p:has(+ ol),\nforge-ai-user-message > p:has(+ ul),\nforge-ai-response-message > p:has(+ ol),\nforge-ai-response-message > p:has(+ ul),\nforge-ai-error-message > p:has(+ ol),\nforge-ai-error-message > p:has(+ ul) {\n margin-block-end: var(--forge-spacing-small, 12px);\n}\nforge-ai-user-message > ul,\nforge-ai-response-message > ul,\nforge-ai-error-message > ul {\n list-style-type: disc;\n padding-inline-start: 1.6875rem;\n}\nforge-ai-user-message > ol,\nforge-ai-response-message > ol,\nforge-ai-error-message > ol {\n padding-inline-start: 1.75rem;\n}\nforge-ai-user-message > ol,\nforge-ai-user-message > ul,\nforge-ai-response-message > ol,\nforge-ai-response-message > ul,\nforge-ai-error-message > ol,\nforge-ai-error-message > ul {\n margin: var(--forge-spacing-xsmall, 8px) 0;\n margin-block-end: var(--forge-spacing-medium, 16px);\n}\nforge-ai-user-message > :first-child,\nforge-ai-response-message > :first-child,\nforge-ai-error-message > :first-child {\n margin-block-start: 0;\n}\nforge-ai-user-message > p,\nforge-ai-response-message > p,\nforge-ai-error-message > p {\n margin-block-end: var(--forge-spacing-medium, 16px);\n overflow-wrap: anywhere;\n}\nforge-ai-user-message > p:first-child,\nforge-ai-response-message > p:first-child,\nforge-ai-error-message > p:first-child {\n margin-block-start: 0;\n}\nforge-ai-user-message > p:last-child,\nforge-ai-response-message > p:last-child,\nforge-ai-error-message > p:last-child {\n margin-block-end: 0;\n}';
|
|
2
2
|
export {
|
|
3
3
|
styles as default
|
|
4
4
|
};
|
|
@@ -47,6 +47,10 @@ export declare class AiModalComponent extends LitElement {
|
|
|
47
47
|
* - 'fixed': Maintains defined size regardless of viewport, never auto-fullscreens
|
|
48
48
|
*/
|
|
49
49
|
sizeStrategy: AiModalSizeStrategy;
|
|
50
|
+
/**
|
|
51
|
+
* Accessible label for the dialog, announced by screen readers when the modal opens.
|
|
52
|
+
*/
|
|
53
|
+
label: string;
|
|
50
54
|
private _autoFullscreen;
|
|
51
55
|
constructor();
|
|
52
56
|
render(): TemplateResult;
|
|
@@ -29,6 +29,7 @@ let AiModalComponent = class extends LitElement {
|
|
|
29
29
|
__privateAdd(this, _AiModalComponent_instances);
|
|
30
30
|
this.open = false;
|
|
31
31
|
this.sizeStrategy = "auto";
|
|
32
|
+
this.label = "AI Assistant";
|
|
32
33
|
this._autoFullscreen = window.innerWidth <= FULLSCREEN_WIDTH_THRESHOLD;
|
|
33
34
|
__privateAdd(this, _mediaQuery);
|
|
34
35
|
__privateAdd(this, _internals);
|
|
@@ -60,7 +61,7 @@ let AiModalComponent = class extends LitElement {
|
|
|
60
61
|
return html`
|
|
61
62
|
<dialog
|
|
62
63
|
class=${classMap(classes)}
|
|
63
|
-
aria-
|
|
64
|
+
aria-label=${this.label}
|
|
64
65
|
@close=${__privateMethod(this, _AiModalComponent_instances, handleDialogClose_fn)}
|
|
65
66
|
@click=${__privateMethod(this, _AiModalComponent_instances, handleDialogClick_fn)}
|
|
66
67
|
@keydown=${__privateMethod(this, _AiModalComponent_instances, handleDialogKeydown_fn)}>
|
|
@@ -163,6 +164,9 @@ __decorateClass([
|
|
|
163
164
|
__decorateClass([
|
|
164
165
|
property({ type: String, attribute: "size-strategy" })
|
|
165
166
|
], AiModalComponent.prototype, "sizeStrategy", 2);
|
|
167
|
+
__decorateClass([
|
|
168
|
+
property({ type: String })
|
|
169
|
+
], AiModalComponent.prototype, "label", 2);
|
|
166
170
|
__decorateClass([
|
|
167
171
|
state()
|
|
168
172
|
], AiModalComponent.prototype, "_autoFullscreen", 2);
|
|
@@ -437,9 +437,9 @@ sendButton_get = function() {
|
|
|
437
437
|
class="forge-icon-button forge-icon-button--medium send-button"
|
|
438
438
|
?disabled=${this.sendDisabled || this.inputDisabled}
|
|
439
439
|
@click=${__privateGet(this, _AiPromptComponent_instances, shouldShowStopButton_get) ? this._handleStop : this._handleSend}>
|
|
440
|
-
${__privateGet(this, _AiPromptComponent_instances, shouldShowStopButton_get) ? html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
440
|
+
${__privateGet(this, _AiPromptComponent_instances, shouldShowStopButton_get) ? html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
|
|
441
441
|
<path d="M18 18H6V6h12z" />
|
|
442
|
-
</svg>` : html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
442
|
+
</svg>` : html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
|
|
443
443
|
<path d="m2 21 21-9L2 3v7l15 2-15 2z" />
|
|
444
444
|
</svg>`}
|
|
445
445
|
<forge-ai-tooltip for="send-btn" placement="top"
|
|
@@ -455,7 +455,7 @@ debugButton_get = function() {
|
|
|
455
455
|
aria-label="Exit debug mode"
|
|
456
456
|
class="forge-icon-button forge-icon-button--small forge-icon-button--tonal ai-icon-button debug-button"
|
|
457
457
|
@click=${this._handleDebugToggle}>
|
|
458
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
458
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
|
|
459
459
|
<path
|
|
460
460
|
d="M20 8h-2.81a5.985 5.985 0 0 0-1.82-1.96L17 4.41 15.59 3l-2.17 2.17a6.002 6.002 0 0 0-2.83 0L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z" />
|
|
461
461
|
</svg>
|
|
@@ -36,16 +36,16 @@ let AiReasoningHeaderComponent = class extends LitElement {
|
|
|
36
36
|
@click=${this._handleClick}
|
|
37
37
|
aria-expanded=${this.expanded}
|
|
38
38
|
aria-controls="content">
|
|
39
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="forge-icon">
|
|
39
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="forge-icon" aria-hidden="true">
|
|
40
40
|
<path
|
|
41
41
|
d="M3.5 19A1.5 1.5 0 0 1 5 20.5 1.5 1.5 0 0 1 3.5 22 1.5 1.5 0 0 1 2 20.5 1.5 1.5 0 0 1 3.5 19m5-3a2.5 2.5 0 0 1 2.5 2.5A2.5 2.5 0 0 1 8.5 21 2.5 2.5 0 0 1 6 18.5 2.5 2.5 0 0 1 8.5 16m6-1c-1.19 0-2.27-.5-3-1.35-.73.85-1.81 1.35-3 1.35-1.96 0-3.59-1.41-3.93-3.26A4.02 4.02 0 0 1 2 8a4 4 0 0 1 4-4l.77.07C7.5 3.41 8.45 3 9.5 3c1.19 0 2.27.5 3 1.35.73-.85 1.81-1.35 3-1.35 1.96 0 3.59 1.41 3.93 3.26A4.02 4.02 0 0 1 22 10a4 4 0 0 1-4 4l-.77-.07c-.73.66-1.68 1.07-2.73 1.07M6 6a2 2 0 0 0-2 2 2 2 0 0 0 2 2c.33 0 .64-.08.92-.22A2 2 0 0 0 6.5 11a2 2 0 0 0 2 2c.6 0 1.14-.27 1.5-.69l1.47-1.68L13 12.34c.38.4.91.66 1.5.66 1 0 1.83-.74 2-1.7.34.43.89.7 1.5.7a2 2 0 0 0 2-2 2 2 0 0 0-2-2c-.33 0-.64.08-.92.22A2 2 0 0 0 17.5 7a2 2 0 0 0-2-2c-.59 0-1.12.26-1.5.66l-1.53 1.71L11 5.69c-.36-.42-.9-.69-1.5-.69-1 0-1.83.74-2 1.7C7.16 6.27 6.61 6 6 6m2.5 11.5a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1" />
|
|
42
42
|
</svg>
|
|
43
43
|
<span class="button-header-text">
|
|
44
44
|
${this.reasoning ? html`<slot name="reasoning-title"></slot>` : html`<slot name="title"></slot>`}
|
|
45
45
|
</span>
|
|
46
|
-
${this.expanded ? html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="forge-icon">
|
|
46
|
+
${this.expanded ? html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="forge-icon" aria-hidden="true">
|
|
47
47
|
<path d="M7.41 15.41 12 10.83l4.59 4.58L18 14l-6-6-6 6z" />
|
|
48
|
-
</svg>` : html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="forge-icon">
|
|
48
|
+
</svg>` : html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="forge-icon" aria-hidden="true">
|
|
49
49
|
<path d="M7.41 8.58 12 13.17l4.59-4.59L18 10l-6 6-6-6z" />
|
|
50
50
|
</svg>`}
|
|
51
51
|
</button>
|