feat: modularize block system (#718)

blocks/text.tsx

@@ -0,0 +1,174 @@
+import { Block } from '@/components/create-block';
+import { DiffView } from '@/components/diffview';
+import { DocumentSkeleton } from '@/components/document-skeleton';
+import { Editor } from '@/components/editor';
+import {
+  ClockRewind,
+  CopyIcon,
+  MessageIcon,
+  PenIcon,
+  RedoIcon,
+  UndoIcon,
+} from '@/components/icons';
+import { Suggestion } from '@/lib/db/schema';
+import { toast } from 'sonner';
+import { getSuggestions } from './actions';
+
+interface TextBlockMetadata {
+  suggestions: Array<Suggestion>;
+}
+
+export const textBlock = new Block<'text', TextBlockMetadata>({
+  kind: 'text',
+  description: 'Useful for text content, like drafting essays and emails.',
+  initialize: async ({ documentId, setMetadata }) => {
+    const suggestions = await getSuggestions({ documentId });
+
+    setMetadata({
+      suggestions,
+    });
+  },
+  onStreamPart: ({ streamPart, setMetadata, setBlock }) => {
+    if (streamPart.type === 'suggestion') {
+      setMetadata((metadata) => {
+        return {
+          suggestions: [
+            ...metadata.suggestions,
+            streamPart.content as Suggestion,
+          ],
+        };
+      });
+    }
+
+    if (streamPart.type === 'text-delta') {
+      setBlock((draftBlock) => {
+        return {
+          ...draftBlock,
+          content: draftBlock.content + (streamPart.content as string),
+          isVisible:
+            draftBlock.status === 'streaming' &&
+            draftBlock.content.length > 400 &&
+            draftBlock.content.length < 450
+              ? true
+              : draftBlock.isVisible,
+          status: 'streaming',
+        };
+      });
+    }
+  },
+  content: ({
+    mode,
+    status,
+    content,
+    isCurrentVersion,
+    currentVersionIndex,
+    onSaveContent,
+    getDocumentContentById,
+    isLoading,
+    metadata,
+  }) => {
+    if (isLoading) {
+      return <DocumentSkeleton blockKind="text" />;
+    }
+
+    if (mode === 'diff') {
+      const oldContent = getDocumentContentById(currentVersionIndex - 1);
+      const newContent = getDocumentContentById(currentVersionIndex);
+
+      return <DiffView oldContent={oldContent} newContent={newContent} />;
+    }
+
+    return (
+      <>
+        <Editor
+          content={content}
+          suggestions={metadata ? metadata.suggestions : []}
+          isCurrentVersion={isCurrentVersion}
+          currentVersionIndex={currentVersionIndex}
+          status={status}
+          onSaveContent={onSaveContent}
+        />
+
+        {metadata && metadata.suggestions && metadata.suggestions.length > 0 ? (
+          <div className="md:hidden h-dvh w-12 shrink-0" />
+        ) : null}
+      </>
+    );
+  },
+  actions: [
+    {
+      icon: <ClockRewind size={18} />,
+      description: 'View changes',
+      onClick: ({ handleVersionChange }) => {
+        handleVersionChange('toggle');
+      },
+      isDisabled: ({ currentVersionIndex, setMetadata }) => {
+        if (currentVersionIndex === 0) {
+          return true;
+        }
+
+        return false;
+      },
+    },
+    {
+      icon: <UndoIcon size={18} />,
+      description: 'View Previous version',
+      onClick: ({ handleVersionChange }) => {
+        handleVersionChange('prev');
+      },
+      isDisabled: ({ currentVersionIndex }) => {
+        if (currentVersionIndex === 0) {
+          return true;
+        }
+
+        return false;
+      },
+    },
+    {
+      icon: <RedoIcon size={18} />,
+      description: 'View Next version',
+      onClick: ({ handleVersionChange }) => {
+        handleVersionChange('next');
+      },
+      isDisabled: ({ isCurrentVersion }) => {
+        if (isCurrentVersion) {
+          return true;
+        }
+
+        return false;
+      },
+    },
+    {
+      icon: <CopyIcon size={18} />,
+      description: 'Copy to clipboard',
+      onClick: ({ content }) => {
+        navigator.clipboard.writeText(content);
+        toast.success('Copied to clipboard!');
+      },
+    },
+  ],
+  toolbar: [
+    {
+      icon: <PenIcon />,
+      description: 'Add final polish',
+      onClick: ({ appendMessage }) => {
+        appendMessage({
+          role: 'user',
+          content:
+            'Please add final polish and check for grammar, add section titles for better structure, and ensure everything reads smoothly.',
+        });
+      },
+    },
+    {
+      icon: <MessageIcon />,
+      description: 'Request suggestions',
+      onClick: ({ appendMessage }) => {
+        appendMessage({
+          role: 'user',
+          content:
+            'Please add suggestions you have that could improve the writing.',
+        });
+      },
+    },
+  ],
+});