@assistant-ui/react
Version:
Open-source TypeScript/React library for building production-grade AI chat experiences
186 lines • 8.3 kB
TypeScript
import { type ComponentType, type FC, type PropsWithChildren } from "react";
import { type Unstable_AudioMessagePartComponent, type DataMessagePartComponent, type EmptyMessagePartComponent, type TextMessagePartComponent, type ImageMessagePartComponent, type SourceMessagePartComponent, type ToolCallMessagePartComponent, type ToolCallMessagePartProps, type FileMessagePartComponent, type ReasoningMessagePartComponent } from "@assistant-ui/core/react";
type MessagePartGroup = {
groupKey: string | undefined;
indices: number[];
};
export type GroupingFunction = (parts: readonly any[]) => MessagePartGroup[];
/**
* @deprecated Prefer `<MessagePrimitive.GroupedParts>` for adjacent
* grouping — it dispatches all rendering through one `switch (part.type)`
* and supports nested group paths. Keep this primitive only for
* non-adjacent clustering (e.g., gathering parts with the same parent-id
* across the message).
*/
export declare namespace MessagePrimitiveUnstable_PartsGrouped {
type Props = {
/**
* Function that takes an array of message parts and returns an array of groups.
* Each group contains a key (for identification) and an array of indices.
*
* @example
* ```tsx
* // Group by parent ID (default behavior)
* groupingFunction={(parts) => {
* const groups = new Map<string | number, number[]>();
* parts.forEach((part, i) => {
* const key = part.parentId ?? i;
* const indices = groups.get(key) ?? [];
* indices.push(i);
* groups.set(key, indices);
* });
* return Array.from(groups.entries()).map(([key, indices]) => ({
* groupKey: typeof key === "string" ? key : undefined,
* indices
* }));
* }}
* ```
*
* @example
* ```tsx
* // Group by tool name
* import { groupMessagePartsByToolName } from "@assistant-ui/react";
*
* <MessagePrimitive.Unstable_PartsGrouped
* groupingFunction={groupMessagePartsByToolName}
* components={{
* Group: ({ key, indices, children }) => {
* if (!key) return <>{children}</>;
* return (
* <div className="tool-group">
* <h4>Tool: {key}</h4>
* {children}
* </div>
* );
* }
* }}
* />
* ```
*/
groupingFunction: GroupingFunction;
/**
* Component configuration for rendering different types of message content.
*
* You can provide custom components for each content type (text, image, file, etc.)
* and configure tool rendering behavior. If not provided, default components will be used.
*/
components: {
/** Component for rendering empty messages */
Empty?: EmptyMessagePartComponent | undefined;
/** Component for rendering text content */
Text?: TextMessagePartComponent | undefined;
/** Component for rendering reasoning content (typically hidden) */
Reasoning?: ReasoningMessagePartComponent | undefined;
/** Component for rendering source content */
Source?: SourceMessagePartComponent | undefined;
/** Component for rendering image content */
Image?: ImageMessagePartComponent | undefined;
/** Component for rendering file content */
File?: FileMessagePartComponent | undefined;
/**
* Component for rendering audio content.
*
* @deprecated Render audio through the `File` slot instead, branching
* on an `audio/*` mime type.
*/
Unstable_Audio?: Unstable_AudioMessagePartComponent | undefined;
/** Configuration for data part rendering */
data?: {
/** Map data event names to specific components */
by_name?: Record<string, DataMessagePartComponent | undefined> | undefined;
/** Fallback component for unmatched data events */
Fallback?: DataMessagePartComponent | undefined;
} | undefined;
/** Configuration for tool call rendering */
tools?: {
/** Map of tool names to their specific components */
by_name?: Record<string, ToolCallMessagePartComponent | undefined> | undefined;
/** Fallback component for unregistered tools */
Fallback?: ComponentType<ToolCallMessagePartProps> | undefined;
} | {
/** Override component that handles all tool calls */
Override: ComponentType<ToolCallMessagePartProps>;
} | undefined;
/**
* Component for rendering grouped message parts.
*
* When provided, this component will automatically wrap message parts that share
* the same group key as determined by the groupingFunction.
*
* The component receives:
* - `groupKey`: The group key (or undefined for ungrouped parts)
* - `indices`: Array of indices for the parts in this group
* - `children`: The rendered message part components
*
* @example
* ```tsx
* // Collapsible group
* Group: ({ groupKey, indices, children }) => {
* if (!groupKey) return <>{children}</>;
* return (
* <details className="message-group">
* <summary>
* Group {groupKey} ({indices.length} parts)
* </summary>
* <div className="group-content">
* {children}
* </div>
* </details>
* );
* }
* ```
*
* @param groupKey - The group key (undefined for ungrouped parts)
* @param indices - Array of indices for the parts in this group
* @param children - Rendered message part components to display within the group
*/
Group?: ComponentType<PropsWithChildren<{
groupKey: string | undefined;
indices: number[];
}>>;
} | undefined;
};
}
/**
* Renders the parts of a message grouped by a custom grouping function.
*
* This component allows you to group message parts based on any criteria you define.
* The grouping function receives all message parts and returns an array of groups,
* where each group has a key and an array of part indices.
*
* @deprecated Prefer `<MessagePrimitive.GroupedParts>` for adjacent
* grouping — it dispatches all rendering through one `switch (part.type)`
* and supports nested group paths. Keep this primitive only for
* non-adjacent clustering (e.g., gathering parts with the same parent-id
* across the message).
*
* @example
* ```tsx
* // Group by parent ID (default behavior)
* <MessagePrimitive.Unstable_PartsGrouped
* components={{
* Text: ({ text }) => <p className="message-text">{text}</p>,
* Image: ({ image }) => <img src={image} alt="Message image" />,
* Group: ({ groupKey, indices, children }) => {
* if (!groupKey) return <>{children}</>;
* return (
* <div className="parent-group border rounded p-4">
* <h4>Parent ID: {groupKey}</h4>
* {children}
* </div>
* );
* }
* }}
* />
* ```
*/
export declare const MessagePrimitiveUnstable_PartsGrouped: FC<MessagePrimitiveUnstable_PartsGrouped.Props>;
/**
* Renders the parts of a message grouped by their parent ID.
* This is a convenience wrapper around Unstable_PartsGrouped with parent ID grouping.
*
* @deprecated Use MessagePrimitive.Unstable_PartsGrouped instead for more flexibility
*/
export declare const MessagePrimitiveUnstable_PartsGroupedByParentId: FC<Omit<MessagePrimitiveUnstable_PartsGrouped.Props, "groupingFunction">>;
export {};
//# sourceMappingURL=MessagePartsGrouped.d.ts.map