@tylertech/forge-ai 0.8.0 → 0.8.2
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 +1574 -1507
- package/dist/ai-assistant-response/ai-assistant-response.d.ts +2 -2
- package/dist/ai-assistant-response/ai-assistant-response.mjs +6 -5
- package/dist/ai-assistant-response/ai-assistant-response.scss.mjs +1 -1
- package/dist/ai-chatbot/ai-chatbot.mjs +18 -4
- package/dist/ai-message-thread/ai-message-thread.d.ts +4 -4
- package/dist/ai-message-thread/ai-message-thread.mjs +4 -4
- package/dist/ai-message-thread/index.d.ts +1 -1
- package/dist/ai-response-message-toolbar/ai-response-message-toolbar.d.ts +41 -0
- package/dist/ai-response-message-toolbar/ai-response-message-toolbar.mjs +230 -0
- package/dist/{ai-actions-toolbar/ai-actions-toolbar.scss.mjs → ai-response-message-toolbar/ai-response-message-toolbar.scss.mjs} +1 -1
- package/dist/ai-response-message-toolbar/index.d.ts +1 -0
- package/dist/ai-response-message-toolbar/index.mjs +5 -0
- package/dist/ai-user-message/ai-user-message.mjs +13 -83
- package/dist/ai-user-message/ai-user-message.scss.mjs +1 -1
- package/dist/ai-user-message-toolbar/ai-user-message-toolbar.d.ts +28 -0
- package/dist/ai-user-message-toolbar/ai-user-message-toolbar.mjs +160 -0
- package/dist/ai-user-message-toolbar/ai-user-message-toolbar.scss.mjs +4 -0
- package/dist/ai-user-message-toolbar/index.d.ts +1 -0
- package/dist/ai-user-message-toolbar/index.mjs +5 -0
- package/dist/index.d.ts +2 -1
- package/dist/index.mjs +6 -3
- package/package.json +1 -1
- package/dist/ai-actions-toolbar/ai-actions-toolbar.d.ts +0 -51
- package/dist/ai-actions-toolbar/ai-actions-toolbar.mjs +0 -211
- package/dist/ai-actions-toolbar/index.d.ts +0 -1
- package/dist/ai-actions-toolbar/index.mjs +0 -5
- package/dist/tools/ai-confirm-tool-call/ai-confirm-tool-call-definition.d.ts +0 -10
- package/dist/tools/ai-confirm-tool-call/ai-confirm-tool-call-definition.mjs +0 -20
- package/dist/tools/ai-confirm-tool-call/index.d.ts +0 -1
- package/dist/tools/ai-confirm-tool-call/index.mjs +0 -5
|
@@ -8,7 +8,7 @@ declare global {
|
|
|
8
8
|
'forge-ai-assistant-response-copy': CustomEvent<{
|
|
9
9
|
responseId: string;
|
|
10
10
|
}>;
|
|
11
|
-
'forge-ai-assistant-response-
|
|
11
|
+
'forge-ai-assistant-response-resend': CustomEvent<{
|
|
12
12
|
responseId: string;
|
|
13
13
|
}>;
|
|
14
14
|
'forge-ai-assistant-response-thumbs-up': CustomEvent<ForgeAiAssistantResponseFeedbackEventData>;
|
|
@@ -26,7 +26,7 @@ export declare const AiAssistantResponseComponentTagName: keyof HTMLElementTagNa
|
|
|
26
26
|
* @summary Renders a complete assistant response with interleaved text chunks and tool calls.
|
|
27
27
|
*
|
|
28
28
|
* @event {CustomEvent<{ responseId: string }>} forge-ai-assistant-response-copy - Fired when copy action is clicked
|
|
29
|
-
* @event {CustomEvent<{ responseId: string }>} forge-ai-assistant-response-
|
|
29
|
+
* @event {CustomEvent<{ responseId: string }>} forge-ai-assistant-response-resend - Fired when resend action is clicked
|
|
30
30
|
* @event {CustomEvent<ForgeAiAssistantResponseFeedbackEventData>} forge-ai-assistant-response-thumbs-up - Fired when thumbs up is clicked
|
|
31
31
|
* @event {CustomEvent<ForgeAiAssistantResponseFeedbackEventData>} forge-ai-assistant-response-thumbs-down - Fired when thumbs down is clicked
|
|
32
32
|
*/
|
|
@@ -3,7 +3,7 @@ import { property, state, query, customElement } from "lit/decorators.js";
|
|
|
3
3
|
import { unsafeHTML } from "lit/directives/unsafe-html.js";
|
|
4
4
|
import { ifDefined } from "lit/directives/if-defined.js";
|
|
5
5
|
import { MarkdownStreamController } from "../ai-chatbot/markdown-stream-controller.mjs";
|
|
6
|
-
import "../ai-
|
|
6
|
+
import "../ai-response-message-toolbar/ai-response-message-toolbar.mjs";
|
|
7
7
|
import "../ai-chatbot/ai-chatbot-tool-call.mjs";
|
|
8
8
|
import "../ai-event-stream-viewer/ai-event-stream-viewer.mjs";
|
|
9
9
|
import "../core/popover/popover.mjs";
|
|
@@ -182,12 +182,13 @@ toolbar_get = function() {
|
|
|
182
182
|
}
|
|
183
183
|
return html`
|
|
184
184
|
<div class="toolbar-container">
|
|
185
|
-
<forge-ai-
|
|
185
|
+
<forge-ai-response-message-toolbar
|
|
186
186
|
?enable-reactions=${this.enableReactions}
|
|
187
187
|
feedback-type=${ifDefined(this.response.feedback?.type)}
|
|
188
|
-
|
|
189
|
-
@forge-ai-
|
|
190
|
-
|
|
188
|
+
feedback-reason=${ifDefined(this.response.feedback?.reason)}
|
|
189
|
+
@forge-ai-response-message-toolbar-action=${__privateMethod(this, _AiAssistantResponseComponent_instances, handleToolbarAction_fn)}
|
|
190
|
+
@forge-ai-response-message-toolbar-feedback=${__privateMethod(this, _AiAssistantResponseComponent_instances, handleToolbarFeedback_fn)}>
|
|
191
|
+
</forge-ai-response-message-toolbar>
|
|
191
192
|
${__privateGet(this, _AiAssistantResponseComponent_instances, debugButton_get)}
|
|
192
193
|
</div>
|
|
193
194
|
`;
|
|
@@ -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/* 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/**\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:host {\n display: block;\n box-sizing: border-box;\n}\n\n:host(:state(empty)) {\n display: none;\n}\n\n.assistant-response {\n position: relative;\n}\n\n.text-chunk {\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 line-height: 1.5;\n}\n.text-chunk h1,\n.text-chunk h2,\n.text-chunk h3,\n.text-chunk h4,\n.text-chunk h5,\n.text-chunk h6 {\n margin: 1.75rem 0 var(--forge-spacing-small, 12px);\n}\n.text-chunk strong {\n font-weight: 500;\n}\n.text-chunk a {\n color: var(--forge-theme-primary, #3f51b5);\n}\n.text-chunk hr {\n border: none;\n border-top: 1px solid var(--forge-theme-outline, #e0e0e0);\n}\n.text-chunk code {\n color: var(--forge-theme-on-surface-container-low, #000000);\n background-color: var(--forge-theme-surface-container-low, #ebebeb);\n border-radius: calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1));\n padding: var(--forge-spacing-xxxsmall, 2px) var(--forge-spacing-xxsmall, 4px);\n font-size: 0.75rem;\n}\n.text-chunk pre {\n border: 1px solid var(--forge-theme-outline, #e0e0e0);\n border-radius: calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1));\n margin-block: var(--forge-spacing-medium, 16px) 0;\n}\n.text-chunk pre code {\n display: block;\n padding: var(--forge-spacing-xsmall, 8px) var(--forge-spacing-small, 12px);\n color: var(--forge-theme-on-surface-container-minimum, #000000);\n background: var(--forge-theme-surface-container-minimum, #f5f5f5);\n overflow-x: auto;\n}\n.text-chunk > p:has(+ ol),\n.text-chunk > p:has(+ ul) {\n margin-block-end: var(--forge-spacing-small, 12px);\n}\n.text-chunk > ul {\n list-style-type: disc;\n padding-inline-start: 1.6875rem;\n}\n.text-chunk > ol {\n padding-inline-start: 1.75rem;\n}\n.text-chunk > ol,\n.text-chunk > ul {\n margin: var(--forge-spacing-xsmall, 8px) 0;\n margin-block-end: var(--forge-spacing-medium, 16px);\n}\n.text-chunk > :first-child {\n margin-block-start: 0;\n}\n.text-chunk > p {\n margin-block-end: var(--forge-spacing-medium, 16px);\n overflow-wrap: anywhere;\n}\n.text-chunk > p:first-child {\n margin-block-start: 0;\n}\n.text-chunk > p:last-child {\n margin-block-end: 0;\n}\n\n.toolbar-container {\n position: absolute;\n bottom: -28px;\n left: 0;\n transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;\n display: flex;\n gap: var(--forge-spacing-xxsmall, 4px);\n opacity: 0;\n transform: translateY(-8px);\n pointer-events: none;\n z-index: 1;\n}\n\n.assistant-response[data-complete]:hover .toolbar-container,\n.assistant-response[data-complete] .toolbar-container:focus-within {\n opacity: 1;\n transform: translateY(0);\n pointer-events: auto;\n}\n\n:host(:not(:last-of-type)) .assistant-response[data-complete]::after {\n content: "";\n position: absolute;\n bottom: -40px;\n left: 0;\n right: 0;\n height: 40px;\n}\n\n:host(:last-of-type) .assistant-response[data-complete] .toolbar-container {\n opacity: 1;\n transform: translateY(0);\n pointer-events: auto;\n}\n\n.debug-button {\n color: var(--forge-theme-on-error-container-low, #5f0011);\n --forge-icon-button-focus-indicator-color: var(--forge-theme-error, #b00020);\n --forge-icon-button-tonal-background-color: var(--forge-theme-error-container-low, #f6e0e4);\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.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/**\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:host {\n display: block;\n box-sizing: border-box;\n}\n\n:host(:state(empty)) {\n display: none;\n}\n\n.assistant-response {\n position: relative;\n}\n\n.text-chunk {\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 line-height: 1.5;\n}\n.text-chunk h1,\n.text-chunk h2,\n.text-chunk h3,\n.text-chunk h4,\n.text-chunk h5,\n.text-chunk h6 {\n margin: 1.75rem 0 var(--forge-spacing-small, 12px);\n}\n.text-chunk strong {\n font-weight: 500;\n}\n.text-chunk a {\n color: var(--forge-theme-primary, #3f51b5);\n}\n.text-chunk hr {\n border: none;\n border-top: 1px solid var(--forge-theme-outline, #e0e0e0);\n}\n.text-chunk code {\n color: var(--forge-theme-on-surface-container-low, #000000);\n background-color: var(--forge-theme-surface-container-low, #ebebeb);\n border-radius: calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1));\n padding: var(--forge-spacing-xxxsmall, 2px) var(--forge-spacing-xxsmall, 4px);\n font-size: 0.75rem;\n}\n.text-chunk pre {\n border: 1px solid var(--forge-theme-outline, #e0e0e0);\n border-radius: calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1));\n margin-block: var(--forge-spacing-medium, 16px) 0;\n}\n.text-chunk pre code {\n display: block;\n padding: var(--forge-spacing-xsmall, 8px) var(--forge-spacing-small, 12px);\n color: var(--forge-theme-on-surface-container-minimum, #000000);\n background: var(--forge-theme-surface-container-minimum, #f5f5f5);\n overflow-x: auto;\n}\n.text-chunk > p:has(+ ol),\n.text-chunk > p:has(+ ul) {\n margin-block-end: var(--forge-spacing-small, 12px);\n}\n.text-chunk > ul {\n list-style-type: disc;\n padding-inline-start: 1.6875rem;\n}\n.text-chunk > ol {\n padding-inline-start: 1.75rem;\n}\n.text-chunk > ol,\n.text-chunk > ul {\n margin: var(--forge-spacing-xsmall, 8px) 0;\n margin-block-end: var(--forge-spacing-medium, 16px);\n}\n.text-chunk > :first-child {\n margin-block-start: 0;\n}\n.text-chunk > p {\n margin-block-end: var(--forge-spacing-medium, 16px);\n overflow-wrap: anywhere;\n}\n.text-chunk > p:first-child {\n margin-block-start: 0;\n}\n.text-chunk > p:last-child {\n margin-block-end: 0;\n}\n\n.toolbar-container {\n position: absolute;\n bottom: -28px;\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 left: 0;\n}\n\n.assistant-response[data-complete]:hover .toolbar-container,\n.assistant-response[data-complete] .toolbar-container:focus-within {\n opacity: 1;\n transform: translateY(0);\n pointer-events: auto;\n}\n\n:host(:not(:last-of-type)) .assistant-response[data-complete]::after {\n content: "";\n position: absolute;\n bottom: -40px;\n left: 0;\n right: 0;\n height: 40px;\n}\n\n:host(:last-of-type) .assistant-response[data-complete] .toolbar-container {\n opacity: 1;\n transform: translateY(0);\n pointer-events: auto;\n}\n\n.debug-button {\n color: var(--forge-theme-on-error-container-low, #5f0011);\n --forge-icon-button-focus-indicator-color: var(--forge-theme-error, #b00020);\n --forge-icon-button-tonal-background-color: var(--forge-theme-error-container-low, #f6e0e4);\n}';
|
|
2
2
|
export {
|
|
3
3
|
styles as default
|
|
4
4
|
};
|
|
@@ -42,7 +42,7 @@ var __privateWrapper = (obj, member, setter, getter) => ({
|
|
|
42
42
|
return __privateGet(obj, member, getter);
|
|
43
43
|
}
|
|
44
44
|
});
|
|
45
|
-
var _chatInterfaceRef, _messageThreadRef, _promptRef, _headerRef, _messageStateController, _fileUploadManager, _toolsMap, _adapterSubscriptions, _executingToolHandlers, _AiChatbotComponent_instances, slashCommands_get, messageItems_get, isStreaming_get, isUploading_get, hasMessages_get, tools_get, setupAdapter_fn, handleMessageStart_fn, handleMessageDelta_fn, handleMessageEnd_fn, handleRunFinished_fn, tryCompleteResponse_fn, handleToolCallStart_fn, handleToolCallArgs_fn, handleToolCallEnd_fn, createToolResponse_fn, handleToolCall_fn, executeToolHandler_fn, handleError_fn, handleRunAborted_fn, handleStateChange_fn, handleToolCallResult_fn, sendToolResult_fn, sendUserMessage_fn, handleSend_fn, handleStop_fn, handleCancel_fn, handleCopy_fn, handleUserCopy_fn, handleUserResend_fn, handleUserEdit_fn,
|
|
45
|
+
var _chatInterfaceRef, _messageThreadRef, _promptRef, _headerRef, _messageStateController, _fileUploadManager, _toolsMap, _adapterSubscriptions, _executingToolHandlers, _AiChatbotComponent_instances, slashCommands_get, messageItems_get, isStreaming_get, isUploading_get, hasMessages_get, tools_get, setupAdapter_fn, handleMessageStart_fn, handleMessageDelta_fn, handleMessageEnd_fn, handleRunFinished_fn, tryCompleteResponse_fn, handleToolCallStart_fn, handleToolCallArgs_fn, handleToolCallEnd_fn, createToolResponse_fn, handleToolCall_fn, executeToolHandler_fn, handleError_fn, handleRunAborted_fn, handleStateChange_fn, handleToolCallResult_fn, sendToolResult_fn, sendUserMessage_fn, handleSend_fn, handleStop_fn, handleCancel_fn, handleCopy_fn, handleUserCopy_fn, handleUserResend_fn, handleUserEdit_fn, handleResend_fn, handleFeedback_fn, handleThumbsUp_fn, handleThumbsDown_fn, processFileUpload_fn, handleFileSelect_fn, createFileUploadCallbacks_fn, handleFileError_fn, handleAttachmentRemove_fn, handleSuggestionSelect_fn, handleVoiceInputResult_fn, handleHeaderExpand_fn, handleHeaderMinimize_fn, handleHeaderClear_fn, handleHeaderInfo_fn, handleDebugToggle_fn, handleSlashCommand_fn, formatToolCallForExport_fn, handleExport_fn, sessionFilesTemplate_get, promptSlot_get, messageThread_get, dispatchEvent_fn, dispatchMessageEvent_fn;
|
|
46
46
|
const AiChatbotComponentTagName = "forge-ai-chatbot";
|
|
47
47
|
let AiChatbotComponent = class extends LitElement {
|
|
48
48
|
constructor() {
|
|
@@ -545,7 +545,7 @@ handleUserEdit_fn = function(evt) {
|
|
|
545
545
|
}
|
|
546
546
|
this.adapter.sendMessage(this.getMessages());
|
|
547
547
|
};
|
|
548
|
-
|
|
548
|
+
handleResend_fn = function(evt) {
|
|
549
549
|
if (!this.adapter) {
|
|
550
550
|
return;
|
|
551
551
|
}
|
|
@@ -702,6 +702,16 @@ handleSlashCommand_fn = function(evt) {
|
|
|
702
702
|
break;
|
|
703
703
|
}
|
|
704
704
|
};
|
|
705
|
+
formatToolCallForExport_fn = function(toolCall) {
|
|
706
|
+
const lines = [` Tool: ${toolCall.name}`, ` Args: ${JSON.stringify(toolCall.args)}`];
|
|
707
|
+
if (toolCall.status === "error") {
|
|
708
|
+
const errorMsg = typeof toolCall.result === "object" && toolCall.result !== null && "error" in toolCall.result ? toolCall.result.error : "Unknown error";
|
|
709
|
+
lines.push(` Error: ${errorMsg}`);
|
|
710
|
+
} else if (toolCall.result !== void 0) {
|
|
711
|
+
lines.push(` Result: ${JSON.stringify(toolCall.result)}`);
|
|
712
|
+
}
|
|
713
|
+
return lines.join("\n");
|
|
714
|
+
};
|
|
705
715
|
handleExport_fn = function() {
|
|
706
716
|
const messages = this.getMessages();
|
|
707
717
|
if (messages.length === 0) {
|
|
@@ -710,9 +720,13 @@ handleExport_fn = function() {
|
|
|
710
720
|
const chatText = messages.map((message) => {
|
|
711
721
|
const timestamp = new Date(message.timestamp).toLocaleString();
|
|
712
722
|
const role = message.role === "user" ? "You" : "Assistant";
|
|
713
|
-
|
|
723
|
+
let output = `[${timestamp}] ${role}:
|
|
714
724
|
${message.content}
|
|
715
725
|
`;
|
|
726
|
+
if (message.toolCalls?.length) {
|
|
727
|
+
output += "\n" + message.toolCalls.map((tc) => __privateMethod(this, _AiChatbotComponent_instances, formatToolCallForExport_fn).call(this, tc)).join("\n\n") + "\n";
|
|
728
|
+
}
|
|
729
|
+
return output;
|
|
716
730
|
}).join("\n");
|
|
717
731
|
const filename = `chat-history-${(/* @__PURE__ */ new Date()).toISOString().slice(0, 19).replace(/:/g, "-")}.txt`;
|
|
718
732
|
downloadFile(chatText, filename, "text/plain");
|
|
@@ -793,7 +807,7 @@ messageThread_get = function() {
|
|
|
793
807
|
?show-thinking=${__privateGet(this, _AiChatbotComponent_instances, isStreaming_get)}
|
|
794
808
|
?debug-mode=${this.debugMode}
|
|
795
809
|
@forge-ai-message-thread-copy=${__privateMethod(this, _AiChatbotComponent_instances, handleCopy_fn)}
|
|
796
|
-
@forge-ai-message-thread-
|
|
810
|
+
@forge-ai-message-thread-resend=${__privateMethod(this, _AiChatbotComponent_instances, handleResend_fn)}
|
|
797
811
|
@forge-ai-message-thread-thumbs-up=${__privateMethod(this, _AiChatbotComponent_instances, handleThumbsUp_fn)}
|
|
798
812
|
@forge-ai-message-thread-thumbs-down=${__privateMethod(this, _AiChatbotComponent_instances, handleThumbsDown_fn)}
|
|
799
813
|
@forge-ai-message-thread-user-copy=${__privateMethod(this, _AiChatbotComponent_instances, handleUserCopy_fn)}
|
|
@@ -7,18 +7,18 @@ declare global {
|
|
|
7
7
|
}
|
|
8
8
|
interface HTMLElementEventMap {
|
|
9
9
|
'forge-ai-message-thread-copy': CustomEvent<ForgeAiMessageThreadCopyEventData>;
|
|
10
|
-
'forge-ai-message-thread-
|
|
10
|
+
'forge-ai-message-thread-resend': CustomEvent<ForgeAiMessageThreadResendEventData>;
|
|
11
11
|
'forge-ai-message-thread-thumbs-up': CustomEvent<ForgeAiMessageThreadThumbsEventData>;
|
|
12
12
|
'forge-ai-message-thread-thumbs-down': CustomEvent<ForgeAiMessageThreadThumbsEventData>;
|
|
13
13
|
'forge-ai-message-thread-user-copy': CustomEvent<ForgeAiMessageThreadCopyEventData>;
|
|
14
|
-
'forge-ai-message-thread-user-resend': CustomEvent<
|
|
14
|
+
'forge-ai-message-thread-user-resend': CustomEvent<ForgeAiMessageThreadResendEventData>;
|
|
15
15
|
'forge-ai-message-thread-user-edit': CustomEvent<ForgeAiMessageThreadEditEventData>;
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
18
|
export interface ForgeAiMessageThreadCopyEventData {
|
|
19
19
|
messageId: string;
|
|
20
20
|
}
|
|
21
|
-
export interface
|
|
21
|
+
export interface ForgeAiMessageThreadResendEventData {
|
|
22
22
|
messageId: string;
|
|
23
23
|
}
|
|
24
24
|
export interface ForgeAiMessageThreadThumbsEventData {
|
|
@@ -43,7 +43,7 @@ export declare const AiMessageThreadComponentTagName: keyof HTMLElementTagNameMa
|
|
|
43
43
|
* @slot empty-state-actions - Slot for custom empty state actions (e.g., suggestions)
|
|
44
44
|
*
|
|
45
45
|
* @event {CustomEvent<ForgeAiMessageThreadCopyEventData>} forge-ai-message-thread-copy - Fired when user clicks copy on a message
|
|
46
|
-
* @event {CustomEvent<
|
|
46
|
+
* @event {CustomEvent<ForgeAiMessageThreadResendEventData>} forge-ai-message-thread-resend - Fired when user clicks resend on a message
|
|
47
47
|
* @event {CustomEvent<ForgeAiMessageThreadThumbsEventData>} forge-ai-message-thread-thumbs-up - Fired when user gives thumbs up
|
|
48
48
|
* @event {CustomEvent<ForgeAiMessageThreadThumbsEventData>} forge-ai-message-thread-thumbs-down - Fired when user gives thumbs down
|
|
49
49
|
*/
|
|
@@ -30,7 +30,7 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
|
|
|
30
30
|
var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
31
31
|
var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
|
|
32
32
|
var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
|
|
33
|
-
var _markdownController, _canAutoScroll, _resizeObserver, _AiMessageThreadComponent_instances, checkScrollState_fn, _handleScroll, _handleScrollToBottomClick, scrollToBottomButton_get, handleCopy_fn,
|
|
33
|
+
var _markdownController, _canAutoScroll, _resizeObserver, _AiMessageThreadComponent_instances, checkScrollState_fn, _handleScroll, _handleScrollToBottomClick, scrollToBottomButton_get, handleCopy_fn, handleResend_fn, handleThumbsUp_fn, handleThumbsDown_fn, handleUserCopy_fn, handleUserResend_fn, handleUserEdit_fn, renderToolCall_fn, renderAssistantResponse_fn, emptyState_get, thinkingIndicator_get, messages_get, dispatchEvent_fn;
|
|
34
34
|
const AiMessageThreadComponentTagName = "forge-ai-message-thread";
|
|
35
35
|
const SCROLL_THRESHOLD = 100;
|
|
36
36
|
let AiMessageThreadComponent = class extends LitElement {
|
|
@@ -133,9 +133,9 @@ handleCopy_fn = function(messageId) {
|
|
|
133
133
|
detail: { messageId }
|
|
134
134
|
});
|
|
135
135
|
};
|
|
136
|
-
|
|
136
|
+
handleResend_fn = function(messageId) {
|
|
137
137
|
__privateMethod(this, _AiMessageThreadComponent_instances, dispatchEvent_fn).call(this, {
|
|
138
|
-
type: "forge-ai-message-thread-
|
|
138
|
+
type: "forge-ai-message-thread-resend",
|
|
139
139
|
detail: { messageId }
|
|
140
140
|
});
|
|
141
141
|
};
|
|
@@ -180,7 +180,7 @@ renderAssistantResponse_fn = function(response) {
|
|
|
180
180
|
?enable-reactions=${this.enableReactions}
|
|
181
181
|
?debug-mode=${this.debugMode}
|
|
182
182
|
@forge-ai-assistant-response-copy=${(e) => __privateMethod(this, _AiMessageThreadComponent_instances, handleCopy_fn).call(this, e.detail.responseId)}
|
|
183
|
-
@forge-ai-assistant-response-
|
|
183
|
+
@forge-ai-assistant-response-resend=${(e) => __privateMethod(this, _AiMessageThreadComponent_instances, handleResend_fn).call(this, e.detail.responseId)}
|
|
184
184
|
@forge-ai-assistant-response-thumbs-up=${(e) => __privateMethod(this, _AiMessageThreadComponent_instances, handleThumbsUp_fn).call(this, e.detail.responseId, e.detail.feedback)}
|
|
185
185
|
@forge-ai-assistant-response-thumbs-down=${(e) => __privateMethod(this, _AiMessageThreadComponent_instances, handleThumbsDown_fn).call(this, e.detail.responseId, e.detail.feedback)}>
|
|
186
186
|
</forge-ai-assistant-response>
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { AiMessageThreadComponent, AiMessageThreadComponentTagName } from './ai-message-thread.js';
|
|
2
|
-
export type { ForgeAiMessageThreadCopyEventData,
|
|
2
|
+
export type { ForgeAiMessageThreadCopyEventData, ForgeAiMessageThreadResendEventData, ForgeAiMessageThreadThumbsEventData, ForgeAiMessageThreadEditEventData } from './ai-message-thread.js';
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { LitElement, TemplateResult, PropertyValues } from 'lit';
|
|
2
|
+
import { FeedbackType } from '../ai-chatbot/types.js';
|
|
3
|
+
declare global {
|
|
4
|
+
interface HTMLElementTagNameMap {
|
|
5
|
+
'forge-ai-response-message-toolbar': AiResponseMessageToolbarComponent;
|
|
6
|
+
}
|
|
7
|
+
interface HTMLElementEventMap {
|
|
8
|
+
'forge-ai-response-message-toolbar-action': CustomEvent<ForgeAiResponseMessageToolbarActionEventData>;
|
|
9
|
+
'forge-ai-response-message-toolbar-feedback': CustomEvent<ForgeAiResponseMessageToolbarFeedbackEventData>;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
export interface ForgeAiResponseMessageToolbarActionEventData {
|
|
13
|
+
action: AiResponseMessageToolbarAction;
|
|
14
|
+
}
|
|
15
|
+
export interface ForgeAiResponseMessageToolbarFeedbackEventData {
|
|
16
|
+
action: 'positive' | 'negative';
|
|
17
|
+
feedback?: string;
|
|
18
|
+
}
|
|
19
|
+
export type AiResponseMessageToolbarAction = 'resend' | 'copy' | 'thumbs-up' | 'thumbs-down';
|
|
20
|
+
export declare const AiResponseMessageToolbarComponentTagName: keyof HTMLElementTagNameMap;
|
|
21
|
+
/**
|
|
22
|
+
* @tag forge-ai-response-message-toolbar
|
|
23
|
+
*
|
|
24
|
+
* @event {CustomEvent<ForgeAiResponseMessageToolbarActionEventData>} forge-ai-response-message-toolbar-action - Fired when an action button is clicked. The detail contains the action type.
|
|
25
|
+
* @event {CustomEvent<ForgeAiResponseMessageToolbarFeedbackEventData>} forge-ai-response-message-toolbar-feedback - Fired when feedback is submitted. The detail contains the action and optional feedback text.
|
|
26
|
+
*/
|
|
27
|
+
export declare class AiResponseMessageToolbarComponent extends LitElement {
|
|
28
|
+
#private;
|
|
29
|
+
static styles: import('lit').CSSResult;
|
|
30
|
+
enableReactions: boolean;
|
|
31
|
+
feedbackType?: FeedbackType;
|
|
32
|
+
feedbackReason?: string;
|
|
33
|
+
private _thumbsUpActive;
|
|
34
|
+
private _thumbsDownActive;
|
|
35
|
+
private _popoverOpen;
|
|
36
|
+
private _thumbsDownButton;
|
|
37
|
+
private _thumbsDownPopover;
|
|
38
|
+
private _thumbsDownFeedbackTextarea?;
|
|
39
|
+
willUpdate(changedProperties: PropertyValues<this>): void;
|
|
40
|
+
render(): TemplateResult;
|
|
41
|
+
}
|
|
@@ -0,0 +1,230 @@
|
|
|
1
|
+
import { unsafeCSS, LitElement, html } from "lit";
|
|
2
|
+
import { property, state, query, customElement } from "lit/decorators.js";
|
|
3
|
+
import { when } from "lit/directives/when.js";
|
|
4
|
+
import "../core/tooltip/tooltip.mjs";
|
|
5
|
+
import "../core/popover/popover.mjs";
|
|
6
|
+
import styles from "./ai-response-message-toolbar.scss.mjs";
|
|
7
|
+
var __defProp = Object.defineProperty;
|
|
8
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
9
|
+
var __typeError = (msg) => {
|
|
10
|
+
throw TypeError(msg);
|
|
11
|
+
};
|
|
12
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
13
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
14
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
15
|
+
if (decorator = decorators[i])
|
|
16
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
17
|
+
if (kind && result) __defProp(target, key, result);
|
|
18
|
+
return result;
|
|
19
|
+
};
|
|
20
|
+
var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
|
|
21
|
+
var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
|
|
22
|
+
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);
|
|
23
|
+
var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
|
|
24
|
+
var _AiResponseMessageToolbarComponent_instances, emitActionEvent_fn, emitFeedbackEvent_fn, handleThumbsUp_fn, handleThumbsDown_fn, handleFeedbackSubmit_fn, handleFeedbackCancel_fn, handlePopoverToggle_fn, resendButtonTemplate_get, copyButtonTemplate_get, thumbsUpButtonTemplate_get, thumbsDownButtonTemplate_get, feedbackFormTemplate_get;
|
|
25
|
+
const AiResponseMessageToolbarComponentTagName = "forge-ai-response-message-toolbar";
|
|
26
|
+
let AiResponseMessageToolbarComponent = class extends LitElement {
|
|
27
|
+
constructor() {
|
|
28
|
+
super(...arguments);
|
|
29
|
+
__privateAdd(this, _AiResponseMessageToolbarComponent_instances);
|
|
30
|
+
this.enableReactions = false;
|
|
31
|
+
this._thumbsUpActive = false;
|
|
32
|
+
this._thumbsDownActive = false;
|
|
33
|
+
this._popoverOpen = false;
|
|
34
|
+
}
|
|
35
|
+
willUpdate(changedProperties) {
|
|
36
|
+
if (changedProperties.has("feedbackType") && this.feedbackType) {
|
|
37
|
+
this._thumbsUpActive = this.feedbackType === "positive";
|
|
38
|
+
this._thumbsDownActive = this.feedbackType === "negative";
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
render() {
|
|
42
|
+
return html`
|
|
43
|
+
<div class="response-message-toolbar">
|
|
44
|
+
${__privateGet(this, _AiResponseMessageToolbarComponent_instances, resendButtonTemplate_get)} ${__privateGet(this, _AiResponseMessageToolbarComponent_instances, copyButtonTemplate_get)}
|
|
45
|
+
${when(this.enableReactions, () => html`${__privateGet(this, _AiResponseMessageToolbarComponent_instances, thumbsUpButtonTemplate_get)} ${__privateGet(this, _AiResponseMessageToolbarComponent_instances, thumbsDownButtonTemplate_get)}`)}
|
|
46
|
+
</div>
|
|
47
|
+
`;
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
_AiResponseMessageToolbarComponent_instances = /* @__PURE__ */ new WeakSet();
|
|
51
|
+
emitActionEvent_fn = function(action) {
|
|
52
|
+
const event = new CustomEvent(
|
|
53
|
+
"forge-ai-response-message-toolbar-action",
|
|
54
|
+
{
|
|
55
|
+
detail: { action }
|
|
56
|
+
}
|
|
57
|
+
);
|
|
58
|
+
this.dispatchEvent(event);
|
|
59
|
+
};
|
|
60
|
+
emitFeedbackEvent_fn = function(action, feedback) {
|
|
61
|
+
const event = new CustomEvent(
|
|
62
|
+
"forge-ai-response-message-toolbar-feedback",
|
|
63
|
+
{
|
|
64
|
+
detail: { action, feedback }
|
|
65
|
+
}
|
|
66
|
+
);
|
|
67
|
+
this.dispatchEvent(event);
|
|
68
|
+
};
|
|
69
|
+
handleThumbsUp_fn = function() {
|
|
70
|
+
this._thumbsUpActive = true;
|
|
71
|
+
this._thumbsDownActive = false;
|
|
72
|
+
if (this._thumbsDownPopover) {
|
|
73
|
+
this._thumbsDownPopover.open = false;
|
|
74
|
+
}
|
|
75
|
+
__privateMethod(this, _AiResponseMessageToolbarComponent_instances, emitFeedbackEvent_fn).call(this, "positive");
|
|
76
|
+
};
|
|
77
|
+
handleThumbsDown_fn = async function() {
|
|
78
|
+
if (this._thumbsDownPopover) {
|
|
79
|
+
const willOpen = !this._thumbsDownPopover.open;
|
|
80
|
+
if (willOpen) {
|
|
81
|
+
await this.updateComplete;
|
|
82
|
+
this._thumbsDownPopover.anchor = this._thumbsDownButton;
|
|
83
|
+
}
|
|
84
|
+
this._thumbsDownPopover.open = willOpen;
|
|
85
|
+
if (this._thumbsDownFeedbackTextarea && !willOpen) {
|
|
86
|
+
this._thumbsDownFeedbackTextarea.value = "";
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
this._thumbsUpActive = false;
|
|
90
|
+
};
|
|
91
|
+
handleFeedbackSubmit_fn = function() {
|
|
92
|
+
const feedbackText = this._thumbsDownFeedbackTextarea?.value || "";
|
|
93
|
+
__privateMethod(this, _AiResponseMessageToolbarComponent_instances, emitFeedbackEvent_fn).call(this, "negative", feedbackText);
|
|
94
|
+
this._thumbsDownActive = true;
|
|
95
|
+
if (this._thumbsDownPopover) {
|
|
96
|
+
this._thumbsDownPopover.open = false;
|
|
97
|
+
}
|
|
98
|
+
};
|
|
99
|
+
handleFeedbackCancel_fn = function() {
|
|
100
|
+
if (this._thumbsDownPopover) {
|
|
101
|
+
this._thumbsDownPopover.open = false;
|
|
102
|
+
}
|
|
103
|
+
};
|
|
104
|
+
handlePopoverToggle_fn = function(evt) {
|
|
105
|
+
this._popoverOpen = evt.detail.open;
|
|
106
|
+
};
|
|
107
|
+
resendButtonTemplate_get = function() {
|
|
108
|
+
return html`
|
|
109
|
+
<button
|
|
110
|
+
id="resend-btn"
|
|
111
|
+
aria-label="Resend"
|
|
112
|
+
class="forge-icon-button forge-icon-button--small"
|
|
113
|
+
@click=${() => __privateMethod(this, _AiResponseMessageToolbarComponent_instances, emitActionEvent_fn).call(this, "resend")}>
|
|
114
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
115
|
+
<path
|
|
116
|
+
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" />
|
|
117
|
+
</svg>
|
|
118
|
+
</button>
|
|
119
|
+
<forge-ai-tooltip for="resend-btn" placement="bottom">Resend</forge-ai-tooltip>
|
|
120
|
+
`;
|
|
121
|
+
};
|
|
122
|
+
copyButtonTemplate_get = function() {
|
|
123
|
+
return html`
|
|
124
|
+
<button
|
|
125
|
+
id="copy-btn"
|
|
126
|
+
aria-label="Copy content"
|
|
127
|
+
class="forge-icon-button forge-icon-button--small"
|
|
128
|
+
@click=${() => __privateMethod(this, _AiResponseMessageToolbarComponent_instances, emitActionEvent_fn).call(this, "copy")}>
|
|
129
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
130
|
+
<path
|
|
131
|
+
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" />
|
|
132
|
+
</svg>
|
|
133
|
+
</button>
|
|
134
|
+
<forge-ai-tooltip for="copy-btn" placement="bottom">Copy</forge-ai-tooltip>
|
|
135
|
+
`;
|
|
136
|
+
};
|
|
137
|
+
thumbsUpButtonTemplate_get = function() {
|
|
138
|
+
return html`
|
|
139
|
+
<button
|
|
140
|
+
id="thumbs-up-btn"
|
|
141
|
+
aria-label="Good response"
|
|
142
|
+
class="forge-icon-button forge-icon-button--small ${this._thumbsUpActive ? "is-active-positive" : ""}"
|
|
143
|
+
@click=${__privateMethod(this, _AiResponseMessageToolbarComponent_instances, handleThumbsUp_fn)}>
|
|
144
|
+
${this._thumbsUpActive ? html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
145
|
+
<path
|
|
146
|
+
d="M23 10a2 2 0 0 0-2-2h-6.32l.96-4.57c.02-.1.03-.21.03-.32 0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.58C7.22 7.95 7 8.45 7 9v10a2 2 0 0 0 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73zM1 21h4V9H1z" />
|
|
147
|
+
</svg>` : html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
148
|
+
<path
|
|
149
|
+
d="M5 9v12H1V9zm4 12a2 2 0 0 1-2-2V9c0-.55.22-1.05.59-1.41L14.17 1l1.06 1.06c.27.27.44.64.44 1.05l-.03.32L14.69 8H21a2 2 0 0 1 2 2v2c0 .26-.05.5-.14.73l-3.02 7.05C19.54 20.5 18.83 21 18 21zm0-2h9.03L21 12v-2h-8.79l1.13-5.32L9 9.03z" />
|
|
150
|
+
</svg>`}
|
|
151
|
+
</button>
|
|
152
|
+
<forge-ai-tooltip for="thumbs-up-btn" placement="bottom">Good response</forge-ai-tooltip>
|
|
153
|
+
`;
|
|
154
|
+
};
|
|
155
|
+
thumbsDownButtonTemplate_get = function() {
|
|
156
|
+
return html`
|
|
157
|
+
<button
|
|
158
|
+
id="thumbs-down-btn"
|
|
159
|
+
aria-label="Bad response"
|
|
160
|
+
class="forge-icon-button forge-icon-button--small ${this._thumbsDownActive || this._popoverOpen ? "is-active-negative" : ""}"
|
|
161
|
+
@click=${__privateMethod(this, _AiResponseMessageToolbarComponent_instances, handleThumbsDown_fn)}>
|
|
162
|
+
${this._thumbsDownActive || this._popoverOpen ? html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
163
|
+
<path
|
|
164
|
+
d="M19 15h4V3h-4m-4 0H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2a2 2 0 0 0 2 2h6.31l-.95 4.57c-.02.1-.03.2-.03.31 0 .42.17.79.44 1.06L9.83 23l6.58-6.59c.37-.36.59-.86.59-1.41V5a2 2 0 0 0-2-2" />
|
|
165
|
+
</svg>` : html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
166
|
+
<path
|
|
167
|
+
d="M19 15V3h4v12zM15 3a2 2 0 0 1 2 2v10c0 .55-.22 1.05-.59 1.41L9.83 23l-1.06-1.06c-.27-.27-.44-.64-.44-1.06l.03-.31.95-4.57H3a2 2 0 0 1-2-2v-2c0-.26.05-.5.14-.73l3.02-7.05C4.46 3.5 5.17 3 6 3zm0 2H5.97L3 12v2h8.78l-1.13 5.32L15 14.97z" />
|
|
168
|
+
</svg>`}
|
|
169
|
+
</button>
|
|
170
|
+
<forge-ai-tooltip for="thumbs-down-btn" placement="bottom">Bad response</forge-ai-tooltip>
|
|
171
|
+
<forge-ai-popover
|
|
172
|
+
.anchor=${this._thumbsDownButton ?? null}
|
|
173
|
+
placement="bottom"
|
|
174
|
+
.shift=${true}
|
|
175
|
+
flip
|
|
176
|
+
arrow
|
|
177
|
+
@forge-ai-popover-toggle=${__privateMethod(this, _AiResponseMessageToolbarComponent_instances, handlePopoverToggle_fn)}>
|
|
178
|
+
${__privateGet(this, _AiResponseMessageToolbarComponent_instances, feedbackFormTemplate_get)}
|
|
179
|
+
</forge-ai-popover>
|
|
180
|
+
`;
|
|
181
|
+
};
|
|
182
|
+
feedbackFormTemplate_get = function() {
|
|
183
|
+
return html`
|
|
184
|
+
<div class="popover-content">
|
|
185
|
+
<div class="popover-header">Leave feedback for this response</div>
|
|
186
|
+
<div class="forge-field">
|
|
187
|
+
<textarea placeholder="Enter your feedback..." .value=${this.feedbackReason ?? ""}></textarea>
|
|
188
|
+
</div>
|
|
189
|
+
<div class="popover-actions">
|
|
190
|
+
<button class="forge-button forge-button--outlined" @click=${__privateMethod(this, _AiResponseMessageToolbarComponent_instances, handleFeedbackCancel_fn)}>Cancel</button>
|
|
191
|
+
<button class="forge-button forge-button--filled" @click=${__privateMethod(this, _AiResponseMessageToolbarComponent_instances, handleFeedbackSubmit_fn)}>Submit</button>
|
|
192
|
+
</div>
|
|
193
|
+
</div>
|
|
194
|
+
`;
|
|
195
|
+
};
|
|
196
|
+
AiResponseMessageToolbarComponent.styles = unsafeCSS(styles);
|
|
197
|
+
__decorateClass([
|
|
198
|
+
property({ type: Boolean, attribute: "enable-reactions" })
|
|
199
|
+
], AiResponseMessageToolbarComponent.prototype, "enableReactions", 2);
|
|
200
|
+
__decorateClass([
|
|
201
|
+
property({ attribute: "feedback-type" })
|
|
202
|
+
], AiResponseMessageToolbarComponent.prototype, "feedbackType", 2);
|
|
203
|
+
__decorateClass([
|
|
204
|
+
property({ attribute: "feedback-reason" })
|
|
205
|
+
], AiResponseMessageToolbarComponent.prototype, "feedbackReason", 2);
|
|
206
|
+
__decorateClass([
|
|
207
|
+
state()
|
|
208
|
+
], AiResponseMessageToolbarComponent.prototype, "_thumbsUpActive", 2);
|
|
209
|
+
__decorateClass([
|
|
210
|
+
state()
|
|
211
|
+
], AiResponseMessageToolbarComponent.prototype, "_thumbsDownActive", 2);
|
|
212
|
+
__decorateClass([
|
|
213
|
+
state()
|
|
214
|
+
], AiResponseMessageToolbarComponent.prototype, "_popoverOpen", 2);
|
|
215
|
+
__decorateClass([
|
|
216
|
+
query("#thumbs-down-btn")
|
|
217
|
+
], AiResponseMessageToolbarComponent.prototype, "_thumbsDownButton", 2);
|
|
218
|
+
__decorateClass([
|
|
219
|
+
query("forge-ai-popover")
|
|
220
|
+
], AiResponseMessageToolbarComponent.prototype, "_thumbsDownPopover", 2);
|
|
221
|
+
__decorateClass([
|
|
222
|
+
query("textarea")
|
|
223
|
+
], AiResponseMessageToolbarComponent.prototype, "_thumbsDownFeedbackTextarea", 2);
|
|
224
|
+
AiResponseMessageToolbarComponent = __decorateClass([
|
|
225
|
+
customElement(AiResponseMessageToolbarComponentTagName)
|
|
226
|
+
], AiResponseMessageToolbarComponent);
|
|
227
|
+
export {
|
|
228
|
+
AiResponseMessageToolbarComponent,
|
|
229
|
+
AiResponseMessageToolbarComponentTagName
|
|
230
|
+
};
|