@courseecho/ai-widget-angular 1.0.0

package/src/ai-widget.service.ts

@@ -0,0 +1,313 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+/**
+ * Types matching core SDK
+ */
+export interface AiMessage {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  timestamp: Date;
+  sources?: string[];
+  isStreaming?: boolean;
+}
+
+export interface AiChart {
+  type: 'line' | 'bar' | 'pie' | 'table';
+  title: string;
+  data: any;
+  config?: any;
+}
+
+export interface AiContext {
+  pageUrl: string;
+  pageTitle: string;
+  userId?: string;
+  sessionId?: string;
+  customData?: Record<string, any>;
+}
+
+export interface AiContextConfig {
+  enableContextTracking: boolean;
+  contextUpdateInterval?: number;
+  includePageMetadata?: boolean;
+}
+
+export interface AiQuery {
+  question: string;
+  context?: AiContext;
+}
+
+export interface AiResponse {
+  success: boolean;
+  answer: string;
+  sources?: string[];
+  charts?: AiChart[];
+  followUpQuestions?: string[];
+  error?: string;
+}
+
+export interface AiWidgetConfig {
+  apiEndpoint: string;
+  enableFloatingButton?: boolean;
+  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+  theme?: 'light' | 'dark';
+  contextConfig?: AiContextConfig;
+}
+
+export interface AiAuthConfig {
+  jwtToken?: string;
+  apiKey?: string;
+  refreshTokenFn?: () => Promise<string>;
+}
+
+/**
+ * Angular Service for AI Widget SDK
+ * Provides reactive state management using RxJS
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class AiWidgetService {
+  private config: AiWidgetConfig | null = null;
+  private authConfig: AiAuthConfig = {};
+  
+  // State observables
+  private messagesSubject = new BehaviorSubject<AiMessage[]>([]);
+  private loadingSubject = new BehaviorSubject<boolean>(false);
+  private errorSubject = new BehaviorSubject<string | null>(null);
+  private contextSubject = new BehaviorSubject<AiContext | null>(null);
+  private chartsSubject = new BehaviorSubject<AiChart[]>([]);
+  
+  // Public observables
+  messages$ = this.messagesSubject.asObservable();
+  loading$ = this.loadingSubject.asObservable();
+  error$ = this.errorSubject.asObservable();
+  context$ = this.contextSubject.asObservable();
+  charts$ = this.chartsSubject.asObservable();
+
+  constructor() {}
+
+  /**
+   * Initialize the AI Widget Service
+   */
+  initialize(config: AiWidgetConfig, authConfig?: AiAuthConfig): void {
+    this.config = config;
+    this.authConfig = authConfig || {};
+    this.syncContext();
+  }
+
+  /**
+   * Send a query to the AI backend
+   */
+  async sendQuery(question: string): Promise<AiResponse> {
+    if (!this.config) {
+      const error = 'AI Widget not initialized. Call initialize() first.';
+      this.errorSubject.next(error);
+      throw new Error(error);
+    }
+
+    this.loadingSubject.next(true);
+    this.errorSubject.next(null);
+
+    try {
+      // Add user message
+      const userMessage: AiMessage = {
+        id: `msg-${Date.now()}`,
+        role: 'user',
+        content: question,
+        timestamp: new Date()
+      };
+      this.messagesSubject.next([...this.messagesSubject.value, userMessage]);
+
+      // Call backend
+      const headers: Record<string, string> = {
+        'Content-Type': 'application/json'
+      };
+
+      if (this.authConfig.jwtToken) {
+        headers['Authorization'] = `Bearer ${this.authConfig.jwtToken}`;
+      } else if (this.authConfig.apiKey) {
+        headers['X-API-Key'] = this.authConfig.apiKey;
+      }
+
+      const response = await fetch(`${this.config.apiEndpoint}/api/query`, {
+        method: 'POST',
+        headers,
+        body: JSON.stringify({
+          query: question,
+          context: this.contextSubject.value
+        })
+      });
+
+      if (!response.ok) {
+        throw new Error(`API error: ${response.status}`);
+      }
+
+      const data = await response.json() as AiResponse;
+
+      // Add assistant message
+      const assistantMessage: AiMessage = {
+        id: `msg-${Date.now()}`,
+        role: 'assistant',
+        content: data.answer,
+        timestamp: new Date(),
+        sources: data.sources,
+        isStreaming: false
+      };
+      this.messagesSubject.next([...this.messagesSubject.value, assistantMessage]);
+
+      // Update charts if any
+      if (data.charts && data.charts.length > 0) {
+        this.chartsSubject.next(data.charts);
+      }
+
+      this.loadingSubject.next(false);
+      return data;
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : 'Unknown error';
+      this.errorSubject.next(errorMsg);
+      this.loadingSubject.next(false);
+      throw err;
+    }
+  }
+
+  /**
+   * Set JWT authentication token
+   */
+  setJwt(token: string): void {
+    this.authConfig.jwtToken = token;
+  }
+
+  /**
+   * Set API key authentication
+   */
+  setApiKey(key: string): void {
+    this.authConfig.apiKey = key;
+  }
+
+  /**
+   * Set custom context
+   */
+  setContext(context: AiContext): void {
+    this.contextSubject.next(context);
+  }
+
+  /**
+   * Get current context
+   */
+  getContext(): AiContext | null {
+    return this.contextSubject.value;
+  }
+
+  /**
+   * Clear all messages and reset state
+   */
+  clear(): void {
+    this.messagesSubject.next([]);
+    this.chartsSubject.next([]);
+    this.errorSubject.next(null);
+  }
+
+  /**
+   * Export chat history
+   */
+  exportChats(format: 'json' | 'csv' = 'json'): string {
+    const messages = this.messagesSubject.value;
+    
+    if (format === 'json') {
+      return JSON.stringify(messages, null, 2);
+    }
+
+    // CSV format
+    const headers = ['Timestamp', 'Role', 'Content'];
+    const rows = messages.map(m => [
+      m.timestamp.toISOString(),
+      m.role,
+      `"${m.content.replace(/"/g, '""')}"`
+    ]);
+
+    const csvContent = [
+      headers.join(','),
+      ...rows.map(r => r.join(','))
+    ].join('\n');
+
+    return csvContent;
+  }
+
+  /**
+   * Check backend health
+   */
+  async checkHealth(): Promise<void> {
+    if (!this.config) {
+      throw new Error('AI Widget not initialized');
+    }
+
+    const response = await fetch(`${this.config.apiEndpoint}/health`);
+    if (!response.ok) {
+      throw new Error(`Health check failed: ${response.status}`);
+    }
+  }
+
+  /**
+   * Sync page context automatically
+   */
+  private syncContext(): void {
+    if (!this.config?.contextConfig?.enableContextTracking) {
+      return;
+    }
+
+    const context: AiContext = {
+      pageUrl: window.location.href,
+      pageTitle: document.title,
+      sessionId: this.getOrCreateSessionId()
+    };
+
+    this.contextSubject.next(context);
+
+    // Update context on navigation
+    if (this.config.contextConfig?.contextUpdateInterval) {
+      setInterval(() => {
+        if (window.location.href !== context.pageUrl) {
+          context.pageUrl = window.location.href;
+          context.pageTitle = document.title;
+          this.contextSubject.next(context);
+        }
+      }, this.config.contextConfig.contextUpdateInterval);
+    }
+  }
+
+  /**
+   * Get or create session ID
+   */
+  private getOrCreateSessionId(): string {
+    let sessionId = sessionStorage.getItem('ai-widget-session-id');
+    if (!sessionId) {
+      sessionId = `session-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+      sessionStorage.setItem('ai-widget-session-id', sessionId);
+    }
+    return sessionId;
+  }
+
+  /**
+   * Get current messages (snapshot)
+   */
+  getMessages(): AiMessage[] {
+    return this.messagesSubject.value;
+  }
+
+  /**
+   * Get loading state (snapshot)
+   */
+  isLoading(): boolean {
+    return this.loadingSubject.value;
+  }
+
+  /**
+   * Get current error (snapshot)
+   */
+  getError(): string | null {
+    return this.errorSubject.value;
+  }
+}

package/src/index.ts

@@ -0,0 +1,28 @@
+/**
+ * @courseecho/ai-widget-angular
+ * 
+ * AI Chat Widget for Angular 14+
+ * 
+ * Public API exports
+ */
+
+// Services
+export { AiWidgetService } from './ai-widget.service';
+
+// Components
+export { AiChatWidgetComponent } from './ai-chat-widget.component';
+
+// Module (for older Angular versions)
+export { AiWidgetModule } from './ai-widget.module';
+
+// Types
+export type {
+  AiMessage,
+  AiChart,
+  AiContext,
+  AiContextConfig,
+  AiQuery,
+  AiResponse,
+  AiWidgetConfig,
+  AiAuthConfig
+} from './ai-widget.service';

package/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM"],
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "node",
+    "useDefineForClassFields": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "**/*.spec.ts"
+  ]
+}