⚡ Add more video supports (#1023)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
	- Introduced a new layout option for the TextInput component.
- Added support for GUMLET and TIKTOK video content types in
VideoBubbleContent.
- Enhanced VideoUploadContent to handle new properties like aspectRatio
and maxWidth.
- Updated VideoBubble to include aspect-ratio and max-width styles based
on content properties.
- **Refactor**
- Changed the extension used for internationalization (i18n) in the VS
Code environment.
	- Modified how environment variables are accessed in tolgee.tsx.
- Updated parseVideoUrl function to include a new property
videoSizeSuggestion.
- **Chores**
- Updated the tolgeeEnv object in env.ts and added a new optional
parameter to the getRuntimeVariable function.
- Expanded video handling capabilities by introducing new video content
types and associated regular expressions.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Closes #978 #936 #926

apps/builder/src/components/inputs/TextInput.tsx

@@ -8,6 +8,7 @@ import {
   HStack,
   Input as ChakraInput,
   InputProps,
+  Stack,
 } from '@chakra-ui/react'
 import { Variable } from '@typebot.io/schemas'
 import React, {
@@ -33,6 +34,7 @@ export type TextInputProps = {
   isRequired?: boolean
   placeholder?: string
   isDisabled?: boolean
+  direction?: 'row' | 'column'
 } & Pick<
   InputProps,
   | 'autoComplete'
@@ -63,6 +65,7 @@ export const TextInput = forwardRef(function TextInput(
     onKeyUp,
     size,
     maxWidth,
+    direction = 'column',
   }: TextInputProps,
   ref
 ) {
@@ -134,9 +137,15 @@ export const TextInput = forwardRef(function TextInput(
   )
 
   return (
-    <FormControl isRequired={isRequired}>
+    <FormControl
+      isRequired={isRequired}
+      as={direction === 'column' ? Stack : HStack}
+      justifyContent="space-between"
+      width={label ? 'full' : 'auto'}
+      spacing={direction === 'column' ? 2 : 3}
+    >
       {label && (
-        <FormLabel>
+        <FormLabel display="flex" flexShrink={0} gap="1" mb="0" mr="0">
           {label}{' '}
           {moreInfoTooltip && (
             <MoreInfoTooltip>{moreInfoTooltip}</MoreInfoTooltip>