@copilotkitnext/angular 0.0.2 → 0.0.4

package/src/components/chat/copilot-chat-tool-calls-view.component.ts

@@ -1,261 +0,0 @@
-import {
-  Component,
-  Input,
-  ViewContainerRef,
-  ComponentRef,
-  inject,
-  ViewChild,
-  AfterViewInit,
-  OnChanges,
-  SimpleChanges,
-  TemplateRef,
-  Type,
-  ChangeDetectionStrategy,
-  signal,
-  computed,
-  OnDestroy,
-} from "@angular/core";
-import { CommonModule } from "@angular/common";
-import type {
-  AssistantMessage,
-  Message,
-  ToolCall,
-  ToolMessage,
-} from "@ag-ui/core";
-import { ToolCallStatus } from "@copilotkitnext/core";
-import { CopilotKitService } from "../../core/copilotkit.service";
-import { partialJSONParse } from "@copilotkitnext/shared";
-import type {
-  ToolCallProps,
-  ToolCallRender,
-} from "../../core/copilotkit.types";
-
-/**
- * Component for rendering all tool calls for an assistant message.
- * This component iterates through the message's tool calls and renders each one
- * using the registered render functions in CopilotKitService.
- */
-@Component({
-  selector: "copilot-chat-tool-calls-view",
-  standalone: true,
-  imports: [CommonModule],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    @for (toolCall of message?.toolCalls ?? []; track toolCall.id) {
-      <ng-container>
-        <ng-container #dynamicContainer></ng-container>
-        <ng-container *ngIf="getTemplateForToolCall(toolCall) as templateData">
-          <ng-container
-            *ngTemplateOutlet="
-              templateData.template;
-              context: templateData.context
-            "
-          ></ng-container>
-        </ng-container>
-      </ng-container>
-    }
-  `,
-})
-export class CopilotChatToolCallsViewComponent
-  implements AfterViewInit, OnChanges, OnDestroy
-{
-  @Input({ required: true }) message!: AssistantMessage;
-  @Input() messages: Message[] = [];
-  @Input() isLoading = false;
-
-  @ViewChild("dynamicContainer", { read: ViewContainerRef })
-  private container?: ViewContainerRef;
-
-  private copilotkit: CopilotKitService | null = inject(CopilotKitService, {
-    optional: true,
-  });
-  private componentRefs: Map<string, ComponentRef<any>> = new Map();
-  private templateCache: Map<
-    string,
-    { template: TemplateRef<any>; context: any }
-  > = new Map();
-
-  // Signals for reactive state
-  private messageSignal = signal<AssistantMessage | null>(null);
-  private messagesSignal = signal<Message[]>([]);
-  private isLoadingSignal = signal(false);
-
-  ngAfterViewInit(): void {
-    this.renderAllToolCalls();
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes["message"]) {
-      this.messageSignal.set(this.message);
-    }
-    if (changes["messages"]) {
-      this.messagesSignal.set(this.messages);
-    }
-    if (changes["isLoading"]) {
-      this.isLoadingSignal.set(this.isLoading);
-    }
-
-    this.renderAllToolCalls();
-  }
-
-  ngOnDestroy(): void {
-    // Clean up all component refs
-    this.componentRefs.forEach((ref) => ref.destroy());
-    this.componentRefs.clear();
-    this.templateCache.clear();
-  }
-
-  getTemplateForToolCall(
-    toolCall: ToolCall
-  ): { template: TemplateRef<any>; context: any } | null {
-    return this.templateCache.get(toolCall.id) || null;
-  }
-
-  private renderAllToolCalls(): void {
-    const message = this.messageSignal();
-    if (!message || !message.toolCalls || message.toolCalls.length === 0) {
-      return;
-    }
-
-    // Clear existing renders
-    this.componentRefs.forEach((ref) => ref.destroy());
-    this.componentRefs.clear();
-    this.templateCache.clear();
-
-    if (!this.copilotkit || !this.container) {
-      return;
-    }
-
-    const messages = this.messagesSignal();
-    const isLoading = this.isLoadingSignal();
-
-    // Render each tool call
-    message.toolCalls.forEach((toolCall) => {
-      const toolMessage = messages.find(
-        (m) =>
-          m.role === "tool" && (m as ToolMessage).toolCallId === toolCall.id
-      ) as ToolMessage | undefined;
-
-      this.renderSingleToolCall(toolCall, toolMessage, isLoading);
-    });
-  }
-
-  private renderSingleToolCall(
-    toolCall: ToolCall,
-    toolMessage: ToolMessage | undefined,
-    isLoading: boolean
-  ): void {
-    if (!this.copilotkit) {
-      return;
-    }
-
-    // Get current render tool calls
-    const currentRenderToolCalls = this.copilotkit.currentRenderToolCalls();
-
-    // Find the render config for this tool call by name
-    // Also check for wildcard (*) renders if no exact match
-    const renderConfig =
-      currentRenderToolCalls.find(
-        (rc: ToolCallRender) => rc.name === toolCall.function.name
-      ) || currentRenderToolCalls.find((rc: ToolCallRender) => rc.name === "*");
-
-    if (!renderConfig) {
-      return;
-    }
-
-    // Parse the arguments if they're a string
-    const args = partialJSONParse(toolCall.function.arguments);
-
-    // Determine status
-    let status: ToolCallStatus;
-    if (toolMessage) {
-      status = ToolCallStatus.Complete;
-    } else if (isLoading) {
-      status = ToolCallStatus.InProgress;
-    } else {
-      status = ToolCallStatus.Complete;
-    }
-
-    // Create props based on status - use discriminated union properly
-    let props: ToolCallProps;
-    if (status === ToolCallStatus.InProgress) {
-      props = {
-        name: toolCall.function.name,
-        description: "",
-        args: args, // Partial args for InProgress
-        status: ToolCallStatus.InProgress,
-        result: undefined,
-      };
-    } else {
-      // Complete status
-      props = {
-        name: toolCall.function.name,
-        description: "",
-        args: args, // Full args for Complete
-        status: ToolCallStatus.Complete,
-        result: toolMessage?.content || "",
-      };
-    }
-
-    // Check if render is a Component class or TemplateRef
-    if (this.isComponentClass(renderConfig.render)) {
-      // Create component dynamically
-      this.renderComponent(toolCall.id, renderConfig.render, props);
-    } else if (this.isTemplateRef(renderConfig.render)) {
-      // Use template
-      this.renderTemplate(toolCall.id, renderConfig.render, props);
-    }
-  }
-
-  private renderComponent(
-    toolCallId: string,
-    componentClass: Type<any>,
-    props: ToolCallProps
-  ): void {
-    if (!this.container) {
-      return;
-    }
-
-    // Create the component
-    const componentRef = this.container.createComponent(componentClass);
-    this.componentRefs.set(toolCallId, componentRef);
-
-    // Set inputs on the component
-    for (const [key, value] of Object.entries(props)) {
-      try {
-        componentRef.setInput(key, value);
-      } catch (e) {
-        // Input might not exist on the component, which is fine
-      }
-    }
-
-    // Trigger change detection
-    componentRef.changeDetectorRef.detectChanges();
-  }
-
-  private renderTemplate(
-    toolCallId: string,
-    template: TemplateRef<any>,
-    props: ToolCallProps
-  ): void {
-    this.templateCache.set(toolCallId, {
-      template,
-      context: {
-        $implicit: props,
-        name: props.name,
-        description: props.description,
-        args: props.args,
-        status: props.status,
-        result: props.result,
-      },
-    });
-  }
-
-  private isComponentClass(value: any): value is Type<any> {
-    return typeof value === "function" && value.prototype;
-  }
-
-  private isTemplateRef(value: any): value is TemplateRef<any> {
-    return value instanceof TemplateRef;
-  }
-}

package/src/components/chat/copilot-chat-toolbar.component.ts

@@ -1,35 +0,0 @@
-import {
-  Component,
-  Input,
-  signal,
-  computed,
-  ChangeDetectionStrategy,
-  ViewEncapsulation
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { cn } from '../../lib/utils';
-
-@Component({
-  selector: 'div[copilotChatToolbar]',
-  standalone: true,
-  imports: [CommonModule],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  host: {
-    '[class]': 'computedClass()'
-  },
-  template: `<ng-content></ng-content>`,
-  styles: []
-})
-export class CopilotChatToolbarComponent {
-  @Input() set inputClass(val: string | undefined) {
-    this.customClass.set(val);
-  }
-  
-  customClass = signal<string | undefined>(undefined);
-  
-  computedClass = computed(() => {
-    const baseClasses = 'w-full h-[60px] bg-transparent flex items-center justify-between';
-    return cn(baseClasses, this.customClass());
-  });
-}

package/src/components/chat/copilot-chat-tools-menu.component.ts

@@ -1,185 +0,0 @@
-import {
-  Component,
-  Input,
-  signal,
-  computed,
-  inject,
-  ChangeDetectionStrategy,
-  ViewEncapsulation
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { CdkMenuModule } from '@angular/cdk/menu';
-import { OverlayModule } from '@angular/cdk/overlay';
-import { LucideAngularModule, Settings2, ChevronRight } from 'lucide-angular';
-import { CopilotChatConfigurationService } from '../../core/chat-configuration/chat-configuration.service';
-import type { ToolsMenuItem } from './copilot-chat-input.types';
-import { cn } from '../../lib/utils';
-
-@Component({
-  selector: 'copilot-chat-tools-menu',
-  standalone: true,
-  imports: [
-    CommonModule,
-    CdkMenuModule,
-    OverlayModule,
-    LucideAngularModule
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  template: `
-    @if (hasItems()) {
-      <button
-        type="button"
-        [disabled]="disabled()"
-        [class]="buttonClass()"
-        [cdkMenuTriggerFor]="menu"
-      >
-        <lucide-angular [img]="Settings2Icon" [size]="18"></lucide-angular>
-        <span class="text-sm font-normal">{{ label() }}</span>
-      </button>
-      
-      <ng-template #menu>
-        <div class="min-w-[200px] bg-white dark:bg-[#1F1F1F] border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-1"
-             cdkMenu>
-          @for (item of toolsMenu(); track $index) {
-            @if (item === '-') {
-              <div class="h-px bg-gray-200 dark:bg-gray-700 my-1"></div>
-            } @else if (isMenuItem(item)) {
-              @if (item.items && item.items.length > 0) {
-                <!-- Submenu trigger -->
-                <button
-                  type="button"
-                  class="w-full px-3 py-2 text-left bg-transparent border-none rounded hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer text-sm flex items-center justify-between"
-                  [cdkMenuTriggerFor]="submenu"
-                  cdkMenuItem
-                >
-                  {{ item.label }}
-                  <lucide-angular [img]="ChevronRightIcon" [size]="12" class="ml-auto"></lucide-angular>
-                </button>
-                
-                <!-- Submenu template -->
-                <ng-template #submenu>
-                  <div class="min-w-[200px] bg-white dark:bg-[#1F1F1F] border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-1"
-                       cdkMenu>
-                    @for (subItem of item.items; track $index) {
-                      @if (subItem === '-') {
-                        <div class="h-px bg-gray-200 dark:bg-gray-700 my-1"></div>
-                      } @else if (isMenuItem(subItem)) {
-                        <button
-                          type="button"
-                          class="w-full px-3 py-2 text-left bg-transparent border-none rounded hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer text-sm"
-                          (click)="handleItemClick(subItem)"
-                          cdkMenuItem
-                        >
-                          {{ subItem.label }}
-                        </button>
-                      }
-                    }
-                  </div>
-                </ng-template>
-              } @else {
-                <!-- Regular menu item -->
-                <button
-                  type="button"
-                  class="w-full px-3 py-2 text-left bg-transparent border-none rounded hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer text-sm"
-                  (click)="handleItemClick(item)"
-                  cdkMenuItem
-                >
-                  {{ item.label }}
-                </button>
-              }
-            }
-          }
-        </div>
-      </ng-template>
-    }
-  `,
-  styles: [`
-    /* CDK Overlay styles for positioning */
-    .cdk-overlay-pane {
-      position: absolute;
-      pointer-events: auto;
-      z-index: 1000;
-    }
-    
-    /* Ensure menu appears above other content */
-    .cdk-overlay-container {
-      position: fixed;
-      z-index: 1000;
-    }
-    
-    /* Menu animation */
-    [cdkMenu] {
-      animation: menuFadeIn 0.15s ease-out;
-    }
-    
-    @keyframes menuFadeIn {
-      from {
-        opacity: 0;
-        transform: translateY(4px);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0);
-      }
-    }
-  `]
-})
-export class CopilotChatToolsMenuComponent {
-  readonly Settings2Icon = Settings2;
-  readonly ChevronRightIcon = ChevronRight;
-  
-  @Input() set inputToolsMenu(val: (ToolsMenuItem | '-')[] | undefined) {
-    this.toolsMenu.set(val || []);
-  }
-  @Input() set inputDisabled(val: boolean | undefined) {
-    this.disabled.set(val || false);
-  }
-  @Input() set inputClass(val: string | undefined) {
-    this.customClass.set(val);
-  }
-  
-  private chatConfig = inject(CopilotChatConfigurationService);
-  
-  toolsMenu = signal<(ToolsMenuItem | '-')[]>([]);
-  disabled = signal<boolean>(false);
-  customClass = signal<string | undefined>(undefined);
-  
-  hasItems = computed(() => this.toolsMenu().length > 0);
-  
-  label = computed(() => this.chatConfig.labels().chatInputToolbarToolsButtonLabel);
-  
-  buttonClass = computed(() => {
-    const baseClasses = cn(
-      // Base button styles
-      'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm font-medium',
-      'transition-all disabled:pointer-events-none disabled:opacity-50',
-      'shrink-0 outline-none',
-      'focus-visible:ring-[3px]',
-      // chatInputToolbarSecondary variant
-      'cursor-pointer',
-      'bg-transparent text-[#444444]',
-      'dark:text-white dark:border-[#404040]',
-      'transition-colors',
-      'focus:outline-none',
-      'hover:bg-[#f8f8f8] hover:text-[#333333]',
-      'dark:hover:bg-[#404040] dark:hover:text-[#FFFFFF]',
-      'disabled:cursor-not-allowed disabled:opacity-50',
-      'disabled:hover:bg-transparent disabled:hover:text-[#444444]',
-      'dark:disabled:hover:bg-transparent dark:disabled:hover:text-[#CCCCCC]',
-      // Size
-      'h-9 px-3 gap-2 font-normal'
-    );
-    return cn(baseClasses, this.customClass());
-  });
-  
-  isMenuItem(item: any): item is ToolsMenuItem {
-    return item && typeof item === 'object' && 'label' in item;
-  }
-  
-  handleItemClick(item: ToolsMenuItem): void {
-    if (item.action) {
-      item.action();
-    }
-  }
-}

package/src/components/chat/copilot-chat-user-message-branch-navigation.component.ts

@@ -1,121 +0,0 @@
-import {
-  Component,
-  Input,
-  Output,
-  EventEmitter,
-  ChangeDetectionStrategy,
-  ViewEncapsulation,
-  computed,
-  signal
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { LucideAngularModule, ChevronLeft, ChevronRight } from 'lucide-angular';
-import { 
-  type UserMessage,
-  type CopilotChatUserMessageOnSwitchToBranchProps 
-} from './copilot-chat-user-message.types';
-import { cn } from '../../lib/utils';
-
-@Component({
-  selector: 'copilot-chat-user-message-branch-navigation',
-  standalone: true,
-  imports: [CommonModule, LucideAngularModule],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  template: `
-    @if (showNavigation()) {
-      <div [class]="computedClass()">
-        <button
-          type="button"
-          [class]="buttonClass"
-          [disabled]="!canGoPrev()"
-          (click)="handlePrevious()">
-          <lucide-angular [img]="ChevronLeftIcon" [size]="20"></lucide-angular>
-        </button>
-        <span class="text-sm text-muted-foreground px-0 font-medium">
-          {{ currentBranchSignal() + 1 }}/{{ numberOfBranchesSignal() }}
-        </span>
-        <button
-          type="button"
-          [class]="buttonClass"
-          [disabled]="!canGoNext()"
-          (click)="handleNext()">
-          <lucide-angular [img]="ChevronRightIcon" [size]="20"></lucide-angular>
-        </button>
-      </div>
-    }
-  `
-})
-export class CopilotChatUserMessageBranchNavigationComponent {
-  @Input() set currentBranch(val: number) {
-    this.currentBranchSignal.set(val);
-  }
-  @Input() set numberOfBranches(val: number) {
-    this.numberOfBranchesSignal.set(val);
-  }
-  @Input() message!: UserMessage;
-  @Input() inputClass?: string;
-  @Output() switchToBranch = new EventEmitter<CopilotChatUserMessageOnSwitchToBranchProps>();
-  
-  readonly ChevronLeftIcon = ChevronLeft;
-  readonly ChevronRightIcon = ChevronRight;
-  
-  currentBranchSignal = signal(0);
-  numberOfBranchesSignal = signal(1);
-  
-  readonly buttonClass = cn(
-    // Flex centering
-    'inline-flex items-center justify-center',
-    // Cursor
-    'cursor-pointer',
-    // Background and text
-    'p-0 text-[rgb(93,93,93)] hover:bg-[#E8E8E8]',
-    // Dark mode
-    'dark:text-[rgb(243,243,243)] dark:hover:bg-[#303030]',
-    // Shape and sizing
-    'h-6 w-6 rounded-md',
-    // Interactions
-    'transition-colors',
-    // Disabled state
-    'disabled:opacity-50 disabled:cursor-not-allowed'
-  );
-  
-  showNavigation = computed(() => {
-    const branches = this.numberOfBranchesSignal();
-    return branches > 1;
-  });
-  
-  canGoPrev = computed(() => {
-    return this.currentBranchSignal() > 0;
-  });
-  
-  canGoNext = computed(() => {
-    return this.currentBranchSignal() < this.numberOfBranchesSignal() - 1;
-  });
-  
-  computedClass = computed(() => {
-    return cn('flex items-center gap-1', this.inputClass);
-  });
-  
-  handlePrevious(): void {
-    if (this.canGoPrev()) {
-      const newIndex = this.currentBranchSignal() - 1;
-      this.switchToBranch.emit({
-        branchIndex: newIndex,
-        numberOfBranches: this.numberOfBranchesSignal(),
-        message: this.message
-      });
-    }
-  }
-  
-  handleNext(): void {
-    if (this.canGoNext()) {
-      const newIndex = this.currentBranchSignal() + 1;
-      this.switchToBranch.emit({
-        branchIndex: newIndex,
-        numberOfBranches: this.numberOfBranchesSignal(),
-        message: this.message
-      });
-    }
-  }
-}