@medha-analytics/datachat-ai

v1.0.0

Published

3 months ago

DataChat AI components library for Angular applications

0High
0Medium
0Low

medhaanalytics

datachat ai angular medha-analytics

@medha-analytics/datachat-ai

An Angular library providing AI-powered data chat components with interactive visualizations, session management, and automatic dark mode support.

Features

AI-Powered Chat Interface: Interactive chat component for data analysis conversations
Rich Visualizations: Support for charts (ECharts), tables (Tabulator), and data displays
Session Management: Create, manage, and switch between multiple chat sessions
Automatic Dark Mode: Portable theme system that automatically syncs with parent app's theme
Execution Timeline: Visual representation of query execution steps
Insights Panel: AI-generated insights and recommendations
Dimension Clarification: Interactive clarification dialogs for ambiguous queries
Responsive Design: Mobile-friendly components with adaptive layouts

Installation

npm install @medha-analytics/datachat-ai

Peer Dependencies

This library requires the following peer dependencies:

npm install @angular/common @angular/core @angular/material @angular/cdk @angular/forms @angular/router rxjs ngx-echarts echarts tabulator-tables

Usage

1. Configure the Library

In your app.config.ts:

import { ApplicationConfig } from '@angular/core';
import { provideDataChatAI } from '@medha-analytics/datachat-ai';

export const appConfig: ApplicationConfig = {
  providers: [
    provideDataChatAI({
      backendUrl: 'https://your-api-url.com',
      websocketUrl: 'wss://your-websocket-url.com',
      userId: 'optional-user-id'
    })
  ]
};

2. Dynamic User ID (Optional)

If you need to set the userId dynamically (e.g., after authentication), use APP_INITIALIZER:

import { ApplicationConfig, APP_INITIALIZER } from '@angular/core';
import { provideDataChatAI, EnvironmentService } from '@medha-analytics/datachat-ai';

function initializeUserId(envService: EnvironmentService) {
  return () => {
    // Get userId from your auth service or storage
    const userId = localStorage.getItem('userId') || 'default-user';
    envService.userId = userId;
  };
}

export const appConfig: ApplicationConfig = {
  providers: [
    provideDataChatAI({
      backendUrl: 'https://your-api-url.com',
      websocketUrl: 'wss://your-websocket-url.com',
      userId: '' // Will be set by initializer
    }),
    {
      provide: APP_INITIALIZER,
      useFactory: initializeUserId,
      deps: [EnvironmentService],
      multi: true
    }
  ]
};

3. Add Routes

In your app.routes.ts:

import { Routes } from '@angular/router';
import { HomeComponent } from '@medha-analytics/datachat-ai';

export const routes: Routes = [
  {
    path: 'datachat-ai',
    component: HomeComponent
  }
];

4. Import Styles

Add the library styles to your angular.json:

{
  "styles": [
    "node_modules/@medha-analytics/datachat-ai/styles/themes.css",
    "src/styles.scss"
  ]
}

Configuration Options

DataChatAIConfig

| Property | Type | Required | Description | |----------|------|----------|-------------| | backendUrl | string | Yes | Backend API URL for data processing | | websocketUrl | string | No | WebSocket URL for real-time updates (defaults to backendUrl) | | userId | string | No | User identifier for session management |

Theme System

The library includes a portable dark mode system that automatically detects and syncs with your parent application's theme.

How It Works

The library checks for a data-theme attribute on the <html> element:

<!-- Parent app sets theme -->
<html data-theme="dark">

Auto-Detection: On initialization, detects existing parent theme
Real-Time Sync: Monitors theme changes and updates automatically
Fallback: Uses system preference if no parent theme is detected
Independent: Can manage its own theme if needed

Console Logs

The library provides helpful console logs for theme detection:

=� DataChat AI Library: Detected parent app theme: dark
=� DataChat AI Library: Watching for parent app theme changes
=� DataChat AI Library: Parent app theme changed to: light

Manual Theme Control (Optional)

If you need to manually control the theme from your parent app:

// Set theme attribute on html element
document.documentElement.setAttribute('data-theme', 'dark');

The library will automatically detect and sync to this change.

Components

HomeComponent

Main entry point component that includes all features:

Chat interface
Session sidebar
Execution timeline
Insights panel
Results display

import { HomeComponent } from '@medha-analytics/datachat-ai';

Individual Components

You can also import and use individual components:

import {
  ChatInputComponent,
  ChatMessageComponent,
  SessionSidebarComponent,
  ExecutionTimelineComponent,
  InsightsComponent,
  DataTableComponent,
  DashboardResultsComponent
} from '@medha-analytics/datachat-ai';

Services

EnvironmentService

Access configuration values:

import { EnvironmentService } from '@medha-analytics/datachat-ai';

constructor(private envService: EnvironmentService) {
  console.log(this.envService.backendUrl);
  console.log(this.envService.userId);
}

ThemeService

Access theme state:

import { ThemeService } from '@medha-analytics/datachat-ai';

constructor(private themeService: ThemeService) {
  this.themeService.currentTheme$.subscribe(theme => {
    console.log('Current theme:', theme); // 'dark' | 'light'
  });
}

Example Integration

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideDataChatAI } from '@medha-analytics/datachat-ai';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideDataChatAI({
      backendUrl: 'https://api.example.com',
      websocketUrl: 'wss://api.example.com/ws',
      userId: 'user-123'
    })
  ]
};

// app.routes.ts
import { Routes } from '@angular/router';
import { HomeComponent } from '@medha-analytics/datachat-ai';

export const routes: Routes = [
  {
    path: '',
    redirectTo: '/datachat-ai',
    pathMatch: 'full'
  },
  {
    path: 'datachat-ai',
    component: HomeComponent
  }
];

Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)

Requirements

Angular >= 15.0.0
Node.js >= 16.0.0

License

ISC

Author

Medha Analytics

Support

For issues, questions, or contributions, please contact the Medha Analytics team.

Changelog

1.0.0 (2025-10-30)

Initial release
AI-powered chat interface
Interactive visualizations (ECharts, Tabulator)
Session management
Portable dark mode system with auto-sync
Execution timeline
Insights panel
Dimension clarification dialogs

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@medha-analytics/datachat-ai

Features

Installation

Peer Dependencies

Usage

1. Configure the Library

2. Dynamic User ID (Optional)

3. Add Routes

4. Import Styles

Configuration Options

DataChatAIConfig

Theme System

How It Works

Console Logs

Manual Theme Control (Optional)

Components

HomeComponent

Individual Components

Services

EnvironmentService

ThemeService

Example Integration

Browser Support

Requirements

License

Author

Support

Changelog

1.0.0 (2025-10-30)