@copilotkitnext/angular 0.0.0-max-changeset-20260109174803

package/dist/README.md

@@ -0,0 +1,530 @@
+# 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 (supports Angular 18 and 19):
+
+```bash
+# pnpm (recommended)
+pnpm add @copilotkitnext/angular
+
+# npm
+npm install @copilotkitnext/angular
+
+# yarn
+yarn add @copilotkitnext/angular
+```
+
+### Peer Dependencies
+
+Ensure these are present (matching your Angular major):
+
+- `@angular/core`
+- `@angular/common`
+- `@angular/cdk` (use `^18` with Angular 18, `^19` with Angular 19)
+- `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`)
+
+## Custom Input Components (Angular)
+
+When building custom input components for CopilotKit Angular, use the service-based pattern with `CopilotChatConfigurationService` for message submission. This is the idiomatic Angular approach leveraging dependency injection.
+
+### Service-Based Custom Input Example:
+
+```typescript
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { CopilotChatConfigurationService } from '@copilotkitnext/angular';
+
+@Component({
+  selector: 'my-custom-input',
+  standalone: true,
+  imports: [FormsModule],
+  template: `
+    <div class="custom-input-wrapper">
+      <input 
+        [(ngModel)]="inputValue"
+        (keyup.enter)="submitMessage()"
+        placeholder="Type your message..."
+      />
+      <button (click)="submitMessage()">Send</button>
+    </div>
+  `
+})
+export class MyCustomInputComponent {
+  inputValue = '';
+  
+  constructor(private chat: CopilotChatConfigurationService) {}
+  
+  submitMessage() {
+    const value = this.inputValue.trim();
+    if (value) {
+      // Use the service to submit the message
+      this.chat.submitInput(value);
+      this.inputValue = '';
+    }
+  }
+}
+```
+
+### Using the Custom Input Component:
+
+```typescript
+import { Component } from '@angular/core';
+import { CopilotChatViewComponent } from '@copilotkitnext/angular';
+import { MyCustomInputComponent } from './my-custom-input.component';
+
+@Component({
+  selector: 'app-chat',
+  standalone: true,
+  imports: [CopilotChatViewComponent],
+  template: `
+    <copilot-chat-view
+      [messages]="messages"
+      [inputComponent]="customInputComponent">
+    </copilot-chat-view>
+  `
+})
+export class ChatComponent {
+  messages = [];
+  customInputComponent = MyCustomInputComponent;
+}
+```
+
+### Key Points:
+
+- **No callback props**: Unlike React which uses `onSubmitMessage` callbacks, Angular uses dependency injection
+- **Service injection**: Inject `CopilotChatConfigurationService` to access `submitInput()`
+- **Cross-component communication**: The service handles message submission internally
+- **Type safety**: Full TypeScript support with proper type inference
+
+### Alternative: Using the Chat Config Directive
+
+For template-level hooks, you can also use the `copilotkitChatConfig` directive:
+
+```html
+<div [copilotkitChatConfig]="{ 
+  onSubmitInput: handleSubmit,
+  onChangeInput: handleChange 
+}">
+  <copilot-chat></copilot-chat>
+</div>
+```
+
+```typescript
+export class ChatComponent {
+  handleSubmit = (value: string) => {
+    console.log('Message submitted:', value);
+  };
+  
+  handleChange = (value: string) => {
+    console.log('Input changed:', value);
+  };
+}
+```
+
+## 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
+
+## Headless Usage: Building Custom Chat UIs
+
+For advanced use cases where you need full control over the chat UI, you can use the `watchAgent` utility directly to build a custom chat component.
+
+### Using `watchAgent` for Custom Components
+
+The `watchAgent` function provides reactive signals for agent state, making it easy to build custom chat interfaces:
+
+```typescript
+import { Component, effect } from "@angular/core";
+import { watchAgent } from "@copilotkitnext/angular";
+
+@Component({
+  selector: "my-custom-chat",
+  template: `
+    <div class="custom-chat">
+      <div *ngFor="let msg of messages()" class="message">
+        {{ msg.content }}
+      </div>
+      <input
+        [disabled]="isRunning()"
+        (keyup.enter)="sendMessage($event)"
+      />
+    </div>
+  `,
+})
+export class MyCustomChatComponent {
+  protected agent!: ReturnType<typeof watchAgent>["agent"];
+  protected messages!: ReturnType<typeof watchAgent>["messages"];
+  protected isRunning!: ReturnType<typeof watchAgent>["isRunning"];
+
+  constructor() {
+    const w = watchAgent({ agentId: "custom" });
+    this.agent = w.agent;
+    this.messages = w.messages;
+    this.isRunning = w.isRunning;
+
+    // React to agent changes
+    effect(() => {
+      const currentAgent = this.agent();
+      if (currentAgent) {
+        console.log("Agent ready:", currentAgent.id);
+      }
+    });
+  }
+
+  async sendMessage(event: Event) {
+    const input = event.target as HTMLInputElement;
+    const content = input.value.trim();
+    if (!content || !this.agent()) return;
+
+    // Add user message and run agent
+    this.agent()!.addMessage({ role: "user", content });
+    input.value = "";
+    await this.agent()!.runAgent();
+  }
+}
+```
+
+### Switching Agents at Runtime
+
+Use `watchAgentWith` when you need to switch agents dynamically outside of the constructor:
+
+```typescript
+import { Component, Injector } from "@angular/core";
+import { watchAgent, watchAgentWith } from "@copilotkitnext/angular";
+
+@Component({
+  selector: "agent-switcher",
+  template: `
+    <button (click)="switchToAgent('sales')">Sales Agent</button>
+    <button (click)="switchToAgent('support')">Support Agent</button>
+    <div>Current Agent: {{ agent()?.id || 'None' }}</div>
+  `,
+})
+export class AgentSwitcherComponent {
+  protected agent!: ReturnType<typeof watchAgent>["agent"];
+  protected messages!: ReturnType<typeof watchAgent>["messages"];
+  protected isRunning!: ReturnType<typeof watchAgent>["isRunning"];
+  private watcher?: ReturnType<typeof watchAgent>;
+
+  constructor(private injector: Injector) {
+    // Initialize with default agent
+    this.switchToAgent("default");
+  }
+
+  switchToAgent(agentId: string) {
+    // Clean up previous watcher
+    this.watcher?.unsubscribe();
+
+    // Create new watcher with the ergonomic helper
+    const w = watchAgentWith(this.injector, { agentId });
+
+    // Update component signals
+    this.agent = w.agent;
+    this.messages = w.messages;
+    this.isRunning = w.isRunning;
+    this.watcher = w;
+  }
+}
+```
+
+### Rendering Tool Calls (Headless)
+
+To render tool calls in a headless UI, register renderers in your providers and drop the lightweight view in your template.
+
+1) Register tool renderers (e.g., a wildcard that renders any tool):
+
+```ts
+import { ApplicationConfig, importProvidersFrom } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { provideCopilotKit } from '@copilotkitnext/angular';
+
+// Simple demo renderer (Component or TemplateRef accepted)
+@Component({
+  standalone: true,
+  template: `
+    <div style="padding:12px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;margin:8px 0;">
+      <div style="font-weight:600;margin-bottom:6px;">Tool: {{ name }}</div>
+      <pre style="margin:0;white-space:pre-wrap;">{{ args | json }}</pre>
+      <div *ngIf="result" style="margin-top:6px;">Result: {{ result }}</div>
+    </div>
+  `,
+})
+export class WildcardToolRenderComponent {
+  @Input() name!: string;
+  @Input() args: any;
+  @Input() status: any;
+  @Input() result?: string;
+}
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    importProvidersFrom(BrowserModule),
+    ...provideCopilotKit({
+      renderToolCalls: [
+        { name: '*', render: WildcardToolRenderComponent },
+      ],
+    }),
+  ],
+};
+```
+
+2) Render tool calls under assistant messages using the headless view component:
+
+```ts
+import { Component } from '@angular/core';
+import { watchAgent, CopilotChatToolCallsViewComponent } from '@copilotkitnext/angular';
+
+@Component({
+  standalone: true,
+  imports: [CopilotChatToolCallsViewComponent],
+  template: `
+    <div *ngFor="let m of messages()">
+      <div>{{ m.role }}: {{ m.content }}</div>
+      <ng-container *ngIf="m.role === 'assistant'">
+        <copilot-chat-tool-calls-view
+          [message]="m"
+          [messages]="messages()"
+          [isLoading]="isRunning()"
+        />
+      </ng-container>
+    </div>
+  `,
+})
+export class HeadlessWithToolsComponent {
+  agent = watchAgent().agent;
+  messages = watchAgent().messages;
+  isRunning = watchAgent().isRunning;
+}
+```
+
+Notes:
+- If you prefer full manual control, you can render a specific tool call with `CopilotKitToolRenderComponent` and pass `toolName`, `args`, `status`, and `result` yourself.
+- You can also register tool renders declaratively via the `CopilotKitFrontendToolDirective` by using `[copilotkitFrontendTool]` in templates.
+
+### Key Benefits of Headless Usage
+
+- **Full control**: Build any UI you need without constraints
+- **Reactive signals**: Automatically update UI when agent state changes
+- **Type safety**: Full TypeScript support with AG-UI types
+- **Memory efficient**: Automatic cleanup via Angular's DestroyRef
+- **Framework agnostic**: Works with any AG-UI compatible agent
+
+## 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/esm2022/copilotkitnext-angular.mjs

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29waWxvdGtpdG5leHQtYW5ndWxhci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb3BpbG90a2l0bmV4dC1hbmd1bGFyLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxTQUFTLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vaW5kZXgnO1xuIl19

package/dist/esm2022/index.mjs

@@ -0,0 +1,2 @@
+export * from "./public-api";
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxjQUFjLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tIFwiLi9wdWJsaWMtYXBpXCI7XG4iXX0=

package/dist/esm2022/lib/agent-context.mjs

@@ -0,0 +1,25 @@
+import { effect, inject, Injector, runInInjectionContext } from "@angular/core";
+import { CopilotKit } from "./copilotkit";
+/**
+ * Connects context to the agent.
+ *
+ * @param context - The context (or a signal of context) to connect to the agent.
+ * @param config - Optional configuration for connecting the context.
+ */
+export function connectAgentContext(context, config) {
+    const injector = inject(Injector, { optional: true }) ?? config?.injector;
+    if (!injector) {
+        throw new Error("Injector not found. You must call connectAgentContext in an injector context or pass an injector in the config");
+    }
+    runInInjectionContext(injector, () => {
+        const copilotkit = inject(CopilotKit);
+        effect((teardown) => {
+            const contextValue = typeof context === "function" ? context() : context;
+            const id = copilotkit.core.addContext(contextValue);
+            teardown(() => {
+                copilotkit.core.removeContext(id);
+            });
+        });
+    });
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWdlbnQtY29udGV4dC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvYWdlbnQtY29udGV4dC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsTUFBTSxFQUFFLE1BQU0sRUFBRSxRQUFRLEVBQUUscUJBQXFCLEVBQVUsTUFBTSxlQUFlLENBQUM7QUFFeEYsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGNBQWMsQ0FBQztBQU0xQzs7Ozs7R0FLRztBQUNILE1BQU0sVUFBVSxtQkFBbUIsQ0FBQyxPQUFrQyxFQUFFLE1BQWtDO0lBQ3hHLE1BQU0sUUFBUSxHQUFHLE1BQU0sQ0FBQyxRQUFRLEVBQUUsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFLENBQUMsSUFBSSxNQUFNLEVBQUUsUUFBUSxDQUFDO0lBRTFFLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztRQUNkLE1BQU0sSUFBSSxLQUFLLENBQ2IsZ0hBQWdILENBQ2pILENBQUM7SUFDSixDQUFDO0lBRUQscUJBQXFCLENBQUMsUUFBUSxFQUFFLEdBQUcsRUFBRTtRQUNuQyxNQUFNLFVBQVUsR0FBRyxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUM7UUFFdEMsTUFBTSxDQUFDLENBQUMsUUFBUSxFQUFFLEVBQUU7WUFDbEIsTUFBTSxZQUFZLEdBQUcsT0FBTyxPQUFPLEtBQUssVUFBVSxDQUFDLENBQUMsQ0FBQyxPQUFPLEVBQUUsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDO1lBQ3pFLE1BQU0sRUFBRSxHQUFHLFVBQVUsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLFlBQVksQ0FBQyxDQUFDO1lBRXBELFFBQVEsQ0FBQyxHQUFHLEVBQUU7Z0JBQ1osVUFBVSxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsRUFBRSxDQUFDLENBQUM7WUFDcEMsQ0FBQyxDQUFDLENBQUM7UUFDTCxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUMsQ0FBQyxDQUFDO0FBQ0wsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGVmZmVjdCwgaW5qZWN0LCBJbmplY3RvciwgcnVuSW5JbmplY3Rpb25Db250ZXh0LCBTaWduYWwgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgQ29udGV4dCB9IGZyb20gXCJAYWctdWkvY2xpZW50XCI7XG5pbXBvcnQgeyBDb3BpbG90S2l0IH0gZnJvbSBcIi4vY29waWxvdGtpdFwiO1xuXG5leHBvcnQgaW50ZXJmYWNlIENvbm5lY3RBZ2VudENvbnRleHRDb25maWcge1xuICBpbmplY3Rvcj86IEluamVjdG9yO1xufVxuXG4vKipcbiAqIENvbm5lY3RzIGNvbnRleHQgdG8gdGhlIGFnZW50LlxuICpcbiAqIEBwYXJhbSBjb250ZXh0IC0gVGhlIGNvbnRleHQgKG9yIGEgc2lnbmFsIG9mIGNvbnRleHQpIHRvIGNvbm5lY3QgdG8gdGhlIGFnZW50LlxuICogQHBhcmFtIGNvbmZpZyAtIE9wdGlvbmFsIGNvbmZpZ3VyYXRpb24gZm9yIGNvbm5lY3RpbmcgdGhlIGNvbnRleHQuXG4gKi9cbmV4cG9ydCBmdW5jdGlvbiBjb25uZWN0QWdlbnRDb250ZXh0KGNvbnRleHQ6IENvbnRleHQgfCBTaWduYWw8Q29udGV4dD4sIGNvbmZpZz86IENvbm5lY3RBZ2VudENvbnRleHRDb25maWcpIHtcbiAgY29uc3QgaW5qZWN0b3IgPSBpbmplY3QoSW5qZWN0b3IsIHsgb3B0aW9uYWw6IHRydWUgfSkgPz8gY29uZmlnPy5pbmplY3RvcjtcblxuICBpZiAoIWluamVjdG9yKSB7XG4gICAgdGhyb3cgbmV3IEVycm9yKFxuICAgICAgXCJJbmplY3RvciBub3QgZm91bmQuIFlvdSBtdXN0IGNhbGwgY29ubmVjdEFnZW50Q29udGV4dCBpbiBhbiBpbmplY3RvciBjb250ZXh0IG9yIHBhc3MgYW4gaW5qZWN0b3IgaW4gdGhlIGNvbmZpZ1wiLFxuICAgICk7XG4gIH1cblxuICBydW5JbkluamVjdGlvbkNvbnRleHQoaW5qZWN0b3IsICgpID0+IHtcbiAgICBjb25zdCBjb3BpbG90a2l0ID0gaW5qZWN0KENvcGlsb3RLaXQpO1xuXG4gICAgZWZmZWN0KCh0ZWFyZG93bikgPT4ge1xuICAgICAgY29uc3QgY29udGV4dFZhbHVlID0gdHlwZW9mIGNvbnRleHQgPT09IFwiZnVuY3Rpb25cIiA/IGNvbnRleHQoKSA6IGNvbnRleHQ7XG4gICAgICBjb25zdCBpZCA9IGNvcGlsb3RraXQuY29yZS5hZGRDb250ZXh0KGNvbnRleHRWYWx1ZSk7XG5cbiAgICAgIHRlYXJkb3duKCgpID0+IHtcbiAgICAgICAgY29waWxvdGtpdC5jb3JlLnJlbW92ZUNvbnRleHQoaWQpO1xuICAgICAgfSk7XG4gICAgfSk7XG4gIH0pO1xufVxuIl19

package/dist/esm2022/lib/agent.mjs

@@ -0,0 +1,73 @@
+import { DestroyRef, Injectable, inject, signal, computed, } from "@angular/core";
+import { CopilotKit } from "./copilotkit";
+import { DEFAULT_AGENT_ID } from "@copilotkitnext/shared";
+import * as i0 from "@angular/core";
+export class AgentStore {
+    #subscription;
+    #isRunning = signal(false);
+    #messages = signal([]);
+    #state = signal(undefined);
+    agent;
+    isRunning = this.#isRunning.asReadonly();
+    messages = this.#messages.asReadonly();
+    state = this.#state.asReadonly();
+    constructor(abstractAgent, destroyRef) {
+        this.agent = abstractAgent;
+        this.#subscription = abstractAgent.subscribe({
+            onMessagesChanged: () => {
+                this.#messages.set(abstractAgent.messages);
+            },
+            onStateChanged: () => {
+                this.#state.set(abstractAgent.state);
+            },
+            onRunInitialized: () => {
+                this.#isRunning.set(true);
+            },
+            onRunFinalized: () => {
+                this.#isRunning.set(false);
+            },
+            onRunFailed: () => {
+                this.#isRunning.set(false);
+            },
+        });
+        destroyRef.onDestroy(() => {
+            this.teardown();
+        });
+    }
+    teardown() {
+        if (this.#subscription) {
+            this.#subscription.unsubscribe();
+        }
+    }
+}
+export class CopilotkitAgentFactory {
+    #copilotkit = inject(CopilotKit);
+    createAgentStoreSignal(agentId, destroyRef) {
+        let lastAgentStore;
+        return computed(() => {
+            this.#copilotkit.agents();
+            if (lastAgentStore) {
+                lastAgentStore.teardown();
+                lastAgentStore = undefined;
+            }
+            const abstractAgent = this.#copilotkit.getAgent(agentId() || DEFAULT_AGENT_ID);
+            if (!abstractAgent)
+                return undefined;
+            lastAgentStore = new AgentStore(abstractAgent, destroyRef);
+            return lastAgentStore;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CopilotkitAgentFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CopilotkitAgentFactory, providedIn: "root" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CopilotkitAgentFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "root" }]
+        }] });
+export function injectAgentStore(agentId) {
+    const agentFactory = inject(CopilotkitAgentFactory);
+    const destroyRef = inject(DestroyRef);
+    const agentIdSignal = typeof agentId === "function" ? agentId : computed(() => agentId);
+    return agentFactory.createAgentStoreSignal(agentIdSignal, destroyRef);
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWdlbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvbGliL2FnZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxVQUFVLEVBQ1YsVUFBVSxFQUNWLE1BQU0sRUFDTixNQUFNLEVBQ04sUUFBUSxHQUVULE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFHMUMsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sd0JBQXdCLENBQUM7O0FBRTFELE1BQU0sT0FBTyxVQUFVO0lBQ1osYUFBYSxDQUVwQjtJQUNPLFVBQVUsR0FBRyxNQUFNLENBQVUsS0FBSyxDQUFDLENBQUM7SUFDcEMsU0FBUyxHQUFHLE1BQU0sQ0FBWSxFQUFFLENBQUMsQ0FBQztJQUNsQyxNQUFNLEdBQUcsTUFBTSxDQUFNLFNBQVMsQ0FBQyxDQUFDO0lBRWhDLEtBQUssQ0FBZ0I7SUFDckIsU0FBUyxHQUFHLElBQUksQ0FBQyxVQUFVLENBQUMsVUFBVSxFQUFFLENBQUM7SUFDekMsUUFBUSxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsVUFBVSxFQUFFLENBQUM7SUFDdkMsS0FBSyxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsVUFBVSxFQUFFLENBQUM7SUFFMUMsWUFBWSxhQUE0QixFQUFFLFVBQXNCO1FBQzlELElBQUksQ0FBQyxLQUFLLEdBQUcsYUFBYSxDQUFDO1FBRTNCLElBQUksQ0FBQyxhQUFhLEdBQUcsYUFBYSxDQUFDLFNBQVMsQ0FBQztZQUMzQyxpQkFBaUIsRUFBRSxHQUFHLEVBQUU7Z0JBQ3RCLElBQUksQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFDLGFBQWEsQ0FBQyxRQUFRLENBQUMsQ0FBQztZQUM3QyxDQUFDO1lBQ0QsY0FBYyxFQUFFLEdBQUcsRUFBRTtnQkFDbkIsSUFBSSxDQUFDLE1BQU0sQ0FBQyxHQUFHLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxDQUFDO1lBQ3ZDLENBQUM7WUFDRCxnQkFBZ0IsRUFBRSxHQUFHLEVBQUU7Z0JBQ3JCLElBQUksQ0FBQyxVQUFVLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxDQUFDO1lBQzVCLENBQUM7WUFDRCxjQUFjLEVBQUUsR0FBRyxFQUFFO2dCQUNuQixJQUFJLENBQUMsVUFBVSxDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUMsQ0FBQztZQUM3QixDQUFDO1lBQ0QsV0FBVyxFQUFFLEdBQUcsRUFBRTtnQkFDaEIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUM7WUFDN0IsQ0FBQztTQUNGLENBQUMsQ0FBQztRQUVILFVBQVUsQ0FBQyxTQUFTLENBQUMsR0FBRyxFQUFFO1lBQ3hCLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztRQUNsQixDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRCxRQUFRO1FBQ04sSUFBSSxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7WUFDdkIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxXQUFXLEVBQUUsQ0FBQztRQUNuQyxDQUFDO0lBQ0gsQ0FBQztDQUNGO0FBR0QsTUFBTSxPQUFPLHNCQUFzQjtJQUN4QixXQUFXLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDO0lBRTFDLHNCQUFzQixDQUNwQixPQUFtQyxFQUNuQyxVQUFzQjtRQUV0QixJQUFJLGNBQXNDLENBQUM7UUFFM0MsT0FBTyxRQUFRLENBQUMsR0FBRyxFQUFFO1lBQ25CLElBQUksQ0FBQyxXQUFXLENBQUMsTUFBTSxFQUFFLENBQUM7WUFFMUIsSUFBSSxjQUFjLEVBQUUsQ0FBQztnQkFDbkIsY0FBYyxDQUFDLFFBQVEsRUFBRSxDQUFDO2dCQUMxQixjQUFjLEdBQUcsU0FBUyxDQUFDO1lBQzdCLENBQUM7WUFFRCxNQUFNLGFBQWEsR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDLFFBQVEsQ0FDN0MsT0FBTyxFQUFFLElBQUksZ0JBQWdCLENBQzlCLENBQUM7WUFDRixJQUFJLENBQUMsYUFBYTtnQkFBRSxPQUFPLFNBQVMsQ0FBQztZQUVyQyxjQUFjLEdBQUcsSUFBSSxVQUFVLENBQUMsYUFBYSxFQUFFLFVBQVUsQ0FBQyxDQUFDO1lBQzNELE9BQU8sY0FBYyxDQUFDO1FBQ3hCLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQzt3R0F6QlUsc0JBQXNCOzRHQUF0QixzQkFBc0IsY0FEVCxNQUFNOzs0RkFDbkIsc0JBQXNCO2tCQURsQyxVQUFVO21CQUFDLEVBQUUsVUFBVSxFQUFFLE1BQU0sRUFBRTs7QUE2QmxDLE1BQU0sVUFBVSxnQkFBZ0IsQ0FDOUIsT0FBNEM7SUFFNUMsTUFBTSxZQUFZLEdBQUcsTUFBTSxDQUFDLHNCQUFzQixDQUFDLENBQUM7SUFDcEQsTUFBTSxVQUFVLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDO0lBQ3RDLE1BQU0sYUFBYSxHQUNqQixPQUFPLE9BQU8sS0FBSyxVQUFVLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDLEdBQUcsRUFBRSxDQUFDLE9BQU8sQ0FBQyxDQUFDO0lBRXBFLE9BQU8sWUFBWSxDQUFDLHNCQUFzQixDQUFDLGFBQWEsRUFBRSxVQUFVLENBQUMsQ0FBQztBQUN4RSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgRGVzdHJveVJlZixcbiAgSW5qZWN0YWJsZSxcbiAgaW5qZWN0LFxuICBzaWduYWwsXG4gIGNvbXB1dGVkLFxuICBTaWduYWwsXG59IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBDb3BpbG90S2l0IH0gZnJvbSBcIi4vY29waWxvdGtpdFwiO1xuaW1wb3J0IHR5cGUgeyBBYnN0cmFjdEFnZW50IH0gZnJvbSBcIkBhZy11aS9jbGllbnRcIjtcbmltcG9ydCB0eXBlIHsgTWVzc2FnZSB9IGZyb20gXCJAYWctdWkvY2xpZW50XCI7XG5pbXBvcnQgeyBERUZBVUxUX0FHRU5UX0lEIH0gZnJvbSBcIkBjb3BpbG90a2l0bmV4dC9zaGFyZWRcIjtcblxuZXhwb3J0IGNsYXNzIEFnZW50U3RvcmUge1xuICByZWFkb25seSAjc3Vic2NyaXB0aW9uPzoge1xuICAgIHVuc3Vic2NyaWJlOiAoKSA9PiB2b2lkO1xuICB9O1xuICByZWFkb25seSAjaXNSdW5uaW5nID0gc2lnbmFsPGJvb2xlYW4+KGZhbHNlKTtcbiAgcmVhZG9ubHkgI21lc3NhZ2VzID0gc2lnbmFsPE1lc3NhZ2VbXT4oW10pO1xuICByZWFkb25seSAjc3RhdGUgPSBzaWduYWw8YW55Pih1bmRlZmluZWQpO1xuXG4gIHJlYWRvbmx5IGFnZW50OiBBYnN0cmFjdEFnZW50O1xuICByZWFkb25seSBpc1J1bm5pbmcgPSB0aGlzLiNpc1J1bm5pbmcuYXNSZWFkb25seSgpO1xuICByZWFkb25seSBtZXNzYWdlcyA9IHRoaXMuI21lc3NhZ2VzLmFzUmVhZG9ubHkoKTtcbiAgcmVhZG9ubHkgc3RhdGUgPSB0aGlzLiNzdGF0ZS5hc1JlYWRvbmx5KCk7XG5cbiAgY29uc3RydWN0b3IoYWJzdHJhY3RBZ2VudDogQWJzdHJhY3RBZ2VudCwgZGVzdHJveVJlZjogRGVzdHJveVJlZikge1xuICAgIHRoaXMuYWdlbnQgPSBhYnN0cmFjdEFnZW50O1xuXG4gICAgdGhpcy4jc3Vic2NyaXB0aW9uID0gYWJzdHJhY3RBZ2VudC5zdWJzY3JpYmUoe1xuICAgICAgb25NZXNzYWdlc0NoYW5nZWQ6ICgpID0+IHtcbiAgICAgICAgdGhpcy4jbWVzc2FnZXMuc2V0KGFic3RyYWN0QWdlbnQubWVzc2FnZXMpO1xuICAgICAgfSxcbiAgICAgIG9uU3RhdGVDaGFuZ2VkOiAoKSA9PiB7XG4gICAgICAgIHRoaXMuI3N0YXRlLnNldChhYnN0cmFjdEFnZW50LnN0YXRlKTtcbiAgICAgIH0sXG4gICAgICBvblJ1bkluaXRpYWxpemVkOiAoKSA9PiB7XG4gICAgICAgIHRoaXMuI2lzUnVubmluZy5zZXQodHJ1ZSk7XG4gICAgICB9LFxuICAgICAgb25SdW5GaW5hbGl6ZWQ6ICgpID0+IHtcbiAgICAgICAgdGhpcy4jaXNSdW5uaW5nLnNldChmYWxzZSk7XG4gICAgICB9LFxuICAgICAgb25SdW5GYWlsZWQ6ICgpID0+IHtcbiAgICAgICAgdGhpcy4jaXNSdW5uaW5nLnNldChmYWxzZSk7XG4gICAgICB9LFxuICAgIH0pO1xuXG4gICAgZGVzdHJveVJlZi5vbkRlc3Ryb3koKCkgPT4ge1xuICAgICAgdGhpcy50ZWFyZG93bigpO1xuICAgIH0pO1xuICB9XG5cbiAgdGVhcmRvd24oKTogdm9pZCB7XG4gICAgaWYgKHRoaXMuI3N1YnNjcmlwdGlvbikge1xuICAgICAgdGhpcy4jc3Vic2NyaXB0aW9uLnVuc3Vic2NyaWJlKCk7XG4gICAgfVxuICB9XG59XG5cbkBJbmplY3RhYmxlKHsgcHJvdmlkZWRJbjogXCJyb290XCIgfSlcbmV4cG9ydCBjbGFzcyBDb3BpbG90a2l0QWdlbnRGYWN0b3J5IHtcbiAgcmVhZG9ubHkgI2NvcGlsb3RraXQgPSBpbmplY3QoQ29waWxvdEtpdCk7XG5cbiAgY3JlYXRlQWdlbnRTdG9yZVNpZ25hbChcbiAgICBhZ2VudElkOiBTaWduYWw8c3RyaW5nIHwgdW5kZWZpbmVkPixcbiAgICBkZXN0cm95UmVmOiBEZXN0cm95UmVmXG4gICk6IFNpZ25hbDxBZ2VudFN0b3JlIHwgdW5kZWZpbmVkPiB7XG4gICAgbGV0IGxhc3RBZ2VudFN0b3JlOiBBZ2VudFN0b3JlIHwgdW5kZWZpbmVkO1xuXG4gICAgcmV0dXJuIGNvbXB1dGVkKCgpID0+IHtcbiAgICAgIHRoaXMuI2NvcGlsb3RraXQuYWdlbnRzKCk7XG5cbiAgICAgIGlmIChsYXN0QWdlbnRTdG9yZSkge1xuICAgICAgICBsYXN0QWdlbnRTdG9yZS50ZWFyZG93bigpO1xuICAgICAgICBsYXN0QWdlbnRTdG9yZSA9IHVuZGVmaW5lZDtcbiAgICAgIH1cblxuICAgICAgY29uc3QgYWJzdHJhY3RBZ2VudCA9IHRoaXMuI2NvcGlsb3RraXQuZ2V0QWdlbnQoXG4gICAgICAgIGFnZW50SWQoKSB8fCBERUZBVUxUX0FHRU5UX0lEXG4gICAgICApO1xuICAgICAgaWYgKCFhYnN0cmFjdEFnZW50KSByZXR1cm4gdW5kZWZpbmVkO1xuXG4gICAgICBsYXN0QWdlbnRTdG9yZSA9IG5ldyBBZ2VudFN0b3JlKGFic3RyYWN0QWdlbnQsIGRlc3Ryb3lSZWYpO1xuICAgICAgcmV0dXJuIGxhc3RBZ2VudFN0b3JlO1xuICAgIH0pO1xuICB9XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBpbmplY3RBZ2VudFN0b3JlKFxuICBhZ2VudElkOiBzdHJpbmcgfCBTaWduYWw8c3RyaW5nIHwgdW5kZWZpbmVkPlxuKTogU2lnbmFsPEFnZW50U3RvcmUgfCB1bmRlZmluZWQ+IHtcbiAgY29uc3QgYWdlbnRGYWN0b3J5ID0gaW5qZWN0KENvcGlsb3RraXRBZ2VudEZhY3RvcnkpO1xuICBjb25zdCBkZXN0cm95UmVmID0gaW5qZWN0KERlc3Ryb3lSZWYpO1xuICBjb25zdCBhZ2VudElkU2lnbmFsID1cbiAgICB0eXBlb2YgYWdlbnRJZCA9PT0gXCJmdW5jdGlvblwiID8gYWdlbnRJZCA6IGNvbXB1dGVkKCgpID0+IGFnZW50SWQpO1xuXG4gIHJldHVybiBhZ2VudEZhY3RvcnkuY3JlYXRlQWdlbnRTdG9yZVNpZ25hbChhZ2VudElkU2lnbmFsLCBkZXN0cm95UmVmKTtcbn1cbiJdfQ==