@tylertech/forge-ai-react 0.2.0 → 0.4.0

package/dist/ForgeAiActionsToolbar.d.ts

@@ -42,7 +42,7 @@ export interface ForgeAiActionsToolbarProps
 
   /** Fired when an action button is clicked. The detail contains the action type. */
   onForgeAiActionsToolbarAction?: (
-    event: CustomEvent<CustomEvent<AiActionsToolbarActionEventData>>,
+    event: CustomEvent<CustomEvent<ForgeAiActionsToolbarActionEventData>>,
   ) => void;
 }
 

package/dist/ForgeAiChatHeader.d.ts

@@ -31,7 +31,16 @@ export interface ForgeAiChatHeaderProps
   /** Indicates the current expanded state for displaying the appropriate expand/collapse icon */
   expanded?: boolean;
 
-  /** Controls which minimize icon to display */
+  /** Controls whether the dropdown menu is visible (default: true) */
+  showDropdownMenu?: boolean;
+
+  /** Controls whether the clear chat menu item is visible (default: true) */
+  showClearChat?: boolean;
+
+  /** Controls whether the info menu item is visible (default: true) */
+  showInfo?: boolean;
+
+  /** Controls which minimize icon to display ('default' | 'panel') */
   minimizeIcon?: ForgeAiChatHeaderElement["minimizeIcon"];
 
   /** 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()`. */
@@ -80,6 +89,7 @@ export interface ForgeAiChatHeaderProps
  * - **forge-ai-chat-header-minimize** - Fired when the minimize button is clicked
  *
  * ### **Slots:**
- *  - **title** - Slot for custom title text (default: "AI Assistant")
+ *  - **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

@@ -8,6 +8,9 @@ export const ForgeAiChatHeader = forwardRef((props, forwardedRef) => {
     showExpandButton,
     showMinimizeButton,
     expanded,
+    showDropdownMenu,
+    showClearChat,
+    showInfo,
     minimizeIcon,
     ...filteredProps
   } = props;
@@ -55,6 +58,9 @@ 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

@@ -47,7 +47,7 @@ export interface ForgeAiChatInterfaceProps
  *
  *
  * ### **Methods:**
- *  - **scrollMessagesToBottom(): _void_** - Scrolls the messages container to the bottom only if user hasn't scrolled up
+ *  - **scrollToBottom(): _void_** - Scrolls the messages container to the bottom with smooth animation
  *
  * ### **Slots:**
  *  - _default_ - Default slot for messages

package/dist/ForgeAiEmptyState.d.ts

@@ -47,7 +47,8 @@ export interface ForgeAiEmptyStateProps
  *
  *
  * ### **Slots:**
- *  - _default_ - The custom welcome message content.
+ *  - _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.
  * - **actions** - The actions or suggestions to display below the message.
  */
 export const ForgeAiEmptyState: React.ForwardRefExoticComponent<ForgeAiEmptyStateProps>;

package/dist/ForgeAiFilePicker.d.ts

@@ -54,7 +54,7 @@ export interface ForgeAiFilePickerProps
 
   /** Fired when a file is selected via click or drag & drop. The event detail contains the selected file and timestamp. */
   onForgeAiFilePickerChange?: (
-    event: CustomEvent<CustomEvent<AiFilePickerChangeEventData>>,
+    event: CustomEvent<CustomEvent<ForgeAiFilePickerChangeEventData>>,
   ) => void;
 }
 

package/dist/ForgeAiPrompt.d.ts

@@ -19,10 +19,25 @@ export interface ForgeAiPromptProps
     | "onFocus"
     | "onBlur"
   > {
-  /** Placeholder text for the input field */
+  /** Whether the send button is disabled */
+  sendDisabled?: boolean;
+
+  /** Whether to autofocus the textarea field when the component renders */
+  autofocus?: boolean;
+
+  /** Whether the textarea field is disabled */
+  inputDisabled?: boolean;
+
+  /** Whether to dispatch escape events when Escape key is pressed */
+  cancelOnEscape?: boolean;
+
+  /** Whether the component is in running state (shows stop button instead of send button) */
+  running?: boolean;
+
+  /** Placeholder text for the textarea field */
   placeholder?: ForgeAiPromptElement["placeholder"];
 
-  /** Current value of the input field */
+  /** Current value of the textarea field */
   value?: ForgeAiPromptElement["value"];
 
   /** Layout variant for the prompt component */
@@ -49,10 +64,21 @@ export interface ForgeAiPromptProps
   /** 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 send button is clicked or Enter is pressed. */
+  /** 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<AiPromptSendEventData>>,
+    event: CustomEvent<CustomEvent<ForgeAiPromptSendEventData>>,
   ) => void;
+
+  /** Fired when the Escape key is pressed (if cancelOnEscape is true). */
+  onForgeAiPromptCancel?: (event: CustomEvent<CustomEvent<void>>) => void;
+
+  /** Fired when files are pasted into the textarea. */
+  onForgeAiPromptAttachment?: (
+    event: CustomEvent<CustomEvent<ForgeAiPromptAttachmentEventData>>,
+  ) => void;
+
+  /** Fired when the stop button is clicked. Cancelable - if cancelled, running state remains true. */
+  onForgeAiPromptStop?: (event: CustomEvent<CustomEvent<void>>) => void;
 }
 
 /**
@@ -61,7 +87,13 @@ export interface ForgeAiPromptProps
  *
  *
  * ### **Events:**
- *  - **forge-ai-prompt-send** - Fired when the send button is clicked or Enter is pressed.
+ *  - **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.
+ *
+ * ### **Methods:**
+ *  - **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

@@ -4,10 +4,27 @@ import { useEventListener } from "./react-utils.js";
 
 export const ForgeAiPrompt = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
-  const { placeholder, value, variant, ...filteredProps } = props;
+  const {
+    sendDisabled,
+    autofocus,
+    inputDisabled,
+    cancelOnEscape,
+    running,
+    placeholder,
+    value,
+    variant,
+    ...filteredProps
+  } = props;
 
   /** Event listeners - run once */
   useEventListener(ref, "forge-ai-prompt-send", props.onForgeAiPromptSend);
+  useEventListener(ref, "forge-ai-prompt-cancel", props.onForgeAiPromptCancel);
+  useEventListener(
+    ref,
+    "forge-ai-prompt-attachment",
+    props.onForgeAiPromptAttachment,
+  );
+  useEventListener(ref, "forge-ai-prompt-stop", props.onForgeAiPromptStop);
 
   return React.createElement(
     "forge-ai-prompt",
@@ -29,6 +46,11 @@ export const ForgeAiPrompt = forwardRef((props, forwardedRef) => {
       for: props.htmlFor,
       part: props.part,
       tabindex: props.tabIndex,
+      "send-disabled": props.sendDisabled ? true : undefined,
+      autofocus: props.autofocus ? true : undefined,
+      "input-disabled": props.inputDisabled ? true : undefined,
+      "cancel-on-escape": props.cancelOnEscape ? true : undefined,
+      running: props.running ? true : undefined,
       style: { ...props.style },
     },
     props.children,

package/dist/ForgeAiResponseMessage.d.ts

@@ -42,7 +42,7 @@ export interface ForgeAiResponseMessageProps
 
   /** Fired when an action button is clicked. */
   onForgeAiResponseMessageAction?: (
-    event: CustomEvent<CustomEvent<AiResponseMessageActionEventData>>,
+    event: CustomEvent<CustomEvent<ForgeAiResponseMessageActionEventData>>,
   ) => void;
 }
 

package/dist/ForgeAiSuggestions.d.ts

@@ -19,9 +19,6 @@ export interface ForgeAiSuggestionsProps
     | "onFocus"
     | "onBlur"
   > {
-  /** Array of suggestion objects to display */
-  suggestions?: ForgeAiSuggestionsElement["suggestions"];
-
   /** Display variant for suggestions layout */
   variant?: ForgeAiSuggestionsElement["variant"];
 
@@ -46,9 +43,12 @@ export interface ForgeAiSuggestionsProps
   /** 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 suggestion objects to display */
+  suggestions?: ForgeAiSuggestionsElement["suggestions"];
+
   /** Fired when a suggestion is selected. */
   onForgeAiSuggestionsSelect?: (
-    event: CustomEvent<CustomEvent<AiSuggestionsEventData>>,
+    event: CustomEvent<CustomEvent<ForgeAiSuggestionsEventData>>,
   ) => void;
 }
 

package/dist/ForgeAiSuggestions.js

@@ -1,10 +1,10 @@
 import React, { forwardRef, useRef, useEffect } from "react";
 import "@tylertech/forge-ai/ai-suggestions";
-import { useEventListener } from "./react-utils.js";
+import { useEventListener, useProperties } from "./react-utils.js";
 
 export const ForgeAiSuggestions = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
-  const { suggestions, variant, ...filteredProps } = props;
+  const { variant, suggestions, ...filteredProps } = props;
 
   /** Event listeners - run once */
   useEventListener(
@@ -13,6 +13,9 @@ export const ForgeAiSuggestions = forwardRef((props, forwardedRef) => {
     props.onForgeAiSuggestionsSelect,
   );
 
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, "suggestions", props.suggestions);
+
   return React.createElement(
     "forge-ai-suggestions",
     {
@@ -25,7 +28,6 @@ export const ForgeAiSuggestions = forwardRef((props, forwardedRef) => {
         }
       },
       ...filteredProps,
-      suggestions: props.suggestions,
       variant: props.variant,
       class: props.className,
       exportparts: props.exportparts,

package/dist/ForgeAiThinkingIndicator.d.ts

@@ -0,0 +1,49 @@
+import React from "react";
+import { ForgeAiThinkingIndicator as ForgeAiThinkingIndicatorElement } from "@tylertech/forge-ai/ai-thinking-indicator";
+
+export type { ForgeAiThinkingIndicatorElement };
+
+export interface ForgeAiThinkingIndicatorProps
+  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;
+}
+
+/**
+ * A thinking indicator component that displays three animated dots to show that the system is processing or awaiting a response.
+ * ---
+ *
+ */
+export const ForgeAiThinkingIndicator: React.ForwardRefExoticComponent<ForgeAiThinkingIndicatorProps>;

package/dist/ForgeAiThinkingIndicator.js

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

package/dist/ForgeAiThreads.d.ts

@@ -48,7 +48,7 @@ export interface ForgeAiThreadsProps
 
   /** Fired when a thread is selected. */
   onForgeAiThreadsSelect?: (
-    event: CustomEvent<CustomEvent<AiThreadsSelectEventData>>,
+    event: CustomEvent<CustomEvent<ForgeAiThreadsSelectEventData>>,
   ) => void;
 
   /** Fired when the new chat button is clicked. */

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-export * from "./ForgeAiActionsToolbar.js";
 export * from "./ForgeAiArtifact.js";
+export * from "./ForgeAiActionsToolbar.js";
 export * from "./ForgeAiButton.js";
 export * from "./ForgeAiChatHeader.js";
 export * from "./ForgeAiChainOfThought.js";
@@ -24,6 +24,7 @@ export * from "./ForgeAiResponseMessage.js";
 export * from "./ForgeAiSidebar.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";

package/dist/index.js

@@ -1,5 +1,5 @@
-export * from "./ForgeAiActionsToolbar.js";
 export * from "./ForgeAiArtifact.js";
+export * from "./ForgeAiActionsToolbar.js";
 export * from "./ForgeAiButton.js";
 export * from "./ForgeAiChatHeader.js";
 export * from "./ForgeAiChainOfThought.js";
@@ -24,6 +24,7 @@ export * from "./ForgeAiResponseMessage.js";
 export * from "./ForgeAiSidebar.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";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tylertech/forge-ai-react",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "A React adapter for Tyler Forge™ AI Web Components.",
   "repository": "tyler-technologies-oss/forge-ai",
   "author": "Tyler Technologies, Inc.",
@@ -11,20 +11,34 @@
   "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.2.0"
+    "@tylertech/forge-ai": "workspace:^",
+    "react": ">=17.0.0"
   },
   "devDependencies": {
-    "@repo/prettier-config": "",
-    "@tylertech-eslint/eslint-plugin": "3.0.0",
-    "@tylertech/forge": "3.11.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.8.0",
+    "@tylertech/tyler-icons": "catalog:",
+    "@types/node": "catalog:",
     "@types/react": "^18.3.26",
     "@types/react-dom": "^18.3.7",
     "@types/react-router": "^5.1.20",
@@ -32,31 +46,17 @@
     "@vitejs/plugin-react": "^4.7.0",
     "change-case": "^5.4.4",
     "custom-element-react-wrappers": "^1.7.3",
-    "eslint": "9.37.0",
-    "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.0.1",
-    "sass": "1.93.2",
+    "rimraf": "catalog:",
+    "sass": "catalog:",
     "typescript": "~5.8.3",
-    "vite": "7.1.10",
-    "vite-tsconfig-paths": "5.1.4",
-    "@tylertech/forge-ai": "^0.2.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:"
   }
-}
+}