diff --git a/app/(chat)/api/files/upload/route.ts b/app/(chat)/api/files/upload/route.ts index 8da795db3..699a4cbef 100644 --- a/app/(chat)/api/files/upload/route.ts +++ b/app/(chat)/api/files/upload/route.ts @@ -11,13 +11,10 @@ const FileSchema = z.object({ .refine((file) => file.size <= 5 * 1024 * 1024, { message: 'File size should be less than 5MB', }) - .refine( - (file) => - ['image/jpeg', 'image/png', 'application/pdf'].includes(file.type), - { - message: 'File type should be JPEG, PNG, or PDF', - }, - ), + // Update the file type based on the kind of files you want to accept + .refine((file) => ['image/jpeg', 'image/png'].includes(file.type), { + message: 'File type should be JPEG or PNG', + }), }); export async function POST(request: Request) { diff --git a/app/(chat)/chat/[id]/page.tsx b/app/(chat)/chat/[id]/page.tsx index 5d5b06208..acf5da3d1 100644 --- a/app/(chat)/chat/[id]/page.tsx +++ b/app/(chat)/chat/[id]/page.tsx @@ -1,4 +1,3 @@ - import { cookies } from 'next/headers'; import { notFound } from 'next/navigation'; diff --git a/components/document.tsx b/components/document.tsx index bb415d98e..4c7eb2eb7 100644 --- a/components/document.tsx +++ b/components/document.tsx @@ -3,14 +3,19 @@ import type { SetStateAction } from 'react'; import type { UIBlock } from './block'; import { FileIcon, LoaderIcon, MessageIcon, PencilEditIcon } from './icons'; -const getActionText = (type: 'create' | 'update' | 'request-suggestions') => { +const getActionText = ( + type: 'create' | 'update' | 'request-suggestions', + tense: 'present' | 'past', +) => { switch (type) { case 'create': - return 'Creating'; + return tense === 'present' ? 'Creating' : 'Created'; case 'update': - return 'Updating'; + return tense === 'present' ? 'Updating' : 'Updated'; case 'request-suggestions': - return 'Adding suggestions'; + return tense === 'present' + ? 'Adding suggestions' + : 'Added suggestions to'; default: return null; } @@ -26,7 +31,6 @@ interface DocumentToolResultProps { export function DocumentToolResult({ type, result, - block, setBlock, }: DocumentToolResultProps) { return ( @@ -62,8 +66,8 @@ export function DocumentToolResult({ <MessageIcon /> ) : null} </div> - <div className=""> - {getActionText(type)} {result.title} + <div className="text-left"> + {`${getActionText(type, 'past')} "${result.title}"`} </div> </button> ); @@ -72,11 +76,35 @@ export function DocumentToolResult({ interface DocumentToolCallProps { type: 'create' | 'update' | 'request-suggestions'; args: { title: string }; + setBlock: (value: SetStateAction<UIBlock>) => void; } -export function DocumentToolCall({ type, args }: DocumentToolCallProps) { +export function DocumentToolCall({ + type, + args, + setBlock, +}: DocumentToolCallProps) { return ( - <div className="w-fit border py-2 px-3 rounded-xl flex flex-row items-start justify-between gap-3"> + <button + type="button" + className="cursor pointer w-fit border py-2 px-3 rounded-xl flex flex-row items-start justify-between gap-3" + onClick={(event) => { + const rect = event.currentTarget.getBoundingClientRect(); + + const boundingBox = { + top: rect.top, + left: rect.left, + width: rect.width, + height: rect.height, + }; + + setBlock((currentBlock) => ({ + ...currentBlock, + isVisible: true, + boundingBox, + })); + }} + > <div className="flex flex-row gap-3 items-start"> <div className="text-zinc-500 mt-1"> {type === 'create' ? ( @@ -88,12 +116,12 @@ export function DocumentToolCall({ type, args }: DocumentToolCallProps) { ) : null} </div> - <div className=""> - {getActionText(type)} {args.title} + <div className="text-left"> + {`${getActionText(type, 'present')} ${args.title ? `"${args.title}"` : ''}`} </div> </div> <div className="animate-spin mt-1">{<LoaderIcon />}</div> - </div> + </button> ); } diff --git a/components/message.tsx b/components/message.tsx index 6340fcaef..cbbf2d2a9 100644 --- a/components/message.tsx +++ b/components/message.tsx @@ -104,13 +104,22 @@ export const PreviewMessage = ({ {toolName === 'getWeather' ? ( <Weather /> ) : toolName === 'createDocument' ? ( - <DocumentToolCall type="create" args={args} /> + <DocumentToolCall + type="create" + args={args} + setBlock={setBlock} + /> ) : toolName === 'updateDocument' ? ( - <DocumentToolCall type="update" args={args} /> + <DocumentToolCall + type="update" + args={args} + setBlock={setBlock} + /> ) : toolName === 'requestSuggestions' ? ( <DocumentToolCall type="request-suggestions" args={args} + setBlock={setBlock} /> ) : null} </div>