@@ -10,6 +10,7 @@ import {
1010 ModalContent ,
1111 ModalFooter ,
1212 ModalHeader ,
13+ TagIcon ,
1314 Textarea ,
1415 ThumbsDown ,
1516 ThumbsUp ,
@@ -46,20 +47,26 @@ interface MessageActionsProps {
4647 content : string
4748 chatId ?: string
4849 userQuery ?: string
50+ requestId ?: string
4951}
5052
51- export function MessageActions ( { content, chatId, userQuery } : MessageActionsProps ) {
53+ export function MessageActions ( { content, chatId, userQuery, requestId } : MessageActionsProps ) {
5254 const [ copied , setCopied ] = useState ( false )
55+ const [ copiedRequestId , setCopiedRequestId ] = useState ( false )
5356 const [ pendingFeedback , setPendingFeedback ] = useState < 'up' | 'down' | null > ( null )
5457 const [ feedbackText , setFeedbackText ] = useState ( '' )
5558 const resetTimeoutRef = useRef < number | null > ( null )
59+ const requestIdTimeoutRef = useRef < number | null > ( null )
5660 const submitFeedback = useSubmitCopilotFeedback ( )
5761
5862 useEffect ( ( ) => {
5963 return ( ) => {
6064 if ( resetTimeoutRef . current !== null ) {
6165 window . clearTimeout ( resetTimeoutRef . current )
6266 }
67+ if ( requestIdTimeoutRef . current !== null ) {
68+ window . clearTimeout ( requestIdTimeoutRef . current )
69+ }
6370 }
6471 } , [ ] )
6572
@@ -79,6 +86,20 @@ export function MessageActions({ content, chatId, userQuery }: MessageActionsPro
7986 }
8087 } , [ content ] )
8188
89+ const copyRequestId = useCallback ( async ( ) => {
90+ if ( ! requestId ) return
91+ try {
92+ await navigator . clipboard . writeText ( requestId )
93+ setCopiedRequestId ( true )
94+ if ( requestIdTimeoutRef . current !== null ) {
95+ window . clearTimeout ( requestIdTimeoutRef . current )
96+ }
97+ requestIdTimeoutRef . current = window . setTimeout ( ( ) => setCopiedRequestId ( false ) , 1500 )
98+ } catch {
99+ /* clipboard unavailable */
100+ }
101+ } , [ requestId ] )
102+
82103 const handleFeedbackClick = useCallback (
83104 ( type : 'up' | 'down' ) => {
84105 if ( chatId && userQuery ) {
@@ -144,6 +165,21 @@ export function MessageActions({ content, chatId, userQuery }: MessageActionsPro
144165 >
145166 < ThumbsDown className = { ICON_CLASS } />
146167 </ button >
168+ { requestId && (
169+ < button
170+ type = 'button'
171+ aria-label = 'Copy request ID'
172+ onClick = { copyRequestId }
173+ className = { BUTTON_CLASS }
174+ title = { copiedRequestId ? 'Copied!' : 'Copy request ID' }
175+ >
176+ { copiedRequestId ? (
177+ < Check className = { ICON_CLASS } />
178+ ) : (
179+ < TagIcon className = { ICON_CLASS } />
180+ ) }
181+ </ button >
182+ ) }
147183 </ div >
148184
149185 < Modal open = { pendingFeedback !== null } onOpenChange = { handleModalClose } >
0 commit comments