🐛 (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,10 +60,11 @@ export const AvatarForm = ({
           <Switch isChecked={isChecked} id={title} onChange={handleOnCheck} />
         </HStack>
         {isChecked && (
-          <Popover isLazy>
+          <Flex ref={popoverContainerRef}>
-            <PopoverTrigger>
+            <Popover isLazy isOpen={isOpen}>
+              <PopoverAnchor>
                 {isDefaultAvatar ? (
-                <Box>
+                  <Box onClick={onOpen}>
                     <DefaultAvatar
                       cursor="pointer"
                       _hover={{ filter: 'brightness(.9)' }}
@@ -58,6 +72,7 @@ export const AvatarForm = ({
                   </Box>
                 ) : (
                   <Image
+                    onClick={onOpen}
                     src={avatarProps.url}
                     alt="Website image"
                     cursor="pointer"
@@ -68,15 +83,22 @@ export const AvatarForm = ({
                     objectFit="cover"
                   />
                 )}
-            </PopoverTrigger>
+              </PopoverAnchor>
-            <PopoverContent p="4">
+              <Portal>
+                <PopoverContent
+                  p="4"
+                  onMouseDown={(e) => e.stopPropagation()}
+                  onPointerDown={(e) => e.stopPropagation()}
+                >
                   <ImageUploadContent
                     filePath={uploadFilePath}
                     defaultUrl={avatarProps?.url}
                     onSubmit={handleImageUrl}
                   />
                 </PopoverContent>
+              </Portal>
             </Popover>
+          </Flex>
         )}
       </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",