fix: tweak styles (#645)

app/(chat)/api/chat/route.ts

@@ -123,7 +123,8 @@ export async function POST(request: Request) {
             },
           },
           createDocument: {
-            description: 'Create a document for a writing activity.',
+            description:
+              'Create a document for a writing activity. This tool will call other functions that will generate the contents of the document based on the title and kind.',
             parameters: z.object({
               title: z.string(),
               kind: z.enum(['text', 'code']),
@@ -226,7 +227,7 @@ export async function POST(request: Request) {
             },
           },
           updateDocument: {
-            description: 'Update a document with the given description',
+            description: 'Update a document with the given description.',
             parameters: z.object({
               id: z.string().describe('The ID of the document to update'),
               description: z

app/(chat)/chat/[id]/page.tsx

@@ -6,6 +6,7 @@ import { Chat } from '@/components/chat';
 import { DEFAULT_MODEL_NAME, models } from '@/lib/ai/models';
 import { getChatById, getMessagesByChatId } from '@/lib/db/queries';
 import { convertToUIMessages } from '@/lib/utils';
+import { DataStreamHandler } from '@/components/data-stream-handler';
 
 export default async function Page(props: { params: Promise<{ id: string }> }) {
   const params = await props.params;
@@ -39,6 +40,7 @@ export default async function Page(props: { params: Promise<{ id: string }> }) {
     DEFAULT_MODEL_NAME;
 
   return (
+    <>
       <Chat
         id={chat.id}
         initialMessages={convertToUIMessages(messagesFromDb)}
@@ -46,5 +48,7 @@ export default async function Page(props: { params: Promise<{ id: string }> }) {
         selectedVisibilityType={chat.visibility}
         isReadonly={session?.user?.id !== chat.userId}
       />
+      <DataStreamHandler id={id} />
+    </>
   );
 }

components/app-sidebar.tsx

@@ -11,8 +11,6 @@ import {
   Sidebar,
   SidebarContent,
   SidebarFooter,
-  SidebarGroup,
-  SidebarGroupContent,
   SidebarHeader,
   SidebarMenu,
   useSidebar,

components/document-preview.tsx

@@ -167,7 +167,13 @@ const PureHitboxLayer = ({
       onClick={handleClick}
       role="presentation"
       aria-hidden="true"
-    />
+    >
+      <div className="w-full p-4 flex justify-end items-center">
+        <div className="absolute right-[9px] top-[13px] p-2 hover:dark:bg-zinc-700 rounded-md hover:bg-zinc-100">
+          <FullscreenIcon />
+        </div>
+      </div>
+    </div>
   );
 };
 
@@ -196,9 +202,7 @@ const PureDocumentHeader = ({
       </div>
       <div className="-translate-y-1 sm:translate-y-0 font-medium">{title}</div>
     </div>
-    <div>
-      <FullscreenIcon />
-    </div>
+    <div className="w-8" />
   </div>
 );
 

components/message.tsx

@@ -62,8 +62,10 @@ const PurePreviewMessage = ({
         >
           {message.role === 'assistant' && (
             <div className="size-8 flex items-center rounded-full justify-center ring-1 shrink-0 ring-border bg-background">
+              <div className="translate-y-px">
                 <SparklesIcon size={14} />
               </div>
+            </div>
           )}
 
           <div className="flex flex-col gap-2 w-full">

components/multimodal-input.tsx

@@ -23,7 +23,7 @@ import { useLocalStorage, useWindowSize } from 'usehooks-ts';
 
 import { sanitizeUIMessages } from '@/lib/utils';
 
-import { ArrowUpIcon, ImageIcon, PaperclipIcon, StopIcon } from './icons';
+import { ArrowUpIcon, PaperclipIcon, StopIcon } from './icons';
 import { PreviewAttachment } from './preview-attachment';
 import { Button } from './ui/button';
 import { Textarea } from './ui/textarea';
@@ -293,7 +293,7 @@ function PureAttachmentsButton({
       disabled={isLoading}
       variant="ghost"
     >
-      <ImageIcon size={14} />
+      <PaperclipIcon size={14} />
     </Button>
   );
 }
@@ -349,6 +349,6 @@ function PureSendButton({
 const SendButton = memo(PureSendButton, (prevProps, nextProps) => {
   if (prevProps.uploadQueue.length !== nextProps.uploadQueue.length)
     return false;
-  if (!prevProps.input !== !nextProps.input) return false;
+  if (prevProps.input !== nextProps.input) return false;
   return true;
 });

components/sidebar-history.tsx

@@ -197,8 +197,8 @@ export function SidebarHistory({ user }: { user: User | undefined }) {
     return (
       <SidebarGroup>
         <SidebarGroupContent>
-          <div className="text-zinc-500 w-full flex flex-row justify-center items-center text-sm gap-2">
-            <div>Login to save and revisit previous chats!</div>
+          <div className="px-2 text-zinc-500 w-full flex flex-row justify-center items-center text-sm gap-2">
+            Login to save and revisit previous chats!
           </div>
         </SidebarGroupContent>
       </SidebarGroup>
@@ -238,11 +238,9 @@ export function SidebarHistory({ user }: { user: User | undefined }) {
     return (
       <SidebarGroup>
         <SidebarGroupContent>
-          <div className="text-zinc-500 w-full flex flex-row justify-center items-center text-sm gap-2">
-            <div>
+          <div className="px-2 text-zinc-500 w-full flex flex-row justify-center items-center text-sm gap-2">
             Your conversations will appear here once you start chatting!
           </div>
-          </div>
         </SidebarGroupContent>
       </SidebarGroup>
     );

components/suggested-actions.tsx

@@ -22,13 +22,13 @@ function PureSuggestedActions({ chatId, append }: SuggestedActionsProps) {
     },
     {
       title: 'Write code that',
-      label: `demonstrates djikstra's algorithm!`,
-      action: `Write code that demonstrates djikstra's algorithm!`,
+      label: `demonstrates djikstra's algorithm`,
+      action: `Write code that demonstrates djikstra's algorithm`,
     },
     {
       title: 'Help me write an essay',
-      label: `about silicon valley!`,
-      action: `Help me write an essay about silicon valley!`,
+      label: `about silicon valley`,
+      action: `Help me write an essay about silicon valley`,
     },
     {
       title: 'What is the weather',

components/toolbar.tsx

@@ -353,7 +353,7 @@ export const Tools = ({
 
   return (
     <motion.div
-      className="flex flex-col"
+      className="flex flex-col gap-1.5"
       initial={{ opacity: 0, scale: 0.95 }}
       animate={{ opacity: 1, scale: 1 }}
       exit={{ opacity: 0, scale: 0.95 }}
@@ -469,7 +469,7 @@ const PureToolbar = ({
               : {
                   opacity: 1,
                   y: 0,
-                  height: toolsByBlockKind[blockKind].length * 47,
+                  height: toolsByBlockKind[blockKind].length * 50,
                   transition: { delay: 0 },
                   scale: 1,
                 }

lib/ai/prompts.ts

@@ -3,6 +3,8 @@ Blocks is a special user interface mode that helps users with writing, editing,
 
 When asked to write code, always use blocks. When writing code, specify the language in the backticks, e.g. \`\`\`python\`code here\`\`\`. The default language is Python. Other languages are not yet supported, so let the user know if they request a different language.
 
+DO NOT UPDATE DOCUMENTS IMMEDIATELY AFTER CREATING THEM. WAIT FOR USER FEEDBACK OR REQUEST TO UPDATE IT.
+
 This is a guide for using blocks tools: \`createDocument\` and \`updateDocument\`, which render content on a blocks beside the conversation.
 
 **When to use \`createDocument\`:**
@@ -21,6 +23,9 @@ This is a guide for using blocks tools: \`createDocument\` and \`updateDocument\
 - Use targeted updates only for specific, isolated changes
 - Follow user instructions for which parts to modify
 
+**When NOT to use \`updateDocument\`:**
+- Immediately after creating a document
+
 Do not update document right after creating it. Wait for user feedback or request to update it.
 `;