1import {
2  ChangeDetectionStrategy,
3  Component,
4  ViewEncapsulation,
5} from "@angular/core";
6import { FeatureHeaderComponent } from "./feature-header.component";
7import { ShowcaseChatHostComponent } from "./showcase-chat-host.component";
8
9@Component({
10  selector: "showcase-chat-css-feature",
11  imports: [ShowcaseChatHostComponent, FeatureHeaderComponent],
12  changeDetection: ChangeDetectionStrategy.OnPush,
13  encapsulation: ViewEncapsulation.None,
14  host: { class: "feature-page chat-css-demo-scope" },
15  template: `
16    <showcase-feature-header />
17    <main class="chat-surface" [attr.aria-label]="demoLabel">
18      <showcase-chat-host />
19    </main>
20  `,
21  styles: `
22    .chat-css-demo-scope .copilotKitUserMessage {
23      color: #fff;
24      background: rgb(255, 0, 110);
25      border-radius: 0.75rem;
26    }
27
28    .chat-css-demo-scope .copilotKitAssistantMessage {
29      padding: 0.75rem;
30      color: #3f2d00;
31      background: rgb(253, 224, 71);
32      border-radius: 0.75rem;
33    }
34  `,
35})
36export class ChatCssFeatureComponent {
37  protected readonly demoLabel = "CSS-customized CopilotKit chat";
38}
39