@tylertech/forge-ai-react 0.4.0 → 0.5.0

package/dist/ForgeAiActionsToolbar.d.ts

@@ -3,22 +3,24 @@ import { ForgeAiActionsToolbar as ForgeAiActionsToolbarElement } from "@tylertec
 
 export type { ForgeAiActionsToolbarElement };
 
-export interface ForgeAiActionsToolbarProps
-  extends Pick<
-    React.AllHTMLAttributes<HTMLElement>,
-    | "children"
-    | "dir"
-    | "hidden"
-    | "id"
-    | "lang"
-    | "slot"
-    | "style"
-    | "title"
-    | "translate"
-    | "onClick"
-    | "onFocus"
-    | "onBlur"
-  > {
+export interface ForgeAiActionsToolbarProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** 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;
 
@@ -44,6 +46,11 @@ export interface ForgeAiActionsToolbarProps
   onForgeAiActionsToolbarAction?: (
     event: CustomEvent<CustomEvent<ForgeAiActionsToolbarActionEventData>>,
   ) => void;
+
+  /** Fired when feedback is submitted. The detail contains the action and optional feedback text. */
+  onForgeAiActionsToolbarFeedback?: (
+    event: CustomEvent<CustomEvent<ForgeAiActionsToolbarFeedbackEventData>>,
+  ) => void;
 }
 
 /**
@@ -53,5 +60,6 @@ export interface ForgeAiActionsToolbarProps
  *
  * ### **Events:**
  *  - **forge-ai-actions-toolbar-action** - Fired when an action button is clicked. The detail contains the action type.
+ * - **forge-ai-actions-toolbar-feedback** - Fired when feedback is submitted. The detail contains the action and optional feedback text.
  */
 export const ForgeAiActionsToolbar: React.ForwardRefExoticComponent<ForgeAiActionsToolbarProps>;

package/dist/ForgeAiActionsToolbar.js

@@ -4,6 +4,7 @@ import { useEventListener } from "./react-utils.js";
 
 export const ForgeAiActionsToolbar = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
+  const { enableReactions, ...filteredProps } = props;
 
   /** Event listeners - run once */
   useEventListener(
@@ -11,6 +12,11 @@ export const ForgeAiActionsToolbar = forwardRef((props, forwardedRef) => {
     "forge-ai-actions-toolbar-action",
     props.onForgeAiActionsToolbarAction,
   );
+  useEventListener(
+    ref,
+    "forge-ai-actions-toolbar-feedback",
+    props.onForgeAiActionsToolbarFeedback,
+  );
 
   return React.createElement(
     "forge-ai-actions-toolbar",
@@ -23,12 +29,13 @@ export const ForgeAiActionsToolbar = forwardRef((props, forwardedRef) => {
           forwardedRef.current = node;
         }
       },
-      ...props,
+      ...filteredProps,
       class: props.className,
       exportparts: props.exportparts,
       for: props.htmlFor,
       part: props.part,
       tabindex: props.tabIndex,
+      "enable-reactions": props.enableReactions ? true : undefined,
       style: { ...props.style },
     },
     props.children,

package/dist/ForgeAiAgentInfo.d.ts

@@ -0,0 +1,51 @@
+import React from "react";
+import { ForgeAiAgentInfo as ForgeAiAgentInfoElement } from "@tylertech/forge-ai/ai-agent-info";
+
+export type { ForgeAiAgentInfoElement };
+
+export interface ForgeAiAgentInfoProps 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;
+
+  /** Agent information to display */
+  agentInfo?: ForgeAiAgentInfoElement["agentInfo"];
+}
+
+/**
+ * Displays agent information in a grid layout
+ * ---
+ *
+ */
+export const ForgeAiAgentInfo: React.ForwardRefExoticComponent<ForgeAiAgentInfoProps>;

package/dist/ForgeAiAgentInfo.js

@@ -0,0 +1,33 @@
+import React, { forwardRef, useRef, useEffect } from "react";
+import "@tylertech/forge-ai/ai-agent-info";
+import { useProperties } from "./react-utils.js";
+
+export const ForgeAiAgentInfo = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { agentInfo, ...filteredProps } = props;
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, "agentInfo", props.agentInfo);
+
+  return React.createElement(
+    "forge-ai-agent-info",
+    {
+      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/ForgeAiArtifact.d.ts

@@ -3,22 +3,21 @@ import { ForgeAiArtifact as ForgeAiArtifactElement } from "@tylertech/forge-ai/a
 
 export type { ForgeAiArtifactElement };
 
-export interface ForgeAiArtifactProps
-  extends Pick<
-    React.AllHTMLAttributes<HTMLElement>,
-    | "children"
-    | "dir"
-    | "hidden"
-    | "id"
-    | "lang"
-    | "slot"
-    | "style"
-    | "title"
-    | "translate"
-    | "onClick"
-    | "onFocus"
-    | "onBlur"
-  > {
+export interface ForgeAiArtifactProps 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/ForgeAiAttachment.d.ts

@@ -0,0 +1,77 @@
+import React from "react";
+import { ForgeAiAttachment as ForgeAiAttachmentElement } from "@tylertech/forge-ai/ai-attachment";
+
+export type { ForgeAiAttachmentElement };
+
+export interface ForgeAiAttachmentProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** undefined */
+  removable?: boolean;
+
+  /** undefined */
+  uploading?: boolean;
+
+  /** undefined */
+  filename?: ForgeAiAttachmentElement["filename"];
+
+  /** undefined */
+  size?: ForgeAiAttachmentElement["size"];
+
+  /** undefined */
+  progress?: ForgeAiAttachmentElement["progress"];
+
+  /** 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 the remove button is clicked */
+  onForgeAiAttachmentRemove?: (
+    event: CustomEvent<CustomEvent<ForgeAiAttachmentRemoveEventData>>,
+  ) => void;
+}
+
+/**
+ * Displays file attachment information with removal capability.
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **forge-ai-attachment-remove** - Fired when the remove button is clicked
+ *
+ * ### **CSS Properties:**
+ *  - **--forge-ai-attachment-background** - Background color of the attachment _(default: undefined)_
+ * - **--forge-ai-attachment-border-color** - Border color of the attachment _(default: undefined)_
+ * - **--forge-ai-attachment-padding** - Padding inside the attachment _(default: undefined)_
+ * - **--forge-ai-attachment-gap** - Gap between elements _(default: undefined)_
+ */
+export const ForgeAiAttachment: React.ForwardRefExoticComponent<ForgeAiAttachmentProps>;

package/dist/ForgeAiAttachment.js

@@ -0,0 +1,43 @@
+import React, { forwardRef, useRef, useEffect } from "react";
+import "@tylertech/forge-ai/ai-attachment";
+import { useEventListener } from "./react-utils.js";
+
+export const ForgeAiAttachment = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { removable, uploading, filename, size, progress, ...filteredProps } =
+    props;
+
+  /** Event listeners - run once */
+  useEventListener(
+    ref,
+    "forge-ai-attachment-remove",
+    props.onForgeAiAttachmentRemove,
+  );
+
+  return React.createElement(
+    "forge-ai-attachment",
+    {
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      ...filteredProps,
+      filename: props.filename,
+      size: props.size,
+      progress: props.progress,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      removable: props.removable ? true : undefined,
+      uploading: props.uploading ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/dist/ForgeAiButton.d.ts

@@ -3,22 +3,21 @@ import { ForgeAiButton as ForgeAiButtonElement } from "@tylertech/forge-ai/ai-bu
 
 export type { ForgeAiButtonElement };
 
-export interface ForgeAiButtonProps
-  extends Pick<
-    React.AllHTMLAttributes<HTMLElement>,
-    | "children"
-    | "dir"
-    | "hidden"
-    | "id"
-    | "lang"
-    | "slot"
-    | "style"
-    | "title"
-    | "translate"
-    | "onClick"
-    | "onFocus"
-    | "onBlur"
-  > {
+export interface ForgeAiButtonProps 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/ForgeAiChainOfThought.d.ts

@@ -3,22 +3,21 @@ import { ForgeAiChainOfThought as ForgeAiChainOfThoughtElement } from "@tylertec
 
 export type { ForgeAiChainOfThoughtElement };
 
-export interface ForgeAiChainOfThoughtProps
-  extends Pick<
-    React.AllHTMLAttributes<HTMLElement>,
-    | "children"
-    | "dir"
-    | "hidden"
-    | "id"
-    | "lang"
-    | "slot"
-    | "style"
-    | "title"
-    | "translate"
-    | "onClick"
-    | "onFocus"
-    | "onBlur"
-  > {
+export interface ForgeAiChainOfThoughtProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
   /** Whether the chain of thought is expanded */
   expanded?: boolean;
 

package/dist/ForgeAiChatHeader.d.ts

@@ -6,22 +6,21 @@ import {
 
 export type { ForgeAiChatHeaderElement, CustomEvent };
 
-export interface ForgeAiChatHeaderProps
-  extends Pick<
-    React.AllHTMLAttributes<HTMLElement>,
-    | "children"
-    | "dir"
-    | "hidden"
-    | "id"
-    | "lang"
-    | "slot"
-    | "style"
-    | "title"
-    | "translate"
-    | "onClick"
-    | "onFocus"
-    | "onBlur"
-  > {
+export interface ForgeAiChatHeaderProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
   /** Controls whether the expand button is visible */
   showExpandButton?: boolean;
 
@@ -31,17 +30,23 @@ export interface ForgeAiChatHeaderProps
   /** Indicates the current expanded state for displaying the appropriate expand/collapse icon */
   expanded?: boolean;
 
-  /** Controls whether the dropdown menu is visible (default: true) */
-  showDropdownMenu?: boolean;
+  /** Controls which minimize icon to display */
+  minimizeIcon?: ForgeAiChatHeaderElement["minimizeIcon"];
 
-  /** Controls whether the clear chat menu item is visible (default: true) */
-  showClearChat?: boolean;
+  /** Controls state of the options dropdown menu */
+  options?: ForgeAiChatHeaderElement["options"];
 
-  /** Controls whether the info menu item is visible (default: true) */
-  showInfo?: boolean;
+  /** Controls state of the export option */
+  exportOption?: ForgeAiChatHeaderElement["exportOption"];
 
-  /** Controls which minimize icon to display ('default' | 'panel') */
-  minimizeIcon?: ForgeAiChatHeaderElement["minimizeIcon"];
+  /** Controls state of the clear chat option */
+  clearOption?: ForgeAiChatHeaderElement["clearOption"];
+
+  /** Controls the heading level for the title content (default: 2) */
+  headingLevel?: ForgeAiChatHeaderElement["headingLevel"];
+
+  /** The title text to display in the header (default: 'AI Assistant') */
+  titleText?: ForgeAiChatHeaderElement["titleText"];
 
   /** 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;
@@ -64,12 +69,15 @@ export interface ForgeAiChatHeaderProps
   /** 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;
 
+  /** Agent information to display in the info dialog */
+  agentInfo?: ForgeAiChatHeaderElement["agentInfo"];
+
+  /** Fired when the export option is selected */
+  onForgeAiChatHeaderExport?: (event: CustomEvent) => void;
+
   /** Fired when the clear chat option is selected */
   onForgeAiChatHeaderClear?: (event: CustomEvent) => void;
 
-  /** Fired when the info option is selected */
-  onForgeAiChatHeaderInfo?: (event: CustomEvent) => void;
-
   /** Fired when the expand button is clicked */
   onForgeAiChatHeaderExpand?: (event: CustomEvent) => void;
 
@@ -83,13 +91,12 @@ export interface ForgeAiChatHeaderProps
  *
  *
  * ### **Events:**
- *  - **forge-ai-chat-header-clear** - Fired when the clear chat option is selected
- * - **forge-ai-chat-header-info** - Fired when the info option is selected
+ *  - **forge-ai-chat-header-export** - Fired when the export option is selected
+ * - **forge-ai-chat-header-clear** - Fired when the clear chat option is selected
  * - **forge-ai-chat-header-expand** - Fired when the expand button is clicked
  * - **forge-ai-chat-header-minimize** - Fired when the minimize button is clicked
  *
  * ### **Slots:**
  *  - **icon** - Slot for custom icon (default: forge-ai-icon)
- * - **title** - Slot for custom title text (default: "AI Assistant")
  */
 export const ForgeAiChatHeader: React.ForwardRefExoticComponent<ForgeAiChatHeaderProps>;

package/dist/ForgeAiChatHeader.js

@@ -1,6 +1,6 @@
 import React, { forwardRef, useRef, useEffect } from "react";
 import "@tylertech/forge-ai/ai-chat-header";
-import { useEventListener } from "./react-utils.js";
+import { useEventListener, useProperties } from "./react-utils.js";
 
 export const ForgeAiChatHeader = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
@@ -8,23 +8,26 @@ export const ForgeAiChatHeader = forwardRef((props, forwardedRef) => {
     showExpandButton,
     showMinimizeButton,
     expanded,
-    showDropdownMenu,
-    showClearChat,
-    showInfo,
     minimizeIcon,
+    options,
+    exportOption,
+    clearOption,
+    headingLevel,
+    titleText,
+    agentInfo,
     ...filteredProps
   } = props;
 
   /** Event listeners - run once */
   useEventListener(
     ref,
-    "forge-ai-chat-header-clear",
-    props.onForgeAiChatHeaderClear,
+    "forge-ai-chat-header-export",
+    props.onForgeAiChatHeaderExport,
   );
   useEventListener(
     ref,
-    "forge-ai-chat-header-info",
-    props.onForgeAiChatHeaderInfo,
+    "forge-ai-chat-header-clear",
+    props.onForgeAiChatHeaderClear,
   );
   useEventListener(
     ref,
@@ -37,6 +40,9 @@ export const ForgeAiChatHeader = forwardRef((props, forwardedRef) => {
     props.onForgeAiChatHeaderMinimize,
   );
 
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, "agentInfo", props.agentInfo);
+
   return React.createElement(
     "forge-ai-chat-header",
     {
@@ -50,6 +56,11 @@ export const ForgeAiChatHeader = forwardRef((props, forwardedRef) => {
       },
       ...filteredProps,
       "minimize-icon": props.minimizeIcon || props["minimize-icon"],
+      options: props.options,
+      "export-option": props.exportOption || props["export-option"],
+      "clear-option": props.clearOption || props["clear-option"],
+      "heading-level": props.headingLevel || props["heading-level"],
+      "title-text": props.titleText || props["title-text"],
       class: props.className,
       exportparts: props.exportparts,
       for: props.htmlFor,
@@ -58,9 +69,6 @@ export const ForgeAiChatHeader = forwardRef((props, forwardedRef) => {
       "show-expand-button": props.showExpandButton ? true : undefined,
       "show-minimize-button": props.showMinimizeButton ? true : undefined,
       expanded: props.expanded ? true : undefined,
-      "show-dropdown-menu": props.showDropdownMenu ? true : undefined,
-      "show-clear-chat": props.showClearChat ? true : undefined,
-      "show-info": props.showInfo ? true : undefined,
       style: { ...props.style },
     },
     props.children,

package/dist/ForgeAiChatInterface.d.ts

@@ -3,22 +3,21 @@ import { ForgeAiChatInterface as ForgeAiChatInterfaceElement } from "@tylertech/
 
 export type { ForgeAiChatInterfaceElement };
 
-export interface ForgeAiChatInterfaceProps
-  extends Pick<
-    React.AllHTMLAttributes<HTMLElement>,
-    | "children"
-    | "dir"
-    | "hidden"
-    | "id"
-    | "lang"
-    | "slot"
-    | "style"
-    | "title"
-    | "translate"
-    | "onClick"
-    | "onFocus"
-    | "onBlur"
-  > {
+export interface ForgeAiChatInterfaceProps 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;
 
@@ -46,13 +45,11 @@ export interface ForgeAiChatInterfaceProps
  * ---
  *
  *
- * ### **Methods:**
- *  - **scrollToBottom(): _void_** - Scrolls the messages container to the bottom with smooth animation
- *
  * ### **Slots:**
  *  - _default_ - Default slot for messages
  * - **header** - Slot for AI chat header component
  * - **suggestions** - Slot for AI suggestions component
+ * - **attachments** - Slot for file attachments component
  * - **prompt** - Slot for AI prompt component
  */
 export const ForgeAiChatInterface: React.ForwardRefExoticComponent<ForgeAiChatInterfaceProps>;