fix: memoize components and improve performance (#579)

2024-12-03 17:49:38 +03:00 · 2024-12-03 17:49:38 +03:00 · e839007580
commit e839007580
parent a13368cfcd
16 changed files with 453 additions and 232 deletions
--- a/components/block-actions.tsx
+++ b/components/block-actions.tsx
@ -0,0 +1,108 @@
+import { cn } from '@/lib/utils';
+import { CopyIcon, DeltaIcon, RedoIcon, UndoIcon } from './icons';
+import { Button } from './ui/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip';
+import { useCopyToClipboard } from 'usehooks-ts';
+import { toast } from 'sonner';
+import { UIBlock } from './block';
+import { memo } from 'react';
+
+interface BlockActionsProps {
+  block: UIBlock;
+  handleVersionChange: (type: 'next' | 'prev' | 'toggle' | 'latest') => void;
+  currentVersionIndex: number;
+  isCurrentVersion: boolean;
+  mode: 'read-only' | 'edit' | 'diff';
+}
+
+function PureBlockActions({
+  block,
+  handleVersionChange,
+  currentVersionIndex,
+  isCurrentVersion,
+  mode,
+}: BlockActionsProps) {
+  const [_, copyToClipboard] = useCopyToClipboard();
+
+  return (
+    <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={cn(
+              '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>
+  );
+}
+
+export const BlockActions = memo(PureBlockActions, (prevProps, nextProps) => {
+  if (
+    prevProps.block.status === 'streaming' &&
+    nextProps.block.status === 'streaming'
+  ) {
+    return true;
+  }
+
+  return false;
+});
--- a/components/block-close-button.tsx
+++ b/components/block-close-button.tsx
@ -0,0 +1,28 @@
+import { memo, SetStateAction } from 'react';
+import { CrossIcon } from './icons';
+import { Button } from './ui/button';
+import { UIBlock } from './block';
+import equal from 'fast-deep-equal';
+
+interface BlockCloseButtonProps {
+  setBlock: (value: SetStateAction<UIBlock>) => void;
+}
+
+function PureBlockCloseButton({ setBlock }: BlockCloseButtonProps) {
+  return (
+    <Button
+      variant="outline"
+      className="h-fit p-2 dark:hover:bg-zinc-700"
+      onClick={() => {
+        setBlock((currentBlock) => ({
+          ...currentBlock,
+          isVisible: false,
+        }));
+      }}
+    >
+      <CrossIcon size={18} />
+    </Button>
+  );
+}
+
+export const BlockCloseButton = memo(PureBlockCloseButton, () => true);
--- a/components/block-messages.tsx
+++ b/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);
--- a/components/block-stream-handler.tsx
+++ b/components/block-stream-handler.tsx
@ -9,7 +9,7 @@ interface BlockStreamHandlerProps {
  streamingData: JSONValue[] | undefined;
 }

-export function PureBlockStreamHandler({
+function PureBlockStreamHandler({
  setBlock,
  streamingData,
 }: BlockStreamHandlerProps) {
--- a/components/block.tsx
+++ b/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
+            <BlockMessages
              chatId={chatId}
-                  key={message.id}
-                  message={message}
              block={block}
+              isLoading={isLoading}
              setBlock={setBlock}
-                  isLoading={isLoading && index === messages.length - 1}
-                  vote={
-                    votes
-                      ? votes.find((vote) => vote.messageId === message.id)
-                      : undefined
-                  }
+              votes={votes}
+              messages={messages}
            />
-              ))}
-
-              <div
-                ref={messagesEndRef}
-                className="shrink-0 min-w-[24px] min-h-[24px]"
-              />
-            </div>

            <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;
+});
--- a/components/chat-header.tsx
+++ b/components/chat-header.tsx
@ -10,8 +10,9 @@ import { Button } from '@/components/ui/button';
 import { BetterTooltip } from '@/components/ui/tooltip';
 import { PlusIcon, VercelIcon } from './icons';
 import { useSidebar } from './ui/sidebar';
+import { memo } from 'react';

-export function ChatHeader({ selectedModelId }: { selectedModelId: string }) {
+function PureChatHeader({ selectedModelId }: { selectedModelId: string }) {
  const router = useRouter();
  const { open } = useSidebar();

@ -54,3 +55,7 @@ export function ChatHeader({ selectedModelId }: { selectedModelId: string }) {
    </header>
  );
 }
+
+export const ChatHeader = memo(PureChatHeader, (prevProps, nextProps) => {
+  return prevProps.selectedModelId === nextProps.selectedModelId;
+});
--- a/components/chat.tsx
+++ b/components/chat.tsx
@ -8,15 +8,13 @@ import useSWR, { useSWRConfig } from 'swr';
 import { useWindowSize } from 'usehooks-ts';

 import { ChatHeader } from '@/components/chat-header';
-import { PreviewMessage, ThinkingMessage } from '@/components/message';
-import { useScrollToBottom } from '@/components/use-scroll-to-bottom';
 import type { Vote } from '@/lib/db/schema';
 import { fetcher } from '@/lib/utils';

 import { Block, type UIBlock } from './block';
 import { BlockStreamHandler } from './block-stream-handler';
 import { MultimodalInput } from './multimodal-input';
-import { Overview } from './overview';
+import { Messages } from './messages';

 export function Chat({
  id,
@ -69,48 +67,22 @@ export function Chat({
    fetcher,
  );

-  const [messagesContainerRef, messagesEndRef] =
-    useScrollToBottom<HTMLDivElement>();
-
  const [attachments, setAttachments] = useState<Array<Attachment>>([]);

  return (
    <>
      <div className="flex flex-col min-w-0 h-dvh bg-background">
        <ChatHeader selectedModelId={selectedModelId} />
-        <div
-          ref={messagesContainerRef}
-          className="flex flex-col min-w-0 gap-6 flex-1 overflow-y-scroll pt-4"
-        >
-          {messages.length === 0 && <Overview />}

-          {messages.map((message, index) => (
-            <PreviewMessage
-              key={message.id}
+        <Messages
          chatId={id}
-              message={message}
          block={block}
          setBlock={setBlock}
-              isLoading={isLoading && messages.length - 1 === index}
-              vote={
-                votes
-                  ? votes.find((vote) => vote.messageId === message.id)
-                  : undefined
-              }
+          isLoading={isLoading}
+          votes={votes}
+          messages={messages}
        />
-          ))}

-          {isLoading &&
-            messages.length > 0 &&
-            messages[messages.length - 1].role === 'user' && (
-              <ThinkingMessage />
-            )}
-
-          <div
-            ref={messagesEndRef}
-            className="shrink-0 min-w-[24px] min-h-[24px]"
-          />
-        </div>
        <form className="flex mx-auto px-4 bg-background pb-4 md:pb-6 gap-2 w-full md:max-w-3xl">
          <MultimodalInput
            chatId={id}
--- a/components/document.tsx
+++ b/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);
--- a/components/message.tsx
+++ b/components/message.tsx
@ -3,7 +3,7 @@
 import type { Message } from 'ai';
 import cx from 'classnames';
 import { motion } from 'framer-motion';
-import type { Dispatch, SetStateAction } from 'react';
+import { memo, type Dispatch, type SetStateAction } from 'react';

 import type { Vote } from '@/lib/db/schema';

@ -14,8 +14,9 @@ import { Markdown } from './markdown';
 import { MessageActions } from './message-actions';
 import { PreviewAttachment } from './preview-attachment';
 import { Weather } from './weather';
+import equal from 'fast-deep-equal';

-export const PreviewMessage = ({
+const PurePreviewMessage = ({
  chatId,
  message,
  block,
@ -152,6 +153,16 @@ export const PreviewMessage = ({
  );
 };

+export const PreviewMessage = memo(
+  PurePreviewMessage,
+  (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;
+  },
+);
+
 export const ThinkingMessage = () => {
  const role = 'assistant';

--- a/components/messages.tsx
+++ b/components/messages.tsx
@ -0,0 +1,75 @@
+import { Message } from 'ai';
+import { PreviewMessage, ThinkingMessage } from './message';
+import { useScrollToBottom } from './use-scroll-to-bottom';
+import { Overview } from './overview';
+import { UIBlock } from './block';
+import { Dispatch, memo, SetStateAction } from 'react';
+import { Vote } from '@/lib/db/schema';
+
+interface MessagesProps {
+  chatId: string;
+  block: UIBlock;
+  setBlock: Dispatch<SetStateAction<UIBlock>>;
+  isLoading: boolean;
+  votes: Array<Vote> | undefined;
+  messages: Array<Message>;
+}
+
+function PureMessages({
+  chatId,
+  block,
+  setBlock,
+  isLoading,
+  votes,
+  messages,
+}: MessagesProps) {
+  const [messagesContainerRef, messagesEndRef] =
+    useScrollToBottom<HTMLDivElement>();
+
+  return (
+    <div
+      ref={messagesContainerRef}
+      className="flex flex-col min-w-0 gap-6 flex-1 overflow-y-scroll pt-4"
+    >
+      {messages.length === 0 && <Overview />}
+
+      {messages.map((message, index) => (
+        <PreviewMessage
+          key={message.id}
+          chatId={chatId}
+          message={message}
+          block={block}
+          setBlock={setBlock}
+          isLoading={isLoading && messages.length - 1 === index}
+          vote={
+            votes
+              ? votes.find((vote) => vote.messageId === message.id)
+              : undefined
+          }
+        />
+      ))}
+
+      {isLoading &&
+        messages.length > 0 &&
+        messages[messages.length - 1].role === 'user' && <ThinkingMessage />}
+
+      <div
+        ref={messagesEndRef}
+        className="shrink-0 min-w-[24px] min-h-[24px]"
+      />
+    </div>
+  );
+}
+
+function areEqual(prevProps: MessagesProps, nextProps: MessagesProps) {
+  if (
+    prevProps.block.status === 'streaming' &&
+    nextProps.block.status === 'streaming'
+  ) {
+    return true;
+  }
+
+  return false;
+}
+
+export const Messages = memo(PureMessages, areEqual);
--- a/components/multimodal-input.tsx
+++ b/components/multimodal-input.tsx
@ -17,6 +17,7 @@ import {
  type Dispatch,
  type SetStateAction,
  type ChangeEvent,
+  memo,
 } from 'react';
 import { toast } from 'sonner';
 import { useLocalStorage, useWindowSize } from 'usehooks-ts';
@ -27,21 +28,9 @@ import { ArrowUpIcon, PaperclipIcon, StopIcon } from './icons';
 import { PreviewAttachment } from './preview-attachment';
 import { Button } from './ui/button';
 import { Textarea } from './ui/textarea';
+import { SuggestedActions } from './suggested-actions';

-const suggestedActions = [
-  {
-    title: 'What is the weather',
-    label: 'in San Francisco?',
-    action: 'What is the weather in San Francisco?',
-  },
-  {
-    title: 'Help me draft an essay',
-    label: 'about Silicon Valley',
-    action: 'Help me draft a short essay about Silicon Valley',
-  },
-];
-
-export function MultimodalInput({
+function PureMultimodalInput({
  chatId,
  input,
  setInput,
@ -201,36 +190,7 @@ export function MultimodalInput({
      {messages.length === 0 &&
        attachments.length === 0 &&
        uploadQueue.length === 0 && (
-          <div className="grid sm:grid-cols-2 gap-2 w-full">
-            {suggestedActions.map((suggestedAction, index) => (
-              <motion.div
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: 20 }}
-                transition={{ delay: 0.05 * index }}
-                key={`suggested-action-${suggestedAction.title}-${index}`}
-                className={index > 1 ? 'hidden sm:block' : 'block'}
-              >
-                <Button
-                  variant="ghost"
-                  onClick={async () => {
-                    window.history.replaceState({}, '', `/chat/${chatId}`);
-
-                    append({
-                      role: 'user',
-                      content: suggestedAction.action,
-                    });
-                  }}
-                  className="text-left border rounded-xl px-4 py-3.5 text-sm flex-1 gap-1 sm:flex-col w-full h-auto justify-start items-start"
-                >
-                  <span className="font-medium">{suggestedAction.title}</span>
-                  <span className="text-muted-foreground">
-                    {suggestedAction.label}
-                  </span>
-                </Button>
-              </motion.div>
-            ))}
-          </div>
+          <SuggestedActions append={append} chatId={chatId} />
        )}

      <input
@ -324,3 +284,13 @@ export function MultimodalInput({
    </div>
  );
 }
+
+export const MultimodalInput = memo(
+  PureMultimodalInput,
+  (prevProps, currentProps) => {
+    if (prevProps.input !== currentProps.input) return false;
+    if (prevProps.isLoading !== currentProps.isLoading) return false;
+
+    return true;
+  },
+);
--- a/components/sidebar-history.tsx
+++ b/components/sidebar-history.tsx
@ -4,7 +4,7 @@ import { isToday, isYesterday, subMonths, subWeeks } from 'date-fns';
 import Link from 'next/link';
 import { useParams, usePathname, useRouter } from 'next/navigation';
 import type { User } from 'next-auth';
-import { useEffect, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 import { toast } from 'sonner';
 import useSWR from 'swr';

@ -36,6 +36,7 @@ import {
 } from '@/components/ui/sidebar';
 import type { Chat } from '@/lib/db/schema';
 import { fetcher } from '@/lib/utils';
+import equal from 'fast-deep-equal';

 type GroupedChats = {
  today: Chat[];
@ -45,7 +46,7 @@ type GroupedChats = {
  older: Chat[];
 };

-const ChatItem = ({
+const PureChatItem = ({
  chat,
  isActive,
  onDelete,
@ -62,6 +63,7 @@ const ChatItem = ({
        <span>{chat.title}</span>
      </Link>
    </SidebarMenuButton>
+
    <DropdownMenu modal={true}>
      <DropdownMenuTrigger asChild>
        <SidebarMenuAction
@ -85,6 +87,11 @@ const ChatItem = ({
  </SidebarMenuItem>
 );

+export const ChatItem = memo(PureChatItem, (prevProps, nextProps) => {
+  if (prevProps.isActive !== nextProps.isActive) return false;
+  return true;
+});
+
 export function SidebarHistory({ user }: { user: User | undefined }) {
  const { setOpenMobile } = useSidebar();
  const { id } = useParams();
--- a/components/suggested-actions.tsx
+++ b/components/suggested-actions.tsx
@ -0,0 +1,64 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { Button } from './ui/button';
+import { ChatRequestOptions, CreateMessage, Message } from 'ai';
+import { memo } from 'react';
+
+interface SuggestedActionsProps {
+  chatId: string;
+  append: (
+    message: Message | CreateMessage,
+    chatRequestOptions?: ChatRequestOptions,
+  ) => Promise<string | null | undefined>;
+}
+
+function PureSuggestedActions({ chatId, append }: SuggestedActionsProps) {
+  const suggestedActions = [
+    {
+      title: 'What is the weather',
+      label: 'in San Francisco?',
+      action: 'What is the weather in San Francisco?',
+    },
+    {
+      title: 'Help me draft an essay',
+      label: 'about Silicon Valley',
+      action: 'Help me draft a short essay about Silicon Valley',
+    },
+  ];
+
+  return (
+    <div className="grid sm:grid-cols-2 gap-2 w-full">
+      {suggestedActions.map((suggestedAction, index) => (
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 20 }}
+          transition={{ delay: 0.05 * index }}
+          key={`suggested-action-${suggestedAction.title}-${index}`}
+          className={index > 1 ? 'hidden sm:block' : 'block'}
+        >
+          <Button
+            variant="ghost"
+            onClick={async () => {
+              window.history.replaceState({}, '', `/chat/${chatId}`);
+
+              append({
+                role: 'user',
+                content: suggestedAction.action,
+              });
+            }}
+            className="text-left border rounded-xl px-4 py-3.5 text-sm flex-1 gap-1 sm:flex-col w-full h-auto justify-start items-start"
+          >
+            <span className="font-medium">{suggestedAction.title}</span>
+            <span className="text-muted-foreground">
+              {suggestedAction.label}
+            </span>
+          </Button>
+        </motion.div>
+      ))}
+    </div>
+  );
+}
+
+export const SuggestedActions = memo(PureSuggestedActions, () => true);
--- a/components/toolbar.tsx
+++ b/components/toolbar.tsx
@ -10,6 +10,7 @@ import {
 } from 'framer-motion';
 import {
  type Dispatch,
+  memo,
  type SetStateAction,
  useEffect,
  useRef,
@ -32,6 +33,7 @@ import {
  StopIcon,
  SummarizeIcon,
 } from './icons';
+import equal from 'fast-deep-equal';

 type ToolProps = {
  type: 'final-polish' | 'request-suggestions' | 'adjust-reading-level';
@ -324,7 +326,7 @@ export const Tools = ({
  );
 };

-export const Toolbar = ({
+const PureToolbar = ({
  isToolbarVisible,
  setIsToolbarVisible,
  append,
@ -465,3 +467,7 @@ export const Toolbar = ({
    </TooltipProvider>
  );
 };
+
+export const Toolbar = memo(PureToolbar, (prevProps, nextProps) => {
+  return equal(prevProps, nextProps);
+});
--- a/package.json
+++ b/package.json
@ -41,6 +41,7 @@
    "diff-match-patch": "^1.0.5",
    "dotenv": "^16.4.5",
    "drizzle-orm": "^0.34.0",
+    "fast-deep-equal": "^3.1.3",
    "framer-motion": "^11.3.19",
    "geist": "^1.3.1",
    "lucide-react": "^0.446.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -77,6 +77,9 @@ importers:
      drizzle-orm:
        specifier: ^0.34.0
        version: 0.34.1(@neondatabase/serverless@0.9.5)(@opentelemetry/api@1.9.0)(@types/pg@8.11.6)(@types/react@18.3.12)(@vercel/postgres@0.10.0)(postgres@3.4.5)(react@19.0.0-rc-45804af1-20241021)
+      fast-deep-equal:
+        specifier: ^3.1.3
+        version: 3.1.3
      framer-motion:
        specifier: ^11.3.19
        version: 11.11.10(react-dom@19.0.0-rc-45804af1-20241021(react@19.0.0-rc-45804af1-20241021))(react@19.0.0-rc-45804af1-20241021)
@ -197,7 +200,7 @@ importers:
        version: 9.1.0(eslint@8.57.1)
      eslint-import-resolver-typescript:
        specifier: ^3.6.3
-        version: 3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1))(eslint@8.57.1)
+        version: 3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1)
      eslint-plugin-tailwindcss:
        specifier: ^3.17.5
        version: 3.17.5(tailwindcss@3.4.14)
@ -5233,8 +5236,8 @@ snapshots:
      '@typescript-eslint/parser': 7.2.0(eslint@8.57.1)(typescript@5.6.3)
      eslint: 8.57.1
      eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1))(eslint@8.57.1)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1)
+      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
      eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.1)
      eslint-plugin-react: 7.37.2(eslint@8.57.1)
      eslint-plugin-react-hooks: 5.0.0-canary-7118f5dd7-20230705(eslint@8.57.1)
@ -5257,37 +5260,37 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1))(eslint@8.57.1):
+  eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1):
    dependencies:
      '@nolyfill/is-core-module': 1.0.39
      debug: 4.3.7
      enhanced-resolve: 5.17.1
      eslint: 8.57.1
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
      fast-glob: 3.3.2
      get-tsconfig: 4.8.1
      is-bun-module: 1.2.1
      is-glob: 4.0.3
    optionalDependencies:
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
    transitivePeerDependencies:
      - '@typescript-eslint/parser'
      - eslint-import-resolver-node
      - eslint-import-resolver-webpack
      - supports-color

-  eslint-module-utils@2.12.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1):
    dependencies:
      debug: 3.2.7
    optionalDependencies:
      '@typescript-eslint/parser': 7.2.0(eslint@8.57.1)(typescript@5.6.3)
      eslint: 8.57.1
      eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1))(eslint@8.57.1)
+      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1)
    transitivePeerDependencies:
      - supports-color

-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1):
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1):
    dependencies:
      '@rtsao/scc': 1.1.0
      array-includes: 3.1.8
@ -5298,7 +5301,7 @@ snapshots:
      doctrine: 2.1.0
      eslint: 8.57.1
      eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.2.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
      hasown: 2.0.2
      is-core-module: 2.15.1
      is-glob: 4.0.3