1// DI Token Definitions2import { InjectionToken } from '@angular/core';3 4/**5 * Configuration for avatar display6 */7export const AI_AVATAR_CONFIG = new InjectionToken<AvatarConfig>(8  'AI_AVATAR_CONFIG'9);10 11/**12 * Configuration for code highlighting13 */14export const AI_CODE_HIGHLIGHT_CONFIG = new InjectionToken<CodeHighlightConfig>(15  'AI_CODE_HIGHLIGHT_CONFIG'16);17 18/**19 * Configuration for markdown rendering20 */21export const AI_MARKDOWN_CONFIG = new InjectionToken<MarkdownConfig>(22  'AI_MARKDOWN_CONFIG'23);24 25/**26 * Configuration for theming27 */28export const AI_THEME_CONFIG = new InjectionToken<ThemeConfig>(29  'AI_THEME_CONFIG'30);31 32/**33 * Default message templates34 */35export const AI_MESSAGE_TEMPLATES = new InjectionToken<MessageTemplates>(36  'AI_MESSAGE_TEMPLATES'37);

1// AI_AVATAR_CONFIG2import { AI_AVATAR_CONFIG } from '@angular-ai-kit/core';3 4// In your component or module providers5providers: [6  {7    provide: AI_AVATAR_CONFIG,8    useValue: {9      userAvatar: '/assets/avatars/user.png',10      assistantAvatar: '/assets/avatars/bot.png',11      showAvatar: true,12      size: 'md', // 'sm' | 'md' | 'lg'13    },14  },15]16 17// Interface18interface AvatarConfig {19  /** URL or path to user avatar image */20  userAvatar?: string;21 22  /** URL or path to assistant avatar image */23  assistantAvatar?: string;24 25  /** Whether to show avatars */26  showAvatar?: boolean;27 28  /** Avatar size */29  size?: 'sm' | 'md' | 'lg';30 31  /** Fallback initials for user */32  userFallback?: string;33 34  /** Fallback initials for assistant */35  assistantFallback?: string;36}

1// AI_CODE_HIGHLIGHT_CONFIG2import { AI_CODE_HIGHLIGHT_CONFIG } from '@angular-ai-kit/core';3 4providers: [5  {6    provide: AI_CODE_HIGHLIGHT_CONFIG,7    useValue: {8      theme: 'github-dark',9      showLineNumbers: true,10      wrapLongLines: false,11      languages: ['typescript', 'javascript', 'html', 'css', 'python'],12    },13  },14]15 16// Interface17interface CodeHighlightConfig {18  /** Highlight.js theme name */19  theme?: string;20 21  /** Show line numbers by default */22  showLineNumbers?: boolean;23 24  /** Wrap long lines instead of horizontal scroll */25  wrapLongLines?: boolean;26 27  /** Languages to register for highlighting */28  languages?: string[];29 30  /** Tab size for indentation */31  tabSize?: number;32}

1// AI_MARKDOWN_CONFIG2import { AI_MARKDOWN_CONFIG } from '@angular-ai-kit/core';3 4providers: [5  {6    provide: AI_MARKDOWN_CONFIG,7    useValue: {8      sanitize: true,9      linkTarget: '_blank',10      enableGfm: true,11      enableCodeHighlight: true,12    },13  },14]15 16// Interface17interface MarkdownConfig {18  /** Sanitize HTML in markdown */19  sanitize?: boolean;20 21  /** Target for links (_blank, _self) */22  linkTarget?: '_blank' | '_self';23 24  /** Enable GitHub Flavored Markdown */25  enableGfm?: boolean;26 27  /** Enable syntax highlighting in code blocks */28  enableCodeHighlight?: boolean;29 30  /** Custom link renderer */31  linkRenderer?: (href: string, text: string) => string;32 33  /** Custom image renderer */34  imageRenderer?: (src: string, alt: string) => string;35}

1// AI_THEME_CONFIG2import { AI_THEME_CONFIG } from '@angular-ai-kit/core';3 4providers: [5  {6    provide: AI_THEME_CONFIG,7    useValue: {8      defaultTheme: 'system',9      allowToggle: true,10      persistPreference: true,11      storageKey: 'ai-kit-theme',12    },13  },14]15 16// Interface17interface ThemeConfig {18  /** Default theme to use */19  defaultTheme?: 'light' | 'dark' | 'system';20 21  /** Allow users to toggle theme */22  allowToggle?: boolean;23 24  /** Persist preference to localStorage */25  persistPreference?: boolean;26 27  /** Key for localStorage */28  storageKey?: string;29}

1// AI_MESSAGE_TEMPLATES2import { AI_MESSAGE_TEMPLATES } from '@angular-ai-kit/core';3 4providers: [5  {6    provide: AI_MESSAGE_TEMPLATES,7    useValue: {8      loading: 'Thinking...',9      error: 'Something went wrong. Please try again.',10      empty: 'No messages yet. Start a conversation!',11      copied: 'Copied to clipboard!',12      regenerating: 'Regenerating response...',13    },14  },15]16 17// Interface18interface MessageTemplates {19  /** Text shown while loading */20  loading?: string;21 22  /** Error message template */23  error?: string;24 25  /** Empty state message */26  empty?: string;27 28  /** Copy confirmation message */29  copied?: string;30 31  /** Regeneration loading message */32  regenerating?: string;33}

1// Using tokens in components2import { Component, inject } from '@angular/core';3import {4  AI_AVATAR_CONFIG,5  AI_THEME_CONFIG,6  AvatarConfig,7  ThemeConfig,8} from '@angular-ai-kit/core';9 10@Component({11  selector: 'app-chat',12  template: `13    <div [class]="themeClass()">14      @if (avatarConfig?.showAvatar) {15        <img [src]="avatarConfig.userAvatar" alt="User" />16      }17    </div>18  `,19})20export class ChatComponent {21  // Inject with optional flag22  avatarConfig = inject(AI_AVATAR_CONFIG, { optional: true });23  themeConfig = inject(AI_THEME_CONFIG, { optional: true });24 25  themeClass() {26    return this.themeConfig?.defaultTheme === 'dark' ? 'dark' : '';27  }28}