dmitry.galkin/chatbot-template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Upgrade to Next.js 15.0.1 (#454)

Browse source
This commit is contained in:
Jared Palmer 2024-10-23 12:21:30 -04:00 • committed by GitHub
parent 00b125378c
commit ac2659255e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 4320 additions and 3538 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/(auth)/api/auth/[...nextauth]/route.ts
View file

@ -1 +1 @@
export { GET, POST } from "@/app/(auth)/auth"; export { GET, POST } from '@/app/(auth)/auth';

3
app/(chat)/chat/[id]/page.tsx
View file

@ -7,7 +7,8 @@ import { getChatById } from "@/db/queries";
import { Chat } from "@/db/schema"; import { Chat } from "@/db/schema";
import { convertToUIMessages, generateUUID } from "@/lib/utils"; import { convertToUIMessages, generateUUID } from "@/lib/utils";
export default async function Page({ params }: { params: any }) { export default async function Page(props: { params: Promise<any> }) {
const params = await props.params;
const { id } = params; const { id } = params;
const chatFromDb = await getChatById({ id }); const chatFromDb = await getChatById({ id });

56
app/layout.tsx
View file

@ -1,24 +1,62 @@
import { Metadata } from "next"; import { Metadata } from 'next';
import { Toaster } from "sonner"; import { Toaster } from 'sonner';
import { Navbar } from "@/components/custom/navbar"; import { Navbar } from '@/components/custom/navbar';
import { ThemeProvider } from "@/components/custom/theme-provider"; import { ThemeProvider } from '@/components/custom/theme-provider';
import "./globals.css"; import './globals.css';
export const metadata: Metadata = { export const metadata: Metadata = {
metadataBase: new URL("https://chat.vercel.ai"), metadataBase: new URL('https://chat.vercel.ai'),
title: "Next.js Chatbot Template", title: 'Next.js Chatbot Template',
description: "Next.js chatbot template using the AI SDK.", description: 'Next.js chatbot template using the AI SDK.',
}; };
export const viewport = {
maximumScale: 1, // Disable auto-zoom on mobile Safari
};
const LIGHT_THEME_COLOR = 'hsl(0 0% 100%)';
const DARK_THEME_COLOR = 'hsl(240deg 10% 3.92%)';
const THEME_COLOR_SCRIPT = `\
(function() {
var html = document.documentElement;
var meta = document.querySelector('meta[name="theme-color"]');
if (!meta) {
meta = document.createElement('meta');
meta.setAttribute('name', 'theme-color');
document.head.appendChild(meta);
}
function updateThemeColor() {
var isDark = html.classList.contains('dark');
meta.setAttribute('content', isDark ? '${DARK_THEME_COLOR}' : '${LIGHT_THEME_COLOR}');
}
var observer = new MutationObserver(updateThemeColor);
observer.observe(html, { attributes: true, attributeFilter: ['class'] });
updateThemeColor();
})();`;
export default async function RootLayout({ export default async function RootLayout({
children, children,
}: Readonly<{ }: Readonly<{
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
return ( return (
<html lang="en"> <html
lang="en"
// `next-themes` injects an extra classname to the body element to avoid
// visual flicker before hydration. Hence the `suppressHydrationWarning`
// prop is necessary to avoid the React hydration mismatch warning.
// https://github.com/pacocoursey/next-themes?tab=readme-ov-file#with-app
suppressHydrationWarning
>
<head>
<script
dangerouslySetInnerHTML={{
__html: THEME_COLOR_SCRIPT,
}}
/>
</head>
<body className="antialiased"> <body className="antialiased">
<ThemeProvider <ThemeProvider
attribute="class" attribute="class"

9
components/custom/preview-attachment.tsx
View file

@ -12,18 +12,18 @@ export const PreviewAttachment = ({
const { name, url, contentType } = attachment; const { name, url, contentType } = attachment;
return ( return (
<div className="flex flex-col gap-2 max-w-16"> (<div className="flex flex-col gap-2 max-w-16">
<div className="h-20 w-16 bg-muted rounded-md relative flex flex-col items-center justify-center"> <div className="h-20 w-16 bg-muted rounded-md relative flex flex-col items-center justify-center">
{contentType ? ( {contentType ? (
contentType.startsWith("image") ? ( contentType.startsWith("image") ? (
// NOTE: it is recommended to use next/image for images // NOTE: it is recommended to use next/image for images
// eslint-disable-next-line @next/next/no-img-element // eslint-disable-next-line @next/next/no-img-element
<img (<img
key={url} key={url}
src={url} src={url}
alt={name ?? "An image attachment"} alt={name ?? "An image attachment"}
className="rounded-md size-full object-cover" className="rounded-md size-full object-cover"
/> />)
) : ( ) : (
<div className=""></div> <div className=""></div>
) )
@ -37,8 +37,7 @@ export const PreviewAttachment = ({
</div> </div>
)} )}
</div> </div>
<div className="text-xs text-zinc-500 max-w-16 truncate">{name}</div> <div className="text-xs text-zinc-500 max-w-16 truncate">{name}</div>
</div> </div>)
); );
}; };

14
components/custom/theme-toggle.tsx
View file

@ -1,28 +1,28 @@
"use client"; 'use client';
import { useTheme } from "next-themes"; import { useTheme } from 'next-themes';
import { useEffect, useState } from "react"; import { useEffect, useLayoutEffect, useState } from 'react';
export function ThemeToggle() { export function ThemeToggle() {
const { setTheme, theme } = useTheme(); const { setTheme, theme } = useTheme();
const [mounted, setMounted] = useState(false); const [mounted, setMounted] = useState(false);
useEffect(() => { useLayoutEffect(() => {
setMounted(true); setMounted(true);
}, []); }, []);
if (!mounted) { if (!mounted) {
return null; return <div className="cursor-pointer" />;
} }
return ( return (
<div <div
className="cursor-pointer" className="cursor-pointer"
onClick={() => { onClick={() => {
setTheme(theme === "dark" ? "light" : "dark"); setTheme(theme === 'dark' ? 'light' : 'dark');
}} }}
> >
{`Toggle ${theme === "light" ? "dark" : "light"} mode`} {`Toggle ${theme === 'light' ? 'dark' : 'light'} mode`}
</div> </div>
); );
} }

9
next.config.mjs
View file

@ -1,9 +0,0 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {},
images: {
remotePatterns: [],
},
};
export default nextConfig;

10
next.config.ts Normal file
View file

@ -0,0 +1,10 @@
import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
/* config options here */
images: {
remotePatterns: [],
},
};
export default nextConfig;

8
package.json
View file

@ -32,12 +32,12 @@
"framer-motion": "^11.3.19", "framer-motion": "^11.3.19",
"geist": "^1.3.1", "geist": "^1.3.1",
"lucide-react": "^0.446.0", "lucide-react": "^0.446.0",
"next": "15.0.0-canary.152", "next": "15.0.1",
"next-auth": "5.0.0-beta.22", "next-auth": "5.0.0-beta.25",
"next-themes": "^0.3.0", "next-themes": "^0.3.0",
"postgres": "^3.4.4", "postgres": "^3.4.4",
"react": "19.0.0-rc-7771d3a7-20240827", "react": "19.0.0-rc-45804af1-20241021",
"react-dom": "19.0.0-rc-7771d3a7-20240827", "react-dom": "19.0.0-rc-45804af1-20241021",
"react-markdown": "^9.0.1", "react-markdown": "^9.0.1",
"remark-gfm": "^4.0.0", "remark-gfm": "^4.0.0",
"server-only": "^0.0.1", "server-only": "^0.0.1",

7469
pnpm-lock.yaml generated
View file

File diff suppressed because it is too large Load diff