@tylertech/forge-ai-react 0.8.0 → 0.9.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.
@@ -0,0 +1,69 @@
1
+ import React from "react";
2
+ import {
3
+ ForgeAiAgentSelector as ForgeAiAgentSelectorElement,
4
+ CustomEvent,
5
+ } from "@tylertech/forge-ai/ai-agent-selector";
6
+
7
+ export type { ForgeAiAgentSelectorElement, CustomEvent };
8
+
9
+ export interface ForgeAiAgentSelectorProps extends Pick<
10
+ React.AllHTMLAttributes<HTMLElement>,
11
+ | "children"
12
+ | "dir"
13
+ | "hidden"
14
+ | "id"
15
+ | "lang"
16
+ | "slot"
17
+ | "style"
18
+ | "title"
19
+ | "translate"
20
+ | "onClick"
21
+ | "onFocus"
22
+ | "onBlur"
23
+ > {
24
+ /** Disables the selector (e.g., during streaming) */
25
+ disabled?: boolean;
26
+
27
+ /** ID of the currently selected agent */
28
+ selectedAgentId?: ForgeAiAgentSelectorElement["selectedAgentId"];
29
+
30
+ /** Fallback text when no agent is selected */
31
+ titleText?: ForgeAiAgentSelectorElement["titleText"];
32
+
33
+ /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
34
+ className?: string;
35
+
36
+ /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
37
+ exportparts?: string;
38
+
39
+ /** Used for labels to link them with their inputs (using input id). */
40
+ htmlFor?: string;
41
+
42
+ /** Used to help React identify which items have changed, are added, or are removed within a list. */
43
+ key?: number | string;
44
+
45
+ /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
46
+ part?: string;
47
+
48
+ /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
49
+ ref?: any;
50
+
51
+ /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
52
+ tabIndex?: number;
53
+
54
+ /** Array of available agents */
55
+ agents?: ForgeAiAgentSelectorElement["agents"];
56
+
57
+ /** Fired when an agent is selected */
58
+ onForgeAiAgentSelectorChange?: (event: CustomEvent) => void;
59
+ }
60
+
61
+ /**
62
+ * Agent selector component for switching between AI agents.
63
+ * ---
64
+ *
65
+ *
66
+ * ### **Events:**
67
+ * - **forge-ai-agent-selector-change** - Fired when an agent is selected
68
+ */
69
+ export const ForgeAiAgentSelector: React.ForwardRefExoticComponent<ForgeAiAgentSelectorProps>;
@@ -0,0 +1,44 @@
1
+ import React, { forwardRef, useRef, useEffect } from "react";
2
+ import "@tylertech/forge-ai/ai-agent-selector";
3
+ import { useEventListener, useProperties } from "./react-utils.js";
4
+
5
+ export const ForgeAiAgentSelector = forwardRef((props, forwardedRef) => {
6
+ const ref = useRef(null);
7
+ const { disabled, selectedAgentId, titleText, agents, ...filteredProps } =
8
+ props;
9
+
10
+ /** Event listeners - run once */
11
+ useEventListener(
12
+ ref,
13
+ "forge-ai-agent-selector-change",
14
+ props.onForgeAiAgentSelectorChange,
15
+ );
16
+
17
+ /** Properties - run whenever a property has changed */
18
+ useProperties(ref, "agents", props.agents);
19
+
20
+ return React.createElement(
21
+ "forge-ai-agent-selector",
22
+ {
23
+ ref: (node) => {
24
+ ref.current = node;
25
+ if (typeof forwardedRef === "function") {
26
+ forwardedRef(node);
27
+ } else if (forwardedRef) {
28
+ forwardedRef.current = node;
29
+ }
30
+ },
31
+ ...filteredProps,
32
+ "selected-agent-id": props.selectedAgentId || props["selected-agent-id"],
33
+ "title-text": props.titleText || props["title-text"],
34
+ class: props.className,
35
+ exportparts: props.exportparts,
36
+ for: props.htmlFor,
37
+ part: props.part,
38
+ tabindex: props.tabIndex,
39
+ disabled: props.disabled ? true : undefined,
40
+ style: { ...props.style },
41
+ },
42
+ props.children,
43
+ );
44
+ });
@@ -50,8 +50,8 @@ export interface ForgeAiAssistantResponseProps extends Pick<
50
50
  event: CustomEvent<CustomEvent<{ responseId: string }>>,
51
51
  ) => void;
52
52
 
53
- /** Fired when refresh action is clicked */
54
- onForgeAiAssistantResponseRefresh?: (
53
+ /** Fired when resend action is clicked */
54
+ onForgeAiAssistantResponseResend?: (
55
55
  event: CustomEvent<CustomEvent<{ responseId: string }>>,
56
56
  ) => void;
57
57
 
@@ -73,7 +73,7 @@ export interface ForgeAiAssistantResponseProps extends Pick<
73
73
  *
74
74
  * ### **Events:**
75
75
  * - **forge-ai-assistant-response-copy** - Fired when copy action is clicked
76
- * - **forge-ai-assistant-response-refresh** - Fired when refresh action is clicked
76
+ * - **forge-ai-assistant-response-resend** - Fired when resend action is clicked
77
77
  * - **forge-ai-assistant-response-thumbs-up** - Fired when thumbs up is clicked
78
78
  * - **forge-ai-assistant-response-thumbs-down** - Fired when thumbs down is clicked
79
79
  */
@@ -14,8 +14,8 @@ export const ForgeAiAssistantResponse = forwardRef((props, forwardedRef) => {
14
14
  );
15
15
  useEventListener(
16
16
  ref,
17
- "forge-ai-assistant-response-refresh",
18
- props.onForgeAiAssistantResponseRefresh,
17
+ "forge-ai-assistant-response-resend",
18
+ props.onForgeAiAssistantResponseResend,
19
19
  );
20
20
  useEventListener(
21
21
  ref,
@@ -30,6 +30,9 @@ export interface ForgeAiChatHeaderProps extends Pick<
30
30
  /** Indicates the current expanded state for displaying the appropriate expand/collapse icon */
31
31
  expanded?: boolean;
32
32
 
33
+ /** Disables the agent selector (e.g., during streaming) */
34
+ disableAgentSelector?: boolean;
35
+
33
36
  /** Controls which minimize icon to display */
34
37
  minimizeIcon?: ForgeAiChatHeaderElement["minimizeIcon"];
35
38
 
@@ -48,6 +51,9 @@ export interface ForgeAiChatHeaderProps extends Pick<
48
51
  /** The title text to display in the header (default: 'AI Assistant') */
49
52
  titleText?: ForgeAiChatHeaderElement["titleText"];
50
53
 
54
+ /** ID of the currently selected agent */
55
+ selectedAgentId?: ForgeAiChatHeaderElement["selectedAgentId"];
56
+
51
57
  /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
52
58
  className?: string;
53
59
 
@@ -72,12 +78,18 @@ export interface ForgeAiChatHeaderProps extends Pick<
72
78
  /** Agent information to display in the info dialog */
73
79
  agentInfo?: ForgeAiChatHeaderElement["agentInfo"];
74
80
 
81
+ /** Array of available agents for the agent selector */
82
+ agents?: ForgeAiChatHeaderElement["agents"];
83
+
75
84
  /** Fired when the export option is selected */
76
85
  onForgeAiChatHeaderExport?: (event: CustomEvent) => void;
77
86
 
78
87
  /** Fired when the clear chat option is selected */
79
88
  onForgeAiChatHeaderClear?: (event: CustomEvent) => void;
80
89
 
90
+ /** undefined */
91
+ onForgeAiChatHeaderAgentChange?: (event: CustomEvent) => void;
92
+
81
93
  /** Fired when the expand button is clicked */
82
94
  onForgeAiChatHeaderExpand?: (event: CustomEvent) => void;
83
95
 
@@ -93,6 +105,7 @@ export interface ForgeAiChatHeaderProps extends Pick<
93
105
  * ### **Events:**
94
106
  * - **forge-ai-chat-header-export** - Fired when the export option is selected
95
107
  * - **forge-ai-chat-header-clear** - Fired when the clear chat option is selected
108
+ * - **forge-ai-chat-header-agent-change**
96
109
  * - **forge-ai-chat-header-expand** - Fired when the expand button is clicked
97
110
  * - **forge-ai-chat-header-minimize** - Fired when the minimize button is clicked
98
111
  *
@@ -8,13 +8,16 @@ export const ForgeAiChatHeader = forwardRef((props, forwardedRef) => {
8
8
  showExpandButton,
9
9
  showMinimizeButton,
10
10
  expanded,
11
+ disableAgentSelector,
11
12
  minimizeIcon,
12
13
  options,
13
14
  exportOption,
14
15
  clearOption,
15
16
  headingLevel,
16
17
  titleText,
18
+ selectedAgentId,
17
19
  agentInfo,
20
+ agents,
18
21
  ...filteredProps
19
22
  } = props;
20
23
 
@@ -29,6 +32,11 @@ export const ForgeAiChatHeader = forwardRef((props, forwardedRef) => {
29
32
  "forge-ai-chat-header-clear",
30
33
  props.onForgeAiChatHeaderClear,
31
34
  );
35
+ useEventListener(
36
+ ref,
37
+ "forge-ai-chat-header-agent-change",
38
+ props.onForgeAiChatHeaderAgentChange,
39
+ );
32
40
  useEventListener(
33
41
  ref,
34
42
  "forge-ai-chat-header-expand",
@@ -42,6 +50,7 @@ export const ForgeAiChatHeader = forwardRef((props, forwardedRef) => {
42
50
 
43
51
  /** Properties - run whenever a property has changed */
44
52
  useProperties(ref, "agentInfo", props.agentInfo);
53
+ useProperties(ref, "agents", props.agents);
45
54
 
46
55
  return React.createElement(
47
56
  "forge-ai-chat-header",
@@ -61,6 +70,7 @@ export const ForgeAiChatHeader = forwardRef((props, forwardedRef) => {
61
70
  "clear-option": props.clearOption || props["clear-option"],
62
71
  "heading-level": props.headingLevel || props["heading-level"],
63
72
  "title-text": props.titleText || props["title-text"],
73
+ "selected-agent-id": props.selectedAgentId || props["selected-agent-id"],
64
74
  class: props.className,
65
75
  exportparts: props.exportparts,
66
76
  for: props.htmlFor,
@@ -69,6 +79,7 @@ export const ForgeAiChatHeader = forwardRef((props, forwardedRef) => {
69
79
  "show-expand-button": props.showExpandButton ? true : undefined,
70
80
  "show-minimize-button": props.showMinimizeButton ? true : undefined,
71
81
  expanded: props.expanded ? true : undefined,
82
+ "disable-agent-selector": props.disableAgentSelector ? true : undefined,
72
83
  style: { ...props.style },
73
84
  },
74
85
  props.children,
@@ -51,6 +51,5 @@ export interface ForgeAiChatInterfaceProps extends Pick<
51
51
  * - **suggestions** - Slot for AI suggestions component
52
52
  * - **attachments** - Slot for file attachments component
53
53
  * - **prompt** - Slot for AI prompt component
54
- * - **confirmation** - Slot for confirmation prompt overlay
55
54
  */
56
55
  export const ForgeAiChatInterface: React.ForwardRefExoticComponent<ForgeAiChatInterfaceProps>;
@@ -57,6 +57,9 @@ export interface ForgeAiChatbotProps extends Pick<
57
57
  /** The disclaimer text to display below the prompt. Set to empty string, null, or undefined to hide. */
58
58
  disclaimerText?: ForgeAiChatbotElement["disclaimerText"];
59
59
 
60
+ /** undefined */
61
+ selectedAgentId?: ForgeAiChatbotElement["selectedAgentId"];
62
+
60
63
  /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
61
64
  className?: string;
62
65
 
@@ -146,6 +149,7 @@ export interface ForgeAiChatbotProps extends Pick<
146
149
  * - **clearMessages(): _void_** - Clears all messages from the chat history.
147
150
  * - **getMessages(): __** - Gets the current message history.
148
151
  * - **setMessages(messages: _ChatMessage[]_): _void_** - Sets the message history. Useful for restoring conversation state.
152
+ * - **getSelectedAgent(): __** - Gets the currently selected agent.
149
153
  * - **sendMessage(content: _string_, files: _File[]_): _Promise<void>_** - Programmatically sends a message as the user.
150
154
  * - **abort(): _void_** - Aborts the current streaming response.
151
155
  * - **scrollToBottom({ behavior }: _{ behavior?: ScrollBehavior }_): _Promise<void>_** - Scrolls the chat interface to the bottom.
@@ -154,6 +158,12 @@ export interface ForgeAiChatbotProps extends Pick<
154
158
  *
155
159
  * ### **Slots:**
156
160
  * - **header** - Slot for custom header content
161
+ * - **icon** - Slot for custom header icon (default: forge-ai-icon)
157
162
  * - **empty-state** - Slot for custom empty state content (overrides default suggestions)
163
+ *
164
+ * ### **CSS Properties:**
165
+ * - **--forge-ai-chatbot-icon-color** - The fill color for the AI icon. Defaults to `tertiary`. _(default: undefined)_
166
+ * - **--forge-ai-chatbot-suggestion-background** - The background color for suggestion buttons. Defaults to `tertiary-container`. _(default: undefined)_
167
+ * - **--forge-ai-chatbot-suggestion-foreground** - The text color for suggestion buttons. Defaults to `on-tertiary-container`. _(default: undefined)_
158
168
  */
159
169
  export const ForgeAiChatbot: React.ForwardRefExoticComponent<ForgeAiChatbotProps>;
@@ -18,6 +18,7 @@ export const ForgeAiChatbot = forwardRef((props, forwardedRef) => {
18
18
  titleText,
19
19
  headingLevel,
20
20
  disclaimerText,
21
+ selectedAgentId,
21
22
  ...filteredProps
22
23
  } = props;
23
24
 
@@ -86,6 +87,7 @@ export const ForgeAiChatbot = forwardRef((props, forwardedRef) => {
86
87
  "title-text": props.titleText || props["title-text"],
87
88
  "heading-level": props.headingLevel || props["heading-level"],
88
89
  "disclaimer-text": props.disclaimerText || props["disclaimer-text"],
90
+ "selected-agent-id": props.selectedAgentId || props["selected-agent-id"],
89
91
  class: props.className,
90
92
  exportparts: props.exportparts,
91
93
  for: props.htmlFor,
@@ -56,9 +56,9 @@ export interface ForgeAiMessageThreadProps extends Pick<
56
56
  event: CustomEvent<CustomEvent<ForgeAiMessageThreadCopyEventData>>,
57
57
  ) => void;
58
58
 
59
- /** Fired when user clicks refresh on a message */
60
- onForgeAiMessageThreadRefresh?: (
61
- event: CustomEvent<CustomEvent<ForgeAiMessageThreadRefreshEventData>>,
59
+ /** Fired when user clicks resend on a message */
60
+ onForgeAiMessageThreadResend?: (
61
+ event: CustomEvent<CustomEvent<ForgeAiMessageThreadResendEventData>>,
62
62
  ) => void;
63
63
 
64
64
  /** Fired when user gives thumbs up */
@@ -79,7 +79,7 @@ export interface ForgeAiMessageThreadProps extends Pick<
79
79
  *
80
80
  * ### **Events:**
81
81
  * - **forge-ai-message-thread-copy** - Fired when user clicks copy on a message
82
- * - **forge-ai-message-thread-refresh** - Fired when user clicks refresh on a message
82
+ * - **forge-ai-message-thread-resend** - Fired when user clicks resend on a message
83
83
  * - **forge-ai-message-thread-thumbs-up** - Fired when user gives thumbs up
84
84
  * - **forge-ai-message-thread-thumbs-down** - Fired when user gives thumbs down
85
85
  *
@@ -20,8 +20,8 @@ export const ForgeAiMessageThread = forwardRef((props, forwardedRef) => {
20
20
  );
21
21
  useEventListener(
22
22
  ref,
23
- "forge-ai-message-thread-refresh",
24
- props.onForgeAiMessageThreadRefresh,
23
+ "forge-ai-message-thread-resend",
24
+ props.onForgeAiMessageThreadResend,
25
25
  );
26
26
  useEventListener(
27
27
  ref,
@@ -1,9 +1,9 @@
1
1
  import React from "react";
2
- import { ForgeAiActionsToolbar as ForgeAiActionsToolbarElement } from "@tylertech/forge-ai/ai-actions-toolbar";
2
+ import { ForgeAiResponseMessageToolbar as ForgeAiResponseMessageToolbarElement } from "@tylertech/forge-ai/ai-response-message-toolbar";
3
3
 
4
- export type { ForgeAiActionsToolbarElement };
4
+ export type { ForgeAiResponseMessageToolbarElement };
5
5
 
6
- export interface ForgeAiActionsToolbarProps extends Pick<
6
+ export interface ForgeAiResponseMessageToolbarProps extends Pick<
7
7
  React.AllHTMLAttributes<HTMLElement>,
8
8
  | "children"
9
9
  | "dir"
@@ -22,7 +22,10 @@ export interface ForgeAiActionsToolbarProps extends Pick<
22
22
  enableReactions?: boolean;
23
23
 
24
24
  /** undefined */
25
- feedbackType?: ForgeAiActionsToolbarElement["feedbackType"];
25
+ feedbackType?: ForgeAiResponseMessageToolbarElement["feedbackType"];
26
+
27
+ /** undefined */
28
+ feedbackReason?: ForgeAiResponseMessageToolbarElement["feedbackReason"];
26
29
 
27
30
  /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
28
31
  className?: string;
@@ -46,13 +49,17 @@ export interface ForgeAiActionsToolbarProps extends Pick<
46
49
  tabIndex?: number;
47
50
 
48
51
  /** Fired when an action button is clicked. The detail contains the action type. */
49
- onForgeAiActionsToolbarAction?: (
50
- event: CustomEvent<CustomEvent<ForgeAiActionsToolbarActionEventData>>,
52
+ onForgeAiResponseMessageToolbarAction?: (
53
+ event: CustomEvent<
54
+ CustomEvent<ForgeAiResponseMessageToolbarActionEventData>
55
+ >,
51
56
  ) => void;
52
57
 
53
58
  /** Fired when feedback is submitted. The detail contains the action and optional feedback text. */
54
- onForgeAiActionsToolbarFeedback?: (
55
- event: CustomEvent<CustomEvent<ForgeAiActionsToolbarFeedbackEventData>>,
59
+ onForgeAiResponseMessageToolbarFeedback?: (
60
+ event: CustomEvent<
61
+ CustomEvent<ForgeAiResponseMessageToolbarFeedbackEventData>
62
+ >,
56
63
  ) => void;
57
64
  }
58
65
 
@@ -62,7 +69,7 @@ export interface ForgeAiActionsToolbarProps extends Pick<
62
69
  *
63
70
  *
64
71
  * ### **Events:**
65
- * - **forge-ai-actions-toolbar-action** - Fired when an action button is clicked. The detail contains the action type.
66
- * - **forge-ai-actions-toolbar-feedback** - Fired when feedback is submitted. The detail contains the action and optional feedback text.
72
+ * - **forge-ai-response-message-toolbar-action** - Fired when an action button is clicked. The detail contains the action type.
73
+ * - **forge-ai-response-message-toolbar-feedback** - Fired when feedback is submitted. The detail contains the action and optional feedback text.
67
74
  */
68
- export const ForgeAiActionsToolbar: React.ForwardRefExoticComponent<ForgeAiActionsToolbarProps>;
75
+ export const ForgeAiResponseMessageToolbar: React.ForwardRefExoticComponent<ForgeAiResponseMessageToolbarProps>;
@@ -0,0 +1,48 @@
1
+ import React, { forwardRef, useRef, useEffect } from "react";
2
+ import "@tylertech/forge-ai/ai-response-message-toolbar";
3
+ import { useEventListener } from "./react-utils.js";
4
+
5
+ export const ForgeAiResponseMessageToolbar = forwardRef(
6
+ (props, forwardedRef) => {
7
+ const ref = useRef(null);
8
+ const { enableReactions, feedbackType, feedbackReason, ...filteredProps } =
9
+ props;
10
+
11
+ /** Event listeners - run once */
12
+ useEventListener(
13
+ ref,
14
+ "forge-ai-response-message-toolbar-action",
15
+ props.onForgeAiResponseMessageToolbarAction,
16
+ );
17
+ useEventListener(
18
+ ref,
19
+ "forge-ai-response-message-toolbar-feedback",
20
+ props.onForgeAiResponseMessageToolbarFeedback,
21
+ );
22
+
23
+ return React.createElement(
24
+ "forge-ai-response-message-toolbar",
25
+ {
26
+ ref: (node) => {
27
+ ref.current = node;
28
+ if (typeof forwardedRef === "function") {
29
+ forwardedRef(node);
30
+ } else if (forwardedRef) {
31
+ forwardedRef.current = node;
32
+ }
33
+ },
34
+ ...filteredProps,
35
+ "feedback-type": props.feedbackType || props["feedback-type"],
36
+ "feedback-reason": props.feedbackReason || props["feedback-reason"],
37
+ class: props.className,
38
+ exportparts: props.exportparts,
39
+ for: props.htmlFor,
40
+ part: props.part,
41
+ tabindex: props.tabIndex,
42
+ "enable-reactions": props.enableReactions ? true : undefined,
43
+ style: { ...props.style },
44
+ },
45
+ props.children,
46
+ );
47
+ },
48
+ );
@@ -60,6 +60,7 @@ export interface ForgeAiSuggestionsProps extends Pick<
60
60
  * - **forge-ai-suggestions-select** - Fired when a suggestion is selected.
61
61
  *
62
62
  * ### **CSS Properties:**
63
- * - **--forge-ai-suggestion-max-width** - The maximum width of the suggestion buttons in inline layout. _(default: undefined)_
63
+ * - **--forge-ai-suggestions-inline-size** - The maximum inline size of the suggestions container. _(default: undefined)_
64
+ * - **--forge-ai-suggestion-max-width** - The maximum width of the suggestion buttons in inline layout. _(default: undefined)_
64
65
  */
65
66
  export const ForgeAiSuggestions: React.ForwardRefExoticComponent<ForgeAiSuggestionsProps>;
@@ -0,0 +1,71 @@
1
+ import React from "react";
2
+ import { ForgeAiUserMessageToolbar as ForgeAiUserMessageToolbarElement } from "@tylertech/forge-ai/ai-user-message-toolbar";
3
+
4
+ export type { ForgeAiUserMessageToolbarElement };
5
+
6
+ export interface ForgeAiUserMessageToolbarProps extends Pick<
7
+ React.AllHTMLAttributes<HTMLElement>,
8
+ | "children"
9
+ | "dir"
10
+ | "hidden"
11
+ | "id"
12
+ | "lang"
13
+ | "slot"
14
+ | "style"
15
+ | "title"
16
+ | "translate"
17
+ | "onClick"
18
+ | "onFocus"
19
+ | "onBlur"
20
+ > {
21
+ /** undefined */
22
+ streaming?: boolean;
23
+
24
+ /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
25
+ className?: string;
26
+
27
+ /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
28
+ exportparts?: string;
29
+
30
+ /** Used for labels to link them with their inputs (using input id). */
31
+ htmlFor?: string;
32
+
33
+ /** Used to help React identify which items have changed, are added, or are removed within a list. */
34
+ key?: number | string;
35
+
36
+ /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
37
+ part?: string;
38
+
39
+ /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
40
+ ref?: any;
41
+
42
+ /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
43
+ tabIndex?: number;
44
+
45
+ /** Fired when copy button is clicked */
46
+ onForgeAiUserMessageToolbarCopy?: (
47
+ event: CustomEvent<CustomEvent<void>>,
48
+ ) => void;
49
+
50
+ /** Fired when resend button is clicked */
51
+ onForgeAiUserMessageToolbarResend?: (
52
+ event: CustomEvent<CustomEvent<void>>,
53
+ ) => void;
54
+
55
+ /** Fired when edit button is clicked */
56
+ onForgeAiUserMessageToolbarEdit?: (
57
+ event: CustomEvent<CustomEvent<void>>,
58
+ ) => void;
59
+ }
60
+
61
+ /**
62
+ * Toolbar for user message actions including copy, resend, and edit.
63
+ * ---
64
+ *
65
+ *
66
+ * ### **Events:**
67
+ * - **forge-ai-user-message-toolbar-copy** - Fired when copy button is clicked
68
+ * - **forge-ai-user-message-toolbar-resend** - Fired when resend button is clicked
69
+ * - **forge-ai-user-message-toolbar-edit** - Fired when edit button is clicked
70
+ */
71
+ export const ForgeAiUserMessageToolbar: React.ForwardRefExoticComponent<ForgeAiUserMessageToolbarProps>;
@@ -1,25 +1,30 @@
1
1
  import React, { forwardRef, useRef, useEffect } from "react";
2
- import "@tylertech/forge-ai/ai-actions-toolbar";
2
+ import "@tylertech/forge-ai/ai-user-message-toolbar";
3
3
  import { useEventListener } from "./react-utils.js";
4
4
 
5
- export const ForgeAiActionsToolbar = forwardRef((props, forwardedRef) => {
5
+ export const ForgeAiUserMessageToolbar = forwardRef((props, forwardedRef) => {
6
6
  const ref = useRef(null);
7
- const { enableReactions, feedbackType, ...filteredProps } = props;
7
+ const { streaming, ...filteredProps } = props;
8
8
 
9
9
  /** Event listeners - run once */
10
10
  useEventListener(
11
11
  ref,
12
- "forge-ai-actions-toolbar-action",
13
- props.onForgeAiActionsToolbarAction,
12
+ "forge-ai-user-message-toolbar-copy",
13
+ props.onForgeAiUserMessageToolbarCopy,
14
14
  );
15
15
  useEventListener(
16
16
  ref,
17
- "forge-ai-actions-toolbar-feedback",
18
- props.onForgeAiActionsToolbarFeedback,
17
+ "forge-ai-user-message-toolbar-resend",
18
+ props.onForgeAiUserMessageToolbarResend,
19
+ );
20
+ useEventListener(
21
+ ref,
22
+ "forge-ai-user-message-toolbar-edit",
23
+ props.onForgeAiUserMessageToolbarEdit,
19
24
  );
20
25
 
21
26
  return React.createElement(
22
- "forge-ai-actions-toolbar",
27
+ "forge-ai-user-message-toolbar",
23
28
  {
24
29
  ref: (node) => {
25
30
  ref.current = node;
@@ -30,13 +35,12 @@ export const ForgeAiActionsToolbar = forwardRef((props, forwardedRef) => {
30
35
  }
31
36
  },
32
37
  ...filteredProps,
33
- "feedback-type": props.feedbackType || props["feedback-type"],
34
38
  class: props.className,
35
39
  exportparts: props.exportparts,
36
40
  for: props.htmlFor,
37
41
  part: props.part,
38
42
  tabindex: props.tabIndex,
39
- "enable-reactions": props.enableReactions ? true : undefined,
43
+ streaming: props.streaming ? true : undefined,
40
44
  style: { ...props.style },
41
45
  },
42
46
  props.children,
package/dist/index.d.ts CHANGED
@@ -1,12 +1,12 @@
1
- export * from "./ForgeAiActionsToolbar.js";
2
1
  export * from "./ForgeAiAgentInfo.js";
3
2
  export * from "./ForgeAiAssistantResponse.js";
4
- export * from "./ForgeAiArtifact.js";
5
- export * from "./ForgeAiButton.js";
3
+ export * from "./ForgeAiAgentSelector.js";
6
4
  export * from "./ForgeAiAttachment.js";
7
- export * from "./ForgeAiChatHeader.js";
5
+ export * from "./ForgeAiButton.js";
6
+ export * from "./ForgeAiArtifact.js";
8
7
  export * from "./ForgeAiChainOfThought.js";
9
8
  export * from "./ForgeAiChatInterface.js";
9
+ export * from "./ForgeAiChatHeader.js";
10
10
  export * from "./ForgeAiChatbotToolCall.js";
11
11
  export * from "./ForgeAiChatbot.js";
12
12
  export * from "./ForgeAiConfirmationPrompt.js";
@@ -18,8 +18,8 @@ export * from "./ForgeAiDropdownMenu.js";
18
18
  export * from "./ForgeAiEmbeddedChat.js";
19
19
  export * from "./ForgeAiEmptyState.js";
20
20
  export * from "./ForgeAiErrorMessage.js";
21
- export * from "./ForgeAiEventStreamViewer.js";
22
21
  export * from "./ForgeAiFab.js";
22
+ export * from "./ForgeAiEventStreamViewer.js";
23
23
  export * from "./ForgeAiFilePicker.js";
24
24
  export * from "./ForgeAiFloatingChat.js";
25
25
  export * from "./ForgeAiGradientContainer.js";
@@ -31,13 +31,15 @@ export * from "./ForgeAiPrompt.js";
31
31
  export * from "./ForgeAiReasoning.js";
32
32
  export * from "./ForgeAiReasoningHeader.js";
33
33
  export * from "./ForgeAiResponseMessage.js";
34
- export * from "./ForgeAiSidebar.js";
34
+ export * from "./ForgeAiResponseMessageToolbar.js";
35
35
  export * from "./ForgeAiSidebarChat.js";
36
- export * from "./ForgeAiSpinner.js";
36
+ export * from "./ForgeAiSidebar.js";
37
37
  export * from "./ForgeAiSlashCommandMenu.js";
38
+ export * from "./ForgeAiSpinner.js";
39
+ export * from "./ForgeAiSuggestions.js";
38
40
  export * from "./ForgeAiThinkingIndicator.js";
39
41
  export * from "./ForgeAiThreads.js";
40
- export * from "./ForgeAiSuggestions.js";
42
+ export * from "./ForgeAiUserMessageToolbar.js";
41
43
  export * from "./ForgeAiUserMessage.js";
42
44
  export * from "./ForgeAiVoiceInput.js";
43
45
  export * from "./ForgeAiThoughtBase.js";
@@ -46,8 +48,8 @@ export * from "./ForgeAiThoughtImage.js";
46
48
  export * from "./ForgeAiThoughtSearchResult.js";
47
49
  export * from "./ForgePromptButton.js";
48
50
  export * from "./ForgeAiReasoningContent.js";
49
- export * from "./ForgeAiOverlay.js";
50
- export * from "./ForgeAiToolDataTable.js";
51
51
  export * from "./ForgeAiPopover.js";
52
52
  export * from "./ForgeAiTooltip.js";
53
+ export * from "./ForgeAiOverlay.js";
54
+ export * from "./ForgeAiToolDataTable.js";
53
55
  export * from "./ForgeAiPaginator.js";
package/dist/index.js CHANGED
@@ -1,12 +1,12 @@
1
- export * from "./ForgeAiActionsToolbar.js";
2
1
  export * from "./ForgeAiAgentInfo.js";
3
2
  export * from "./ForgeAiAssistantResponse.js";
4
- export * from "./ForgeAiArtifact.js";
5
- export * from "./ForgeAiButton.js";
3
+ export * from "./ForgeAiAgentSelector.js";
6
4
  export * from "./ForgeAiAttachment.js";
7
- export * from "./ForgeAiChatHeader.js";
5
+ export * from "./ForgeAiButton.js";
6
+ export * from "./ForgeAiArtifact.js";
8
7
  export * from "./ForgeAiChainOfThought.js";
9
8
  export * from "./ForgeAiChatInterface.js";
9
+ export * from "./ForgeAiChatHeader.js";
10
10
  export * from "./ForgeAiChatbotToolCall.js";
11
11
  export * from "./ForgeAiChatbot.js";
12
12
  export * from "./ForgeAiConfirmationPrompt.js";
@@ -18,8 +18,8 @@ export * from "./ForgeAiDropdownMenu.js";
18
18
  export * from "./ForgeAiEmbeddedChat.js";
19
19
  export * from "./ForgeAiEmptyState.js";
20
20
  export * from "./ForgeAiErrorMessage.js";
21
- export * from "./ForgeAiEventStreamViewer.js";
22
21
  export * from "./ForgeAiFab.js";
22
+ export * from "./ForgeAiEventStreamViewer.js";
23
23
  export * from "./ForgeAiFilePicker.js";
24
24
  export * from "./ForgeAiFloatingChat.js";
25
25
  export * from "./ForgeAiGradientContainer.js";
@@ -31,13 +31,15 @@ export * from "./ForgeAiPrompt.js";
31
31
  export * from "./ForgeAiReasoning.js";
32
32
  export * from "./ForgeAiReasoningHeader.js";
33
33
  export * from "./ForgeAiResponseMessage.js";
34
- export * from "./ForgeAiSidebar.js";
34
+ export * from "./ForgeAiResponseMessageToolbar.js";
35
35
  export * from "./ForgeAiSidebarChat.js";
36
- export * from "./ForgeAiSpinner.js";
36
+ export * from "./ForgeAiSidebar.js";
37
37
  export * from "./ForgeAiSlashCommandMenu.js";
38
+ export * from "./ForgeAiSpinner.js";
39
+ export * from "./ForgeAiSuggestions.js";
38
40
  export * from "./ForgeAiThinkingIndicator.js";
39
41
  export * from "./ForgeAiThreads.js";
40
- export * from "./ForgeAiSuggestions.js";
42
+ export * from "./ForgeAiUserMessageToolbar.js";
41
43
  export * from "./ForgeAiUserMessage.js";
42
44
  export * from "./ForgeAiVoiceInput.js";
43
45
  export * from "./ForgeAiThoughtBase.js";
@@ -46,8 +48,8 @@ export * from "./ForgeAiThoughtImage.js";
46
48
  export * from "./ForgeAiThoughtSearchResult.js";
47
49
  export * from "./ForgePromptButton.js";
48
50
  export * from "./ForgeAiReasoningContent.js";
49
- export * from "./ForgeAiOverlay.js";
50
- export * from "./ForgeAiToolDataTable.js";
51
51
  export * from "./ForgeAiPopover.js";
52
52
  export * from "./ForgeAiTooltip.js";
53
+ export * from "./ForgeAiOverlay.js";
54
+ export * from "./ForgeAiToolDataTable.js";
53
55
  export * from "./ForgeAiPaginator.js";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tylertech/forge-ai-react",
3
- "version": "0.8.0",
3
+ "version": "0.9.0",
4
4
  "description": "A React adapter for Tyler Forge™ AI Web Components.",
5
5
  "repository": "tyler-technologies-oss/forge-ai",
6
6
  "author": "Tyler Technologies, Inc.",
@@ -16,7 +16,7 @@
16
16
  },
17
17
  "peerDependencies": {
18
18
  "react": ">=17.0.0",
19
- "@tylertech/forge-ai": "^0.8.0"
19
+ "@tylertech/forge-ai": "^0.9.0"
20
20
  },
21
21
  "devDependencies": {
22
22
  "@repo/prettier-config": "",
@@ -44,7 +44,7 @@
44
44
  "typescript": "~5.8.3",
45
45
  "vite": "7.3.0",
46
46
  "vite-tsconfig-paths": "6.0.3",
47
- "@tylertech/forge-ai": "^0.8.0"
47
+ "@tylertech/forge-ai": "^0.9.0"
48
48
  },
49
49
  "scripts": {
50
50
  "predev": "pnpm run build",