NGX AI Chat

An Angular component library for AI chat interfaces.

Installation

npm install ngx-ai-chat

Assets

This library includes assets (SVG icons, etc.). Here are multiple ways to ensure assets are properly loaded:

Option 1: Use the bundled assets (recommended)

Assets are bundled with the library and referenced using a dynamic asset path service. In most cases, this will work automatically.

Option 2: Configure asset paths with forRoot

For applications needing to customize asset paths, configure the module with a custom assets path:

import { NgxAiChatModule } from 'ngx-ai-chat';

@NgModule({
  imports: [
    // Pass your assets path to the forRoot method
    NgxAiChatModule.forRoot({
      assetsBasePath: '/your-custom-assets-path'
    })
  ],
  // ...
})
export class AppModule { }

Option 3: Copy assets to your application

For applications that need to host assets locally:

1. Add this to your angular.json file in the "assets" array of your application's "build" architect:

{
  "glob": "**/*",
  "input": "node_modules/ngx-ai-chat/src/lib/assets",
  "output": "/assets"
}

Usage

Basic usage:

import { NgxAiChatModule } from 'ngx-ai-chat';

@NgModule({
  imports: [
    NgxAiChatModule // Use default configuration
  ]
})
export class AppModule { }

Then in your template:

<app-ai-chat></app-ai-chat>

Assets

This library includes assets (SVG icons, etc.) and provides two ways to handle assets:

Option 1: Use the bundled assets (default)

By default, the library uses assets located at the 'assets/' path in your application. The library comes with its own assets bundled.

Option 2: Configure a custom asset path

If you want to use your own assets, you can specify a custom path:

// In your app.module.ts or any module before using the component
import { NgxAiChatModule } from 'ngx-ai-chat';

// Set a custom asset path
NgxAiChatModule.setAssetBasePath('/custom-assets');

@NgModule({
  imports: [
    NgxAiChatModule
  ],
  // ...
})
export class AppModule { }

Option 3: Copy assets to your application

For applications that need to host the assets locally:

1. Add this to your angular.json file in the "assets" array of your application's "build" architect:

{
  "glob": "**/*",
  "input": "node_modules/ngx-ai-chat/src/lib/assets",
  "output": "assets/"
}

Required Assets

If you're providing your own assets, make sure to include the following SVG files:

• ai-logo.svg
• chat-history.svg
• design.svg
• configure.svg
• automate.svg
• text.svg
• code.svg
• document.svg
• photo.svg
• audio.svg
• video.svg
• learn.svg
• viewprompts.svg
• favourite.svg
• share.svg
• track.svg
• bin.svg
• And other UI elements referenced in the components

Troubleshooting

Cannot read properties of undefined (reading 'id')

If you encounter this error:

1. Import NgxAiChatModule correctly in your app.module.ts
2. Make sure the module is added to imports array, not providers
3. Use the correct selector () in your templates
4. Check for Angular version compatibility - this library is built for Angular 10.x
5. Make sure you have BrowserModule imported
6. Try clearing your node_modules folder and reinstalling dependencies

Asset loading issues

If assets are not loading:

1. Check your browser console for 404 errors to see which assets are missing
2. Make sure the assets path is configured correctly
3. If using custom assets, ensure all required SVG files are present in your custom path

Module not found or dependency errors

1. Make sure ngx-ai-chat is properly installed with npm install ngx-ai-chat
2. Check for peer dependency issues (run npm ls to check for dependency issues)

Code scaffolding

Run ng generate component component-name --project ngx-ai-chat to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project ngx-ai-chat.

Note: Don't forget to add --project ngx-ai-chat or else it will be added to the default project in your angular.json file.

Build

Run ng build ngx-ai-chat to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build ngx-ai-chat, go to the dist folder cd dist/ngx-ai-chat and run npm publish.

Running unit tests

Run ng test ngx-ai-chat to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.