docs: 📝 Add doc for every block

apps/docs/docs/editor/blocks/bubbles/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Bubbles",
+  "position": 2
+}

apps/docs/docs/editor/blocks/bubbles/embed.mdx

@@ -0,0 +1,25 @@
+---
+sidebar_position: 4
+---
+
+import { FlowToBot } from '../../../../src/js/FlowToBot'
+
+# Embed
+
+The Embed bubble block allows you to display a website or an iframe to your user. You can paste a video URL from many sources including YouTube, Vimeo, and mp4.
+
+<FlowToBot
+  flow={
+    <img
+      src="/img/blocks/bubbles/embed.png"
+      width="100%"
+      style={{ maxWidth: '600px' }}
+      alt="Embed bubble"
+    />
+  }
+  bot={
+    <video controls width="100%" style={{ maxWidth: '400px' }}>
+      <source src="/img/blocks/bubbles/embed-chat.mp4" type="video/mp4" />
+    </video>
+  }
+/>

apps/docs/docs/editor/blocks/bubbles/image.mdx

@@ -0,0 +1,25 @@
+---
+sidebar_position: 2
+---
+
+import { FlowToBot } from '../../../../src/js/FlowToBot'
+
+# Image
+
+The Image bubble block allows you to display an image to your user. You can upload an image, paste a URL or choose a GIF from the Giphy native integration.
+
+<FlowToBot
+  flow={
+    <img
+      src="/img/blocks/bubbles/image.png"
+      width="100%"
+      style={{ maxWidth: '300px' }}
+      alt="Image bubble"
+    />
+  }
+  bot={
+    <video controls width="100%" style={{ maxWidth: '400px' }}>
+      <source src="/img/blocks/bubbles/image-chat.mp4" type="video/mp4" />
+    </video>
+  }
+/>

apps/docs/docs/editor/blocks/bubbles/text.mdx

@@ -0,0 +1,28 @@
+---
+sidebar_position: 1
+---
+
+import { FlowToBot } from '../../../../src/js/FlowToBot'
+
+# Text
+
+The Text bubble block allows you to display a simple text bubble to your user. They can be chained and it will create a smooth animation:
+
+<FlowToBot
+  flow={
+    <img
+      src="/img/blocks/bubbles/3-text-bubbles.png"
+      width="100%"
+      style={{ maxWidth: '300px' }}
+      alt="Text bubbles"
+    />
+  }
+  bot={
+    <video controls width="100%" style={{ maxWidth: '600px' }}>
+      <source
+        src="/img/blocks/bubbles/3-text-bubbles-chat.mp4"
+        type="video/mp4"
+      />
+    </video>
+  }
+/>

apps/docs/docs/editor/blocks/bubbles/video.mdx

@@ -0,0 +1,25 @@
+---
+sidebar_position: 3
+---
+
+import { FlowToBot } from '../../../../src/js/FlowToBot'
+
+# Video
+
+The Video bubble block allows you to display a video to your user. You can paste a video URL from many sources including YouTube, Vimeo, and mp4.
+
+<FlowToBot
+  flow={
+    <img
+      src="/img/blocks/bubbles/video.png"
+      alt="Video bubble"
+      width="100%"
+      style={{ maxWidth: '300px' }}
+    />
+  }
+  bot={
+    <video controls width="100%" style={{ maxWidth: '500px' }}>
+      <source src="/img/blocks/bubbles/video-chat.mp4" type="video/mp4" />
+    </video>
+  }
+/>