bstp-agent-widget 0.0.0 → 0.2.0

package/README.md

@@ -1,30 +1,30 @@
 # BSTP Agent Widget
 
-`bstp-agent-widget`, başka React projelerine eklenebilen bir Agent Chat widget kütüphanesidir.
+`bstp-agent-widget` is an Agent Chat widget library that can be integrated into other React projects.
 
 ## Library Build & Publish
 
-### 1) Library build al
+### 1) Build the library
 
 ```bash
 bun run build:lib
 ```
 
-### 2) Pakete girecek dosyaları kontrol et
+### 2) Check package contents
 
 ```bash
 bun run pack:check
 ```
 
-### 3) npm'e publish et
+### 3) Publish to npm
 
 ```bash
 npm publish --access public
 ```
 
-> Not: `prepublishOnly` otomatik olarak `build:lib` çalıştırır.
+> Note: `prepublishOnly` automatically runs `build:lib`.
 
-## Consumer Project Kullanımı
+## Consumer Project Usage
 
 ```bash
 bun add bstp-agent-widget
@@ -57,8 +57,67 @@ export function Page() {
 
 ## Development Notes
 
-- `react` ve `react-dom` `peerDependencies` olarak tanımlıdır.
-- Paket çıktıları `dist/` altına üretilir.
+- `react` and `react-dom` are defined as `peerDependencies`.
+- Library outputs are generated under `dist/`.
+
+## Angular Integration
+
+Install the package in your Angular app:
+
+```bash
+npm i bstp-agent-widget
+```
+
+Add the widget stylesheet once (for example in `src/styles.scss`):
+
+```scss
+@import 'bstp-agent-widget/style.css';
+```
+
+Create a wrapper component:
+
+```ts
+import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from '@angular/core';
+import { mountAgentChatWidgetFromEnvironment } from 'bstp-agent-widget';
+
+@Component({
+  selector: 'app-agent-chat-widget',
+  template: '<div #widgetHost></div>',
+})
+export class AgentChatWidgetComponent implements AfterViewInit, OnDestroy {
+  @ViewChild('widgetHost', { static: true }) widgetHost!: ElementRef<HTMLDivElement>;
+  private cleanup: (() => void) | null = null;
+
+  async ngAfterViewInit(): Promise<void> {
+    this.cleanup = await mountAgentChatWidgetFromEnvironment(this.widgetHost.nativeElement, {
+      runtime: {
+        customerId: '590100010884',
+        customerToken: 'jwt-token',
+        language: 'en-US',
+      },
+      // Optional: defaults to /environment.json
+      // environmentUrl: '/environment.json',
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.cleanup?.();
+  }
+}
+```
+
+The function reads `genai.config` from `environment.json`:
+
+```json
+{
+  "genai": {
+    "config": {
+      "assistantId": 220,
+      "url": "https://.../genai/api/v1"
+    }
+  }
+}
+```
 
 # React Starter Kit