Chatbot Widget Integration Steps

🎯 Overview

This guide explains how to integrate the @simenergi/chatbot-widget package (published on npm registry) into SIMIEN.Web application.

latest: 1.3.0

📦 Part 1: Installation

Step 1: Install Widget Package

Standard npm install - no configuration needed:

cd SIMIEN.Web
npm install @simenergi/chatbot-widget

🔧 Part 2: Code Integration

Step 5: Update app.module.ts

Add the following imports and module configuration:

import { SimienChatbotModule } from "@simenergi/chatbot-widget";
import { MarkdownModule } from "ngx-markdown";
import { environment } from "./environments/environment";

@NgModule({
  declarations: [
    // ... existing declarations
  ],
  imports: [
    // ... existing imports

    // Required: Initialize markdown module at root level
    MarkdownModule.forRoot(),

    // Configure chatbot widget
    SimienChatbotModule.forRoot({
      apiUrl: environment.simienLlmApiUrl,
      maxMessageCharacters: environment.simienLlmChatWidgetMaxMessageCharacters,
      maxAssistantMessages: environment.simienLlmChatWidgetMaxAssistantMessages,
    }),
  ],
  // ... rest of module config
})
export class AppModule {}

Note: The widget internally uses MarkdownModule.forChild(), but you must call MarkdownModule.forRoot() once in your root app module.

Step 6: Add Widget to Layout

In src/app/layouts/application-layout/application-layout.component.html:

<!-- Add at the end of the template, just before closing </div> -->
<sm-chat-widget></sm-chat-widget>

Step 7: Verify Environment Variables

Ensure these variables exist in src/environments/environment.ts:

export const environment = {
  production: false,
  // ... other environment variables

  // Chatbot configuration
  simienLlmApiUrl: "http://localhost:8000",
  simienLlmChatWidgetMaxMessageCharacters: 1000,
  simienLlmChatWidgetMaxAssistantMessages: 10,
};

And in src/environments/environment.prod.ts:

export const environment = {
  production: true,
  // ... other environment variables

  // Chatbot configuration (production API URL)
  simienLlmApiUrl: "https://your-production-api.simien.no",
  simienLlmChatWidgetMaxMessageCharacters: 1000,
  simienLlmChatWidgetMaxAssistantMessages: 10,
};