AXON-1462-Add-feedback-submission-confirmation

src/rovo-dev/ui/feedback-form/FeedbackConfirmationForm.tsx

@@ -0,0 +1,33 @@
+import CrossIcon from '@atlaskit/icon/core/cross';
+import React from 'react';
+
+export interface FeedbackConfirmationFormProps {
+    onClose: () => void;
+}
+
+export const FeedbackConfirmationForm: React.FC<FeedbackConfirmationFormProps> = ({ onClose: onClose }) => {
+    return (
+        <div className="form-container">
+            <button
+                type="button"
+                onClick={() => onClose()}
+                style={{
+                    background: 'none',
+                    border: 'none',
+                    cursor: 'pointer',
+                    padding: 0,
+                    marginLeft: 'auto',
+                }}
+            >
+                <CrossIcon
+                    size="small"
+                    label="close the feedback confirmation form"
+                    color="var(--ds-icon-accent-gray)"
+                />
+            </button>
+            <b>Thanks</b>
+            <br />
+            <p>Your valuable feedback helps us continually improve our apps.</p>
+        </div>
+    );
+};

src/rovo-dev/ui/messaging/ChatStream.tsx

@@ -7,6 +7,7 @@ import { DetailedSiteInfo } from '../../api/extensionApiTypes';
 import { CheckFileExistsFunc, FollowUpActionFooter, OpenFileFunc, OpenJiraFunc } from '../common/common';
 import { DialogMessageItem } from '../common/DialogMessage';
 import { PullRequestForm } from '../create-pr/PullRequestForm';
+import { FeedbackConfirmationForm } from '../feedback-form/FeedbackConfirmationForm';
 import { FeedbackForm, FeedbackType } from '../feedback-form/FeedbackForm';
 import { RovoDevLanding } from '../landing-page/RovoDevLanding';
 import { useMessagingApi } from '../messagingApi';
@@ -41,6 +42,8 @@ interface ChatStreamProps {
     onCollapsiblePanelExpanded: () => void;
     feedbackVisible: boolean;
     setFeedbackVisible: (visible: boolean) => void;
+    feedbackConfirmationVisible: boolean;
+    setFeedbackConfirmationVisible: (visible: boolean) => void;
     sendFeedback: (feedbackType: FeedbackType, feedack: string, canContact: boolean, lastTenMessages: boolean) => void;
     onLoginClick: (openApiTokenLogin: boolean) => void;
     onOpenFolder: () => void;
@@ -64,7 +67,9 @@ export const ChatStream: React.FC<ChatStreamProps> = ({
     onChangesGitPushed,
     onCollapsiblePanelExpanded,
     feedbackVisible = false,
+    feedbackConfirmationVisible = false,
     setFeedbackVisible,
+    setFeedbackConfirmationVisible,
     sendFeedback,
     onLoginClick,
     onOpenFolder,
@@ -185,6 +190,12 @@ export const ChatStream: React.FC<ChatStreamProps> = ({
         };
     }, [autoScrollEnabled, chatHistory]);
 
+    const confirmFeedback = () => {
+        setFeedbackConfirmationVisible(true);
+        setTimeout(() => {
+            setFeedbackConfirmationVisible(false);
+        }, 2000);
+    };
     // Auto-scroll when content changes or when re-enabled
     React.useEffect(performAutoScroll, [
         chatHistory,
@@ -337,13 +348,17 @@ export const ChatStream: React.FC<ChatStreamProps> = ({
                             onSubmit={(feedbackType, feedback, canContact, includeTenMessages) => {
                                 setFeedbackType(undefined);
                                 sendFeedback(feedbackType, feedback, canContact, includeTenMessages);
+                                confirmFeedback();
                             }}
                             onCancel={() => {
                                 setFeedbackType(undefined);
                                 setFeedbackVisible(false);
                             }}
                         />
                     )}
+                    {feedbackConfirmationVisible && (
+                        <FeedbackConfirmationForm onClose={() => setFeedbackConfirmationVisible(false)} />
+                    )}
                 </FollowUpActionFooter>
             )}
             <div id="sentinel" ref={sentinelRef} style={{ height: '10px', width: '100%', pointerEvents: 'none' }} />

src/rovo-dev/ui/rovoDevView.tsx

@@ -60,6 +60,7 @@ const RovoDevView: React.FC = () => {
     const [history, setHistory] = useState<Response[]>([]);
     const [modalDialogs, setModalDialogs] = useState<DialogMessage[]>([]);
     const [isFeedbackFormVisible, setIsFeedbackFormVisible] = React.useState(false);
+    const [isFeedbackConfirmationFormVisible, setIsFeedbackConfirmationFormVisible] = React.useState(false);
     const [outgoingMessage, dispatch] = useState<RovoDevViewResponse | undefined>(undefined);
     const [promptContextCollection, setPromptContextCollection] = useState<RovoDevContextItem[]>([]);
     const [debugPanelEnabled, setDebugPanelEnabled] = useState(false);
@@ -890,7 +891,9 @@ const RovoDevView: React.FC = () => {
                     onChangesGitPushed={onChangesGitPushed}
                     onCollapsiblePanelExpanded={onCollapsiblePanelExpanded}
                     feedbackVisible={isFeedbackFormVisible}
+                    feedbackConfirmationVisible={isFeedbackConfirmationFormVisible}
                     setFeedbackVisible={setIsFeedbackFormVisible}
+                    setFeedbackConfirmationVisible={setIsFeedbackConfirmationFormVisible}
                     sendFeedback={executeSendFeedback}
                     onLoginClick={onLoginClick}
                     onOpenFolder={onOpenFolder}