fix: memoize components and improve performance (#579)

components/block.tsx

@@ -4,23 +4,18 @@ import type {
   CreateMessage,
   Message,
 } from 'ai';
-import cx from 'classnames';
 import { formatDistance } from 'date-fns';
 import { AnimatePresence, motion } from 'framer-motion';
 import {
   type Dispatch,
+  memo,
   type SetStateAction,
   useCallback,
   useEffect,
   useState,
 } from 'react';
-import { toast } from 'sonner';
 import useSWR, { useSWRConfig } from 'swr';
-import {
-  useCopyToClipboard,
-  useDebounceCallback,
-  useWindowSize,
-} from 'usehooks-ts';
+import { useDebounceCallback, useWindowSize } from 'usehooks-ts';
 
 import type { Document, Suggestion, Vote } from '@/lib/db/schema';
 import { fetcher } from '@/lib/utils';
@@ -28,14 +23,13 @@ import { fetcher } from '@/lib/utils';
 import { DiffView } from './diffview';
 import { DocumentSkeleton } from './document-skeleton';
 import { Editor } from './editor';
-import { CopyIcon, CrossIcon, DeltaIcon, RedoIcon, UndoIcon } from './icons';
-import { PreviewMessage } from './message';
 import { MultimodalInput } from './multimodal-input';
 import { Toolbar } from './toolbar';
-import { Button } from './ui/button';
-import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip';
-import { useScrollToBottom } from './use-scroll-to-bottom';
 import { VersionFooter } from './version-footer';
+import { BlockActions } from './block-actions';
+import { BlockCloseButton } from './block-close-button';
+import { BlockMessages } from './block-messages';
+
 export interface UIBlock {
   title: string;
   documentId: string;
@@ -50,7 +44,7 @@ export interface UIBlock {
   };
 }
 
-export function Block({
+function PureBlock({
   chatId,
   input,
   setInput,
@@ -89,9 +83,6 @@ export function Block({
     chatRequestOptions?: ChatRequestOptions,
   ) => void;
 }) {
-  const [messagesContainerRef, messagesEndRef] =
-    useScrollToBottom<HTMLDivElement>();
-
   const {
     data: documents,
     isLoading: isDocumentsFetching,
@@ -247,8 +238,6 @@ export function Block({
   const { width: windowWidth, height: windowHeight } = useWindowSize();
   const isMobile = windowWidth ? windowWidth < 768 : false;
 
-  const [_, copyToClipboard] = useCopyToClipboard();
-
   return (
     <motion.div
       className="flex flex-row h-dvh w-dvw fixed top-0 left-0 z-50 bg-muted"
@@ -290,31 +279,14 @@ export function Block({
           </AnimatePresence>
 
           <div className="flex flex-col h-full justify-between items-center gap-4">
-            <div
-              ref={messagesContainerRef}
-              className="flex flex-col gap-4 h-full items-center overflow-y-scroll px-4 pt-20"
-            >
-              {messages.map((message, index) => (
-                <PreviewMessage
-                  chatId={chatId}
-                  key={message.id}
-                  message={message}
-                  block={block}
-                  setBlock={setBlock}
-                  isLoading={isLoading && index === messages.length - 1}
-                  vote={
-                    votes
-                      ? votes.find((vote) => vote.messageId === message.id)
-                      : undefined
-                  }
-                />
-              ))}
-
-              <div
-                ref={messagesEndRef}
-                className="shrink-0 min-w-[24px] min-h-[24px]"
-              />
-            </div>
+            <BlockMessages
+              chatId={chatId}
+              block={block}
+              isLoading={isLoading}
+              setBlock={setBlock}
+              votes={votes}
+              messages={messages}
+            />
 
             <form className="flex flex-row gap-2 relative items-end w-full px-4 pb-4">
               <MultimodalInput
@@ -401,18 +373,7 @@ export function Block({
       >
         <div className="p-2 flex flex-row justify-between items-start">
           <div className="flex flex-row gap-4 items-start">
-            <Button
-              variant="outline"
-              className="h-fit p-2 dark:hover:bg-zinc-700"
-              onClick={() => {
-                setBlock((currentBlock) => ({
-                  ...currentBlock,
-                  isVisible: false,
-                }));
-              }}
-            >
-              <CrossIcon size={18} />
-            </Button>
+            <BlockCloseButton setBlock={setBlock} />
 
             <div className="flex flex-col">
               <div className="font-medium">
@@ -439,78 +400,13 @@ export function Block({
             </div>
           </div>
 
-          <div className="flex flex-row gap-1">
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="outline"
-                  className="p-2 h-fit dark:hover:bg-zinc-700"
-                  onClick={() => {
-                    copyToClipboard(block.content);
-                    toast.success('Copied to clipboard!');
-                  }}
-                  disabled={block.status === 'streaming'}
-                >
-                  <CopyIcon size={18} />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>Copy to clipboard</TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="outline"
-                  className="p-2 h-fit dark:hover:bg-zinc-700 !pointer-events-auto"
-                  onClick={() => {
-                    handleVersionChange('prev');
-                  }}
-                  disabled={
-                    currentVersionIndex === 0 || block.status === 'streaming'
-                  }
-                >
-                  <UndoIcon size={18} />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>View Previous version</TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="outline"
-                  className="p-2 h-fit dark:hover:bg-zinc-700 !pointer-events-auto"
-                  onClick={() => {
-                    handleVersionChange('next');
-                  }}
-                  disabled={isCurrentVersion || block.status === 'streaming'}
-                >
-                  <RedoIcon size={18} />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>View Next version</TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="outline"
-                  className={cx(
-                    'p-2 h-fit !pointer-events-auto dark:hover:bg-zinc-700',
-                    {
-                      'bg-muted': mode === 'diff',
-                    },
-                  )}
-                  onClick={() => {
-                    handleVersionChange('toggle');
-                  }}
-                  disabled={
-                    block.status === 'streaming' || currentVersionIndex === 0
-                  }
-                >
-                  <DeltaIcon size={18} />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>View changes</TooltipContent>
-            </Tooltip>
-          </div>
+          <BlockActions
+            block={block}
+            currentVersionIndex={currentVersionIndex}
+            handleVersionChange={handleVersionChange}
+            isCurrentVersion={isCurrentVersion}
+            mode={mode}
+          />
         </div>
 
         <div className="prose dark:prose-invert dark:bg-muted bg-background h-full overflow-y-scroll px-4 py-8 md:p-20 !max-w-full pb-40 items-center">
@@ -570,3 +466,7 @@ export function Block({
     </motion.div>
   );
 }
+
+export const Block = memo(PureBlock, (prevProps, nextProps) => {
+  return false;
+});