MessageActions
GPT-5식 어시스턴트 메시지 액션바 — 복사·좋아요·싫어요·읽어주기·다시 생성을 ghost 아이콘으로. 콜백(또는 copyText)이 주어진 동작만 노출, 복사는 클립보드+체크 내장.
마지막 업데이트 2026-06-25
한눈에#
어시스턴트 메시지 아래 붙는 액션바입니다. 복사·좋아요·싫어요·읽어주기·다시 생성을 ghost 아이콘 버튼 한 줄로 놓습니다. 각 버튼은 해당 콜백(또는 copyText)이 주어질 때만 렌더해 — 필요한 동작만 노출합니다.
버튼을 누르면 동작이 표시됩니다 — 복사는 클립보드에 실제로 씁니다(체크 피드백).
- 복사·좋아요·싫어요·읽어주기·다시 생성
- 주어진 콜백만 노출
- 복사 = 클립보드 + 1.5초 체크 내장
- ghost 아이콘 + role=group
버튼을 누르면 마지막 동작이 표시됩니다 — 복사는 실제로 클립보드에 씁니다
사용 시점#
ChatMessage(assistant)의 actions 슬롯에 넣는 표준 액션바입니다. 입력창의 전송·첨부 같은 컴포저 액션이 아니라, 생성된 답변에 대한 후속 동작입니다.
권장 — 이렇게 쓰세요
지양 — 이러지 마세요
버튼을 누르면 동작이 표시됩니다 — 복사는 클립보드에 실제로 씁니다(체크 피드백).
쓴다 — 어시스턴트 답변 하단 — 복사·피드백·재생성
컴포저 액션 아님 — 입력창의 전송·첨부·음성은 ComposerBar 슬롯
해부#
주어진 prop에 따라 버튼이 켜집니다 — 5개를 다 줄 필요 없이 필요한 것만.
| 버튼 | prop | 동작 |
|---|---|---|
| 복사 | copyText | 클립보드 쓰기 + 1.5초 체크 피드백(내부 처리, 거부 시 무시) |
| 좋아요 | onLike | 콜백 호출 |
| 싫어요 | onDislike | 콜백 호출 |
| 읽어주기 | onReadAloud | 콜백 호출(TTS 연결은 소비자 책임) |
| 다시 생성 | onRegenerate | 콜백 호출(재요청은 소비자 책임) |
API#
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
copyText | string | — | 복사할 원문 — 주면 복사 버튼 노출(클립보드 + 체크 피드백). |
onLike | () => void | — | 좋아요 콜백 — 주면 좋아요 버튼 노출. |
onDislike | () => void | — | 싫어요 콜백 — 주면 싫어요 버튼 노출. |
onReadAloud | () => void | — | 읽어주기 콜백 — 주면 읽어주기 버튼 노출. |
onRegenerate | () => void | — | 다시 생성 콜백 — 주면 다시 생성 버튼 노출. |
className | string | — | 추가 클래스. |
접근성#
| 계약 | 구현 |
|---|---|
| 그룹 | role="group" + aria-label="메시지 작업" — 관련 버튼을 한 묶음으로 |
| 버튼 이름 | 각 IconButton에 aria-label 내장(복사 시 “복사”→“복사됨”으로 전환) |
| 복사 피드백 | 시각 = 체크 아이콘 + 이름 변경(보조기술도 인지) |
| 키보드 | IconButton 표준 — Tab 이동·Enter/Space 실행 |