Merge pull request #8636 from continuedev/continue/con-4856

feat: restore feedback modal for user interest collection

Author: RomneyDa

gui/src/components/dialogs/FeedbackDialog.tsx

@@ -0,0 +1,73 @@
+import { usePostHog } from "posthog-js/react";
+import { Button, Input, SecondaryButton } from "..";
+import { useAppDispatch } from "../../redux/hooks";
+import { setDialogMessage, setShowDialog } from "../../redux/slices/uiSlice";
+
+export default function FeedbackDialog() {
+  const posthog = usePostHog();
+  const dispatch = useAppDispatch();
+
+  return (
+    <div className="mx-auto flex max-w-md flex-col p-6 pt-8">
+      <div className="flex items-center gap-2 text-lg font-medium">
+        <span>👋</span>
+        <span>Help us improve Continue</span>
+      </div>
+
+      <p className="text-foreground text-sm leading-relaxed">
+        We're always working to make Continue better and would love to hear from
+        you. If you're interested in sharing your experience, please enter your
+        details below.
+      </p>
+
+      <form
+        onSubmit={(e: any) => {
+          e.preventDefault();
+          posthog?.capture("user_interest_form", {
+            name: e.target.elements[0].value,
+            email: e.target.elements[1].value,
+          });
+          dispatch(
+            setDialogMessage(
+              <div className="p-6 text-center">
+                <div className="mb-2 text-lg">✓ Thank you!</div>
+                <p className="text-foreground text-sm">
+                  We'll be in touch soon.
+                </p>
+              </div>,
+            ),
+          );
+
+          // Auto-close after 2 seconds
+          setTimeout(() => {
+            dispatch(setShowDialog(false));
+            dispatch(setDialogMessage(undefined));
+          }, 2000);
+        }}
+        className="flex flex-col gap-3"
+      >
+        <Input type="text" name="name" placeholder="Name" required />
+        <Input type="email" name="email" placeholder="Email" required />
+        <div className="mt-2 flex justify-between gap-2">
+          <SecondaryButton
+            className="flex-1"
+            type="button"
+            onClick={() => {
+              dispatch(setShowDialog(false));
+              dispatch(setDialogMessage(undefined));
+            }}
+          >
+            Not now
+          </SecondaryButton>
+          <Button className="flex-1" type="submit">
+            Submit
+          </Button>
+        </div>
+      </form>
+
+      <p className="text-description-muted text-xs">
+        We'll only use this information to reach out for feedback.
+      </p>
+    </div>
+  );
+}

gui/src/pages/gui/Chat.tsx

@@ -47,12 +47,15 @@ import { ToolCallDiv } from "./ToolCallDiv";
 import { useStore } from "react-redux";
 import { BackgroundModeView } from "../../components/BackgroundMode/BackgroundModeView";
 import { CliInstallBanner } from "../../components/CliInstallBanner";
+import FeedbackDialog from "../../components/dialogs/FeedbackDialog";
 
 import { FatalErrorIndicator } from "../../components/config/FatalErrorNotice";
 import InlineErrorMessage from "../../components/mainInput/InlineErrorMessage";
 import { resolveEditorContent } from "../../components/mainInput/TipTapEditor/utils/resolveEditorContent";
+import { setDialogMessage, setShowDialog } from "../../redux/slices/uiSlice";
 import { RootState } from "../../redux/store";
 import { cancelStream } from "../../redux/thunks/cancelStream";
+import { getLocalStorage, setLocalStorage } from "../../util/localStorage";
 import { EmptyChatBody } from "./EmptyChatBody";
 import { ExploreDialogWatcher } from "./ExploreDialogWatcher";
 import { useAutoScroll } from "./useAutoScroll";
@@ -269,6 +272,18 @@ export function Chat() {
           editorToClearOnSend.commands.clearContent();
         }
       }
+
+      // Increment localstorage counter for popup
+      const currentCount = getLocalStorage("mainTextEntryCounter");
+      if (currentCount) {
+        setLocalStorage("mainTextEntryCounter", currentCount + 1);
+        if (currentCount === 300) {
+          dispatch(setDialogMessage(<FeedbackDialog />));
+          dispatch(setShowDialog(true));
+        }
+      } else {
+        setLocalStorage("mainTextEntryCounter", 1);
+      }
     },
     [dispatch, ideMessenger, reduxStore, setIsCreatingAgent],
   );

gui/src/redux/slices/uiSlice.ts

@@ -19,7 +19,6 @@ export type ToolGroupPolicies = { [toolGroupName: string]: ToolGroupPolicy };
 type UIState = {
   showDialog: boolean;
   dialogMessage: JSX.Element | undefined;
-  dialogEntryOn: boolean;
   onboardingCard: OnboardingCardState;
   isExploreDialogOpen: boolean;
   hasDismissedExploreDialog: boolean;
@@ -35,7 +34,6 @@ export const DEFAULT_RULE_SETTING: RulePolicy = "on";
 export const DEFAULT_UI_SLICE: UIState = {
   showDialog: false,
   dialogMessage: undefined,
-  dialogEntryOn: false,
   onboardingCard: defaultOnboardingCardState,
   isExploreDialogOpen:
     getLocalStorage(LocalStorageKey.IsExploreDialogOpen) ?? false,

gui/src/util/localStorage.ts

@@ -6,6 +6,7 @@ type LocalStorageTypes = {
   hasDismissedExploreDialog: boolean;
   onboardingStatus?: OnboardingStatus;
   hasDismissedOnboardingCard: boolean;
+  mainTextEntryCounter: number;
   ide: "vscode" | "jetbrains";
   vsCodeUriScheme: string;
   fontSize: number;