fixed

oslook · Dec 11, 2024 · 0e5c97d · 0e5c97d
1 parent e95c44f
commit 0e5c97d
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 19 deletions.
diff --git a/src/app/components/ChatMessage.tsx b/src/app/components/ChatMessage.tsx
@@ -23,7 +23,7 @@ export default function ChatMessage({ role, content }: ChatMessageProps) {
           </div>
         </div>
       </div>
-      <div className={`chat-bubble ${role === 'user' ? 'chat-bubble-primary' : 'chat-bubble-neutral'} max-w-[85%] lg:max-w-[75%]`}>
+      <div className={`chat-bubble ${role === 'user' ? 'chat-bubble-neutral' : 'chat-bubble-neutral'} max-w-[85%] lg:max-w-[75%]`}>
         <div className={`prose ${role === 'user' ? 'prose-invert' : ''} prose-headings:text-base-content prose-strong:text-base-content prose-p:text-base-content max-w-none`}>
           <ReactMarkdown
             remarkPlugins={[remarkGfm]}

diff --git a/src/app/components/ThemeToggle.tsx b/src/app/components/ThemeToggle.tsx
@@ -31,16 +31,18 @@ export default function ThemeToggle() {
   }
 
   return (
-    <button
-      onClick={toggleTheme}
-      className="btn btn-circle btn-ghost"
-      aria-label="Toggle theme"
-    >
-      {theme === 'light' ? (
-        <SunIcon className="w-6 h-6" />
-      ) : (
-        <MoonIcon className="w-6 h-6" />
-      )}
-    </button>
+    <div className="relative">
+      <button
+        onClick={toggleTheme}
+        className="btn btn-circle btn-ghost"
+        aria-label="Toggle theme"
+      >
+        {theme === 'light' ? (
+          <SunIcon className="w-6 h-6" />
+        ) : (
+          <MoonIcon className="w-6 h-6" />
+        )}
+      </button>
+    </div>
   );
 } 
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,7 +1,6 @@
 import type { Metadata } from "next";
 import localFont from "next/font/local";
 import "./globals.css";
-import ThemeToggle from "./components/ThemeToggle";
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
@@ -29,10 +28,7 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased min-h-screen bg-base-200`}
       >
-        <div className="min-h-screen p-4">
-          <div className="fixed top-4 right-4 z-50">
-            <ThemeToggle />
-          </div>
+        <div className="min-h-screen">
           {children}
         </div>
       </body>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -7,6 +7,7 @@ import ModelSelector from './components/ModelSelector';
 import Settings from './components/Settings';
 import ConversationList from './components/ConversationList';
 import { Conversation, Message } from './types';
+import ThemeToggle from "./components/ThemeToggle";
 
 // 从localStorage获取保存的URL，如果没有则使用默认值
 const getSavedUrl = () => {
@@ -224,7 +225,7 @@ export default function Home() {
 
       <div className="flex-1 flex flex-col">
         <header className="p-4 border-b">
-          <div className="flex items-center justify-between max-w-4xl mx-auto w-full">
+          <div className="flex items-center justify-between max-w-7xl mx-auto w-full">
             <h1 className="text-2xl font-bold">Ollama Chat</h1>
             <div className="flex items-center gap-4">
               <ModelSelector
@@ -238,12 +239,13 @@ export default function Home() {
                 conversations={conversations}
                 onConversationsImport={handleImportConversations}
               />
+              <ThemeToggle />
             </div>
           </div>
         </header>
 
         <main className="flex-1 overflow-auto p-4">
-          <div className="max-w-4xl mx-auto">
+          <div className="max-w-6xl mx-auto">
             {displayMessages.map((message, index) => (
               <ChatMessage
                 key={`${currentConversationId}-${index}`}