Memoize further

components/block-actions.tsx

@@ -15,7 +15,7 @@ interface BlockActionsProps {
   mode: 'read-only' | 'edit' | 'diff';
 }
 
-export function PureBlockActions({
+function PureBlockActions({
   block,
   handleVersionChange,
   currentVersionIndex,

components/block-close-button.tsx

@@ -8,7 +8,7 @@ interface BlockCloseButtonProps {
   setBlock: (value: SetStateAction<UIBlock>) => void;
 }
 
-export function PureBlockCloseButton({ setBlock }: BlockCloseButtonProps) {
+function PureBlockCloseButton({ setBlock }: BlockCloseButtonProps) {
   return (
     <Button
       variant="outline"

components/block-messages.tsx

@@ -0,0 +1,71 @@
+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 { Message } from 'ai';
+
+interface BlockMessagesProps {
+  chatId: string;
+  block: UIBlock;
+  setBlock: Dispatch<SetStateAction<UIBlock>>;
+  isLoading: boolean;
+  votes: Array<Vote> | undefined;
+  messages: Array<Message>;
+}
+
+function PureBlockMessages({
+  chatId,
+  block,
+  setBlock,
+  isLoading,
+  votes,
+  messages,
+}: BlockMessagesProps) {
+  const [messagesContainerRef, messagesEndRef] =
+    useScrollToBottom<HTMLDivElement>();
+
+  return (
+    <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>
+  );
+}
+
+function areEqual(
+  prevProps: BlockMessagesProps,
+  nextProps: BlockMessagesProps,
+) {
+  if (
+    prevProps.block.status === 'streaming' &&
+    nextProps.block.status === 'streaming'
+  ) {
+    return true;
+  }
+
+  return false;
+}
+
+export const BlockMessages = memo(PureBlockMessages, areEqual);

components/block-stream-handler.tsx

@@ -9,7 +9,7 @@ interface BlockStreamHandlerProps {
   streamingData: JSONValue[] | undefined;
 }
 
-export function PureBlockStreamHandler({
+function PureBlockStreamHandler({
   setBlock,
   streamingData,
 }: BlockStreamHandlerProps) {

components/block.tsx

@@ -4,7 +4,6 @@ import type {
   CreateMessage,
   Message,
 } from 'ai';
-import cx from 'classnames';
 import { formatDistance } from 'date-fns';
 import { AnimatePresence, motion } from 'framer-motion';
 import {
@@ -15,31 +14,22 @@ import {
   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';
 
 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 { Markdown } from './markdown';
 import { BlockActions } from './block-actions';
 import { BlockCloseButton } from './block-close-button';
+import { BlockMessages } from './block-messages';
+
 export interface UIBlock {
   title: string;
   documentId: string;
@@ -54,7 +44,7 @@ export interface UIBlock {
   };
 }
 
-export function PureBlock({
+function PureBlock({
   chatId,
   input,
   setInput,
@@ -93,9 +83,6 @@ export function PureBlock({
     chatRequestOptions?: ChatRequestOptions,
   ) => void;
 }) {
-  const [messagesContainerRef, messagesEndRef] =
-    useScrollToBottom<HTMLDivElement>();
-
   const {
     data: documents,
     isLoading: isDocumentsFetching,
@@ -292,31 +279,14 @@ export function PureBlock({
           </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

components/chat-header.tsx

@@ -12,11 +12,7 @@ import { PlusIcon, VercelIcon } from './icons';
 import { useSidebar } from './ui/sidebar';
 import { memo } from 'react';
 
-export function PureChatHeader({
-  selectedModelId,
-}: {
-  selectedModelId: string;
-}) {
+function PureChatHeader({ selectedModelId }: { selectedModelId: string }) {
   const router = useRouter();
   const { open } = useSidebar();
 

components/document.tsx

@@ -1,4 +1,4 @@
-import type { SetStateAction } from 'react';
+import { memo, type SetStateAction } from 'react';
 
 import type { UIBlock } from './block';
 import { FileIcon, LoaderIcon, MessageIcon, PencilEditIcon } from './icons';
@@ -28,7 +28,7 @@ interface DocumentToolResultProps {
   setBlock: (value: SetStateAction<UIBlock>) => void;
 }
 
-export function DocumentToolResult({
+function PureDocumentToolResult({
   type,
   result,
   setBlock,
@@ -73,17 +73,15 @@ export function DocumentToolResult({
   );
 }
 
+export const DocumentToolResult = memo(PureDocumentToolResult, () => true);
+
 interface DocumentToolCallProps {
   type: 'create' | 'update' | 'request-suggestions';
   args: { title: string };
   setBlock: (value: SetStateAction<UIBlock>) => void;
 }
 
-export function DocumentToolCall({
-  type,
-  args,
-  setBlock,
-}: DocumentToolCallProps) {
+function PureDocumentToolCall({ type, args, setBlock }: DocumentToolCallProps) {
   return (
     <button
       type="button"
@@ -125,3 +123,5 @@ export function DocumentToolCall({
     </button>
   );
 }
+
+export const DocumentToolCall = memo(PureDocumentToolCall, () => true);

components/message.tsx

@@ -16,7 +16,7 @@ import { PreviewAttachment } from './preview-attachment';
 import { Weather } from './weather';
 import equal from 'fast-deep-equal';
 
-export const PurePreviewMessage = ({
+const PurePreviewMessage = ({
   chatId,
   message,
   block,
@@ -158,6 +158,7 @@ export const PreviewMessage = memo(
   (prevProps, nextProps) => {
     if (prevProps.isLoading !== nextProps.isLoading) return false;
     if (prevProps.isLoading && nextProps.isLoading) return false;
+    if (!equal(prevProps.vote, nextProps.vote)) return false;
     return true;
   },
 );

components/messages.tsx

@@ -5,7 +5,6 @@ import { Overview } from './overview';
 import { UIBlock } from './block';
 import { Dispatch, memo, SetStateAction } from 'react';
 import { Vote } from '@/lib/db/schema';
-import equal from 'fast-deep-equal';
 
 interface MessagesProps {
   chatId: string;
@@ -16,7 +15,7 @@ interface MessagesProps {
   messages: Array<Message>;
 }
 
-export function PureMessages({
+function PureMessages({
   chatId,
   block,
   setBlock,

components/multimodal-input.tsx

@@ -30,7 +30,7 @@ import { Button } from './ui/button';
 import { Textarea } from './ui/textarea';
 import { SuggestedActions } from './suggested-actions';
 
-export function PureMultimodalInput({
+function PureMultimodalInput({
   chatId,
   input,
   setInput,

components/suggested-actions.tsx

@@ -13,10 +13,7 @@ interface SuggestedActionsProps {
   ) => Promise<string | null | undefined>;
 }
 
-export function PureSuggestedActions({
-  chatId,
-  append,
-}: SuggestedActionsProps) {
+function PureSuggestedActions({ chatId, append }: SuggestedActionsProps) {
   const suggestedActions = [
     {
       title: 'What is the weather',

components/toolbar.tsx

@@ -326,7 +326,7 @@ export const Tools = ({
   );
 };
 
-export const PureToolbar = ({
+const PureToolbar = ({
   isToolbarVisible,
   setIsToolbarVisible,
   append,

package.json

@@ -15,7 +15,8 @@
     "db:push": "drizzle-kit push",
     "db:pull": "drizzle-kit pull",
     "db:check": "drizzle-kit check",
-    "db:up": "drizzle-kit up"
+    "db:up": "drizzle-kit up",
+    "scan": "next dev & npx react-scan@latest localhost:3000"
   },
   "dependencies": {
     "@ai-sdk/openai": "1.0.0-canary.3",