@tylertech/forge-ai-react 0.5.0 → 0.6.0

package/dist/ForgeAiChatHeader.d.ts

@@ -96,6 +96,9 @@ export interface ForgeAiChatHeaderProps extends Pick<
  * - **forge-ai-chat-header-expand** - Fired when the expand button is clicked
  * - **forge-ai-chat-header-minimize** - Fired when the minimize button is clicked
  *
+ * ### **Methods:**
+ *  - **showAgentInfo(): _void_** - Shows the agent info modal
+ *
  * ### **Slots:**
  *  - **icon** - Slot for custom icon (default: forge-ai-icon)
  */

package/dist/ForgeAiChatbot.d.ts

@@ -30,6 +30,9 @@ export interface ForgeAiChatbotProps extends Pick<
   /** undefined */
   enableReactions?: boolean;
 
+  /** undefined */
+  debugMode?: boolean;
+
   /** undefined */
   fileUpload?: ForgeAiChatbotElement["fileUpload"];
 

package/dist/ForgeAiChatbot.js

@@ -9,6 +9,7 @@ export const ForgeAiChatbot = forwardRef((props, forwardedRef) => {
     showMinimizeButton,
     expanded,
     enableReactions,
+    debugMode,
     fileUpload,
     voiceInput,
     placeholder,
@@ -85,6 +86,7 @@ export const ForgeAiChatbot = forwardRef((props, forwardedRef) => {
       "show-minimize-button": props.showMinimizeButton ? true : undefined,
       expanded: props.expanded ? true : undefined,
       "enable-reactions": props.enableReactions ? true : undefined,
+      "debug-mode": props.debugMode ? true : undefined,
       style: { ...props.style },
     },
     props.children,

package/dist/ForgeAiChatbotToolCall.d.ts

@@ -21,6 +21,9 @@ export interface ForgeAiChatbotToolCallProps extends Pick<
   | "onFocus"
   | "onBlur"
 > {
+  /** undefined */
+  debugMode?: boolean;
+
   /** 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()`. */
   className?: string;
 

package/dist/ForgeAiChatbotToolCall.js

@@ -4,6 +4,7 @@ import { useEventListener } from "./react-utils.js";
 
 export const ForgeAiChatbotToolCall = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
+  const { debugMode, ...filteredProps } = props;
 
   /** Event listeners - run once */
   useEventListener(
@@ -23,12 +24,13 @@ export const ForgeAiChatbotToolCall = forwardRef((props, forwardedRef) => {
           forwardedRef.current = node;
         }
       },
-      ...props,
+      ...filteredProps,
       class: props.className,
       exportparts: props.exportparts,
       for: props.htmlFor,
       part: props.part,
       tabindex: props.tabIndex,
+      "debug-mode": props.debugMode ? true : undefined,
       style: { ...props.style },
     },
     props.children,

package/dist/ForgeAiDropdownMenu.d.ts

@@ -92,11 +92,9 @@ Only applies to root-level menus; submenus always use 'right-start'. */
  * - **end** - The end icon slot for additional trigger button content.
  *
  * ### **CSS Properties:**
- *  - **--ai-dropdown-menu-min-width** - Minimum width of the dropdown menu. _(default: undefined)_
- * - **--ai-dropdown-menu-max-width** - Maximum width of the dropdown menu. _(default: undefined)_
- * - **--ai-dropdown-menu-max-height** - Maximum height of the dropdown menu. _(default: undefined)_
- * - **--ai-dropdown-menu-padding** - Padding inside the dropdown menu. _(default: undefined)_
- * - **--ai-dropdown-menu-trigger-width** - The width of the trigger button. _(default: undefined)_
- * - **--ai-dropdown-menu-trigger-height** - The height of the trigger button. _(default: undefined)_
+ *  - **--forge-ai-dropdown-menu-min-width** - Minimum width of the dropdown menu. _(default: undefined)_
+ * - **--forge-ai-dropdown-menu-max-width** - Maximum width of the dropdown menu. _(default: undefined)_
+ * - **--forge-ai-dropdown-menu-max-height** - Maximum height of the dropdown menu. _(default: undefined)_
+ * - **--forge-ai-dropdown-menu-padding** - Padding inside the dropdown menu. _(default: undefined)_
  */
 export const ForgeAiDropdownMenu: React.ForwardRefExoticComponent<ForgeAiDropdownMenuProps>;

package/dist/ForgeAiDropdownMenuItem.d.ts

@@ -81,8 +81,6 @@ This is typically set by the parent dropdown menu component. */
  * - **submenu** - The slot for nested dropdown menu components.
  *
  * ### **CSS Properties:**
- *  - **--ai-dropdown-menu-item-submenu-open-delay** - Delay before opening submenu on hover. _(default: undefined)_
- * - **--ai-dropdown-menu-item-submenu-close-delay** - Delay before closing submenu when mouse leaves. _(default: undefined)_
- * - **--ai-dropdown-menu-item-selection-icon-size** - Size of selection and submenu icons. _(default: undefined)_
+ *  - **--forge-ai-dropdown-menu-item-selection-icon-size** - Size of selection and submenu icons. _(default: undefined)_
  */
 export const ForgeAiDropdownMenuItem: React.ForwardRefExoticComponent<ForgeAiDropdownMenuItemProps>;

package/dist/ForgeAiEventStreamViewer.d.ts

@@ -0,0 +1,48 @@
+import React from "react";
+import { ForgeAiEventStreamViewer as ForgeAiEventStreamViewerElement } from "@tylertech/forge-ai/ai-event-stream-viewer";
+
+export type { ForgeAiEventStreamViewerElement };
+
+export interface ForgeAiEventStreamViewerProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** 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()`. */
+  className?: string;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** 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. */
+  part?: string;
+
+  /** 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. */
+  ref?: any;
+
+  /** 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. */
+  tabIndex?: number;
+}
+
+/**
+ * Displays a timeline of adapter events with expandable JSON data.
+ * ---
+ *
+ */
+export const ForgeAiEventStreamViewer: React.ForwardRefExoticComponent<ForgeAiEventStreamViewerProps>;

package/dist/ForgeAiEventStreamViewer.js

@@ -0,0 +1,18 @@
+import React, { forwardRef } from "react";
+import "@tylertech/forge-ai/ai-event-stream-viewer";
+
+export const ForgeAiEventStreamViewer = forwardRef((props, forwardedRef) => {
+  return React.createElement(
+    "forge-ai-event-stream-viewer",
+    {
+      ...props,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/dist/ForgeAiFilePicker.d.ts

@@ -81,9 +81,5 @@ export interface ForgeAiFilePickerProps extends Pick<
  * ### **Slots:**
  *  - _default_ - The default slot for button content when no file is selected.
  * - **icon** - The icon slot for icon-button variant.
- *
- * ### **CSS Properties:**
- *  - **--ai-file-picker-width** - The width of the file picker button. _(default: undefined)_
- * - **--ai-file-picker-height** - The height of the file picker button. _(default: undefined)_
  */
 export const ForgeAiFilePicker: React.ForwardRefExoticComponent<ForgeAiFilePickerProps>;

package/dist/ForgeAiIconButton.d.ts

@@ -0,0 +1,51 @@
+import React from "react";
+import { ForgeAiIconButton as ForgeAiIconButtonElement } from "@tylertech/forge-ai/ai-icon-button";
+
+export type { ForgeAiIconButtonElement };
+
+export interface ForgeAiIconButtonProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** Whether the button is disabled */
+  disabled?: boolean;
+
+  /** 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()`. */
+  className?: string;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** 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. */
+  part?: string;
+
+  /** 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. */
+  ref?: any;
+
+  /** 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. */
+  tabIndex?: number;
+}
+
+/**
+ *
+ * ---
+ *
+ */
+export const ForgeAiIconButton: React.ForwardRefExoticComponent<ForgeAiIconButtonProps>;

package/dist/ForgeAiIconButton.js

@@ -0,0 +1,21 @@
+import React, { forwardRef } from "react";
+import "@tylertech/forge-ai/ai-icon-button";
+
+export const ForgeAiIconButton = forwardRef((props, forwardedRef) => {
+  const { disabled, ...filteredProps } = props;
+
+  return React.createElement(
+    "forge-ai-icon-button",
+    {
+      ...filteredProps,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      disabled: props.disabled ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/dist/ForgeAiMessageThread.d.ts

@@ -24,6 +24,9 @@ export interface ForgeAiMessageThreadProps extends Pick<
   /** undefined */
   showThinking?: boolean;
 
+  /** undefined */
+  debugMode?: boolean;
+
   /** undefined */
   autoScroll?: ForgeAiMessageThreadElement["autoScroll"];
 

package/dist/ForgeAiMessageThread.js

@@ -4,7 +4,13 @@ import { useEventListener } from "./react-utils.js";
 
 export const ForgeAiMessageThread = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
-  const { enableReactions, showThinking, autoScroll, ...filteredProps } = props;
+  const {
+    enableReactions,
+    showThinking,
+    debugMode,
+    autoScroll,
+    ...filteredProps
+  } = props;
 
   /** Event listeners - run once */
   useEventListener(
@@ -48,6 +54,7 @@ export const ForgeAiMessageThread = forwardRef((props, forwardedRef) => {
       tabindex: props.tabIndex,
       "enable-reactions": props.enableReactions ? true : undefined,
       "show-thinking": props.showThinking ? true : undefined,
+      "debug-mode": props.debugMode ? true : undefined,
       style: { ...props.style },
     },
     props.children,

package/dist/ForgeAiOverlay.d.ts

@@ -36,6 +36,10 @@ export interface ForgeAiOverlayProps extends Pick<
   /** The arrow element to position relative to the overlay. */
   arrowElement?: ForgeAiOverlayElement["arrowElement"];
 
+  /** The offset of the overlay from the anchor element.
+Can be a number (main axis offset) or an object with mainAxis, crossAxis, and alignmentAxis properties. */
+  offset?: ForgeAiOverlayElement["offset"];
+
   /** The dismiss mode for the overlay.
 - 'auto': Automatically closes on outside clicks and Escape key
 - 'manual': Requires manual control to close */
@@ -70,11 +74,5 @@ export interface ForgeAiOverlayProps extends Pick<
  *
  * ### **Slots:**
  *  - _default_ - The default slot for overlay content.
- *
- * ### **CSS Properties:**
- *  - **--ai-overlay-max-width** - The maximum width of the overlay. _(default: undefined)_
- * - **--ai-overlay-max-height** - The maximum height of the overlay. _(default: undefined)_
- * - **--ai-overlay-min-width** - The minimum width of the overlay. _(default: undefined)_
- * - **--ai-overlay-min-height** - The minimum height of the overlay. _(default: undefined)_
  */
 export const ForgeAiOverlay: React.ForwardRefExoticComponent<ForgeAiOverlayProps>;

package/dist/ForgeAiOverlay.js

@@ -9,6 +9,7 @@ export const ForgeAiOverlay = forwardRef((props, forwardedRef) => {
     anchor,
     placement,
     arrowElement,
+    offset,
     dismissMode,
     ...filteredProps
   } = props;
@@ -20,6 +21,7 @@ export const ForgeAiOverlay = forwardRef((props, forwardedRef) => {
       anchor: props.anchor,
       placement: props.placement,
       arrowElement: props.arrowElement,
+      offset: props.offset,
       "dismiss-mode": props.dismissMode || props["dismiss-mode"],
       class: props.className,
       exportparts: props.exportparts,

package/dist/ForgeAiPaginator.d.ts

@@ -0,0 +1,66 @@
+import React from "react";
+import {
+  ForgeAiPaginator as ForgeAiPaginatorElement,
+  CustomEvent,
+} from "@tylertech/forge-ai/tools/ai-paginator";
+
+export type { ForgeAiPaginatorElement, CustomEvent };
+
+export interface ForgeAiPaginatorProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** undefined */
+  disabled?: boolean;
+
+  /** undefined */
+  currentPage?: ForgeAiPaginatorElement["currentPage"];
+
+  /** undefined */
+  totalPages?: ForgeAiPaginatorElement["totalPages"];
+
+  /** 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()`. */
+  className?: string;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** 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. */
+  part?: string;
+
+  /** 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. */
+  ref?: any;
+
+  /** 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. */
+  tabIndex?: number;
+
+  /** undefined */
+  onPageChange?: (event: CustomEvent) => void;
+}
+
+/**
+ *
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **page-change**
+ */
+export const ForgeAiPaginator: React.ForwardRefExoticComponent<ForgeAiPaginatorProps>;

package/dist/ForgeAiPaginator.js

@@ -0,0 +1,36 @@
+import React, { forwardRef, useRef, useEffect } from "react";
+import "@tylertech/forge-ai/tools/ai-paginator";
+import { useEventListener } from "./react-utils.js";
+
+export const ForgeAiPaginator = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { disabled, currentPage, totalPages, ...filteredProps } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "page-change", props.onPageChange);
+
+  return React.createElement(
+    "forge-ai-paginator",
+    {
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      ...filteredProps,
+      "current-page": props.currentPage || props["current-page"],
+      "total-pages": props.totalPages || props["total-pages"],
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      disabled: props.disabled ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/dist/ForgeAiPopover.d.ts

@@ -36,6 +36,10 @@ export interface ForgeAiPopoverProps extends Pick<
   /** The placement of the popover relative to the anchor. */
   placement?: ForgeAiPopoverElement["placement"];
 
+  /** The offset of the popover from the anchor element.
+Can be a number (main axis offset) or an object with mainAxis, crossAxis, and alignmentAxis properties. */
+  offset?: ForgeAiPopoverElement["offset"];
+
   /** The dismiss mode for the popover.
 - 'auto': Automatically closes on outside clicks and Escape key
 - 'manual': Requires manual control to close */
@@ -70,11 +74,5 @@ export interface ForgeAiPopoverProps extends Pick<
  *
  * ### **Slots:**
  *  - _default_ - The default slot for popover content.
- *
- * ### **CSS Properties:**
- *  - **--ai-popover-max-width** - The maximum width of the popover. _(default: undefined)_
- * - **--ai-popover-max-height** - The maximum height of the popover. _(default: undefined)_
- * - **--ai-popover-min-width** - The minimum width of the popover. _(default: undefined)_
- * - **--ai-popover-min-height** - The minimum height of the popover. _(default: undefined)_
  */
 export const ForgeAiPopover: React.ForwardRefExoticComponent<ForgeAiPopoverProps>;

package/dist/ForgeAiPopover.js

@@ -9,6 +9,7 @@ export const ForgeAiPopover = forwardRef((props, forwardedRef) => {
     arrow,
     anchor,
     placement,
+    offset,
     dismissMode,
     ...filteredProps
   } = props;
@@ -19,6 +20,7 @@ export const ForgeAiPopover = forwardRef((props, forwardedRef) => {
       ...filteredProps,
       anchor: props.anchor,
       placement: props.placement,
+      offset: props.offset,
       "dismiss-mode": props.dismissMode || props["dismiss-mode"],
       class: props.className,
       exportparts: props.exportparts,

package/dist/ForgeAiPrompt.d.ts

@@ -1,7 +1,11 @@
 import React from "react";
-import { ForgeAiPrompt as ForgeAiPromptElement } from "@tylertech/forge-ai/ai-prompt";
+import {
+  ForgeAiPrompt as ForgeAiPromptElement,
+  Event,
+  CustomEvent,
+} from "@tylertech/forge-ai/ai-prompt";
 
-export type { ForgeAiPromptElement };
+export type { ForgeAiPromptElement, Event, CustomEvent };
 
 export interface ForgeAiPromptProps extends Pick<
   React.AllHTMLAttributes<HTMLElement>,
@@ -33,6 +37,9 @@ export interface ForgeAiPromptProps extends Pick<
   /** Whether the component is in running state (shows stop button instead of send button) */
   running?: boolean;
 
+  /** Whether debug mode is active (shows debug icon button) */
+  debugMode?: boolean;
+
   /** Placeholder text for the textarea field */
   placeholder?: ForgeAiPromptElement["placeholder"];
 
@@ -63,6 +70,15 @@ export interface ForgeAiPromptProps extends Pick<
   /** 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. */
   tabIndex?: number;
 
+  /** Available slash commands */
+  slashCommands?: ForgeAiPromptElement["slashCommands"];
+
+  /** undefined */
+  onInput?: (event: CustomEvent) => void;
+
+  /** undefined */
+  onForgeAiPromptCommand?: (event: CustomEvent) => void;
+
   /** Fired when the send button is clicked or Enter is pressed (without Shift). Cancelable - if cancelled, running state is not set and input is not cleared. */
   onForgeAiPromptSend?: (
     event: CustomEvent<CustomEvent<ForgeAiPromptSendEventData>>,
@@ -78,6 +94,9 @@ export interface ForgeAiPromptProps extends Pick<
 
   /** Fired when the stop button is clicked. Cancelable - if cancelled, running state remains true. */
   onForgeAiPromptStop?: (event: CustomEvent<CustomEvent<void>>) => void;
+
+  /** Fired when the debug icon button is clicked. */
+  onForgeAiPromptDebugToggle?: (event: CustomEvent<CustomEvent<void>>) => void;
 }
 
 /**
@@ -86,13 +105,17 @@ export interface ForgeAiPromptProps extends Pick<
  *
  *
  * ### **Events:**
- *  - **forge-ai-prompt-send** - Fired when the send button is clicked or Enter is pressed (without Shift). Cancelable - if cancelled, running state is not set and input is not cleared.
+ *  - **input**
+ * - **forge-ai-prompt-command**
+ * - **forge-ai-prompt-send** - Fired when the send button is clicked or Enter is pressed (without Shift). Cancelable - if cancelled, running state is not set and input is not cleared.
  * - **forge-ai-prompt-cancel** - Fired when the Escape key is pressed (if cancelOnEscape is true).
  * - **forge-ai-prompt-attachment** - Fired when files are pasted into the textarea.
  * - **forge-ai-prompt-stop** - Fired when the stop button is clicked. Cancelable - if cancelled, running state remains true.
+ * - **forge-ai-prompt-debug-toggle** - Fired when the debug icon button is clicked.
  *
  * ### **Methods:**
- *  - **focus(): _void_** - Focuses the textarea element
+ *  - **closeSlashMenu(): _void_** - Closes the slash command menu
+ * - **focus(): _void_** - Focuses the textarea element
  *
  * ### **Slots:**
  *  - **actions** - Slot for action components that are hidden in inline mode (voice input, file picker, model selectors, web search, etc.)

package/dist/ForgeAiPrompt.js

@@ -1,6 +1,6 @@
 import React, { forwardRef, useRef, useEffect } from "react";
 import "@tylertech/forge-ai/ai-prompt";
-import { useEventListener } from "./react-utils.js";
+import { useEventListener, useProperties } from "./react-utils.js";
 
 export const ForgeAiPrompt = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
@@ -10,13 +10,21 @@ export const ForgeAiPrompt = forwardRef((props, forwardedRef) => {
     inputDisabled,
     cancelOnEscape,
     running,
+    debugMode,
     placeholder,
     value,
     variant,
+    slashCommands,
     ...filteredProps
   } = props;
 
   /** Event listeners - run once */
+  useEventListener(ref, "input", props.onInput);
+  useEventListener(
+    ref,
+    "forge-ai-prompt-command",
+    props.onForgeAiPromptCommand,
+  );
   useEventListener(ref, "forge-ai-prompt-send", props.onForgeAiPromptSend);
   useEventListener(ref, "forge-ai-prompt-cancel", props.onForgeAiPromptCancel);
   useEventListener(
@@ -25,6 +33,14 @@ export const ForgeAiPrompt = forwardRef((props, forwardedRef) => {
     props.onForgeAiPromptAttachment,
   );
   useEventListener(ref, "forge-ai-prompt-stop", props.onForgeAiPromptStop);
+  useEventListener(
+    ref,
+    "forge-ai-prompt-debug-toggle",
+    props.onForgeAiPromptDebugToggle,
+  );
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, "slashCommands", props.slashCommands);
 
   return React.createElement(
     "forge-ai-prompt",
@@ -51,6 +67,7 @@ export const ForgeAiPrompt = forwardRef((props, forwardedRef) => {
       "input-disabled": props.inputDisabled ? true : undefined,
       "cancel-on-escape": props.cancelOnEscape ? true : undefined,
       running: props.running ? true : undefined,
+      "debug-mode": props.debugMode ? true : undefined,
       style: { ...props.style },
     },
     props.children,

package/dist/ForgeAiResponseMessage.d.ts

@@ -24,6 +24,9 @@ export interface ForgeAiResponseMessageProps extends Pick<
   /** undefined */
   enableReactions?: boolean;
 
+  /** undefined */
+  hasDebugData?: boolean;
+
   /** 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()`. */
   className?: string;
 

package/dist/ForgeAiResponseMessage.js

@@ -4,7 +4,7 @@ import { useEventListener } from "./react-utils.js";
 
 export const ForgeAiResponseMessage = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
-  const { complete, enableReactions, ...filteredProps } = props;
+  const { complete, enableReactions, hasDebugData, ...filteredProps } = props;
 
   /** Event listeners - run once */
   useEventListener(
@@ -47,6 +47,7 @@ export const ForgeAiResponseMessage = forwardRef((props, forwardedRef) => {
       tabindex: props.tabIndex,
       complete: props.complete ? true : undefined,
       "enable-reactions": props.enableReactions ? true : undefined,
+      "has-debug-data": props.hasDebugData ? true : undefined,
       style: { ...props.style },
     },
     props.children,

package/dist/ForgeAiSlashCommandMenu.d.ts

@@ -0,0 +1,68 @@
+import React from "react";
+import { ForgeAiSlashCommandMenu as ForgeAiSlashCommandMenuElement } from "@tylertech/forge-ai/ai-slash-command-menu";
+
+export type { ForgeAiSlashCommandMenuElement };
+
+export interface ForgeAiSlashCommandMenuProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** undefined */
+  open?: boolean;
+
+  /** undefined */
+  filterQuery?: ForgeAiSlashCommandMenuElement["filterQuery"];
+
+  /** 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()`. */
+  className?: string;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** 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. */
+  part?: string;
+
+  /** 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. */
+  ref?: any;
+
+  /** 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. */
+  tabIndex?: number;
+
+  /** Fired when a command is selected. */
+  onForgeAiSlashCommandMenuSelect?: (
+    event: CustomEvent<CustomEvent<ForgeAiSlashCommandMenuSelectEventData>>,
+  ) => void;
+
+  /** Fired when the menu should close. */
+  onForgeAiSlashCommandMenuClose?: (
+    event: CustomEvent<CustomEvent<void>>,
+  ) => void;
+}
+
+/**
+ *
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **forge-ai-slash-command-menu-select** - Fired when a command is selected.
+ * - **forge-ai-slash-command-menu-close** - Fired when the menu should close.
+ */
+export const ForgeAiSlashCommandMenu: React.ForwardRefExoticComponent<ForgeAiSlashCommandMenuProps>;

package/dist/ForgeAiSlashCommandMenu.js

@@ -0,0 +1,44 @@
+import React, { forwardRef, useRef, useEffect } from "react";
+import "@tylertech/forge-ai/ai-slash-command-menu";
+import { useEventListener } from "./react-utils.js";
+
+export const ForgeAiSlashCommandMenu = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { open, filterQuery, ...filteredProps } = props;
+
+  /** Event listeners - run once */
+  useEventListener(
+    ref,
+    "forge-ai-slash-command-menu-select",
+    props.onForgeAiSlashCommandMenuSelect,
+  );
+  useEventListener(
+    ref,
+    "forge-ai-slash-command-menu-close",
+    props.onForgeAiSlashCommandMenuClose,
+  );
+
+  return React.createElement(
+    "forge-ai-slash-command-menu",
+    {
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      ...filteredProps,
+      "filter-query": props.filterQuery || props["filter-query"],
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      open: props.open ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/dist/ForgeAiSuggestions.d.ts

@@ -58,5 +58,8 @@ export interface ForgeAiSuggestionsProps extends Pick<
  *
  * ### **Events:**
  *  - **forge-ai-suggestions-select** - Fired when a suggestion is selected.
+ *
+ * ### **CSS Properties:**
+ *  - **--forge-ai-suggestion-max-width** - The maximum width of the suggestion buttons in inline layout. _(default: undefined)_
  */
 export const ForgeAiSuggestions: React.ForwardRefExoticComponent<ForgeAiSuggestionsProps>;

package/dist/ForgeAiThinkingIndicator.d.ts

@@ -18,6 +18,15 @@ export interface ForgeAiThinkingIndicatorProps extends Pick<
   | "onFocus"
   | "onBlur"
 > {
+  /** undefined */
+  showText?: boolean;
+
+  /** undefined */
+  initialDelay?: ForgeAiThinkingIndicatorElement["initialDelay"];
+
+  /** undefined */
+  cycleInterval?: ForgeAiThinkingIndicatorElement["cycleInterval"];
+
   /** 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()`. */
   className?: string;
 

package/dist/ForgeAiThinkingIndicator.js

@@ -2,15 +2,20 @@ import React, { forwardRef } from "react";
 import "@tylertech/forge-ai/ai-thinking-indicator";
 
 export const ForgeAiThinkingIndicator = forwardRef((props, forwardedRef) => {
+  const { showText, initialDelay, cycleInterval, ...filteredProps } = props;
+
   return React.createElement(
     "forge-ai-thinking-indicator",
     {
-      ...props,
+      ...filteredProps,
+      "initial-delay": props.initialDelay || props["initial-delay"],
+      "cycle-interval": props.cycleInterval || props["cycle-interval"],
       class: props.className,
       exportparts: props.exportparts,
       for: props.htmlFor,
       part: props.part,
       tabindex: props.tabIndex,
+      "show-text": props.showText ? true : undefined,
       style: { ...props.style },
     },
     props.children,

package/dist/ForgeAiToolDataTable.d.ts

@@ -0,0 +1,51 @@
+import React from "react";
+import { ForgeAiToolDataTable as ForgeAiToolDataTableElement } from "@tylertech/forge-ai/tools/ai-data-table";
+
+export type { ForgeAiToolDataTableElement };
+
+export interface ForgeAiToolDataTableProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** 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()`. */
+  className?: string;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** 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. */
+  part?: string;
+
+  /** 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. */
+  ref?: any;
+
+  /** 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. */
+  tabIndex?: number;
+
+  /** Tool call data containing table configuration and data */
+  toolCall?: ForgeAiToolDataTableElement["toolCall"];
+}
+
+/**
+ * Data table component tool renderer for displaying tabular data with pagination and filtering.
+ * ---
+ *
+ */
+export const ForgeAiToolDataTable: React.ForwardRefExoticComponent<ForgeAiToolDataTableProps>;

package/dist/ForgeAiToolDataTable.js

@@ -0,0 +1,33 @@
+import React, { forwardRef, useRef, useEffect } from "react";
+import "@tylertech/forge-ai/tools/ai-data-table";
+import { useProperties } from "./react-utils.js";
+
+export const ForgeAiToolDataTable = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { toolCall, ...filteredProps } = props;
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, "toolCall", props.toolCall);
+
+  return React.createElement(
+    "forge-ai-tool-data-table",
+    {
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      ...filteredProps,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/dist/ForgeAiTooltip.d.ts

@@ -72,7 +72,7 @@ export interface ForgeAiTooltipProps extends Pick<
  *  - _default_ - The default slot for tooltip content.
  *
  * ### **CSS Properties:**
- *  - **--ai-tooltip-max-width** - The maximum width of the tooltip. _(default: undefined)_
- * - **--ai-tooltip-z-index** - The z-index of the tooltip overlay. _(default: undefined)_
+ *  - **--forge-ai-tooltip-max-width** - The maximum width of the tooltip. _(default: undefined)_
+ * - **--forge-ai-tooltip-z-index** - The z-index of the tooltip overlay. _(default: undefined)_
  */
 export const ForgeAiTooltip: React.ForwardRefExoticComponent<ForgeAiTooltipProps>;

package/dist/index.d.ts

@@ -2,8 +2,8 @@ export * from "./ForgeAiActionsToolbar.js";
 export * from "./ForgeAiAgentInfo.js";
 export * from "./ForgeAiArtifact.js";
 export * from "./ForgeAiAttachment.js";
-export * from "./ForgeAiButton.js";
 export * from "./ForgeAiChainOfThought.js";
+export * from "./ForgeAiButton.js";
 export * from "./ForgeAiChatHeader.js";
 export * from "./ForgeAiChatInterface.js";
 export * from "./ForgeAiChatbotToolCall.js";
@@ -17,31 +17,36 @@ export * from "./ForgeAiDropdownMenu.js";
 export * from "./ForgeAiEmbeddedChat.js";
 export * from "./ForgeAiEmptyState.js";
 export * from "./ForgeAiErrorMessage.js";
+export * from "./ForgeAiEventStreamViewer.js";
 export * from "./ForgeAiFab.js";
 export * from "./ForgeAiFilePicker.js";
 export * from "./ForgeAiFloatingChat.js";
 export * from "./ForgeAiGradientContainer.js";
 export * from "./ForgeAiIcon.js";
+export * from "./ForgeAiIconButton.js";
 export * from "./ForgeAiMessageThread.js";
 export * from "./ForgeAiModal.js";
 export * from "./ForgeAiPrompt.js";
 export * from "./ForgeAiReasoning.js";
-export * from "./ForgeAiReasoningHeader.js";
 export * from "./ForgeAiResponseMessage.js";
+export * from "./ForgeAiSlashCommandMenu.js";
+export * from "./ForgeAiReasoningHeader.js";
 export * from "./ForgeAiSidebar.js";
-export * from "./ForgeAiSidebarChat.js";
 export * from "./ForgeAiSpinner.js";
+export * from "./ForgeAiSidebarChat.js";
 export * from "./ForgeAiSuggestions.js";
 export * from "./ForgeAiThinkingIndicator.js";
 export * from "./ForgeAiThreads.js";
 export * from "./ForgeAiUserMessage.js";
 export * from "./ForgeAiVoiceInput.js";
-export * from "./ForgeAiThoughtBase.js";
 export * from "./ForgeAiThoughtDetail.js";
+export * from "./ForgeAiThoughtBase.js";
 export * from "./ForgeAiThoughtImage.js";
 export * from "./ForgeAiThoughtSearchResult.js";
-export * from "./ForgePromptButton.js";
 export * from "./ForgeAiReasoningContent.js";
+export * from "./ForgePromptButton.js";
+export * from "./ForgeAiPopover.js";
 export * from "./ForgeAiOverlay.js";
 export * from "./ForgeAiTooltip.js";
-export * from "./ForgeAiPopover.js";
+export * from "./ForgeAiToolDataTable.js";
+export * from "./ForgeAiPaginator.js";

package/dist/index.js

@@ -2,8 +2,8 @@ export * from "./ForgeAiActionsToolbar.js";
 export * from "./ForgeAiAgentInfo.js";
 export * from "./ForgeAiArtifact.js";
 export * from "./ForgeAiAttachment.js";
-export * from "./ForgeAiButton.js";
 export * from "./ForgeAiChainOfThought.js";
+export * from "./ForgeAiButton.js";
 export * from "./ForgeAiChatHeader.js";
 export * from "./ForgeAiChatInterface.js";
 export * from "./ForgeAiChatbotToolCall.js";
@@ -17,31 +17,36 @@ export * from "./ForgeAiDropdownMenu.js";
 export * from "./ForgeAiEmbeddedChat.js";
 export * from "./ForgeAiEmptyState.js";
 export * from "./ForgeAiErrorMessage.js";
+export * from "./ForgeAiEventStreamViewer.js";
 export * from "./ForgeAiFab.js";
 export * from "./ForgeAiFilePicker.js";
 export * from "./ForgeAiFloatingChat.js";
 export * from "./ForgeAiGradientContainer.js";
 export * from "./ForgeAiIcon.js";
+export * from "./ForgeAiIconButton.js";
 export * from "./ForgeAiMessageThread.js";
 export * from "./ForgeAiModal.js";
 export * from "./ForgeAiPrompt.js";
 export * from "./ForgeAiReasoning.js";
-export * from "./ForgeAiReasoningHeader.js";
 export * from "./ForgeAiResponseMessage.js";
+export * from "./ForgeAiSlashCommandMenu.js";
+export * from "./ForgeAiReasoningHeader.js";
 export * from "./ForgeAiSidebar.js";
-export * from "./ForgeAiSidebarChat.js";
 export * from "./ForgeAiSpinner.js";
+export * from "./ForgeAiSidebarChat.js";
 export * from "./ForgeAiSuggestions.js";
 export * from "./ForgeAiThinkingIndicator.js";
 export * from "./ForgeAiThreads.js";
 export * from "./ForgeAiUserMessage.js";
 export * from "./ForgeAiVoiceInput.js";
-export * from "./ForgeAiThoughtBase.js";
 export * from "./ForgeAiThoughtDetail.js";
+export * from "./ForgeAiThoughtBase.js";
 export * from "./ForgeAiThoughtImage.js";
 export * from "./ForgeAiThoughtSearchResult.js";
-export * from "./ForgePromptButton.js";
 export * from "./ForgeAiReasoningContent.js";
+export * from "./ForgePromptButton.js";
+export * from "./ForgeAiPopover.js";
 export * from "./ForgeAiOverlay.js";
 export * from "./ForgeAiTooltip.js";
-export * from "./ForgeAiPopover.js";
+export * from "./ForgeAiToolDataTable.js";
+export * from "./ForgeAiPaginator.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tylertech/forge-ai-react",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "A React adapter for Tyler Forge™ AI Web Components.",
   "repository": "tyler-technologies-oss/forge-ai",
   "author": "Tyler Technologies, Inc.",
@@ -11,52 +11,52 @@
   "files": [
     "dist"
   ],
+  "scripts": {
+    "predev": "pnpm run build",
+    "dev": "vite",
+    "build:demo": "vite build",
+    "serve:demo": "vite preview",
+    "clean": "rimraf dist/",
+    "prebuild": "pnpm run clean",
+    "build": "pnpm run generate-proxies",
+    "lint": "eslint .",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "generate-proxies": "node scripts/generate-proxies.mjs"
+  },
   "dependencies": {
-    "tslib": "2.8.1"
+    "tslib": "catalog:"
   },
   "peerDependencies": {
-    "react": ">=17.0.0",
-    "@tylertech/forge-ai": "^0.5.0"
+    "@tylertech/forge-ai": "workspace:^",
+    "react": ">=17.0.0"
   },
   "devDependencies": {
-    "@repo/prettier-config": "",
-    "@tylertech-eslint/eslint-plugin": "3.0.0",
-    "@tylertech/forge": "3.13.0",
+    "@repo/prettier-config": "workspace:",
+    "@tylertech-eslint/eslint-plugin": "catalog:",
+    "@tylertech/forge": "catalog:",
+    "@tylertech/forge-ai": "workspace:^",
     "@tylertech/forge-react": "^3.2.0",
-    "@tylertech/tyler-icons": "2.0.4",
-    "@types/node": "24.10.4",
-    "@types/react": "^18.3.26",
+    "@tylertech/tyler-icons": "catalog:",
+    "@types/node": "catalog:",
+    "@types/react": "^18.3.27",
     "@types/react-dom": "^18.3.7",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
     "@vitejs/plugin-react": "^4.7.0",
     "change-case": "^5.4.4",
     "custom-element-react-wrappers": "^1.7.3",
-    "eslint": "9.39.2",
-    "eslint-plugin-prettier": "5.5.4",
+    "eslint": "catalog:",
+    "eslint-plugin-prettier": "catalog:",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-error-overlay": "^6.1.0",
     "react-router": "^5.3.4",
     "react-router-dom": "^5.3.4",
-    "rimraf": "6.1.2",
-    "sass": "1.93.2",
+    "rimraf": "catalog:",
+    "sass": "catalog:",
     "typescript": "~5.8.3",
-    "vite": "7.3.0",
-    "vite-tsconfig-paths": "6.0.2",
-    "@tylertech/forge-ai": "^0.5.0"
-  },
-  "scripts": {
-    "predev": "pnpm run build",
-    "dev": "vite",
-    "build:demo": "vite build",
-    "serve:demo": "vite preview",
-    "clean": "rimraf dist/",
-    "prebuild": "pnpm run clean",
-    "build": "pnpm run generate-proxies",
-    "lint": "eslint .",
-    "format": "prettier --write .",
-    "format:check": "prettier --check .",
-    "generate-proxies": "node scripts/generate-proxies.mjs"
+    "vite": "catalog:",
+    "vite-tsconfig-paths": "catalog:"
   }
-}
+}