@tylertech/forge-ai-react 0.4.0 → 0.5.0

package/dist/ForgeAiMessageThread.d.ts

@@ -0,0 +1,87 @@
+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 */
+  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,55 @@
+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, 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,
+      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,14 @@ 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 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;
 

package/dist/ForgeAiOverlay.js

@@ -2,7 +2,16 @@ 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,
+    dismissMode,
+    ...filteredProps
+  } = props;
 
   return React.createElement(
     "forge-ai-overlay",
@@ -10,6 +19,8 @@ export const ForgeAiOverlay = forwardRef((props, forwardedRef) => {
       ...filteredProps,
       anchor: props.anchor,
       placement: props.placement,
+      arrowElement: props.arrowElement,
+      "dismiss-mode": props.dismissMode || props["dismiss-mode"],
       class: props.className,
       exportparts: props.exportparts,
       for: props.htmlFor,

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,20 @@ 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 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;
 

package/dist/ForgeAiPopover.js

@@ -2,7 +2,16 @@ 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,
+    dismissMode,
+    ...filteredProps
+  } = props;
 
   return React.createElement(
     "forge-ai-popover",
@@ -10,6 +19,7 @@ export const ForgeAiPopover = forwardRef((props, forwardedRef) => {
       ...filteredProps,
       anchor: props.anchor,
       placement: props.placement,
+      "dismiss-mode": props.dismissMode || props["dismiss-mode"],
       class: props.className,
       exportparts: props.exportparts,
       for: props.htmlFor,
@@ -18,6 +28,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,

package/dist/ForgeAiPrompt.d.ts

@@ -3,22 +3,21 @@ import { ForgeAiPrompt as ForgeAiPromptElement } from "@tylertech/forge-ai/ai-pr
 
 export type { ForgeAiPromptElement };
 
-export interface ForgeAiPromptProps
-  extends Pick<
-    React.AllHTMLAttributes<HTMLElement>,
-    | "children"
-    | "dir"
-    | "hidden"
-    | "id"
-    | "lang"
-    | "slot"
-    | "style"
-    | "title"
-    | "translate"
-    | "onClick"
-    | "onFocus"
-    | "onBlur"
-  > {
+export interface ForgeAiPromptProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
   /** Whether the send button is disabled */
   sendDisabled?: boolean;
 

package/dist/ForgeAiReasoning.d.ts

@@ -3,22 +3,21 @@ import { ForgeAiReasoning as ForgeAiReasoningElement } from "@tylertech/forge-ai
 
 export type { ForgeAiReasoningElement };
 
-export interface ForgeAiReasoningProps
-  extends Pick<
-    React.AllHTMLAttributes<HTMLElement>,
-    | "children"
-    | "dir"
-    | "hidden"
-    | "id"
-    | "lang"
-    | "slot"
-    | "style"
-    | "title"
-    | "translate"
-    | "onClick"
-    | "onFocus"
-    | "onBlur"
-  > {
+export interface ForgeAiReasoningProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
   /** Whether the reasoning is expanded */
   expanded?: boolean;
 

package/dist/ForgeAiReasoningContent.d.ts

@@ -3,22 +3,21 @@ import { ForgeAiReasoningContent as ForgeAiReasoningContentElement } from "@tyle
 
 export type { ForgeAiReasoningContentElement };
 
-export interface ForgeAiReasoningContentProps
-  extends Pick<
-    React.AllHTMLAttributes<HTMLElement>,
-    | "children"
-    | "dir"
-    | "hidden"
-    | "id"
-    | "lang"
-    | "slot"
-    | "style"
-    | "title"
-    | "translate"
-    | "onClick"
-    | "onFocus"
-    | "onBlur"
-  > {
+export interface ForgeAiReasoningContentProps 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;
 

package/dist/ForgeAiReasoningHeader.d.ts

@@ -3,22 +3,21 @@ import { ForgeAiReasoningHeader as ForgeAiReasoningHeaderElement } from "@tylert
 
 export type { ForgeAiReasoningHeaderElement };
 
-export interface ForgeAiReasoningHeaderProps
-  extends Pick<
-    React.AllHTMLAttributes<HTMLElement>,
-    | "children"
-    | "dir"
-    | "hidden"
-    | "id"
-    | "lang"
-    | "slot"
-    | "style"
-    | "title"
-    | "translate"
-    | "onClick"
-    | "onFocus"
-    | "onBlur"
-  > {
+export interface ForgeAiReasoningHeaderProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
   /** Whether the header is expanded */
   expanded?: boolean;
 

package/dist/ForgeAiResponseMessage.d.ts

@@ -3,22 +3,27 @@ import { ForgeAiResponseMessage as ForgeAiResponseMessageElement } from "@tylert
 
 export type { ForgeAiResponseMessageElement };
 
-export interface ForgeAiResponseMessageProps
-  extends Pick<
-    React.AllHTMLAttributes<HTMLElement>,
-    | "children"
-    | "dir"
-    | "hidden"
-    | "id"
-    | "lang"
-    | "slot"
-    | "style"
-    | "title"
-    | "translate"
-    | "onClick"
-    | "onFocus"
-    | "onBlur"
-  > {
+export interface ForgeAiResponseMessageProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** Whether the message is complete. Toolbar only shows when true. */
+  complete?: boolean;
+
+  /** undefined */
+  enableReactions?: 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;
 
@@ -40,9 +45,24 @@ export interface ForgeAiResponseMessageProps
   /** 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 an action button is clicked. */
-  onForgeAiResponseMessageAction?: (
-    event: CustomEvent<CustomEvent<ForgeAiResponseMessageActionEventData>>,
+  /** Fired when copy action is clicked. */
+  onForgeAiResponseMessageCopy?: (
+    event: CustomEvent<CustomEvent<void>>,
+  ) => void;
+
+  /** Fired when refresh action is clicked. */
+  onForgeAiResponseMessageRefresh?: (
+    event: CustomEvent<CustomEvent<void>>,
+  ) => void;
+
+  /** Fired when thumbs-up action is clicked. */
+  onForgeAiResponseMessageThumbsUp?: (
+    event: CustomEvent<CustomEvent<void>>,
+  ) => void;
+
+  /** Fired when thumbs-down action is clicked. */
+  onForgeAiResponseMessageThumbsDown?: (
+    event: CustomEvent<CustomEvent<void>>,
   ) => void;
 }
 
@@ -52,6 +72,9 @@ export interface ForgeAiResponseMessageProps
  *
  *
  * ### **Events:**
- *  - **forge-ai-response-message-action** - Fired when an action button is clicked.
+ *  - **forge-ai-response-message-copy** - Fired when copy action is clicked.
+ * - **forge-ai-response-message-refresh** - Fired when refresh action is clicked.
+ * - **forge-ai-response-message-thumbs-up** - Fired when thumbs-up action is clicked.
+ * - **forge-ai-response-message-thumbs-down** - Fired when thumbs-down action is clicked.
  */
 export const ForgeAiResponseMessage: React.ForwardRefExoticComponent<ForgeAiResponseMessageProps>;

package/dist/ForgeAiResponseMessage.js

@@ -4,12 +4,28 @@ import { useEventListener } from "./react-utils.js";
 
 export const ForgeAiResponseMessage = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
+  const { complete, enableReactions, ...filteredProps } = props;
 
   /** Event listeners - run once */
   useEventListener(
     ref,
-    "forge-ai-response-message-action",
-    props.onForgeAiResponseMessageAction,
+    "forge-ai-response-message-copy",
+    props.onForgeAiResponseMessageCopy,
+  );
+  useEventListener(
+    ref,
+    "forge-ai-response-message-refresh",
+    props.onForgeAiResponseMessageRefresh,
+  );
+  useEventListener(
+    ref,
+    "forge-ai-response-message-thumbs-up",
+    props.onForgeAiResponseMessageThumbsUp,
+  );
+  useEventListener(
+    ref,
+    "forge-ai-response-message-thumbs-down",
+    props.onForgeAiResponseMessageThumbsDown,
   );
 
   return React.createElement(
@@ -23,12 +39,14 @@ export const ForgeAiResponseMessage = forwardRef((props, forwardedRef) => {
           forwardedRef.current = node;
         }
       },
-      ...props,
+      ...filteredProps,
       class: props.className,
       exportparts: props.exportparts,
       for: props.htmlFor,
       part: props.part,
       tabindex: props.tabIndex,
+      complete: props.complete ? true : undefined,
+      "enable-reactions": props.enableReactions ? true : undefined,
       style: { ...props.style },
     },
     props.children,