@tylertech/forge-ai-react 0.4.1 → 0.6.0

package/dist/ForgeAiIcon.d.ts

@@ -3,22 +3,21 @@ import { ForgeAiIcon as ForgeAiIconElement } from "@tylertech/forge-ai/ai-icon";
 
 export type { ForgeAiIconElement };
 
-export interface ForgeAiIconProps
-  extends Pick<
-    React.AllHTMLAttributes<HTMLElement>,
-    | "children"
-    | "dir"
-    | "hidden"
-    | "id"
-    | "lang"
-    | "slot"
-    | "style"
-    | "title"
-    | "translate"
-    | "onClick"
-    | "onFocus"
-    | "onBlur"
-  > {
+export interface ForgeAiIconProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
   /** Whether to display the icon with an outline */
   outline?: boolean;
 

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

@@ -0,0 +1,90 @@
+import React from "react";
+import { ForgeAiMessageThread as ForgeAiMessageThreadElement } from "@tylertech/forge-ai/ai-message-thread";
+
+export type { ForgeAiMessageThreadElement };
+
+export interface ForgeAiMessageThreadProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** undefined */
+  enableReactions?: boolean;
+
+  /** undefined */
+  showThinking?: boolean;
+
+  /** undefined */
+  debugMode?: boolean;
+
+  /** undefined */
+  autoScroll?: ForgeAiMessageThreadElement["autoScroll"];
+
+  /** 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 user clicks copy on a message */
+  onForgeAiMessageThreadCopy?: (
+    event: CustomEvent<CustomEvent<ForgeAiMessageThreadCopyEventData>>,
+  ) => void;
+
+  /** Fired when user clicks refresh on a message */
+  onForgeAiMessageThreadRefresh?: (
+    event: CustomEvent<CustomEvent<ForgeAiMessageThreadRefreshEventData>>,
+  ) => void;
+
+  /** Fired when user gives thumbs up */
+  onForgeAiMessageThreadThumbsUp?: (
+    event: CustomEvent<CustomEvent<ForgeAiMessageThreadThumbsEventData>>,
+  ) => void;
+
+  /** Fired when user gives thumbs down */
+  onForgeAiMessageThreadThumbsDown?: (
+    event: CustomEvent<CustomEvent<ForgeAiMessageThreadThumbsEventData>>,
+  ) => void;
+}
+
+/**
+ * A primitive component for rendering a thread of chat messages, including user, assistant, system, and tool call messages.
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **forge-ai-message-thread-copy** - Fired when user clicks copy on a message
+ * - **forge-ai-message-thread-refresh** - Fired when user clicks refresh on a message
+ * - **forge-ai-message-thread-thumbs-up** - Fired when user gives thumbs up
+ * - **forge-ai-message-thread-thumbs-down** - Fired when user gives thumbs down
+ *
+ * ### **Slots:**
+ *  - **empty-state-heading** - Slot for custom empty state heading content
+ * - **empty-state-actions** - Slot for custom empty state actions (e.g., suggestions)
+ */
+export const ForgeAiMessageThread: React.ForwardRefExoticComponent<ForgeAiMessageThreadProps>;

package/dist/ForgeAiMessageThread.js

@@ -0,0 +1,62 @@
+import React, { forwardRef, useRef, useEffect } from "react";
+import "@tylertech/forge-ai/ai-message-thread";
+import { useEventListener } from "./react-utils.js";
+
+export const ForgeAiMessageThread = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    enableReactions,
+    showThinking,
+    debugMode,
+    autoScroll,
+    ...filteredProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(
+    ref,
+    "forge-ai-message-thread-copy",
+    props.onForgeAiMessageThreadCopy,
+  );
+  useEventListener(
+    ref,
+    "forge-ai-message-thread-refresh",
+    props.onForgeAiMessageThreadRefresh,
+  );
+  useEventListener(
+    ref,
+    "forge-ai-message-thread-thumbs-up",
+    props.onForgeAiMessageThreadThumbsUp,
+  );
+  useEventListener(
+    ref,
+    "forge-ai-message-thread-thumbs-down",
+    props.onForgeAiMessageThreadThumbsDown,
+  );
+
+  return React.createElement(
+    "forge-ai-message-thread",
+    {
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      ...filteredProps,
+      "auto-scroll": props.autoScroll || props["auto-scroll"],
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      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/ForgeAiModal.d.ts

@@ -3,22 +3,21 @@ import { ForgeAiModal as ForgeAiModalElement } from "@tylertech/forge-ai/ai-moda
 
 export type { ForgeAiModalElement };
 
-export interface ForgeAiModalProps
-  extends Pick<
-    React.AllHTMLAttributes<HTMLElement>,
-    | "children"
-    | "dir"
-    | "hidden"
-    | "id"
-    | "lang"
-    | "slot"
-    | "style"
-    | "title"
-    | "translate"
-    | "onClick"
-    | "onFocus"
-    | "onBlur"
-  > {
+export interface ForgeAiModalProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
   /** Controls whether the modal is open or closed. */
   open?: boolean;
 
@@ -75,5 +74,9 @@ When not explicitly set, this will be automatically determined based on viewport
  *
  * ### **Slots:**
  *  - _default_ - Default slot for modal content
+ *
+ * ### **CSS Properties:**
+ *  - **--forge-ai-modal-width** - Width of the modal in non-fullscreen mode _(default: undefined)_
+ * - **--forge-ai-modal-height** - Height of the modal in non-fullscreen mode _(default: undefined)_
  */
 export const ForgeAiModal: React.ForwardRefExoticComponent<ForgeAiModalProps>;

package/dist/ForgeAiOverlay.d.ts

@@ -3,22 +3,21 @@ import { ForgeAiOverlay as ForgeAiOverlayElement } from "@tylertech/forge-ai/cor
 
 export type { ForgeAiOverlayElement };
 
-export interface ForgeAiOverlayProps
-  extends Pick<
-    React.AllHTMLAttributes<HTMLElement>,
-    | "children"
-    | "dir"
-    | "hidden"
-    | "id"
-    | "lang"
-    | "slot"
-    | "style"
-    | "title"
-    | "translate"
-    | "onClick"
-    | "onFocus"
-    | "onBlur"
-  > {
+export interface ForgeAiOverlayProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
   /** Whether the overlay should flip to the opposite side when there's no space. */
   flip?: boolean;
 
@@ -34,6 +33,18 @@ export interface ForgeAiOverlayProps
   /** The placement of the overlay relative to the anchor. */
   placement?: ForgeAiOverlayElement["placement"];
 
+  /** 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 */
+  dismissMode?: ForgeAiOverlayElement["dismissMode"];
+
   /** 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;
 
@@ -63,11 +74,5 @@ export interface ForgeAiOverlayProps
  *
  * ### **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

@@ -2,7 +2,17 @@ import React, { forwardRef } from "react";
 import "@tylertech/forge-ai/core/overlay";
 
 export const ForgeAiOverlay = forwardRef((props, forwardedRef) => {
-  const { flip, shift, open, anchor, placement, ...filteredProps } = props;
+  const {
+    flip,
+    shift,
+    open,
+    anchor,
+    placement,
+    arrowElement,
+    offset,
+    dismissMode,
+    ...filteredProps
+  } = props;
 
   return React.createElement(
     "forge-ai-overlay",
@@ -10,6 +20,9 @@ export const ForgeAiOverlay = forwardRef((props, forwardedRef) => {
       ...filteredProps,
       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,
       for: props.htmlFor,

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

@@ -3,22 +3,21 @@ import { ForgeAiPopover as ForgeAiPopoverElement } from "@tylertech/forge-ai/cor
 
 export type { ForgeAiPopoverElement };
 
-export interface ForgeAiPopoverProps
-  extends Pick<
-    React.AllHTMLAttributes<HTMLElement>,
-    | "children"
-    | "dir"
-    | "hidden"
-    | "id"
-    | "lang"
-    | "slot"
-    | "style"
-    | "title"
-    | "translate"
-    | "onClick"
-    | "onFocus"
-    | "onBlur"
-  > {
+export interface ForgeAiPopoverProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
   /** Whether the popover should flip to the opposite side when there's no space. */
   flip?: boolean;
 
@@ -28,12 +27,24 @@ export interface ForgeAiPopoverProps
   /** Whether the popover is open. */
   open?: boolean;
 
+  /** Whether to show an arrow pointing to the anchor element. */
+  arrow?: boolean;
+
   /** The anchor element to position the popover relative to. */
   anchor?: ForgeAiPopoverElement["anchor"];
 
   /** 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 */
+  dismissMode?: ForgeAiPopoverElement["dismissMode"];
+
   /** 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;
 
@@ -63,11 +74,5 @@ export interface ForgeAiPopoverProps
  *
  * ### **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

@@ -2,7 +2,17 @@ import React, { forwardRef } from "react";
 import "@tylertech/forge-ai/core/popover";
 
 export const ForgeAiPopover = forwardRef((props, forwardedRef) => {
-  const { flip, shift, open, anchor, placement, ...filteredProps } = props;
+  const {
+    flip,
+    shift,
+    open,
+    arrow,
+    anchor,
+    placement,
+    offset,
+    dismissMode,
+    ...filteredProps
+  } = props;
 
   return React.createElement(
     "forge-ai-popover",
@@ -10,6 +20,8 @@ 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,
       for: props.htmlFor,
@@ -18,6 +30,7 @@ export const ForgeAiPopover = forwardRef((props, forwardedRef) => {
       flip: props.flip ? true : undefined,
       shift: props.shift ? true : undefined,
       open: props.open ? true : undefined,
+      arrow: props.arrow ? true : undefined,
       style: { ...props.style },
     },
     props.children,