Aska
5faa955bce
- Miuix day/night dual theme CSS variables - themeStore: light default, follows prefers-color-scheme - Header: sun/moon toggle button - All components migrated to CSS variables - Cyrene avatar image replaces 'C' logo everywhere - Favicon added
40 lines
1.4 KiB
TypeScript
40 lines
1.4 KiB
TypeScript
import { useNavigate } from 'react-router-dom'
|
|
import { useChatStore } from '../../store/chatStore'
|
|
import { api } from '../../api/client'
|
|
|
|
export default function Sidebar() {
|
|
const navigate = useNavigate()
|
|
const { currentSessionId, setSessionId, clearMessages } = useChatStore()
|
|
|
|
const handleNewChat = async () => {
|
|
try {
|
|
const { session_id } = await api.sessions.create()
|
|
setSessionId(session_id)
|
|
clearMessages()
|
|
navigate(`/chat/${session_id}`)
|
|
} catch { /* ignore */ }
|
|
}
|
|
|
|
return (
|
|
<aside className="w-60 bg-[var(--mx-surface)] border-r border-[var(--mx-divider)] shrink-0 flex flex-col">
|
|
<div className="p-3">
|
|
<button onClick={handleNewChat}
|
|
className="w-full py-2.5 bg-[var(--mx-primary)] hover:bg-[var(--mx-primary-hover)] active:scale-[0.98] text-white font-medium text-sm rounded-full transition-all duration-200"
|
|
>
|
|
+ 新对话
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-auto px-2 pb-2">
|
|
{currentSessionId ? (
|
|
<div className="px-3 py-2 bg-[var(--mx-bg)] rounded-[14px]">
|
|
<p className="text-xs text-[var(--mx-text-dim)] truncate">{currentSessionId.slice(0, 12)}...</p>
|
|
</div>
|
|
) : (
|
|
<p className="px-3 py-2 text-xs text-[var(--mx-text-dim)] text-center">暂无对话</p>
|
|
)}
|
|
</div>
|
|
</aside>
|
|
)
|
|
}
|