@tylertech/forge-ai-react 0.4.1 → 0.6.0

package/dist/ForgeAiDropdownMenuSeparator.d.ts

@@ -3,22 +3,21 @@ import { ForgeAiDropdownMenuSeparator as ForgeAiDropdownMenuSeparatorElement } f
 
 export type { ForgeAiDropdownMenuSeparatorElement };
 
-export interface ForgeAiDropdownMenuSeparatorProps
-  extends Pick<
-    React.AllHTMLAttributes<HTMLElement>,
-    | "children"
-    | "dir"
-    | "hidden"
-    | "id"
-    | "lang"
-    | "slot"
-    | "style"
-    | "title"
-    | "translate"
-    | "onClick"
-    | "onFocus"
-    | "onBlur"
-  > {
+export interface ForgeAiDropdownMenuSeparatorProps 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/ForgeAiEmbeddedChat.d.ts

@@ -3,28 +3,36 @@ import { ForgeAiEmbeddedChat as ForgeAiEmbeddedChatElement } from "@tylertech/fo
 
 export type { ForgeAiEmbeddedChatElement };
 
-export interface ForgeAiEmbeddedChatProps
-  extends Pick<
-    React.AllHTMLAttributes<HTMLElement>,
-    | "children"
-    | "dir"
-    | "hidden"
-    | "id"
-    | "lang"
-    | "slot"
-    | "style"
-    | "title"
-    | "translate"
-    | "onClick"
-    | "onFocus"
-    | "onBlur"
-  > {
+export interface ForgeAiEmbeddedChatProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
   /** Controls whether the modal view is open when expanded. */
   expanded?: boolean;
 
-  /** Controls the gradient variant applied to the container. */
+  /** Gradient variant for embedded view ('low' | 'medium' | 'high', default: 'medium') */
   gradientVariant?: ForgeAiEmbeddedChatElement["gradientVariant"];
 
+  /** undefined */
+  threadId?: ForgeAiEmbeddedChatElement["threadId"];
+
+  /** Enable file upload functionality (default: 'off') */
+  fileUpload?: ForgeAiEmbeddedChatElement["fileUpload"];
+
+  /** Placeholder text for input (default: "Ask a question...") */
+  placeholder?: ForgeAiEmbeddedChatElement["placeholder"];
+
   /** 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;
 
@@ -46,6 +54,12 @@ export interface ForgeAiEmbeddedChatProps
   /** 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;
 
+  /** Required. The adapter for communication with the AI service */
+  adapter?: ForgeAiEmbeddedChatElement["adapter"];
+
+  /** Optional suggestions for empty state */
+  suggestions?: ForgeAiEmbeddedChatElement["suggestions"];
+
   /** Fired when the chat is expanded to modal view */
   onForgeAiEmbeddedChatExpand?: (event: CustomEvent<CustomEvent<void>>) => void;
 
@@ -69,8 +83,7 @@ export interface ForgeAiEmbeddedChatProps
  * - **collapse(): _void_** - Collapses the chat from modal view back to embedded view.
  *
  * ### **Slots:**
- *  - _default_ - Default slot for messages (ai-user-message, ai-response-message components)
- * - **suggestions** - Slot for AI suggestions component
- * - **prompt** - Slot for custom AI prompt component. If not provided, a default forge-ai-prompt will be used.
+ *  - **header-title** - Slot for custom header title content (default: "AI Assistant")
+ * - **empty-state-heading** - Slot for custom empty state heading
  */
 export const ForgeAiEmbeddedChat: React.ForwardRefExoticComponent<ForgeAiEmbeddedChatProps>;

package/dist/ForgeAiEmbeddedChat.js

@@ -1,10 +1,19 @@
 import React, { forwardRef, useRef, useEffect } from "react";
 import "@tylertech/forge-ai/ai-embedded-chat";
-import { useEventListener } from "./react-utils.js";
+import { useEventListener, useProperties } from "./react-utils.js";
 
 export const ForgeAiEmbeddedChat = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
-  const { expanded, gradientVariant, ...filteredProps } = props;
+  const {
+    expanded,
+    gradientVariant,
+    threadId,
+    fileUpload,
+    placeholder,
+    adapter,
+    suggestions,
+    ...filteredProps
+  } = props;
 
   /** Event listeners - run once */
   useEventListener(
@@ -18,6 +27,10 @@ export const ForgeAiEmbeddedChat = forwardRef((props, forwardedRef) => {
     props.onForgeAiEmbeddedChatCollapse,
   );
 
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, "adapter", props.adapter);
+  useProperties(ref, "suggestions", props.suggestions);
+
   return React.createElement(
     "forge-ai-embedded-chat",
     {
@@ -31,6 +44,9 @@ export const ForgeAiEmbeddedChat = forwardRef((props, forwardedRef) => {
       },
       ...filteredProps,
       "gradient-variant": props.gradientVariant || props["gradient-variant"],
+      "thread-id": props.threadId || props["thread-id"],
+      "file-upload": props.fileUpload || props["file-upload"],
+      placeholder: props.placeholder,
       class: props.className,
       exportparts: props.exportparts,
       for: props.htmlFor,

package/dist/ForgeAiEmptyState.d.ts

@@ -3,22 +3,21 @@ import { ForgeAiEmptyState as ForgeAiEmptyStateElement } from "@tylertech/forge-
 
 export type { ForgeAiEmptyStateElement };
 
-export interface ForgeAiEmptyStateProps
-  extends Pick<
-    React.AllHTMLAttributes<HTMLElement>,
-    | "children"
-    | "dir"
-    | "hidden"
-    | "id"
-    | "lang"
-    | "slot"
-    | "style"
-    | "title"
-    | "translate"
-    | "onClick"
-    | "onFocus"
-    | "onBlur"
-  > {
+export interface ForgeAiEmptyStateProps 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;
 
@@ -47,8 +46,10 @@ export interface ForgeAiEmptyStateProps
  *
  *
  * ### **Slots:**
- *  - _default_ - The welcome message content (default: "Welcome to AI Assistant! Start a conversation by asking a question or describing what you'd like help with.").
- * - **icon** - The custom icon to display instead of the default books graphic.
+ *  - _default_ - The welcome message content (overrides the default message).
+ * - **icon** - The custom icon/graphic to display.
+ * - **heading** - The custom heading/title to display.
+ * - **body** - The custom body message content.
  * - **actions** - The actions or suggestions to display below the message.
  */
 export const ForgeAiEmptyState: React.ForwardRefExoticComponent<ForgeAiEmptyStateProps>;

package/dist/ForgeAiErrorMessage.d.ts

@@ -0,0 +1,52 @@
+import React from "react";
+import { ForgeAiErrorMessage as ForgeAiErrorMessageElement } from "@tylertech/forge-ai/ai-error-message";
+
+export type { ForgeAiErrorMessageElement };
+
+export interface ForgeAiErrorMessageProps 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 error messages using Forge inline message banner style.
+ * ---
+ *
+ *
+ * ### **Slots:**
+ *  - **title** - The error title text
+ * - _default_ - The error message content
+ */
+export const ForgeAiErrorMessage: React.ForwardRefExoticComponent<ForgeAiErrorMessageProps>;

package/dist/ForgeAiErrorMessage.js

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

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/ForgeAiFab.d.ts

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

package/dist/ForgeAiFilePicker.d.ts

@@ -1,24 +1,26 @@
 import React from "react";
-import { ForgeAiFilePicker as ForgeAiFilePickerElement } from "@tylertech/forge-ai/ai-file-picker";
-
-export type { ForgeAiFilePickerElement };
-
-export interface ForgeAiFilePickerProps
-  extends Pick<
-    React.AllHTMLAttributes<HTMLElement>,
-    | "children"
-    | "dir"
-    | "hidden"
-    | "id"
-    | "lang"
-    | "slot"
-    | "style"
-    | "title"
-    | "translate"
-    | "onClick"
-    | "onFocus"
-    | "onBlur"
-  > {
+import {
+  ForgeAiFilePicker as ForgeAiFilePickerElement,
+  CustomEvent,
+} from "@tylertech/forge-ai/ai-file-picker";
+
+export type { ForgeAiFilePickerElement, CustomEvent };
+
+export interface ForgeAiFilePickerProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
   /** Whether the file picker is disabled. */
   disabled?: boolean;
 
@@ -31,6 +33,9 @@ export interface ForgeAiFilePickerProps
   /** Accepted file types (comma-separated MIME types or extensions). */
   accept?: ForgeAiFilePickerElement["accept"];
 
+  /** Maximum file size in bytes. Default is 10MB. */
+  maxSize?: ForgeAiFilePickerElement["maxSize"];
+
   /** 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;
 
@@ -52,10 +57,16 @@ export interface ForgeAiFilePickerProps
   /** 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;
 
+  /** Array of currently selected file names for duplicate checking. */
+  selectedFiles?: ForgeAiFilePickerElement["selectedFiles"];
+
   /** Fired when a file is selected via click or drag & drop. The event detail contains the selected file and timestamp. */
   onForgeAiFilePickerChange?: (
     event: CustomEvent<CustomEvent<ForgeAiFilePickerChangeEventData>>,
   ) => void;
+
+  /** undefined */
+  onForgeAiFilePickerError?: (event: CustomEvent) => void;
 }
 
 /**
@@ -65,13 +76,10 @@ export interface ForgeAiFilePickerProps
  *
  * ### **Events:**
  *  - **forge-ai-file-picker-change** - Fired when a file is selected via click or drag & drop. The event detail contains the selected file and timestamp.
+ * - **forge-ai-file-picker-error**
  *
  * ### **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/ForgeAiFilePicker.js

@@ -1,10 +1,18 @@
 import React, { forwardRef, useRef, useEffect } from "react";
 import "@tylertech/forge-ai/ai-file-picker";
-import { useEventListener } from "./react-utils.js";
+import { useEventListener, useProperties } from "./react-utils.js";
 
 export const ForgeAiFilePicker = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
-  const { disabled, multiple, variant, accept, ...filteredProps } = props;
+  const {
+    disabled,
+    multiple,
+    variant,
+    accept,
+    maxSize,
+    selectedFiles,
+    ...filteredProps
+  } = props;
 
   /** Event listeners - run once */
   useEventListener(
@@ -12,6 +20,14 @@ export const ForgeAiFilePicker = forwardRef((props, forwardedRef) => {
     "forge-ai-file-picker-change",
     props.onForgeAiFilePickerChange,
   );
+  useEventListener(
+    ref,
+    "forge-ai-file-picker-error",
+    props.onForgeAiFilePickerError,
+  );
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, "selectedFiles", props.selectedFiles);
 
   return React.createElement(
     "forge-ai-file-picker",
@@ -27,6 +43,7 @@ export const ForgeAiFilePicker = forwardRef((props, forwardedRef) => {
       ...filteredProps,
       variant: props.variant,
       accept: props.accept,
+      "max-size": props.maxSize || props["max-size"],
       class: props.className,
       exportparts: props.exportparts,
       for: props.htmlFor,

package/dist/ForgeAiFloatingChat.d.ts

@@ -3,28 +3,25 @@ import { ForgeAiFloatingChat as ForgeAiFloatingChatElement } from "@tylertech/fo
 
 export type { ForgeAiFloatingChatElement };
 
-export interface ForgeAiFloatingChatProps
-  extends Pick<
-    React.AllHTMLAttributes<HTMLElement>,
-    | "children"
-    | "dir"
-    | "hidden"
-    | "id"
-    | "lang"
-    | "slot"
-    | "style"
-    | "title"
-    | "translate"
-    | "onClick"
-    | "onFocus"
-    | "onBlur"
-  > {
-  /** Indicates whether the chat is open. */
+export interface ForgeAiFloatingChatProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** undefined */
   open?: boolean;
 
-  /** Controls the chat's positioning and size behavior.
-When true, the chat will have an expanded width and be centered on the screen.
-When false, the chat will be positioned at the bottom-right corner with a fixed width. */
+  /** undefined */
   expanded?: 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()`. */
@@ -72,16 +69,7 @@ When false, the chat will be positioned at the bottom-right corner with a fixed
  * - **forge-ai-floating-chat-expand** - Fired when the chat is expanded
  * - **forge-ai-floating-chat-collapse** - Fired when the chat is collapsed
  *
- * ### **Methods:**
- *  - **show(): _void_** - Opens the chat.
- * - **close(): _void_** - Closes the chat.
- * - **toggle(): _void_** - Toggles the chat open state.
- * - **expand(): _void_** - Expands the chat to full width.
- * - **collapse(): _void_** - Collapses the chat to normal width.
- *
  * ### **Slots:**
- *  - _default_ - Default slot for messages (ai-user-message, ai-response-message components)
- * - **suggestions** - Slot for AI suggestions component
- * - **prompt** - Slot for custom AI prompt component. If not provided, a default forge-ai-prompt will be used.
+ *  - _default_ - Default slot for chatbot component
  */
 export const ForgeAiFloatingChat: React.ForwardRefExoticComponent<ForgeAiFloatingChatProps>;

package/dist/ForgeAiGradientContainer.d.ts

@@ -3,22 +3,21 @@ import { ForgeAiGradientContainer as ForgeAiGradientContainerElement } from "@ty
 
 export type { ForgeAiGradientContainerElement };
 
-export interface ForgeAiGradientContainerProps
-  extends Pick<
-    React.AllHTMLAttributes<HTMLElement>,
-    | "children"
-    | "dir"
-    | "hidden"
-    | "id"
-    | "lang"
-    | "slot"
-    | "style"
-    | "title"
-    | "translate"
-    | "onClick"
-    | "onFocus"
-    | "onBlur"
-  > {
+export interface ForgeAiGradientContainerProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
   /** Gradient intensity variant */
   variant?: ForgeAiGradientContainerElement["variant"];