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

feat: add the new @mention functionality to display recall values based on dummy options
2026-05-18 06:52:01 -05:00 · 2023-11-23 18:49:59 +05:30 · 2023-11-22 18:05:28 +05:30
26 changed files with 886 additions and 816 deletions
@@ -16,8 +16,10 @@ env:
  # github.repository as <account>/<repo>
  IMAGE_NAME: ${{ github.repository }}

+
 jobs:
  build:
+
    runs-on: ubuntu-latest
    permissions:
      contents: read
@@ -36,7 +38,7 @@ jobs:
        if: github.event_name != 'pull_request'
        uses: sigstore/cosign-installer@6e04d228eb30da1757ee4e1dd75a0ec73a653e06 #v3.1.1
        with:
-          cosign-release: "v2.1.1"
+          cosign-release: 'v2.1.1'

      # Set up BuildKit Docker container builder to be able to build
      # multi-platform images and export cache
@@ -69,7 +71,6 @@ jobs:
        uses: docker/build-push-action@0565240e2d4ab88bba5387d719585280857ece09 # v5.0.0
        with:
          context: .
-          file: ./apps/web/Dockerfile
          push: ${{ github.event_name != 'pull_request' }}
          tags: ${{ steps.meta.outputs.tags }}
          labels: ${{ steps.meta.outputs.labels }}
@@ -38,6 +38,7 @@ export default function CTAQuestionForm({
        question={question}
        questionIdx={questionIdx}
        updateQuestion={updateQuestion}
+        localSurvey={localSurvey}
      />

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

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

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

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

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

      <div className="mt-3">
@@ -38,6 +38,7 @@ export default function PictureSelectionForm({
        question={question}
        questionIdx={questionIdx}
        updateQuestion={updateQuestion}
+        localSurvey={localSurvey}
      />
      <div className="mt-3">
        {showSubheader && (
@@ -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,
-}: QuestionFormInputProps) => {
+}: // ref,
+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"
@@ -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">
@@ -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">
@@ -41,7 +41,6 @@ export default function SurveyEditor({

  useEffect(() => {
    if (survey) {
-      if (localSurvey) return;
      setLocalSurvey(JSON.parse(JSON.stringify(survey)));

      if (survey.questions.length > 0) {
@@ -97,7 +97,6 @@ export default function WhenToSendCard({
  };

  useEffect(() => {
-    if (isAddEventModalOpen) return;
    if (activeIndex !== null) {
      const newActionClass = actionClassArray[actionClassArray.length - 1].name;
      const currentActionClass = localSurvey.triggers[activeIndex];
@@ -1,6 +1,6 @@
 {
  "name": "@formbricks/web",
-  "version": "1.3.1",
+  "version": "1.2.1",
  "private": true,
  "scripts": {
    "clean": "rimraf .turbo node_modules .next",
@@ -11,6 +11,7 @@
    "lint": "next lint"
  },
  "dependencies": {
+    "@aws-sdk/s3-presigned-post": "^3.451.0",
    "@formbricks/api": "workspace:*",
    "@formbricks/database": "workspace:*",
    "@formbricks/ee": "workspace:*",
@@ -51,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"
@@ -61,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:*"
  }
 }
@@ -32,9 +32,9 @@
    "@changesets/cli": "^2.26.2",
    "eslint-config-formbricks": "workspace:*",
    "husky": "^8.0.3",
-    "lint-staged": "^15.1.0",
+    "lint-staged": "^15.0.1",
    "rimraf": "^5.0.5",
-    "tsx": "^4.2.0",
+    "tsx": "^3.13.0",
    "turbo": "^1.10.16"
  },
  "lint-staged": {
@@ -18,6 +18,6 @@
  },
  "dependencies": {
    "@formbricks/lib": "workspace:*",
-    "stripe": "^14.5.0"
+    "stripe": "^14.4.0"
  }
 }
@@ -8,7 +8,7 @@
    "clean": "rimraf node_modules .turbo"
  },
  "devDependencies": {
-    "eslint": "^8.54.0",
+    "eslint": "^8.53.0",
    "eslint-config-next": "^14.0.3",
    "eslint-config-prettier": "^9.0.0",
    "eslint-config-turbo": "latest",
@@ -42,9 +42,9 @@
    "@formbricks/surveys": "workspace:*",
    "@formbricks/tsconfig": "workspace:*",
    "@formbricks/types": "workspace:*",
-    "@types/jest": "^29.5.9",
-    "@typescript-eslint/eslint-plugin": "^6.12.0",
-    "@typescript-eslint/parser": "^6.12.0",
+    "@types/jest": "^29.5.8",
+    "@typescript-eslint/eslint-plugin": "^6.11.0",
+    "@typescript-eslint/parser": "^6.11.0",
    "babel-jest": "^29.7.0",
    "cross-env": "^7.0.3",
    "eslint-config-formbricks": "workspace:*",
@@ -12,12 +12,11 @@
    "lint:report": "eslint . --format json --output-file ../../lint-results/app-store.json"
  },
  "dependencies": {
-    "@aws-sdk/s3-presigned-post": "^3.454.0",
-    "@aws-sdk/client-s3": "3.454.0",
-    "@aws-sdk/s3-request-presigner": "3.454.0",
+    "@formbricks/api": "*",
+    "@aws-sdk/client-s3": "3.451.0",
+    "@aws-sdk/s3-request-presigner": "3.451.0",
    "@t3-oss/env-nextjs": "^0.7.1",
    "mime": "3.0.0",
-    "@formbricks/api": "*",
    "@formbricks/database": "*",
    "@formbricks/types": "*",
    "@paralleldrive/cuid2": "^2.2.2",
@@ -305,7 +305,9 @@ export const getPersonByUserId = async (environmentId: string, userId: string):
        select: selectPerson,
      });

-      if (personWithUserId) {
+      return personWithUserId ? transformPrismaPerson(personWithUserId) : null;
+
+      /*  if (personWithUserId) {
        return transformPrismaPerson(personWithUserId);
      }

@@ -350,9 +352,9 @@ export const getPersonByUserId = async (environmentId: string, userId: string):
        id: personWithUserIdAttribute.id,
        environmentId,
        userId,
-      });
+      }); 

-      return transformPrismaPerson(personWithUserIdAttribute);
+      return transformPrismaPerson(personWithUserIdAttribute); */
    },
    [`getPersonByUserId-${environmentId}-${userId}`],
    {
@@ -46,7 +46,7 @@
  "devDependencies": {
    "@types/express": "^4.17.21",
    "@types/request-promise-native": "~1.0.21",
-    "@typescript-eslint/parser": "~6.12",
+    "@typescript-eslint/parser": "~6.11",
    "eslint-plugin-n8n-nodes-base": "^1.16.1",
    "gulp": "^4.0.2",
    "n8n-core": "legacy",
@@ -25,7 +25,7 @@
  "devDependencies": {
    "@formbricks/tsconfig": "workspace:*",
    "@formbricks/types": "workspace:*",
-    "@preact/preset-vite": "^2.7.0",
+    "@preact/preset-vite": "^2.6.0",
    "autoprefixer": "^10.4.16",
    "eslint-config-formbricks": "workspace:*",
    "postcss": "^8.4.31",
@@ -7,9 +7,9 @@
    "clean": "rimraf node_modules dist turbo"
  },
  "devDependencies": {
-    "@types/node": "20.9.3",
-    "@types/react": "18.2.38",
-    "@types/react-dom": "18.2.16",
-    "typescript": "^5.3.2"
+    "@types/node": "20.9.0",
+    "@types/react": "18.2.37",
+    "@types/react-dom": "18.2.15",
+    "typescript": "^5.2.2"
  }
 }
@@ -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"]);
@@ -19,13 +19,13 @@
    "@formbricks/surveys": "workspace:*",
    "@formbricks/lib": "workspace:*",
    "@heroicons/react": "^2.0.18",
-    "@lexical/code": "^0.12.4",
-    "@lexical/link": "^0.12.4",
-    "@lexical/list": "^0.12.4",
-    "@lexical/markdown": "^0.12.4",
-    "@lexical/react": "^0.12.4",
-    "@lexical/rich-text": "^0.12.4",
-    "@lexical/table": "^0.12.4",
+    "@lexical/code": "^0.12.2",
+    "@lexical/link": "^0.12.2",
+    "@lexical/list": "^0.12.2",
+    "@lexical/markdown": "^0.12.2",
+    "@lexical/react": "^0.12.2",
+    "@lexical/rich-text": "^0.12.2",
+    "@lexical/table": "^0.12.2",
    "@radix-ui/react-accordion": "^1.1.2",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-dialog": "^1.0.5",
@@ -40,7 +40,7 @@
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "cmdk": "^0.2.0",
-    "lexical": "^0.12.4",
+    "lexical": "^0.12.2",
    "lucide-react": "^0.292.0",
    "react-colorful": "^5.6.1",
    "react-confetti": "^6.1.0",
Author	SHA1	Message	Date
Neil Chauhan	41e56c0651	feat: fix and add recall from previous questions with recall string	2023-11-23 18:49:59 +05:30
Neil Chauhan	f4f55481d6	feat: add the new @mention functionality to display recall values based on dummy options	2023-11-22 18:05:28 +05:30