feat: add inline block document previews (#637)

components/block-messages.tsx

@@ -1,14 +1,13 @@
-import { Dispatch, memo, SetStateAction } from 'react';
-import { UIBlock } from './block';
 import { PreviewMessage } from './message';
 import { useScrollToBottom } from './use-scroll-to-bottom';
 import { Vote } from '@/lib/db/schema';
 import { ChatRequestOptions, Message } from 'ai';
+import { memo } from 'react';
+import equal from 'fast-deep-equal';
+import { UIBlock } from './block';
 
 interface BlockMessagesProps {
   chatId: string;
-  block: UIBlock;
-  setBlock: Dispatch<SetStateAction<UIBlock>>;
   isLoading: boolean;
   votes: Array<Vote> | undefined;
   messages: Array<Message>;
@@ -19,12 +18,11 @@ interface BlockMessagesProps {
     chatRequestOptions?: ChatRequestOptions,
   ) => Promise<string | null | undefined>;
   isReadonly: boolean;
+  blockStatus: UIBlock['status'];
 }
 
 function PureBlockMessages({
   chatId,
-  block,
-  setBlock,
   isLoading,
   votes,
   messages,
@@ -45,8 +43,6 @@ function PureBlockMessages({
           chatId={chatId}
           key={message.id}
           message={message}
-          block={block}
-          setBlock={setBlock}
           isLoading={isLoading && index === messages.length - 1}
           vote={
             votes
@@ -72,13 +68,17 @@ function areEqual(
   nextProps: BlockMessagesProps,
 ) {
   if (
-    prevProps.block.status === 'streaming' &&
-    nextProps.block.status === 'streaming'
-  ) {
+    prevProps.blockStatus === 'streaming' &&
+    nextProps.blockStatus === 'streaming'
+  )
     return true;
-  }
 
-  return false;
+  if (prevProps.isLoading !== nextProps.isLoading) return false;
+  if (prevProps.isLoading && nextProps.isLoading) return false;
+  if (prevProps.messages.length !== nextProps.messages.length) return false;
+  if (!equal(prevProps.votes, nextProps.votes)) return false;
+
+  return true;
 }
 
 export const BlockMessages = memo(PureBlockMessages, areEqual);