@tylertech/forge-ai-react 0.4.1 → 0.6.0

package/dist/ForgeAiPrompt.d.ts

@@ -1,24 +1,27 @@
 import React from "react";
-import { ForgeAiPrompt as ForgeAiPromptElement } from "@tylertech/forge-ai/ai-prompt";
-
-export type { ForgeAiPromptElement };
-
-export interface ForgeAiPromptProps
-  extends Pick<
-    React.AllHTMLAttributes<HTMLElement>,
-    | "children"
-    | "dir"
-    | "hidden"
-    | "id"
-    | "lang"
-    | "slot"
-    | "style"
-    | "title"
-    | "translate"
-    | "onClick"
-    | "onFocus"
-    | "onBlur"
-  > {
+import {
+  ForgeAiPrompt as ForgeAiPromptElement,
+  Event,
+  CustomEvent,
+} from "@tylertech/forge-ai/ai-prompt";
+
+export type { ForgeAiPromptElement, Event, CustomEvent };
+
+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;
 
@@ -34,6 +37,9 @@ export interface ForgeAiPromptProps
   /** Whether the component is in running state (shows stop button instead of send button) */
   running?: boolean;
 
+  /** Whether debug mode is active (shows debug icon button) */
+  debugMode?: boolean;
+
   /** Placeholder text for the textarea field */
   placeholder?: ForgeAiPromptElement["placeholder"];
 
@@ -64,6 +70,15 @@ 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;
 
+  /** Available slash commands */
+  slashCommands?: ForgeAiPromptElement["slashCommands"];
+
+  /** undefined */
+  onInput?: (event: CustomEvent) => void;
+
+  /** undefined */
+  onForgeAiPromptCommand?: (event: CustomEvent) => void;
+
   /** 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<ForgeAiPromptSendEventData>>,
@@ -79,6 +94,9 @@ export interface ForgeAiPromptProps
 
   /** Fired when the stop button is clicked. Cancelable - if cancelled, running state remains true. */
   onForgeAiPromptStop?: (event: CustomEvent<CustomEvent<void>>) => void;
+
+  /** Fired when the debug icon button is clicked. */
+  onForgeAiPromptDebugToggle?: (event: CustomEvent<CustomEvent<void>>) => void;
 }
 
 /**
@@ -87,13 +105,17 @@ export interface ForgeAiPromptProps
  *
  *
  * ### **Events:**
- *  - **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.
+ *  - **input**
+ * - **forge-ai-prompt-command**
+ * - **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.
+ * - **forge-ai-prompt-debug-toggle** - Fired when the debug icon button is clicked.
  *
  * ### **Methods:**
- *  - **focus(): _void_** - Focuses the textarea element
+ *  - **closeSlashMenu(): _void_** - Closes the slash command menu
+ * - **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

@@ -1,6 +1,6 @@
 import React, { forwardRef, useRef, useEffect } from "react";
 import "@tylertech/forge-ai/ai-prompt";
-import { useEventListener } from "./react-utils.js";
+import { useEventListener, useProperties } from "./react-utils.js";
 
 export const ForgeAiPrompt = forwardRef((props, forwardedRef) => {
   const ref = useRef(null);
@@ -10,13 +10,21 @@ export const ForgeAiPrompt = forwardRef((props, forwardedRef) => {
     inputDisabled,
     cancelOnEscape,
     running,
+    debugMode,
     placeholder,
     value,
     variant,
+    slashCommands,
     ...filteredProps
   } = props;
 
   /** Event listeners - run once */
+  useEventListener(ref, "input", props.onInput);
+  useEventListener(
+    ref,
+    "forge-ai-prompt-command",
+    props.onForgeAiPromptCommand,
+  );
   useEventListener(ref, "forge-ai-prompt-send", props.onForgeAiPromptSend);
   useEventListener(ref, "forge-ai-prompt-cancel", props.onForgeAiPromptCancel);
   useEventListener(
@@ -25,6 +33,14 @@ export const ForgeAiPrompt = forwardRef((props, forwardedRef) => {
     props.onForgeAiPromptAttachment,
   );
   useEventListener(ref, "forge-ai-prompt-stop", props.onForgeAiPromptStop);
+  useEventListener(
+    ref,
+    "forge-ai-prompt-debug-toggle",
+    props.onForgeAiPromptDebugToggle,
+  );
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, "slashCommands", props.slashCommands);
 
   return React.createElement(
     "forge-ai-prompt",
@@ -51,6 +67,7 @@ export const ForgeAiPrompt = forwardRef((props, forwardedRef) => {
       "input-disabled": props.inputDisabled ? true : undefined,
       "cancel-on-escape": props.cancelOnEscape ? true : undefined,
       running: props.running ? true : undefined,
+      "debug-mode": props.debugMode ? true : undefined,
       style: { ...props.style },
     },
     props.children,

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,30 @@ 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;
+
+  /** undefined */
+  hasDebugData?: 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 +48,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 +75,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, hasDebugData, ...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,15 @@ 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,
+      "has-debug-data": props.hasDebugData ? true : undefined,
       style: { ...props.style },
     },
     props.children,

package/dist/ForgeAiSidebar.d.ts

@@ -3,22 +3,21 @@ import { ForgeAiSidebar as ForgeAiSidebarElement } from "@tylertech/forge-ai/ai-
 
 export type { ForgeAiSidebarElement };
 
-export interface ForgeAiSidebarProps
-  extends Pick<
-    React.AllHTMLAttributes<HTMLElement>,
-    | "children"
-    | "dir"
-    | "hidden"
-    | "id"
-    | "lang"
-    | "slot"
-    | "style"
-    | "title"
-    | "translate"
-    | "onClick"
-    | "onFocus"
-    | "onBlur"
-  > {
+export interface ForgeAiSidebarProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
   /** Indicates whether the sidebar is open. */
   open?: boolean;
 

package/dist/ForgeAiSidebarChat.d.ts

@@ -3,28 +3,25 @@ import { ForgeAiSidebarChat as ForgeAiSidebarChatElement } from "@tylertech/forg
 
 export type { ForgeAiSidebarChatElement };
 
-export interface ForgeAiSidebarChatProps
-  extends Pick<
-    React.AllHTMLAttributes<HTMLElement>,
-    | "children"
-    | "dir"
-    | "hidden"
-    | "id"
-    | "lang"
-    | "slot"
-    | "style"
-    | "title"
-    | "translate"
-    | "onClick"
-    | "onFocus"
-    | "onBlur"
-  > {
-  /** Indicates whether the sidebar chat is open. */
+export interface ForgeAiSidebarChatProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** undefined */
   open?: boolean;
 
-  /** Controls whether the chat is displayed in an expanded modal state.
-When true, the chat content will be shown in a fullscreen modal.
-When false, the chat will be displayed in the sidebar. */
+  /** 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 displayed in the sidebar. */
  * - **forge-ai-sidebar-chat-expand** - Fired when the sidebar chat is expanded to modal
  * - **forge-ai-sidebar-chat-collapse** - Fired when the sidebar chat is collapsed from modal
  *
- * ### **Methods:**
- *  - **show(): _void_** - Opens the sidebar chat.
- * - **close(): _void_** - Closes the sidebar chat.
- * - **toggle(): _void_** - Toggles the sidebar chat open state.
- * - **expand(): _void_** - Expands the chat to fullscreen modal.
- * - **collapse(): _void_** - Collapses the chat from fullscreen modal back to sidebar.
- *
  * ### **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 ForgeAiSidebarChat: React.ForwardRefExoticComponent<ForgeAiSidebarChatProps>;

package/dist/ForgeAiSlashCommandMenu.d.ts

@@ -0,0 +1,68 @@
+import React from "react";
+import { ForgeAiSlashCommandMenu as ForgeAiSlashCommandMenuElement } from "@tylertech/forge-ai/ai-slash-command-menu";
+
+export type { ForgeAiSlashCommandMenuElement };
+
+export interface ForgeAiSlashCommandMenuProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** undefined */
+  open?: boolean;
+
+  /** undefined */
+  filterQuery?: ForgeAiSlashCommandMenuElement["filterQuery"];
+
+  /** 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 a command is selected. */
+  onForgeAiSlashCommandMenuSelect?: (
+    event: CustomEvent<CustomEvent<ForgeAiSlashCommandMenuSelectEventData>>,
+  ) => void;
+
+  /** Fired when the menu should close. */
+  onForgeAiSlashCommandMenuClose?: (
+    event: CustomEvent<CustomEvent<void>>,
+  ) => void;
+}
+
+/**
+ *
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **forge-ai-slash-command-menu-select** - Fired when a command is selected.
+ * - **forge-ai-slash-command-menu-close** - Fired when the menu should close.
+ */
+export const ForgeAiSlashCommandMenu: React.ForwardRefExoticComponent<ForgeAiSlashCommandMenuProps>;

package/dist/ForgeAiSlashCommandMenu.js

@@ -0,0 +1,44 @@
+import React, { forwardRef, useRef, useEffect } from "react";
+import "@tylertech/forge-ai/ai-slash-command-menu";
+import { useEventListener } from "./react-utils.js";
+
+export const ForgeAiSlashCommandMenu = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { open, filterQuery, ...filteredProps } = props;
+
+  /** Event listeners - run once */
+  useEventListener(
+    ref,
+    "forge-ai-slash-command-menu-select",
+    props.onForgeAiSlashCommandMenuSelect,
+  );
+  useEventListener(
+    ref,
+    "forge-ai-slash-command-menu-close",
+    props.onForgeAiSlashCommandMenuClose,
+  );
+
+  return React.createElement(
+    "forge-ai-slash-command-menu",
+    {
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      ...filteredProps,
+      "filter-query": props.filterQuery || props["filter-query"],
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      open: props.open ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});