diff --git a/CHANGELOG.md b/CHANGELOG.md index 708389c221..8cf2fc6f59 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -85,7 +85,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/ - Added support of [contentless activity in livestream](https://github.com/microsoft/BotFramework-WebChat/blob/main/docs/LIVESTREAMING.md#scenario-3-interim-activities-with-no-content), in PR [#5430](https://github.com/microsoft/BotFramework-WebChat/pull/5430), by [@compulim](https://github.com/compulim) - Added sliding dots typing indicator in Fluent theme, in PR [#5447](https://github.com/microsoft/BotFramework-WebChat/pull/5447) and PR [#5448](https://github.com/microsoft/BotFramework-WebChat/pull/5448), by [@compulim](https://github.com/compulim) - (Experimental) Add an ability to pass `completion` prop into Fluent send box and expose the component, in PR [#5466](https://github.com/microsoft/BotFramework-WebChat/pull/5466), by [@OEvgeny](https://github.com/OEvgeny) -- Added feedback form for like/dislike button when `feedbackActionsPlacement` is `"activity-actions"`, in PR [#5460](https://github.com/microsoft/BotFramework-WebChat/pull/5460) and in PR [#5469](https://github.com/microsoft/BotFramework-WebChat/pull/5469), by [@lexi-taylor](https://github.com/lexi-taylor) and [@OEvgeny](https://github.com/OEvgeny) +- Added feedback form for like/dislike button when `feedbackActionsPlacement` is `"activity-actions"`, in PR [#5460](https://github.com/microsoft/BotFramework-WebChat/pull/5460), PR [#5469](https://github.com/microsoft/BotFramework-WebChat/pull/5469), and PR [5470](https://github.com/microsoft/BotFramework-WebChat/pull/5470) by [@lexi-taylor](https://github.com/lexi-taylor) and [@OEvgeny](https://github.com/OEvgeny) ### Changed diff --git a/__tests__/__image_snapshots__/html/feedback-activity-status-basic-js-vote-button-should-display-2-snap.png b/__tests__/__image_snapshots__/html/feedback-activity-status-basic-js-vote-button-should-display-2-snap.png index ee7e2e51cd..774267ef27 100644 Binary files a/__tests__/__image_snapshots__/html/feedback-activity-status-basic-js-vote-button-should-display-2-snap.png and b/__tests__/__image_snapshots__/html/feedback-activity-status-basic-js-vote-button-should-display-2-snap.png differ diff --git a/__tests__/__image_snapshots__/html/feedback-activity-status-basic-js-vote-button-should-display-3-snap.png b/__tests__/__image_snapshots__/html/feedback-activity-status-basic-js-vote-button-should-display-3-snap.png index e8cb410c80..c2fad81446 100644 Binary files a/__tests__/__image_snapshots__/html/feedback-activity-status-basic-js-vote-button-should-display-3-snap.png and b/__tests__/__image_snapshots__/html/feedback-activity-status-basic-js-vote-button-should-display-3-snap.png differ diff --git a/__tests__/__image_snapshots__/html/feedback-activity-status-basic-js-vote-button-should-display-4-snap.png b/__tests__/__image_snapshots__/html/feedback-activity-status-basic-js-vote-button-should-display-4-snap.png index 8e34c396f8..235ed230ef 100644 Binary files a/__tests__/__image_snapshots__/html/feedback-activity-status-basic-js-vote-button-should-display-4-snap.png and b/__tests__/__image_snapshots__/html/feedback-activity-status-basic-js-vote-button-should-display-4-snap.png differ diff --git a/__tests__/__image_snapshots__/html/feedback-activity-status-click-js-vote-button-should-send-event-on-click-2-snap.png b/__tests__/__image_snapshots__/html/feedback-activity-status-click-js-vote-button-should-send-event-on-click-2-snap.png index 1c8de0f423..743997bb35 100644 Binary files a/__tests__/__image_snapshots__/html/feedback-activity-status-click-js-vote-button-should-send-event-on-click-2-snap.png and b/__tests__/__image_snapshots__/html/feedback-activity-status-click-js-vote-button-should-send-event-on-click-2-snap.png differ diff --git a/__tests__/__image_snapshots__/html/feedback-activity-status-click-js-vote-button-should-send-event-on-click-3-snap.png b/__tests__/__image_snapshots__/html/feedback-activity-status-click-js-vote-button-should-send-event-on-click-3-snap.png index c5724814f6..05e3c87eb9 100644 Binary files a/__tests__/__image_snapshots__/html/feedback-activity-status-click-js-vote-button-should-send-event-on-click-3-snap.png and b/__tests__/__image_snapshots__/html/feedback-activity-status-click-js-vote-button-should-send-event-on-click-3-snap.png differ diff --git a/__tests__/__image_snapshots__/html/feedback-activity-status-click-js-vote-button-should-send-event-on-click-4-snap.png b/__tests__/__image_snapshots__/html/feedback-activity-status-click-js-vote-button-should-send-event-on-click-4-snap.png index c5724814f6..05e3c87eb9 100644 Binary files a/__tests__/__image_snapshots__/html/feedback-activity-status-click-js-vote-button-should-send-event-on-click-4-snap.png and b/__tests__/__image_snapshots__/html/feedback-activity-status-click-js-vote-button-should-send-event-on-click-4-snap.png differ diff --git a/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-feedback-1-snap.png b/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-feedback-1-snap.png index 41e433654b..3081e33b5d 100644 Binary files a/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-feedback-1-snap.png and b/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-feedback-1-snap.png differ diff --git a/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-feedback-2-snap.png b/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-feedback-2-snap.png index 090186e750..e2c6064fe6 100644 Binary files a/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-feedback-2-snap.png and b/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-feedback-2-snap.png differ diff --git a/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-feedback-3-snap.png b/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-feedback-3-snap.png index 20e0aaffe6..3d8f42c781 100644 Binary files a/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-feedback-3-snap.png and b/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-feedback-3-snap.png differ diff --git a/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-feedback-4-snap.png b/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-feedback-4-snap.png index 4936bb0a14..bbbe30ff3e 100644 Binary files a/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-feedback-4-snap.png and b/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-feedback-4-snap.png differ diff --git a/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-feedback-5-snap.png b/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-feedback-5-snap.png index 3e8526212e..aac31bb094 100644 Binary files a/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-feedback-5-snap.png and b/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-feedback-5-snap.png differ diff --git a/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-feedback-6-snap.png b/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-feedback-6-snap.png index 0c2216f0d5..a6b7dd4f1b 100644 Binary files a/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-feedback-6-snap.png and b/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-feedback-6-snap.png differ diff --git a/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-feedback-7-snap.png b/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-feedback-7-snap.png index 70df0319fb..dd048ebebd 100644 Binary files a/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-feedback-7-snap.png and b/__tests__/__image_snapshots__/html/side-by-side-wide-dark-js-fluent-theme-applied-dark-theme-applied-side-by-side-left-transcript-right-feedback-7-snap.png differ diff --git a/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-1-snap.png b/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-1-snap.png index b9c7eb5914..a2bbb5c017 100644 Binary files a/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-1-snap.png and b/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-1-snap.png differ diff --git a/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-2-snap.png b/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-2-snap.png index 7f3aaac38b..b43f646781 100644 Binary files a/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-2-snap.png and b/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-2-snap.png differ diff --git a/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-3-snap.png b/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-3-snap.png index fb7bb99228..27538955d3 100644 Binary files a/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-3-snap.png and b/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-3-snap.png differ diff --git a/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-4-snap.png b/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-4-snap.png index f559b23d90..0148a62862 100644 Binary files a/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-4-snap.png and b/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-4-snap.png differ diff --git a/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-5-snap.png b/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-5-snap.png index 4bb4205e9e..fc0429e73e 100644 Binary files a/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-5-snap.png and b/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-5-snap.png differ diff --git a/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-6-snap.png b/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-6-snap.png index 6e06312bd6..b59619851e 100644 Binary files a/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-6-snap.png and b/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-6-snap.png differ diff --git a/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-7-snap.png b/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-7-snap.png index 8b783bf0dd..04ff78df03 100644 Binary files a/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-7-snap.png and b/__tests__/__image_snapshots__/html/side-by-side-wide-js-fluent-theme-applied-side-by-side-left-transcript-right-feedback-7-snap.png differ diff --git a/__tests__/html/feedbackActivityStatus.basic.html b/__tests__/html/feedbackActivityStatus.basic.html index e644b57fe6..cdc4736b67 100644 --- a/__tests__/html/feedbackActivityStatus.basic.html +++ b/__tests__/html/feedbackActivityStatus.basic.html @@ -51,14 +51,26 @@ await host.sendShiftTab(3); await host.sendKeys('ENTER'); await expect(document.activeElement).toBe(buttons[0]); + + // Wait for 400 ms for the tooltip to show up. + await new Promise(resolve => setTimeout(resolve, 400)); + await host.snapshot(); await host.sendTab(); await expect(document.activeElement).toBe(buttons[1]); + + // Wait for 400 ms for the tooltip to show up. + await new Promise(resolve => setTimeout(resolve, 400)); + await host.snapshot(); await host.sendTab(); await expect(document.activeElement).toBe(buttons[0]); + + // Wait for 400 ms for the tooltip to show up. + await new Promise(resolve => setTimeout(resolve, 400)); + await host.snapshot(); }); diff --git a/__tests__/html/feedbackActivityStatus.click.html b/__tests__/html/feedbackActivityStatus.click.html index 5a0a9bf3df..36629172ef 100644 --- a/__tests__/html/feedbackActivityStatus.click.html +++ b/__tests__/html/feedbackActivityStatus.click.html @@ -1,4 +1,4 @@ - + @@ -52,6 +52,10 @@ const upvoteResult = await directLine.actPostActivity(async () => { await host.click(buttons[0]); + + // Wait for 400 ms for the tooltip to show up. + await new Promise(resolve => setTimeout(resolve, 400)); + await host.snapshot(); clock.tick(500); @@ -75,6 +79,10 @@ const downvoteResult = await directLine.actPostActivity(async () => { await host.click(buttons[1]); + + // Wait for 400 ms for the tooltip to show up. + await new Promise(resolve => setTimeout(resolve, 400)); + await host.snapshot(); clock.tick(500); @@ -99,6 +107,10 @@ const switchingResult = await directLine.actPostActivity(async () => { await host.click(buttons[0]); await host.click(buttons[1]); + + // Wait for 400 ms for the tooltip to show up. + await new Promise(resolve => setTimeout(resolve, 400)); + await host.snapshot(); clock.tick(500); diff --git a/__tests__/html2/activity/feedback.activity.dismiss.html b/__tests__/html2/activity/feedback.activity.dismiss.html index 21ff98d092..92c3f6258c 100644 --- a/__tests__/html2/activity/feedback.activity.dismiss.html +++ b/__tests__/html2/activity/feedback.activity.dismiss.html @@ -91,6 +91,10 @@ await host.sendShiftTab(3); await host.sendKeys('ENTER'); + + // Wait for 400 ms for the tooltip to show up before taking screenshot. + await new Promise(resolve => setTimeout(resolve, 400)); + await host.snapshot('local'); await host.sendKeys('ENTER'); await host.snapshot('local'); @@ -146,4 +150,4 @@ - \ No newline at end of file + diff --git a/__tests__/html2/activity/feedback.activity.dismiss.html.snap-2.png b/__tests__/html2/activity/feedback.activity.dismiss.html.snap-2.png index 1ed6a64375..9bd1a806fe 100644 Binary files a/__tests__/html2/activity/feedback.activity.dismiss.html.snap-2.png and b/__tests__/html2/activity/feedback.activity.dismiss.html.snap-2.png differ diff --git a/__tests__/html2/activity/feedback.activity.dismiss.html.snap-4.png b/__tests__/html2/activity/feedback.activity.dismiss.html.snap-4.png index dd7af6380e..fd6fbb6689 100644 Binary files a/__tests__/html2/activity/feedback.activity.dismiss.html.snap-4.png and b/__tests__/html2/activity/feedback.activity.dismiss.html.snap-4.png differ diff --git a/__tests__/html2/activity/feedback.activity.html b/__tests__/html2/activity/feedback.activity.html index f930e1baaa..c98b5787b2 100644 --- a/__tests__/html2/activity/feedback.activity.html +++ b/__tests__/html2/activity/feedback.activity.html @@ -24,13 +24,13 @@ { directLine: await testHelpers.createDirectLineWithTranscript([ { - from:{ - role: "bot" + from: { + role: 'bot' }, - id: "a-00000", + id: 'a-00000', timestamp: 0, - type: "message", - text: "This is compleded feedback action example.", + type: 'message', + text: 'This is compleded feedback action example.', entities: [ { '@context': 'https://schema.org', @@ -40,28 +40,28 @@ keywords: ['AIGeneratedContent', 'AllowCopy'], potentialAction: [ { - "@type": "LikeAction", - actionStatus: "CompletedActionStatus", - target: { - "@type": "EntryPoint", - urlTemplate: "ms-directline://postback?interaction=like" + '@type': 'LikeAction', + actionStatus: 'CompletedActionStatus', + target: { + '@type': 'EntryPoint', + urlTemplate: 'ms-directline://postback?interaction=like' } }, { - "@type": "DislikeAction", - actionStatus: "PotentialActionStatus", + '@type': 'DislikeAction', + actionStatus: 'PotentialActionStatus', result: { - "@type": "Review", + '@type': 'Review', reviewBody: "I don't like it.", - "reviewBody-input": { - "@type": "PropertyValueSpecification", + 'reviewBody-input': { + '@type': 'PropertyValueSpecification', valueMinLength: 3, - valueName: "reason" + valueName: 'reason' } }, target: { - "@type": "EntryPoint", - urlTemplate: "ms-directline://postback?interaction=dislike{&reason}" + '@type': 'EntryPoint', + urlTemplate: 'ms-directline://postback?interaction=dislike{&reason}' } } ] @@ -69,12 +69,12 @@ ] }, { - from:{ - role: "bot" + from: { + role: 'bot' }, - id: "a-00002", + id: 'a-00002', timestamp: 0, - type: "message", + type: 'message', text: "Hi! I'm *Cody*, the devbot. How can I help?", entities: [ { @@ -85,28 +85,28 @@ keywords: [], potentialAction: [ { - "@type": "LikeAction", - actionStatus: "PotentialActionStatus", - target: { - "@type": "EntryPoint", - urlTemplate: "ms-directline://postback?interaction=like" + '@type': 'LikeAction', + actionStatus: 'PotentialActionStatus', + target: { + '@type': 'EntryPoint', + urlTemplate: 'ms-directline://postback?interaction=like' } }, { - "@type": "DislikeAction", - actionStatus: "PotentialActionStatus", + '@type': 'DislikeAction', + actionStatus: 'PotentialActionStatus', result: { - "@type": "Review", + '@type': 'Review', reviewBody: "I don't like it.", - "reviewBody-input": { - "@type": "PropertyValueSpecification", + 'reviewBody-input': { + '@type': 'PropertyValueSpecification', valueMinLength: 3, - valueName: "reason" + valueName: 'reason' } }, target: { - "@type": "EntryPoint", - urlTemplate: "ms-directline://postback?interaction=dislike{&reason}" + '@type': 'EntryPoint', + urlTemplate: 'ms-directline://postback?interaction=dislike{&reason}' } } ] @@ -117,7 +117,7 @@ styleOptions: { feedbackActionsPlacement: 'activity-actions' }, - store: testHelpers.createStore(), + store: testHelpers.createStore() }, document.getElementById('webchat') ); @@ -130,6 +130,10 @@ await host.sendShiftTab(3); await host.sendKeys('ENTER'); + + // Wait for 400 ms for the tooltip to show up. + await new Promise(resolve => setTimeout(resolve, 400)); + await host.snapshot('local'); await host.sendKeys('ENTER'); await host.snapshot('local'); diff --git a/__tests__/html2/activity/feedback.activity.html.snap-1.png b/__tests__/html2/activity/feedback.activity.html.snap-1.png index 2e9fb3ec4b..67c845d8e8 100644 Binary files a/__tests__/html2/activity/feedback.activity.html.snap-1.png and b/__tests__/html2/activity/feedback.activity.html.snap-1.png differ diff --git a/__tests__/html2/activity/feedback.activity.html.snap-2.png b/__tests__/html2/activity/feedback.activity.html.snap-2.png index 89a11ad367..59396b69a4 100644 Binary files a/__tests__/html2/activity/feedback.activity.html.snap-2.png and b/__tests__/html2/activity/feedback.activity.html.snap-2.png differ diff --git a/__tests__/html2/activity/feedback.activity.html.snap-3.png b/__tests__/html2/activity/feedback.activity.html.snap-3.png index b8acaf8bcd..ae9653483b 100644 Binary files a/__tests__/html2/activity/feedback.activity.html.snap-3.png and b/__tests__/html2/activity/feedback.activity.html.snap-3.png differ diff --git a/__tests__/html2/activity/feedback.activity.html.snap-4.png b/__tests__/html2/activity/feedback.activity.html.snap-4.png index 52d564f19a..fb698d702d 100644 Binary files a/__tests__/html2/activity/feedback.activity.html.snap-4.png and b/__tests__/html2/activity/feedback.activity.html.snap-4.png differ diff --git a/__tests__/html2/activity/feedback.activity.html.snap-5.png b/__tests__/html2/activity/feedback.activity.html.snap-5.png index 157fb36c59..afb993d76b 100644 Binary files a/__tests__/html2/activity/feedback.activity.html.snap-5.png and b/__tests__/html2/activity/feedback.activity.html.snap-5.png differ diff --git a/__tests__/html2/activity/feedback.activity.html.snap-6.png b/__tests__/html2/activity/feedback.activity.html.snap-6.png deleted file mode 100644 index 166082fd9c..0000000000 Binary files a/__tests__/html2/activity/feedback.activity.html.snap-6.png and /dev/null differ diff --git a/__tests__/html2/activity/feedback.form.activity.html b/__tests__/html2/activity/feedback.form.activity.html index b722ac3b5d..5ee654daf9 100644 --- a/__tests__/html2/activity/feedback.form.activity.html +++ b/__tests__/html2/activity/feedback.form.activity.html @@ -69,8 +69,6 @@ await host.sendShiftTab(2); await host.sendKeys('ENTER'); - await host.snapshot('local'); - // Click like button await host.sendKeys('ENTER'); diff --git a/__tests__/html2/activity/feedback.form.activity.html.snap-1.png b/__tests__/html2/activity/feedback.form.activity.html.snap-1.png index f6e7ec73b9..708ad549a1 100644 Binary files a/__tests__/html2/activity/feedback.form.activity.html.snap-1.png and b/__tests__/html2/activity/feedback.form.activity.html.snap-1.png differ diff --git a/__tests__/html2/activity/feedback.form.activity.html.snap-2.png b/__tests__/html2/activity/feedback.form.activity.html.snap-2.png index d31a8f1581..a20059bfe8 100644 Binary files a/__tests__/html2/activity/feedback.form.activity.html.snap-2.png and b/__tests__/html2/activity/feedback.form.activity.html.snap-2.png differ diff --git a/__tests__/html2/activity/feedback.form.activity.html.snap-3.png b/__tests__/html2/activity/feedback.form.activity.html.snap-3.png index a20059bfe8..e13278e784 100644 Binary files a/__tests__/html2/activity/feedback.form.activity.html.snap-3.png and b/__tests__/html2/activity/feedback.form.activity.html.snap-3.png differ diff --git a/__tests__/html2/activity/feedback.form.activity.html.snap-4.png b/__tests__/html2/activity/feedback.form.activity.html.snap-4.png index d7bf2be2fc..1b6392326f 100644 Binary files a/__tests__/html2/activity/feedback.form.activity.html.snap-4.png and b/__tests__/html2/activity/feedback.form.activity.html.snap-4.png differ diff --git a/__tests__/html2/activity/feedback.form.activity.html.snap-5.png b/__tests__/html2/activity/feedback.form.activity.html.snap-5.png deleted file mode 100644 index a20059bfe8..0000000000 Binary files a/__tests__/html2/activity/feedback.form.activity.html.snap-5.png and /dev/null differ diff --git a/__tests__/html2/activity/feedback.status.html b/__tests__/html2/activity/feedback.status.html index b56f8ffaa1..4b0c3ffd87 100644 --- a/__tests__/html2/activity/feedback.status.html +++ b/__tests__/html2/activity/feedback.status.html @@ -24,13 +24,13 @@ { directLine: await testHelpers.createDirectLineWithTranscript([ { - from:{ - role: "bot" + from: { + role: 'bot' }, - id: "a-00000", + id: 'a-00000', timestamp: 0, - type: "message", - text: "This is compleded feedback action example.", + type: 'message', + text: 'This is compleded feedback action example.', entities: [ { '@context': 'https://schema.org', @@ -40,28 +40,28 @@ keywords: ['AIGeneratedContent', 'AllowCopy'], potentialAction: [ { - "@type": "LikeAction", - actionStatus: "CompletedActionStatus", - target: { - "@type": "EntryPoint", - urlTemplate: "ms-directline://postback?interaction=like" + '@type': 'LikeAction', + actionStatus: 'CompletedActionStatus', + target: { + '@type': 'EntryPoint', + urlTemplate: 'ms-directline://postback?interaction=like' } }, { - "@type": "DislikeAction", - actionStatus: "PotentialActionStatus", + '@type': 'DislikeAction', + actionStatus: 'PotentialActionStatus', result: { - "@type": "Review", + '@type': 'Review', reviewBody: "I don't like it.", - "reviewBody-input": { - "@type": "PropertyValueSpecification", + 'reviewBody-input': { + '@type': 'PropertyValueSpecification', valueMinLength: 3, - valueName: "reason" + valueName: 'reason' } }, target: { - "@type": "EntryPoint", - urlTemplate: "ms-directline://postback?interaction=dislike{&reason}" + '@type': 'EntryPoint', + urlTemplate: 'ms-directline://postback?interaction=dislike{&reason}' } } ] @@ -72,18 +72,18 @@ from: { role: 'user' }, - id: "a-00001", + id: 'a-00001', timestamp: 0, - type: "message", - text: "Test", + type: 'message', + text: 'Test' }, { - from:{ - role: "bot" + from: { + role: 'bot' }, - id: "a-00002", + id: 'a-00002', timestamp: 0, - type: "message", + type: 'message', text: "Hi! I'm *Cody*, the devbot. How can I help?", entities: [ { @@ -94,28 +94,28 @@ keywords: [], potentialAction: [ { - "@type": "LikeAction", - actionStatus: "PotentialActionStatus", - target: { - "@type": "EntryPoint", - urlTemplate: "ms-directline://postback?interaction=like" + '@type': 'LikeAction', + actionStatus: 'PotentialActionStatus', + target: { + '@type': 'EntryPoint', + urlTemplate: 'ms-directline://postback?interaction=like' } }, { - "@type": "DislikeAction", - actionStatus: "PotentialActionStatus", + '@type': 'DislikeAction', + actionStatus: 'PotentialActionStatus', result: { - "@type": "Review", + '@type': 'Review', reviewBody: "I don't like it.", - "reviewBody-input": { - "@type": "PropertyValueSpecification", + 'reviewBody-input': { + '@type': 'PropertyValueSpecification', valueMinLength: 3, - valueName: "reason" + valueName: 'reason' } }, target: { - "@type": "EntryPoint", - urlTemplate: "ms-directline://postback?interaction=dislike{&reason}" + '@type': 'EntryPoint', + urlTemplate: 'ms-directline://postback?interaction=dislike{&reason}' } } ] @@ -123,7 +123,7 @@ ] } ]), - store: testHelpers.createStore(), + store: testHelpers.createStore() }, document.getElementById('webchat') ); @@ -132,7 +132,7 @@ await host.snapshot('local'); - const [,, activityStatus] = pageElements.activityStatuses(); + const [, , activityStatus] = pageElements.activityStatuses(); const buttons = activityStatus.querySelectorAll('button'); pageElements.sendBoxTextBox().focus(); @@ -140,14 +140,26 @@ await host.sendShiftTab(3); await host.sendKeys('ENTER'); await expect(document.activeElement).toBe(buttons[0]); + + // Wait for 400 ms for the tooltip to show up. + await new Promise(resolve => setTimeout(resolve, 400)); + await host.snapshot('local'); await host.sendTab(); await expect(document.activeElement).toBe(buttons[1]); + + // Wait for 400 ms for the tooltip to show up. + await new Promise(resolve => setTimeout(resolve, 400)); + await host.snapshot('local'); await host.sendTab(); await expect(document.activeElement).toBe(buttons[0]); + + // Wait for 400 ms for the tooltip to show up. + await new Promise(resolve => setTimeout(resolve, 400)); + await host.snapshot('local'); await host.sendKeys('ENTER'); diff --git a/__tests__/html2/activity/feedback.status.html.snap-2.png b/__tests__/html2/activity/feedback.status.html.snap-2.png index dba5c262d8..64ba12a7b0 100644 Binary files a/__tests__/html2/activity/feedback.status.html.snap-2.png and b/__tests__/html2/activity/feedback.status.html.snap-2.png differ diff --git a/__tests__/html2/activity/feedback.status.html.snap-3.png b/__tests__/html2/activity/feedback.status.html.snap-3.png index 34dd545fe4..e67c6a0b45 100644 Binary files a/__tests__/html2/activity/feedback.status.html.snap-3.png and b/__tests__/html2/activity/feedback.status.html.snap-3.png differ diff --git a/__tests__/html2/activity/feedback.status.html.snap-4.png b/__tests__/html2/activity/feedback.status.html.snap-4.png index e880d34397..d527b79069 100644 Binary files a/__tests__/html2/activity/feedback.status.html.snap-4.png and b/__tests__/html2/activity/feedback.status.html.snap-4.png differ diff --git a/__tests__/html2/fluentTheme/defaultFeedback.activity.dark.html b/__tests__/html2/fluentTheme/defaultFeedback.activity.dark.html index 0798671f60..cc3b7f65f1 100644 --- a/__tests__/html2/fluentTheme/defaultFeedback.activity.dark.html +++ b/__tests__/html2/fluentTheme/defaultFeedback.activity.dark.html @@ -98,18 +98,8 @@ pageElements.byTestId('send box text area').focus(); await host.sendShiftTab(2); - - await host.sendKeys('ENTER'); - await host.sendKeys('ENTER'); - - await host.snapshot('local'); - - // Dismiss like button - await host.sendShiftTab(2); await host.sendKeys('ENTER'); - await host.snapshot('local'); - // Click like button await host.sendKeys('ENTER'); @@ -119,50 +109,8 @@ 1000 ); - // Go to cancel button - await host.sendTab(2); - await host.sendKeys('ENTER'); - - await host.snapshot('local'); - - pageElements.byTestId('send box text area').focus(); - await host.sendShiftTab(2); - - await host.sendKeys('ENTER'); - // Send dislike - await host.sendTab(1); - await host.sendKeys('ENTER'); - - await pageConditions.became( - 'feedback form is open', - () => document.activeElement === pageElements.byTestId('feedback sendbox'), - 1000 - ); - - await host.sendKeys('Test feedback'); - await host.snapshot('local'); - const { activity } = await directLine.actPostActivity(async () => { - await host.sendTab(1); - await host.sendKeys('ENTER'); - }); - - expect(activity).toEqual( - expect.objectContaining({ - type: 'invoke', - name: 'message/submitAction', - value: { - actionName: 'feedback', - actionValue: { - reaction: 'dislike', - feedback: { - feedbackText: 'Test feedback' - } - } - } - }) - ); }); diff --git a/__tests__/html2/fluentTheme/defaultFeedback.activity.dark.html.snap-1.png b/__tests__/html2/fluentTheme/defaultFeedback.activity.dark.html.snap-1.png index 8d9b22f8f7..45f09f805c 100644 Binary files a/__tests__/html2/fluentTheme/defaultFeedback.activity.dark.html.snap-1.png and b/__tests__/html2/fluentTheme/defaultFeedback.activity.dark.html.snap-1.png differ diff --git a/__tests__/html2/fluentTheme/defaultFeedback.activity.dark.html.snap-2.png b/__tests__/html2/fluentTheme/defaultFeedback.activity.dark.html.snap-2.png deleted file mode 100644 index 1f3bd6fa46..0000000000 Binary files a/__tests__/html2/fluentTheme/defaultFeedback.activity.dark.html.snap-2.png and /dev/null differ diff --git a/__tests__/html2/fluentTheme/defaultFeedback.activity.dark.html.snap-3.png b/__tests__/html2/fluentTheme/defaultFeedback.activity.dark.html.snap-3.png deleted file mode 100644 index e4ef8d8c8e..0000000000 Binary files a/__tests__/html2/fluentTheme/defaultFeedback.activity.dark.html.snap-3.png and /dev/null differ diff --git a/__tests__/html2/fluentTheme/defaultFeedback.activity.dark.html.snap-4.png b/__tests__/html2/fluentTheme/defaultFeedback.activity.dark.html.snap-4.png deleted file mode 100644 index 4408c2006d..0000000000 Binary files a/__tests__/html2/fluentTheme/defaultFeedback.activity.dark.html.snap-4.png and /dev/null differ diff --git a/__tests__/html2/fluentTheme/defaultFeedback.activity.html b/__tests__/html2/fluentTheme/defaultFeedback.activity.html index 0b60c262d4..70065e3e4b 100644 --- a/__tests__/html2/fluentTheme/defaultFeedback.activity.html +++ b/__tests__/html2/fluentTheme/defaultFeedback.activity.html @@ -1,127 +1,132 @@ - - - - - - - - - - - - -
- + + + + + + + + + +
+ - - + } + }) + ); + + await expect(pageElements.byTestId('feedback sendbox')).toBeFalsy(); + + // Feedback button state should persist + await host.snapshot('local'); + }); + + + + \ No newline at end of file diff --git a/__tests__/html2/fluentTheme/defaultFeedback.activity.html.snap-1.png b/__tests__/html2/fluentTheme/defaultFeedback.activity.html.snap-1.png index b4d90bd648..a1d5ec2fcb 100644 Binary files a/__tests__/html2/fluentTheme/defaultFeedback.activity.html.snap-1.png and b/__tests__/html2/fluentTheme/defaultFeedback.activity.html.snap-1.png differ diff --git a/__tests__/html2/fluentTheme/defaultFeedback.activity.html.snap-2.png b/__tests__/html2/fluentTheme/defaultFeedback.activity.html.snap-2.png index 53f8665347..66072faa38 100644 Binary files a/__tests__/html2/fluentTheme/defaultFeedback.activity.html.snap-2.png and b/__tests__/html2/fluentTheme/defaultFeedback.activity.html.snap-2.png differ diff --git a/__tests__/html2/fluentTheme/defaultFeedback.activity.html.snap-3.png b/__tests__/html2/fluentTheme/defaultFeedback.activity.html.snap-3.png index 66072faa38..90219d52b5 100644 Binary files a/__tests__/html2/fluentTheme/defaultFeedback.activity.html.snap-3.png and b/__tests__/html2/fluentTheme/defaultFeedback.activity.html.snap-3.png differ diff --git a/__tests__/html2/fluentTheme/defaultFeedback.activity.html.snap-4.png b/__tests__/html2/fluentTheme/defaultFeedback.activity.html.snap-4.png index 309151bdd4..138aa93cbc 100644 Binary files a/__tests__/html2/fluentTheme/defaultFeedback.activity.html.snap-4.png and b/__tests__/html2/fluentTheme/defaultFeedback.activity.html.snap-4.png differ diff --git a/__tests__/html2/fluentTheme/feedback.form.markdown.html b/__tests__/html2/fluentTheme/feedback.form.markdown.html new file mode 100644 index 0000000000..845daadc5a --- /dev/null +++ b/__tests__/html2/fluentTheme/feedback.form.markdown.html @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + +
+ + + diff --git a/__tests__/html2/fluentTheme/feedback.form.markdown.html.snap-1.png b/__tests__/html2/fluentTheme/feedback.form.markdown.html.snap-1.png new file mode 100644 index 0000000000..ff4788368d Binary files /dev/null and b/__tests__/html2/fluentTheme/feedback.form.markdown.html.snap-1.png differ diff --git a/__tests__/html2/fluentTheme/feedback.form.multiple.html b/__tests__/html2/fluentTheme/feedback.form.multiple.html index 9eb690a5a9..124cf7131f 100644 --- a/__tests__/html2/fluentTheme/feedback.form.multiple.html +++ b/__tests__/html2/fluentTheme/feedback.form.multiple.html @@ -86,14 +86,16 @@ await pageConditions.became( 'feedback form is open', () => document.activeElement === pageElements.byTestId('feedback sendbox'), - 20000 + 1000 ); + await pageConditions.scrollStabilized(); await host.snapshot('local'); await host.sendKeys('Test feedback'); + const { activity } = await directLine.actPostActivity(async () => { - await host.sendTab(1); + await host.sendTab(2); await host.sendKeys('ENTER'); }); diff --git a/__tests__/html2/fluentTheme/feedback.form.multiple.html.snap-1.png b/__tests__/html2/fluentTheme/feedback.form.multiple.html.snap-1.png index 1ab0c215b2..368bdb8b59 100644 Binary files a/__tests__/html2/fluentTheme/feedback.form.multiple.html.snap-1.png and b/__tests__/html2/fluentTheme/feedback.form.multiple.html.snap-1.png differ diff --git a/__tests__/html2/fluentTheme/feedbackForm.noDisclaimer.html.snap-1.png b/__tests__/html2/fluentTheme/feedbackForm.noDisclaimer.html.snap-1.png index 0cd371996b..b0cd409cea 100644 Binary files a/__tests__/html2/fluentTheme/feedbackForm.noDisclaimer.html.snap-1.png and b/__tests__/html2/fluentTheme/feedbackForm.noDisclaimer.html.snap-1.png differ diff --git a/__tests__/html2/preact/activity/feedback.status.html b/__tests__/html2/preact/activity/feedback.status.html index 3cdc676692..fb1673e0c8 100644 --- a/__tests__/html2/preact/activity/feedback.status.html +++ b/__tests__/html2/preact/activity/feedback.status.html @@ -48,7 +48,7 @@ { "@type": "LikeAction", actionStatus: "CompletedActionStatus", - target: { + target: { "@type": "EntryPoint", urlTemplate: "ms-directline://postback?interaction=like" } @@ -102,7 +102,7 @@ { "@type": "LikeAction", actionStatus: "PotentialActionStatus", - target: { + target: { "@type": "EntryPoint", urlTemplate: "ms-directline://postback?interaction=like" } @@ -146,14 +146,26 @@ await host.sendShiftTab(3); await host.sendKeys('ENTER'); await expect(document.activeElement).toBe(buttons[0]); + + // Wait for 400 ms for the tooltip to show up. + await new Promise(resolve => setTimeout(resolve, 400)); + await host.snapshot('local'); await host.sendTab(); await expect(document.activeElement).toBe(buttons[1]); + + // Wait for 400 ms for the tooltip to show up. + await new Promise(resolve => setTimeout(resolve, 400)); + await host.snapshot('local'); await host.sendTab(); await expect(document.activeElement).toBe(buttons[0]); + + // Wait for 400 ms for the tooltip to show up. + await new Promise(resolve => setTimeout(resolve, 400)); + await host.snapshot('local'); await host.sendKeys('ENTER'); diff --git a/__tests__/html2/preact/activity/feedback.status.html.snap-2.png b/__tests__/html2/preact/activity/feedback.status.html.snap-2.png index dba5c262d8..64ba12a7b0 100644 Binary files a/__tests__/html2/preact/activity/feedback.status.html.snap-2.png and b/__tests__/html2/preact/activity/feedback.status.html.snap-2.png differ diff --git a/__tests__/html2/preact/activity/feedback.status.html.snap-3.png b/__tests__/html2/preact/activity/feedback.status.html.snap-3.png index 34dd545fe4..e67c6a0b45 100644 Binary files a/__tests__/html2/preact/activity/feedback.status.html.snap-3.png and b/__tests__/html2/preact/activity/feedback.status.html.snap-3.png differ diff --git a/__tests__/html2/preact/activity/feedback.status.html.snap-4.png b/__tests__/html2/preact/activity/feedback.status.html.snap-4.png index e880d34397..d527b79069 100644 Binary files a/__tests__/html2/preact/activity/feedback.status.html.snap-4.png and b/__tests__/html2/preact/activity/feedback.status.html.snap-4.png differ diff --git a/packages/component/src/Activity/ActivityFeedback.tsx b/packages/component/src/Activity/ActivityFeedback.tsx deleted file mode 100644 index 644dddc669..0000000000 --- a/packages/component/src/Activity/ActivityFeedback.tsx +++ /dev/null @@ -1,130 +0,0 @@ -import { hooks } from 'botframework-webchat-api'; -import { getOrgSchemaMessage, OrgSchemaAction, parseAction, WebChatActivity } from 'botframework-webchat-core'; -import classNames from 'classnames'; -import React, { memo, useCallback, useMemo, useState } from 'react'; -import useStyleSet from '../hooks/useStyleSet'; -import dereferenceBlankNodes from '../Utils/JSONLinkedData/dereferenceBlankNodes'; -import Feedback from './private/Feedback'; -import getDisclaimer from './private/getDisclaimer'; -import hasFeedbackLoop from './private/hasFeedbackLoop'; -import FeedbackForm from './private/FeedbackForm'; - -const { useStyleOptions } = hooks; - -type ActivityFeedbackProps = Readonly<{ - activity: WebChatActivity; -}>; - -const parseActivity = (entities?: WebChatActivity['entities']) => { - const graph = dereferenceBlankNodes(entities || []); - const messageThing = getOrgSchemaMessage(graph); - - return { graph, messageThing }; -}; - -const defaultFeedbackEntities = { - '@context': 'https://schema.org', - '@id': '', - '@type': 'Message', - type: 'https://schema.org/Message', - - keywords: [], - potentialAction: [ - { - '@type': 'LikeAction', - actionStatus: 'PotentialActionStatus' - }, - { - '@type': 'DislikeAction', - actionStatus: 'PotentialActionStatus' - } - ] -}; - -function ActivityFeedback({ activity }: ActivityFeedbackProps) { - const [{ feedbackActionsPlacement }] = useStyleOptions(); - const [{ feedbackForm }] = useStyleSet(); - - const [selectedAction, setSelectedAction] = useState(); - - const isFeedbackLoopSupported = hasFeedbackLoop(activity); - - const { graph, messageThing } = useMemo(() => { - if (isFeedbackLoopSupported) { - return parseActivity([defaultFeedbackEntities]); - } - - return parseActivity(activity.entities); - }, [activity.entities, isFeedbackLoopSupported]); - - const feedbackActions = useMemo>(() => { - try { - const reactActions = (messageThing?.potentialAction || []).filter( - ({ '@type': type }) => type === 'LikeAction' || type === 'DislikeAction' - ); - - if (reactActions.length) { - return Object.freeze(new Set(reactActions)); - } - - const voteActions = graph.filter(({ type }) => type === 'https://schema.org/VoteAction').map(parseAction); - - if (voteActions.length) { - return Object.freeze(new Set(voteActions)); - } - } catch { - // Intentionally left blank. - } - return Object.freeze(new Set([] as OrgSchemaAction[])); - }, [graph, messageThing?.potentialAction]); - - const handleFeedbackActionClick = useCallback( - (action: OrgSchemaAction) => setSelectedAction(action === selectedAction ? undefined : action), - [selectedAction, setSelectedAction] - ); - - const handleFeedbackFormReset = useCallback(() => setSelectedAction(undefined), [setSelectedAction]); - - const FeedbackComponent = useMemo( - () => ( - - ), - [feedbackActions, feedbackActionsPlacement, handleFeedbackActionClick, isFeedbackLoopSupported, selectedAction] - ); - - const FeedbackFormComponent = useMemo( - () => ( - - ), - [activity, handleFeedbackFormReset, selectedAction] - ); - - if (feedbackActionsPlacement === 'activity-actions' && isFeedbackLoopSupported) { - return ( -
-
- {FeedbackComponent} -
- {selectedAction && selectedAction['@type'] && FeedbackFormComponent} -
- ); - } - - // If placement is not inline with activity, we don't show the feedback form. - return FeedbackComponent; -} - -export default memo(ActivityFeedback); diff --git a/packages/component/src/Activity/private/Feedback.tsx b/packages/component/src/Activity/private/Feedback.tsx deleted file mode 100644 index 882e8b14b2..0000000000 --- a/packages/component/src/Activity/private/Feedback.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import { hooks } from 'botframework-webchat-api'; -import { type OrgSchemaAction } from 'botframework-webchat-core'; -import React, { Fragment, memo, useEffect, useMemo, type PropsWithChildren } from 'react'; -import { useRefFrom } from 'use-ref-from'; - -import FeedbackVoteButton from './VoteButton'; - -const { usePonyfill, usePostActivity, useLocalizer } = hooks; - -type Props = Readonly< - PropsWithChildren<{ - actions: ReadonlySet; - className?: string | undefined; - isFeedbackFormSupported?: boolean; - onActionClick?: (action: OrgSchemaAction) => void; - selectedAction?: OrgSchemaAction | undefined; - }> ->; - -const DEBOUNCE_TIMEOUT = 500; - -const Feedback = memo(({ actions, className, isFeedbackFormSupported, onActionClick, selectedAction }: Props) => { - const [{ clearTimeout, setTimeout }] = usePonyfill(); - const localize = useLocalizer(); - const postActivity = usePostActivity(); - - const postActivityRef = useRefFrom(postActivity); - - useEffect(() => { - if (!selectedAction || isFeedbackFormSupported) { - return; - } - - const timeout = setTimeout( - () => - // TODO: We should update this to use W3C Hydra.1 - postActivityRef.current({ - entities: [selectedAction], - name: 'webchat:activity-status/feedback', - type: 'event' - } as any), - DEBOUNCE_TIMEOUT - ); - - return () => clearTimeout(timeout); - }, [clearTimeout, isFeedbackFormSupported, postActivityRef, selectedAction, setTimeout]); - - const actionProps = useMemo( - () => - [...actions].some(action => action.actionStatus === 'CompletedActionStatus') - ? { - disabled: true, - title: localize('VOTE_COMPLETE_ALT') - } - : undefined, - [actions, localize] - ); - - return ( - - {[...actions].map((action, index) => ( - - ))} - - ); -}); - -Feedback.displayName = 'ActivityStatusFeedback'; - -export default Feedback; diff --git a/packages/component/src/Activity/private/FeedbackForm.tsx b/packages/component/src/Activity/private/FeedbackForm.tsx deleted file mode 100644 index 28a64807f8..0000000000 --- a/packages/component/src/Activity/private/FeedbackForm.tsx +++ /dev/null @@ -1,109 +0,0 @@ -import { hooks } from 'botframework-webchat-api'; -import classNames from 'classnames'; -import React, { memo, useCallback, useEffect, useRef, useState, type FormEventHandler } from 'react'; -import { useRefFrom } from 'use-ref-from'; -import useStyleSet from '../../hooks/useStyleSet'; -import testIds from '../../testIds'; -import TextArea from './FeedbackTextArea'; - -const { useLocalizer, usePostActivity } = hooks; - -type FeedbackFormProps = Readonly<{ - disclaimer?: string; - feedbackType: string; - onReset: () => void; - replyToId?: string; -}>; - -function FeedbackForm({ feedbackType, disclaimer, onReset, replyToId }: FeedbackFormProps) { - const [{ feedbackForm }] = useStyleSet(); - const [hasFocus, setHasFocus] = useState(false); - const [userFeedback, setUserFeedback] = useState(''); - const feedbackTextAreaRef = useRef(null); - const localize = useLocalizer(); - const onResetRef = useRefFrom(onReset); - const postActivity = usePostActivity(); - - const handleReset = useCallback(() => { - setUserFeedback(''); - - onResetRef.current(); - - setHasFocus(false); - }, [onResetRef, setHasFocus, setUserFeedback]); - - const handleSubmit = useCallback( - event => { - event.preventDefault(); - - postActivity({ - name: 'message/submitAction', - replyToId, - type: 'invoke', - value: { - actionName: 'feedback', - actionValue: { - feedback: { feedbackText: userFeedback }, - reaction: feedbackType === 'LikeAction' ? 'like' : 'dislike' - } - } - } as any); - - handleReset(); - }, - [feedbackType, handleReset, postActivity, replyToId, userFeedback] - ); - - const handleChange: FormEventHandler = useCallback( - ({ currentTarget: { value } }) => setUserFeedback(value), - [setUserFeedback] - ); - - useEffect(() => { - // Will focus on the text area when: - // 1. The component is mounted initially, or - // 2. User clicked on the reset button - if (feedbackTextAreaRef.current && !hasFocus) { - setHasFocus(true); - - feedbackTextAreaRef.current.focus(); - } - }, [feedbackTextAreaRef, hasFocus, setHasFocus]); - - return ( -
- - {localize('FEEDBACK_FORM_TITLE')} - -
-