feat: add inline block document previews (#637)

app/(chat)/page.tsx

@@ -3,6 +3,7 @@ import { cookies } from 'next/headers';
 import { Chat } from '@/components/chat';
 import { DEFAULT_MODEL_NAME, models } from '@/lib/ai/models';
 import { generateUUID } from '@/lib/utils';
+import { DataStreamHandler } from '@/components/data-stream-handler';
 
 export default async function Page() {
   const id = generateUUID();
@@ -15,13 +16,16 @@ export default async function Page() {
     DEFAULT_MODEL_NAME;
 
   return (
-    <Chat
-      key={id}
-      id={id}
-      initialMessages={[]}
-      selectedModelId={selectedModelId}
-      selectedVisibilityType="private"
-      isReadonly={false}
-    />
+    <>
+      <Chat
+        key={id}
+        id={id}
+        initialMessages={[]}
+        selectedModelId={selectedModelId}
+        selectedVisibilityType="private"
+        isReadonly={false}
+      />
+      <DataStreamHandler id={id} />
+    </>
   );
 }

biome.jsonc

@@ -45,7 +45,10 @@
         "noSvgWithoutTitle": "off", // We do not intend to adhere to this rule
         "useMediaCaption": "off", // We would need a cultural change to turn this on
         "noAutofocus": "off", // We're highly intentional about when we use autofocus
-        "noBlankTarget": "off" // Covered by Conformance
+        "noBlankTarget": "off", // Covered by Conformance
+        "useFocusableInteractive": "off", // Disable focusable interactive element requirement
+        "useAriaPropsForRole": "off", // Disable required ARIA attributes check
+        "useKeyWithClickEvents": "off" // Disable keyboard event requirement with click events
       },
       "complexity": {
         "noUselessStringConcat": "warn", // Not in recommended ruleset, turning on manually

components/block-close-button.tsx

@@ -1,23 +1,24 @@
-import { memo, SetStateAction } from 'react';
+import { memo } from 'react';
 import { CrossIcon } from './icons';
 import { Button } from './ui/button';
-import { UIBlock } from './block';
-import equal from 'fast-deep-equal';
+import { initialBlockData, useBlock } from '@/hooks/use-block';
 
-interface BlockCloseButtonProps {
-  setBlock: (value: SetStateAction<UIBlock>) => void;
-}
+function PureBlockCloseButton() {
+  const { setBlock } = useBlock();
 
-function PureBlockCloseButton({ setBlock }: BlockCloseButtonProps) {
   return (
     <Button
       variant="outline"
       className="h-fit p-2 dark:hover:bg-zinc-700"
       onClick={() => {
-        setBlock((currentBlock) => ({
-          ...currentBlock,
-          isVisible: false,
-        }));
+        setBlock((currentBlock) =>
+          currentBlock.status === 'streaming'
+            ? {
+                ...currentBlock,
+                isVisible: false,
+              }
+            : { ...initialBlockData, status: 'idle' },
+        );
       }}
     >
       <CrossIcon size={18} />

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);