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 type for type-only imports
  • Import specific types, not the entire module
  • Define your own types extending the base types if needed