feat: modularize block system (#718)

blocks/image.tsx

@@ -0,0 +1,59 @@
+import { Block } from '@/components/create-block';
+import { CopyIcon, RedoIcon, UndoIcon } from '@/components/icons';
+import { ImageEditor } from '@/components/image-editor';
+
+export const imageBlock = new Block({
+  kind: 'image',
+  description: 'Useful for image generation',
+  onStreamPart: ({ streamPart, setBlock }) => {
+    if (streamPart.type === 'image-delta') {
+      setBlock((draftBlock) => ({
+        ...draftBlock,
+        content: streamPart.content as string,
+        isVisible: true,
+        status: 'streaming',
+      }));
+    }
+  },
+  content: ImageEditor,
+  actions: [
+    {
+      icon: <UndoIcon size={18} />,
+      description: 'View Previous version',
+      onClick: ({ handleVersionChange }) => {
+        handleVersionChange('prev');
+      },
+    },
+    {
+      icon: <RedoIcon size={18} />,
+      description: 'View Next version',
+      onClick: ({ handleVersionChange }) => {
+        handleVersionChange('next');
+      },
+    },
+    {
+      icon: <CopyIcon size={18} />,
+      description: 'Copy image to clipboard',
+      onClick: ({ content }) => {
+        const img = new Image();
+        img.src = `data:image/png;base64,${content}`;
+
+        img.onload = () => {
+          const canvas = document.createElement('canvas');
+          canvas.width = img.width;
+          canvas.height = img.height;
+          const ctx = canvas.getContext('2d');
+          ctx?.drawImage(img, 0, 0);
+          canvas.toBlob((blob) => {
+            if (blob) {
+              navigator.clipboard.write([
+                new ClipboardItem({ 'image/png': blob }),
+              ]);
+            }
+          }, 'image/png');
+        };
+      },
+    },
+  ],
+  toolbar: [],
+});