36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
import { isMobile } from '@/utils/isMobileSignal'
|
|
import { createEffect, createSignal, Show } from 'solid-js'
|
|
import { isNotEmpty } from '@typebot.io/lib'
|
|
import { DefaultAvatar } from './DefaultAvatar'
|
|
|
|
export const Avatar = (props: { initialAvatarSrc?: string }) => {
|
|
const [avatarSrc, setAvatarSrc] = createSignal(props.initialAvatarSrc)
|
|
|
|
createEffect(() => {
|
|
if (
|
|
(avatarSrc()?.startsWith('{{') || !avatarSrc()) &&
|
|
props.initialAvatarSrc?.startsWith('http')
|
|
)
|
|
setAvatarSrc(props.initialAvatarSrc)
|
|
})
|
|
|
|
return (
|
|
<Show when={isNotEmpty(avatarSrc())} keyed fallback={<DefaultAvatar />}>
|
|
<figure
|
|
class={
|
|
'flex justify-center items-center rounded-full text-white relative animate-fade-in flex-shrink-0 ' +
|
|
(isMobile() ? 'w-6 h-6 text-sm' : 'w-10 h-10 text-xl')
|
|
}
|
|
>
|
|
<img
|
|
src={avatarSrc()}
|
|
alt="Bot avatar"
|
|
class="rounded-full object-cover w-full h-full"
|
|
elementtiming={'Bot avatar'}
|
|
fetchpriority={'high'}
|
|
/>
|
|
</figure>
|
|
</Show>
|
|
)
|
|
}
|