feat: fix and add recall from previous questions with recall string

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/CTAQuestionForm.tsx

@@ -38,6 +38,7 @@ export default function CTAQuestionForm({
         question={question}
         questionIdx={questionIdx}
         updateQuestion={updateQuestion}
+        localSurvey={localSurvey}
       />
 
       <div className="mt-3">

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/ConsentQuestionForm.tsx

@@ -34,6 +34,7 @@ export default function ConsentQuestionForm({
         question={question}
         questionIdx={questionIdx}
         updateQuestion={updateQuestion}
+        localSurvey={localSurvey}
       />
 
       <div className="mt-3">

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/MultipleChoiceMultiForm.tsx

@@ -170,6 +170,7 @@ export default function MultipleChoiceMultiForm({
         question={question}
         questionIdx={questionIdx}
         updateQuestion={updateQuestion}
+        localSurvey={localSurvey}
       />
 
       <div className="mt-3">

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/MultipleChoiceSingleForm.tsx

@@ -170,6 +170,7 @@ export default function MultipleChoiceSingleForm({
         question={question}
         questionIdx={questionIdx}
         updateQuestion={updateQuestion}
+        localSurvey={localSurvey}
       />
 
       <div className="mt-3">

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/NPSQuestionForm.tsx

@@ -36,6 +36,7 @@ export default function NPSQuestionForm({
         question={question}
         questionIdx={questionIdx}
         updateQuestion={updateQuestion}
+        localSurvey={localSurvey}
       />
 
       <div className="mt-3">

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/OpenQuestionForm.tsx

@@ -59,6 +59,7 @@ export default function OpenQuestionForm({
         question={question}
         questionIdx={questionIdx}
         updateQuestion={updateQuestion}
+        localSurvey={localSurvey}
       />
 
       <div className="mt-3">

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/PictureSelectionForm.tsx

@@ -38,6 +38,7 @@ export default function PictureSelectionForm({
         question={question}
         questionIdx={questionIdx}
         updateQuestion={updateQuestion}
+        localSurvey={localSurvey}
       />
       <div className="mt-3">
         {showSubheader && (

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/QuestionFormInput.tsx

@@ -1,11 +1,12 @@
 "use client";
 
-import { TSurveyQuestion } from "@formbricks/types/surveys";
+import { TSurveyQuestion, TSurvey } from "@formbricks/types/surveys";
 import FileInput from "@formbricks/ui/FileInput";
-import { Input } from "@formbricks/ui/Input";
+// import { Input } from "@formbricks/ui/Input";
 import { Label } from "@formbricks/ui/Label";
 import { ImagePlusIcon } from "lucide-react";
-import { RefObject, useState } from "react";
+import { RefObject, useEffect, useState } from "react";
+import { MentionsInput, Mention } from "react-mentions";
 
 interface QuestionFormInputProps {
   question: TSurveyQuestion;
@@ -14,17 +15,45 @@ interface QuestionFormInputProps {
   isInValid: boolean;
   environmentId: string;
   ref?: RefObject<HTMLInputElement>;
+  localSurvey: TSurvey;
 }
 
 const QuestionFormInput = ({
   question,
+  localSurvey,
   questionIdx,
   updateQuestion,
-  isInValid,
+  // isInValid,
   environmentId,
-  ref,
+}: // ref,
-}: QuestionFormInputProps) => {
+QuestionFormInputProps) => {
   const [showImageUploader, setShowImageUploader] = useState<boolean>(!!question.imageUrl);
+  const [mentionDisplayString, setMentionDisplayString] = useState<string>(question.headline);
+  const [prevHeadline, setPreviousHeadline] = useState<string>("");
+  const [data, setData] = useState<
+    {
+      id: string;
+      display: string;
+    }[]
+  >();
+
+  useEffect(() => {
+    setData(
+      localSurvey.questions.map((q) => {
+        if (question.id !== q.id)
+          return {
+            id: q.id,
+            display: q.headline,
+          };
+        else {
+          return {
+            id: "",
+            display: "",
+          };
+        }
+      })
+    );
+  }, [localSurvey, question]);
 
   return (
     <div className="mt-3">
@@ -42,7 +71,7 @@ const QuestionFormInput = ({
           />
         )}
         <div className="flex items-center space-x-2">
-          <Input
+          {/* <Input
             autoFocus
             ref={ref}
             id="headline"
@@ -50,7 +79,59 @@ const QuestionFormInput = ({
             value={question.headline}
             onChange={(e) => updateQuestion(questionIdx, { headline: e.target.value })}
             isInvalid={isInValid && question.headline.trim() === ""}
-          />
+          /> */}
+          <MentionsInput
+            autoFocus
+            // ref={ref}
+            id="headline"
+            name="headline"
+            value={mentionDisplayString}
+            onChange={(event, _, newPlainTextValue) => {
+              setPreviousHeadline(question.headline);
+              updateQuestion(questionIdx, {
+                headline: newPlainTextValue,
+              });
+              setMentionDisplayString(event.target.value);
+            }}
+            style={{
+              width: "100%",
+              border: "1px rgb(203 213 225) solid",
+              borderRadius: "4px",
+              textArea: {
+                border: "none",
+                marginBottom: "1rem",
+              },
+              suggestions: {
+                list: {
+                  backgroundColor: "white",
+                  fontSize: 14,
+                },
+                item: {
+                  padding: "5px 15px",
+                  "&focused": {
+                    backgroundColor: "#cee4e5",
+                  },
+                },
+              },
+            }}>
+            <Mention
+              data={data || []}
+              trigger="@"
+              appendSpaceOnAdd
+              markup="[__display__]"
+              displayTransform={(_, display: string) => display}
+              onAdd={(id: string) => {
+                updateQuestion(questionIdx, {
+                  recallString: prevHeadline + "recall:" + id,
+                });
+              }}
+              style={{
+                backgroundColor: "#cee4e5",
+                padding: "0.2rem",
+                marginLeft: "0.5rem",
+              }}
+            />
+          </MentionsInput>
           <ImagePlusIcon
             aria-label="Toggle image uploader"
             className="ml-2 h-4 w-4 cursor-pointer text-slate-400 hover:text-slate-500"

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/QuestionsView.tsx

@@ -182,6 +182,8 @@ export default function QuestionsView({
     setLocalSurvey(updatedSurvey);
   };
 
+  console.log(localSurvey.questions);
+
   return (
     <div className="mt-12 px-5 py-4">
       <div className="mb-5 flex flex-col gap-5">

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/RatingQuestionForm.tsx

@@ -1,4 +1,4 @@
-import { TSurvey, TSurveyRatingQuestion } from "@formbricks/types/surveys";
+import { TSurvey, TSurveyRatingQuestion, TSurveyQuestions } from "@formbricks/types/surveys";
 import QuestionFormInput from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/QuestionFormInput";
 import { Button } from "@formbricks/ui/Button";
 import { Input } from "@formbricks/ui/Input";
@@ -36,6 +36,7 @@ export default function RatingQuestionForm({
         question={question}
         questionIdx={questionIdx}
         updateQuestion={updateQuestion}
+        localSurvey={localSurvey}
       />
 
       <div className="mt-3">

apps/web/package.json

@@ -52,6 +52,7 @@
     "react-hook-form": "^7.48.2",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^4.12.0",
+    "react-mentions": "^4.4.10",
     "ua-parser-js": "^1.0.37",
     "webpack": "^5.89.0",
     "xlsx": "^0.18.5"
@@ -62,6 +63,7 @@
     "@types/lodash": "^4.14.201",
     "@types/markdown-it": "^13.0.6",
     "@types/qrcode": "^1.5.5",
+    "@types/react-mentions": "^4.1.13",
     "eslint-config-formbricks": "workspace:*"
   }
 }

packages/types/surveys.ts

@@ -204,6 +204,7 @@ const ZSurveyQuestionBase = z.object({
   range: z.union([z.literal(5), z.literal(3), z.literal(4), z.literal(7), z.literal(10)]).optional(),
   logic: z.array(ZSurveyLogic).optional(),
   isDraft: z.boolean().optional(),
+  recallString: z.string().optional(),
 });
 
 export const ZSurveyOpenTextQuestionInputType = z.enum(["text", "email", "url", "number", "phone"]);

pnpm-lock.yaml

@@ -404,6 +404,9 @@ importers:
       react-icons:
         specifier: ^4.12.0
         version: 4.12.0(react@18.2.0)
+      react-mentions:
+        specifier: ^4.4.10
+        version: 4.4.10(react-dom@18.2.0)(react@18.2.0)
       ua-parser-js:
         specifier: ^1.0.37
         version: 1.0.37
@@ -429,6 +432,9 @@ importers:
       '@types/qrcode':
         specifier: ^1.5.5
         version: 1.5.5
+      '@types/react-mentions':
+        specifier: ^4.1.13
+        version: 4.1.13
       eslint-config-formbricks:
         specifier: workspace:*
         version: link:../../packages/eslint-config-formbricks
@@ -526,7 +532,7 @@ importers:
         version: 9.0.0(eslint@8.53.0)
       eslint-config-turbo:
         specifier: latest
-        version: 1.8.8(eslint@8.53.0)
+        version: 1.10.15(eslint@8.53.0)
       eslint-plugin-react:
         specifier: 7.33.2
         version: 7.33.2(eslint@8.53.0)
@@ -3027,6 +3033,12 @@ packages:
     dependencies:
       regenerator-runtime: 0.14.0
 
+  /@babel/runtime@7.4.5:
+    resolution: {integrity: sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==}
+    dependencies:
+      regenerator-runtime: 0.13.11
+    dev: false
+
   /@babel/template@7.22.15:
     resolution: {integrity: sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==}
     engines: {node: '>=6.9.0'}
@@ -9201,6 +9213,12 @@ packages:
       '@types/react': 18.2.28
     dev: false
 
+  /@types/react-mentions@4.1.13:
+    resolution: {integrity: sha512-kRulAAjlmhCtsJ9bapO0foocknaE/rEuFKpmFEU81fBfnXZmZNBaJ9J/DBjwigT3WDHjQVUmYoi5sxEXrcdzAw==}
+    dependencies:
+      '@types/react': 18.2.37
+    dev: true
+
   /@types/react-redux@7.1.28:
     resolution: {integrity: sha512-EQr7cChVzVUuqbA+J8ArWK1H0hLAHKOs21SIMrskKZ3nHNeE+LFYA+IsoZGhVOT8Ktjn3M20v4rnZKN3fLbypw==}
     dependencies:
@@ -12930,13 +12948,13 @@ packages:
     resolution: {integrity: sha512-NB/L/1Y30qyJcG5xZxCJKW/+bqyj+llbcCwo9DEz8bESIP0SLTOQ8T1DWCCFc+wJ61AMEstj4511PSScqMMfCw==}
     dev: true
 
-  /eslint-config-turbo@1.8.8(eslint@8.53.0):
+  /eslint-config-turbo@1.10.15(eslint@8.53.0):
-    resolution: {integrity: sha512-+yT22sHOT5iC1sbBXfLIdXfbZuiv9bAyOXsxTxFCWelTeFFnANqmuKB3x274CFvf7WRuZ/vYP/VMjzU9xnFnxA==}
+    resolution: {integrity: sha512-76mpx2x818JZE26euen14utYcFDxOahZ9NaWA+6Xa4pY2ezVKVschuOxS96EQz3o3ZRSmcgBOapw/gHbN+EKxQ==}
     peerDependencies:
       eslint: '>6.6.0'
     dependencies:
       eslint: 8.53.0
-      eslint-plugin-turbo: 1.8.8(eslint@8.53.0)
+      eslint-plugin-turbo: 1.10.15(eslint@8.53.0)
     dev: true
 
   /eslint-import-resolver-node@0.3.9:
@@ -13138,11 +13156,12 @@ packages:
       - typescript
     dev: true
 
-  /eslint-plugin-turbo@1.8.8(eslint@8.53.0):
+  /eslint-plugin-turbo@1.10.15(eslint@8.53.0):
-    resolution: {integrity: sha512-zqyTIvveOY4YU5jviDWw9GXHd4RiKmfEgwsjBrV/a965w0PpDwJgEUoSMB/C/dU310Sv9mF3DSdEjxjJLaw6rA==}
+    resolution: {integrity: sha512-Tv4QSKV/U56qGcTqS/UgOvb9HcKFmWOQcVh3HEaj7of94lfaENgfrtK48E2CckQf7amhKs1i+imhCsNCKjkQyA==}
     peerDependencies:
       eslint: '>6.6.0'
     dependencies:
+      dotenv: 16.0.3
       eslint: 8.53.0
     dev: true
 
@@ -19911,6 +19930,20 @@ packages:
       - supports-color
     dev: false
 
+  /react-mentions@4.4.10(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-JHiQlgF1oSZR7VYPjq32wy97z1w1oE4x10EuhKjPr4WUKhVzG1uFQhQjKqjQkbVqJrmahf+ldgBTv36NrkpKpA==}
+    peerDependencies:
+      react: '>=16.8.3'
+      react-dom: '>=16.8.3'
+    dependencies:
+      '@babel/runtime': 7.4.5
+      invariant: 2.2.4
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      substyle: 9.4.1(react@18.2.0)
+    dev: false
+
   /react-radio-group@3.0.3(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-MUNRRjZqQ2y+1K6rBuH0zO+gLVmCnWIcc5GnNwr9WNoUwZ9FUAKJ1UfsKXwYS93whR6/qrZKoVgiOltRkbzezw==}
     peerDependencies:
@@ -20235,6 +20268,10 @@ packages:
   /regenerate@1.4.2:
     resolution: {integrity: sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==}
 
+  /regenerator-runtime@0.13.11:
+    resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
+    dev: false
+
   /regenerator-runtime@0.14.0:
     resolution: {integrity: sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==}
 
@@ -21653,6 +21690,16 @@ packages:
     resolution: {integrity: sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==}
     dev: false
 
+  /substyle@9.4.1(react@18.2.0):
+    resolution: {integrity: sha512-VOngeq/W1/UkxiGzeqVvDbGDPM8XgUyJVWjrqeh+GgKqspEPiLYndK+XRcsKUHM5Muz/++1ctJ1QCF/OqRiKWA==}
+    peerDependencies:
+      react: '>=16.8.3'
+    dependencies:
+      '@babel/runtime': 7.23.2
+      invariant: 2.2.4
+      react: 18.2.0
+    dev: false
+
   /sucrase@3.34.0:
     resolution: {integrity: sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==}
     engines: {node: '>=8'}