feat(theme): ✨ Custom avatars

apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx

@@ -1,10 +1,11 @@
-import { ChangeEvent, useEffect, useState } from 'react'
-import { Button, Flex, HStack, Input, Stack, Text } from '@chakra-ui/react'
+import { useEffect, useState } from 'react'
+import { Button, Flex, HStack, Stack, Text } from '@chakra-ui/react'
 import { SearchContextManager } from '@giphy/react-components'
 import { UploadButton } from '../buttons/UploadButton'
 import { GiphySearch } from './GiphySearch'
 import { useTypebot } from 'contexts/TypebotContext'
 import { useDebounce } from 'use-debounce'
+import { InputWithVariableButton } from '../TextboxWithVariableButton'
 
 type Props = {
   url?: string
@@ -102,16 +103,12 @@ const EmbedLinkContent = ({ initialUrl, onNewUrl }: ContentProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [debouncedImageUrl])
 
-  const handleImageUrlChange = (e: ChangeEvent<HTMLInputElement>) =>
-    setImageUrl(e.target.value)
-
   return (
     <Stack py="2">
-      <Input
-        my="2"
+      <InputWithVariableButton
         placeholder={'Paste the image link...'}
-        onChange={handleImageUrlChange}
-        value={imageUrl}
+        onChange={setImageUrl}
+        initialValue={imageUrl}
       />
     </Stack>
   )

apps/builder/components/theme/ChatSettings/AvatarForm.tsx

@@ -0,0 +1,82 @@
+import React from 'react'
+import { AvatarProps } from 'models'
+import {
+  Heading,
+  HStack,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Stack,
+  Switch,
+  Image,
+  Flex,
+  Box,
+  Portal,
+} from '@chakra-ui/react'
+import { ImageUploadContent } from 'components/shared/ImageUploadContent'
+import { DefaultAvatar } from 'assets/DefaultAvatar'
+
+type Props = {
+  title: string
+  avatarProps?: AvatarProps
+  isDefaultCheck?: boolean
+  onAvatarChange: (avatarProps: AvatarProps) => void
+}
+
+export const AvatarForm = ({
+  title,
+  avatarProps,
+  isDefaultCheck = false,
+  onAvatarChange,
+}: Props) => {
+  const isChecked = avatarProps ? avatarProps.isEnabled : isDefaultCheck
+  const handleOnCheck = () =>
+    onAvatarChange({ ...avatarProps, isEnabled: !isChecked })
+  const handleImageUrl = (url: string) =>
+    onAvatarChange({ isEnabled: isChecked, url })
+  return (
+    <Stack borderWidth={1} rounded="md" p="4" spacing={4}>
+      <Flex justifyContent="space-between">
+        <HStack>
+          <Heading as="label" fontSize="lg" htmlFor={title} mb="1">
+            {title}
+          </Heading>
+          <Switch isChecked={isChecked} id={title} onChange={handleOnCheck} />
+        </HStack>
+        {isChecked && (
+          <Popover isLazy>
+            <PopoverTrigger>
+              {avatarProps?.url ? (
+                <Image
+                  src={avatarProps.url}
+                  alt="Website image"
+                  cursor="pointer"
+                  _hover={{ filter: 'brightness(.9)' }}
+                  transition="filter 200ms"
+                  rounded="full"
+                  boxSize="40px"
+                  objectFit="cover"
+                />
+              ) : (
+                <Box>
+                  <DefaultAvatar
+                    cursor="pointer"
+                    _hover={{ filter: 'brightness(.9)' }}
+                  />
+                </Box>
+              )}
+            </PopoverTrigger>
+            <Portal>
+              <PopoverContent p="4">
+                <ImageUploadContent
+                  url={avatarProps?.url}
+                  onSubmit={handleImageUrl}
+                />
+              </PopoverContent>
+            </Portal>
+          </Popover>
+        )}
+      </Flex>
+    </Stack>
+  )
+}

apps/builder/components/theme/ChatSettings/ChatThemeSettings.tsx

@@ -1,6 +1,7 @@
 import { Heading, Stack } from '@chakra-ui/react'
-import { ChatTheme, ContainerColors, InputColors } from 'models'
+import { AvatarProps, ChatTheme, ContainerColors, InputColors } from 'models'
 import React from 'react'
+import { AvatarForm } from './AvatarForm'
 import { ButtonsTheme } from './ButtonsTheme'
 import { GuestBubbles } from './GuestBubbles'
 import { HostBubbles } from './HostBubbles'
@@ -21,8 +22,24 @@ export const ChatThemeSettings = ({ chatTheme, onChatThemeChange }: Props) => {
   const handleInputsChange = (inputs: InputColors) =>
     onChatThemeChange({ ...chatTheme, inputs })
 
+  const handleHostAvatarChange = (hostAvatar: AvatarProps) =>
+    onChatThemeChange({ ...chatTheme, hostAvatar })
+  const handleGuestAvatarChange = (guestAvatar: AvatarProps) =>
+    onChatThemeChange({ ...chatTheme, guestAvatar })
+
   return (
     <Stack spacing={6}>
+      <AvatarForm
+        title="Bot avatar"
+        avatarProps={chatTheme.hostAvatar}
+        isDefaultCheck
+        onAvatarChange={handleHostAvatarChange}
+      />
+      <AvatarForm
+        title="User avatar"
+        avatarProps={chatTheme.guestAvatar}
+        onAvatarChange={handleGuestAvatarChange}
+      />
       <Stack borderWidth={1} rounded="md" p="4" spacing={4}>
         <Heading fontSize="lg">Bot bubbles</Heading>
         <HostBubbles