@tylertech/forge-ai 0.7.3 → 0.8.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 +646 -473
- package/dist/ai-actions-toolbar/ai-actions-toolbar.mjs +4 -4
- package/dist/ai-assistant-response/ai-assistant-response.scss.mjs +1 -1
- package/dist/ai-chat-header/ai-chat-header.mjs +72 -72
- package/dist/ai-chat-interface/ai-chat-interface.scss.mjs +1 -1
- package/dist/ai-chatbot/ai-chatbot-tool-call.mjs +22 -15
- package/dist/ai-chatbot/ai-chatbot-tool-call.scss.mjs +1 -1
- package/dist/ai-chatbot/ai-chatbot.mjs +47 -2
- package/dist/ai-chatbot/message-state-controller.d.ts +1 -0
- package/dist/ai-chatbot/message-state-controller.mjs +29 -9
- package/dist/ai-chatbot/types.d.ts +1 -0
- package/dist/ai-chatbot/utils.mjs +13 -2
- package/dist/ai-dialog/ai-dialog.scss.mjs +1 -1
- package/dist/ai-empty-state/ai-empty-state.scss.mjs +1 -1
- package/dist/ai-file-picker/ai-file-picker.mjs +3 -0
- package/dist/ai-floating-chat/ai-floating-chat.scss.mjs +1 -1
- package/dist/ai-message-thread/ai-message-thread.d.ts +9 -0
- package/dist/ai-message-thread/ai-message-thread.mjs +78 -5
- package/dist/ai-message-thread/ai-message-thread.scss.mjs +1 -1
- package/dist/ai-prompt/ai-prompt.mjs +48 -5
- package/dist/ai-slash-command-menu/ai-slash-command-menu.mjs +1 -1
- package/dist/ai-user-message/ai-user-message.d.ts +25 -0
- package/dist/ai-user-message/ai-user-message.mjs +183 -5
- package/dist/ai-user-message/ai-user-message.scss.mjs +1 -1
- package/dist/ai-voice-input/ai-voice-input.mjs +5 -0
- package/dist/tools/ai-confirm-tool-call/ai-confirm-tool-call-definition.d.ts +10 -0
- package/dist/tools/ai-confirm-tool-call/ai-confirm-tool-call-definition.mjs +20 -0
- package/dist/tools/ai-confirm-tool-call/index.d.ts +1 -0
- package/dist/tools/ai-confirm-tool-call/index.mjs +5 -0
- package/dist/tools/ai-paginator/ai-paginator.mjs +5 -0
- package/package.json +1 -1
|
@@ -4,6 +4,7 @@ import { when } from "lit/directives/when.js";
|
|
|
4
4
|
import { toggleState } from "../utils.mjs";
|
|
5
5
|
import styles from "./ai-prompt.scss.mjs";
|
|
6
6
|
import "../ai-slash-command-menu/ai-slash-command-menu.mjs";
|
|
7
|
+
import "../core/tooltip/tooltip.mjs";
|
|
7
8
|
var __defProp = Object.defineProperty;
|
|
8
9
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
9
10
|
var __typeError = (msg) => {
|
|
@@ -30,7 +31,7 @@ var __privateWrapper = (obj, member, setter, getter) => ({
|
|
|
30
31
|
return __privateGet(obj, member, getter);
|
|
31
32
|
}
|
|
32
33
|
});
|
|
33
|
-
var _internals, _messageHistory, _historyIndex, _draftMessage, _AiPromptComponent_instances, setCssState_fn, resetHistoryNavigation_fn, navigateHistory_fn, _actionsSlot, shouldShowStopButton_get, conditionalActions_get, handleSlotChange_fn, handleSlashCommandSelect_fn, handleSlashCommandClose_fn, slashCommandMenu_get;
|
|
34
|
+
var _internals, _messageHistory, _historyIndex, _draftMessage, _AiPromptComponent_instances, setCssState_fn, resetHistoryNavigation_fn, isCursorOnFirstLine_fn, isCursorOnLastLine_fn, isCursorAtStart_fn, isCursorAtEnd_fn, moveCursorToStart_fn, moveCursorToEnd_fn, navigateHistory_fn, _actionsSlot, shouldShowStopButton_get, conditionalActions_get, handleSlotChange_fn, handleSlashCommandSelect_fn, handleSlashCommandClose_fn, slashCommandMenu_get;
|
|
34
35
|
const MAX_HISTORY_SIZE = 50;
|
|
35
36
|
const AiPromptComponentTagName = "forge-ai-prompt";
|
|
36
37
|
let AiPromptComponent = class extends LitElement {
|
|
@@ -148,13 +149,26 @@ let AiPromptComponent = class extends LitElement {
|
|
|
148
149
|
}
|
|
149
150
|
const hasModifier = event.shiftKey || event.ctrlKey || event.metaKey;
|
|
150
151
|
if (!hasModifier) {
|
|
151
|
-
if (event.key === "ArrowUp") {
|
|
152
|
-
if (__privateMethod(this, _AiPromptComponent_instances,
|
|
152
|
+
if (event.key === "ArrowUp" && __privateMethod(this, _AiPromptComponent_instances, isCursorOnFirstLine_fn).call(this)) {
|
|
153
|
+
if (__privateMethod(this, _AiPromptComponent_instances, isCursorAtStart_fn).call(this)) {
|
|
154
|
+
if (__privateMethod(this, _AiPromptComponent_instances, navigateHistory_fn).call(this, -1)) {
|
|
155
|
+
__privateMethod(this, _AiPromptComponent_instances, moveCursorToStart_fn).call(this);
|
|
156
|
+
event.preventDefault();
|
|
157
|
+
return;
|
|
158
|
+
}
|
|
159
|
+
} else {
|
|
160
|
+
__privateMethod(this, _AiPromptComponent_instances, moveCursorToStart_fn).call(this);
|
|
153
161
|
event.preventDefault();
|
|
154
162
|
return;
|
|
155
163
|
}
|
|
156
|
-
} else if (event.key === "ArrowDown") {
|
|
157
|
-
if (__privateMethod(this, _AiPromptComponent_instances,
|
|
164
|
+
} else if (event.key === "ArrowDown" && __privateMethod(this, _AiPromptComponent_instances, isCursorOnLastLine_fn).call(this)) {
|
|
165
|
+
if (__privateMethod(this, _AiPromptComponent_instances, isCursorAtEnd_fn).call(this)) {
|
|
166
|
+
if (__privateMethod(this, _AiPromptComponent_instances, navigateHistory_fn).call(this, 1)) {
|
|
167
|
+
event.preventDefault();
|
|
168
|
+
return;
|
|
169
|
+
}
|
|
170
|
+
} else {
|
|
171
|
+
__privateMethod(this, _AiPromptComponent_instances, moveCursorToEnd_fn).call(this);
|
|
158
172
|
event.preventDefault();
|
|
159
173
|
return;
|
|
160
174
|
}
|
|
@@ -251,6 +265,7 @@ let AiPromptComponent = class extends LitElement {
|
|
|
251
265
|
this.debugMode,
|
|
252
266
|
() => html`
|
|
253
267
|
<button
|
|
268
|
+
id="debug-btn"
|
|
254
269
|
aria-label="Exit debug mode"
|
|
255
270
|
class="forge-icon-button forge-icon-button--medium forge-icon-button--tonal ai-icon-button debug-button"
|
|
256
271
|
@click=${this._handleDebugToggle}>
|
|
@@ -259,9 +274,11 @@ let AiPromptComponent = class extends LitElement {
|
|
|
259
274
|
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" />
|
|
260
275
|
</svg>
|
|
261
276
|
</button>
|
|
277
|
+
<forge-ai-tooltip for="debug-btn" placement="top">Exit debug mode</forge-ai-tooltip>
|
|
262
278
|
`
|
|
263
279
|
)}
|
|
264
280
|
<button
|
|
281
|
+
id="send-btn"
|
|
265
282
|
aria-label=${__privateGet(this, _AiPromptComponent_instances, shouldShowStopButton_get) ? "Stop" : "Send message"}
|
|
266
283
|
class="forge-icon-button forge-icon-button--medium ai-icon-button"
|
|
267
284
|
?disabled=${this.sendDisabled || this.inputDisabled}
|
|
@@ -272,6 +289,9 @@ let AiPromptComponent = class extends LitElement {
|
|
|
272
289
|
<path d="m2 21 21-9L2 3v7l15 2-15 2z" />
|
|
273
290
|
</svg>`}
|
|
274
291
|
</button>
|
|
292
|
+
<forge-ai-tooltip for="send-btn" placement="top"
|
|
293
|
+
>${__privateGet(this, _AiPromptComponent_instances, shouldShowStopButton_get) ? "Stop" : "Send"}</forge-ai-tooltip
|
|
294
|
+
>
|
|
275
295
|
</div>
|
|
276
296
|
${when(this.variant === "stacked", () => html`${__privateGet(this, _AiPromptComponent_instances, conditionalActions_get)}`)}
|
|
277
297
|
</div>
|
|
@@ -293,6 +313,29 @@ resetHistoryNavigation_fn = function() {
|
|
|
293
313
|
__privateSet(this, _historyIndex, -1);
|
|
294
314
|
__privateSet(this, _draftMessage, "");
|
|
295
315
|
};
|
|
316
|
+
isCursorOnFirstLine_fn = function() {
|
|
317
|
+
const cursorPos = this._inputElement?.selectionStart ?? 0;
|
|
318
|
+
const textBeforeCursor = this.value.substring(0, cursorPos);
|
|
319
|
+
return !textBeforeCursor.includes("\n");
|
|
320
|
+
};
|
|
321
|
+
isCursorOnLastLine_fn = function() {
|
|
322
|
+
const cursorPos = this._inputElement?.selectionStart ?? 0;
|
|
323
|
+
const textAfterCursor = this.value.substring(cursorPos);
|
|
324
|
+
return !textAfterCursor.includes("\n");
|
|
325
|
+
};
|
|
326
|
+
isCursorAtStart_fn = function() {
|
|
327
|
+
return (this._inputElement?.selectionStart ?? 0) === 0;
|
|
328
|
+
};
|
|
329
|
+
isCursorAtEnd_fn = function() {
|
|
330
|
+
return (this._inputElement?.selectionStart ?? 0) === this.value.length;
|
|
331
|
+
};
|
|
332
|
+
moveCursorToStart_fn = function() {
|
|
333
|
+
this._inputElement?.setSelectionRange(0, 0);
|
|
334
|
+
};
|
|
335
|
+
moveCursorToEnd_fn = function() {
|
|
336
|
+
const len = this.value.length;
|
|
337
|
+
this._inputElement?.setSelectionRange(len, len);
|
|
338
|
+
};
|
|
296
339
|
navigateHistory_fn = function(direction) {
|
|
297
340
|
if (__privateGet(this, _messageHistory).length === 0) {
|
|
298
341
|
return false;
|
|
@@ -69,7 +69,7 @@ let AiSlashCommandMenuComponent = class extends LitElement {
|
|
|
69
69
|
placement="top-start"
|
|
70
70
|
.open=${this.open}
|
|
71
71
|
dismiss-mode="manual"
|
|
72
|
-
.offset=${{ mainAxis:
|
|
72
|
+
.offset=${{ mainAxis: 8, crossAxis: -14 }}
|
|
73
73
|
@forge-ai-popover-toggle=${__privateMethod(this, _AiSlashCommandMenuComponent_instances, handlePopoverToggle_fn)}>
|
|
74
74
|
<div class="slash-command-menu__header">
|
|
75
75
|
<span>Slash Commands</span>
|
|
@@ -3,13 +3,38 @@ declare global {
|
|
|
3
3
|
interface HTMLElementTagNameMap {
|
|
4
4
|
'forge-ai-user-message': AiUserMessageComponent;
|
|
5
5
|
}
|
|
6
|
+
interface HTMLElementEventMap {
|
|
7
|
+
'forge-ai-user-message-copy': CustomEvent<ForgeAiUserMessageCopyEventData>;
|
|
8
|
+
'forge-ai-user-message-resend': CustomEvent<ForgeAiUserMessageResendEventData>;
|
|
9
|
+
'forge-ai-user-message-edit': CustomEvent<ForgeAiUserMessageEditEventData>;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
export interface ForgeAiUserMessageCopyEventData {
|
|
13
|
+
messageId: string;
|
|
14
|
+
}
|
|
15
|
+
export interface ForgeAiUserMessageResendEventData {
|
|
16
|
+
messageId: string;
|
|
17
|
+
}
|
|
18
|
+
export interface ForgeAiUserMessageEditEventData {
|
|
19
|
+
messageId: string;
|
|
20
|
+
content: string;
|
|
6
21
|
}
|
|
7
22
|
export declare const AiUserMessageComponentTagName: keyof HTMLElementTagNameMap;
|
|
8
23
|
/**
|
|
9
24
|
* @tag forge-ai-user-message
|
|
25
|
+
*
|
|
26
|
+
* @event {CustomEvent<ForgeAiUserMessageCopyEventData>} forge-ai-user-message-copy - Fired when user clicks copy button
|
|
27
|
+
* @event {CustomEvent<ForgeAiUserMessageResendEventData>} forge-ai-user-message-resend - Fired when user clicks resend button
|
|
28
|
+
* @event {CustomEvent<ForgeAiUserMessageEditEventData>} forge-ai-user-message-edit - Fired when user saves edited message
|
|
10
29
|
*/
|
|
11
30
|
export declare class AiUserMessageComponent extends LitElement {
|
|
12
31
|
#private;
|
|
13
32
|
static styles: import('lit').CSSResult;
|
|
33
|
+
timestamp?: number;
|
|
34
|
+
messageId?: string;
|
|
35
|
+
streaming: boolean;
|
|
36
|
+
content?: string;
|
|
37
|
+
private _editing;
|
|
38
|
+
private _editContent;
|
|
14
39
|
render(): TemplateResult;
|
|
15
40
|
}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
|
-
import { unsafeCSS, LitElement, html } from "lit";
|
|
2
|
-
import { customElement } from "lit/decorators.js";
|
|
1
|
+
import { unsafeCSS, LitElement, html, nothing } from "lit";
|
|
2
|
+
import { property, state, customElement } from "lit/decorators.js";
|
|
3
|
+
import { when } from "lit/directives/when.js";
|
|
4
|
+
import "../core/tooltip/tooltip.mjs";
|
|
3
5
|
import styles from "./ai-user-message.scss.mjs";
|
|
6
|
+
var __defProp = Object.defineProperty;
|
|
4
7
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
8
|
var __typeError = (msg) => {
|
|
6
9
|
throw TypeError(msg);
|
|
@@ -9,17 +12,41 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
9
12
|
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
10
13
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
11
14
|
if (decorator = decorators[i])
|
|
12
|
-
result = decorator(result) || result;
|
|
15
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
16
|
+
if (kind && result) __defProp(target, key, result);
|
|
13
17
|
return result;
|
|
14
18
|
};
|
|
15
19
|
var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
|
|
16
20
|
var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
|
|
17
21
|
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);
|
|
18
|
-
var
|
|
22
|
+
var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
|
|
23
|
+
var _refreshIcon, _copyIcon, _editIcon, _messageContainer, _AiUserMessageComponent_instances, formattedTime_get, formattedFullDate_get, isSaveDisabled_get, editContainer_get, toolbar_get, handleCopy_fn, handleResend_fn, handleEditClick_fn, handleEditInput_fn, handleCancel_fn, handleSave_fn;
|
|
19
24
|
const AiUserMessageComponentTagName = "forge-ai-user-message";
|
|
20
25
|
let AiUserMessageComponent = class extends LitElement {
|
|
21
26
|
constructor() {
|
|
22
27
|
super(...arguments);
|
|
28
|
+
__privateAdd(this, _AiUserMessageComponent_instances);
|
|
29
|
+
this.streaming = false;
|
|
30
|
+
this._editing = false;
|
|
31
|
+
this._editContent = "";
|
|
32
|
+
__privateAdd(this, _refreshIcon, html`
|
|
33
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
34
|
+
<path
|
|
35
|
+
d="M17.65 6.35A7.96 7.96 0 0 0 12 4a8 8 0 0 0-8 8 8 8 0 0 0 8 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18a6 6 0 0 1-6-6 6 6 0 0 1 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z" />
|
|
36
|
+
</svg>
|
|
37
|
+
`);
|
|
38
|
+
__privateAdd(this, _copyIcon, html`
|
|
39
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
40
|
+
<path
|
|
41
|
+
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" />
|
|
42
|
+
</svg>
|
|
43
|
+
`);
|
|
44
|
+
__privateAdd(this, _editIcon, html`
|
|
45
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
46
|
+
<path
|
|
47
|
+
d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75z" />
|
|
48
|
+
</svg>
|
|
49
|
+
`);
|
|
23
50
|
__privateAdd(this, _messageContainer, html`
|
|
24
51
|
<div class="ai-message-container">
|
|
25
52
|
<span>
|
|
@@ -29,11 +56,162 @@ let AiUserMessageComponent = class extends LitElement {
|
|
|
29
56
|
`);
|
|
30
57
|
}
|
|
31
58
|
render() {
|
|
32
|
-
return html`
|
|
59
|
+
return html`
|
|
60
|
+
<div class="grid-container">${this._editing ? __privateGet(this, _AiUserMessageComponent_instances, editContainer_get) : __privateGet(this, _messageContainer)} ${__privateGet(this, _AiUserMessageComponent_instances, toolbar_get)}</div>
|
|
61
|
+
`;
|
|
33
62
|
}
|
|
34
63
|
};
|
|
64
|
+
_refreshIcon = /* @__PURE__ */ new WeakMap();
|
|
65
|
+
_copyIcon = /* @__PURE__ */ new WeakMap();
|
|
66
|
+
_editIcon = /* @__PURE__ */ new WeakMap();
|
|
35
67
|
_messageContainer = /* @__PURE__ */ new WeakMap();
|
|
68
|
+
_AiUserMessageComponent_instances = /* @__PURE__ */ new WeakSet();
|
|
69
|
+
formattedTime_get = function() {
|
|
70
|
+
if (!this.timestamp) {
|
|
71
|
+
return "";
|
|
72
|
+
}
|
|
73
|
+
return new Date(this.timestamp).toLocaleTimeString([], {
|
|
74
|
+
hour: "2-digit",
|
|
75
|
+
minute: "2-digit"
|
|
76
|
+
});
|
|
77
|
+
};
|
|
78
|
+
formattedFullDate_get = function() {
|
|
79
|
+
if (!this.timestamp) {
|
|
80
|
+
return "";
|
|
81
|
+
}
|
|
82
|
+
return new Intl.DateTimeFormat("en-US", {
|
|
83
|
+
year: "numeric",
|
|
84
|
+
month: "short",
|
|
85
|
+
day: "numeric",
|
|
86
|
+
hour: "numeric",
|
|
87
|
+
minute: "2-digit"
|
|
88
|
+
}).format(this.timestamp);
|
|
89
|
+
};
|
|
90
|
+
isSaveDisabled_get = function() {
|
|
91
|
+
const trimmed = this._editContent.trim();
|
|
92
|
+
return !trimmed || trimmed === this.content?.trim();
|
|
93
|
+
};
|
|
94
|
+
editContainer_get = function() {
|
|
95
|
+
return html`
|
|
96
|
+
<div class="edit-container">
|
|
97
|
+
<textarea class="edit-textarea" .value=${this._editContent} @input=${__privateMethod(this, _AiUserMessageComponent_instances, handleEditInput_fn)}></textarea>
|
|
98
|
+
<div class="edit-footer">
|
|
99
|
+
<button class="forge-button forge-button--outlined" @click=${__privateMethod(this, _AiUserMessageComponent_instances, handleCancel_fn)}>Cancel</button>
|
|
100
|
+
<button
|
|
101
|
+
class="forge-button forge-button--raised"
|
|
102
|
+
?disabled=${__privateGet(this, _AiUserMessageComponent_instances, isSaveDisabled_get)}
|
|
103
|
+
@click=${__privateMethod(this, _AiUserMessageComponent_instances, handleSave_fn)}>
|
|
104
|
+
Save
|
|
105
|
+
</button>
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
108
|
+
`;
|
|
109
|
+
};
|
|
110
|
+
toolbar_get = function() {
|
|
111
|
+
if (!this.messageId || this._editing) {
|
|
112
|
+
return nothing;
|
|
113
|
+
}
|
|
114
|
+
return html`
|
|
115
|
+
<div class="toolbar-container">
|
|
116
|
+
<span id="timestamp" class="timestamp">${__privateGet(this, _AiUserMessageComponent_instances, formattedTime_get)}</span>
|
|
117
|
+
<forge-ai-tooltip for="timestamp" placement="bottom">${__privateGet(this, _AiUserMessageComponent_instances, formattedFullDate_get)}</forge-ai-tooltip>
|
|
118
|
+
|
|
119
|
+
${when(
|
|
120
|
+
!this.streaming,
|
|
121
|
+
() => html`
|
|
122
|
+
<button
|
|
123
|
+
id="resend-btn"
|
|
124
|
+
aria-label="Resend message"
|
|
125
|
+
class="forge-icon-button forge-icon-button--small"
|
|
126
|
+
@click=${__privateMethod(this, _AiUserMessageComponent_instances, handleResend_fn)}>
|
|
127
|
+
${__privateGet(this, _refreshIcon)}
|
|
128
|
+
</button>
|
|
129
|
+
<forge-ai-tooltip for="resend-btn" placement="bottom">Resend</forge-ai-tooltip>
|
|
130
|
+
|
|
131
|
+
<button
|
|
132
|
+
id="edit-btn"
|
|
133
|
+
aria-label="Edit message"
|
|
134
|
+
class="forge-icon-button forge-icon-button--small"
|
|
135
|
+
@click=${__privateMethod(this, _AiUserMessageComponent_instances, handleEditClick_fn)}>
|
|
136
|
+
${__privateGet(this, _editIcon)}
|
|
137
|
+
</button>
|
|
138
|
+
<forge-ai-tooltip for="edit-btn" placement="bottom">Edit</forge-ai-tooltip>
|
|
139
|
+
`
|
|
140
|
+
)}
|
|
141
|
+
|
|
142
|
+
<button
|
|
143
|
+
id="copy-btn"
|
|
144
|
+
aria-label="Copy message"
|
|
145
|
+
class="forge-icon-button forge-icon-button--small"
|
|
146
|
+
@click=${__privateMethod(this, _AiUserMessageComponent_instances, handleCopy_fn)}>
|
|
147
|
+
${__privateGet(this, _copyIcon)}
|
|
148
|
+
</button>
|
|
149
|
+
<forge-ai-tooltip for="copy-btn" placement="bottom">Copy</forge-ai-tooltip>
|
|
150
|
+
</div>
|
|
151
|
+
`;
|
|
152
|
+
};
|
|
153
|
+
handleCopy_fn = function() {
|
|
154
|
+
this.dispatchEvent(
|
|
155
|
+
new CustomEvent("forge-ai-user-message-copy", {
|
|
156
|
+
detail: { messageId: this.messageId },
|
|
157
|
+
bubbles: true,
|
|
158
|
+
composed: true
|
|
159
|
+
})
|
|
160
|
+
);
|
|
161
|
+
};
|
|
162
|
+
handleResend_fn = function() {
|
|
163
|
+
this.dispatchEvent(
|
|
164
|
+
new CustomEvent("forge-ai-user-message-resend", {
|
|
165
|
+
detail: { messageId: this.messageId },
|
|
166
|
+
bubbles: true,
|
|
167
|
+
composed: true
|
|
168
|
+
})
|
|
169
|
+
);
|
|
170
|
+
};
|
|
171
|
+
handleEditClick_fn = function() {
|
|
172
|
+
this._editContent = this.content ?? "";
|
|
173
|
+
this._editing = true;
|
|
174
|
+
};
|
|
175
|
+
handleEditInput_fn = function(evt) {
|
|
176
|
+
this._editContent = evt.target.value;
|
|
177
|
+
};
|
|
178
|
+
handleCancel_fn = function() {
|
|
179
|
+
this._editing = false;
|
|
180
|
+
this._editContent = "";
|
|
181
|
+
};
|
|
182
|
+
handleSave_fn = function() {
|
|
183
|
+
if (__privateGet(this, _AiUserMessageComponent_instances, isSaveDisabled_get)) {
|
|
184
|
+
return;
|
|
185
|
+
}
|
|
186
|
+
this.dispatchEvent(
|
|
187
|
+
new CustomEvent("forge-ai-user-message-edit", {
|
|
188
|
+
detail: { messageId: this.messageId, content: this._editContent.trim() },
|
|
189
|
+
bubbles: true,
|
|
190
|
+
composed: true
|
|
191
|
+
})
|
|
192
|
+
);
|
|
193
|
+
this._editing = false;
|
|
194
|
+
this._editContent = "";
|
|
195
|
+
};
|
|
36
196
|
AiUserMessageComponent.styles = unsafeCSS(styles);
|
|
197
|
+
__decorateClass([
|
|
198
|
+
property({ attribute: false })
|
|
199
|
+
], AiUserMessageComponent.prototype, "timestamp", 2);
|
|
200
|
+
__decorateClass([
|
|
201
|
+
property({ attribute: "message-id" })
|
|
202
|
+
], AiUserMessageComponent.prototype, "messageId", 2);
|
|
203
|
+
__decorateClass([
|
|
204
|
+
property({ type: Boolean })
|
|
205
|
+
], AiUserMessageComponent.prototype, "streaming", 2);
|
|
206
|
+
__decorateClass([
|
|
207
|
+
property({ attribute: false })
|
|
208
|
+
], AiUserMessageComponent.prototype, "content", 2);
|
|
209
|
+
__decorateClass([
|
|
210
|
+
state()
|
|
211
|
+
], AiUserMessageComponent.prototype, "_editing", 2);
|
|
212
|
+
__decorateClass([
|
|
213
|
+
state()
|
|
214
|
+
], AiUserMessageComponent.prototype, "_editContent", 2);
|
|
37
215
|
AiUserMessageComponent = __decorateClass([
|
|
38
216
|
customElement(AiUserMessageComponentTagName)
|
|
39
217
|
], AiUserMessageComponent);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const styles = '/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/* prettier-ignore */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n:host {\n display: inline-block;\n box-sizing: border-box;\n}\n\n.grid-container {\n display: grid;\n grid-template-rows: 1fr;\n margin-inline-start: var(--forge-spacing-xxlarge, 48px);\n}\n\n.ai-message-container {\n padding-block: var(--forge-spacing-xsmall, 8px);\n padding-inline: var(--forge-spacing-medium, 16px);\n background-color: var(--forge-theme-surface, #ffffff);\n border: 1px solid var(--forge-theme-outline, #e0e0e0);\n border-radius: var(--forge-spacing-xsmall, 8px);\n border-start-end-radius: 0;\n margin-inline-start: auto;\n}\n\nspan {\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-on-surface, #000000);\n overflow-wrap: break-word;\n}\n\n::slotted(p:first-child) {\n margin-block-start: 0;\n}\n\n::slotted(p:last-child) {\n margin-block-end: 0;\n}';
|
|
1
|
+
const styles = '/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/* prettier-ignore */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/* prettier-ignore */\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: transparent;\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,\n.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,\n: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/* prettier-ignore */\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: transparent;\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: inline-block;\n box-sizing: border-box;\n}\n\n.grid-container {\n display: grid;\n grid-template-rows: 1fr;\n margin-inline-start: var(--forge-spacing-xxlarge, 48px);\n position: relative;\n}\n\n.ai-message-container {\n padding-block: var(--forge-spacing-xsmall, 8px);\n padding-inline: var(--forge-spacing-medium, 16px);\n background-color: var(--forge-theme-surface-container-minimum, #f5f5f5);\n color: var(--forge-theme-on-surface, #000000);\n border-radius: var(--forge-spacing-xsmall, 8px);\n border-start-end-radius: 0;\n margin-inline-start: auto;\n}\n\nspan {\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-on-surface, #000000);\n overflow-wrap: break-word;\n}\n\n.toolbar-container {\n position: absolute;\n bottom: -28px;\n right: 0;\n transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;\n display: flex;\n align-items: center;\n gap: var(--forge-spacing-xxsmall, 4px);\n opacity: 0;\n transform: translateY(-8px);\n pointer-events: none;\n z-index: 1;\n}\n.toolbar-container .forge-icon-button {\n color: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));\n}\n.toolbar-container .forge-icon-button:hover {\n color: var(--forge-theme-text-high, rgba(0, 0, 0, 0.87));\n}\n\n.grid-container:hover .toolbar-container,\n.grid-container .toolbar-container:focus-within {\n opacity: 1;\n transform: translateY(0);\n pointer-events: auto;\n}\n\n.grid-container::after {\n content: "";\n position: absolute;\n bottom: -40px;\n left: 0;\n right: 0;\n height: 40px;\n}\n\n.timestamp {\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 color: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));\n padding-inline: var(--forge-spacing-xxsmall, 4px);\n}\n\n.edit-container {\n display: flex;\n flex-direction: column;\n gap: var(--forge-spacing-small, 12px);\n padding: var(--forge-spacing-medium, 16px);\n background-color: var(--forge-theme-surface-container-minimum, #f5f5f5);\n border-radius: var(--forge-spacing-xsmall, 8px);\n border-start-end-radius: 0;\n}\n\n.edit-textarea {\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.edit-textarea::-webkit-scrollbar {\n height: var(--forge-scrollbar-height, 16px);\n width: var(--forge-scrollbar-width, 16px);\n}\n.edit-textarea::-webkit-scrollbar-track {\n background-color: var(--forge-scrollbar-track-container, var(--forge-theme-surface-container-low, #ebebeb));\n}\n.edit-textarea::-webkit-scrollbar-track:hover {\n background-color: var(--forge-scrollbar-track-container-hover, var(--forge-theme-surface-container-low, #ebebeb));\n}\n.edit-textarea::-webkit-scrollbar-corner {\n background-color: var(--forge-scrollbar-track-container, var(--forge-theme-surface-container-low, #ebebeb));\n}\n.edit-textarea::-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.edit-textarea::-webkit-scrollbar-thumb:hover {\n background-color: var(--forge-scrollbar-thumb-container-hover, var(--forge-theme-surface-container-high, #9e9e9e));\n}\n.edit-textarea {\n width: 100%;\n min-height: 60px;\n max-height: 150px;\n field-sizing: content;\n resize: none;\n border: 1px solid var(--forge-theme-outline, #e0e0e0);\n border-radius: var(--forge-spacing-xxsmall, 4px);\n padding: var(--forge-spacing-small, 12px);\n background-color: var(--forge-theme-surface, #ffffff);\n color: var(--forge-theme-on-surface, #000000);\n outline: none;\n box-sizing: border-box;\n}\n.edit-textarea:focus {\n border-color: var(--forge-theme-primary, #3f51b5);\n}\n\n.edit-footer {\n display: flex;\n justify-content: flex-end;\n gap: var(--forge-spacing-small, 12px);\n}';
|
|
2
2
|
export {
|
|
3
3
|
styles as default
|
|
4
4
|
};
|
|
@@ -2,6 +2,7 @@ import { unsafeCSS, LitElement, html } from "lit";
|
|
|
2
2
|
import { state, customElement } from "lit/decorators.js";
|
|
3
3
|
import { classMap } from "lit/directives/class-map.js";
|
|
4
4
|
import styles from "./ai-voice-input.scss.mjs";
|
|
5
|
+
import "../core/tooltip/tooltip.mjs";
|
|
5
6
|
var __defProp = Object.defineProperty;
|
|
6
7
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
7
8
|
var __decorateClass = (decorators, target, key, kind) => {
|
|
@@ -80,6 +81,7 @@ let AiVoiceInputComponent = class extends LitElement {
|
|
|
80
81
|
return html`
|
|
81
82
|
<div class="ai-voice-input">
|
|
82
83
|
<button
|
|
84
|
+
id="voice-btn"
|
|
83
85
|
class=${classes}
|
|
84
86
|
@click=${this._toggleRecording}
|
|
85
87
|
aria-label=${this._isRecording ? "Stop recording" : "Start recording"}
|
|
@@ -90,6 +92,9 @@ let AiVoiceInputComponent = class extends LitElement {
|
|
|
90
92
|
d="M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3m5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72z" />
|
|
91
93
|
</svg>
|
|
92
94
|
</button>
|
|
95
|
+
<forge-ai-tooltip for="voice-btn" placement="top"
|
|
96
|
+
>${this._isRecording ? "Stop recording" : "Dictate"}</forge-ai-tooltip
|
|
97
|
+
>
|
|
93
98
|
</div>
|
|
94
99
|
`;
|
|
95
100
|
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ToolDefinition } from '../../ai-chatbot';
|
|
2
|
+
export declare const CONFIRM_TOOL_CALL_NAME = "confirmToolCall";
|
|
3
|
+
export interface ConfirmActionToolArgs {
|
|
4
|
+
action: string;
|
|
5
|
+
}
|
|
6
|
+
export interface ConfirmActionToolResult {
|
|
7
|
+
status: 'confirmed' | 'denied';
|
|
8
|
+
action: string;
|
|
9
|
+
}
|
|
10
|
+
export declare const confirmActionTool: ToolDefinition<ConfirmActionToolArgs>;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
const CONFIRM_TOOL_CALL_NAME = "confirmToolCall";
|
|
2
|
+
const confirmActionTool = {
|
|
3
|
+
name: CONFIRM_TOOL_CALL_NAME,
|
|
4
|
+
displayName: "Confirm Action",
|
|
5
|
+
description: "Request user confirmation before executing a tool. The user will see a prompt with the action description and can confirm or deny. Use this tool before executing ANY other tools.",
|
|
6
|
+
parameters: {
|
|
7
|
+
type: "object",
|
|
8
|
+
properties: {
|
|
9
|
+
action: {
|
|
10
|
+
type: "string",
|
|
11
|
+
description: "A clear, user-friendly description of the action to be confirmed"
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
required: ["action"]
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
export {
|
|
18
|
+
CONFIRM_TOOL_CALL_NAME,
|
|
19
|
+
confirmActionTool
|
|
20
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './ai-confirm-tool-call-definition';
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { unsafeCSS, LitElement, html } from "lit";
|
|
2
2
|
import { property, state, customElement } from "lit/decorators.js";
|
|
3
3
|
import styles from "./ai-paginator.scss.mjs";
|
|
4
|
+
import "../../core/tooltip/tooltip.mjs";
|
|
4
5
|
var __defProp = Object.defineProperty;
|
|
5
6
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
7
|
var __typeError = (msg) => {
|
|
@@ -37,6 +38,7 @@ let AiPaginator = class extends LitElement {
|
|
|
37
38
|
<div class="paginator-container">
|
|
38
39
|
<div class="paginator">
|
|
39
40
|
<button
|
|
41
|
+
id="prev-btn"
|
|
40
42
|
aria-label="View previous page"
|
|
41
43
|
class="forge-icon-button forge-icon-button--medium"
|
|
42
44
|
?disabled=${this._isPreviousDisabled}
|
|
@@ -45,8 +47,10 @@ let AiPaginator = class extends LitElement {
|
|
|
45
47
|
<path d="M15.41 16.58 10.83 12l4.58-4.59L14 6l-6 6 6 6z" />
|
|
46
48
|
</svg>
|
|
47
49
|
</button>
|
|
50
|
+
<forge-ai-tooltip for="prev-btn" placement="bottom">Previous</forge-ai-tooltip>
|
|
48
51
|
<span class="label">${this.currentPage} of ${this.totalPages}</span>
|
|
49
52
|
<button
|
|
53
|
+
id="next-btn"
|
|
50
54
|
aria-label="View next page"
|
|
51
55
|
class="forge-icon-button forge-icon-button--medium"
|
|
52
56
|
?disabled=${this._isNextDisabled}
|
|
@@ -55,6 +59,7 @@ let AiPaginator = class extends LitElement {
|
|
|
55
59
|
<path d="M8.59 16.58 13.17 12 8.59 7.41 10 6l6 6-6 6z" />
|
|
56
60
|
</svg>
|
|
57
61
|
</button>
|
|
62
|
+
<forge-ai-tooltip for="next-btn" placement="bottom">Next</forge-ai-tooltip>
|
|
58
63
|
</div>
|
|
59
64
|
</div>
|
|
60
65
|
`;
|