Add multiple profiles

Signed-off-by: Jintao Zhang <zhangjintao9020@gmail.com>

src/App.jsx

@@ -5,11 +5,17 @@ import Settings from './components/Settings';
 import useLocalStorage from './hooks/useLocalStorage';
 
 function App() {
-  const [settings, setSettings] = useLocalStorage('settings', {
-    apiEndpoint: '',
-    apiKey: '',
-    model: 'DeepSeek-R1'
-  });
+  const [profiles, setProfiles] = useLocalStorage('profiles', [
+    {
+      id: 'default',
+      name: 'Default Profile',
+      apiEndpoint: '',
+      apiKey: '',
+      model: 'DeepSeek-R1'
+    }
+  ]);
+  
+  const [activeProfileId, setActiveProfileId] = useLocalStorage('activeProfileId', 'default');
   
   const [chats, setChats] = useLocalStorage('chats', []);
   const [currentChatId, setCurrentChatId] = useState(null);
@@ -17,6 +23,9 @@ function App() {
   const [loading, setLoading] = useState(false);
   const [showSettings, setShowSettings] = useState(false);
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const [showProfileDropdown, setShowProfileDropdown] = useState(false);
+
+  const activeProfile = profiles.find(p => p.id === activeProfileId) || profiles[0];
 
   const createNewChat = () => {
     const newChat = {
@@ -43,16 +52,50 @@ function App() {
     setSidebarCollapsed(!sidebarCollapsed);
   };
 
+  const toggleProfileDropdown = () => {
+    setShowProfileDropdown(!showProfileDropdown);
+  };
+
+  const handleProfileSelect = (profileId) => {
+    setActiveProfileId(profileId);
+    setShowProfileDropdown(false);
+  };
+
   return (
     <div className="app-container">
       <div className="app-header">
-        <h1 className="app-title">Thinking Model Client</h1>
-        <button 
-          className="settings-button" 
-          onClick={toggleSettings}
-        >
-          Settings
-        </button>
+        <div className="left-section">
+          <h1 className="app-title">Thinking Model Client</h1>
+        </div>
+        <div className="right-section">
+          <div className="profile-dropdown-container">
+            <button 
+              className="profile-dropdown-button" 
+              onClick={toggleProfileDropdown}
+            >
+              {activeProfile.name} ▼
+            </button>
+            {showProfileDropdown && (
+              <div className="profile-dropdown-menu">
+                {profiles.map(profile => (
+                  <div 
+                    key={profile.id} 
+                    className={`profile-option ${profile.id === activeProfileId ? 'active' : ''}`}
+                    onClick={() => handleProfileSelect(profile.id)}
+                  >
+                    {profile.name}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+          <button 
+            className="settings-button" 
+            onClick={toggleSettings}
+          >
+            Settings
+          </button>
+        </div>
       </div>
 
       <div className="app-content">
@@ -80,7 +123,7 @@ function App() {
           {currentChatId ? (
             <ChatWindow 
               chat={chats.find(c => c.id === currentChatId)}
-              settings={settings}
+              profile={activeProfile}
               onUpdateChat={(updatedChat) => {
                 setChats(chats.map(c => 
                   c.id === updatedChat.id ? updatedChat : c
@@ -109,12 +152,17 @@ function App() {
               ×
             </button>
             <Settings 
-              settings={settings} 
-              onSave={(newSettings) => {
-                setSettings(newSettings);
-                setShowSettings(false);
-              }} 
-              setSettings={setSettings}
+              profiles={profiles} 
+              activeProfileId={activeProfileId}
+              onSaveProfiles={(newProfiles) => {
+                setProfiles(newProfiles);
+                // Ensure the active profile still exists, otherwise select the first one
+                if (!newProfiles.some(p => p.id === activeProfileId)) {
+                  setActiveProfileId(newProfiles[0]?.id || null);
+                }
+              }}
+              onChangeActiveProfile={setActiveProfileId}
+              onCloseSettings={() => setShowSettings(false)}
             />
           </div>
         </div>

src/components/ChatWindow.jsx

@@ -1,13 +1,23 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 
-function ChatWindow({ chat, settings, onUpdateChat }) {
+function ChatWindow({ chat, profile, onUpdateChat }) {
   const [input, setInput] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const [collapsedThinks, setCollapsedThinks] = useState(new Set());
   const [partialResponse, setPartialResponse] = useState('');
   const [streamController, setStreamController] = useState(null);
+  const messagesEndRef = useRef(null);
 
-  // 添加解析消息的函数
+  // Scroll to bottom when messages change
+  useEffect(() => {
+    scrollToBottom();
+  }, [chat.messages, partialResponse]);
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  // Parse message to separate thinking process and content
   const parseMessage = (content) => {
     const thinkMatch = content.match(/<think>([\s\S]*?)<\/think>/);
     const mainContent = content.replace(/<think>[\s\S]*?<\/think>/, '').trim();
@@ -17,7 +27,7 @@ function ChatWindow({ chat, settings, onUpdateChat }) {
     };
   };
 
-  // 添加切换折叠状态的函数
+  // Toggle thinking process visibility
   const toggleThink = (timestamp) => {
     const newCollapsed = new Set(collapsedThinks);
     if (newCollapsed.has(timestamp)) {
@@ -66,9 +76,9 @@ function ChatWindow({ chat, settings, onUpdateChat }) {
             role: msg.role,
             content: msg.content
           }))],
-          apiKey: settings.apiKey,
-          model: settings.model,
-          apiEndpoint: settings.apiEndpoint,
+          apiKey: profile.apiKey,
+          model: profile.model,
+          apiEndpoint: profile.apiEndpoint,
         }),
         signal: controller.signal
       });
@@ -125,6 +135,12 @@ function ChatWindow({ chat, settings, onUpdateChat }) {
     }
   };
 
+  // Format the timestamp
+  const formatTime = (timestamp) => {
+    const date = new Date(timestamp);
+    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false });
+  };
+
   return (
     <div className="chat-window">
       <div className="chat-messages">
@@ -135,51 +151,62 @@ function ChatWindow({ chat, settings, onUpdateChat }) {
 
           return (
             <div key={index} className={`message ${message.role}`}>
-              <div className="message-content">
-                {message.role === 'assistant' && parsedMessage.think && (
-                  <div className="think-block">
-                    <div 
-                      className="think-header"
-                      onClick={() => toggleThink(message.timestamp)}
-                    >
-                      Thinking Process {collapsedThinks.has(message.timestamp) ? '▼' : '▲'}
-                    </div>
-                    {!collapsedThinks.has(message.timestamp) && (
-                      <div className="think-content">
-                        {parsedMessage.think}
+              {message.role === 'assistant' && (
+                <>
+                  {parsedMessage.think && (
+                    <div className="reasoning-container">
+                      <div 
+                        className="reasoning-header"
+                        onClick={() => toggleThink(message.timestamp)}
+                      >
+                        <span>Reasoned for a few seconds</span>
+                        <span className="toggle-icon">{collapsedThinks.has(message.timestamp) ? '▼' : '▲'}</span>
                       </div>
-                    )}
+                      {!collapsedThinks.has(message.timestamp) && (
+                        <div className="reasoning-content">
+                          {parsedMessage.think}
+                        </div>
+                      )}
+                    </div>
+                  )}
+                  <div className="message-content">
+                    {parsedMessage.content}
                   </div>
-                )}
-                <div className="content-text">
+                </>
+              )}
+              
+              {message.role === 'user' && (
+                <div className="message-content">
                   {parsedMessage.content}
                 </div>
-              </div>
+              )}
+              
               {message.timestamp && (
                 <div className="message-time">
-                  {new Date(message.timestamp).toLocaleTimeString()}
+                  {formatTime(message.timestamp)}
                 </div>
               )}
             </div>
           );
         })}
+        
         {isLoading && (
           <div className="message assistant">
             <div className="message-content">
-              <div className="content-text">
-                {partialResponse}
-                <span className="loading-cursor">|</span>
-              </div>
+              {partialResponse}
+              <span className="loading-cursor">|</span>
             </div>
           </div>
         )}
+        <div ref={messagesEndRef} />
       </div>
+      
       <div className="chat-input">
         <textarea
           className="message-input"
           value={input}
           onChange={(e) => setInput(e.target.value)}
-          placeholder="Type your message..."
+          placeholder="Send a message..."
           onKeyDown={(e) => {
             if (e.key === 'Enter' && !e.shiftKey) {
               e.preventDefault();
@@ -187,7 +214,13 @@ function ChatWindow({ chat, settings, onUpdateChat }) {
             }
           }}
         />
-        <button onClick={handleSendMessage}>Send</button>
+        <button 
+          onClick={handleSendMessage}
+          disabled={!input.trim() || isLoading}
+          className="send-button"
+        >
+          Send
+        </button>
       </div>
     </div>
   );

src/components/Settings.jsx

@@ -1,72 +1,174 @@
 import { useState } from 'react';
 
-function Settings({ settings, onSave, setSettings }) {
-  const [formData, setFormData] = useState(settings);
+function Settings({ profiles, activeProfileId, onSaveProfiles, onChangeActiveProfile, onCloseSettings }) {
+  const [localProfiles, setLocalProfiles] = useState(profiles);
+  const [editingProfileId, setEditingProfileId] = useState(activeProfileId);
   const [isHintExpanded, setIsHintExpanded] = useState(false);
 
+  const editingProfile = localProfiles.find(p => p.id === editingProfileId) || localProfiles[0];
+
+  const handleProfileChange = (updatedProfile) => {
+    setLocalProfiles(localProfiles.map(p => 
+      p.id === updatedProfile.id ? updatedProfile : p
+    ));
+  };
+
+  const handleAddProfile = () => {
+    const newId = `profile-${Date.now()}`;
+    const newProfile = {
+      id: newId,
+      name: `New Profile ${localProfiles.length + 1}`,
+      apiEndpoint: '',
+      apiKey: '',
+      model: 'DeepSeek-R1'
+    };
+    
+    const updatedProfiles = [...localProfiles, newProfile];
+    setLocalProfiles(updatedProfiles);
+    setEditingProfileId(newId);
+  };
+
+  const handleDeleteProfile = (profileId) => {
+    // Prevent deleting the last profile
+    if (localProfiles.length <= 1) {
+      alert("Cannot delete the last profile");
+      return;
+    }
+
+    const updatedProfiles = localProfiles.filter(p => p.id !== profileId);
+    setLocalProfiles(updatedProfiles);
+    
+    // If we're deleting the currently edited profile, switch to another one
+    if (editingProfileId === profileId) {
+      setEditingProfileId(updatedProfiles[0].id);
+    }
+  };
+
   const handleSubmit = (e) => {
     e.preventDefault();
-    onSave(formData);
+    onSaveProfiles(localProfiles);
+    onChangeActiveProfile(editingProfileId);
+    onCloseSettings();
   };
 
   return (
     <div className="settings-panel">
       <h2>Settings</h2>
-      <form onSubmit={handleSubmit}>
-        <div className="setting-item">
-          <label>API Endpoint:</label>
-          <input
-            type="text"
-            value={formData.apiEndpoint}
-            onChange={(e) => setFormData({
-              ...formData,
-              apiEndpoint: e.target.value
-            })}
-            placeholder="Enter API endpoint"
-          />
-          <div className="setting-hint">
-            <button 
-              type="button" 
-              className="hint-toggle"
-              onClick={() => setIsHintExpanded(!isHintExpanded)}
+      
+      <div className="profiles-section">
+        <div className="profiles-header">
+          <h3>Profiles</h3>
+          <button 
+            type="button" 
+            className="add-profile-button"
+            onClick={handleAddProfile}
+          >
+            + Add Profile
+          </button>
+        </div>
+        
+        <div className="profiles-list">
+          {localProfiles.map(profile => (
+            <div 
+              key={profile.id} 
+              className={`profile-item ${profile.id === editingProfileId ? 'active' : ''}`}
+              onClick={() => setEditingProfileId(profile.id)}
             >
-              {isHintExpanded ? 'Hide' : 'Show'} API Endpoint Format Examples
-            </button>
-            <div className={`hint-content ${isHintExpanded ? 'expanded' : ''}`}>
-              <p>API Endpoint format examples:</p>
-              <ul>
-                <li>Ends with / → /chat/completions will be appended</li>
-                <li>Ends with # → # will be removed</li>
-                <li>Other cases → /v1/chat/completions will be appended</li>
-              </ul>
+              <span>{profile.name}</span>
+              {localProfiles.length > 1 && (
+                <button 
+                  className="delete-profile-button"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleDeleteProfile(profile.id);
+                  }}
+                >
+                  ×
+                </button>
+              )}
             </div>
-          </div>
+          ))}
         </div>
-        <div className="setting-item">
-          <label>API Key:</label>
-          <input
-            type="password"
-            value={formData.apiKey}
-            onChange={(e) => setFormData({
-              ...formData,
-              apiKey: e.target.value
-            })}
-            placeholder="Enter your API key"
-          />
+      </div>
+      
+      <form onSubmit={handleSubmit}>
+        <div className="current-profile-section">
+          <h3>Edit Profile: {editingProfile.name}</h3>
+          
+          <div className="setting-item">
+            <label>Profile Name:</label>
+            <input
+              type="text"
+              value={editingProfile.name}
+              onChange={(e) => handleProfileChange({
+                ...editingProfile,
+                name: e.target.value
+              })}
+              placeholder="Enter profile name"
+            />
+          </div>
+          
+          <div className="setting-item">
+            <label>API Endpoint:</label>
+            <input
+              type="text"
+              value={editingProfile.apiEndpoint}
+              onChange={(e) => handleProfileChange({
+                ...editingProfile,
+                apiEndpoint: e.target.value
+              })}
+              placeholder="Enter API endpoint"
+            />
+            <div className="setting-hint">
+              <button 
+                type="button" 
+                className="hint-toggle"
+                onClick={() => setIsHintExpanded(!isHintExpanded)}
+              >
+                {isHintExpanded ? 'Hide' : 'Show'} API Endpoint Format Examples
+              </button>
+              <div className={`hint-content ${isHintExpanded ? 'expanded' : ''}`}>
+                <p>API Endpoint format examples:</p>
+                <ul>
+                  <li>Ends with / → /chat/completions will be appended</li>
+                  <li>Ends with # → # will be removed</li>
+                  <li>Other cases → /v1/chat/completions will be appended</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          
+          <div className="setting-item">
+            <label>API Key:</label>
+            <input
+              type="password"
+              value={editingProfile.apiKey}
+              onChange={(e) => handleProfileChange({
+                ...editingProfile,
+                apiKey: e.target.value
+              })}
+              placeholder="Enter your API key"
+            />
+          </div>
+          
+          <div className="setting-item">
+            <label>Model:</label>
+            <input
+              type="text"
+              value={editingProfile.model}
+              onChange={(e) => handleProfileChange({
+                ...editingProfile,
+                model: e.target.value
+              })}
+              placeholder="Enter model name (e.g., DeepSeek-R1)"
+            />
+          </div>
         </div>
-        <div className="setting-item">
-          <label>Model:</label>
-          <input
-            type="text"
-            value={formData.model}
-            onChange={(e) => setFormData({
-              ...formData,
-              model: e.target.value
-            })}
-            placeholder="Enter model name (e.g., gpt-3.5-turbo)"
-          />
+        
+        <div className="settings-actions">
+          <button type="submit" className="save-button">Save Settings</button>
+          <button type="button" className="cancel-button" onClick={onCloseSettings}>Cancel</button>
         </div>
-        <button type="submit" className="save-button">Save Settings</button>
       </form>
     </div>
   );

src/index.css

@@ -1,101 +1,257 @@
-.app {
+/* Base styles */
+:root {
+  --primary-color: #3e6ae1;
+  --primary-hover: #2952c8;
+  --text-color: #1a1a1a;
+  --light-text: #4d4d4d;
+  --lightest-text: #737373;
+  --border-color: #e5e7eb;
+  --background-color: #ffffff;
+  --sidebar-width: 280px;
+  --header-height: 60px;
+  --reasoning-background: #f9fafb;
+  --user-message-bg: #3e6ae1;
+  --user-message-color: #ffffff;
+  --assistant-message-bg: #f9f9f9;
+  --assistant-message-color: #1a1a1a;
+  --hover-color: #f5f5f5;
+  --active-color: #e6f2ff;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  color: var(--text-color);
+  line-height: 1.5;
+  background-color: var(--background-color);
+}
+
+/* App container */
+.app-container {
   display: flex;
   flex-direction: column;
   height: 100vh;
-  position: relative;
+  width: 100%;
+  overflow: hidden;
 }
 
-.settings {
-  margin-bottom: 20px;
-  padding: 15px;
-  background: #f5f5f5;
-  border-radius: 8px;
+/* Header styles */
+.app-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+  height: var(--header-height);
+  border-bottom: 1px solid var(--border-color);
+  background-color: var(--background-color);
 }
 
-.settings form {
+.left-section {
   display: flex;
-  gap: 15px;
   align-items: center;
 }
 
-.main-content {
+.right-section {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.app-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--text-color);
+}
+
+/* Profile dropdown */
+.profile-dropdown-container {
+  position: relative;
+}
+
+.profile-dropdown-button {
+  padding: 6px 12px;
+  background-color: var(--background-color);
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  font-size: 0.875rem;
+  color: var(--text-color);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.profile-dropdown-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  width: 200px;
+  background-color: var(--background-color);
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  z-index: 100;
+  margin-top: 5px;
+}
+
+.profile-option {
+  padding: 8px 12px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  font-size: 0.875rem;
+}
+
+.profile-option:hover {
+  background-color: var(--hover-color);
+}
+
+.profile-option.active {
+  background-color: var(--active-color);
+  font-weight: 500;
+}
+
+.settings-button {
+  padding: 6px 12px;
+  background-color: var(--background-color);
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  font-size: 0.875rem;
+  color: var(--text-color);
+  cursor: pointer;
+}
+
+.settings-button:hover {
+  background-color: var(--hover-color);
+}
+
+/* Main content area */
+.app-content {
   display: flex;
-  gap: 20px;
   flex: 1;
   overflow: hidden;
-  padding: 20px 20px 80px 20px;
-  white-space: pre-wrap;
 }
 
-.chat-list {
-  flex: 1;
-  padding: 15px;
+/* Sidebar */
+.sidebar {
+  width: var(--sidebar-width);
+  border-right: 1px solid var(--border-color);
   display: flex;
   flex-direction: column;
-  gap: 10px;
-  overflow-y: auto;
-  padding-bottom: 200px;
-  position: relative;
+  transition: width 0.3s ease;
+  background-color: var(--background-color);
 }
 
-.chat-list h2 {
-  font-size: 16px;
-  font-weight: 500;
-  color: #333;
-  margin-bottom: 12px;
+.sidebar.collapsed {
+  width: 50px;
+  overflow: hidden;
+}
+
+.sidebar.collapsed .chat-list,
+.sidebar.collapsed .sidebar-header h2 {
+  display: none;
+}
+
+.sidebar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 15px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.sidebar.collapsed .sidebar-header {
+  padding: 12px 5px;
+  justify-content: center;
+}
+
+.sidebar-header h2 {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--light-text);
+  margin: 0;
+}
+
+.toggle-sidebar-button {
+  background: none;
+  border: none;
+  font-size: 1rem;
+  color: var(--lightest-text);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  width: 24px;
+  height: 24px;
+}
+
+.toggle-sidebar-button:hover {
+  color: var(--text-color);
+}
+
+/* Chat list */
+.chat-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px;
 }
 
 .new-chat {
-  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
+  width: 100%;
+  padding: 8px 12px;
+  background-color: var(--primary-color);
   color: white;
-  padding: 8px 16px;
   border: none;
-  border-radius: 6px;
+  border-radius: 4px;
   cursor: pointer;
   font-size: 0.875rem;
-  font-weight: 500;
-  width: 100%;
   margin-bottom: 15px;
-  transition: all 0.2s ease;
-  z-index: 1;
+  transition: background-color 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .new-chat:hover {
-  background: linear-gradient(135deg, var(--primary-hover) 0%, #1d4ed8 100%);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
+  background-color: var(--primary-hover);
 }
 
 .chat-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 8px 12px;
-  margin-bottom: 6px;
-  border-radius: 6px;
+  padding: 8px 10px;
+  border-radius: 4px;
   cursor: pointer;
-  font-size: 12px;
-  transition: all 0.2s ease;
+  margin-bottom: 2px;
+  transition: background-color 0.2s;
+  font-size: 0.875rem;
+  color: var(--light-text);
 }
 
 .chat-item:hover {
-  background: #f5f5f5;
+  background-color: var(--hover-color);
 }
 
 .chat-item.active {
-  background: #e3f2fd;
+  background-color: var(--active-color);
+  color: var(--primary-color);
 }
 
 .delete-btn {
-  padding: 4px 8px;
-  background: #fee2e2;
-  color: #dc2626;
+  opacity: 0;
+  background: none;
   border: none;
-  border-radius: 4px;
-  font-size: 11px;
+  color: var(--lightest-text);
   cursor: pointer;
-  opacity: 0;
-  transition: opacity 0.2s ease;
+  font-size: 0.75rem;
+  transition: color 0.2s, opacity 0.2s;
+  padding: 2px 5px;
 }
 
 .chat-item:hover .delete-btn {
@@ -103,656 +259,480 @@
 }
 
 .delete-btn:hover {
-  background: #fecaca;
+  color: #e53e3e;
 }
 
 .empty-state {
+  color: var(--lightest-text);
   text-align: center;
-  color: #666;
-  font-size: 12px;
-  margin-top: 20px;
+  padding: 20px;
+  font-size: 0.875rem;
 }
 
-/* 聊天窗口的基础样式 */
-.chat-window {
+/* Main chat area */
+.main-content {
   flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: var(--background-color);
+}
+
+/* Welcome screen */
+.welcome-screen {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 20px;
+  text-align: center;
+}
+
+.welcome-screen h2 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 10px;
+  color: var(--text-color);
+}
+
+.welcome-screen p {
+  color: var(--light-text);
+  margin-bottom: 20px;
+  font-size: 0.875rem;
+}
+
+.new-chat-button {
+  padding: 10px 20px;
+  background-color: var(--primary-color);
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.875rem;
+  transition: background-color 0.2s;
+}
+
+.new-chat-button:hover {
+  background-color: var(--primary-hover);
+}
+
+/* Chat window */
+.chat-window {
   display: flex;
   flex-direction: column;
   height: 100%;
+  overflow: hidden;
 }
 
-/* 消息列表区域 */
 .chat-messages {
   flex: 1;
   overflow-y: auto;
   padding: 20px;
   display: flex;
   flex-direction: column;
+  gap: 24px;
 }
 
-/* 消息样式 */
+/* Message styles */
 .message {
-  margin-bottom: 16px;
-  max-width: 85%;
   display: flex;
   flex-direction: column;
+  max-width: 800px;
+  margin: 0 auto;
+  width: 100%;
 }
 
 .message.user {
-  margin-left: auto;
   align-items: flex-end;
 }
 
 .message.assistant {
-  margin-right: auto;
   align-items: flex-start;
 }
 
-.message-content {
-  padding: 12px 16px;
-  max-width: 70%;
-  word-wrap: break-word;
-}
-
-.content-text {
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-.message.user .message-content {
-  background: var(--primary-color);
-  color: white;
-}
-
-.message.assistant .message-content {
-  align-self: flex-start;
-  background-color: #f1f3f5;
-  color: #212529;
-  border-radius: 18px 18px 18px 0;
-  position: relative;
-}
-
-.message-time {
-  font-size: 12px;
-  color: #666;
-  margin-top: 4px;
-  opacity: 0.8;
-}
-
-/* 思考过程块样式 */
-.think-block {
-  margin-bottom: 10px;
-  border: 1px solid #dee2e6;
-  border-radius: 4px;
+.reasoning-container {
+  width: 100%;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
   overflow: hidden;
-  width: 90%;
-  background-color: #f8f9fa;
-  margin-left: auto;
-  margin-right: auto;
+  margin-bottom: 10px;
+  background-color: var(--reasoning-background);
 }
 
-.think-header {
-  background-color: #e9ecef;
-  padding: 8px 12px;
-  font-size: 0.875rem;
-  font-weight: 600;
-  cursor: pointer;
+.reasoning-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  padding: 8px 12px;
+  cursor: pointer;
+  font-size: 0.8125rem;
+  color: var(--light-text);
+  background-color: #f5f5f5;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.toggle-icon {
+  font-size: 0.625rem;
 }
 
-.think-content {
+.reasoning-content {
   padding: 12px;
-  background-color: #f8f9fa;
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   white-space: pre-wrap;
+  overflow-x: auto;
+  color: var(--light-text);
   max-height: 300px;
   overflow-y: auto;
 }
 
+.message-content {
+  padding: 12px 16px;
+  border-radius: 6px;
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  word-wrap: break-word;
+  max-width: 90%;
+}
+
+.message.user .message-content {
+  background-color: var(--user-message-bg);
+  color: var(--user-message-color);
+  border-radius: 6px 6px 0 6px;
+}
+
+.message.assistant .message-content {
+  background-color: var(--assistant-message-bg);
+  color: var(--assistant-message-color);
+  border-radius: 6px 6px 6px 0;
+}
+
 .message-time {
-  font-size: 12px;
-  color: #666;
+  font-size: 0.75rem;
+  color: var(--lightest-text);
   margin-top: 4px;
-  opacity: 0.8;
 }
 
-/* 输入区域样式 */
+/* Input area */
 .chat-input {
+  display: flex;
   padding: 16px;
-  background: #ffffff;
   border-top: 1px solid var(--border-color);
-  display: flex;
-  gap: 12px;
-  align-items: flex-start;
+  gap: 10px;
+  background-color: var(--background-color);
 }
 
 .message-input {
   flex: 1;
-  padding: 10px;
+  padding: 12px 16px;
   border: 1px solid var(--border-color);
-  border-radius: 8px;
-  font-size: 14px;
-  min-height: 40px;
-  max-height: 120px;
+  border-radius: 6px;
+  font-size: 0.9375rem;
   resize: none;
-  line-height: 1.5;
+  min-height: 24px;
+  max-height: 200px;
+  color: var(--text-color);
+  outline: none;
+  transition: border-color 0.2s;
 }
 
 .message-input:focus {
-  outline: none;
   border-color: var(--primary-color);
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
 }
 
-.chat-input button {
-  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+.send-button {
+  padding: 0 20px;
+  background-color: var(--primary-color);
   color: white;
-  padding: 10px 20px;
   border: none;
-  border-radius: 8px;
-  font-size: 13px;
-  font-weight: 500;
+  border-radius: 6px;
   cursor: pointer;
-  transition: all 0.2s ease;
-  height: fit-content;
-}
-
-.chat-input button:hover {
-  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
-}
-
-.chat-input button:disabled {
-  background: #e2e8f0;
-  cursor: not-allowed;
-  transform: none;
-  box-shadow: none;
-}
-
-/* Loading状态 */
-.loading {
-  padding: 12px 16px;
-  background: #f8f9fa;
-  border-radius: 8px;
-  color: #666;
-  font-size: 13px;
+  font-size: 0.9375rem;
+  transition: background-color 0.2s;
   display: flex;
   align-items: center;
-  gap: 8px;
-  margin-bottom: 16px;
-  width: fit-content;
+  justify-content: center;
 }
 
-/* 添加滚动条样式 */
-.chat-messages::-webkit-scrollbar {
-  width: 6px;
+.send-button:hover:not(:disabled) {
+  background-color: var(--primary-hover);
 }
 
-.chat-messages::-webkit-scrollbar-track {
-  background: #f1f1f1;
+.send-button:disabled {
+  background-color: #a0aec0;
+  cursor: not-allowed;
+  opacity: 0.7;
 }
 
-.chat-messages::-webkit-scrollbar-thumb {
-  background: #ccc;
-  border-radius: 3px;
+/* Loading cursor */
+.loading-cursor {
+  display: inline-block;
+  width: 2px;
+  height: 1.2em;
+  background-color: currentColor;
+  margin-left: 2px;
+  animation: blink 1s infinite;
+  vertical-align: text-bottom;
 }
 
-.chat-messages::-webkit-scrollbar-thumb:hover {
-  background: #999;
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
 }
 
-.settings-wrapper {
+/* Settings modal */
+.settings-overlay {
   position: fixed;
-  left: 20px;
-  bottom: 20px;
-  width: 250px;
-  z-index: 100;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
 }
 
-.settings-container {
-  background: #ffffff;
+.settings-modal {
+  background-color: var(--background-color);
   border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  padding: 15px;
-  margin: 0;
-}
-
-.setting-item {
-  margin-bottom: 12px;
-}
-
-.setting-item:last-child {
-  margin-bottom: 0;
-}
-
-.setting-item label {
-  display: block;
-  margin-bottom: 4px;
-  font-weight: 500;
-  color: #333;
-  font-size: 12px;
-}
-
-.setting-item input {
-  width: 100%;
-  padding: 6px 8px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  font-size: 12px;
+  width: 600px;
+  max-width: 90%;
+  max-height: 90vh;
+  overflow-y: auto;
+  position: relative;
+  padding: 24px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
-.setting-item input:focus {
-  outline: none;
-  border-color: #007bff;
-  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+.settings-panel h2 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 20px;
+  color: var(--text-color);
 }
 
-button[type="submit"] {
-  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
-  color: white;
-  padding: 8px 16px;
+.close-settings-button {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  background: none;
   border: none;
-  border-radius: 6px;
+  font-size: 1.25rem;
   cursor: pointer;
-  font-size: 0.875rem;
-  font-weight: 500;
-  width: 100%;
-  margin-top: 8px;
-  transition: all 0.2s ease;
-}
-
-button[type="submit"]:hover {
-  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
-}
-
-button[type="submit"]:disabled {
-  background: #e2e8f0;
-  cursor: not-allowed;
-  transform: none;
-  box-shadow: none;
+  color: var(--lightest-text);
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
 }
 
-.assistant .message-content .think-block {
-  margin: 0 0 8px 0;
+.close-settings-button:hover {
+  background-color: var(--hover-color);
+  color: var(--text-color);
 }
 
-/* 添加一些基础变量 */
-:root {
-  --sidebar-width: 260px;
-  --primary-color: #3b82f6;
-  --primary-hover: #2563eb;
-  --border-color: #e5e5e5;
+/* Profile management in settings */
+.profiles-section {
+  margin-bottom: 24px;
+  border-bottom: 1px solid var(--border-color);
+  padding-bottom: 20px;
 }
 
-/* 重置一些基础样式 */
-.app-container {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  width: 100%;
-  overflow: hidden;
-}
-
-.app-header {
+.profiles-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px 20px;
-  background-color: #f8f9fa;
-  border-bottom: 1px solid #e9ecef;
-  height: 60px;
+  margin-bottom: 12px;
 }
 
-.app-title {
-  font-size: 1.5rem;
+.profiles-header h3 {
+  font-size: 1rem;
   font-weight: 600;
-  color: #333;
-  margin: 0;
+  color: var(--text-color);
 }
 
-.settings-button {
-  background-color: #f8f9fa;
-  border: 1px solid #dee2e6;
+.add-profile-button {
+  padding: 4px 8px;
+  background-color: transparent;
+  border: 1px solid var(--border-color);
   border-radius: 4px;
-  padding: 8px 16px;
   font-size: 0.875rem;
+  color: var(--text-color);
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all 0.2s;
 }
 
-.settings-button:hover {
-  background-color: #e9ecef;
+.add-profile-button:hover {
+  background-color: var(--hover-color);
 }
 
-.app-content {
+.profiles-list {
   display: flex;
-  flex: 1;
-  overflow: hidden;
-}
-
-/* Sidebar */
-.sidebar {
-  width: 280px;
-  border-right: 1px solid #e9ecef;
-  display: flex;
-  flex-direction: column;
-  transition: width 0.3s ease;
-}
-
-.sidebar.collapsed {
-  width: 50px;
-  overflow: hidden;
-}
-
-.sidebar.collapsed .chat-list,
-.sidebar.collapsed .sidebar-header h2 {
-  display: none;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 16px;
 }
 
-.sidebar-header {
+.profile-item {
+  padding: 8px 12px;
+  background-color: var(--background-color);
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: all 0.2s;
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  padding: 15px;
-  border-bottom: 1px solid #e9ecef;
+  gap: 8px;
 }
 
-.sidebar.collapsed .sidebar-header {
-  padding: 15px 5px;
-  justify-content: center;
+.profile-item:hover {
+  background-color: var(--hover-color);
 }
 
-.sidebar-header h2 {
-  font-size: 1rem;
-  font-weight: 600;
-  margin: 0;
+.profile-item.active {
+  background-color: var(--active-color);
+  border-color: var(--primary-color);
 }
 
-.toggle-sidebar-button {
+.delete-profile-button {
   background: none;
   border: none;
-  font-size: 1.2rem;
+  color: var(--lightest-text);
   cursor: pointer;
-  padding: 5px;
+  font-size: 1rem;
+  transition: color 0.2s;
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 10;
-}
-
-.toggle-sidebar-button:hover {
-  background-color: #f1f3f5;
-  border-radius: 4px;
-}
-
-/* Chat List */
-.chat-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 15px;
-}
-
-.new-chat {
-  width: 100%;
-  padding: 10px;
-  background-color: #4263eb;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 0.875rem;
-  margin-bottom: 15px;
-  transition: background-color 0.2s ease;
-}
-
-.new-chat:hover {
-  background-color: #3b5bdb;
-}
-
-.chat-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px;
-  border-radius: 4px;
-  cursor: pointer;
-  margin-bottom: 5px;
-  transition: background-color 0.2s ease;
+  width: 20px;
+  height: 20px;
 }
 
-.chat-item:hover {
-  background-color: #f1f3f5;
+.delete-profile-button:hover {
+  color: #e53e3e;
 }
 
-.chat-item.active {
-  background-color: #e7f5ff;
-}
-
-.delete-btn {
-  opacity: 0;
-  background-color: #ffe3e3;
-  color: #e03131;
-  border: none;
-  border-radius: 4px;
-  padding: 4px 8px;
-  font-size: 0.75rem;
-  cursor: pointer;
-  transition: opacity 0.2s ease, background-color 0.2s ease;
-}
-
-.chat-item:hover .delete-btn {
-  opacity: 1;
+.current-profile-section h3 {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text-color);
+  margin-bottom: 16px;
 }
 
-.delete-btn:hover {
-  background-color: #ffc9c9;
+.setting-item {
+  margin-bottom: 16px;
 }
 
-.empty-state {
-  color: #868e96;
-  text-align: center;
-  padding: 20px;
+.setting-item label {
+  display: block;
+  margin-bottom: 6px;
   font-size: 0.875rem;
+  color: var(--light-text);
 }
 
-/* Main Content */
-.main-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-/* Welcome Screen */
-.welcome-screen {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  padding: 20px;
-  text-align: center;
-}
-
-.welcome-screen h2 {
-  font-size: 1.5rem;
-  font-weight: 600;
-  margin-bottom: 10px;
-}
-
-.welcome-screen p {
-  color: #495057;
-  margin-bottom: 20px;
-}
-
-.new-chat-button {
-  background-color: #4263eb;
-  color: white;
-  border: none;
+.setting-item input {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid var(--border-color);
   border-radius: 4px;
-  padding: 10px 20px;
-  font-size: 1rem;
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-}
-
-.new-chat-button:hover {
-  background-color: #3b5bdb;
+  font-size: 0.875rem;
+  transition: border-color 0.2s;
 }
 
-/* Settings Modal */
-.settings-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
+.setting-item input:focus {
+  outline: none;
+  border-color: var(--primary-color);
 }
 
-.settings-modal {
-  background-color: white;
-  border-radius: 8px;
-  width: 500px;
-  max-width: 90%;
-  max-height: 90vh;
-  overflow-y: auto;
-  position: relative;
-  padding: 20px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+.setting-hint {
+  margin-top: 4px;
 }
 
-.close-settings-button {
-  position: absolute;
-  top: 10px;
-  right: 10px;
+.hint-toggle {
   background: none;
   border: none;
-  font-size: 1.5rem;
+  color: var(--primary-color);
   cursor: pointer;
-  color: #868e96;
-}
-
-.close-settings-button:hover {
-  color: #495057;
-}
-
-/* Chat Window */
-.chat-window {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-}
-
-.chat-messages {
-  flex: 1;
-  overflow-y: auto;
-  padding: 20px;
-}
-
-.message {
-  margin-bottom: 20px;
-  display: flex;
-  flex-direction: column;
-}
-
-.message.user .message-content {
-  align-self: flex-end;
-  background-color: #4263eb;
-  color: white;
-  border-radius: 18px 18px 0 18px;
-  max-width: 85%;
+  font-size: 0.75rem;
+  padding: 0;
+  text-align: left;
 }
 
-.message.assistant .message-content {
-  align-self: flex-start;
-  background-color: #f1f3f5;
-  color: #212529;
-  border-radius: 18px 18px 18px 0;
+.hint-content {
+  display: none;
+  margin-top: 8px;
+  font-size: 0.75rem;
+  color: var(--light-text);
+  background-color: var(--hover-color);
+  padding: 8px;
+  border-radius: 4px;
 }
 
-.message-content {
-  padding: 12px 16px;
-  max-width: 70%;
-  word-wrap: break-word;
+.hint-content.expanded {
+  display: block;
 }
 
-.message-time {
-  font-size: 0.75rem;
-  color: #868e96;
-  margin-top: 5px;
-  align-self: flex-end;
+.hint-content p {
+  margin-bottom: 6px;
 }
 
-.message.user .message-time {
-  align-self: flex-end;
+.hint-content ul {
+  margin-left: 20px;
 }
 
-.message.assistant .message-time {
-  align-self: flex-start;
+.hint-content li {
+  margin-bottom: 4px;
 }
 
-.chat-input {
+.settings-actions {
   display: flex;
-  padding: 15px;
-  border-top: 1px solid #e9ecef;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 24px;
 }
 
-.message-input {
-  flex: 1;
-  padding: 12px;
-  border: 1px solid #dee2e6;
+.save-button {
+  padding: 8px 16px;
+  background-color: var(--primary-color);
+  color: white;
+  border: none;
   border-radius: 4px;
-  font-size: 1rem;
-  resize: none;
-  min-height: 50px;
-  max-height: 150px;
-  margin-right: 10px;
+  cursor: pointer;
+  font-size: 0.875rem;
+  transition: background-color 0.2s;
 }
 
-.message-input:focus {
-  outline: none;
-  border-color: #4263eb;
+.save-button:hover {
+  background-color: var(--primary-hover);
 }
 
-.chat-input button {
-  background-color: #4263eb;
-  color: white;
-  border: none;
+.cancel-button {
+  padding: 8px 16px;
+  background-color: transparent;
+  border: 1px solid var(--border-color);
   border-radius: 4px;
-  padding: 0 20px;
-  font-size: 1rem;
   cursor: pointer;
-  transition: background-color 0.2s ease;
-}
-
-.chat-input button:hover {
-  background-color: #3b5bdb;
+  font-size: 0.875rem;
+  transition: all 0.2s;
 }
 
-.chat-input button:disabled {
-  background-color: #adb5bd;
-  cursor: not-allowed;
+.cancel-button:hover {
+  background-color: var(--hover-color);
 }
 
-/* Error and Loading */
+/* Error and notification styles */
 .error-message {
   position: fixed;
   bottom: 20px;
   left: 50%;
   transform: translateX(-50%);
-  background-color: #ffe3e3;
-  color: #e03131;
+  background-color: #fee2e2;
+  color: #dc2626;
   padding: 10px 20px;
   border-radius: 4px;
   font-size: 0.875rem;
@@ -765,8 +745,8 @@ button[type="submit"]:disabled {
   bottom: 20px;
   left: 50%;
   transform: translateX(-50%);
-  background-color: #e7f5ff;
-  color: #1971c2;
+  background-color: #e6f2ff;
+  color: #0369a1;
   padding: 10px 20px;
   border-radius: 4px;
   font-size: 0.875rem;
@@ -774,107 +754,21 @@ button[type="submit"]:disabled {
   z-index: 1000;
 }
 
-.loading-cursor {
-  display: inline-block;
-  width: 10px;
-  height: 20px;
-  background-color: #212529;
-  animation: blink 1s infinite;
-  margin-left: 5px;
-}
-
-@keyframes blink {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0; }
-}
-
-/* 状态提示样式 */
-.error-message,
-.loading {
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
-  padding: 12px 20px;
-  border-radius: 8px;
-  background: #ffffff;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  z-index: 1000;
-}
-
-.error-message {
-  background: #fee2e2;
-  color: #dc2626;
-}
-
-/* Loading indicator */
-.loading-indicator {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: #666;
-  font-size: 14px;
-}
-
-/* Setting hint styles */
-.setting-hint {
-  margin-top: 8px;
-  padding: 12px;
-  background: #f8f9fa;
-  border-radius: 6px;
-  border: 1px solid #e9ecef;
-  font-size: 0.9em;
-}
-
-.setting-hint p {
-  margin: 0 0 8px 0;
-  color: #495057;
-  font-weight: 500;
-}
-
-.setting-hint ul {
-  margin: 0;
-  padding-left: 20px;
-  list-style-type: none;
-}
-
-.setting-hint li {
-  position: relative;
-  padding-left: 1.2em;
-  margin-bottom: 4px;
-  color: #6c757d;
-}
-
-.setting-hint li::before {
-  content: "•";
-  position: absolute;
-  left: 0;
-  color: #adb5bd;
-}
-
-.hint-toggle {
-  width: 100%;
-  padding: 8px;
-  background: #ffffff;
-  border: 1px solid #e9ecef;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 0.8em;
-  color: #495057;
-  text-align: left;
-  margin-bottom: 8px;
-  transition: all 0.2s ease;
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
 }
 
-.hint-toggle:hover {
-  background: #f8f9fa;
+::-webkit-scrollbar-track {
+  background-color: transparent;
 }
 
-.hint-content {
-  max-height: 0;
-  overflow: hidden;
-  transition: max-height 0.3s ease-out;
+::-webkit-scrollbar-thumb {
+  background-color: #d1d5db;
+  border-radius: 3px;
 }
 
-.hint-content.expanded {
-  max-height: 500px; /* Increased to accommodate more content */
+::-webkit-scrollbar-thumb:hover {
+  background-color: #9ca3af;
 }