feat(bubbles): ✨ Add image bubble

apps/builder/services/typebots.ts

@@ -1,6 +1,6 @@
 import {
   Block,
-  TextStep,
+  TextBubbleStep,
   PublicTypebot,
   BackgroundType,
   Settings,
@@ -119,7 +119,7 @@ export const parseNewStep = (
   const id = `s${shortId.generate()}`
   switch (type) {
     case BubbleStepType.TEXT: {
-      const textStep: Pick<TextStep, 'type' | 'content'> = {
+      const textStep: Pick<TextBubbleStep, 'type' | 'content'> = {
         type,
         content: { html: '', richText: [], plainText: '' },
       }

apps/builder/services/utils.ts

@@ -1,3 +1,4 @@
+import imageCompression from 'browser-image-compression'
 import { Parser } from 'htmlparser2'
 import { Step } from 'models'
 
@@ -78,6 +79,16 @@ export const uploadFile = async (file: File, key: string) => {
   }
 }
 
+export const compressFile = async (file: File) => {
+  const options = {
+    maxSizeMB: 0.5,
+    maxWidthOrHeight: 1600,
+  }
+  return ['image/jpg', 'image/jpeg', 'image/png'].includes(file.type)
+    ? imageCompression(file, options)
+    : file
+}
+
 export const removeUndefinedFields = <T>(obj: T): T =>
   Object.keys(obj).reduce(
     (acc, key) =>