🚀 Init preview and typebot cotext in editor

packages/bot-engine/src/components/avatars/DefaultAvatar.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+
+type DefaultAvatarProps = {
+  displayName?: string
+  size?: 'extra-small' | 'small' | 'medium' | 'large' | 'full'
+  className?: string
+}
+
+export const DefaultAvatar = ({
+  displayName,
+}: DefaultAvatarProps): JSX.Element => {
+  return (
+    <figure
+      className={
+        'flex justify-center items-center rounded-full text-white w-6 h-6 text-sm relative xs:w-full xs:h-full xs:text-xl'
+      }
+    >
+      <Background
+        className={
+          'absolute top-0 left-0 w-6 h-6 xs:w-full xs:h-full xs:text-xl'
+        }
+      />
+      <p style={{ zIndex: 0 }}>{displayName && displayName[0].toUpperCase()}</p>
+    </figure>
+  )
+}
+
+const Background = ({ className }: { className: string }) => (
+  <svg
+    width="75"
+    height="75"
+    viewBox="0 0 75 75"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <mask id="mask0" x="0" y="0" mask-type="alpha">
+      <circle cx="37.5" cy="37.5" r="37.5" fill="#0042DA" />
+    </mask>
+    <g mask="url(#mask0)">
+      <rect x="-30" y="-43" width="131" height="154" fill="#0042DA" />
+      <rect
+        x="2.50413"
+        y="120.333"
+        width="81.5597"
+        height="86.4577"
+        rx="2.5"
+        transform="rotate(-52.6423 2.50413 120.333)"
+        stroke="#FED23D"
+        strokeWidth="5"
+      />
+      <circle cx="76.5" cy="-1.5" r="29" stroke="#FF8E20" strokeWidth="5" />
+      <path
+        d="M-49.8224 22L-15.5 -40.7879L18.8224 22H-49.8224Z"
+        stroke="#F7F8FF"
+        strokeWidth="5"
+      />
+    </g>
+  </svg>
+)