|
| 1 | +// libs/chat/src/lib/primitives/chat-message-actions/chat-message-actions.component.ts |
| 2 | +// SPDX-License-Identifier: MIT |
| 3 | +import { Component, ChangeDetectionStrategy, input, output, signal, inject, DOCUMENT } from '@angular/core'; |
| 4 | +import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens'; |
| 5 | +import { CHAT_MESSAGE_ACTIONS_STYLES } from '../../styles/chat-message-actions.styles'; |
| 6 | + |
| 7 | +/** |
| 8 | + * Default action buttons that appear under each assistant message: |
| 9 | + * regenerate, copy-to-clipboard, thumbs up, thumbs down. |
| 10 | + * |
| 11 | + * Hidden by default, fades in on `:hover`/`:focus-within` of the parent |
| 12 | + * `chat-message` (and is always visible on the current/last assistant |
| 13 | + * message and on mobile). Mirrors copilotkit's AssistantMessage controls. |
| 14 | + */ |
| 15 | +@Component({ |
| 16 | + selector: 'chat-message-actions', |
| 17 | + standalone: true, |
| 18 | + changeDetection: ChangeDetectionStrategy.OnPush, |
| 19 | + styles: [CHAT_HOST_TOKENS, CHAT_MESSAGE_ACTIONS_STYLES], |
| 20 | + host: { |
| 21 | + 'role': 'toolbar', |
| 22 | + '[attr.aria-label]': '"Message actions"', |
| 23 | + }, |
| 24 | + template: ` |
| 25 | + <button |
| 26 | + type="button" |
| 27 | + class="chat-message-actions__btn" |
| 28 | + aria-label="Regenerate response" |
| 29 | + title="Regenerate" |
| 30 | + (click)="regenerate.emit()" |
| 31 | + > |
| 32 | + <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> |
| 33 | + <path d="M3 12a9 9 0 0 1 15.5-6.36L21 8" /> |
| 34 | + <path d="M21 3v5h-5" /> |
| 35 | + <path d="M21 12a9 9 0 0 1-15.5 6.36L3 16" /> |
| 36 | + <path d="M3 21v-5h5" /> |
| 37 | + </svg> |
| 38 | + </button> |
| 39 | + <button |
| 40 | + type="button" |
| 41 | + class="chat-message-actions__btn" |
| 42 | + [class.is-active]="copied()" |
| 43 | + [attr.aria-label]="copied() ? 'Copied' : 'Copy to clipboard'" |
| 44 | + [title]="copied() ? 'Copied' : 'Copy'" |
| 45 | + (click)="onCopy()" |
| 46 | + > |
| 47 | + @if (copied()) { |
| 48 | + <span class="chat-message-actions__check" aria-hidden="true">✓</span> |
| 49 | + } @else { |
| 50 | + <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> |
| 51 | + <rect x="9" y="9" width="11" height="11" rx="2" /> |
| 52 | + <path d="M5 15V5a2 2 0 0 1 2-2h10" /> |
| 53 | + </svg> |
| 54 | + } |
| 55 | + </button> |
| 56 | + <button |
| 57 | + type="button" |
| 58 | + class="chat-message-actions__btn" |
| 59 | + [class.is-active]="rating() === 'up'" |
| 60 | + aria-label="Thumbs up" |
| 61 | + title="Good response" |
| 62 | + (click)="onRate('up')" |
| 63 | + > |
| 64 | + <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> |
| 65 | + <path d="M7 11V20a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V12a1 1 0 0 1 1-1h3z" /> |
| 66 | + <path d="M7 11l4-7a2 2 0 0 1 2-2h0a2 2 0 0 1 2 2v4h5a2 2 0 0 1 2 2l-2 7a2 2 0 0 1-2 1.5H7" /> |
| 67 | + </svg> |
| 68 | + </button> |
| 69 | + <button |
| 70 | + type="button" |
| 71 | + class="chat-message-actions__btn" |
| 72 | + [class.is-active]="rating() === 'down'" |
| 73 | + aria-label="Thumbs down" |
| 74 | + title="Poor response" |
| 75 | + (click)="onRate('down')" |
| 76 | + > |
| 77 | + <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> |
| 78 | + <path d="M17 13V4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-3z" /> |
| 79 | + <path d="M17 13l-4 7a2 2 0 0 1-2 2h0a2 2 0 0 1-2-2v-4H4a2 2 0 0 1-2-2l2-7A2 2 0 0 1 6 5h11" /> |
| 80 | + </svg> |
| 81 | + </button> |
| 82 | + `, |
| 83 | +}) |
| 84 | +export class ChatMessageActionsComponent { |
| 85 | + /** Plain text content to copy. Required for the copy button to function. */ |
| 86 | + readonly content = input<string>(''); |
| 87 | + |
| 88 | + /** Emitted when the user clicks regenerate. Wire this to `agent.reload()`. */ |
| 89 | + readonly regenerate = output<void>(); |
| 90 | + /** Emitted with 'up' or 'down' when the user rates the response. */ |
| 91 | + readonly rate = output<'up' | 'down'>(); |
| 92 | + /** Emitted with the copied content after a successful clipboard write. */ |
| 93 | + readonly contentCopied = output<string>(); |
| 94 | + |
| 95 | + protected readonly copied = signal(false); |
| 96 | + protected readonly rating = signal<'up' | 'down' | null>(null); |
| 97 | + private readonly document = inject(DOCUMENT); |
| 98 | + |
| 99 | + protected async onCopy(): Promise<void> { |
| 100 | + const text = this.content(); |
| 101 | + if (!text) return; |
| 102 | + try { |
| 103 | + const win = this.document.defaultView; |
| 104 | + if (win?.navigator?.clipboard?.writeText) { |
| 105 | + await win.navigator.clipboard.writeText(text); |
| 106 | + } else { |
| 107 | + const ta = this.document.createElement('textarea'); |
| 108 | + ta.value = text; |
| 109 | + ta.style.position = 'fixed'; |
| 110 | + ta.style.opacity = '0'; |
| 111 | + this.document.body.appendChild(ta); |
| 112 | + ta.select(); |
| 113 | + this.document.execCommand?.('copy'); |
| 114 | + ta.remove(); |
| 115 | + } |
| 116 | + this.copied.set(true); |
| 117 | + this.contentCopied.emit(text); |
| 118 | + setTimeout(() => this.copied.set(false), 2000); |
| 119 | + } catch { |
| 120 | + // Silent fail — clipboard may be blocked by permissions. |
| 121 | + } |
| 122 | + } |
| 123 | + |
| 124 | + protected onRate(value: 'up' | 'down'): void { |
| 125 | + // Toggle off when clicking the same rating. |
| 126 | + this.rating.set(this.rating() === value ? null : value); |
| 127 | + this.rate.emit(value); |
| 128 | + } |
| 129 | +} |
0 commit comments