54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import { Plus, Trash2 } from 'lucide-react'
|
|
import { useChatStore } from '@/stores/chatStore'
|
|
|
|
export const ChatSidebar = () => {
|
|
const { chats, currentChatId, createChat, deleteChat, selectChat } = useChatStore()
|
|
|
|
const handleNewChat = () => {
|
|
createChat()
|
|
}
|
|
|
|
return (
|
|
<div className="w-[260px] h-full flex flex-col bg-[#262626] dark:bg-[#262626]">
|
|
<button
|
|
onClick={handleNewChat}
|
|
className="flex items-center gap-2 px-3 py-2.5 mx-2 mt-2 rounded-md border border-gray-600 hover:bg-gray-700 transition-colors text-sm"
|
|
>
|
|
<Plus size={16} />
|
|
<span>新对话</span>
|
|
</button>
|
|
|
|
<div className="flex-1 overflow-y-auto mt-3 px-2">
|
|
{chats.map((chat) => (
|
|
<div
|
|
key={chat.id}
|
|
onClick={() => selectChat(chat.id)}
|
|
className={`group flex items-center justify-between px-3 py-2 rounded-md cursor-pointer text-sm mb-1 transition-colors ${
|
|
currentChatId === chat.id
|
|
? 'bg-[#343541] text-white'
|
|
: 'text-gray-300 hover:bg-[#343541]/50'
|
|
}`}
|
|
>
|
|
<span className="truncate flex-1">{chat.title}</span>
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
deleteChat(chat.id)
|
|
}}
|
|
className="opacity-0 group-hover:opacity-100 hover:text-red-400 transition-opacity p-1"
|
|
>
|
|
<Trash2 size={14} />
|
|
</button>
|
|
</div>
|
|
))}
|
|
|
|
{chats.length === 0 && (
|
|
<div className="text-gray-500 text-sm text-center py-8">
|
|
暂无对话
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|