@nabeh/chat-widget 0.1.2 → 0.1.4

package/README.md

@@ -51,9 +51,64 @@ export class AppComponent implements AfterViewInit, OnDestroy {
 }
 ```
 
+## Angular Embedded Page Usage
+
+Use `displayMode: 'embedded'` when the host application already owns the page shell and you only want the chat experience rendered inside a content area.
+
+```ts
+import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from '@angular/core';
+import { createChatWidget } from '@nabeh/chat-widget';
+
+@Component({
+  selector: 'app-knowledge-assistant-page',
+  template: `<div #chatRoot class="knowledge-assistant-root"></div>`
+})
+export class KnowledgeAssistantPageComponent implements AfterViewInit, OnDestroy {
+  @ViewChild('chatRoot', { static: true })
+  private chatRoot?: ElementRef<HTMLElement>;
+
+  private widget?: ReturnType<typeof createChatWidget>;
+
+  ngAfterViewInit(): void {
+    if (!this.chatRoot?.nativeElement) {
+      return;
+    }
+
+    this.widget = createChatWidget({
+      apiBaseUrl: 'http://your-api-url',
+      displayMode: 'embedded',
+      mount: this.chatRoot.nativeElement,
+      embedded: {
+        showHeader: false
+      },
+      endpoints: {
+        ask: '/my-chats/:chatId/messages',
+        history: '/my-chats/:chatId/messages',
+        listChats: '/my-chats',
+        createChat: '/my-chats',
+        updateChat: '/my-chats/:chatId',
+        deleteChat: '/my-chats/:chatId'
+      },
+      rag: {
+        knowledgeNames: ['sample-kb'],
+        loadHistoryOnOpen: true
+      },
+      getUserContext: async () => ({
+        userId: 'your-user-id'
+      })
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.widget?.destroy();
+  }
+}
+```
+
 ## Configuration
 
 - `apiBaseUrl`: Backend base URL. Example: `https://api.example.com`
+- `displayMode`: `widget` for the floating launcher, `embedded` for a full chat page rendered inside `mount`
 - `endpoints.ask`: Send-message endpoint
 - `endpoints.history`: Fetch chat history endpoint
 - `endpoints.listChats`: List chats endpoint
@@ -64,6 +119,7 @@ export class AppComponent implements AfterViewInit, OnDestroy {
 - `rag.loadHistoryOnOpen`: Load history automatically when the widget opens
 - `getUserContext`: Function that returns the current user context
 - `getAccessToken`: Optional function that returns a bearer token
+- `embedded.showHeader`: In embedded mode, show or hide the library-owned page header. Default: `false`
 
 ## Example With Token
 
@@ -118,3 +174,4 @@ If you are loading the browser bundle manually, the package also exposes:
 - `apiBaseUrl` should point to your backend, not your Angular frontend
 - initialize the widget after authentication if your backend requires user identity or tokens
 - call `destroy()` when the hosting Angular component is destroyed
+- for embedded mode, give the mount container a real height such as `min-height: calc(100vh - navbar - footer)`