🌐 Add theme tab translation keys (#1119)

## Summary by CodeRabbit - **New Features** - Implemented internationalization across various components, enabling dynamic language translation for UI elements. - **Enhancements** - Improved accessibility with translated `aria-label` attributes. - Enhanced user interface with translated button texts and labels. - **Refactor** - Streamlined translation handling with the `useTranslate` hook. - **Bug Fixes** - Corrected tooltip label for better clarity. - **Style** - Updated visual elements to reflect changes in language settings.  --------- Co-authored-by: Baptiste Arnaud <baptiste.arnaud95@gmail.com>
2023-12-29 08:02:14 -03:00
parent f26eafd26f
commit 5fbbe9d86e
23 changed files with 186 additions and 62 deletions
--- a/apps/builder/src/components/ColorPicker.tsx
+++ b/apps/builder/src/components/ColorPicker.tsx
@ -14,6 +14,7 @@ import {
  ButtonProps,
  Box,
 } from '@chakra-ui/react'
+import { useTranslate } from '@tolgee/react'
 import React, { ChangeEvent, useState } from 'react'
 import tinyColor from 'tinycolor2'

@ -37,6 +38,7 @@ type Props = {
 }

 export const ColorPicker = ({ value, defaultValue, onColorChange }: Props) => {
+  const { t } = useTranslate()
  const [color, setColor] = useState(defaultValue ?? '')
  const displayedValue = value ?? color

@ -54,7 +56,7 @@ export const ColorPicker = ({ value, defaultValue, onColorChange }: Props) => {
    <Popover variant="picker" placement="right" isLazy>
      <PopoverTrigger>
        <Button
-          aria-label={'Pick a color'}
+          aria-label={t('colorPicker.pickColor.ariaLabel')}
          height="22px"
          width="22px"
          padding={0}
@ -98,7 +100,7 @@ export const ColorPicker = ({ value, defaultValue, onColorChange }: Props) => {
            borderRadius={3}
            marginTop={3}
            placeholder="#2a9d8f"
-            aria-label="Color value"
+            aria-label={t('colorPicker.colorValue.ariaLabel')}
            size="sm"
            value={displayedValue}
            onChange={handleColorChange}
@ -108,7 +110,7 @@ export const ColorPicker = ({ value, defaultValue, onColorChange }: Props) => {
            color={displayedValue}
            onColorChange={handleColorChange}
          >
-            Advanced picker
+            {t('colorPicker.advancedColors')}
          </NativeColorPicker>
        </PopoverBody>
      </PopoverContent>
--- a/apps/builder/src/features/editor/components/EditableTypebotName.tsx
+++ b/apps/builder/src/features/editor/components/EditableTypebotName.tsx
@ -27,7 +27,7 @@ export const EditableTypebotName = ({
  }

  return (
-    <Tooltip label={t('editor.editableTypebotName.tooltip.rename.label')}>
+    <Tooltip label={t('rename')}>
      <Editable
        value={currentName}
        onChange={setCurrentName}
--- a/apps/builder/src/features/theme/components/MyTemplates.tsx
+++ b/apps/builder/src/features/theme/components/MyTemplates.tsx
@ -5,6 +5,7 @@ import { ThemeTemplate } from '@typebot.io/schemas'
 import { areThemesEqual } from '../helpers/areThemesEqual'
 import { SaveThemeModal } from './SaveThemeModal'
 import { ThemeTemplateCard } from './ThemeTemplateCard'
+import { useTranslate } from '@tolgee/react'

 type Props = {
  selectedTemplateId: string | undefined
@ -21,6 +22,7 @@ export const MyTemplates = ({
  workspaceId,
  onTemplateSelect,
 }: Props) => {
+  const { t } = useTranslate()
  const { isOpen, onOpen, onClose } = useDisclosure()
  const { data } = trpc.theme.listThemeTemplates.useQuery({
    workspaceId,
@ -41,7 +43,7 @@ export const MyTemplates = ({
      {(!selectedTemplate ||
        !areThemesEqual(selectedTemplate?.theme, currentTheme)) && (
        <Button leftIcon={<SaveIcon />} onClick={onOpen} colorScheme="blue">
-          Save current theme
+          {t('theme.sideMenu.template.myTemplates.saveTheme')}
        </Button>
      )}
      <SaveThemeModal
--- a/apps/builder/src/features/theme/components/SaveThemeModal.tsx
+++ b/apps/builder/src/features/theme/components/SaveThemeModal.tsx
@ -13,6 +13,7 @@ import {
  ModalOverlay,
 } from '@chakra-ui/react'
 import { createId } from '@paralleldrive/cuid2'
+import { useTranslate } from '@tolgee/react'
 import { ThemeTemplate } from '@typebot.io/schemas'
 import { FormEvent, useRef, useState } from 'react'

@ -31,6 +32,7 @@ export const SaveThemeModal = ({
  selectedTemplate,
  theme,
 }: Props) => {
+  const { t } = useTranslate()
  const { showToast } = useToast()
  const [isSaving, setIsSaving] = useState(false)
  const inputRef = useRef<HTMLInputElement>(null)
@ -80,15 +82,19 @@ export const SaveThemeModal = ({
    <Modal isOpen={isOpen} onClose={onClose} initialFocusRef={inputRef}>
      <ModalOverlay />
      <ModalContent as="form" onSubmit={updateExistingTemplate}>
-        <ModalHeader>Save theme</ModalHeader>
+        <ModalHeader>
+          {t('theme.sideMenu.template.myTemplates.saveTheme.title')}
+        </ModalHeader>
        <ModalCloseButton />
        <ModalBody>
          <TextInput
            ref={inputRef}
-            label="Name:"
+            label={t('theme.sideMenu.template.myTemplates.saveTheme.name')}
            defaultValue={selectedTemplate?.name}
            withVariableButton={false}
-            placeholder="My template"
+            placeholder={t(
+              'theme.sideMenu.template.myTemplates.saveTheme.myTemplate'
+            )}
            isRequired
          />
        </ModalBody>
@ -96,11 +102,11 @@ export const SaveThemeModal = ({
        <ModalFooter as={HStack}>
          {selectedTemplate?.id && (
            <Button isLoading={isSaving} onClick={saveNewTemplate}>
-              Save as new template
+              {t('theme.sideMenu.template.myTemplates.saveTheme.saveAsNew')}
            </Button>
          )}
          <Button type="submit" colorScheme="blue" isLoading={isSaving}>
-            {selectedTemplate?.id ? 'Update' : 'Save'}
+            {selectedTemplate?.id ? t('update') : t('save')}
          </Button>
        </ModalFooter>
      </ModalContent>
--- a/apps/builder/src/features/theme/components/ThemeSideMenu.tsx
+++ b/apps/builder/src/features/theme/components/ThemeSideMenu.tsx
@ -18,8 +18,11 @@ import { ChatThemeSettings } from './chat/ChatThemeSettings'
 import { GeneralSettings } from './general/GeneralSettings'
 import { ThemeTemplates } from './ThemeTemplates'
 import { defaultSettings } from '@typebot.io/schemas/features/typebot/settings/constants'
+import { useTranslate } from '@tolgee/react'

 export const ThemeSideMenu = () => {
+  const { t } = useTranslate()
+
  const { typebot, updateTypebot, currentUserMode } = useTypebot()

  const updateChatTheme = (chat: ChatTheme) =>
@ -67,7 +70,7 @@ export const ThemeSideMenu = () => {
      position="relative"
    >
      <Heading fontSize="xl" textAlign="center">
-        Customize the theme
+        {t('theme.sideMenu.title')}
      </Heading>
      <Accordion allowMultiple>
        {currentUserMode === 'write' && (
@ -75,7 +78,7 @@ export const ThemeSideMenu = () => {
            <AccordionButton py={6}>
              <HStack flex="1" pl={2}>
                <TableIcon />
-                <Heading fontSize="lg">Templates</Heading>
+                <Heading fontSize="lg">{t('theme.sideMenu.template')}</Heading>
              </HStack>
              <AccordionIcon />
            </AccordionButton>
@ -97,7 +100,7 @@ export const ThemeSideMenu = () => {
          <AccordionButton py={6}>
            <HStack flex="1" pl={2}>
              <DropletIcon />
-              <Heading fontSize="lg">Global</Heading>
+              <Heading fontSize="lg">{t('theme.sideMenu.global')}</Heading>
            </HStack>
            <AccordionIcon />
          </AccordionButton>
@ -119,7 +122,7 @@ export const ThemeSideMenu = () => {
          <AccordionButton py={6}>
            <HStack flex="1" pl={2}>
              <ChatIcon />
-              <Heading fontSize="lg">Chat</Heading>
+              <Heading fontSize="lg">{t('theme.sideMenu.chat')}</Heading>
            </HStack>
            <AccordionIcon />
          </AccordionButton>
@ -138,7 +141,7 @@ export const ThemeSideMenu = () => {
          <AccordionButton py={6}>
            <HStack flex="1" pl={2}>
              <CodeIcon />
-              <Heading fontSize="lg">Custom CSS</Heading>
+              <Heading fontSize="lg">{t('theme.sideMenu.customCSS')}</Heading>
            </HStack>
            <AccordionIcon />
          </AccordionButton>
--- a/apps/builder/src/features/theme/components/ThemeTemplateCard.tsx
+++ b/apps/builder/src/features/theme/components/ThemeTemplateCard.tsx
@ -22,6 +22,7 @@ import {
  BackgroundType,
  defaultTheme,
 } from '@typebot.io/schemas/features/typebot/theme/constants'
+import { useTranslate } from '@tolgee/react'

 export const ThemeTemplateCard = ({
  workspaceId,
@ -38,6 +39,7 @@ export const ThemeTemplateCard = ({
  onClick: () => void
  onDeleteSuccess?: () => void
 }) => {
+  const { t } = useTranslate()
  const borderWidth = useColorModeValue(undefined, '1px')
  const [isDeleting, setIsDeleting] = useState(false)

@ -160,7 +162,9 @@ export const ThemeTemplateCard = ({
            <MenuButton
              as={IconButton}
              icon={<MoreHorizontalIcon />}
-              aria-label="Open template menu"
+              aria-label={t(
+                'theme.sideMenu.template.myTemplates.menu.ariaLabel'
+              )}
              variant="ghost"
              size="xs"
              onClick={(e) => e.stopPropagation()}
@ -168,7 +172,7 @@ export const ThemeTemplateCard = ({
            <MenuList onClick={(e) => e.stopPropagation()}>
              {isSelected && (
                <MenuItem icon={<EditIcon />} onClick={onRenameClick}>
-                  Rename
+                  {t('rename')}
                </MenuItem>
              )}
              <MenuItem
@ -176,7 +180,7 @@ export const ThemeTemplateCard = ({
                color="red.500"
                onClick={deleteThemeTemplate}
              >
-                Delete
+                {t('delete')}
              </MenuItem>
            </MenuList>
          </Menu>
@ -208,11 +212,12 @@ const AvatarPreview = ({
 }: {
  avatar: NonNullable<Theme['chat']>['hostAvatar']
 }) => {
+  const { t } = useTranslate()
  if (avatar?.isEnabled) return null
  return avatar?.url ? (
    <Image
      src={avatar.url}
-      alt="Avatar preview in theme template card"
+      alt={t('theme.sideMenu.template.gallery.avatarPreview.alt')}
      boxSize="12px"
      rounded="full"
    />
--- a/apps/builder/src/features/theme/components/ThemeTemplates.tsx
+++ b/apps/builder/src/features/theme/components/ThemeTemplates.tsx
@ -3,6 +3,7 @@ import { ThemeTemplate } from '@typebot.io/schemas'
 import { useState } from 'react'
 import { MyTemplates } from './MyTemplates'
 import { TemplatesGallery } from './TemplatesGallery'
+import { useTranslate } from '@tolgee/react'

 type Tab = 'my-templates' | 'gallery'

@ -21,6 +22,8 @@ export const ThemeTemplates = ({
  currentTheme,
  onTemplateSelect,
 }: Props) => {
+  const { t } = useTranslate()
+
  const [selectedTab, setSelectedTab] = useState<Tab>('my-templates')

  return (
@ -32,7 +35,7 @@ export const ThemeTemplates = ({
          colorScheme={selectedTab === 'my-templates' ? 'blue' : 'gray'}
          onClick={() => setSelectedTab('my-templates')}
        >
-          My templates
+          {t('theme.sideMenu.template.myTemplates')}
        </Button>
        <Button
          flex="1"
@ -40,7 +43,7 @@ export const ThemeTemplates = ({
          colorScheme={selectedTab === 'gallery' ? 'blue' : 'gray'}
          onClick={() => setSelectedTab('gallery')}
        >
-          Gallery
+          {t('theme.sideMenu.template.gallery')}
        </Button>
      </HStack>
      <ThemeTemplatesBody
--- a/apps/builder/src/features/theme/components/chat/ButtonsTheme.tsx
+++ b/apps/builder/src/features/theme/components/chat/ButtonsTheme.tsx
@ -2,6 +2,7 @@ import { Stack, Flex, Text } from '@chakra-ui/react'
 import { Theme } from '@typebot.io/schemas'
 import React from 'react'
 import { ColorPicker } from '../../../../components/ColorPicker'
+import { useTranslate } from '@tolgee/react'

 type Props = {
  buttons: NonNullable<Theme['chat']>['buttons']
@ -9,6 +10,8 @@ type Props = {
 }

 export const ButtonsTheme = ({ buttons, onButtonsChange }: Props) => {
+  const { t } = useTranslate()
+
  const handleBackgroundChange = (backgroundColor: string) =>
    onButtonsChange({ ...buttons, backgroundColor })
  const handleTextChange = (color: string) =>
@ -17,14 +20,14 @@ export const ButtonsTheme = ({ buttons, onButtonsChange }: Props) => {
  return (
    <Stack data-testid="buttons-theme">
      <Flex justify="space-between" align="center">
-        <Text>Background:</Text>
+        <Text>{t('theme.sideMenu.chat.theme.background')}</Text>
        <ColorPicker
          value={buttons?.backgroundColor}
          onColorChange={handleBackgroundChange}
        />
      </Flex>
      <Flex justify="space-between" align="center">
-        <Text>Text:</Text>
+        <Text>{t('theme.sideMenu.chat.theme.text')}</Text>
        <ColorPicker value={buttons?.color} onColorChange={handleTextChange} />
      </Flex>
    </Stack>
--- a/apps/builder/src/features/theme/components/chat/ChatThemeSettings.tsx
+++ b/apps/builder/src/features/theme/components/chat/ChatThemeSettings.tsx
@ -13,6 +13,7 @@ import { GuestBubbles } from './GuestBubbles'
 import { HostBubbles } from './HostBubbles'
 import { InputsTheme } from './InputsTheme'
 import { defaultTheme } from '@typebot.io/schemas/features/typebot/theme/constants'
+import { useTranslate } from '@tolgee/react'

 type Props = {
  workspaceId: string
@ -27,6 +28,8 @@ export const ChatThemeSettings = ({
  chatTheme,
  onChatThemeChange,
 }: Props) => {
+  const { t } = useTranslate()
+
  const updateHostBubbles = (
    hostBubbles: NonNullable<Theme['chat']>['hostBubbles']
  ) => onChatThemeChange({ ...chatTheme, hostBubbles })
@ -55,7 +58,7 @@ export const ChatThemeSettings = ({
          typebotId,
          fileName: 'hostAvatar',
        }}
-        title="Bot avatar"
+        title={t('theme.sideMenu.chat.botAvatar')}
        avatarProps={chatTheme?.hostAvatar}
        isDefaultCheck
        onAvatarChange={updateHostAvatar}
@ -66,12 +69,12 @@ export const ChatThemeSettings = ({
          typebotId,
          fileName: 'guestAvatar',
        }}
-        title="User avatar"
+        title={t('theme.sideMenu.chat.userAvatar')}
        avatarProps={chatTheme?.guestAvatar}
        onAvatarChange={updateGuestAvatar}
      />
      <Stack borderWidth={1} rounded="md" p="4" spacing={4}>
-        <Heading fontSize="lg">Bot bubbles</Heading>
+        <Heading fontSize="lg">{t('theme.sideMenu.chat.botBubbles')}</Heading>
        <HostBubbles
          hostBubbles={chatTheme?.hostBubbles}
          onHostBubblesChange={updateHostBubbles}
@ -79,25 +82,27 @@ export const ChatThemeSettings = ({
      </Stack>

      <Stack borderWidth={1} rounded="md" p="4" spacing={4}>
-        <Heading fontSize="lg">User bubbles</Heading>
+        <Heading fontSize="lg">{t('theme.sideMenu.chat.userBubbles')}</Heading>
        <GuestBubbles
          guestBubbles={chatTheme?.guestBubbles}
          onGuestBubblesChange={updateGuestBubbles}
        />
      </Stack>
      <Stack borderWidth={1} rounded="md" p="4" spacing={4}>
-        <Heading fontSize="lg">Buttons</Heading>
+        <Heading fontSize="lg">{t('theme.sideMenu.chat.buttons')}</Heading>
        <ButtonsTheme
          buttons={chatTheme?.buttons}
          onButtonsChange={updateButtons}
        />
      </Stack>
      <Stack borderWidth={1} rounded="md" p="4" spacing={4}>
-        <Heading fontSize="lg">Inputs</Heading>
+        <Heading fontSize="lg">{t('theme.sideMenu.chat.inputs')}</Heading>
        <InputsTheme inputs={chatTheme?.inputs} onInputsChange={updateInputs} />
      </Stack>
      <Stack borderWidth={1} rounded="md" p="4" spacing={4}>
-        <Heading fontSize="lg">Corners roundness</Heading>
+        <Heading fontSize="lg">
+          {t('theme.sideMenu.chat.cornersRoundness')}
+        </Heading>
        <RadioButtons
          options={[
            {
--- a/apps/builder/src/features/theme/components/chat/GuestBubbles.tsx
+++ b/apps/builder/src/features/theme/components/chat/GuestBubbles.tsx
@ -3,6 +3,7 @@ import { ContainerColors } from '@typebot.io/schemas'
 import React from 'react'
 import { ColorPicker } from '../../../../components/ColorPicker'
 import { defaultTheme } from '@typebot.io/schemas/features/typebot/theme/constants'
+import { useTranslate } from '@tolgee/react'

 type Props = {
  guestBubbles: ContainerColors | undefined
@ -10,6 +11,8 @@ type Props = {
 }

 export const GuestBubbles = ({ guestBubbles, onGuestBubblesChange }: Props) => {
+  const { t } = useTranslate()
+
  const updateBackground = (backgroundColor: string) =>
    onGuestBubblesChange({ ...guestBubbles, backgroundColor })

@ -19,7 +22,7 @@ export const GuestBubbles = ({ guestBubbles, onGuestBubblesChange }: Props) => {
  return (
    <Stack data-testid="guest-bubbles-theme">
      <Flex justify="space-between" align="center">
-        <Text>Background:</Text>
+        <Text>{t('theme.sideMenu.chat.theme.background')}</Text>
        <ColorPicker
          value={
            guestBubbles?.backgroundColor ??
@ -29,7 +32,7 @@ export const GuestBubbles = ({ guestBubbles, onGuestBubblesChange }: Props) => {
        />
      </Flex>
      <Flex justify="space-between" align="center">
-        <Text>Text:</Text>
+        <Text>{t('theme.sideMenu.chat.theme.text')}</Text>
        <ColorPicker
          value={guestBubbles?.color ?? defaultTheme.chat.guestBubbles.color}
          onColorChange={updateText}
--- a/apps/builder/src/features/theme/components/chat/HostBubbles.tsx
+++ b/apps/builder/src/features/theme/components/chat/HostBubbles.tsx
@ -3,6 +3,7 @@ import { ContainerColors } from '@typebot.io/schemas'
 import React from 'react'
 import { ColorPicker } from '../../../../components/ColorPicker'
 import { defaultTheme } from '@typebot.io/schemas/features/typebot/theme/constants'
+import { useTranslate } from '@tolgee/react'

 type Props = {
  hostBubbles: ContainerColors | undefined
@ -10,6 +11,8 @@ type Props = {
 }

 export const HostBubbles = ({ hostBubbles, onHostBubblesChange }: Props) => {
+  const { t } = useTranslate()
+
  const handleBackgroundChange = (backgroundColor: string) =>
    onHostBubblesChange({ ...hostBubbles, backgroundColor })
  const handleTextChange = (color: string) =>
@ -18,7 +21,7 @@ export const HostBubbles = ({ hostBubbles, onHostBubblesChange }: Props) => {
  return (
    <Stack data-testid="host-bubbles-theme">
      <Flex justify="space-between" align="center">
-        <Text>Background:</Text>
+        <Text>{t('theme.sideMenu.chat.theme.background')}</Text>
        <ColorPicker
          value={
            hostBubbles?.backgroundColor ??
@ -28,7 +31,7 @@ export const HostBubbles = ({ hostBubbles, onHostBubblesChange }: Props) => {
        />
      </Flex>
      <Flex justify="space-between" align="center">
-        <Text>Text:</Text>
+        <Text>{t('theme.sideMenu.chat.theme.text')}</Text>
        <ColorPicker
          value={hostBubbles?.color ?? defaultTheme.chat.hostBubbles.color}
          onColorChange={handleTextChange}
--- a/apps/builder/src/features/theme/components/chat/InputsTheme.tsx
+++ b/apps/builder/src/features/theme/components/chat/InputsTheme.tsx
@ -2,6 +2,7 @@ import { Stack, Flex, Text } from '@chakra-ui/react'
 import { InputColors, Theme } from '@typebot.io/schemas'
 import React from 'react'
 import { ColorPicker } from '../../../../components/ColorPicker'
+import { useTranslate } from '@tolgee/react'

 type Props = {
  inputs: NonNullable<Theme['chat']>['inputs']
@ -9,6 +10,8 @@ type Props = {
 }

 export const InputsTheme = ({ inputs, onInputsChange }: Props) => {
+  const { t } = useTranslate()
+
  const handleBackgroundChange = (backgroundColor: string) =>
    onInputsChange({ ...inputs, backgroundColor })
  const handleTextChange = (color: string) =>
@ -19,18 +22,18 @@ export const InputsTheme = ({ inputs, onInputsChange }: Props) => {
  return (
    <Stack data-testid="inputs-theme">
      <Flex justify="space-between" align="center">
-        <Text>Background:</Text>
+        <Text>{t('theme.sideMenu.chat.theme.background')}</Text>
        <ColorPicker
          value={inputs?.backgroundColor}
          onColorChange={handleBackgroundChange}
        />
      </Flex>
      <Flex justify="space-between" align="center">
-        <Text>Text:</Text>
+        <Text>{t('theme.sideMenu.chat.theme.text')}</Text>
        <ColorPicker value={inputs?.color} onColorChange={handleTextChange} />
      </Flex>
      <Flex justify="space-between" align="center">
-        <Text>Placeholder text:</Text>
+        <Text>{t('theme.sideMenu.chat.theme.placeholder')}</Text>
        <ColorPicker
          value={inputs?.placeholderColor}
          onColorChange={handlePlaceholderChange}
--- a/apps/builder/src/features/theme/components/general/BackgroundContent.tsx
+++ b/apps/builder/src/features/theme/components/general/BackgroundContent.tsx
@ -18,6 +18,7 @@ import {
  BackgroundType,
  defaultTheme,
 } from '@typebot.io/schemas/features/typebot/theme/constants'
+import { useTranslate } from '@tolgee/react'

 type BackgroundContentProps = {
  background?: Background
@ -28,6 +29,7 @@ export const BackgroundContent = ({
  background,
  onBackgroundContentChange,
 }: BackgroundContentProps) => {
+  const { t } = useTranslate()
  const { typebot } = useTypebot()
  const handleContentChange = (content: string) =>
    onBackgroundContentChange(content)
@ -36,7 +38,7 @@ export const BackgroundContent = ({
    case BackgroundType.COLOR:
      return (
        <Flex justify="space-between" align="center">
-          <Text>Background color:</Text>
+          <Text>{t('theme.sideMenu.global.background.color')}</Text>
          <ColorPicker
            value={
              background.content ?? defaultTheme.general.background.content
@ -53,7 +55,7 @@ export const BackgroundContent = ({
            {isNotEmpty(background.content) ? (
              <Image
                src={background.content}
-                alt="Background image"
+                alt={t('theme.sideMenu.global.background.image.alt')}
                cursor="pointer"
                _hover={{ filter: 'brightness(.9)' }}
                transition="filter 200ms"
@ -62,7 +64,9 @@ export const BackgroundContent = ({
                objectFit="cover"
              />
            ) : (
-              <Button>Select an image</Button>
+              <Button>
+                {t('theme.sideMenu.global.background.image.button')}
+              </Button>
            )}
          </PopoverTrigger>
          <Portal>
--- a/apps/builder/src/features/theme/components/general/BackgroundSelector.tsx
+++ b/apps/builder/src/features/theme/components/general/BackgroundSelector.tsx
@ -4,6 +4,7 @@ import { Background } from '@typebot.io/schemas'
 import React from 'react'
 import { BackgroundContent } from './BackgroundContent'
 import { BackgroundType } from '@typebot.io/schemas/features/typebot/theme/constants'
+import { useTranslate } from '@tolgee/react'

 type Props = {
  background?: Background
@ -16,6 +17,8 @@ export const BackgroundSelector = ({
  background,
  onBackgroundChange,
 }: Props) => {
+  const { t } = useTranslate()
+
  const handleBackgroundTypeChange = (type: BackgroundType) =>
    background &&
    onBackgroundChange({ ...background, type, content: undefined })
@ -25,12 +28,21 @@ export const BackgroundSelector = ({

  return (
    <Stack spacing={4}>
-      <Text>Background</Text>
+      <Text>{t('theme.sideMenu.global.background')}</Text>
      <RadioButtons
        options={[
-          BackgroundType.COLOR,
-          BackgroundType.IMAGE,
-          BackgroundType.NONE,
+          {
+            label: t('theme.sideMenu.global.background.color.select'),
+            value: BackgroundType.COLOR,
+          },
+          {
+            label: t('theme.sideMenu.global.background.image.select'),
+            value: BackgroundType.IMAGE,
+          },
+          {
+            label: t('theme.sideMenu.global.background.none.select'),
+            value: BackgroundType.NONE,
+          },
        ]}
        value={background?.type ?? defaultBackgroundType}
        onSelect={handleBackgroundTypeChange}
--- a/apps/builder/src/features/theme/components/general/FontSelector.tsx
+++ b/apps/builder/src/features/theme/components/general/FontSelector.tsx
@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { Text, HStack } from '@chakra-ui/react'
 import { AutocompleteInput } from '@/components/inputs/AutocompleteInput'
 import { env } from '@typebot.io/env'
+import { useTranslate } from '@tolgee/react'

 type FontSelectorProps = {
  activeFont?: string
@ -12,6 +13,7 @@ export const FontSelector = ({
  activeFont,
  onSelectFont,
 }: FontSelectorProps) => {
+  const { t } = useTranslate()
  const [currentFont, setCurrentFont] = useState(activeFont)
  const [googleFonts, setGoogleFonts] = useState<string[]>([])

@ -37,7 +39,7 @@ export const FontSelector = ({

  return (
    <HStack justify="space-between" align="center">
-      <Text>Font</Text>
+      <Text>{t('theme.sideMenu.global.font')}</Text>
      <AutocompleteInput
        value={activeFont}
        items={googleFonts}
--- a/apps/builder/src/features/theme/components/general/GeneralSettings.tsx
+++ b/apps/builder/src/features/theme/components/general/GeneralSettings.tsx
@ -53,7 +53,7 @@ export const GeneralSettings = ({
        onClick={isWorkspaceFreePlan ? onOpen : undefined}
      >
        <FormLabel htmlFor="branding" mb="0" cursor="pointer">
-          Show Typebot brand{' '}
+          {t('theme.sideMenu.global.typebotBrand')}{' '}
          {isWorkspaceFreePlan && <LockTag plan={Plan.STARTER} />}
        </FormLabel>
        <Switch
--- a/apps/builder/src/i18n/de.json
+++ b/apps/builder/src/i18n/de.json
@ -140,7 +140,6 @@
  "editor.blocks.bubbles.textEditor.plate.label": "Texteditor",
  "editor.blocks.bubbles.textEditor.searchVariable.placeholder": "Nach einer Variable suchen",
  "editor.blocks.start.text": "Start",
-  "editor.editableTypebotName.tooltip.rename.label": "Umbenennen",
  "editor.gettingStartedModal.editorBasics.heading": "Grundlagen des Editors",
  "editor.gettingStartedModal.editorBasics.list.four.label": "Klicke auf die Vorschau-Schaltfläche oben rechts, um deinen Bot anzusehen.",
  "editor.gettingStartedModal.editorBasics.list.label": "Wenn du Fragen hast, verwende gerne die Sprechblase unten rechts, um sie mir zu stellen. Ich beantworte normalerweise innerhalb der nächsten 24 Stunden. \uD83D\uDE03",
@ -212,6 +211,7 @@
  "folders.typebotButton.unpublish": "Veröffentlichung aufheben",
  "pending": "Ausstehend",
  "remove": "Entfernen",
+  "rename": "Umbenennen",
  "share.button.label": "Teilen",
  "skip": "Überspringen",
  "templates.buttons.fromScratchButton.label": "Von Grund auf starten",
--- a/apps/builder/src/i18n/en.json
+++ b/apps/builder/src/i18n/en.json
@ -120,6 +120,9 @@
  "collaboration.roles.edit.label": "Can edit",
  "collaboration.roles.full.label": "Full access",
  "collaboration.roles.view.label": "Can view",
+  "colorPicker.advancedColors": "Advanced colors",
+  "colorPicker.colorValue.ariaLabel": "Color value",
+  "colorPicker.pickColor.ariaLabel": "Pick a color",
  "confirmModal.defaultTitle": "Are you sure?",
  "copied": "Copied",
  "copy": "Copy",
@ -146,7 +149,6 @@
  "editor.blocks.bubbles.textEditor.plate.label": "Text editor",
  "editor.blocks.bubbles.textEditor.searchVariable.placeholder": "Search for a variable",
  "editor.blocks.start.text": "Start",
-  "editor.editableTypebotName.tooltip.rename.label": "Rename",
  "editor.gettingStartedModal.editorBasics.heading": "Editor Basics",
  "editor.gettingStartedModal.editorBasics.list.four.label": "Preview your bot by clicking the test button on the top right",
  "editor.gettingStartedModal.editorBasics.list.label": "Feel free to use the bottom-right bubble to reach out if you have any question. I usually answer within the next 24 hours. \uD83D\uDE03",
@ -241,8 +243,6 @@
  "publish.error.label": "Error while publishing typebot",
  "publish.versionWarning.checkBreakingChanges": "Make sure to check out all the <link>associated breaking changes</link>",
  "publish.versionWarning.message.aboutToDeploy.label": "You are about to a deploy a version of your bot with an updated engine. (Typebot V6).",
-  "publish.versionWarning.message.breakingChanges.label": "associated breaking changes",
-  "publish.versionWarning.message.check.label": "Make sure to check out all the",
  "publish.versionWarning.message.testInPreviewMode.label": "Then test, the bot thoroughly in preview mode before publishing.",
  "publish.versionWarning.title.label": "⚠️ New engine version",
  "publishButton.closed.label": "Closed",
@ -254,9 +254,10 @@
  "publishButton.label": "Publish",
  "publishButton.published.label": "Published",
  "publishButton.tooltip.nonPublishedChanges.label": "There are non published changes.",
-  "publishButton.tooltip.publishedVersion.ago.label": "ago",
-  "publishButton.tooltip.publishedVersion.from.label": "Published version from <timeSince>test</timeSince>.",
+  "publishButton.tooltip.publishedVersion.from.label": "Published version from {timeSince}.",
  "remove": "Remove",
+  "rename": "Rename",
+  "save": "Save",
  "share.button.label": "Share",
  "share.button.popover.ariaLabel": "Open share popover",
  "share.button.popover.collaboratorsFetch.error.label": "Couldn't fetch collaborators",
@ -310,6 +311,39 @@
  "templates.modal.product.userOnboarding.description": "A bot that asks for new user information before he start using your product.",
  "templates.modal.product.userOnboarding.name": "User Onboarding",
  "templates.modal.useTemplateButton.label": "Use this template",
+  "theme.sideMenu.chat": "Chat",
+  "theme.sideMenu.chat.botAvatar": "Bot avatar",
+  "theme.sideMenu.chat.botBubbles": "Bot bubbles",
+  "theme.sideMenu.chat.buttons": "Buttons",
+  "theme.sideMenu.chat.cornersRoundness": "Corners roundness",
+  "theme.sideMenu.chat.inputs": "Inputs",
+  "theme.sideMenu.chat.theme.background": "Background:",
+  "theme.sideMenu.chat.theme.placeholder": "Placeholder text:",
+  "theme.sideMenu.chat.theme.text": "Text:",
+  "theme.sideMenu.chat.userAvatar": "User avatar",
+  "theme.sideMenu.chat.userBubbles": "User bubbles",
+  "theme.sideMenu.customCSS": "Custom CSS",
+  "theme.sideMenu.global": "Global",
+  "theme.sideMenu.global.background": "Background",
+  "theme.sideMenu.global.background.color": "Background color:",
+  "theme.sideMenu.global.background.color.select": "Color",
+  "theme.sideMenu.global.background.image.alt": "Background image",
+  "theme.sideMenu.global.background.image.button": "Select an image",
+  "theme.sideMenu.global.background.image.select": "Image",
+  "theme.sideMenu.global.background.none.select": "None",
+  "theme.sideMenu.global.font": "Font",
+  "theme.sideMenu.global.typebotBrand": "Show Typebot brand",
+  "theme.sideMenu.template": "Template",
+  "theme.sideMenu.template.gallery": "Gallery",
+  "theme.sideMenu.template.gallery.avatarPreview.alt": "Avatar preview in theme template card",
+  "theme.sideMenu.template.myTemplates": "My templates",
+  "theme.sideMenu.template.myTemplates.menu.ariaLabel": "Open template menu",
+  "theme.sideMenu.template.myTemplates.saveTheme": "Save current theme",
+  "theme.sideMenu.template.myTemplates.saveTheme.myTemplate": "My template",
+  "theme.sideMenu.template.myTemplates.saveTheme.name": "Name:",
+  "theme.sideMenu.template.myTemplates.saveTheme.saveAsNew": "Save as new template",
+  "theme.sideMenu.template.myTemplates.saveTheme.title": "Save theme",
+  "theme.sideMenu.title": "Customize the theme",
  "timeSince.days": "{count}d ago",
  "timeSince.hours": "{count}h ago",
  "timeSince.minutes": "{count}m ago",
@ -317,6 +351,7 @@
  "timeSince.seconds": "{count}s ago",
  "timeSince.years": "{count} years ago",
  "typebots.defaultName": "My typebot",
+  "update": "Update",
  "upgrade": "Upgrade",
  "variables.button.searchInput.placeholder": "Search for a variable",
  "variables.button.tooltip": "Insert a variable",
--- a/apps/builder/src/i18n/es.json
+++ b/apps/builder/src/i18n/es.json
@ -141,7 +141,6 @@
  "editor.blocks.bubbles.textEditor.plate.label": "Editor de texto",
  "editor.blocks.bubbles.textEditor.searchVariable.placeholder": "Buscar una variable",
  "editor.blocks.start.text": "Inicio",
-  "editor.editableTypebotName.tooltip.rename.label": "Renombrar",
  "editor.gettingStartedModal.editorBasics.heading": "Conceptos básicos del Editor",
  "editor.gettingStartedModal.editorBasics.list.four.label": "Previsualiza tu bot haciendo clic en el botón de previsualización en la esquina superior derecha",
  "editor.gettingStartedModal.editorBasics.list.label": "Si tienes alguna pregunta, no dudes en usar la burbuja en la esquina inferior derecha. Suelo responder en las próximas 24 horas. \uD83D\uDE03",
@ -213,6 +212,7 @@
  "folders.typebotButton.unpublish": "Despublicar",
  "pending": "Pendiente",
  "remove": "Eliminar",
+  "rename": "Renombrar",
  "share.button.label": "Compartir",
  "skip": "Saltar",
  "templates.buttons.fromScratchButton.label": "Empezar desde cero",
--- a/apps/builder/src/i18n/fr.json
+++ b/apps/builder/src/i18n/fr.json
@ -146,7 +146,6 @@
  "editor.blocks.bubbles.textEditor.plate.label": "Éditeur de texte",
  "editor.blocks.bubbles.textEditor.searchVariable.placeholder": "Rechercher une variable",
  "editor.blocks.start.text": "Démarrer",
-  "editor.editableTypebotName.tooltip.rename.label": "Renommer",
  "editor.gettingStartedModal.editorBasics.heading": "Principes de base de l'éditeur",
  "editor.gettingStartedModal.editorBasics.list.four.label": "Prévisualisez votre bot en cliquant sur le bouton \"Tester\" en haut à droite.",
  "editor.gettingStartedModal.editorBasics.list.label": "N'hésitez pas à utiliser la bulle en bas à droite pour me poser des questions. Je réponds généralement dans les 24 heures. \uD83D\uDE03",
@ -240,8 +239,6 @@
  "preview.restartButton.label": "Redémarrer",
  "publish.error.label": "Erreur lors de la publication du typebot",
  "publish.versionWarning.message.aboutToDeploy.label": "Tu es sur le point de déployer une version du typebot avec un nouveau moteur (Typebot v6).",
-  "publish.versionWarning.message.breakingChanges.label": "changements associés",
-  "publish.versionWarning.message.check.label": "Assure toi de bien vérifier les",
  "publish.versionWarning.message.testInPreviewMode.label": "Ensuite, test bien ton typebot avant de le publier à nouveau.",
  "publish.versionWarning.title.label": "⚠️ Nouvelle version du moteur",
  "publishButton.closed.label": "Fermé",
@ -254,6 +251,7 @@
  "publishButton.published.label": "Publié",
  "publishButton.tooltip.nonPublishedChanges.label": "Il y a des modifications non publiées.",
  "remove": "Retirer",
+  "rename": "Renommer",
  "share.button.label": "Partage",
  "skip": "Passer",
  "templates.buttons.fromScratchButton.label": "Commencer à partir de zéro",
--- a/apps/builder/src/i18n/pt-BR.json
+++ b/apps/builder/src/i18n/pt-BR.json
@ -120,6 +120,9 @@
  "collaboration.roles.edit.label": "Pode editar",
  "collaboration.roles.full.label": "Acesso Total",
  "collaboration.roles.view.label": "Pode ver",
+  "colorPicker.advancedColors": "Cores avançadas",
+  "colorPicker.colorValue.ariaLabel": "Valor da cor",
+  "colorPicker.pickColor.ariaLabel": "Escolha uma cor",
  "confirmModal.defaultTitle": "Tem certeza?",
  "copied": "Copiado",
  "copy": "Copiar",
@ -146,7 +149,6 @@
  "editor.blocks.bubbles.textEditor.plate.label": "Editor de texto",
  "editor.blocks.bubbles.textEditor.searchVariable.placeholder": "Pesquisar uma variável",
  "editor.blocks.start.text": "Início",
-  "editor.editableTypebotName.tooltip.rename.label": "Renomear",
  "editor.gettingStartedModal.editorBasics.heading": "Fundamentos do Editor",
  "editor.gettingStartedModal.editorBasics.list.four.label": "Pré-visualize o seu bot ao clicar no botão de visualizar no canto superior direito",
  "editor.gettingStartedModal.editorBasics.list.label": "Sinta-se à vontade para usar o chat no canto inferior direito para entrar em contato se tiver alguma dúvida. Normalmente, respondo nas próximas 24 horas. \uD83D\uDE03",
@ -240,8 +242,6 @@
  "preview.restartButton.label": "Reiniciar",
  "publish.error.label": "Erro durante a publicação do typebot",
  "publish.versionWarning.message.aboutToDeploy.label": "Você está prestes a fazer o deploy de uma versão do seu bot com uma engine atualizada. (Typebot V6).",
-  "publish.versionWarning.message.breakingChanges.label": "significativas alterações associadas",
-  "publish.versionWarning.message.check.label": "Assegure-se de verificar todos as",
  "publish.versionWarning.message.testInPreviewMode.label": "Em seguida, teste o bot completamente no modo de visualização antes de publicar.",
  "publish.versionWarning.title.label": "⚠️ Nova versão da engine",
  "publishButton.closed.label": "Fechado",
@ -253,9 +253,10 @@
  "publishButton.label": "Publicar",
  "publishButton.published.label": "Publicado",
  "publishButton.tooltip.nonPublishedChanges.label": "Existem alterações não publicadas.",
-  "publishButton.tooltip.publishedVersion.ago.label": "atrás",
  "publishButton.tooltip.publishedVersion.from.label": "Versão publicada de {timeSince}.",
  "remove": "Remover",
+  "rename": "Renomear",
+  "save": "Salvar",
  "share.button.label": "Compartilhar",
  "share.button.popover.ariaLabel": "Abrir popover de compartilhamento",
  "share.button.popover.collaboratorsFetch.error.label": "Falha ao buscar os colaboradores",
@ -309,7 +310,41 @@
  "templates.modal.product.userOnboarding.description": "Um bot que solicita informações de novos usuários antes de começar a usar seu produto.",
  "templates.modal.product.userOnboarding.name": "Onboarding de Usuário",
  "templates.modal.useTemplateButton.label": "Usar esse modelo",
+  "theme.sideMenu.chat": "Chat",
+  "theme.sideMenu.chat.botAvatar": "Avatar do bot",
+  "theme.sideMenu.chat.botBubbles": "Bubbles do bot",
+  "theme.sideMenu.chat.buttons": "Botões",
+  "theme.sideMenu.chat.cornersRoundness": "Esfericidade dos cantos",
+  "theme.sideMenu.chat.inputs": "Inputs",
+  "theme.sideMenu.chat.theme.background": "Plano de fundo:",
+  "theme.sideMenu.chat.theme.placeholder": "Texto do placeholder:",
+  "theme.sideMenu.chat.theme.text": "Texto:",
+  "theme.sideMenu.chat.userAvatar": "Avatar do usuário",
+  "theme.sideMenu.chat.userBubbles": "Bubbles do usuário",
+  "theme.sideMenu.customCSS": "Customizar CSS",
+  "theme.sideMenu.global": "Global",
+  "theme.sideMenu.global.background": "Plano de fundo",
+  "theme.sideMenu.global.background.color": "Cor do plano de fundo:",
+  "theme.sideMenu.global.background.color.select": "Cor",
+  "theme.sideMenu.global.background.image.alt": "Imagem do plano de fundo",
+  "theme.sideMenu.global.background.image.button": "Selecione uma imagem",
+  "theme.sideMenu.global.background.image.select": "Imagem",
+  "theme.sideMenu.global.background.none.select": "Nenhum",
+  "theme.sideMenu.global.font": "Fonte",
+  "theme.sideMenu.global.typebotBrand": "Mostrar marca do Typebot",
+  "theme.sideMenu.template": "Template",
+  "theme.sideMenu.template.gallery": "Galeria",
+  "theme.sideMenu.template.gallery.avatarPreview.alt": "Pré-visualização do avatar no cartão do tema do template",
+  "theme.sideMenu.template.myTemplates": "Meus templates",
+  "theme.sideMenu.template.myTemplates.menu.ariaLabel": "Abrir menu do template",
+  "theme.sideMenu.template.myTemplates.saveTheme": "Salvar tema atual",
+  "theme.sideMenu.template.myTemplates.saveTheme.myTemplate": "Meu template",
+  "theme.sideMenu.template.myTemplates.saveTheme.name": "Nome:",
+  "theme.sideMenu.template.myTemplates.saveTheme.saveAsNew": "Salvar como novo template",
+  "theme.sideMenu.template.myTemplates.saveTheme.title": "Salvar tema",
+  "theme.sideMenu.title": "Customize o tema",
  "typebots.defaultName": "Meu typebot",
+  "update": "Atualizar",
  "upgrade": "Upgrade",
  "variables.button.searchInput.placeholder": "Procure por uma variável",
  "variables.button.tooltip": "Insira uma variável",
--- a/apps/builder/src/i18n/pt.json
+++ b/apps/builder/src/i18n/pt.json
@ -141,7 +141,6 @@
  "editor.blocks.bubbles.textEditor.plate.label": "Editor de texto",
  "editor.blocks.bubbles.textEditor.searchVariable.placeholder": "Pesquisar uma variável",
  "editor.blocks.start.text": "Começar",
-  "editor.editableTypebotName.tooltip.rename.label": "Renomear",
  "editor.gettingStartedModal.editorBasics.heading": "Noções básicas de editor",
  "editor.gettingStartedModal.editorBasics.list.four.label": "Pré-visualize o seu bot ao clicar no botão de visualizar no canto superior direito",
  "editor.gettingStartedModal.editorBasics.list.label": "Sinta-se à vontade para usar o chat no canto inferior direito para entrar em contacto se tiver alguma questão. Normalmente, respondo nas próximas 24 horas. \uD83D\uDE03",
@ -213,6 +212,7 @@
  "folders.typebotButton.unpublish": "Despublicar",
  "pending": "Pendente",
  "remove": "Remover",
+  "rename": "Renomear",
  "share.button.label": "Compartilhar",
  "skip": "Saltar",
  "templates.buttons.fromScratchButton.label": "Comece do zero",
--- a/apps/builder/src/i18n/ro.json
+++ b/apps/builder/src/i18n/ro.json
@ -141,7 +141,6 @@
  "editor.blocks.bubbles.textEditor.plate.label": "Editor de text",
  "editor.blocks.bubbles.textEditor.searchVariable.placeholder": "Căutați o variabilă",
  "editor.blocks.start.text": "start",
-  "editor.editableTypebotName.tooltip.rename.label": "Redenumiți",
  "editor.gettingStartedModal.editorBasics.heading": "Elementele de bază ale editorului",
  "editor.gettingStartedModal.editorBasics.list.four.label": "Previzualizați botul dvs. făcând clic pe butonul de previzualizare din dreapta sus",
  "editor.gettingStartedModal.editorBasics.list.label": "Simțiți-vă liber să utilizați balonul din dreapta jos pentru a contacta dacă aveți întrebări. De obicei răspund în următoarele 24 de ore. \uD83D\uDE03",
@ -213,6 +212,7 @@
  "folders.typebotButton.unpublish": "Anulați publicarea",
  "pending": "In asteptarea",
  "remove": "Elimina",
+  "rename": "Redenumiți",
  "share.button.label": "Acțiune",
  "skip": "Ocolire",
  "templates.buttons.fromScratchButton.label": "Începe de la zero",