@tylertech/forge-ai-react 0.8.1 → 0.9.0

package/dist/ForgeAiAgentSelector.d.ts

@@ -0,0 +1,69 @@
+import React from "react";
+import {
+  ForgeAiAgentSelector as ForgeAiAgentSelectorElement,
+  CustomEvent,
+} from "@tylertech/forge-ai/ai-agent-selector";
+
+export type { ForgeAiAgentSelectorElement, CustomEvent };
+
+export interface ForgeAiAgentSelectorProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** Disables the selector (e.g., during streaming) */
+  disabled?: boolean;
+
+  /** ID of the currently selected agent */
+  selectedAgentId?: ForgeAiAgentSelectorElement["selectedAgentId"];
+
+  /** Fallback text when no agent is selected */
+  titleText?: ForgeAiAgentSelectorElement["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;
+
+  /** 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;
+
+  /** Array of available agents */
+  agents?: ForgeAiAgentSelectorElement["agents"];
+
+  /** Fired when an agent is selected */
+  onForgeAiAgentSelectorChange?: (event: CustomEvent) => void;
+}
+
+/**
+ * Agent selector component for switching between AI agents.
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **forge-ai-agent-selector-change** - Fired when an agent is selected
+ */
+export const ForgeAiAgentSelector: React.ForwardRefExoticComponent<ForgeAiAgentSelectorProps>;

package/dist/ForgeAiAgentSelector.js

@@ -0,0 +1,44 @@
+import React, { forwardRef, useRef, useEffect } from "react";
+import "@tylertech/forge-ai/ai-agent-selector";
+import { useEventListener, useProperties } from "./react-utils.js";
+
+export const ForgeAiAgentSelector = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { disabled, selectedAgentId, titleText, agents, ...filteredProps } =
+    props;
+
+  /** Event listeners - run once */
+  useEventListener(
+    ref,
+    "forge-ai-agent-selector-change",
+    props.onForgeAiAgentSelectorChange,
+  );
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, "agents", props.agents);
+
+  return React.createElement(
+    "forge-ai-agent-selector",
+    {
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      ...filteredProps,
+      "selected-agent-id": props.selectedAgentId || props["selected-agent-id"],
+      "title-text": props.titleText || props["title-text"],
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      disabled: props.disabled ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/dist/ForgeAiChatHeader.d.ts

@@ -30,6 +30,9 @@ export interface ForgeAiChatHeaderProps extends Pick<
   /** Indicates the current expanded state for displaying the appropriate expand/collapse icon */
   expanded?: boolean;
 
+  /** Disables the agent selector (e.g., during streaming) */
+  disableAgentSelector?: boolean;
+
   /** Controls which minimize icon to display */
   minimizeIcon?: ForgeAiChatHeaderElement["minimizeIcon"];
 
@@ -48,6 +51,9 @@ export interface ForgeAiChatHeaderProps extends Pick<
   /** The title text to display in the header (default: 'AI Assistant') */
   titleText?: ForgeAiChatHeaderElement["titleText"];
 
+  /** ID of the currently selected agent */
+  selectedAgentId?: ForgeAiChatHeaderElement["selectedAgentId"];
+
   /** 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;
 
@@ -72,12 +78,18 @@ export interface ForgeAiChatHeaderProps extends Pick<
   /** Agent information to display in the info dialog */
   agentInfo?: ForgeAiChatHeaderElement["agentInfo"];
 
+  /** Array of available agents for the agent selector */
+  agents?: ForgeAiChatHeaderElement["agents"];
+
   /** Fired when the export option is selected */
   onForgeAiChatHeaderExport?: (event: CustomEvent) => void;
 
   /** Fired when the clear chat option is selected */
   onForgeAiChatHeaderClear?: (event: CustomEvent) => void;
 
+  /** undefined */
+  onForgeAiChatHeaderAgentChange?: (event: CustomEvent) => void;
+
   /** Fired when the expand button is clicked */
   onForgeAiChatHeaderExpand?: (event: CustomEvent) => void;
 
@@ -93,6 +105,7 @@ export interface ForgeAiChatHeaderProps extends Pick<
  * ### **Events:**
  *  - **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-agent-change**
  * - **forge-ai-chat-header-expand** - Fired when the expand button is clicked
  * - **forge-ai-chat-header-minimize** - Fired when the minimize button is clicked
  *

package/dist/ForgeAiChatHeader.js

@@ -8,13 +8,16 @@ export const ForgeAiChatHeader = forwardRef((props, forwardedRef) => {
     showExpandButton,
     showMinimizeButton,
     expanded,
+    disableAgentSelector,
     minimizeIcon,
     options,
     exportOption,
     clearOption,
     headingLevel,
     titleText,
+    selectedAgentId,
     agentInfo,
+    agents,
     ...filteredProps
   } = props;
 
@@ -29,6 +32,11 @@ export const ForgeAiChatHeader = forwardRef((props, forwardedRef) => {
     "forge-ai-chat-header-clear",
     props.onForgeAiChatHeaderClear,
   );
+  useEventListener(
+    ref,
+    "forge-ai-chat-header-agent-change",
+    props.onForgeAiChatHeaderAgentChange,
+  );
   useEventListener(
     ref,
     "forge-ai-chat-header-expand",
@@ -42,6 +50,7 @@ export const ForgeAiChatHeader = forwardRef((props, forwardedRef) => {
 
   /** Properties - run whenever a property has changed */
   useProperties(ref, "agentInfo", props.agentInfo);
+  useProperties(ref, "agents", props.agents);
 
   return React.createElement(
     "forge-ai-chat-header",
@@ -61,6 +70,7 @@ export const ForgeAiChatHeader = forwardRef((props, forwardedRef) => {
       "clear-option": props.clearOption || props["clear-option"],
       "heading-level": props.headingLevel || props["heading-level"],
       "title-text": props.titleText || props["title-text"],
+      "selected-agent-id": props.selectedAgentId || props["selected-agent-id"],
       class: props.className,
       exportparts: props.exportparts,
       for: props.htmlFor,
@@ -69,6 +79,7 @@ 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,
+      "disable-agent-selector": props.disableAgentSelector ? true : undefined,
       style: { ...props.style },
     },
     props.children,

package/dist/ForgeAiChatbot.d.ts

@@ -57,6 +57,9 @@ export interface ForgeAiChatbotProps extends Pick<
   /** The disclaimer text to display below the prompt. Set to empty string, null, or undefined to hide. */
   disclaimerText?: ForgeAiChatbotElement["disclaimerText"];
 
+  /** undefined */
+  selectedAgentId?: ForgeAiChatbotElement["selectedAgentId"];
+
   /** 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;
 
@@ -146,6 +149,7 @@ export interface ForgeAiChatbotProps extends Pick<
  *  - **clearMessages(): _void_** - Clears all messages from the chat history.
  * - **getMessages(): __** - Gets the current message history.
  * - **setMessages(messages: _ChatMessage[]_): _void_** - Sets the message history. Useful for restoring conversation state.
+ * - **getSelectedAgent(): __** - Gets the currently selected agent.
  * - **sendMessage(content: _string_, files: _File[]_): _Promise<void>_** - Programmatically sends a message as the user.
  * - **abort(): _void_** - Aborts the current streaming response.
  * - **scrollToBottom({ behavior }: _{ behavior?: ScrollBehavior }_): _Promise<void>_** - Scrolls the chat interface to the bottom.
@@ -154,6 +158,12 @@ export interface ForgeAiChatbotProps extends Pick<
  *
  * ### **Slots:**
  *  - **header** - Slot for custom header content
+ * - **icon** - Slot for custom header icon (default: forge-ai-icon)
  * - **empty-state** - Slot for custom empty state content (overrides default suggestions)
+ *
+ * ### **CSS Properties:**
+ *  - **--forge-ai-chatbot-icon-color** - The fill color for the AI icon. Defaults to `tertiary`. _(default: undefined)_
+ * - **--forge-ai-chatbot-suggestion-background** - The background color for suggestion buttons. Defaults to `tertiary-container`. _(default: undefined)_
+ * - **--forge-ai-chatbot-suggestion-foreground** - The text color for suggestion buttons. Defaults to `on-tertiary-container`. _(default: undefined)_
  */
 export const ForgeAiChatbot: React.ForwardRefExoticComponent<ForgeAiChatbotProps>;

package/dist/ForgeAiChatbot.js

@@ -18,6 +18,7 @@ export const ForgeAiChatbot = forwardRef((props, forwardedRef) => {
     titleText,
     headingLevel,
     disclaimerText,
+    selectedAgentId,
     ...filteredProps
   } = props;
 
@@ -86,6 +87,7 @@ export const ForgeAiChatbot = forwardRef((props, forwardedRef) => {
       "title-text": props.titleText || props["title-text"],
       "heading-level": props.headingLevel || props["heading-level"],
       "disclaimer-text": props.disclaimerText || props["disclaimer-text"],
+      "selected-agent-id": props.selectedAgentId || props["selected-agent-id"],
       class: props.className,
       exportparts: props.exportparts,
       for: props.htmlFor,

package/dist/ForgeAiSuggestions.d.ts

@@ -60,6 +60,7 @@ export interface ForgeAiSuggestionsProps extends Pick<
  *  - **forge-ai-suggestions-select** - Fired when a suggestion is selected.
  *
  * ### **CSS Properties:**
- *  - **--forge-ai-suggestion-max-width** - The maximum width of the suggestion buttons in inline layout. _(default: undefined)_
+ *  - **--forge-ai-suggestions-inline-size** - The maximum inline size of the suggestions container. _(default: undefined)_
+ * - **--forge-ai-suggestion-max-width** - The maximum width of the suggestion buttons in inline layout. _(default: undefined)_
  */
 export const ForgeAiSuggestions: React.ForwardRefExoticComponent<ForgeAiSuggestionsProps>;

package/dist/index.d.ts

@@ -1,14 +1,15 @@
 export * from "./ForgeAiAgentInfo.js";
 export * from "./ForgeAiAssistantResponse.js";
-export * from "./ForgeAiArtifact.js";
+export * from "./ForgeAiAgentSelector.js";
 export * from "./ForgeAiAttachment.js";
 export * from "./ForgeAiButton.js";
+export * from "./ForgeAiArtifact.js";
 export * from "./ForgeAiChainOfThought.js";
-export * from "./ForgeAiChatHeader.js";
 export * from "./ForgeAiChatInterface.js";
-export * from "./ForgeAiConfirmationPrompt.js";
+export * from "./ForgeAiChatHeader.js";
 export * from "./ForgeAiChatbotToolCall.js";
 export * from "./ForgeAiChatbot.js";
+export * from "./ForgeAiConfirmationPrompt.js";
 export * from "./ForgeAiDialog.js";
 export * from "./ForgeAiDropdownMenuItemGroup.js";
 export * from "./ForgeAiDropdownMenuItem.js";
@@ -17,8 +18,8 @@ export * from "./ForgeAiDropdownMenu.js";
 export * from "./ForgeAiEmbeddedChat.js";
 export * from "./ForgeAiEmptyState.js";
 export * from "./ForgeAiErrorMessage.js";
-export * from "./ForgeAiEventStreamViewer.js";
 export * from "./ForgeAiFab.js";
+export * from "./ForgeAiEventStreamViewer.js";
 export * from "./ForgeAiFilePicker.js";
 export * from "./ForgeAiFloatingChat.js";
 export * from "./ForgeAiGradientContainer.js";
@@ -31,15 +32,15 @@ export * from "./ForgeAiReasoning.js";
 export * from "./ForgeAiReasoningHeader.js";
 export * from "./ForgeAiResponseMessage.js";
 export * from "./ForgeAiResponseMessageToolbar.js";
-export * from "./ForgeAiSidebar.js";
 export * from "./ForgeAiSidebarChat.js";
+export * from "./ForgeAiSidebar.js";
 export * from "./ForgeAiSlashCommandMenu.js";
 export * from "./ForgeAiSpinner.js";
 export * from "./ForgeAiSuggestions.js";
 export * from "./ForgeAiThinkingIndicator.js";
-export * from "./ForgeAiUserMessage.js";
 export * from "./ForgeAiThreads.js";
 export * from "./ForgeAiUserMessageToolbar.js";
+export * from "./ForgeAiUserMessage.js";
 export * from "./ForgeAiVoiceInput.js";
 export * from "./ForgeAiThoughtBase.js";
 export * from "./ForgeAiThoughtDetail.js";
@@ -47,8 +48,8 @@ export * from "./ForgeAiThoughtImage.js";
 export * from "./ForgeAiThoughtSearchResult.js";
 export * from "./ForgePromptButton.js";
 export * from "./ForgeAiReasoningContent.js";
-export * from "./ForgeAiOverlay.js";
 export * from "./ForgeAiPopover.js";
 export * from "./ForgeAiTooltip.js";
-export * from "./ForgeAiPaginator.js";
+export * from "./ForgeAiOverlay.js";
 export * from "./ForgeAiToolDataTable.js";
+export * from "./ForgeAiPaginator.js";

package/dist/index.js

@@ -1,14 +1,15 @@
 export * from "./ForgeAiAgentInfo.js";
 export * from "./ForgeAiAssistantResponse.js";
-export * from "./ForgeAiArtifact.js";
+export * from "./ForgeAiAgentSelector.js";
 export * from "./ForgeAiAttachment.js";
 export * from "./ForgeAiButton.js";
+export * from "./ForgeAiArtifact.js";
 export * from "./ForgeAiChainOfThought.js";
-export * from "./ForgeAiChatHeader.js";
 export * from "./ForgeAiChatInterface.js";
-export * from "./ForgeAiConfirmationPrompt.js";
+export * from "./ForgeAiChatHeader.js";
 export * from "./ForgeAiChatbotToolCall.js";
 export * from "./ForgeAiChatbot.js";
+export * from "./ForgeAiConfirmationPrompt.js";
 export * from "./ForgeAiDialog.js";
 export * from "./ForgeAiDropdownMenuItemGroup.js";
 export * from "./ForgeAiDropdownMenuItem.js";
@@ -17,8 +18,8 @@ export * from "./ForgeAiDropdownMenu.js";
 export * from "./ForgeAiEmbeddedChat.js";
 export * from "./ForgeAiEmptyState.js";
 export * from "./ForgeAiErrorMessage.js";
-export * from "./ForgeAiEventStreamViewer.js";
 export * from "./ForgeAiFab.js";
+export * from "./ForgeAiEventStreamViewer.js";
 export * from "./ForgeAiFilePicker.js";
 export * from "./ForgeAiFloatingChat.js";
 export * from "./ForgeAiGradientContainer.js";
@@ -31,15 +32,15 @@ export * from "./ForgeAiReasoning.js";
 export * from "./ForgeAiReasoningHeader.js";
 export * from "./ForgeAiResponseMessage.js";
 export * from "./ForgeAiResponseMessageToolbar.js";
-export * from "./ForgeAiSidebar.js";
 export * from "./ForgeAiSidebarChat.js";
+export * from "./ForgeAiSidebar.js";
 export * from "./ForgeAiSlashCommandMenu.js";
 export * from "./ForgeAiSpinner.js";
 export * from "./ForgeAiSuggestions.js";
 export * from "./ForgeAiThinkingIndicator.js";
-export * from "./ForgeAiUserMessage.js";
 export * from "./ForgeAiThreads.js";
 export * from "./ForgeAiUserMessageToolbar.js";
+export * from "./ForgeAiUserMessage.js";
 export * from "./ForgeAiVoiceInput.js";
 export * from "./ForgeAiThoughtBase.js";
 export * from "./ForgeAiThoughtDetail.js";
@@ -47,8 +48,8 @@ export * from "./ForgeAiThoughtImage.js";
 export * from "./ForgeAiThoughtSearchResult.js";
 export * from "./ForgePromptButton.js";
 export * from "./ForgeAiReasoningContent.js";
-export * from "./ForgeAiOverlay.js";
 export * from "./ForgeAiPopover.js";
 export * from "./ForgeAiTooltip.js";
-export * from "./ForgeAiPaginator.js";
+export * from "./ForgeAiOverlay.js";
 export * from "./ForgeAiToolDataTable.js";
+export * from "./ForgeAiPaginator.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tylertech/forge-ai-react",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "description": "A React adapter for Tyler Forge™ AI Web Components.",
   "repository": "tyler-technologies-oss/forge-ai",
   "author": "Tyler Technologies, Inc.",
@@ -16,7 +16,7 @@
   },
   "peerDependencies": {
     "react": ">=17.0.0",
-    "@tylertech/forge-ai": "^0.8.1"
+    "@tylertech/forge-ai": "^0.9.0"
   },
   "devDependencies": {
     "@repo/prettier-config": "",
@@ -44,7 +44,7 @@
     "typescript": "~5.8.3",
     "vite": "7.3.0",
     "vite-tsconfig-paths": "6.0.3",
-    "@tylertech/forge-ai": "^0.8.1"
+    "@tylertech/forge-ai": "^0.9.0"
   },
   "scripts": {
     "predev": "pnpm run build",