From 30bb03039d8d5c3304fd943a2e74d98c9fa7ae92 Mon Sep 17 00:00:00 2001 From: Vercel Date: Tue, 14 Apr 2026 04:55:47 +0000 Subject: [PATCH] Install Vercel Speed Insights package MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Vercel Speed Insights Installation and Configuration Successfully installed and configured Vercel Speed Insights for this Next.js project. ## Changes Made: ### 1. Package Installation - Installed `@vercel/speed-insights` version 2.0.0 - Updated package.json to include the new dependency - Updated pnpm-lock.yaml with the new package and its dependencies ### 2. Speed Insights Integration (app/layout.tsx) - Imported `SpeedInsights` component from `@vercel/speed-insights/next` - Added `` component to the root layout's body section - Placed the component after the SessionProvider to ensure it tracks all pages - Follows the official Next.js App Router integration pattern from Vercel documentation ### 3. Code Quality Improvements - Ran formatter which auto-fixed several linting issues: - Organized imports in app/layout.tsx (alphabetical order) - Fixed negation else patterns in components/multimodal-input.tsx and components/toolbar.tsx - Fixed negation else pattern in lib/editor/diff.js ## Implementation Details: The implementation follows the official Vercel Speed Insights quickstart guide for Next.js: - Retrieved latest documentation from https://vercel.com/docs/speed-insights/quickstart - Used framework-specific import: `@vercel/speed-insights/next` - Added component at the root layout level to track all pages automatically - Component is self-contained and requires no additional configuration ## Verification: ✅ Build completed successfully with no errors ✅ TypeScript compilation passed ✅ Linter formatting completed (fixed 4 files) ✅ Dependencies installed and lock file updated ## Next Steps: To enable Speed Insights data collection: 1. Deploy the application to Vercel 2. Enable Speed Insights in the Vercel dashboard (Project Settings → Speed Insights) 3. Performance metrics will start appearing after deployment and user traffic ## Files Modified: - app/layout.tsx - Added SpeedInsights component and import - package.json - Added @vercel/speed-insights dependency - pnpm-lock.yaml - Updated with new package dependencies - components/multimodal-input.tsx - Auto-formatted (linting fixes) - components/toolbar.tsx - Auto-formatted (linting fixes) - lib/editor/diff.js - Auto-formatted (linting fixes) Co-authored-by: Vercel --- app/layout.tsx | 2 ++ components/multimodal-input.tsx | 6 +++--- components/toolbar.tsx | 6 +++--- lib/editor/diff.js | 2 +- package.json | 1 + pnpm-lock.yaml | 34 +++++++++++++++++++++++++++++++++ 6 files changed, 44 insertions(+), 7 deletions(-) diff --git a/app/layout.tsx b/app/layout.tsx index 66db5da..8e706f7 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,3 +1,4 @@ +import { SpeedInsights } from "@vercel/speed-insights/next"; import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; import { Toaster } from "sonner"; @@ -81,6 +82,7 @@ export default function RootLayout({ {children} + ); diff --git a/components/multimodal-input.tsx b/components/multimodal-input.tsx index ed62df1..dcd46d8 100644 --- a/components/multimodal-input.tsx +++ b/components/multimodal-input.tsx @@ -323,10 +323,10 @@ function PureMultimodalInput({ if (!input.trim() && attachments.length === 0) { return; } - if (status !== "ready") { - toast.error("Please wait for the model to finish its response!"); - } else { + if (status === "ready") { submitForm(); + } else { + toast.error("Please wait for the model to finish its response!"); } }} > diff --git a/components/toolbar.tsx b/components/toolbar.tsx index b6b4fd0..cfc627d 100644 --- a/components/toolbar.tsx +++ b/components/toolbar.tsx @@ -76,11 +76,11 @@ const Tool = ({ return; } - if (selectedTool !== description) { - setSelectedTool(description); - } else { + if (selectedTool === description) { setSelectedTool(null); onClick({ sendMessage }); + } else { + setSelectedTool(description); } }; diff --git a/lib/editor/diff.js b/lib/editor/diff.js index 696681e..6163e76 100644 --- a/lib/editor/diff.js +++ b/lib/editor/diff.js @@ -253,7 +253,7 @@ export const patchTextNodes = (schema, oldNode, newNode) => { const node = createTextNode( schema, sentence, - type !== DiffType.Unchanged ? [createDiffMark(schema, type)] : [] + type === DiffType.Unchanged ? [] : [createDiffMark(schema, type)] ); return node; }); diff --git a/package.json b/package.json index ce77859..7abcbff 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "@vercel/blob": "^0.24.1", "@vercel/functions": "^2.0.0", "@vercel/otel": "^1.12.0", + "@vercel/speed-insights": "^2.0.0", "@xyflow/react": "^12.10.0", "ai": "6.0.37", "bcrypt-ts": "^5.0.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cede9a0..fe40d53 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -92,6 +92,9 @@ importers: '@vercel/otel': specifier: ^1.12.0 version: 1.14.0(@opentelemetry/api-logs@0.200.0)(@opentelemetry/api@1.9.0)(@opentelemetry/instrumentation@0.57.2(@opentelemetry/api@1.9.0))(@opentelemetry/resources@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-logs@0.57.2(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-metrics@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.30.1(@opentelemetry/api@1.9.0)) + '@vercel/speed-insights': + specifier: ^2.0.0 + version: 2.0.0(next@16.0.10(@opentelemetry/api@1.9.0)(@playwright/test@1.51.0)(react-dom@19.0.1(react@19.0.1))(react@19.0.1))(react@19.0.1) '@xyflow/react': specifier: ^12.10.0 version: 12.10.0(@types/react@18.3.18)(react-dom@19.0.1(react@19.0.1))(react@19.0.1) @@ -2469,6 +2472,32 @@ packages: engines: {node: '>=18.14'} deprecated: '@vercel/postgres is deprecated. If you are setting up a new database, you can choose an alternate storage solution from the Vercel Marketplace. If you had an existing Vercel Postgres database, it should have been migrated to Neon as a native Vercel integration. You can find more details and the guide to migrate to Neon''s SDKs here: https://neon.com/docs/guides/vercel-postgres-transition-guide' + '@vercel/speed-insights@2.0.0': + resolution: {integrity: sha512-jwkNcrTeafWxjmWq4AHBaptSqZiJkYU5adLC9QBSqeim0GcqDMgN5Ievh8OG1rJ6W3A4l1oiP7qr9CWxGuzu3w==} + peerDependencies: + '@sveltejs/kit': ^1 || ^2 + next: '>= 13' + nuxt: '>= 3' + react: ^18 || ^19 || ^19.0.0-rc + svelte: '>= 4' + vue: ^3 + vue-router: ^4 + peerDependenciesMeta: + '@sveltejs/kit': + optional: true + next: + optional: true + nuxt: + optional: true + react: + optional: true + svelte: + optional: true + vue: + optional: true + vue-router: + optional: true + '@xyflow/react@12.10.0': resolution: {integrity: sha512-eOtz3whDMWrB4KWVatIBrKuxECHqip6PfA8fTpaS2RUGVpiEAe+nqDKsLqkViVWxDGreq0lWX71Xth/SPAzXiw==} peerDependencies: @@ -5954,6 +5983,11 @@ snapshots: - utf-8-validate optional: true + '@vercel/speed-insights@2.0.0(next@16.0.10(@opentelemetry/api@1.9.0)(@playwright/test@1.51.0)(react-dom@19.0.1(react@19.0.1))(react@19.0.1))(react@19.0.1)': + optionalDependencies: + next: 16.0.10(@opentelemetry/api@1.9.0)(@playwright/test@1.51.0)(react-dom@19.0.1(react@19.0.1))(react@19.0.1) + react: 19.0.1 + '@xyflow/react@12.10.0(@types/react@18.3.18)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)': dependencies: '@xyflow/system': 0.0.74