Documentation
Types Reference
Complete TypeScript type definitions exported by Angular AI Kit.
Overview
Type categories in Angular AI Kit
Message Types
ChatMessage, MessageRole, UserMessage, AssistantMessage
Conversation Types
Conversation, ConversationMetadata
Streaming Types
StreamingOptions, StreamChunk
Configuration Types
AiKitConfig, AvatarConfig, ThemeConfig
Message Types
Types for chat messages
1// Message Types2export type MessageRole = 'user' | 'assistant' | 'system';3 4export interface ChatMessage {5 /** Unique identifier for the message */6 id: string;7 8 /** Role of the message sender */9 role: MessageRole;10 11 /** Message content (plain text or markdown) */12 content: string;13 14 /** When the message was created */15 timestamp: Date;16 17 /** Optional metadata */18 metadata?: Record<string, unknown>;19}20 21export interface UserMessage extends ChatMessage {22 role: 'user';23}24 25export interface AssistantMessage extends ChatMessage {26 role: 'assistant';27 /** Model used to generate response */28 model?: string;29 /** Token usage statistics */30 usage?: TokenUsage;31}32 33export interface SystemMessage extends ChatMessage {34 role: 'system';35}Usage Example
const message: ChatMessage = {
id: crypto.randomUUID(),
role: 'user',
content: 'Hello!',
timestamp: new Date(),
};Conversation Types
Types for managing conversations
1// Conversation Types2export interface Conversation {3 /** Unique identifier */4 id: string;5 6 /** Display title (auto-generated or user-defined) */7 title: string;8 9 /** All messages in the conversation */10 messages: ChatMessage[];11 12 /** When conversation was created */13 createdAt: Date;14 15 /** When conversation was last updated */16 updatedAt: Date;17 18 /** Optional conversation metadata */19 metadata?: ConversationMetadata;20}21 22export interface ConversationMetadata {23 /** Model used for this conversation */24 model?: string;25 26 /** System prompt for the conversation */27 systemPrompt?: string;28 29 /** Temperature setting */30 temperature?: number;31 32 /** Max tokens setting */33 maxTokens?: number;34 35 /** Custom tags for organization */36 tags?: string[];37}Token Usage Types
Types for tracking token usage
1// Token Usage Types2export interface TokenUsage {3 /** Tokens in the prompt */4 promptTokens: number;5 6 /** Tokens in the completion */7 completionTokens: number;8 9 /** Total tokens used */10 totalTokens: number;11}12 13export interface TokenLimits {14 /** Maximum context window size */15 maxContextTokens: number;16 17 /** Maximum output tokens */18 maxOutputTokens: number;19 20 /** Tokens reserved for system prompt */21 reservedTokens?: number;22}Streaming Types
Types for streaming responses
1// Streaming Types2export interface StreamingOptions {3 /** Enable streaming mode */4 enabled: boolean;5 6 /** Callback for each chunk */7 onChunk?: (chunk: string) => void;8 9 /** Callback when complete */10 onComplete?: (fullContent: string) => void;11 12 /** Callback on error */13 onError?: (error: Error) => void;14 15 /** Optional abort signal */16 abortSignal?: AbortSignal;17}18 19export interface StreamChunk {20 /** Chunk content */21 content: string;22 23 /** Is this the final chunk? */24 done: boolean;25 26 /** Accumulated content so far */27 accumulated?: string;28}Component Input Types
Input types for components
1// Component Input Types2export interface AiResponseInputs {3 /** Message content to display */4 content: string;5 6 /** Whether response is currently streaming */7 isStreaming?: boolean;8 9 /** Show copy button */10 showCopy?: boolean;11 12 /** Show regenerate button */13 showRegenerate?: boolean;14 15 /** Custom CSS classes */16 customClasses?: string;17}18 19export interface ChatInputInputs {20 /** Placeholder text */21 placeholder?: string;22 23 /** Disable the input */24 disabled?: boolean;25 26 /** Maximum character length */27 maxLength?: number;28 29 /** Auto-focus on mount */30 autoFocus?: boolean;31 32 /** Custom CSS classes */33 customClasses?: string;34}35 36export interface CodeBlockInputs {37 /** Code content */38 code: string;39 40 /** Programming language */41 language?: string;42 43 /** Show line numbers */44 showLineNumbers?: boolean;45 46 /** Show copy button */47 showCopyButton?: boolean;48 49 /** Highlight specific lines */50 highlightLines?: number[];51 52 /** Custom CSS classes */53 customClasses?: string;54}Event Types
Types for component events
1// Event Types2export interface MessageSubmitEvent {3 /** Message content */4 content: string;5 6 /** Additional metadata */7 metadata?: Record<string, unknown>;8}9 10export interface FeedbackEvent {11 /** Message ID receiving feedback */12 messageId: string;13 14 /** Feedback type */15 type: 'positive' | 'negative';16 17 /** Optional feedback text */18 comment?: string;19}20 21export interface CopyEvent {22 /** Copied content */23 content: string;24 25 /** Source element (message, code block, etc.) */26 source: 'message' | 'code' | 'custom';27}28 29export interface RegenerateEvent {30 /** Message ID to regenerate */31 messageId: string;32 33 /** Previous content (for comparison) */34 previousContent?: string;35}Configuration Types
Types for library configuration
1// Configuration Types2export interface AiKitConfig {3 /** Avatar configuration */4 avatar?: AvatarConfig;5 6 /** Code highlighting configuration */7 codeHighlight?: CodeHighlightConfig;8 9 /** Markdown rendering configuration */10 markdown?: MarkdownConfig;11 12 /** Theme configuration */13 theme?: ThemeConfig;14}15 16export interface AvatarConfig {17 /** URL for user avatar */18 userAvatar?: string;19 20 /** URL for assistant avatar */21 assistantAvatar?: string;22 23 /** Show avatars */24 showAvatar?: boolean;25 26 /** Avatar size */27 size?: 'sm' | 'md' | 'lg';28}29 30export interface CodeHighlightConfig {31 /** Syntax highlighting theme */32 theme?: string;33 34 /** Show line numbers by default */35 showLineNumbers?: boolean;36 37 /** Wrap long lines */38 wrapLongLines?: boolean;39 40 /** Languages to support */41 languages?: string[];42}43 44export interface MarkdownConfig {45 /** Enable sanitization */46 sanitize?: boolean;47 48 /** Target for links */49 linkTarget?: '_blank' | '_self';50 51 /** Enable GitHub Flavored Markdown */52 enableGfm?: boolean;53 54 /** Enable syntax highlighting in code blocks */55 enableCodeHighlight?: boolean;56}57 58export interface ThemeConfig {59 /** Default theme */60 defaultTheme?: 'light' | 'dark' | 'system';61 62 /** Allow theme switching */63 allowToggle?: boolean;64 65 /** Persist theme preference */66 persistPreference?: boolean;67}Utility Types
Helper types for common patterns
1// Utility Types2 3/** Make all properties optional recursively */4export type DeepPartial<T> = {5 [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];6};7 8/** Make all properties readonly recursively */9export type DeepReadonly<T> = {10 readonly [P in keyof T]: T[P] extends object ? DeepReadonly<T[P]> : T[P];11};12 13/** Extract message by role */14export type MessageByRole<R extends MessageRole> = Extract<15 ChatMessage,16 { role: R }17>;18 19/** Nullable type helper */20export type Nullable<T> = T | null;21 22/** Optional type helper */23export type Optional<T> = T | undefined;24 25/** Async result with error handling */26export type AsyncResult<T, E = Error> = Promise<27 { success: true; data: T } | { success: false; error: E }28>;Importing Types
How to import types in your project
From @angular-ai-kit/core
import type {
ChatMessage,
MessageRole,
Conversation,
StreamingOptions,
} from '@angular-ai-kit/core';Best Practices
- Use
import typefor type-only imports - Import specific types, not the entire module
- Define your own types extending the base types if needed