@copilotkitnext/angular 0.0.1

package/package.json

@@ -0,0 +1,96 @@
+{
+  "name": "@copilotkitnext/angular",
+  "version": "0.0.1",
+  "description": "Angular library for CopilotKit",
+  "main": "dist/fesm2022/copilotkitnext-angular.mjs",
+  "module": "dist/fesm2022/copilotkitnext-angular.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/fesm2022/copilotkitnext-angular.mjs",
+      "default": "./dist/fesm2022/copilotkitnext-angular.mjs"
+    },
+    "./testing": {
+      "types": "./dist/testing/index.d.ts",
+      "import": "./dist/testing/index.mjs",
+      "default": "./dist/testing/index.mjs"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "dependencies": {
+    "@ag-ui/client": "0.0.36-alpha.1",
+    "@ag-ui/core": "0.0.36-alpha.1",
+    "highlight.js": "^11.11.1",
+    "katex": "^0.16.22",
+    "lucide-angular": "^0.540.0",
+    "marked": "^16.2.0",
+    "rxjs": "^7.8.1",
+    "zod": "^3.22.4",
+    "@copilotkitnext/core": "0.0.1",
+    "@copilotkitnext/shared": "0.0.1"
+  },
+  "peerDependencies": {
+    "@angular/cdk": "^19.0.0",
+    "@angular/common": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "rxjs": "^7.8.0",
+    "tslib": "^2.6.0"
+  },
+  "devDependencies": {
+    "@angular/cdk": "^19.0.0",
+    "@angular/common": "^19.0.0",
+    "@angular/compiler": "^19.0.0",
+    "@angular/compiler-cli": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/platform-browser": "^19.0.0",
+    "@angular/platform-browser-dynamic": "^19.0.0",
+    "@eslint/js": "^9.30.0",
+    "@lucide/build-icons": "^1.1.0",
+    "@tailwindcss/cli": "^4.1.11",
+    "@tailwindcss/postcss": "^4.1.11",
+    "@tailwindcss/typography": "^0.5.16",
+    "@types/katex": "^0.16.7",
+    "@types/node": "^22.5.1",
+    "@vitest/ui": "^2.0.5",
+    "autoprefixer": "^10.4.16",
+    "clsx": "^2.1.1",
+    "concurrently": "^9.1.0",
+    "jsdom": "^24.0.0",
+    "ng-packagr": "^19.0.0",
+    "postcss": "^8.4.31",
+    "reflect-metadata": "^0.2.2",
+    "rimraf": "^6.0.1",
+    "rxjs": "^7.8.1",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss": "^4.0.8",
+    "tslib": "^2.8.1",
+    "tw-animate-css": "^1.3.5",
+    "typescript": "~5.8.2",
+    "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"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/CopilotKit/CopilotKit.git",
+    "directory": "packages/angular"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "ng-packagr -p ng-package.json && npm run build:css",
+    "build:css": "npx @tailwindcss/cli -i ./src/styles/globals.css -o ./dist/styles.css",
+    "dev": "concurrently \"ng-packagr -p ng-package.json --watch\" \"npm run dev:css\"",
+    "dev:css": "npx @tailwindcss/cli -i ./src/styles/globals.css -o ./dist/styles.css --watch",
+    "clean": "rimraf dist",
+    "lint": "eslint src --ext .ts",
+    "check-types": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest --watch"
+  }
+}

package/slots.md

@@ -0,0 +1,331 @@
+# 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