feat: add inline block document previews (#637)

components/chat.tsx

@@ -2,20 +2,18 @@
 
 import type { Attachment, Message } from 'ai';
 import { useChat } from 'ai/react';
-import { AnimatePresence } from 'framer-motion';
 import { useState } from 'react';
 import useSWR, { useSWRConfig } from 'swr';
-import { useWindowSize } from 'usehooks-ts';
 
 import { ChatHeader } from '@/components/chat-header';
 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 { Block } from './block';
 import { MultimodalInput } from './multimodal-input';
 import { Messages } from './messages';
 import { VisibilityType } from './visibility-selector';
+import { useBlockSelector } from '@/hooks/use-block';
 
 export function Chat({
   id,
@@ -42,40 +40,23 @@ export function Chat({
     isLoading,
     stop,
     reload,
-    data: streamingData,
   } = useChat({
     id,
     body: { id, modelId: selectedModelId },
     initialMessages,
+    experimental_throttle: 100,
     onFinish: () => {
       mutate('/api/history');
     },
   });
 
-  const { width: windowWidth = 1920, height: windowHeight = 1080 } =
-    useWindowSize();
-
-  const [block, setBlock] = useState<UIBlock>({
-    documentId: 'init',
-    content: '',
-    kind: 'text',
-    title: '',
-    status: 'idle',
-    isVisible: false,
-    boundingBox: {
-      top: windowHeight / 4,
-      left: windowWidth / 4,
-      width: 250,
-      height: 50,
-    },
-  });
-
   const { data: votes } = useSWR<Array<Vote>>(
     `/api/vote?chatId=${id}`,
     fetcher,
   );
 
   const [attachments, setAttachments] = useState<Array<Attachment>>([]);
+  const isBlockVisible = useBlockSelector((state) => state.isVisible);
 
   return (
     <>
@@ -89,14 +70,13 @@ export function Chat({
 
         <Messages
           chatId={id}
-          block={block}
-          setBlock={setBlock}
           isLoading={isLoading}
           votes={votes}
           messages={messages}
           setMessages={setMessages}
           reload={reload}
           isReadonly={isReadonly}
+          isBlockVisible={isBlockVisible}
         />
 
         <form className="flex mx-auto px-4 bg-background pb-4 md:pb-6 gap-2 w-full md:max-w-3xl">
@@ -118,30 +98,22 @@ export function Chat({
         </form>
       </div>
 
-      <AnimatePresence>
-        {block?.isVisible && (
-          <Block
-            chatId={id}
-            input={input}
-            setInput={setInput}
-            handleSubmit={handleSubmit}
-            isLoading={isLoading}
-            stop={stop}
-            attachments={attachments}
-            setAttachments={setAttachments}
-            append={append}
-            block={block}
-            setBlock={setBlock}
-            messages={messages}
-            setMessages={setMessages}
-            reload={reload}
-            votes={votes}
-            isReadonly={isReadonly}
-          />
-        )}
-      </AnimatePresence>
-
-      <BlockStreamHandler streamingData={streamingData} setBlock={setBlock} />
+      <Block
+        chatId={id}
+        input={input}
+        setInput={setInput}
+        handleSubmit={handleSubmit}
+        isLoading={isLoading}
+        stop={stop}
+        attachments={attachments}
+        setAttachments={setAttachments}
+        append={append}
+        messages={messages}
+        setMessages={setMessages}
+        reload={reload}
+        votes={votes}
+        isReadonly={isReadonly}
+      />
     </>
   );
 }