blsmedia/bot
2
0
Fork 0
Code Activity

🌐 Add theme tab translation keys (#1119)

Browse Source 
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## 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.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Baptiste Arnaud <baptiste.arnaud95@gmail.com>
This commit is contained in:
Gabriel Pavão
2023-12-29 08:02:14 -03:00
committed by GitHub
parent f26eafd26f
commit 5fbbe9d86e
23 changed files with 186 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/builder/src/components/ColorPicker.tsx
View File

@ -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>

2
apps/builder/src/features/editor/components/EditableTypebotName.tsx
View File

@ -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}

4
apps/builder/src/features/theme/components/MyTemplates.tsx
View File

@ -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

16
apps/builder/src/features/theme/components/SaveThemeModal.tsx
View File

@ -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>

13
apps/builder/src/features/theme/components/ThemeSideMenu.tsx
View File

@ -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>

13
apps/builder/src/features/theme/components/ThemeTemplateCard.tsx
View File

@ -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"
/>

7
apps/builder/src/features/theme/components/ThemeTemplates.tsx
View File

@ -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

7
apps/builder/src/features/theme/components/chat/ButtonsTheme.tsx
View File

@ -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>

19
apps/builder/src/features/theme/components/chat/ChatThemeSettings.tsx
View File

@ -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={[
{

7
apps/builder/src/features/theme/components/chat/GuestBubbles.tsx
View File

@ -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}

7
apps/builder/src/features/theme/components/chat/HostBubbles.tsx
View File

@ -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}

9
apps/builder/src/features/theme/components/chat/InputsTheme.tsx
View File

@ -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}

10
apps/builder/src/features/theme/components/general/BackgroundContent.tsx
View File

@ -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>

20
apps/builder/src/features/theme/components/general/BackgroundSelector.tsx
View File

@ -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}

4
apps/builder/src/features/theme/components/general/FontSelector.tsx
View File

@ -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}

2
apps/builder/src/features/theme/components/general/GeneralSettings.tsx
View File

@ -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

2
apps/builder/src/i18n/de.json
View File

@ -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",

45
apps/builder/src/i18n/en.json
View File

@ -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",

2
apps/builder/src/i18n/es.json
View File

@ -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",

4
apps/builder/src/i18n/fr.json
View File

@ -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",

43
apps/builder/src/i18n/pt-BR.json
View File

@ -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",

2
apps/builder/src/i18n/pt.json
View File

@ -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",

2
apps/builder/src/i18n/ro.json
View File

@ -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",