@copilotkitnext/angular 0.0.1 → 0.0.2

package/.turbo/turbo-build.log

@@ -1,39 +1,38 @@
-
-> @copilotkitnext/angular@0.0.2 build /Users/mme/Code/CopilotKit2/packages/angular
-> ng-packagr -p ng-package.json && npm run build:css
-
-Building Angular Package
-
-------------------------------------------------------------------------------
-Building entry point '@copilotkitnext/angular'
-------------------------------------------------------------------------------
-- Compiling with Angular sources in Ivy partial compilation mode.
-
-✔ Compiling with Angular sources in Ivy partial compilation mode.
-✔ Generating FESM bundles
-- Copying assets
-✔ Copying assets
-- Writing package manifest
-WARNING: Found a conflicting export condition for ".". The "types" condition would be overridden by ng-packagr. Please unset it.
-WARNING: Found a conflicting export condition for ".". The "default" condition would be overridden by ng-packagr. Please unset it.
-⚠ 'tslib' is no longer recommended to be used as a 'peerDependencies'. Moving it to 'dependencies'.
-ℹ Removing scripts section in package.json as it's considered a potential security vulnerability.
-ℹ Removing devDependencies section in package.json.
-✔ Writing package manifest
-✔ Built @copilotkitnext/angular
-
-------------------------------------------------------------------------------
-Built Angular Package
- - from: /Users/mme/Code/CopilotKit2/packages/angular
- - to:   /Users/mme/Code/CopilotKit2/packages/angular/dist
-------------------------------------------------------------------------------
-
-Build at: 2025-09-03T08:46:48.296Z - Time: 5656ms
-
-
-> @copilotkitnext/angular@0.0.2 build:css
-> npx @tailwindcss/cli -i ./src/styles/globals.css -o ./dist/styles.css
-
-≈ tailwindcss v4.1.11
-
-Done in 103ms
+
+
+> @copilotkitnext/angular@0.0.1 build /Users/mme/Code/vnext_experimental/packages/angular
+> ng-packagr -p ng-package.json && npm run build:css
+
+Building Angular Package
+
+------------------------------------------------------------------------------
+Building entry point '@copilotkitnext/angular'
+------------------------------------------------------------------------------
+⠋ Compiling with Angular sources in Ivy partial compilation mode.⠙ Compiling with Angular sources in Ivy partial compilation mode.⠹ Compiling with Angular sources in Ivy partial compilation mode.⠸ Compiling with Angular sources in Ivy partial compilation mode.
+✔ Compiling with Angular sources in Ivy partial compilation mode.
+⠋ Writing FESM bundles✔ Writing FESM bundles
+⠋ Copying assets✔ Copying assets
+⠋ Writing package manifestWARNING: Found a conflicting export condition for ".". The "types" condition would be overridden by ng-packagr. Please unset it.
+WARNING: Found a conflicting export condition for ".". The "default" condition would be overridden by ng-packagr. Please unset it.
+⚠ 'tslib' is no longer recommended to be used as a 'peerDependencies'. Moving it to 'dependencies'.
+ℹ Removing scripts section in package.json as it's considered a potential security vulnerability.
+ℹ Removing devDependencies section in package.json.
+✔ Writing package manifest
+✔ Built @copilotkitnext/angular
+
+------------------------------------------------------------------------------
+Built Angular Package
+ - from: /Users/mme/Code/vnext_experimental/packages/angular
+ - to:   /Users/mme/Code/vnext_experimental/packages/angular/dist
+------------------------------------------------------------------------------
+
+Build at: 2025-09-03T13:18:59.922Z - Time: 3451ms
+
+
+> @copilotkitnext/angular@0.0.1 build:css
+> npx @tailwindcss/cli -i ./src/styles/globals.css -o ./dist/styles.css
+
+⠙⠹⠸⠼⠴⠦⠧⠇⠏⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏⠋⠙⠹⠸⠼⠴⠦≈ tailwindcss v4.1.11
+
+Done in 110ms
+⠙⠙

package/README.md

@@ -0,0 +1,248 @@
+# CopilotKit for Angular
+
+This package provides native Angular components, directives, and providers to build Copilot chat UIs powered by the CopilotKit runtime and AG-UI agents. It mirrors the React experience with idiomatic Angular APIs.
+
+## Quick Start
+
+1. **Install**: `pnpm add @copilotkitnext/angular`
+2. **Add styles**: Add `@copilotkitnext/angular/styles.css` to your Angular app styles array or `@import "@copilotkitnext/angular/styles.css";` in a global stylesheet
+3. **Provide CopilotKit**: Set the runtime URL and optional labels via providers
+4. **Use the chat**: Drop `<copilot-chat />` into any template
+
+## Installation
+
+### Package Installation
+
+Install `@copilotkitnext/angular` in your Angular app (requires Angular 19+):
+
+```bash
+# pnpm (recommended)
+pnpm add @copilotkitnext/angular
+
+# npm
+npm install @copilotkitnext/angular
+
+# yarn
+yarn add @copilotkitnext/angular
+```
+
+### Peer Dependencies
+
+Ensure these are present (Angular 19):
+
+- `@angular/core`
+- `@angular/common`
+- `@angular/cdk`
+- `rxjs`
+- `tslib`
+
+### Styles
+
+Reference the package CSS so the components render correctly:
+
+**Option 1:** In `angular.json`:
+
+```json
+"styles": [
+  "@copilotkitnext/angular/styles.css",
+  "src/styles.css"
+]
+```
+
+**Option 2:** In your global stylesheet:
+
+```css
+@import "@copilotkitnext/angular/styles.css";
+```
+
+## App Wiring (Providers)
+
+Add CopilotKit providers in your application config to set labels and runtime URL.
+
+### Example (`app.config.ts`):
+
+```typescript
+import {
+  provideCopilotKit,
+  provideCopilotChatConfiguration,
+} from "@copilotkitnext/angular";
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    importProvidersFrom(BrowserModule),
+    ...provideCopilotKit({
+      // runtimeUrl can also be set via template directive; see below
+    }),
+    provideCopilotChatConfiguration({
+      labels: {
+        chatInputPlaceholder: "Ask me anything...",
+        chatDisclaimerText: "AI responses may need verification.",
+      },
+    }),
+  ],
+};
+```
+
+## Runtime URL (Template Directive)
+
+You can declare the CopilotKit runtime endpoint directly in templates via the `CopilotKitConfigDirective`.
+
+### Component Template Example:
+
+```html
+<div
+  [copilotkitConfig]="{ runtimeUrl: runtimeUrl }"
+  style="display:block;height:100vh"
+>
+  <copilot-chat></copilot-chat>
+</div>
+```
+
+### Component Class:
+
+```typescript
+export class AppComponent {
+  runtimeUrl = "http://localhost:3001/api/copilotkit";
+}
+```
+
+## Using the Chat Component
+
+### Minimal Usage:
+
+```html
+<copilot-chat></copilot-chat>
+```
+
+### With a Specific Agent:
+
+```html
+<copilot-chat [agentId]="'sales'"></copilot-chat>
+```
+
+### Behavior:
+
+- If `agentId` is omitted, the component uses the default agent (ID: `default`)
+
+## Agents 101 (AG-UI)
+
+- **Agent model**: CopilotKit uses AG-UI's `AbstractAgent` interface (package `@ag-ui/client`)
+- **Frontend vs backend**:
+  - **Backend (runtime)**: Host your real agents. You can use any AG-UI agent on the server
+  - **Frontend (Angular app)**: Discovers remote agents from the runtime automatically, and can also host local in-browser agents if desired
+- **Default agent**: The ID `default` is special; when present, it is used by `<copilot-chat>` if no `agentId` is provided
+- **Compatibility**: Any agent that supports AG-UI works. See https://docs.ag-ui.com/
+
+> **Note**: In most real apps, you define agents on the server (runtime). The frontend will auto-discover them when a `runtimeUrl` is configured.
+
+## Backend Runtime (Hono Server)
+
+Example Angular server (from `apps/angular/demo-server`):
+
+### `index.ts`
+
+```typescript
+import { serve } from "@hono/node-server";
+import { Hono } from "hono";
+import { cors } from "hono/cors";
+import {
+  CopilotRuntime,
+  createCopilotEndpoint,
+  InMemoryAgentRunner,
+} from "@copilotkitnext/runtime";
+import { AnyAGUIAgent } from "@ag-ui/your-desired-agent-framework";
+
+const runtime = new CopilotRuntime({
+  agents: { default: new AnyAGUIAgent() },
+});
+
+// Create a main app with CORS enabled
+const app = new Hono();
+
+// Enable CORS for local dev (Angular demo at http://localhost:4200)
+app.use(
+  "*",
+  cors({
+    origin: "http://localhost:4200",
+    allowMethods: ["GET", "POST", "OPTIONS", "PUT", "DELETE"],
+    allowHeaders: ["Content-Type", "Authorization", "X-Requested-With"],
+    exposeHeaders: ["Content-Type"],
+    credentials: true,
+    maxAge: 86400,
+  })
+);
+
+// Create the CopilotKit endpoint
+const copilotApp = createCopilotEndpoint({
+  runtime,
+  basePath: "/api/copilotkit",
+});
+
+// Mount the CopilotKit app
+app.route("/", copilotApp);
+
+const port = Number(process.env.PORT || 3001);
+serve({ fetch: app.fetch, port });
+console.log(
+  `CopilotKit runtime listening at http://localhost:${port}/api/copilotkit`
+);
+```
+
+## CopilotKit Angular APIs (Most Used)
+
+### Components
+
+- **`CopilotChatComponent`**: Full chat UI
+  - Inputs: `agentId?: string`
+
+### Directives
+
+- **`CopilotKitConfigDirective`** (`[copilotkitConfig]`): Set `runtimeUrl`, `headers`, `properties`, and/or `agents` declaratively
+- **`CopilotKitAgentDirective`** (`[copilotkitAgent]`): Observe agent state; defaults to the `default` agent if no `agentId` is provided
+
+### Providers
+
+- **`provideCopilotKit(...)`**: Set runtime URL, headers, properties, agents, tools, human-in-the-loop handlers
+- **`provideCopilotChatConfiguration(...)`**: Set UI labels and behavior for chat input/view
+
+## End-to-End: Running the Demo
+
+From the repo root:
+
+1. **Install deps**: `pnpm install`
+2. **Start both demo server and Angular demo app**: pnpm build && pnpm demo:angular`
+   - Frontend: runs on http://localhost:4200
+   - Backend: runs on http://localhost:3001/api/copilotkit
+3. **Prerequisite**: Set `OPENAI_API_KEY` in `apps/angular/demo-server/.env` if using the OpenAI demo agent
+
+## Building This Monorepo
+
+- **Full build**: `pnpm build` (compiles all packages including Angular)
+- **Clean**: `pnpm clean`
+- **Package-only dev (watch)**: `pnpm dev`
+
+## Angular Storybook
+
+### Dev Server
+
+```bash
+pnpm storybook:angular
+```
+
+- Serves Storybook for Angular components on http://localhost:6007
+- For live chat stories, ensure the demo server is running so the chat can connect:
+  ```bash
+  pnpm --filter @copilotkitnext/angular-demo-server dev
+  ```
+
+### Production Build
+
+```bash
+pnpm -C apps/angular/storybook build
+```
+
+## Notes
+
+- Node 18+ and pnpm 9+ recommended
+- If using custom CORS or non-default ports, update `runtimeUrl` and server CORS settings accordingly
+- Styles must be included for proper rendering; if customizing CSS, prefer overriding classes instead of modifying the distributed CSS

package/dist/README.md

@@ -0,0 +1,248 @@
+# CopilotKit for Angular
+
+This package provides native Angular components, directives, and providers to build Copilot chat UIs powered by the CopilotKit runtime and AG-UI agents. It mirrors the React experience with idiomatic Angular APIs.
+
+## Quick Start
+
+1. **Install**: `pnpm add @copilotkitnext/angular`
+2. **Add styles**: Add `@copilotkitnext/angular/styles.css` to your Angular app styles array or `@import "@copilotkitnext/angular/styles.css";` in a global stylesheet
+3. **Provide CopilotKit**: Set the runtime URL and optional labels via providers
+4. **Use the chat**: Drop `<copilot-chat />` into any template
+
+## Installation
+
+### Package Installation
+
+Install `@copilotkitnext/angular` in your Angular app (requires Angular 19+):
+
+```bash
+# pnpm (recommended)
+pnpm add @copilotkitnext/angular
+
+# npm
+npm install @copilotkitnext/angular
+
+# yarn
+yarn add @copilotkitnext/angular
+```
+
+### Peer Dependencies
+
+Ensure these are present (Angular 19):
+
+- `@angular/core`
+- `@angular/common`
+- `@angular/cdk`
+- `rxjs`
+- `tslib`
+
+### Styles
+
+Reference the package CSS so the components render correctly:
+
+**Option 1:** In `angular.json`:
+
+```json
+"styles": [
+  "@copilotkitnext/angular/styles.css",
+  "src/styles.css"
+]
+```
+
+**Option 2:** In your global stylesheet:
+
+```css
+@import "@copilotkitnext/angular/styles.css";
+```
+
+## App Wiring (Providers)
+
+Add CopilotKit providers in your application config to set labels and runtime URL.
+
+### Example (`app.config.ts`):
+
+```typescript
+import {
+  provideCopilotKit,
+  provideCopilotChatConfiguration,
+} from "@copilotkitnext/angular";
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    importProvidersFrom(BrowserModule),
+    ...provideCopilotKit({
+      // runtimeUrl can also be set via template directive; see below
+    }),
+    provideCopilotChatConfiguration({
+      labels: {
+        chatInputPlaceholder: "Ask me anything...",
+        chatDisclaimerText: "AI responses may need verification.",
+      },
+    }),
+  ],
+};
+```
+
+## Runtime URL (Template Directive)
+
+You can declare the CopilotKit runtime endpoint directly in templates via the `CopilotKitConfigDirective`.
+
+### Component Template Example:
+
+```html
+<div
+  [copilotkitConfig]="{ runtimeUrl: runtimeUrl }"
+  style="display:block;height:100vh"
+>
+  <copilot-chat></copilot-chat>
+</div>
+```
+
+### Component Class:
+
+```typescript
+export class AppComponent {
+  runtimeUrl = "http://localhost:3001/api/copilotkit";
+}
+```
+
+## Using the Chat Component
+
+### Minimal Usage:
+
+```html
+<copilot-chat></copilot-chat>
+```
+
+### With a Specific Agent:
+
+```html
+<copilot-chat [agentId]="'sales'"></copilot-chat>
+```
+
+### Behavior:
+
+- If `agentId` is omitted, the component uses the default agent (ID: `default`)
+
+## Agents 101 (AG-UI)
+
+- **Agent model**: CopilotKit uses AG-UI's `AbstractAgent` interface (package `@ag-ui/client`)
+- **Frontend vs backend**:
+  - **Backend (runtime)**: Host your real agents. You can use any AG-UI agent on the server
+  - **Frontend (Angular app)**: Discovers remote agents from the runtime automatically, and can also host local in-browser agents if desired
+- **Default agent**: The ID `default` is special; when present, it is used by `<copilot-chat>` if no `agentId` is provided
+- **Compatibility**: Any agent that supports AG-UI works. See https://docs.ag-ui.com/
+
+> **Note**: In most real apps, you define agents on the server (runtime). The frontend will auto-discover them when a `runtimeUrl` is configured.
+
+## Backend Runtime (Hono Server)
+
+Example Angular server (from `apps/angular/demo-server`):
+
+### `index.ts`
+
+```typescript
+import { serve } from "@hono/node-server";
+import { Hono } from "hono";
+import { cors } from "hono/cors";
+import {
+  CopilotRuntime,
+  createCopilotEndpoint,
+  InMemoryAgentRunner,
+} from "@copilotkitnext/runtime";
+import { AnyAGUIAgent } from "@ag-ui/your-desired-agent-framework";
+
+const runtime = new CopilotRuntime({
+  agents: { default: new AnyAGUIAgent() },
+});
+
+// Create a main app with CORS enabled
+const app = new Hono();
+
+// Enable CORS for local dev (Angular demo at http://localhost:4200)
+app.use(
+  "*",
+  cors({
+    origin: "http://localhost:4200",
+    allowMethods: ["GET", "POST", "OPTIONS", "PUT", "DELETE"],
+    allowHeaders: ["Content-Type", "Authorization", "X-Requested-With"],
+    exposeHeaders: ["Content-Type"],
+    credentials: true,
+    maxAge: 86400,
+  })
+);
+
+// Create the CopilotKit endpoint
+const copilotApp = createCopilotEndpoint({
+  runtime,
+  basePath: "/api/copilotkit",
+});
+
+// Mount the CopilotKit app
+app.route("/", copilotApp);
+
+const port = Number(process.env.PORT || 3001);
+serve({ fetch: app.fetch, port });
+console.log(
+  `CopilotKit runtime listening at http://localhost:${port}/api/copilotkit`
+);
+```
+
+## CopilotKit Angular APIs (Most Used)
+
+### Components
+
+- **`CopilotChatComponent`**: Full chat UI
+  - Inputs: `agentId?: string`
+
+### Directives
+
+- **`CopilotKitConfigDirective`** (`[copilotkitConfig]`): Set `runtimeUrl`, `headers`, `properties`, and/or `agents` declaratively
+- **`CopilotKitAgentDirective`** (`[copilotkitAgent]`): Observe agent state; defaults to the `default` agent if no `agentId` is provided
+
+### Providers
+
+- **`provideCopilotKit(...)`**: Set runtime URL, headers, properties, agents, tools, human-in-the-loop handlers
+- **`provideCopilotChatConfiguration(...)`**: Set UI labels and behavior for chat input/view
+
+## End-to-End: Running the Demo
+
+From the repo root:
+
+1. **Install deps**: `pnpm install`
+2. **Start both demo server and Angular demo app**: pnpm build && pnpm demo:angular`
+   - Frontend: runs on http://localhost:4200
+   - Backend: runs on http://localhost:3001/api/copilotkit
+3. **Prerequisite**: Set `OPENAI_API_KEY` in `apps/angular/demo-server/.env` if using the OpenAI demo agent
+
+## Building This Monorepo
+
+- **Full build**: `pnpm build` (compiles all packages including Angular)
+- **Clean**: `pnpm clean`
+- **Package-only dev (watch)**: `pnpm dev`
+
+## Angular Storybook
+
+### Dev Server
+
+```bash
+pnpm storybook:angular
+```
+
+- Serves Storybook for Angular components on http://localhost:6007
+- For live chat stories, ensure the demo server is running so the chat can connect:
+  ```bash
+  pnpm --filter @copilotkitnext/angular-demo-server dev
+  ```
+
+### Production Build
+
+```bash
+pnpm -C apps/angular/storybook build
+```
+
+## Notes
+
+- Node 18+ and pnpm 9+ recommended
+- If using custom CORS or non-default ports, update `runtimeUrl` and server CORS settings accordingly
+- Styles must be included for proper rendering; if customizing CSS, prefer overriding classes instead of modifying the distributed CSS

package/dist/styles.css

@@ -7,11 +7,9 @@
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
-    --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-gray-50: oklch(98.5% 0.002 247.839);
     --color-gray-100: oklch(96.7% 0.003 264.542);
     --color-gray-200: oklch(92.8% 0.006 264.531);
-    --color-gray-300: oklch(87.2% 0.01 258.338);
     --color-gray-600: oklch(44.6% 0.03 256.802);
     --color-gray-700: oklch(37.3% 0.034 259.733);
     --color-gray-800: oklch(27.8% 0.033 256.848);
@@ -20,7 +18,6 @@
     --color-white: #fff;
     --spacing: 0.25rem;
     --container-3xl: 48rem;
-    --container-4xl: 56rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -188,9 +185,6 @@
   .invisible {
     visibility: hidden;
   }
-  .visible {
-    visibility: visible;
-  }
   .absolute {
     position: absolute;
   }
@@ -768,9 +762,6 @@
   .max-w-3xl {
     max-width: var(--container-3xl);
   }
-  .max-w-4xl {
-    max-width: var(--container-4xl);
-  }
   .max-w-\[80\%\] {
     max-width: 80%;
   }
@@ -856,10 +847,6 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
-  .border-2 {
-    border-style: var(--tw-border-style);
-    border-width: 2px;
-  }
   .border-none {
     --tw-border-style: none;
     border-style: none;
@@ -867,15 +854,9 @@
   .border-gray-200 {
     border-color: var(--color-gray-200);
   }
-  .border-gray-300 {
-    border-color: var(--color-gray-300);
-  }
   .bg-black {
     background-color: var(--color-black);
   }
-  .bg-blue-500 {
-    background-color: var(--color-blue-500);
-  }
   .bg-foreground {
     background-color: var(--foreground);
   }
@@ -917,9 +898,6 @@
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
-  .p-4 {
-    padding: calc(var(--spacing) * 4);
-  }
   .p-5 {
     padding: calc(var(--spacing) * 5);
   }
@@ -1115,11 +1093,6 @@
       }
     }
   }
-  .focus\:border-blue-500 {
-    &:focus {
-      border-color: var(--color-blue-500);
-    }
-  }
   .focus\:ring-2 {
     &:focus {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@copilotkitnext/angular",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Angular library for CopilotKit",
   "main": "dist/fesm2022/copilotkitnext-angular.mjs",
   "module": "dist/fesm2022/copilotkitnext-angular.mjs",
@@ -27,8 +27,8 @@
     "marked": "^16.2.0",
     "rxjs": "^7.8.1",
     "zod": "^3.22.4",
-    "@copilotkitnext/core": "0.0.1",
-    "@copilotkitnext/shared": "0.0.1"
+    "@copilotkitnext/core": "0.0.2",
+    "@copilotkitnext/shared": "0.0.2"
   },
   "peerDependencies": {
     "@angular/cdk": "^19.0.0",
@@ -70,8 +70,8 @@
     "typescript-eslint": "^8.35.0",
     "vitest": "^2.0.5",
     "zone.js": "^0.15.0",
-    "@copilotkitnext/eslint-config": "0.0.0",
-    "@copilotkitnext/typescript-config": "0.0.0"
+    "@copilotkitnext/typescript-config": "0.0.0",
+    "@copilotkitnext/eslint-config": "0.0.0"
   },
   "publishConfig": {
     "access": "public"

package/README-agent-context.md

@@ -1,310 +0,0 @@
-# CopilotKit Angular - Agent Context
-
-This document demonstrates how to use agent context in the Angular version of CopilotKit.
-
-## Installation
-
-```bash
-pnpm add @copilotkitnext/angular
-```
-
-## Usage
-
-### 1. Directive Approach (Declarative)
-
-The directive approach is ideal for template-driven context management.
-
-#### Basic Usage
-
-```typescript
-import { Component } from "@angular/core";
-import { CopilotKitAgentContextDirective } from "@copilotkitnext/angular";
-
-@Component({
-  selector: "app-user-profile",
-  template: `
-    <div
-      copilotkitAgentContext
-      description="User profile data"
-      [value]="userProfile"
-    >
-      <!-- Your component content -->
-    </div>
-  `,
-  standalone: true,
-  imports: [CopilotKitAgentContextDirective],
-})
-export class UserProfileComponent {
-  userProfile = {
-    id: 123,
-    name: "John Doe",
-    preferences: {
-      theme: "dark",
-      language: "en",
-    },
-  };
-}
-```
-
-#### Dynamic Values with Signals
-
-```typescript
-import { Component, signal, computed } from "@angular/core";
-
-@Component({
-  selector: "app-counter",
-  template: `
-    <div
-      copilotkitAgentContext
-      description="Counter state"
-      [value]="contextValue()"
-    >
-      <button (click)="increment()">Count: {{ count() }}</button>
-    </div>
-  `,
-})
-export class CounterComponent {
-  count = signal(0);
-
-  contextValue = computed(() => ({
-    count: this.count(),
-    doubled: this.count() * 2,
-    timestamp: Date.now(),
-  }));
-
-  increment() {
-    this.count.update((c) => c + 1);
-  }
-}
-```
-
-#### With Observables
-
-```typescript
-import { Component } from "@angular/core";
-import { interval, map } from "rxjs";
-import { AsyncPipe } from "@angular/common";
-
-@Component({
-  selector: "app-live-data",
-  template: `
-    <div
-      copilotkitAgentContext
-      description="Live data stream"
-      [value]="liveData$ | async"
-    >
-      <!-- Component content -->
-    </div>
-  `,
-  imports: [AsyncPipe, CopilotKitAgentContextDirective],
-})
-export class LiveDataComponent {
-  liveData$ = interval(1000).pipe(
-    map((tick) => ({
-      iteration: tick,
-      timestamp: new Date(),
-      data: this.generateData(tick),
-    }))
-  );
-}
-```
-
-#### Using Context Object
-
-```typescript
-@Component({
-  template: `
-    <div [copilotkitAgentContext]="myContext">
-      <!-- Content -->
-    </div>
-  `
-})
-export class MyComponent {
-  myContext = {
-    description: 'Application state',
-    value: {
-      route: '/dashboard',
-      user: 'admin',
-      settings: { ... }
-    }
-  };
-}
-```
-
-### 2. Programmatic Approach
-
-For services and components that need programmatic control.
-
-#### Basic Usage
-
-```typescript
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { addAgentContext, injectCopilotKit } from '@copilotkitnext/angular';
-
-@Component({...})
-export class MyComponent implements OnInit, OnDestroy {
-  private copilotkit = injectCopilotKit();
-  private cleanupFns: Array<() => void> = [];
-
-  ngOnInit() {
-    // Add context and store cleanup function
-    const cleanup = addAgentContext(this.copilotkit, {
-      description: 'Component initialization data',
-      value: this.initData
-    });
-
-    this.cleanupFns.push(cleanup);
-  }
-
-  ngOnDestroy() {
-    // Clean up all contexts
-    this.cleanupFns.forEach(fn => fn());
-  }
-}
-```
-
-#### Auto-cleanup with useAgentContext
-
-```typescript
-import { Component, OnInit } from '@angular/core';
-import { useAgentContext } from '@copilotkitnext/angular';
-
-@Component({...})
-export class MyComponent implements OnInit {
-  ngOnInit() {
-    // Automatically cleaned up when component is destroyed
-    const contextId = useAgentContext({
-      description: 'Auto-managed context',
-      value: this.data
-    });
-
-    console.log('Context added with ID:', contextId);
-  }
-}
-```
-
-#### Reactive Context
-
-```typescript
-import { Component, signal, computed } from '@angular/core';
-import { createReactiveContext } from '@copilotkitnext/angular';
-
-@Component({...})
-export class ReactiveComponent {
-  private settings = signal({ theme: 'light' });
-
-  ngOnInit() {
-    const context = createReactiveContext(
-      'User settings',
-      computed(() => this.settings())
-    );
-
-    // Update context when needed
-    this.settings.set({ theme: 'dark' });
-    context.update(); // Manually trigger update if needed
-  }
-}
-```
-
-### 3. Multiple Contexts
-
-You can have multiple contexts active at the same time:
-
-```typescript
-@Component({
-  template: `
-    <div copilotkitAgentContext
-         description="User data"
-         [value]="userData">
-
-      <div copilotkitAgentContext
-           description="Form state"
-           [value]="formData">
-
-        <div copilotkitAgentContext
-             description="UI state"
-             [value]="uiState">
-          <!-- All three contexts are active here -->
-        </div>
-      </div>
-    </div>
-  `
-})
-export class MultiContextComponent {
-  userData = { ... };
-  formData = { ... };
-  uiState = { ... };
-}
-```
-
-### 4. Conditional Context
-
-Context can be conditionally added/removed:
-
-```typescript
-@Component({
-  template: `
-    <div *ngIf="isLoggedIn"
-         copilotkitAgentContext
-         description="Authenticated user context"
-         [value]="userContext">
-      <!-- Only added when user is logged in -->
-    </div>
-  `
-})
-export class ConditionalContextComponent {
-  isLoggedIn = false;
-  userContext = { ... };
-}
-```
-
-## Best Practices
-
-1. **Use descriptive names**: Make context descriptions clear and specific
-2. **Keep values serializable**: Context values should be JSON-serializable
-3. **Avoid sensitive data**: Don't include passwords, tokens, or PII in context
-4. **Update responsibly**: Frequent updates may impact performance
-5. **Clean up**: Always remove contexts when no longer needed
-
-## Comparison with React
-
-| React                           | Angular                                                            |
-| ------------------------------- | ------------------------------------------------------------------ |
-| `useAgentContext(context)` hook | `copilotkitAgentContext` directive or `useAgentContext()` function |
-| Updates via useEffect deps      | Updates via `OnChanges` lifecycle                                  |
-| Cleanup in useEffect return     | Cleanup in `OnDestroy` lifecycle                                   |
-| Re-renders trigger updates      | Signal/Observable changes trigger updates                          |
-
-## TypeScript Support
-
-All functions and directives are fully typed:
-
-```typescript
-import type { Context } from '@copilotkitnext/angular';
-
-const myContext: Context = {
-  description: 'Typed context',
-  value: {
-    // Any serializable value
-    id: 123,
-    data: ['a', 'b', 'c'],
-    nested: { ... }
-  }
-};
-```
-
-## Testing
-
-The agent context directive and utilities are fully testable:
-
-```typescript
-it("should add context on init", () => {
-  const fixture = TestBed.createComponent(MyComponent);
-  fixture.detectChanges();
-
-  expect(mockCopilotKit.addContext).toHaveBeenCalledWith({
-    description: "Test context",
-    value: expectedValue,
-  });
-});
-```

package/slots.md

@@ -1,331 +0,0 @@
-# Angular CopilotKit Component Slots Documentation
-
-This document provides a comprehensive inventory of all customization slots available in the Angular CopilotKit components. Each slot can be customized using templates, components, or CSS classes.
-
-## Table of Contents
-- [Overview](#overview)
-- [Slot Types](#slot-types)
-- [Component Inventory](#component-inventory)
-  - [CopilotChatView](#copilotchatview)
-  - [CopilotChatMessageView](#copilotchatmessageview)
-  - [CopilotChatAssistantMessage](#copilotchatassistantmessage)
-  - [CopilotChatUserMessage](#copilotchatusermessage)
-  - [CopilotChatInput](#copilotchatinput)
-- [Context Interfaces](#context-interfaces)
-- [Usage Patterns](#usage-patterns)
-
-## Overview
-
-Angular CopilotKit components provide extensive customization through a slot system. Each slot accepts:
-- **Templates** (`TemplateRef<any>`) - Using `ng-template` with context variables
-- **Components** (`Type<any>`) - Custom Angular components
-- **CSS Classes** (`string`) - For styling customization
-
-## Slot Types
-
-### 1. Template Slots
-- Defined using `@ContentChild('slotName', { read: TemplateRef })`
-- Used with `<ng-template #slotName>`
-- Receive context variables via `let-varName="contextProperty"`
-
-### 2. Component Slots
-- Defined using `@Input() slotNameComponent?: Type<any>`
-- Accept Angular component classes
-- Must be standalone or properly imported
-
-### 3. CSS Class Slots
-- Defined using `@Input() slotNameClass?: string`
-- Apply custom CSS classes to default components
-- Support Tailwind classes and custom CSS
-
-## Component Inventory
-
-### CopilotChatView
-
-The top-level chat interface component with comprehensive customization options.
-
-#### Available Slots
-
-| Slot Name | Input Property | Template Property | CSS Property | Description |
-|-----------|---------------|-------------------|--------------|-------------|
-| Message View | `messageViewComponent` | `messageViewTemplate` | `messageViewClass` | Container for all messages |
-| Scroll View | `scrollViewComponent` | `scrollViewTemplate` | `scrollViewClass` | Scrollable message container |
-| Scroll Button | `scrollToBottomButtonComponent` | `scrollToBottomButtonTemplate` | `scrollToBottomButtonClass` | Button to scroll to bottom |
-| Input | `inputComponent` | `inputTemplate` | - | Chat input field |
-| Input Container | `inputContainerComponent` | `inputContainerTemplate` | `inputContainerClass` | Container around input |
-| Feather | `featherComponent` | `featherTemplate` | `featherClass` | Gradient feather effect |
-| Disclaimer | `disclaimerComponent` | `disclaimerTemplate` | `disclaimerClass` | Disclaimer message |
-
-#### Content Child Templates
-
-| Template Name | Selector | Context | Description |
-|--------------|----------|---------|-------------|
-| Custom Layout | `customLayout` | `{ messageView, input, scrollView, ... }` | Complete custom layout |
-| Send Button | `sendButton` | `{ onClick, disabled }` | Custom send button in input |
-| Toolbar | `toolbar` | `{ children }` | Input toolbar customization |
-| Text Area | `textArea` | `{ value, onChange, onKeyDown }` | Custom text input area |
-| Audio Recorder | `audioRecorder` | `{ isRecording, onStart, onStop }` | Audio recording UI |
-| Assistant Markdown | `assistantMessageMarkdownRenderer` | `{ content }` | Markdown rendering for assistant |
-| Thumbs Up Button | `thumbsUpButton` | `{ onClick, message }` | Thumbs up feedback button |
-| Thumbs Down Button | `thumbsDownButton` | `{ onClick, message }` | Thumbs down feedback button |
-| Read Aloud Button | `readAloudButton` | `{ onClick, message }` | Text-to-speech button |
-| Regenerate Button | `regenerateButton` | `{ onClick, message }` | Regenerate response button |
-
-#### Event Outputs
-
-| Event | Type | Description |
-|-------|------|-------------|
-| `assistantMessageThumbsUp` | `EventEmitter<{ message: Message }>` | Thumbs up clicked |
-| `assistantMessageThumbsDown` | `EventEmitter<{ message: Message }>` | Thumbs down clicked |
-| `assistantMessageReadAloud` | `EventEmitter<{ message: Message }>` | Read aloud clicked |
-| `assistantMessageRegenerate` | `EventEmitter<{ message: Message }>` | Regenerate clicked |
-| `userMessageCopy` | `EventEmitter<{ message: Message }>` | Copy message clicked |
-| `userMessageEdit` | `EventEmitter<{ message: Message }>` | Edit message clicked |
-
-### CopilotChatMessageView
-
-Container for displaying a list of chat messages.
-
-#### Available Slots
-
-| Slot Name | Input Property | Template Property | CSS Property | Description |
-|-----------|---------------|-------------------|--------------|-------------|
-| Assistant Message | `assistantMessageComponent` | `assistantMessageTemplate` | `assistantMessageClass` | Assistant message display |
-| User Message | `userMessageComponent` | `userMessageTemplate` | `userMessageClass` | User message display |
-| Cursor | `cursorComponent` | `cursorTemplate` | `cursorClass` | Typing indicator cursor |
-
-#### Content Child Templates
-
-| Template Name | Selector | Context | Description |
-|--------------|----------|---------|-------------|
-| Custom Layout | `customLayout` | `{ showCursor, messages, messageElements }` | Custom message layout |
-
-### CopilotChatAssistantMessage
-
-Component for displaying assistant/AI messages.
-
-#### Available Slots
-
-| Slot Name | Input Property | Template Property | CSS Property | Description |
-|-----------|---------------|-------------------|--------------|-------------|
-| Markdown Renderer | `markdownRendererSlot` | `markdownRenderer` (ContentChild) | `markdownRendererClass` | Markdown content renderer |
-| Toolbar | `toolbarSlot` | `toolbar` (ContentChild) | `toolbarClass` | Message toolbar |
-| Copy Button | `copyButtonSlot` | `copyButton` (ContentChild) | `copyButtonClass` | Copy message button |
-| Thumbs Up Button | `thumbsUpButtonSlot` | `thumbsUpButton` (ContentChild) | `thumbsUpButtonClass` | Positive feedback |
-| Thumbs Down Button | `thumbsDownButtonSlot` | `thumbsDownButton` (ContentChild) | `thumbsDownButtonClass` | Negative feedback |
-| Read Aloud Button | `readAloudButtonSlot` | `readAloudButton` (ContentChild) | `readAloudButtonClass` | Text-to-speech |
-| Regenerate Button | `regenerateButtonSlot` | `regenerateButton` (ContentChild) | `regenerateButtonClass` | Regenerate response |
-
-#### Additional Inputs
-
-| Input | Type | Description |
-|-------|------|-------------|
-| `message` | `AssistantMessage` | The message data |
-| `additionalToolbarItems` | `TemplateRef<any>` | Extra toolbar items |
-| `toolbarVisible` | `boolean` | Show/hide toolbar |
-| `inputClass` | `string` | Additional CSS classes |
-
-### CopilotChatUserMessage
-
-Component for displaying user messages.
-
-#### Available Slots
-
-| Slot Name | Input Property | Template Property | CSS Property | Description |
-|-----------|---------------|-------------------|--------------|-------------|
-| Markdown Renderer | `markdownRendererSlot` | `markdownRenderer` (ContentChild) | `markdownRendererClass` | Message content renderer |
-| Toolbar | `toolbarSlot` | `toolbar` (ContentChild) | `toolbarClass` | Message toolbar |
-| Copy Button | `copyButtonSlot` | `copyButton` (ContentChild) | `copyButtonClass` | Copy message button |
-| Edit Button | `editButtonSlot` | `editButton` (ContentChild) | `editButtonClass` | Edit message button |
-
-#### Additional Inputs
-
-| Input | Type | Description |
-|-------|------|-------------|
-| `message` | `UserMessage` | The message data |
-| `additionalToolbarItems` | `TemplateRef<any>` | Extra toolbar items |
-| `toolbarVisible` | `boolean` | Show/hide toolbar |
-| `inputClass` | `string` | Additional CSS classes |
-
-### CopilotChatInput
-
-The chat input component with rich customization options.
-
-#### Available Slots
-
-| Slot Name | Input Property | Template Property | CSS Property | Description |
-|-----------|---------------|-------------------|--------------|-------------|
-| Text Area | `textAreaSlot` | `textArea` (ContentChild) | `textAreaClass` | Input text area |
-| Send Button | `sendButtonSlot` | `sendButton` (ContentChild) | `sendButtonClass` | Send message button |
-| Audio Recorder | `audioRecorderSlot` | `audioRecorder` (ContentChild) | `audioRecorderClass` | Voice recording UI |
-| Toolbar | `toolbarSlot` | `toolbar` (ContentChild) | `toolbarClass` | Input toolbar |
-
-#### Additional Inputs
-
-| Input | Type | Description |
-|-------|------|-------------|
-| `placeholder` | `string` | Input placeholder text |
-| `disabled` | `boolean` | Disable input |
-| `inputClass` | `string` | Additional CSS classes |
-
-## Context Interfaces
-
-### AssistantMessageMarkdownRendererContext
-```typescript
-interface AssistantMessageMarkdownRendererContext {
-  content: string;
-}
-```
-
-### AssistantMessageToolbarContext
-```typescript
-interface AssistantMessageToolbarContext {
-  children: any;
-}
-```
-
-### AssistantMessageCopyButtonContext
-```typescript
-interface AssistantMessageCopyButtonContext {
-  onClick: () => void;
-}
-```
-
-### ThumbsUpButtonContext
-```typescript
-interface ThumbsUpButtonContext {
-  onClick: () => void;
-}
-```
-
-### ThumbsDownButtonContext
-```typescript
-interface ThumbsDownButtonContext {
-  onClick: () => void;
-}
-```
-
-### ReadAloudButtonContext
-```typescript
-interface ReadAloudButtonContext {
-  onClick: () => void;
-}
-```
-
-### RegenerateButtonContext
-```typescript
-interface RegenerateButtonContext {
-  onClick: () => void;
-}
-```
-
-### InputContext
-```typescript
-interface InputContext {
-  onSend: (message: string) => void;
-  placeholder?: string;
-  disabled?: boolean;
-}
-```
-
-### ScrollButtonContext
-```typescript
-interface ScrollButtonContext {
-  onClick: () => void;
-  visible: boolean;
-}
-```
-
-## Usage Patterns
-
-### Template Customization
-```html
-<copilot-chat-view>
-  <ng-template #disclaimer>
-    <div class="custom-disclaimer">
-      Custom disclaimer content
-    </div>
-  </ng-template>
-  
-  <ng-template #sendButton let-onClick="onClick" let-disabled="disabled">
-    <button (click)="onClick()" [disabled]="disabled">
-      Send Message
-    </button>
-  </ng-template>
-</copilot-chat-view>
-```
-
-### Component Customization
-```typescript
-@Component({
-  template: `
-    <copilot-chat-view
-      [disclaimerComponent]="customDisclaimerComponent"
-      [inputComponent]="customInputComponent">
-    </copilot-chat-view>
-  `
-})
-export class MyComponent {
-  customDisclaimerComponent = CustomDisclaimerComponent;
-  customInputComponent = CustomInputComponent;
-}
-```
-
-### CSS Customization
-```html
-<copilot-chat-view
-  [disclaimerClass]="'bg-blue-500 text-white p-4 rounded-lg'"
-  [inputClass]="'border-2 border-gray-300 focus:border-blue-500'"
-  [messageViewClass]="'max-w-4xl mx-auto'">
-</copilot-chat-view>
-```
-
-### Event Handling
-```typescript
-@Component({
-  template: `
-    <copilot-chat-view
-      (assistantMessageThumbsUp)="handleThumbsUp($event)"
-      (assistantMessageThumbsDown)="handleThumbsDown($event)"
-      (userMessageEdit)="handleEdit($event)">
-    </copilot-chat-view>
-  `
-})
-export class MyComponent {
-  handleThumbsUp(event: { message: Message }) {
-    console.log('Thumbs up for message:', event.message);
-  }
-  
-  handleThumbsDown(event: { message: Message }) {
-    console.log('Thumbs down for message:', event.message);
-  }
-  
-  handleEdit(event: { message: Message }) {
-    console.log('Edit message:', event.message);
-  }
-}
-```
-
-## Best Practices
-
-1. **Use Templates for Dynamic Content**: When you need to pass context variables or handle events, use templates.
-
-2. **Use Components for Complex Logic**: When customization requires significant logic or state management, create a custom component.
-
-3. **Use CSS Classes for Simple Styling**: For basic visual customization, CSS classes are the simplest approach.
-
-4. **Combine Approaches**: You can mix templates, components, and CSS classes for different slots in the same component.
-
-5. **Type Safety**: Define proper TypeScript interfaces for your context objects when creating custom templates.
-
-6. **Performance**: Use `ChangeDetectionStrategy.OnPush` in custom components for better performance.
-
-7. **Accessibility**: Ensure custom components maintain proper ARIA attributes and keyboard navigation.
-
-## Future Enhancements
-
-- Additional slot positions for more granular customization
-- Built-in theme presets
-- Animation and transition customization slots
-- Custom loading states and error handling slots
-- Plugin system for extending functionality