fix(amazonq): improve feedback experience and min char limit

Author: abhraina-aws

packages/core/src/feedback/vue/submitFeedback.ts

@@ -41,6 +41,10 @@ export class FeedbackWebview extends VueWebview {
             return 'Choose a reaction (smile/frown)'
         }
 
+        if (message.comment.length < 188) {
+            return 'Please add atleast 100 characters in the template describing your issue.'
+        }
+
         if (this.commentData) {
             message.comment = `${message.comment}\n\n${this.commentData}`
         }

packages/core/src/feedback/vue/submitFeedback.vue

@@ -34,6 +34,26 @@
                             >.</em
                         >
                     </div>
+                    <div style="margin-top: 10px">
+                        <em>For helpful feedback, please include:</em>
+                        <ul style="margin-top: 5px; margin-bottom: 5px">
+                            <li>
+                                <em><strong>Issue:</strong> A brief summary of the issue or suggestion</em>
+                            </li>
+                            <li>
+                                <em
+                                    ><strong>Reproduction Steps:</strong> Clear steps to reproduce the issue (if
+                                    applicable)</em
+                                >
+                            </li>
+                            <li>
+                                <em
+                                    ><strong>Expected vs. Actual:</strong> What you expected and what actually
+                                    happened</em
+                                >
+                            </li>
+                        </ul>
+                    </div>
                     <br />
                     <div>
                         <em>
@@ -66,7 +86,16 @@ const client = WebviewClientFactory.create<FeedbackWebview>()
 export default defineComponent({
     data() {
         return {
-            comment: '',
+            comment: `Issue:
+
+Reproduction Steps:
+1. 
+2. 
+3. 
+
+Expected Behavior: 
+
+Actual Behavior: `,
             sentiment: '',
             isSubmitting: false,
             error: '',

packages/core/src/test/feedback/commands/submitFeedbackListener.test.ts

@@ -10,9 +10,14 @@ import { FeedbackWebview } from '../../../feedback/vue/submitFeedback'
 import sinon from 'sinon'
 import { waitUntil } from '../../../shared'
 
-const comment = 'comment'
+const comment =
+    'This is a detailed feedback comment that meets the minimum length requirement. ' +
+    'It includes specific information about the issue, steps to reproduce, expected behavior, and actual behavior. ' +
+    'This comment is long enough to pass the 188 character validation rule.'
 const sentiment = 'Positive'
 const message = { command: 'submitFeedback', comment: comment, sentiment: sentiment }
+const shortComment = 'This is a short comment'
+const shortMessage = { command: 'submitFeedback', comment: shortComment, sentiment: sentiment }
 
 describe('submitFeedbackListener', function () {
     let mockTelemetry: TelemetryService
@@ -47,5 +52,14 @@ describe('submitFeedbackListener', function () {
             const result = await webview.submit(message)
             assert.strictEqual(result, expectedError)
         })
+
+        it(`validates ${productName} feedback comment length is at least 188 characters`, async function () {
+            const postStub = sinon.stub()
+            mockTelemetry.postFeedback = postStub
+            const webview = new FeedbackWebview(mockTelemetry, productName)
+            const result = await webview.submit(shortMessage)
+            assert.strictEqual(result, 'Please add atleast 100 characters in the template describing your issue.')
+            assert.strictEqual(postStub.called, false, 'postFeedback should not be called for short comments')
+        })
     }
 })