File size: 3,229 Bytes
2accaeb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
import React from 'react';
import type { ChatSession } from '../types';
import { NEW_CHAT_ID } from '../constants';
import { XIcon } from './icons'; // Added XIcon
interface SidebarProps {
chats: ChatSession[];
activeChatId: string | null;
onSelectChat: (chatId: string) => void;
onCreateNewChat: () => void;
isOpen: boolean;
onClose: () => void;
}
export const Sidebar: React.FC<SidebarProps> = ({ chats, activeChatId, onSelectChat, onCreateNewChat, isOpen, onClose }) => {
const sortedChats = [...chats].sort((a, b) => b.createdAt - a.createdAt);
const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
const selectedValue = event.target.value;
if (selectedValue === NEW_CHAT_ID) {
onCreateNewChat();
} else {
onSelectChat(selectedValue);
}
};
return (
<div
className={`
fixed inset-y-0 left-0 z-40
h-full bg-slate-800 p-4 sm:p-6 flex flex-col border-r border-slate-700 shadow-xl
transform transition-transform duration-300 ease-in-out
w-4/5 max-w-[280px] sm:max-w-xs
${isOpen ? 'translate-x-0' : '-translate-x-full'}
md:relative md:translate-x-0 md:w-1/4 md:max-w-xs md:shadow-none
`}
role="navigation"
aria-label="Chats sidebar"
>
<div className="flex items-center justify-between mb-6">
<h1 className="text-xl font-semibold text-slate-100">Chats</h1>
<button
onClick={onClose}
className="md:hidden text-slate-400 hover:text-slate-100 p-1 rounded-md hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-cyan-500"
aria-label="Close menu"
>
<XIcon className="w-5 h-5" />
</button>
</div>
<div>
<label htmlFor="chat-select" className="block text-sm font-medium text-slate-300 mb-1">
Selecciona un chat
</label>
<div className="relative group">
<select
id="chat-select"
value={activeChatId || NEW_CHAT_ID}
onChange={handleChange}
className="w-full p-3 bg-slate-700 border border-slate-600 rounded-lg text-slate-100 focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 outline-none appearance-none cursor-pointer"
style={{
paddingRight: '2.5rem',
}}
>
<option value={NEW_CHAT_ID} className="bg-slate-700 text-slate-100">
Nuevo Chat
</option>
{sortedChats.map((chat) => (
<option key={chat.id} value={chat.id} className="bg-slate-700 text-slate-100">
{chat.name}
</option>
))}
</select>
<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-slate-400 group-hover:text-cyan-400 transition-colors duration-150">
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.23 8.29a.75.75 0 01.02-1.06z" clipRule="evenodd" />
</svg>
</div>
</div>
</div>
</div>
);
};
|