@c8y/ngx-components/ai/ai-chat/index.d.ts

Angular modules for Cumulocity IoT applications

import * as _angular_core from '@angular/core';
import { EventEmitter, Type, TemplateRef } from '@angular/core';
import { AIAssistantMessage, AssistantMessageDisplayConfig, AIMessagePart, ToolCallPart, AIMessage, ChatConfig } from '@c8y/ngx-components/ai';
import { SupportedIconsSuggestions } from '@c8y/ngx-components/icon-selector/icons';
import { TranslateService } from '@ngx-translate/core';

/**
 * Context object which includes the inputs needed for assistant message rendering.
 * If creating a custom component for assistant message rendering, you will receive this as an input.
 */
interface AssistantMessageContext {
    message: AIAssistantMessage;
    config: AssistantMessageDisplayConfig;
    /** The message response is currently streaming in (not yet complete). */
    isMessageLoading: boolean;
    /** A number identifying this message in the chat history numbered from the latest - 0 is the latest, -1 is the previous, etc. */
    messageDisplayIndex: number;
}
/**
 * This is the default component used to render the contents of a message from the AI assistant, including
 * the main answer text, text from earlier steps, reasoning text and tool calls.
 */
declare class AiChatAssistantMessageComponent {
    /**
     * The context needed to render a message.
     * This is a single input so we can extend in future without breaking people who have a custom rendering implementation.
     */
    readonly assistantMessageContext: _angular_core.InputSignal<AssistantMessageContext>;
    /**
     * By default this component will render a "Working..." indicator while streaming results. This input can turn that off if required.
     */
    readonly showWorkingIndicator: _angular_core.InputSignal<boolean>;
    /**
     * Whether the thinking section is expanded. Initialized to false unless the message is still loading.
     * Call setThinkingExpanded() via viewChild to control this programmatically. Does nothing if appearance does not distinguish thinking steps.
     */
    protected readonly thinkingExpanded: _angular_core.WritableSignal<boolean>;
    /**
     * Tracks which reasoning sections are expanded, keyed by step index.
     */
    protected readonly expandedReasoningStepIndices: _angular_core.WritableSignal<Set<number>>;
    private readonly translateService;
    protected readonly thinkingAndMainAnswerParts: _angular_core.Signal<{
        thinkingParts: AIMessagePart[];
        mainAnswerParts: AIMessagePart[];
    }>;
    constructor();
    /**
     * This is public and exists for agent-chat to collapse older messages.
     * @param expanded Whether the thinking section should be expanded or not.
     */
    setThinkingExpanded(expanded: boolean): void;
    /**
     * Get a translated/translateable label for the specified tool.
     * @param tool The tool call part to get the label for.
     * @return The label to show for this tool call.
     */
    getToolLabel(tool: ToolCallPart): string;
    protected toggleReasoningExpanded(stepIndex: number): void;
    /**
     * Note: ctx is passed as a parameter rather than reading the signal in the template to ensure
     * it's totally aligned with what the template is rendering.
     * @param ctx The context for the assistant message.
     * @return The label to display for the reasoning section.
     */
    protected getThinkingLabel(ctx: AssistantMessageContext): string;
    protected getToolName(part: AIMessagePart): string | undefined;
    protected experimental_nonFinalStepTextDisplay(ctx: AssistantMessageContext): AssistantMessageDisplayConfig['experimental_nonFinalStepTextDisplay'];
    /**
     * Splits the assistant message content into two arrays: thinking content and main answer content.
     * This also removes hidden tools.
     *
     * If using the experimental rendering modes, main answer content is text in the final step (if conditions are met) plus any tool calls configured to be shown with the main answer.
     * Thinking content is everything else (reasoning, earlier text, tool calls not shown with main answer).
     *
     * @param ctx The context for the assistant message.
     * @return An object with thinkingParts and mainAnswerParts arrays.
     */
    protected splitContentIntoThinkingAndMainAnswer(ctx: AssistantMessageContext): {
        thinkingParts: AIMessagePart[];
        mainAnswerParts: AIMessagePart[];
    };
    /**
     * Scans backwards through the content parts to find the step-start index for the last step
     * that contains at least one text part. Skips trailing empty steps (step-start with no text after).
     *
     * @returns `finalStepStart` — index of the step-start part, or 0 if content belongs to the implicit first step.
     *          `finalStepHasText` — whether a step with text was found at all.
     */
    private findFinalStepWithText;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AiChatAssistantMessageComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AiChatAssistantMessageComponent, "c8y-ai-chat-assistant-message", never, { "assistantMessageContext": { "alias": "assistantMessageContext"; "required": true; "isSignal": true; }; "showWorkingIndicator": { "alias": "showWorkingIndicator"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}

/** This renders a part of an assistant message. Currently only ToolCallPart is supported, but later we can expand this to deal with all part types. */
declare class AiChatAssistantPartComponent {
    readonly part: _angular_core.InputSignal<AIMessagePart>;
    /** Whether this part is rendered as part of the main answer, or is an intermediate step with more muted rendering. */
    readonly displayAsPartOfMainAnswer: _angular_core.InputSignal<boolean>;
    /**
     * The context needed to render a message.
     * This is a single input so we can extend in future without breaking people who have a custom rendering implementation.
     */
    readonly assistantMessageContext: _angular_core.InputSignal<AssistantMessageContext>;
    /** Tracks whether this is currently expanded (used for reasoning section). */
    protected readonly expanded: _angular_core.WritableSignal<boolean>;
    protected toggleExpanded(): void;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AiChatAssistantPartComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AiChatAssistantPartComponent, "c8y-ai-chat-assistant-part", never, { "part": { "alias": "part"; "required": true; "isSignal": true; }; "displayAsPartOfMainAnswer": { "alias": "displayAsPartOfMainAnswer"; "required": false; "isSignal": true; }; "assistantMessageContext": { "alias": "assistantMessageContext"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
}

/**
 * An action button that can be added to chat messages.
 * Typically used for actions like copying, regenerating, or providing feedback on messages.
 */
declare class AiChatMessageActionComponent {
    /**
     * Set to true to use content projection for custom action button content.
     */
    custom: boolean;
    /**
     * Disables the action button when true.
     */
    disabled: boolean;
    /**
     * Tooltip text displayed when hovering over the action button.
     */
    tooltip: string;
    /**
     * Icon to display in the action button.
     */
    icon: SupportedIconsSuggestions;
    /**
     * Emitted when the action button is clicked.
     */
    actionClicked: EventEmitter<void>;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AiChatMessageActionComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AiChatMessageActionComponent, "c8y-ai-chat-message-action", never, { "custom": { "alias": "custom"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; }, { "actionClicked": "actionClicked"; }, never, ["*"], true, never>;
}

/**
 * A container for content and actions that should be rendered for each chat message.
 *
 * Project content into this component to display the message, for example add an `<ai-chat-assistant-message>`
 * for assistant messages, and a simple `markdownToHtml | async` rendering of the content for user messages.
 */
declare class AiChatMessageComponent {
    readonly role: _angular_core.InputSignal<"user" | "assistant" | "system">;
    readonly message: _angular_core.InputSignal<AIMessage>;
    private readonly translateService;
    private readonly roleResolved;
    /**
     * Generates an accessible label for the message container.
     * Includes the role (user or assistant) and timestamp if available.
     * @returns The aria-label string for screen readers
     */
    readonly ariaLabel: _angular_core.Signal<any>;
    /**
     * Generates an accessible label for the message content.
     * Prefixes the content with contextual information about who sent it.
     * @returns The aria-label string with prefixed role information
     */
    readonly messageContentAriaLabel: _angular_core.Signal<any>;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AiChatMessageComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AiChatMessageComponent, "c8y-ai-chat-message", never, { "role": { "alias": "role"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; }, {}, never, [":not(c8y-ai-chat-message-action)", "c8y-ai-chat-message-action"], true, never>;
}

/**
 * A suggestion chip that can be displayed in the chat interface.
 * When clicked, it automatically populates and sends a predefined prompt.
 */
declare class AiChatSuggestionComponent {
    /**
     * The visible label text displayed on the suggestion chip.
     */
    readonly label: _angular_core.InputSignal<string>;
    /**
     * The prompt text that will be sent when the suggestion is clicked.
     */
    readonly prompt: _angular_core.InputSignal<string>;
    /**
     * Icon to display alongside the suggestion label.
     */
    readonly icon: _angular_core.InputSignal<SupportedIconsSuggestions>;
    /**
     * When true, uses AI-styled buttons instead of default styling.
     */
    readonly useAiButtons: _angular_core.InputSignal<boolean>;
    /**
     * Disables the suggestion chip when true.
     */
    readonly disabled: _angular_core.InputSignal<boolean>;
    /**
     * Emitted when the suggestion is clicked, providing the prompt as an AIMessage.
     */
    readonly suggestionClicked: _angular_core.OutputEmitterRef<AIMessage>;
    /**
     * Handles suggestion click and emits the prompt as a user message.
     */
    suggest(): void;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AiChatSuggestionComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AiChatSuggestionComponent, "c8y-ai-chat-suggestion", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "prompt": { "alias": "prompt"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "useAiButtons": { "alias": "useAiButtons"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "suggestionClicked": "suggestionClicked"; }, never, never, true, never>;
}

declare class AiChatToolCallComponent {
    /**
     * The tool call part to render. This includes all information about the tool call, including the name of the tool,
     * the input provided and (once available) the output from the tool.
     */
    readonly tool: _angular_core.InputSignal<ToolCallPart<Record<string, unknown>, unknown>>;
    /**
     * Whether the tool call is still in progress.
     */
    readonly isExecuting: _angular_core.InputSignal<boolean>;
    /**
     * A custom component to render the details of the tool call. If not provided, the default details section will be shown.
     */
    readonly toolDetailsComponent: _angular_core.InputSignal<Type<unknown>>;
    /**
     * Shows the default details section for a tool call.
     */
    readonly showDefaultToolDetails: _angular_core.InputSignal<boolean>;
    /**
     * The label to show while the tool is executing. If not provided, a default label will be generated based on the tool name.
     */
    readonly executingLabel: _angular_core.InputSignal<string>;
    /**
     * The label to show once the tool has completed. If not provided, a default label will be generated based on the tool name and whether the tool call was successful or resulted in an error.
     */
    readonly completedLabel: _angular_core.InputSignal<string>;
    /**
     * A function that can generate a label for this tool call based on the tool call data.
     */
    readonly labelProvider: _angular_core.InputSignal<(toolCallPart: ToolCallPart, translateService: TranslateService) => string | undefined>;
    protected readonly expanded: _angular_core.WritableSignal<boolean>;
    protected readonly everExpanded: _angular_core.WritableSignal<boolean>;
    private readonly translateService;
    getToolLabel(tool: ToolCallPart): string;
    protected toggleExpanded(): void;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AiChatToolCallComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AiChatToolCallComponent, "c8y-ai-chat-tool-call", never, { "tool": { "alias": "tool"; "required": true; "isSignal": true; }; "isExecuting": { "alias": "isExecuting"; "required": true; "isSignal": true; }; "toolDetailsComponent": { "alias": "toolDetailsComponent"; "required": false; "isSignal": true; }; "showDefaultToolDetails": { "alias": "showDefaultToolDetails"; "required": false; "isSignal": true; }; "executingLabel": { "alias": "executingLabel"; "required": false; "isSignal": true; }; "completedLabel": { "alias": "completedLabel"; "required": false; "isSignal": true; }; "labelProvider": { "alias": "labelProvider"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}

/**
 * An interactive chat interface component for AI-powered conversations.
 * Displays messages in a conversation format with support for loading states,
 * custom configuration, and markdown formatting.
 */
declare class AiChatComponent {
    /**
     * Indicates whether the chat is currently processing a request.
     * When true, displays a cancel button instead of send button and disables the input.
     */
    isLoading: boolean;
    /**
     * Disables the chat input and send button when true.
     */
    disabled: boolean;
    /**
     * The current text in the chat input field. Supports two-way binding.
     */
    prompt: string;
    /**
     * Template for rendering custom suggestions below the input field. Can be used to provide predefined prompts or actions
     * from a dynamic source such as the AI. To use this, wrap your suggestion components in an `<ng-template #suggestionsRef>`
     * (where `suggestionsRef` matches the suggestionsTemplate reference);
     */
    suggestionsTemplate?: TemplateRef<any>;
    /** Template for customizing the welcome view using `<ng-template>`. */
    welcomeTemplate?: TemplateRef<any>;
    cumulativeUsage?: {
        inputTokens: number;
        outputTokens: number;
        totalTokens: number;
    };
    /**
     * Emitted when the user sends a message.
     * Provides an AIMessage object with role, content, and timestamp.
     */
    onMessage: EventEmitter<AIMessage>;
    /**
     * Emitted when the user cancels an ongoing operation during loading state.
     */
    onCancel: EventEmitter<void>;
    /**
     * Child message components displayed in the chat.
     */
    readonly messages: _angular_core.Signal<readonly AiChatMessageComponent[]>;
    /**
     * Reference to the scroll container for the chat messages.
     */
    private readonly scrollContainer;
    readonly componentId: string;
    private _config;
    constructor();
    /**
     * Configuration object for customizing labels, placeholders, and icons.
     * Accepts partial configuration to override defaults.
     * @param value Partial configuration to merge with defaults.
     * @returns The complete configuration object.
     */
    set config(value: Partial<ChatConfig>);
    get config(): ChatConfig;
    /**
     * Handles message submission when the user sends a message.
     * Emits the onMessage event and clears the input.
     * @param $event The event object from the form submission
     */
    sendMessage($event: Event): void;
    /**
     * Handles cancellation of ongoing operations during loading state.
     * Emits the onCancel event.
     */
    cancel(): void;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AiChatComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AiChatComponent, "c8y-ai-chat", never, { "isLoading": { "alias": "isLoading"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "prompt": { "alias": "prompt"; "required": false; }; "suggestionsTemplate": { "alias": "suggestionsTemplate"; "required": false; }; "welcomeTemplate": { "alias": "welcomeTemplate"; "required": false; }; "cumulativeUsage": { "alias": "cumulativeUsage"; "required": false; }; "config": { "alias": "config"; "required": false; }; }, { "onMessage": "onMessage"; "onCancel": "onCancel"; }, ["messages"], ["[slot='before-messages']", "c8y-ai-chat-message", "[slot='after-messages']", "c8y-ai-chat-suggestion"], true, never>;
}

export { AiChatAssistantMessageComponent, AiChatAssistantPartComponent, AiChatComponent, AiChatMessageActionComponent, AiChatMessageComponent, AiChatSuggestionComponent, AiChatToolCallComponent };
export type { AssistantMessageContext };
//# sourceMappingURL=index.d.ts.map