diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx index 4c9091a3..f6c38402 100644 --- a/apps/web/app/layout.tsx +++ b/apps/web/app/layout.tsx @@ -2,6 +2,7 @@ import type { Metadata } from "next"; import { Geist, Geist_Mono, Inter, Playfair_Display } from "next/font/google"; import "@multica/ui/globals.css"; import { ThemeProvider } from "@multica/ui/components/theme-provider"; +import { ThemeToggle } from "./theme-toggle"; import { Toaster } from "@multica/ui/components/ui/sonner"; import { ServiceWorkerRegister } from "./sw-register"; @@ -52,6 +53,7 @@ export default function RootLayout({ enableSystem disableTransitionOnChange > +
{children}
diff --git a/apps/web/app/theme-toggle.tsx b/apps/web/app/theme-toggle.tsx new file mode 100644 index 00000000..60342b4b --- /dev/null +++ b/apps/web/app/theme-toggle.tsx @@ -0,0 +1,24 @@ +"use client"; + +import { useTheme } from "next-themes"; +import { Button } from "@multica/ui/components/ui/button"; +import { HugeiconsIcon } from "@hugeicons/react"; +import { Sun01Icon, Moon01Icon } from "@hugeicons/core-free-icons"; + +export function ThemeToggle() { + const { theme, setTheme } = useTheme(); + + return ( +
+ +
+ ); +} diff --git a/apps/web/package.json b/apps/web/package.json index 954a4008..95b1b67c 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -17,6 +17,7 @@ "@hugeicons/core-free-icons": "^3.1.1", "@hugeicons/react": "^1.1.4", "next": "16.1.6", + "next-themes": "^0.4.6", "react": "catalog:", "react-dom": "catalog:" }, diff --git a/packages/ui/src/components/chat.tsx b/packages/ui/src/components/chat.tsx index 577df6a8..9dea198f 100644 --- a/packages/ui/src/components/chat.tsx +++ b/packages/ui/src/components/chat.tsx @@ -1,14 +1,11 @@ "use client"; import { useRef, useState, useCallback, useMemo } from "react"; -import { useTheme } from "next-themes"; import { Button } from "@multica/ui/components/ui/button"; import { Textarea } from "@multica/ui/components/ui/textarea"; import { ChatInput } from "@multica/ui/components/chat-input"; import { MemoizedMarkdown } from "@multica/ui/components/markdown"; import { StreamingMarkdown } from "@multica/ui/components/markdown/StreamingMarkdown"; -import { HugeiconsIcon } from "@hugeicons/react"; -import { Sun01Icon, Moon01Icon } from "@hugeicons/core-free-icons"; import { toast } from "@multica/ui/components/ui/sonner"; import { useHubStore, @@ -27,8 +24,6 @@ import { cn } from "@multica/ui/lib/utils"; export function Chat() { useHubInit() const deviceId = useDeviceId() - const { theme, setTheme } = useTheme() - const activeAgentId = useHubStore((s) => s.activeAgentId) const gwState = useGatewayStore((s) => s.connectionState) const hubId = useGatewayStore((s) => s.hubId) @@ -83,15 +78,6 @@ export function Chat() {
- {isConnected && (