@tylertech/forge-ai 0.10.0 → 0.11.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 +4036 -2443
- package/dist/ai-chatbot/ai-chatbot-base.d.ts +92 -0
- package/dist/ai-chatbot/ai-chatbot-base.mjs +467 -0
- package/dist/ai-chatbot/ai-chatbot.d.ts +26 -75
- package/dist/ai-chatbot/ai-chatbot.mjs +51 -808
- package/dist/ai-chatbot/index.d.ts +3 -2
- package/dist/ai-chatbot/index.mjs +2 -0
- package/dist/ai-chatbot/message-state-controller.mjs +1 -1
- package/dist/ai-chatbot-launcher/ai-chatbot-launcher.d.ts +71 -0
- package/dist/ai-chatbot-launcher/ai-chatbot-launcher.mjs +288 -0
- package/dist/ai-chatbot-launcher/ai-chatbot-launcher.scss.mjs +4 -0
- package/dist/ai-chatbot-launcher/index.d.ts +1 -0
- package/dist/ai-chatbot-launcher/index.mjs +5 -0
- package/dist/ai-embedded-chat/ai-embedded-chat.mjs +1 -0
- package/dist/ai-empty-state/ai-empty-state.scss.mjs +1 -1
- package/dist/ai-message-thread/ai-message-thread.d.ts +2 -0
- package/dist/ai-message-thread/ai-message-thread.mjs +1 -1
- package/dist/ai-message-thread/ai-message-thread.scss.mjs +1 -1
- package/dist/ai-prompt/ai-prompt.scss.mjs +1 -1
- package/dist/core/chatbot-core-controller.d.ts +51 -0
- package/dist/core/chatbot-core-controller.mjs +400 -0
- package/dist/core/index.d.ts +1 -0
- package/dist/core/index.mjs +2 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.mjs +5 -0
- package/dist/tools/ai-data-table/ai-data-table-definition.mjs +1 -0
- package/package.json +24 -24
|
@@ -1,9 +1,10 @@
|
|
|
1
|
+
export { AiChatbotBase, type FeatureToggle } from './ai-chatbot-base.js';
|
|
1
2
|
export { AiChatbotComponent, AiChatbotComponentTagName } from './ai-chatbot.js';
|
|
2
|
-
export type { ForgeAiChatbotMessageEventData, ForgeAiChatbotToolCallEventData, ForgeAiChatbotErrorEventData, ForgeAiChatbotResponseFeedbackEventData, ForgeAiChatbotAgentChangeEventData,
|
|
3
|
+
export type { ForgeAiChatbotMessageEventData, ForgeAiChatbotToolCallEventData, ForgeAiChatbotErrorEventData, ForgeAiChatbotResponseFeedbackEventData, ForgeAiChatbotAgentChangeEventData, ForgeAiChatbotFileSelectEventData, ForgeAiChatbotFileRemoveEventData } from './ai-chatbot.js';
|
|
3
4
|
export { AiChatbotToolCallComponent, AiChatbotToolCallComponentTagName } from './ai-chatbot-tool-call.js';
|
|
4
5
|
export type { Suggestion } from '../ai-suggestions/index.js';
|
|
5
6
|
export { AgentAdapter, type MessageStartEvent, type MessageDeltaEvent, type MessageEndEvent, type ToolCallEvent, type ToolCallStartEvent, type ToolCallArgsEvent, type ToolCallEndEvent, type FileUploadEvent, type FileRemoveEvent, type AdapterState, type ErrorEvent, type CustomAgentEvent, type RawAgentEvent, type RunStartedAgentEvent, type StepStartedAgentEvent, type StepFinishedAgentEvent, type StateSnapshotAgentEvent, type StateDeltaAgentEvent, type ActivitySnapshotAgentEvent, type ActivityDeltaAgentEvent } from './agent-adapter.js';
|
|
6
|
-
export type { Agent, ChatMessage, ToolDefinition, ToolCall, ToolRenderer, IToolRenderer, HandlerContext, FileAttachment, UploadedFileMetadata, FileUploadCallbacks, FileUploadHandler, FileRemoveCallbacks,
|
|
7
|
+
export type { Agent, ChatMessage, ToolDefinition, ToolCall, ToolRenderer, IToolRenderer, HandlerContext, FileAttachment, UploadedFileMetadata, FileUploadCallbacks, FileUploadHandler, FileRemoveCallbacks, ThreadState, FeedbackType, ResponseFeedback } from './types.js';
|
|
7
8
|
export * from './ag-ui-adapter.js';
|
|
8
9
|
export * from './http-agent-with-credentials.js';
|
|
9
10
|
export * from './event-emitter.js';
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { AiChatbotBase } from "./ai-chatbot-base.mjs";
|
|
1
2
|
import { AiChatbotComponent, AiChatbotComponentTagName } from "./ai-chatbot.mjs";
|
|
2
3
|
import { AiChatbotToolCallComponent, AiChatbotToolCallComponentTagName } from "./ai-chatbot-tool-call.mjs";
|
|
3
4
|
import { AgentAdapter } from "./agent-adapter.mjs";
|
|
@@ -14,6 +15,7 @@ export {
|
|
|
14
15
|
AgUiAdapter,
|
|
15
16
|
AgentAdapter,
|
|
16
17
|
AgentRunner,
|
|
18
|
+
AiChatbotBase,
|
|
17
19
|
AiChatbotComponent,
|
|
18
20
|
AiChatbotComponentTagName,
|
|
19
21
|
AiChatbotToolCallComponent,
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import { TemplateResult } from 'lit';
|
|
2
|
+
import { AiMessageThreadComponent } from '../ai-message-thread';
|
|
3
|
+
import { AiPromptComponent, ForgeAiPromptSendEventData } from '../ai-prompt';
|
|
4
|
+
import { ForgeAiSuggestionsEventData } from '../ai-suggestions';
|
|
5
|
+
import { AiChatbotBase } from '../ai-chatbot/ai-chatbot-base.js';
|
|
6
|
+
import { ChatMessage, ThreadState } from '../ai-chatbot/types.js';
|
|
7
|
+
export type LauncherViewState = 'welcome' | 'conversation';
|
|
8
|
+
declare global {
|
|
9
|
+
interface HTMLElementTagNameMap {
|
|
10
|
+
'forge-ai-chatbot-launcher': AiChatbotLauncherComponent;
|
|
11
|
+
}
|
|
12
|
+
interface HTMLElementEventMap {
|
|
13
|
+
'forge-ai-chatbot-launcher-conversation-start': CustomEvent<void>;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
export declare const AiChatbotLauncherComponentTagName: keyof HTMLElementTagNameMap;
|
|
17
|
+
/**
|
|
18
|
+
* @tag forge-ai-chatbot-launcher
|
|
19
|
+
*
|
|
20
|
+
* @summary An embedded AI chatbot component with a welcome view that transitions to conversation mode.
|
|
21
|
+
*
|
|
22
|
+
* @description
|
|
23
|
+
* The AI Chatbot Launcher provides a page-embedded chat experience with a centered welcome/hero view
|
|
24
|
+
* that animates into a full conversation interface when the user sends their first message.
|
|
25
|
+
* In conversation mode, a header is displayed with options for clear, export, and agent selection.
|
|
26
|
+
*
|
|
27
|
+
* @slot icon - Slot for custom icon (used in both welcome view and conversation header)
|
|
28
|
+
* @slot heading - Slot for custom heading content
|
|
29
|
+
* @slot description - Slot for custom description/welcome message below the title
|
|
30
|
+
*
|
|
31
|
+
* @property {string} titleText - The title text to display in the welcome view and header (default: 'AI Assistant')
|
|
32
|
+
* @property {string} descriptionText - The description text displayed below the title in the welcome view.
|
|
33
|
+
* @property {HeadingLevel} headingLevel - Controls the heading level for the title content (default: 2)
|
|
34
|
+
* @property {string | null | undefined} disclaimerText - The disclaimer text to display below the prompt.
|
|
35
|
+
* @property {AgentInfo} agentInfo - Agent metadata for info dialog
|
|
36
|
+
* @property {Agent[]} agents - List of available agents for selector
|
|
37
|
+
* @property {string} selectedAgentId - Currently selected agent ID
|
|
38
|
+
*
|
|
39
|
+
* @cssproperty --forge-ai-chatbot-launcher-icon-color - The fill color for the AI icon.
|
|
40
|
+
*
|
|
41
|
+
* @event {CustomEvent<void>} forge-ai-chatbot-connected - Fired when adapter connects
|
|
42
|
+
* @event {CustomEvent<ForgeAiChatbotMessageEventData>} forge-ai-chatbot-message-sent - Fired when user sends a message
|
|
43
|
+
* @event {CustomEvent<ForgeAiChatbotMessageEventData>} forge-ai-chatbot-message-received - Fired when assistant message is complete
|
|
44
|
+
* @event {CustomEvent<ForgeAiChatbotToolCallEventData>} forge-ai-chatbot-tool-call - Fired when a tool needs to be executed
|
|
45
|
+
* @event {CustomEvent<ForgeAiChatbotErrorEventData>} forge-ai-chatbot-error - Fired when an error occurs
|
|
46
|
+
* @event {CustomEvent<void>} forge-ai-chatbot-launcher-conversation-start - Fired when transitioning from welcome to conversation view
|
|
47
|
+
* @event {CustomEvent<ForgeAiChatbotResponseFeedbackEventData>} forge-ai-chatbot-response-feedback - Fired when user provides feedback on a response
|
|
48
|
+
* @event {CustomEvent<void>} forge-ai-chatbot-info - Fired when header info option is selected
|
|
49
|
+
* @event {CustomEvent<ForgeAiChatbotAgentChangeEventData>} forge-ai-chatbot-agent-change - Fired when agent selection changes
|
|
50
|
+
*/
|
|
51
|
+
export declare class AiChatbotLauncherComponent extends AiChatbotBase {
|
|
52
|
+
#private;
|
|
53
|
+
static styles: import('lit').CSSResult;
|
|
54
|
+
placeholder: string;
|
|
55
|
+
descriptionText?: string;
|
|
56
|
+
private _viewState;
|
|
57
|
+
protected _messageThreadRef: import('lit/directives/ref').Ref<AiMessageThreadComponent>;
|
|
58
|
+
protected _promptRef: import('lit/directives/ref').Ref<AiPromptComponent>;
|
|
59
|
+
constructor();
|
|
60
|
+
protected _onConnected(): void;
|
|
61
|
+
startConversation(): void;
|
|
62
|
+
protected _handleInfo(): void;
|
|
63
|
+
protected _handleSend(evt: CustomEvent<ForgeAiPromptSendEventData>): Promise<void>;
|
|
64
|
+
protected _handleSuggestionSelect(evt: CustomEvent<ForgeAiSuggestionsEventData>): Promise<void>;
|
|
65
|
+
clearMessages(): boolean;
|
|
66
|
+
setMessages(messages: ChatMessage[]): void;
|
|
67
|
+
sendMessage(content: string, files?: File[]): Promise<void>;
|
|
68
|
+
setThreadState(threadState: ThreadState): Promise<void>;
|
|
69
|
+
get viewState(): LauncherViewState;
|
|
70
|
+
render(): TemplateResult;
|
|
71
|
+
}
|
|
@@ -0,0 +1,288 @@
|
|
|
1
|
+
import { unsafeCSS, html, nothing } from "lit";
|
|
2
|
+
import { property, state, customElement } from "lit/decorators.js";
|
|
3
|
+
import { createRef, ref } from "lit/directives/ref.js";
|
|
4
|
+
import { when } from "lit/directives/when.js";
|
|
5
|
+
import { AiChatbotBase } from "../ai-chatbot/ai-chatbot-base.mjs";
|
|
6
|
+
import "../ai-attachment/ai-attachment.mjs";
|
|
7
|
+
import "../ai-chat-header/ai-chat-header.mjs";
|
|
8
|
+
import "../ai-file-picker/ai-file-picker.mjs";
|
|
9
|
+
import "../ai-icon/ai-icon.mjs";
|
|
10
|
+
import "../ai-message-thread/ai-message-thread.mjs";
|
|
11
|
+
import "../ai-prompt/ai-prompt.mjs";
|
|
12
|
+
import "../ai-suggestions/ai-suggestions.mjs";
|
|
13
|
+
import "../ai-voice-input/ai-voice-input.mjs";
|
|
14
|
+
import "../ai-gradient-container/ai-gradient-container.mjs";
|
|
15
|
+
import styles from "./ai-chatbot-launcher.scss.mjs";
|
|
16
|
+
var __defProp = Object.defineProperty;
|
|
17
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
18
|
+
var __typeError = (msg) => {
|
|
19
|
+
throw TypeError(msg);
|
|
20
|
+
};
|
|
21
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
22
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
23
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
24
|
+
if (decorator = decorators[i])
|
|
25
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
26
|
+
if (kind && result) __defProp(target, key, result);
|
|
27
|
+
return result;
|
|
28
|
+
};
|
|
29
|
+
var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
|
|
30
|
+
var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
|
|
31
|
+
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);
|
|
32
|
+
var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
|
|
33
|
+
var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
|
|
34
|
+
var _headerRef, _internals, _AiChatbotLauncherComponent_instances, transitionToConversation_fn, commitConversationTransition_fn, transitionToWelcome_fn, handleHeaderClear_fn, handleHeaderInfo_fn, headingElement_get, sessionFilesTemplate_get, promptTemplate_get, welcomeTemplate_get, conversationTemplate_get;
|
|
35
|
+
const AiChatbotLauncherComponentTagName = "forge-ai-chatbot-launcher";
|
|
36
|
+
let AiChatbotLauncherComponent = class extends AiChatbotBase {
|
|
37
|
+
constructor() {
|
|
38
|
+
super();
|
|
39
|
+
__privateAdd(this, _AiChatbotLauncherComponent_instances);
|
|
40
|
+
this.placeholder = "How can I help you today?";
|
|
41
|
+
this._viewState = "welcome";
|
|
42
|
+
this._messageThreadRef = createRef();
|
|
43
|
+
this._promptRef = createRef();
|
|
44
|
+
__privateAdd(this, _headerRef, createRef());
|
|
45
|
+
__privateAdd(this, _internals);
|
|
46
|
+
__privateSet(this, _internals, this.attachInternals());
|
|
47
|
+
}
|
|
48
|
+
_onConnected() {
|
|
49
|
+
__privateGet(this, _internals).states.add("welcome");
|
|
50
|
+
}
|
|
51
|
+
startConversation() {
|
|
52
|
+
__privateMethod(this, _AiChatbotLauncherComponent_instances, commitConversationTransition_fn).call(this);
|
|
53
|
+
}
|
|
54
|
+
_handleInfo() {
|
|
55
|
+
const header = __privateGet(this, _headerRef).value;
|
|
56
|
+
header?.showAgentInfo();
|
|
57
|
+
super._handleInfo();
|
|
58
|
+
}
|
|
59
|
+
async _handleSend(evt) {
|
|
60
|
+
__privateMethod(this, _AiChatbotLauncherComponent_instances, transitionToConversation_fn).call(this);
|
|
61
|
+
await super._handleSend(evt);
|
|
62
|
+
}
|
|
63
|
+
async _handleSuggestionSelect(evt) {
|
|
64
|
+
__privateMethod(this, _AiChatbotLauncherComponent_instances, transitionToConversation_fn).call(this);
|
|
65
|
+
await super._handleSuggestionSelect(evt);
|
|
66
|
+
}
|
|
67
|
+
clearMessages() {
|
|
68
|
+
if (super.clearMessages()) {
|
|
69
|
+
__privateMethod(this, _AiChatbotLauncherComponent_instances, transitionToWelcome_fn).call(this);
|
|
70
|
+
return true;
|
|
71
|
+
}
|
|
72
|
+
return false;
|
|
73
|
+
}
|
|
74
|
+
setMessages(messages) {
|
|
75
|
+
super.setMessages(messages);
|
|
76
|
+
if (messages.length > 0) {
|
|
77
|
+
__privateMethod(this, _AiChatbotLauncherComponent_instances, transitionToConversation_fn).call(this);
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
async sendMessage(content, files) {
|
|
81
|
+
__privateMethod(this, _AiChatbotLauncherComponent_instances, transitionToConversation_fn).call(this);
|
|
82
|
+
await super.sendMessage(content, files);
|
|
83
|
+
}
|
|
84
|
+
async setThreadState(threadState) {
|
|
85
|
+
await super.setThreadState(threadState);
|
|
86
|
+
if (threadState.messages.length > 0) {
|
|
87
|
+
__privateMethod(this, _AiChatbotLauncherComponent_instances, transitionToConversation_fn).call(this);
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
get viewState() {
|
|
91
|
+
return this._viewState;
|
|
92
|
+
}
|
|
93
|
+
render() {
|
|
94
|
+
return html`
|
|
95
|
+
<div class="launcher" role="region" aria-label="AI chatbot launcher" aria-busy=${this._isStreaming}>
|
|
96
|
+
${this._viewState === "welcome" ? __privateGet(this, _AiChatbotLauncherComponent_instances, welcomeTemplate_get) : __privateGet(this, _AiChatbotLauncherComponent_instances, conversationTemplate_get)}
|
|
97
|
+
</div>
|
|
98
|
+
`;
|
|
99
|
+
}
|
|
100
|
+
};
|
|
101
|
+
_headerRef = /* @__PURE__ */ new WeakMap();
|
|
102
|
+
_internals = /* @__PURE__ */ new WeakMap();
|
|
103
|
+
_AiChatbotLauncherComponent_instances = /* @__PURE__ */ new WeakSet();
|
|
104
|
+
transitionToConversation_fn = function() {
|
|
105
|
+
if (this._viewState === "conversation") {
|
|
106
|
+
return;
|
|
107
|
+
}
|
|
108
|
+
const event = this._dispatchHostEvent({
|
|
109
|
+
type: "forge-ai-chatbot-launcher-conversation-start",
|
|
110
|
+
cancelable: true
|
|
111
|
+
});
|
|
112
|
+
if (event.defaultPrevented) {
|
|
113
|
+
return;
|
|
114
|
+
}
|
|
115
|
+
__privateMethod(this, _AiChatbotLauncherComponent_instances, commitConversationTransition_fn).call(this);
|
|
116
|
+
};
|
|
117
|
+
commitConversationTransition_fn = function() {
|
|
118
|
+
if (this._viewState === "conversation") {
|
|
119
|
+
return;
|
|
120
|
+
}
|
|
121
|
+
this._viewState = "conversation";
|
|
122
|
+
__privateGet(this, _internals).states.delete("welcome");
|
|
123
|
+
__privateGet(this, _internals).states.add("conversation");
|
|
124
|
+
};
|
|
125
|
+
transitionToWelcome_fn = function() {
|
|
126
|
+
if (this._viewState === "welcome") {
|
|
127
|
+
return;
|
|
128
|
+
}
|
|
129
|
+
this._viewState = "welcome";
|
|
130
|
+
__privateGet(this, _internals).states.delete("conversation");
|
|
131
|
+
__privateGet(this, _internals).states.add("welcome");
|
|
132
|
+
};
|
|
133
|
+
handleHeaderClear_fn = function() {
|
|
134
|
+
this.clearMessages();
|
|
135
|
+
};
|
|
136
|
+
handleHeaderInfo_fn = function() {
|
|
137
|
+
this._handleInfo();
|
|
138
|
+
};
|
|
139
|
+
headingElement_get = function() {
|
|
140
|
+
switch (this.headingLevel) {
|
|
141
|
+
case 1:
|
|
142
|
+
return html`<h1 class="title"><slot name="heading">${this.titleText}</slot></h1>`;
|
|
143
|
+
case 2:
|
|
144
|
+
return html`<h2 class="title"><slot name="heading">${this.titleText}</slot></h2>`;
|
|
145
|
+
case 3:
|
|
146
|
+
return html`<h3 class="title"><slot name="heading">${this.titleText}</slot></h3>`;
|
|
147
|
+
case 4:
|
|
148
|
+
return html`<h4 class="title"><slot name="heading">${this.titleText}</slot></h4>`;
|
|
149
|
+
case 5:
|
|
150
|
+
return html`<h5 class="title"><slot name="heading">${this.titleText}</slot></h5>`;
|
|
151
|
+
case 6:
|
|
152
|
+
return html`<h6 class="title"><slot name="heading">${this.titleText}</slot></h6>`;
|
|
153
|
+
default:
|
|
154
|
+
return html`<h2 class="title"><slot name="heading">${this.titleText}</slot></h2>`;
|
|
155
|
+
}
|
|
156
|
+
};
|
|
157
|
+
sessionFilesTemplate_get = function() {
|
|
158
|
+
const content = this._sessionFilesTemplate;
|
|
159
|
+
if (content === nothing) {
|
|
160
|
+
return nothing;
|
|
161
|
+
}
|
|
162
|
+
return html`<div class="session-files">${content}</div>`;
|
|
163
|
+
};
|
|
164
|
+
promptTemplate_get = function() {
|
|
165
|
+
const isUploading = this._isUploading;
|
|
166
|
+
return html`
|
|
167
|
+
<forge-ai-prompt
|
|
168
|
+
${ref(this._promptRef)}
|
|
169
|
+
.placeholder=${this.placeholder}
|
|
170
|
+
.running=${this._isStreaming || isUploading}
|
|
171
|
+
.slashCommands=${this._slashCommands}
|
|
172
|
+
?disabled=${isUploading}
|
|
173
|
+
?debug-mode=${this.debugMode}
|
|
174
|
+
@forge-ai-prompt-send=${this._handleSend}
|
|
175
|
+
@forge-ai-prompt-stop=${this._handleStop}
|
|
176
|
+
@forge-ai-prompt-cancel=${this._handleCancel}
|
|
177
|
+
@forge-ai-prompt-debug-toggle=${this._handleDebugToggle}
|
|
178
|
+
@forge-ai-prompt-command=${this._handleSlashCommand}>
|
|
179
|
+
${when(
|
|
180
|
+
this.fileUpload === "on",
|
|
181
|
+
() => html`
|
|
182
|
+
<forge-ai-file-picker
|
|
183
|
+
slot="actions-start"
|
|
184
|
+
variant="icon-button"
|
|
185
|
+
multiple
|
|
186
|
+
?disabled=${isUploading}
|
|
187
|
+
.selectedFiles=${this._coreController?.pendingAttachments.map((a) => a.filename) ?? []}
|
|
188
|
+
@forge-ai-file-picker-change=${this._handleFileSelect}
|
|
189
|
+
@forge-ai-file-picker-error=${this._handleFileError}>
|
|
190
|
+
</forge-ai-file-picker>
|
|
191
|
+
`
|
|
192
|
+
)}
|
|
193
|
+
${when(
|
|
194
|
+
this.voiceInput === "on",
|
|
195
|
+
() => html`
|
|
196
|
+
<forge-ai-voice-input slot="actions-end" @forge-ai-voice-input-result=${this._handleVoiceInputResult}>
|
|
197
|
+
</forge-ai-voice-input>
|
|
198
|
+
`
|
|
199
|
+
)}
|
|
200
|
+
</forge-ai-prompt>
|
|
201
|
+
`;
|
|
202
|
+
};
|
|
203
|
+
welcomeTemplate_get = function() {
|
|
204
|
+
return html`
|
|
205
|
+
<div class="welcome">
|
|
206
|
+
<div class="welcome-header">
|
|
207
|
+
<slot name="icon">
|
|
208
|
+
<forge-ai-icon class="icon"></forge-ai-icon>
|
|
209
|
+
</slot>
|
|
210
|
+
${__privateGet(this, _AiChatbotLauncherComponent_instances, headingElement_get)}
|
|
211
|
+
</div>
|
|
212
|
+
<div class="description"><slot name="description">${this.descriptionText}</slot></div>
|
|
213
|
+
<forge-ai-gradient-container class="prompt-container" variant="medium"
|
|
214
|
+
>${__privateGet(this, _AiChatbotLauncherComponent_instances, promptTemplate_get)}</forge-ai-gradient-container
|
|
215
|
+
>
|
|
216
|
+
${when(this.disclaimerText, () => html`<div class="disclaimer">${this.disclaimerText}</div>`)}
|
|
217
|
+
${when(
|
|
218
|
+
this.suggestions?.length,
|
|
219
|
+
() => html`
|
|
220
|
+
<div class="welcome-suggestions">
|
|
221
|
+
<forge-ai-suggestions
|
|
222
|
+
variant="block"
|
|
223
|
+
.suggestions=${this.suggestions ?? []}
|
|
224
|
+
@forge-ai-suggestions-select=${this._handleSuggestionSelect}>
|
|
225
|
+
</forge-ai-suggestions>
|
|
226
|
+
</div>
|
|
227
|
+
`
|
|
228
|
+
)}
|
|
229
|
+
</div>
|
|
230
|
+
`;
|
|
231
|
+
};
|
|
232
|
+
conversationTemplate_get = function() {
|
|
233
|
+
return html`
|
|
234
|
+
<div class="conversation">
|
|
235
|
+
<forge-ai-chat-header
|
|
236
|
+
${ref(__privateGet(this, _headerRef))}
|
|
237
|
+
?disable-agent-selector=${this._isStreaming}
|
|
238
|
+
export-option=${this._hasMessages ? "enabled" : "off"}
|
|
239
|
+
clear-option=${this._hasMessages ? "enabled" : "off"}
|
|
240
|
+
.agentInfo=${this.agentInfo}
|
|
241
|
+
.headingLevel=${this.headingLevel}
|
|
242
|
+
.titleText=${this.titleText}
|
|
243
|
+
.agents=${this.agents}
|
|
244
|
+
.selectedAgentId=${this.selectedAgentId}
|
|
245
|
+
@forge-ai-chat-header-clear=${__privateMethod(this, _AiChatbotLauncherComponent_instances, handleHeaderClear_fn)}
|
|
246
|
+
@forge-ai-chat-header-export=${this._handleExport}
|
|
247
|
+
@forge-ai-chat-header-info=${__privateMethod(this, _AiChatbotLauncherComponent_instances, handleHeaderInfo_fn)}
|
|
248
|
+
@forge-ai-chat-header-agent-change=${this._handleAgentChange}>
|
|
249
|
+
<slot name="icon" slot="icon">
|
|
250
|
+
<forge-ai-icon></forge-ai-icon>
|
|
251
|
+
</slot>
|
|
252
|
+
</forge-ai-chat-header>
|
|
253
|
+
<forge-ai-message-thread
|
|
254
|
+
${ref(this._messageThreadRef)}
|
|
255
|
+
.messageItems=${this._messageItems}
|
|
256
|
+
.tools=${this._tools}
|
|
257
|
+
?enable-reactions=${this.enableReactions}
|
|
258
|
+
?show-thinking=${this._isStreaming}
|
|
259
|
+
?debug-mode=${this.debugMode}
|
|
260
|
+
@forge-ai-message-thread-copy=${this._handleCopy}
|
|
261
|
+
@forge-ai-message-thread-resend=${this._handleResend}
|
|
262
|
+
@forge-ai-message-thread-thumbs-up=${this._handleThumbsUp}
|
|
263
|
+
@forge-ai-message-thread-thumbs-down=${this._handleThumbsDown}
|
|
264
|
+
@forge-ai-message-thread-user-copy=${this._handleUserCopy}
|
|
265
|
+
@forge-ai-message-thread-user-resend=${this._handleUserResend}
|
|
266
|
+
@forge-ai-message-thread-user-edit=${this._handleUserEdit}>
|
|
267
|
+
</forge-ai-message-thread>
|
|
268
|
+
<div class="prompt-area">
|
|
269
|
+
${__privateGet(this, _AiChatbotLauncherComponent_instances, sessionFilesTemplate_get)} ${__privateGet(this, _AiChatbotLauncherComponent_instances, promptTemplate_get)}
|
|
270
|
+
${when(this.disclaimerText, () => html`<div class="disclaimer">${this.disclaimerText}</div>`)}
|
|
271
|
+
</div>
|
|
272
|
+
</div>
|
|
273
|
+
`;
|
|
274
|
+
};
|
|
275
|
+
AiChatbotLauncherComponent.styles = unsafeCSS(styles);
|
|
276
|
+
__decorateClass([
|
|
277
|
+
property({ attribute: "description-text" })
|
|
278
|
+
], AiChatbotLauncherComponent.prototype, "descriptionText", 2);
|
|
279
|
+
__decorateClass([
|
|
280
|
+
state()
|
|
281
|
+
], AiChatbotLauncherComponent.prototype, "_viewState", 2);
|
|
282
|
+
AiChatbotLauncherComponent = __decorateClass([
|
|
283
|
+
customElement(AiChatbotLauncherComponentTagName)
|
|
284
|
+
], AiChatbotLauncherComponent);
|
|
285
|
+
export {
|
|
286
|
+
AiChatbotLauncherComponent,
|
|
287
|
+
AiChatbotLauncherComponentTagName
|
|
288
|
+
};
|
|
@@ -0,0 +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:host {\n display: block;\n height: 100%;\n}\n\n.launcher {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.welcome {\n --_ai-chatbot-launcher-align: var(--forge-ai-chatbot-launcher-align, center);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: var(--_ai-chatbot-launcher-align);\n flex: 1;\n padding: var(--forge-spacing-xxlarge, 48px);\n gap: var(--forge-spacing-xxsmall, 4px);\n animation: fade-in 300ms var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n max-inline-size: 768px;\n margin-inline: auto;\n width: 100%;\n box-sizing: border-box;\n}\n\n.welcome-header {\n display: flex;\n align-items: center;\n gap: var(--forge-spacing-xsmall, 8px);\n}\n\n.icon {\n --forge-ai-icon-size: 48px;\n color: var(--forge-theme-tertiary, #3d5afe);\n}\n\n.title {\n margin: 0;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: var(--forge-typography-heading6-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n font-size: var(--forge-typography-heading6-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading6-font-size-scale, 1.75)));\n font-weight: var(--forge-typography-heading6-font-weight, 500);\n line-height: var(--forge-typography-heading6-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading6-line-height-scale, 2.125)));\n letter-spacing: var(--forge-typography-heading6-letter-spacing, 0em);\n text-transform: var(--forge-typography-heading6-text-transform, inherit);\n text-decoration: var(--forge-typography-heading6-text-decoration, inherit);\n color: var(--forge-theme-text-high, rgba(0, 0, 0, 0.87));\n}\n\n.description {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: var(--forge-typography-body1-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n font-size: var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 0.875)));\n font-weight: var(--forge-typography-body1-font-weight, 400);\n line-height: var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));\n letter-spacing: var(--forge-typography-body1-letter-spacing, 0.0357142857em);\n text-transform: var(--forge-typography-body1-text-transform, inherit);\n text-decoration: var(--forge-typography-body1-text-decoration, inherit);\n color: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));\n text-align: center;\n margin-block-end: var(--forge-spacing-medium, 16px);\n}\n\n.prompt-container {\n --forge-card-outline-width: 0;\n inline-size: 100%;\n}\n\n.disclaimer {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: var(--forge-typography-label1-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n font-size: var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, 0.75)));\n font-weight: var(--forge-typography-label1-font-weight, 400);\n line-height: var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));\n letter-spacing: var(--forge-typography-label1-letter-spacing, 0.0357142857em);\n text-transform: var(--forge-typography-label1-text-transform, inherit);\n text-decoration: var(--forge-typography-label1-text-decoration, inherit);\n color: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));\n text-align: center;\n}\n\n.welcome-suggestions {\n inline-size: 100%;\n margin-block-start: var(--forge-spacing-large, 24px);\n}\n.welcome-suggestions forge-ai-suggestions {\n margin-inline: var(--forge-spacing-medium, 16px);\n}\n\n.conversation {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.conversation forge-ai-chat-header {\n flex-shrink: 0;\n max-inline-size: 768px;\n margin-inline: auto;\n width: 100%;\n}\n\n.conversation forge-ai-message-thread {\n --forge-ai-message-thread-content-max-width: 768px;\n flex: 1;\n min-height: 0;\n animation: fade-in var(--forge-animation-duration-medium2, 300ms) var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1));\n}\n\n.conversation .prompt-area {\n display: flex;\n flex-direction: column;\n gap: var(--forge-spacing-xsmall, 8px);\n font-size: 0.875rem;\n padding: var(--forge-spacing-medium, 16px) var(--forge-spacing-medium, 16px) var(--forge-spacing-xsmall, 8px);\n animation: prompt-slide-down var(--forge-animation-duration-medium2, 300ms) var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1));\n max-inline-size: 768px;\n margin-inline: auto;\n width: 100%;\n box-sizing: border-box;\n}\n\n.conversation forge-ai-prompt {\n max-inline-size: none;\n}\n\n.session-files {\n display: flex;\n flex-direction: column;\n gap: var(--forge-spacing-xsmall, 8px);\n min-width: 0;\n}\n.session-files .session-files-header {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: var(--forge-typography-label1-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n font-size: var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, 0.75)));\n font-weight: var(--forge-typography-label1-font-weight, 400);\n line-height: var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));\n letter-spacing: var(--forge-typography-label1-letter-spacing, 0.0357142857em);\n text-transform: var(--forge-typography-label1-text-transform, inherit);\n text-decoration: var(--forge-typography-label1-text-decoration, inherit);\n color: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));\n}\n.session-files .session-files-list::-webkit-scrollbar {\n height: var(--forge-scrollbar-height, 16px);\n width: var(--forge-scrollbar-width, 16px);\n}\n.session-files .session-files-list::-webkit-scrollbar-track {\n background-color: var(--forge-scrollbar-track-container, var(--forge-theme-surface-container-low, #ebebeb));\n}\n.session-files .session-files-list::-webkit-scrollbar-track:hover {\n background-color: var(--forge-scrollbar-track-container-hover, var(--forge-theme-surface-container-low, #ebebeb));\n}\n.session-files .session-files-list::-webkit-scrollbar-corner {\n background-color: var(--forge-scrollbar-track-container, var(--forge-theme-surface-container-low, #ebebeb));\n}\n.session-files .session-files-list::-webkit-scrollbar-thumb {\n height: var(--forge-scrollbar-thumb-min-height, 32px);\n width: var(--forge-scrollbar-thumb-min-width, 32px);\n border-radius: var(--forge-scrollbar-border-radius, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));\n border-width: var(--forge-scrollbar-border-width, 3px);\n border-style: solid;\n border-color: transparent;\n background-color: var(--forge-scrollbar-thumb-container, var(--forge-theme-surface-container-medium, #c2c2c2));\n background-clip: content-box;\n}\n.session-files .session-files-list::-webkit-scrollbar-thumb:hover {\n background-color: var(--forge-scrollbar-thumb-container-hover, var(--forge-theme-surface-container-high, #9e9e9e));\n}\n.session-files .session-files-list {\n display: flex;\n gap: var(--forge-spacing-small, 12px);\n overflow-x: auto;\n padding-block-end: var(--forge-spacing-xsmall, 8px);\n}\n\n@keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n@keyframes prompt-slide-down {\n from {\n transform: translateY(-30vh);\n }\n to {\n transform: translateY(0);\n }\n}\n:host(:state(welcome)) .welcome {\n display: flex;\n}\n:host(:state(welcome)) .conversation {\n display: none;\n}\n\n:host(:state(conversation)) .welcome {\n display: none;\n}\n:host(:state(conversation)) .conversation {\n display: flex;\n}';
|
|
2
|
+
export {
|
|
3
|
+
styles as default
|
|
4
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { AiChatbotLauncherComponent, AiChatbotLauncherComponentTagName, type LauncherViewState } from './ai-chatbot-launcher.js';
|
|
@@ -3,6 +3,7 @@ import { property, state, customElement } from "lit/decorators.js";
|
|
|
3
3
|
import { ifDefined } from "lit/directives/if-defined.js";
|
|
4
4
|
import { createRef, ref } from "lit/directives/ref.js";
|
|
5
5
|
import { when } from "lit/directives/when.js";
|
|
6
|
+
import "../ai-chatbot/ai-chatbot-base.mjs";
|
|
6
7
|
import "../ai-chatbot/ai-chatbot.mjs";
|
|
7
8
|
import "../ai-chatbot/ai-chatbot-tool-call.mjs";
|
|
8
9
|
import "@ag-ui/client";
|
|
@@ -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/**\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-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: block;\n --_ai-empty-state-max-width: 420px;\n}\n\n.empty-state-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--forge-spacing-medium, 16px);\n margin: 0 auto;\n width: 100%;\n max-width: var(--ai-empty-state-max-width, var(--_ai-empty-state-max-width));\n}\n\n.heading-message-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--forge-spacing-xsmall, 8px);\n}\n\n.heading {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: var(--forge-typography-heading4-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n font-size: var(--forge-typography-heading4-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading4-font-size-scale, 1.25)));\n font-weight: var(--forge-typography-heading4-font-weight, 500);\n line-height: var(--forge-typography-heading4-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading4-line-height-scale, 1.5)));\n letter-spacing: var(--forge-typography-heading4-letter-spacing, 0.005em);\n text-transform: var(--forge-typography-heading4-text-transform, inherit);\n text-decoration: var(--forge-typography-heading4-text-decoration, inherit);\n}\n\n.message {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: var(--forge-typography-body2-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n font-size: var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1)));\n font-weight: var(--forge-typography-body2-font-weight, 400);\n line-height: var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375)));\n letter-spacing: var(--forge-typography-body2-letter-spacing, 0.015625em);\n text-transform: var(--forge-typography-body2-text-transform, inherit);\n text-decoration: var(--forge-typography-body2-text-decoration, inherit);\n text-align: center;\n}\n\n.graphic {\n height: 200px;\n width: 200px;\n}\n\n::slotted(:where(p, h1, h2, h3, h4, h5, h6)) {\n margin: 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/**\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-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: block;\n --_ai-empty-state-max-width: 420px;\n}\n\n.empty-state-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--forge-spacing-medium, 16px);\n margin: 0 auto;\n width: 100%;\n max-width: var(--ai-empty-state-max-width, var(--_ai-empty-state-max-width));\n}\n\n.heading-message-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--forge-spacing-xsmall, 8px);\n}\n\n.heading {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: var(--forge-typography-heading4-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n font-size: var(--forge-typography-heading4-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading4-font-size-scale, 1.25)));\n font-weight: var(--forge-typography-heading4-font-weight, 500);\n line-height: var(--forge-typography-heading4-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading4-line-height-scale, 1.5)));\n letter-spacing: var(--forge-typography-heading4-letter-spacing, 0.005em);\n text-transform: var(--forge-typography-heading4-text-transform, inherit);\n text-decoration: var(--forge-typography-heading4-text-decoration, inherit);\n text-align: center;\n}\n\n.message {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: var(--forge-typography-body2-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n font-size: var(--forge-typography-body2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 1)));\n font-weight: var(--forge-typography-body2-font-weight, 400);\n line-height: var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375)));\n letter-spacing: var(--forge-typography-body2-letter-spacing, 0.015625em);\n text-transform: var(--forge-typography-body2-text-transform, inherit);\n text-decoration: var(--forge-typography-body2-text-decoration, inherit);\n text-align: center;\n}\n\n.graphic {\n height: 200px;\n width: 200px;\n}\n\n::slotted(:where(p, h1, h2, h3, h4, h5, h6)) {\n margin: 0;\n}';
|
|
2
2
|
export {
|
|
3
3
|
styles as default
|
|
4
4
|
};
|
|
@@ -42,6 +42,8 @@ export declare const AiMessageThreadComponentTagName: keyof HTMLElementTagNameMa
|
|
|
42
42
|
* @slot empty-state-heading - Slot for custom empty state heading content
|
|
43
43
|
* @slot empty-state-actions - Slot for custom empty state actions (e.g., suggestions)
|
|
44
44
|
*
|
|
45
|
+
* @cssproperty --forge-ai-message-thread-content-max-width - Controls the max-width of the message content area while keeping the scroll container full width.
|
|
46
|
+
*
|
|
45
47
|
* @event {CustomEvent<ForgeAiMessageThreadCopyEventData>} forge-ai-message-thread-copy - Fired when user clicks copy on a message
|
|
46
48
|
* @event {CustomEvent<ForgeAiMessageThreadResendEventData>} forge-ai-message-thread-resend - Fired when user clicks resend on a message
|
|
47
49
|
* @event {CustomEvent<ForgeAiMessageThreadThumbsEventData>} forge-ai-message-thread-thumbs-up - Fired when user gives thumbs up
|
|
@@ -86,7 +86,7 @@ let AiMessageThreadComponent = class extends LitElement {
|
|
|
86
86
|
render() {
|
|
87
87
|
return html`
|
|
88
88
|
<div class="message-thread" @scroll=${this.autoScroll ? __privateGet(this, _handleScroll) : void 0}>
|
|
89
|
-
|
|
89
|
+
<div class="message-thread-content">${__privateGet(this, _AiMessageThreadComponent_instances, emptyState_get)} ${__privateGet(this, _AiMessageThreadComponent_instances, messages_get)} ${__privateGet(this, _AiMessageThreadComponent_instances, thinkingIndicator_get)}</div>
|
|
90
90
|
</div>
|
|
91
91
|
${__privateGet(this, _AiMessageThreadComponent_instances, scrollToBottomButton_get)}
|
|
92
92
|
`;
|