chore: sync live with main (#644)

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';
 
 import { auth } from '../(auth)/auth';
 
@@ -26,14 +27,17 @@ export default async function Page() {
   }
 
   return (
-    <Chat
-      key={id}
-      id={session ? id : 'guest'}
-      initialMessages={[]}
-      selectedModelId={selectedModelId}
-      user={session?.user}
-      selectedVisibilityType="private"
-      isReadonly={false}
-    />
+    <>
+      <Chat
+        key={id}
+        id={session ? id : 'guest'}
+        initialMessages={[]}
+        selectedModelId={selectedModelId}
+        user={session?.user}
+        selectedVisibilityType="private"
+        isReadonly={false}
+      />
+      <DataStreamHandler id={session ? id : 'guest'} />
+    </>
   );
 }

app/globals.css

@@ -30,17 +30,17 @@
         --card-foreground: 240 10% 3.9%;
         --popover: 0 0% 100%;
         --popover-foreground: 240 10% 3.9%;
-        --primary: 217 100% 45%;
+        --primary: 240 5.9% 10%;
         --primary-foreground: 0 0% 98%;
-        --secondary: 213 100% 96%;
+        --secondary: 240 4.8% 95.9%;
         --secondary-foreground: 240 5.9% 10%;
         --muted: 240 4.8% 95.9%;
         --muted-foreground: 240 3.8% 46.1%;
         --accent: 240 4.8% 95.9%;
         --accent-foreground: 240 5.9% 10%;
         --destructive: 0 84.2% 60.2%;
         --destructive-foreground: 0 0% 98%;
-        --border: 214 32% 91%;
+        --border: 240 5.9% 90%;
         --input: 240 5.9% 90%;
         --ring: 240 10% 3.9%;
         --chart-1: 12 76% 61%;
@@ -65,8 +65,8 @@
         --card-foreground: 0 0% 98%;
         --popover: 240 10% 3.9%;
         --popover-foreground: 0 0% 98%;
-        --primary: 208.69 100% 24.18%;
-        --primary-foreground: 207 100% 96%;
+        --primary: 0 0% 98%;
+        --primary-foreground: 240 5.9% 10%;
         --secondary: 240 3.7% 15.9%;
         --secondary-foreground: 0 0% 98%;
         --muted: 240 3.7% 15.9%;

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,15 +1,14 @@
-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';
 import { User } from 'next-auth';
 
 interface BlockMessagesProps {
   chatId: string;
-  block: UIBlock;
-  setBlock: Dispatch<SetStateAction<UIBlock>>;
   isLoading: boolean;
   votes: Array<Vote> | undefined;
   messages: Array<Message>;
@@ -21,16 +20,15 @@ interface BlockMessagesProps {
     chatRequestOptions?: ChatRequestOptions,
   ) => Promise<string | null | undefined>;
   isReadonly: boolean;
+  blockStatus: UIBlock['status'];
 }
 
 function PureBlockMessages({
   chatId,
-  block,
-  setBlock,
+  user,
   isLoading,
   votes,
   messages,
-  user,
   setMessages,
   reload,
   isReadonly,
@@ -48,8 +46,6 @@ function PureBlockMessages({
           chatId={chatId}
           key={message.id}
           message={message}
-          block={block}
-          setBlock={setBlock}
           isLoading={isLoading && index === messages.length - 1}
           vote={
             votes
@@ -76,13 +72,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);