diff --git a/examples/angular-example/.editorconfig b/examples/angular-example/.editorconfig
new file mode 100644
index 00000000..f166060d
--- /dev/null
+++ b/examples/angular-example/.editorconfig
@@ -0,0 +1,17 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+ij_typescript_use_double_quotes = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
diff --git a/examples/angular-example/.gitignore b/examples/angular-example/.gitignore
new file mode 100644
index 00000000..cc7b1413
--- /dev/null
+++ b/examples/angular-example/.gitignore
@@ -0,0 +1,42 @@
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db
diff --git a/examples/angular-example/.vscode/extensions.json b/examples/angular-example/.vscode/extensions.json
new file mode 100644
index 00000000..77b37457
--- /dev/null
+++ b/examples/angular-example/.vscode/extensions.json
@@ -0,0 +1,4 @@
+{
+ // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+ "recommendations": ["angular.ng-template"]
+}
diff --git a/examples/angular-example/.vscode/launch.json b/examples/angular-example/.vscode/launch.json
new file mode 100644
index 00000000..925af837
--- /dev/null
+++ b/examples/angular-example/.vscode/launch.json
@@ -0,0 +1,20 @@
+{
+ // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "name": "ng serve",
+ "type": "chrome",
+ "request": "launch",
+ "preLaunchTask": "npm: start",
+ "url": "http://localhost:4200/"
+ },
+ {
+ "name": "ng test",
+ "type": "chrome",
+ "request": "launch",
+ "preLaunchTask": "npm: test",
+ "url": "http://localhost:9876/debug.html"
+ }
+ ]
+}
diff --git a/examples/angular-example/.vscode/tasks.json b/examples/angular-example/.vscode/tasks.json
new file mode 100644
index 00000000..a298b5bd
--- /dev/null
+++ b/examples/angular-example/.vscode/tasks.json
@@ -0,0 +1,42 @@
+{
+ // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+ "version": "2.0.0",
+ "tasks": [
+ {
+ "type": "npm",
+ "script": "start",
+ "isBackground": true,
+ "problemMatcher": {
+ "owner": "typescript",
+ "pattern": "$tsc",
+ "background": {
+ "activeOnStart": true,
+ "beginsPattern": {
+ "regexp": "(.*?)"
+ },
+ "endsPattern": {
+ "regexp": "bundle generation complete"
+ }
+ }
+ }
+ },
+ {
+ "type": "npm",
+ "script": "test",
+ "isBackground": true,
+ "problemMatcher": {
+ "owner": "typescript",
+ "pattern": "$tsc",
+ "background": {
+ "activeOnStart": true,
+ "beginsPattern": {
+ "regexp": "(.*?)"
+ },
+ "endsPattern": {
+ "regexp": "bundle generation complete"
+ }
+ }
+ }
+ }
+ ]
+}
diff --git a/examples/angular-example/README.md b/examples/angular-example/README.md
new file mode 100644
index 00000000..8aac27e0
--- /dev/null
+++ b/examples/angular-example/README.md
@@ -0,0 +1,59 @@
+# AngularExample
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.4.
+
+## Development server
+
+To start a local development server, run:
+
+```bash
+ng serve
+```
+
+Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the project run:
+
+```bash
+ng build
+```
+
+This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
diff --git a/examples/angular-example/angular.json b/examples/angular-example/angular.json
new file mode 100644
index 00000000..0d087362
--- /dev/null
+++ b/examples/angular-example/angular.json
@@ -0,0 +1,99 @@
+{
+ "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+ "version": 1,
+ "newProjectRoot": "projects",
+ "projects": {
+ "angular-example": {
+ "projectType": "application",
+ "schematics": {},
+ "root": "",
+ "sourceRoot": "src",
+ "prefix": "app",
+ "architect": {
+ "build": {
+ "builder": "@angular-devkit/build-angular:application",
+ "options": {
+ "outputPath": "dist/angular-example",
+ "index": "src/index.html",
+ "browser": "src/main.ts",
+ "polyfills": [
+ "zone.js"
+ ],
+ "tsConfig": "tsconfig.app.json",
+ "assets": [
+ {
+ "glob": "**/*",
+ "input": "public"
+ }
+ ],
+ "styles": [
+ "src/styles.css"
+ ],
+ "scripts": []
+ },
+ "configurations": {
+ "production": {
+ "budgets": [
+ {
+ "type": "initial",
+ "maximumWarning": "500kB",
+ "maximumError": "1MB"
+ },
+ {
+ "type": "anyComponentStyle",
+ "maximumWarning": "4kB",
+ "maximumError": "8kB"
+ }
+ ],
+ "outputHashing": "all"
+ },
+ "development": {
+ "optimization": false,
+ "extractLicenses": false,
+ "sourceMap": true
+ }
+ },
+ "defaultConfiguration": "production"
+ },
+ "serve": {
+ "builder": "@angular-devkit/build-angular:dev-server",
+ "configurations": {
+ "production": {
+ "buildTarget": "angular-example:build:production"
+ },
+ "development": {
+ "buildTarget": "angular-example:build:development"
+ }
+ },
+ "defaultConfiguration": "development"
+ },
+ "extract-i18n": {
+ "builder": "@angular-devkit/build-angular:extract-i18n"
+ },
+ "test": {
+ "builder": "@angular-devkit/build-angular:karma",
+ "options": {
+ "polyfills": [
+ "zone.js",
+ "zone.js/testing"
+ ],
+ "tsConfig": "tsconfig.spec.json",
+ "assets": [
+ {
+ "glob": "**/*",
+ "input": "public"
+ }
+ ],
+ "styles": [
+ "src/styles.css"
+ ],
+ "scripts": []
+ }
+ }
+ }
+ }
+ },
+ "cli": {
+ "analytics": "16541855-8d12-4503-a7b7-0b4ae4c90a04"
+ }
+}
diff --git a/examples/angular-example/moon.yml b/examples/angular-example/moon.yml
new file mode 100644
index 00000000..10735f3d
--- /dev/null
+++ b/examples/angular-example/moon.yml
@@ -0,0 +1,21 @@
+type: 'application'
+
+workspace:
+ inheritedTasks:
+ exclude: ['typecheck']
+
+toolchain:
+ typescript:
+ disabled: true
+
+fileGroups:
+ app:
+ - 'src/app/index.html'
+
+tasks:
+ build:
+ command: 'ng build angular-example'
+ local: true
+ dev:
+ command: 'ng serve angular-example'
+ local: true
diff --git a/examples/angular-example/package.json b/examples/angular-example/package.json
new file mode 100644
index 00000000..6bbb29db
--- /dev/null
+++ b/examples/angular-example/package.json
@@ -0,0 +1,38 @@
+{
+ "name": "angular-example",
+ "version": "0.0.0",
+ "scripts": {
+ "ng": "ng",
+ "start": "ng serve",
+ "build": "ng build",
+ "watch": "ng build --watch --configuration development",
+ "test": "ng test"
+ },
+ "private": true,
+ "dependencies": {
+ "@angular/common": "^19.2.0",
+ "@angular/compiler": "^19.2.0",
+ "@angular/core": "^19.2.0",
+ "@angular/forms": "^19.2.0",
+ "@angular/platform-browser": "^19.2.0",
+ "@angular/platform-browser-dynamic": "^19.2.0",
+ "@angular/router": "^19.2.0",
+ "@chatkitty/angular": "workspace:*",
+ "rxjs": "~7.8.0",
+ "tslib": "^2.3.0",
+ "zone.js": "~0.15.0"
+ },
+ "devDependencies": {
+ "@angular-devkit/build-angular": "^19.2.4",
+ "@angular/cli": "^19.2.4",
+ "@angular/compiler-cli": "^19.2.0",
+ "@types/jasmine": "~5.1.0",
+ "jasmine-core": "~5.6.0",
+ "karma": "~6.4.0",
+ "karma-chrome-launcher": "~3.2.0",
+ "karma-coverage": "~2.2.0",
+ "karma-jasmine": "~5.1.0",
+ "karma-jasmine-html-reporter": "~2.1.0",
+ "typescript": "~5.7.2"
+ }
+}
diff --git a/examples/angular-example/public/favicon.ico b/examples/angular-example/public/favicon.ico
new file mode 100644
index 00000000..57614f9c
Binary files /dev/null and b/examples/angular-example/public/favicon.ico differ
diff --git a/examples/angular-example/src/app/app.component.css b/examples/angular-example/src/app/app.component.css
new file mode 100644
index 00000000..8b7ce5c9
--- /dev/null
+++ b/examples/angular-example/src/app/app.component.css
@@ -0,0 +1,4 @@
+.root {
+ width: 100vw;
+ height: 100svh;
+}
diff --git a/examples/angular-example/src/app/app.component.html b/examples/angular-example/src/app/app.component.html
new file mode 100644
index 00000000..cb6c46b8
--- /dev/null
+++ b/examples/angular-example/src/app/app.component.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/angular-example/src/app/app.component.spec.ts b/examples/angular-example/src/app/app.component.spec.ts
new file mode 100644
index 00000000..d158bdfb
--- /dev/null
+++ b/examples/angular-example/src/app/app.component.spec.ts
@@ -0,0 +1,29 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [AppComponent],
+ }).compileComponents();
+ });
+
+ it('should create the app', () => {
+ const fixture = TestBed.createComponent(AppComponent);
+ const app = fixture.componentInstance;
+ expect(app).toBeTruthy();
+ });
+
+ it(`should have the 'angular-example' title`, () => {
+ const fixture = TestBed.createComponent(AppComponent);
+ const app = fixture.componentInstance;
+ expect(app.title).toEqual('angular-example');
+ });
+
+ it('should render title', () => {
+ const fixture = TestBed.createComponent(AppComponent);
+ fixture.detectChanges();
+ const compiled = fixture.nativeElement as HTMLElement;
+ expect(compiled.querySelector('h1')?.textContent).toContain('Hello, angular-example');
+ });
+});
diff --git a/examples/angular-example/src/app/app.component.ts b/examples/angular-example/src/app/app.component.ts
new file mode 100644
index 00000000..045dd9dc
--- /dev/null
+++ b/examples/angular-example/src/app/app.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { ChatUi } from '@chatkitty/angular';
+
+@Component({
+ selector: 'app-root',
+ imports: [RouterOutlet, ChatUi],
+ templateUrl: './app.component.html',
+ styleUrl: './app.component.css'
+})
+export class AppComponent {
+ title = 'angular-example';
+}
diff --git a/examples/angular-example/src/app/app.config.ts b/examples/angular-example/src/app/app.config.ts
new file mode 100644
index 00000000..a1e7d6f8
--- /dev/null
+++ b/examples/angular-example/src/app/app.config.ts
@@ -0,0 +1,8 @@
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+ providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
+};
diff --git a/examples/angular-example/src/app/app.routes.ts b/examples/angular-example/src/app/app.routes.ts
new file mode 100644
index 00000000..dc39edb5
--- /dev/null
+++ b/examples/angular-example/src/app/app.routes.ts
@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [];
diff --git a/examples/angular-example/src/index.html b/examples/angular-example/src/index.html
new file mode 100644
index 00000000..26c5e79a
--- /dev/null
+++ b/examples/angular-example/src/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+ AngularExample
+
+
+
+
+
+
+
+
diff --git a/examples/angular-example/src/main.ts b/examples/angular-example/src/main.ts
new file mode 100644
index 00000000..35b00f34
--- /dev/null
+++ b/examples/angular-example/src/main.ts
@@ -0,0 +1,6 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, appConfig)
+ .catch((err) => console.error(err));
diff --git a/examples/angular-example/src/styles.css b/examples/angular-example/src/styles.css
new file mode 100644
index 00000000..90d4ee00
--- /dev/null
+++ b/examples/angular-example/src/styles.css
@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */
diff --git a/examples/angular-example/tsconfig.app.json b/examples/angular-example/tsconfig.app.json
new file mode 100644
index 00000000..3775b37e
--- /dev/null
+++ b/examples/angular-example/tsconfig.app.json
@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "outDir": "./out-tsc/app",
+ "types": []
+ },
+ "files": [
+ "src/main.ts"
+ ],
+ "include": [
+ "src/**/*.d.ts"
+ ]
+}
diff --git a/examples/angular-example/tsconfig.json b/examples/angular-example/tsconfig.json
new file mode 100644
index 00000000..5525117c
--- /dev/null
+++ b/examples/angular-example/tsconfig.json
@@ -0,0 +1,27 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+ "compileOnSave": false,
+ "compilerOptions": {
+ "outDir": "./dist/out-tsc",
+ "strict": true,
+ "noImplicitOverride": true,
+ "noPropertyAccessFromIndexSignature": true,
+ "noImplicitReturns": true,
+ "noFallthroughCasesInSwitch": true,
+ "skipLibCheck": true,
+ "isolatedModules": true,
+ "esModuleInterop": true,
+ "experimentalDecorators": true,
+ "moduleResolution": "bundler",
+ "importHelpers": true,
+ "target": "ES2022",
+ "module": "ES2022"
+ },
+ "angularCompilerOptions": {
+ "enableI18nLegacyMessageIdFormat": false,
+ "strictInjectionParameters": true,
+ "strictInputAccessModifiers": true,
+ "strictTemplates": true
+ }
+}
diff --git a/examples/angular-example/tsconfig.spec.json b/examples/angular-example/tsconfig.spec.json
new file mode 100644
index 00000000..5fb748d9
--- /dev/null
+++ b/examples/angular-example/tsconfig.spec.json
@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "outDir": "./out-tsc/spec",
+ "types": [
+ "jasmine"
+ ]
+ },
+ "include": [
+ "src/**/*.spec.ts",
+ "src/**/*.d.ts"
+ ]
+}
diff --git a/libraries/angular/.editorconfig b/libraries/angular/.editorconfig
new file mode 100644
index 00000000..f166060d
--- /dev/null
+++ b/libraries/angular/.editorconfig
@@ -0,0 +1,17 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+ij_typescript_use_double_quotes = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
diff --git a/libraries/angular/.gitignore b/libraries/angular/.gitignore
new file mode 100644
index 00000000..cc7b1413
--- /dev/null
+++ b/libraries/angular/.gitignore
@@ -0,0 +1,42 @@
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db
diff --git a/libraries/angular/.vscode/extensions.json b/libraries/angular/.vscode/extensions.json
new file mode 100644
index 00000000..77b37457
--- /dev/null
+++ b/libraries/angular/.vscode/extensions.json
@@ -0,0 +1,4 @@
+{
+ // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+ "recommendations": ["angular.ng-template"]
+}
diff --git a/libraries/angular/.vscode/launch.json b/libraries/angular/.vscode/launch.json
new file mode 100644
index 00000000..925af837
--- /dev/null
+++ b/libraries/angular/.vscode/launch.json
@@ -0,0 +1,20 @@
+{
+ // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "name": "ng serve",
+ "type": "chrome",
+ "request": "launch",
+ "preLaunchTask": "npm: start",
+ "url": "http://localhost:4200/"
+ },
+ {
+ "name": "ng test",
+ "type": "chrome",
+ "request": "launch",
+ "preLaunchTask": "npm: test",
+ "url": "http://localhost:9876/debug.html"
+ }
+ ]
+}
diff --git a/libraries/angular/.vscode/tasks.json b/libraries/angular/.vscode/tasks.json
new file mode 100644
index 00000000..a298b5bd
--- /dev/null
+++ b/libraries/angular/.vscode/tasks.json
@@ -0,0 +1,42 @@
+{
+ // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+ "version": "2.0.0",
+ "tasks": [
+ {
+ "type": "npm",
+ "script": "start",
+ "isBackground": true,
+ "problemMatcher": {
+ "owner": "typescript",
+ "pattern": "$tsc",
+ "background": {
+ "activeOnStart": true,
+ "beginsPattern": {
+ "regexp": "(.*?)"
+ },
+ "endsPattern": {
+ "regexp": "bundle generation complete"
+ }
+ }
+ }
+ },
+ {
+ "type": "npm",
+ "script": "test",
+ "isBackground": true,
+ "problemMatcher": {
+ "owner": "typescript",
+ "pattern": "$tsc",
+ "background": {
+ "activeOnStart": true,
+ "beginsPattern": {
+ "regexp": "(.*?)"
+ },
+ "endsPattern": {
+ "regexp": "bundle generation complete"
+ }
+ }
+ }
+ }
+ ]
+}
diff --git a/libraries/angular/README.md b/libraries/angular/README.md
new file mode 100644
index 00000000..b3ff473d
--- /dev/null
+++ b/libraries/angular/README.md
@@ -0,0 +1,59 @@
+# Angular
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.4.
+
+## Development server
+
+To start a local development server, run:
+
+```bash
+ng serve
+```
+
+Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the project run:
+
+```bash
+ng build
+```
+
+This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
diff --git a/libraries/angular/angular.json b/libraries/angular/angular.json
new file mode 100644
index 00000000..7b89e8dc
--- /dev/null
+++ b/libraries/angular/angular.json
@@ -0,0 +1,43 @@
+{
+ "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+ "version": 1,
+ "newProjectRoot": "projects",
+ "projects": {
+ "@chatkitty/angular": {
+ "projectType": "library",
+ "root": "projects/chat-ui",
+ "sourceRoot": "projects/chat-ui/src",
+ "prefix": "library",
+ "architect": {
+ "build": {
+ "builder": "@angular-devkit/build-angular:ng-packagr",
+ "options": {
+ "project": "projects/chat-ui/ng-package.json"
+ },
+ "configurations": {
+ "production": {
+ "tsConfig": "projects/chat-ui/tsconfig.lib.prod.json"
+ },
+ "development": {
+ "tsConfig": "projects/chat-ui/tsconfig.lib.json"
+ }
+ },
+ "defaultConfiguration": "production"
+ },
+ "test": {
+ "builder": "@angular-devkit/build-angular:karma",
+ "options": {
+ "tsConfig": "projects/chat-ui/tsconfig.spec.json",
+ "polyfills": [
+ "zone.js",
+ "zone.js/testing"
+ ]
+ }
+ }
+ }
+ }
+ },
+ "cli": {
+ "analytics": "f78da42c-94d1-40f8-8dd7-911cc4af3530"
+ }
+}
diff --git a/libraries/angular/moon.yml b/libraries/angular/moon.yml
new file mode 100644
index 00000000..a28b9d75
--- /dev/null
+++ b/libraries/angular/moon.yml
@@ -0,0 +1,15 @@
+type: 'library'
+language: 'typescript'
+
+workspace:
+ inheritedTasks:
+ exclude: ['build']
+
+tasks:
+ build:
+ command: 'ng build @chatkitty/angular'
+ inputs:
+ - '@group(app)'
+ - '@group(sources)'
+ outputs:
+ - 'dist'
diff --git a/libraries/angular/package.json b/libraries/angular/package.json
new file mode 100644
index 00000000..aafd9645
--- /dev/null
+++ b/libraries/angular/package.json
@@ -0,0 +1,39 @@
+{
+ "name": "angular",
+ "version": "0.0.0",
+ "scripts": {
+ "ng": "ng",
+ "start": "ng serve",
+ "build": "ng build",
+ "watch": "ng build --watch --configuration development",
+ "test": "ng test"
+ },
+ "private": true,
+ "dependencies": {
+ "@angular/common": "^19.2.0",
+ "@angular/compiler": "^19.2.0",
+ "@angular/core": "^19.2.0",
+ "@angular/forms": "^19.2.0",
+ "@angular/platform-browser": "^19.2.0",
+ "@angular/platform-browser-dynamic": "^19.2.0",
+ "@angular/router": "^19.2.0",
+ "rxjs": "~7.8.0",
+ "tslib": "^2.3.0",
+ "zone.js": "~0.15.0",
+ "chatkitty": "workspace:*"
+ },
+ "devDependencies": {
+ "@angular-devkit/build-angular": "^19.2.4",
+ "@angular/cli": "^19.2.4",
+ "@angular/compiler-cli": "^19.2.0",
+ "@types/jasmine": "~5.1.0",
+ "jasmine-core": "~5.6.0",
+ "karma": "~6.4.0",
+ "karma-chrome-launcher": "~3.2.0",
+ "karma-coverage": "~2.2.0",
+ "karma-jasmine": "~5.1.0",
+ "karma-jasmine-html-reporter": "~2.1.0",
+ "ng-packagr": "^19.2.0",
+ "typescript": "~5.7.2"
+ }
+}
diff --git a/libraries/angular/projects/chat-ui/README.md b/libraries/angular/projects/chat-ui/README.md
new file mode 100644
index 00000000..3874ddcc
--- /dev/null
+++ b/libraries/angular/projects/chat-ui/README.md
@@ -0,0 +1,63 @@
+# ChatUi
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.0.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the library, run:
+
+```bash
+ng build chat-ui
+```
+
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+
+### Publishing the Library
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+ ```bash
+ cd dist/chat-ui
+ ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+ ```bash
+ npm publish
+ ```
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
diff --git a/libraries/angular/projects/chat-ui/ng-package.json b/libraries/angular/projects/chat-ui/ng-package.json
new file mode 100644
index 00000000..49a501c4
--- /dev/null
+++ b/libraries/angular/projects/chat-ui/ng-package.json
@@ -0,0 +1,10 @@
+{
+ "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+ "dest": "../../dist/chat-ui",
+ "lib": {
+ "entryFile": "src/public-api.ts"
+ },
+ "allowedNonPeerDependencies": [
+ "chatkitty"
+ ]
+}
diff --git a/libraries/angular/projects/chat-ui/package.json b/libraries/angular/projects/chat-ui/package.json
new file mode 100644
index 00000000..7922f340
--- /dev/null
+++ b/libraries/angular/projects/chat-ui/package.json
@@ -0,0 +1,13 @@
+{
+ "name": "@chatkitty/angular",
+ "version": "0.0.1",
+ "peerDependencies": {
+ "@angular/common": "^19.2.0",
+ "@angular/core": "^19.2.0"
+ },
+ "dependencies": {
+ "tslib": "^2.3.0",
+ "chatkitty": "workspace:*"
+ },
+ "sideEffects": false
+}
diff --git a/libraries/angular/projects/chat-ui/src/library/chat-ui.component.spec.ts b/libraries/angular/projects/chat-ui/src/library/chat-ui.component.spec.ts
new file mode 100644
index 00000000..ae51bce8
--- /dev/null
+++ b/libraries/angular/projects/chat-ui/src/library/chat-ui.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChatUi } from './chat-ui.component';
+
+describe('ChatUiComponent', () => {
+ let component: ChatUi;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [ChatUi]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(ChatUi);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/libraries/angular/projects/chat-ui/src/library/chat-ui.component.ts b/libraries/angular/projects/chat-ui/src/library/chat-ui.component.ts
new file mode 100644
index 00000000..ad1839a6
--- /dev/null
+++ b/libraries/angular/projects/chat-ui/src/library/chat-ui.component.ts
@@ -0,0 +1,50 @@
+import {Component, Input} from '@angular/core';
+import {connectApi, loadChatUi} from "chatkitty";
+
+@Component({
+ selector: 'ChatUi',
+ imports: [],
+ template: `
+
+ `,
+ standalone: true,
+ styles: ``
+})
+export class ChatUi {
+
+ @Input({required: true}) apiKey: string = "";
+
+ @Input({required: true}) username: string = "";
+
+ @Input({required: true}) widgetId: string = "";
+
+
+ async ngOnInit() {
+
+ const connection = await connectApi({
+ apiKey: this.apiKey,
+ username: this.username
+ });
+
+ loadChatUi(
+ {
+ widgetId: this.widgetId,
+ container: {height: "100%"},
+ audio: {enabled: true},
+ components: {
+ chat: (_context) => ({
+ menuActions: [],
+ onMounted: () => {
+ },
+ })
+ },
+ templates: {}
+ },
+ {
+ timeout: 50000,
+ connection
+ }
+ );
+ }
+
+}
diff --git a/libraries/angular/projects/chat-ui/src/library/chat-ui.service.spec.ts b/libraries/angular/projects/chat-ui/src/library/chat-ui.service.spec.ts
new file mode 100644
index 00000000..9723575c
--- /dev/null
+++ b/libraries/angular/projects/chat-ui/src/library/chat-ui.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ChatUiService } from './chat-ui.service';
+
+describe('ChatUiService', () => {
+ let service: ChatUiService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(ChatUiService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/libraries/angular/projects/chat-ui/src/library/chat-ui.service.ts b/libraries/angular/projects/chat-ui/src/library/chat-ui.service.ts
new file mode 100644
index 00000000..ee3130ce
--- /dev/null
+++ b/libraries/angular/projects/chat-ui/src/library/chat-ui.service.ts
@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class ChatUiService {
+
+ constructor() { }
+}
diff --git a/libraries/angular/projects/chat-ui/src/public-api.ts b/libraries/angular/projects/chat-ui/src/public-api.ts
new file mode 100644
index 00000000..04c33dbe
--- /dev/null
+++ b/libraries/angular/projects/chat-ui/src/public-api.ts
@@ -0,0 +1,6 @@
+/*
+ * Public API Surface of chat-ui
+ */
+
+export * from './library/chat-ui.service';
+export * from './library/chat-ui.component';
diff --git a/libraries/angular/projects/chat-ui/tsconfig.lib.json b/libraries/angular/projects/chat-ui/tsconfig.lib.json
new file mode 100644
index 00000000..2359bf66
--- /dev/null
+++ b/libraries/angular/projects/chat-ui/tsconfig.lib.json
@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+ "extends": "../../tsconfig.json",
+ "compilerOptions": {
+ "outDir": "../../out-tsc/lib",
+ "declaration": true,
+ "declarationMap": true,
+ "inlineSources": true,
+ "types": []
+ },
+ "exclude": [
+ "**/*.spec.ts"
+ ]
+}
diff --git a/libraries/angular/projects/chat-ui/tsconfig.lib.prod.json b/libraries/angular/projects/chat-ui/tsconfig.lib.prod.json
new file mode 100644
index 00000000..9215caac
--- /dev/null
+++ b/libraries/angular/projects/chat-ui/tsconfig.lib.prod.json
@@ -0,0 +1,11 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+ "extends": "./tsconfig.lib.json",
+ "compilerOptions": {
+ "declarationMap": false
+ },
+ "angularCompilerOptions": {
+ "compilationMode": "partial"
+ }
+}
diff --git a/libraries/angular/projects/chat-ui/tsconfig.spec.json b/libraries/angular/projects/chat-ui/tsconfig.spec.json
new file mode 100644
index 00000000..254686d5
--- /dev/null
+++ b/libraries/angular/projects/chat-ui/tsconfig.spec.json
@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+ "extends": "../../tsconfig.json",
+ "compilerOptions": {
+ "outDir": "../../out-tsc/spec",
+ "types": [
+ "jasmine"
+ ]
+ },
+ "include": [
+ "**/*.spec.ts",
+ "**/*.d.ts"
+ ]
+}
diff --git a/libraries/angular/tsconfig.json b/libraries/angular/tsconfig.json
new file mode 100644
index 00000000..7f249976
--- /dev/null
+++ b/libraries/angular/tsconfig.json
@@ -0,0 +1,30 @@
+{
+ "compileOnSave": false,
+ "compilerOptions": {
+ "paths": {
+ "chat-ui": [
+ "./dist/chat-ui"
+ ]
+ },
+ "outDir": "../../.moon/cache/types/libraries/angular",
+ "strict": true,
+ "noImplicitOverride": true,
+ "noPropertyAccessFromIndexSignature": true,
+ "noImplicitReturns": true,
+ "noFallthroughCasesInSwitch": true,
+ "skipLibCheck": true,
+ "isolatedModules": true,
+ "esModuleInterop": true,
+ "experimentalDecorators": true,
+ "moduleResolution": "bundler",
+ "importHelpers": true,
+ "target": "ES2022",
+ "module": "ES2022"
+ },
+ "angularCompilerOptions": {
+ "enableI18nLegacyMessageIdFormat": false,
+ "strictInjectionParameters": true,
+ "strictInputAccessModifiers": true,
+ "strictTemplates": true
+ }
+}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 63f145c3..f6f8cc7b 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -2,3 +2,4 @@ packages:
- 'examples/*'
- 'libraries/*'
- 'tools/*'
+ - 'libraries/angular/dist/*'
diff --git a/tsconfig.json b/tsconfig.json
index 6c362f9c..9ff59ca7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,6 +2,9 @@
"extends": "./tsconfig.options.json",
"files": [],
"references": [
+ {
+ "path": "libraries/angular"
+ },
{
"path": "libraries/core"
},