Refactor to use newver v4 version of Vercel AI package

app/components/chat/Chat.client.tsx

@@ -112,13 +112,22 @@ export const ChatImpl = memo(
       body: {
         apiKeys,
       },
+      sendExtraMessageFields: true,
       onError: (error) => {
         logger.error('Request failed\n\n', error);
         toast.error(
           'There was an error processing your request: ' + (error.message ? error.message : 'No details were returned'),
         );
       },
-      onFinish: () => {
+      onFinish: (message, response) => {
+        const usage = response.usage;
+
+        if (usage) {
+          console.log('Token usage:', usage);
+
+          // You can now use the usage data as needed
+        }
+
         logger.debug('Finished streaming');
       },
       initialMessages,

app/components/chat/ImportFolderButton.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import type { Message } from 'ai';
 import { toast } from 'react-toastify';
-import { MAX_FILES, isBinaryFile, shouldIncludeFile } from '../../utils/fileUtils';
-import { createChatFromFolder } from '../../utils/folderImport';
+import { MAX_FILES, isBinaryFile, shouldIncludeFile } from '~/utils/fileUtils';
+import { createChatFromFolder } from '~/utils/folderImport';
 
 interface ImportFolderButtonProps {
   className?: string;
@@ -17,12 +17,14 @@ export const ImportFolderButton: React.FC<ImportFolderButtonProps> = ({ classNam
 
     if (allFiles.length > MAX_FILES) {
       toast.error(
-        `This folder contains ${allFiles.length.toLocaleString()} files. This product is not yet optimized for very large projects. Please select a folder with fewer than ${MAX_FILES.toLocaleString()} files.`
+        `This folder contains ${allFiles.length.toLocaleString()} files. This product is not yet optimized for very large projects. Please select a folder with fewer than ${MAX_FILES.toLocaleString()} files.`,
       );
       return;
     }
+
     const folderName = allFiles[0]?.webkitRelativePath.split('/')[0] || 'Unknown Folder';
     setIsLoading(true);
+
     const loadingToast = toast.loading(`Importing ${folderName}...`);
 
     try {

app/components/chat/SendButton.client.tsx

@@ -23,6 +23,7 @@ export const SendButton = ({ show, isStreaming, disabled, onClick }: SendButtonP
           disabled={disabled}
           onClick={(event) => {
             event.preventDefault();
+
             if (!disabled) {
               onClick?.(event);
             }