🐛 (js) Fix dynamic avatar on mount

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

@@ -5,15 +5,18 @@ import {
   HStack,
   Popover,
   PopoverContent,
-  PopoverTrigger,
   Stack,
   Switch,
   Image,
   Flex,
   Box,
+  Portal,
+  PopoverAnchor,
+  useDisclosure,
 } from '@chakra-ui/react'
 import { ImageUploadContent } from '@/components/ImageUploadContent'
 import { DefaultAvatar } from '../DefaultAvatar'
+import { useOutsideClick } from '@/hooks/useOutsideClick'
 
 type Props = {
   uploadFilePath: string
@@ -30,11 +33,21 @@ export const AvatarForm = ({
   isDefaultCheck = false,
   onAvatarChange,
 }: Props) => {
+  const { isOpen, onOpen, onClose } = useDisclosure()
   const isChecked = avatarProps ? avatarProps.isEnabled : isDefaultCheck
   const handleOnCheck = () =>
     onAvatarChange({ ...avatarProps, isEnabled: !isChecked })
   const handleImageUrl = (url: string) =>
     onAvatarChange({ isEnabled: isChecked, url })
+  const popoverContainerRef = React.useRef<HTMLDivElement>(null)
+
+  useOutsideClick({
+    ref: popoverContainerRef,
+    handler: () => {
+      console.log('close')
+      onClose()
+    },
+  })
 
   const isDefaultAvatar = !avatarProps?.url || avatarProps.url.includes('{{')
   return (
@@ -47,36 +60,45 @@ export const AvatarForm = ({
           <Switch isChecked={isChecked} id={title} onChange={handleOnCheck} />
         </HStack>
         {isChecked && (
-          <Popover isLazy>
+          <Flex ref={popoverContainerRef}>
-            <PopoverTrigger>
+            <Popover isLazy isOpen={isOpen}>
-              {isDefaultAvatar ? (
+              <PopoverAnchor>
-                <Box>
+                {isDefaultAvatar ? (
-                  <DefaultAvatar
+                  <Box onClick={onOpen}>
+                    <DefaultAvatar
+                      cursor="pointer"
+                      _hover={{ filter: 'brightness(.9)' }}
+                    />
+                  </Box>
+                ) : (
+                  <Image
+                    onClick={onOpen}
+                    src={avatarProps.url}
+                    alt="Website image"
                     cursor="pointer"
                     _hover={{ filter: 'brightness(.9)' }}
+                    transition="filter 200ms"
+                    rounded="full"
+                    boxSize="40px"
+                    objectFit="cover"
                   />
-                </Box>
+                )}
-              ) : (
+              </PopoverAnchor>
-                <Image
+              <Portal>
-                  src={avatarProps.url}
+                <PopoverContent
-                  alt="Website image"
+                  p="4"
-                  cursor="pointer"
+                  onMouseDown={(e) => e.stopPropagation()}
-                  _hover={{ filter: 'brightness(.9)' }}
+                  onPointerDown={(e) => e.stopPropagation()}
-                  transition="filter 200ms"
+                >
-                  rounded="full"
+                  <ImageUploadContent
-                  boxSize="40px"
+                    filePath={uploadFilePath}
-                  objectFit="cover"
+                    defaultUrl={avatarProps?.url}
-                />
+                    onSubmit={handleImageUrl}
-              )}
+                  />
-            </PopoverTrigger>
+                </PopoverContent>
-            <PopoverContent p="4">
+              </Portal>
-              <ImageUploadContent
+            </Popover>
-                filePath={uploadFilePath}
+          </Flex>
-                defaultUrl={avatarProps?.url}
-                onSubmit={handleImageUrl}
-              />
-            </PopoverContent>
-          </Popover>
         )}
       </Flex>
     </Stack>

apps/docs/openapi/chat/_spec_.json

@@ -2854,6 +2854,13 @@
                                                           "options": {
                                                             "type": "object",
                                                             "properties": {
+                                                              "task": {
+                                                                "type": "string",
+                                                                "enum": [
+                                                                  "Show widget",
+                                                                  "Close widget"
+                                                                ]
+                                                              },
                                                               "baseUrl": {
                                                                 "type": "string"
                                                               },

package.json

@@ -33,5 +33,5 @@
       "path": "node_modules/cz-emoji"
     }
   },
-  "packageManager": "pnpm@7.28.0"
+  "packageManager": "pnpm@7.29.1"
 }

packages/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

packages/js/src/components/avatars/Avatar.tsx

@@ -1,10 +1,18 @@
 import { isMobile } from '@/utils/isMobileSignal'
-import { createSignal, Show } from 'solid-js'
+import { createEffect, createSignal, Show } from 'solid-js'
 import { isNotEmpty } from 'utils'
 import { DefaultAvatar } from './DefaultAvatar'
 
 export const Avatar = (props: { initialAvatarSrc?: string }) => {
-  const [avatarSrc] = createSignal(props.initialAvatarSrc)
+  const [avatarSrc, setAvatarSrc] = createSignal(props.initialAvatarSrc)
+
+  createEffect(() => {
+    if (
+      avatarSrc()?.startsWith('{{') &&
+      props.initialAvatarSrc?.startsWith('http')
+    )
+      setAvatarSrc(props.initialAvatarSrc)
+  })
 
   return (
     <Show

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "description": "React library to display typebots on your website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",