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.6.7

📦 Part 1: Installation

$3

Standard npm install - no configuration needed:

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

🔧 Part 2: Code Integration

$3

Add the following imports and module configuration:

`typescript
import { SimienChatbotModule } from "@simenergi/chatbot-widget";
import { MarkdownModule } from "ngx-markdown";
import { HttpClient } from "@angular/common/http";
import { environment } from "./environments/environment";

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

// Required: Initialize markdown module at root level
MarkdownModule.forRoot({
loader: HttpClient, // optional, only if you use [src] attribute
}),

// 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 for proper markdown rendering.

$3

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

`html


`

$3

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

`typescript
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:

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

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

---