@rtpa25 is attempting to deploy a commit to the formbricks Team on Vercel.

A member of the Team first needs to authorize it.

Thank you for following the naming conventions for pull request titles! 🙏

The new code added in the PR is mostly sound, however there are a couple of points that could use a bit of enhancement:

1. In the OpenQuestionForm component, you are using a useState hook to initialize the showImageUploader state with logic based on whether question.imageUrl exists. A more robust approach would be to handle this logic in useEffect which runs after each render. When the question changes, the visibility of the image uploader could be set accordingly.

Here's a way to that:

import { useEffect } from "react";

...

useEffect(() => {
  setShowImageUploader(!!question.imageUrl);
}, [question.imageUrl]);

2. Accessing the environmentId by splitting and indexing the pathname could introduce bugs if the pathname structure changes in the future. If possible, this value should be passed as a prop to the component, or obtained through a more reliable method.

3. When adding an ImagePlusIcon onClick event, it is considered a good practice to provide an accessible name for this clickable icon using aria-label attribute.

<ImagePlusIcon
   aria-label="Toggle image uploader"
   className="ml-2 h-4 w-4 cursor-pointer text-slate-400 hover:text-slate-500"
   onClick={() => setShowImageUploader((prev) => !prev)}
/>

4. In the rendering of the image in OpenTextQuestion.tsx, it is better to provide a more informative alt text. You can use the question headline for this purpose.

<img src={question.imageUrl} alt={`Image for ${question.headline}`} className={"my-4 rounded-md"} />

With these changes, your PR would be even more solid!
The PR shows that the version of next in package.json has been updated. It's a good practice to keep packages updated, especially when the updates include important bug fixes or improvements that your project could benefit from.

Remember to test your application thoroughly after updating any dependencies to ensure that everything still works as expected.

While this change itself doesn't require any code suggestions, the following might be helpful for your overall project: consider using a package like npm-check-updates to streamline the process of keeping your dependencies up to date.

You can install it globally in the development environment and run it to update all packages at once:

npm install -g npm-check-updates
ncu -u
npm install

Is there any reason next was updated individually rather than together with other packages that might also need updates? Please keep updates systematic to ensure smooth dependencies handling.
The changes in this PR look good for the most part. However, let's take into consideration a few suggestions to enhance your docker-compose code:

1. It seems you're leaving a number of settings open in your docker-compose file. It's a good practice to avoid exposing sensitive information. Ideally, sensitive data should be fetched from environment variables or secrets. For example, for x-smtp-password: &smtp_password, the SMTP password could be read from an environment variable:

-  x-smtp-password: &smtp_password # Set the below value to your public-facing URL, e.g., https://example.com
+  x-smtp-password: ${SMTP_PASSWORD}

2. The format of comments within the yml file has been changed. Keep in mind that comments should ideally go on a separate line instead of in-line with the code to improve readability:

-  x-smtp-port: &smtp_port # Enable SMTP_SECURE_ENABLED for TLS (port 465)
+  # Enable SMTP_SECURE_ENABLED for TLS (port 465)
+  x-smtp-port: &smtp_port

Other than these points, your formatting changes help clear up some clutter, making the code more readable. Good job!
The new property imageUrl seems to be well integrated into the ZSurveyOpenTextQuestion schema. Just make sure that it is validated in an appropriate stage before performing any critical operations. Here is a suggestion of how it can be done:

import * as Joi from 'joi';

const imageUrlValidationSchema = Joi.string().uri();

const isValidUrl = (url: string) => imageUrlValidationSchema.validate(url).error ? false : true;

You can use this validation function isValidUrl before saving or using the image URL. For instance:

if(isValidUrl(imageUrl)) {
  // perform operation
} else {
  // return or throw error
}

Remember, the suggestion above depends on the joi package. Make sure it's included in the dependencies of your project before using it.

However, whether you need to validate the imageUrl before using it depends on the trust level of the input and the operations you will perform with it. For example, if the imageUrl is user-generated and will be rendered on client-side, validating it against XSS attacks might be important. If it's a server-internal URL, validation may not be necessary.
From your PR, it looks like some packages have been downgraded, for example, the version of turbo was changed from 1.10.14 to 1.10.12. It's usually recommended to use the latest stable version of the dependencies, unless there is a specific requirement to downgrade to an older version.

Also, please make sure to perform thorough testing after changing dependencies' versions to assure the system's stability and performance.

Here is a suggestion:

...
    turbo:
    specifier: latest
-        version: 1.10.12
+        version: 1.10.14
...

Ensure that the entire system is tested thoroughly after the changes to the dependencies are made.

LGTM

Also I think packages/ui would be a better place to keep the new component, since we keep all our UI components over there @rtpa25

@anjy7 Not necessarily, UI components are Input, Label etc which do not have any business specific logic, but this has packages/ui is the ui library of a product, this does not belong there IMO thoughts @mattinannt

@mattinannt done with the review, could you please look into this.