fix build

app/(chat)/page.tsx

@@ -1,19 +1,23 @@
 import { nanoid } from '@/lib/utils';
 import { Chat } from '@/components/chat';
+import { ThemeToggle } from '../../components/theme-toggle';
 
 export default function IndexPage() {
 	const id = nanoid();
 
 	return (
-		<Chat
-			id={id}
-			initialMessages={[
-				{
-					id: '123',
-					content: 'Hi, what do you want to know about this image?',
-					role: 'system',
-				},
-			]}
-		/>
+		<>
+			<Chat
+				id={id}
+				initialMessages={[
+					{
+						id: '123',
+						content: 'Hi, what do you want to know about this image?',
+						role: 'system',
+					},
+				]}
+			/>
+			<ThemeToggle />
+		</>
 	);
 }

components/chat-list.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { type Message } from 'ai';
 import { useEffect, useState } from 'react';
 

components/chat.tsx

@@ -16,6 +16,7 @@ import { usePathname, useRouter } from 'next/navigation';
 import { useAtom } from 'jotai';
 import { targetImageAtom } from '@/state';
 import Image from 'next/image';
+import { ThemeToggle } from './theme-toggle';
 
 export interface ChatProps extends React.ComponentProps<'div'> {
 	initialMessages?: Message[];
@@ -44,7 +45,7 @@ export function Chat({ id, initialMessages, className }: ChatProps) {
 	if (!targetImage)
 		return (
 			<div className={cn('pb-[150px] pt-4 md:pt-10 h-full', className)}>
-				<EmptyScreen />/
+				<EmptyScreen />
 			</div>
 		);
 	return (

components/theme-toggle.tsx

@@ -1,31 +1,32 @@
-'use client'
+'use client';
 
-import * as React from 'react'
-import { useTheme } from 'next-themes'
+import * as React from 'react';
+import { useTheme } from 'next-themes';
 
-import { Button } from '@/components/ui/button'
-import { IconMoon, IconSun } from '@/components/ui/icons'
+import { Button } from '@/components/ui/button';
+import { IconMoon, IconSun } from '@/components/ui/icons';
 
 export function ThemeToggle() {
-  const { setTheme, theme } = useTheme()
-  const [_, startTransition] = React.useTransition()
+	const { setTheme, theme } = useTheme();
+	const [_, startTransition] = React.useTransition();
 
-  return (
-    <Button
-      variant="ghost"
-      size="icon"
-      onClick={() => {
-        startTransition(() => {
-          setTheme(theme === 'light' ? 'dark' : 'light')
-        })
-      }}
-    >
-      {!theme ? null : theme === 'dark' ? (
-        <IconMoon className="transition-all" />
-      ) : (
-        <IconSun className="transition-all" />
-      )}
-      <span className="sr-only">Toggle theme</span>
-    </Button>
-  )
+	return (
+		<Button
+			variant="ghost"
+			size="icon"
+			className="fixed bottom-4 right-4 z-50 dark:bg-zinc-950 dark:text-white transition-all p-2 rounded-full shadow-md"
+			onClick={() => {
+				startTransition(() => {
+					setTheme(theme === 'light' ? 'dark' : 'light');
+				});
+			}}
+		>
+			{!theme ? null : theme === 'dark' ? (
+				<IconMoon className="transition-all" />
+			) : (
+				<IconSun className="transition-all" />
+			)}
+			<span className="sr-only">Toggle theme</span>
+		</Button>
+	);
 }