chore: import upstream snapshot with attribution

examples/v2/angular/storybook/components/custom-disclaimer.component.ts

@@ -0,0 +1,44 @@
+import { Component, Input } from "@angular/core";
+
+@Component({
+  selector: "custom-disclaimer",
+  standalone: true,
+  template: `
+    <div
+      [class]="inputClass"
+      style="
+        text-align: center;
+        padding: 20px;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        border-radius: 10px;
+        margin: 10px;
+        font-family: &quot;Segoe UI&quot;, Tahoma, Geneva, Verdana, sans-serif;
+      "
+    >
+      <h3 style="margin: 0 0 10px 0; font-size: 20px">
+        ✨ Custom Disclaimer Component ✨
+      </h3>
+      <p style="margin: 0; font-size: 14px; opacity: 0.9">
+        {{
+          text || "This is a custom disclaimer demonstrating component overrides!"
+        }}
+      </p>
+      <div
+        style="
+          margin-top: 15px;
+          padding-top: 15px;
+          border-top: 1px solid rgba(255, 255, 255, 0.3);
+          font-size: 12px;
+          opacity: 0.7;
+        "
+      >
+        🎨 Styled with custom gradients and animations
+      </div>
+    </div>
+  `,
+})
+export class CustomDisclaimerComponent {
+  @Input() text?: string;
+  @Input() inputClass?: string;
+}

examples/v2/angular/storybook/components/custom-input.component.ts

@@ -0,0 +1,68 @@
+import { Component, Input } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { FormsModule } from "@angular/forms";
+import type { ChatState } from "@copilotkit/angular";
+
+@Component({
+  selector: "custom-input",
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div
+      [class]="inputClass"
+      style="
+        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+        padding: 20px;
+        border-radius: 15px;
+        margin: 10px;
+      "
+    >
+      <input
+        type="text"
+        [(ngModel)]="inputValue"
+        placeholder="💬 Ask me anything..."
+        style="
+          width: 100%;
+          padding: 15px;
+          border: 2px solid white;
+          border-radius: 10px;
+          font-size: 16px;
+          background: rgba(255, 255, 255, 0.9);
+          color: #333;
+          outline: none;
+        "
+        (keyup.enter)="handleSend()"
+      />
+      <button
+        style="
+          margin-top: 10px;
+          padding: 10px 20px;
+          background: white;
+          color: #f5576c;
+          border: none;
+          border-radius: 5px;
+          font-weight: bold;
+          cursor: pointer;
+        "
+        (click)="handleSend()"
+      >
+        Send Message ✨
+      </button>
+    </div>
+  `,
+})
+export class CustomInputComponent {
+  @Input() inputClass?: string;
+
+  inputValue = "";
+
+  constructor(private chat: ChatState) {}
+
+  handleSend() {
+    const value = this.inputValue.trim();
+    if (value) {
+      this.chat.submitInput(value);
+      this.inputValue = "";
+    }
+  }
+}

examples/v2/angular/storybook/components/custom-scroll-button.component.ts

@@ -0,0 +1,62 @@
+import { Component, Input, Output, EventEmitter } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+@Component({
+  selector: "custom-scroll-button",
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <button
+      type="button"
+      (click)="handleClick()"
+      [class]="inputClass"
+      [class.hover]="isHovered"
+      (mouseenter)="isHovered = true"
+      (mouseleave)="isHovered = false"
+      style="
+        position: fixed;
+        bottom: 100px;
+        right: 20px;
+        width: 60px;
+        height: 60px;
+        border-radius: 50%;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border: 3px solid white;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+        cursor: pointer;
+        pointer-events: auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: transform 0.2s;
+        z-index: 1000;
+      "
+      [style.transform]="isHovered ? 'scale(1.1)' : 'scale(1)'"
+    >
+      <span style="color: white; font-size: 24px; pointer-events: none">⬇️</span>
+    </button>
+  `,
+  styles: [
+    `
+      button.hover {
+        transform: scale(1.1);
+      }
+    `,
+  ],
+})
+export class CustomScrollButtonComponent {
+  @Input() onClick?: () => void;
+  @Input() inputClass?: string;
+  @Output() clicked = new EventEmitter<void>();
+
+  isHovered = false;
+
+  handleClick() {
+    // Emit the clicked event for the slot system to handle
+    this.clicked.emit();
+    // Also call onClick if provided for backward compatibility
+    if (this.onClick) {
+      this.onClick();
+    }
+  }
+}

examples/v2/angular/storybook/components/custom-send-button.component.ts

@@ -0,0 +1,27 @@
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+@Component({
+  selector: "custom-send-button",
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <button
+      [disabled]="disabled"
+      (click)="handleClick()"
+      class="cpk:rounded-full cpk:w-10 cpk:h-10 cpk:bg-blue-500 cpk:text-white cpk:hover:bg-blue-600 cpk:transition-colors cpk:mr-2 cpk:disabled:opacity-50 cpk:disabled:cursor-not-allowed"
+    >
+      ✈️
+    </button>
+  `,
+})
+export class CustomSendButtonComponent {
+  @Input() disabled = false;
+  @Output() clicked = new EventEmitter<void>();
+
+  handleClick(): void {
+    if (!this.disabled) {
+      this.clicked.emit();
+    }
+  }
+}