@@ -13,6 +13,7 @@ import {
1313 Box ,
1414 Bot ,
1515} from "lucide-react" ;
16+ import { useRouter } from "next/navigation" ;
1617
1718import { Button } from "@/components/ui/button" ;
1819import {
@@ -132,7 +133,8 @@ export function ChatSidebar({
132133 userAvatarUrl,
133134 userRole = USER_ROLES . USER ,
134135} : ChatSidebarProps ) {
135- const { t } = useTranslation ( ) ;
136+ const { t, i18n } = useTranslation ( ) ;
137+ const router = useRouter ( ) ;
136138 const { today, week, older } = categorizeDialogs ( conversationList ) ;
137139 const [ editingId , setEditingId ] = useState < number | null > ( null ) ;
138140 const [ editingTitle , setEditingTitle ] = useState ( "" ) ;
@@ -260,10 +262,10 @@ export function ChatSidebar({
260262 < Button
261263 variant = "ghost"
262264 size = "icon"
263- className = { isCollapsed ? "h-10 w-10 rounded-full hover:bg-slate-100" : "size-10 rounded-full hover:bg-slate-100" }
265+ className = "h-10 w-10 rounded-full hover:bg-slate-100"
264266 onClick = { settingsMenuItems ? undefined : onSettingsClick }
265267 >
266- < Settings className = { isCollapsed ? "h-6 w-6" : "size-5" } />
268+ < Settings className = "h-6 w-6" strokeWidth = { 2.5 } />
267269 </ Button >
268270 ) ;
269271
@@ -305,9 +307,7 @@ export function ChatSidebar({
305307 } }
306308 >
307309 < Dropdown menu = { menuProps } placement = "topRight" trigger = { [ "click" ] } >
308- < div className = { isCollapsed ? "flex justify-center" : "" } >
309- { buttonContent }
310- </ div >
310+ < div > { buttonContent } </ div >
311311 </ Dropdown >
312312 </ ConfigProvider >
313313 </ TooltipTrigger >
@@ -324,9 +324,7 @@ export function ChatSidebar({
324324 < TooltipProvider >
325325 < Tooltip >
326326 < TooltipTrigger asChild >
327- < div className = { isCollapsed ? "flex justify-center" : "" } >
328- { buttonContent }
329- </ div >
327+ < div > { buttonContent } </ div >
330328 </ TooltipTrigger >
331329 < TooltipContent side = { isCollapsed ? "right" : "top" } >
332330 { t ( "chatLeftSidebar.settings" ) }
@@ -457,62 +455,60 @@ export function ChatSidebar({
457455 const renderCollapsedSidebar = ( ) => {
458456 return (
459457 < >
460- { /* Application icon */ }
461- < TooltipProvider >
462- < Tooltip >
463- < TooltipTrigger asChild >
464- < div
465- className = "flex justify-start p-4 cursor-pointer"
466- onClick = { onToggleSidebar }
467- >
468- < div className = "h-8 w-8 rounded-full overflow-hidden" >
469- < img
470- src = { collapsedAvatarUrl }
471- alt = { appConfig . appName }
472- className = "h-full w-full object-cover"
473- />
474- </ div >
475- </ div >
476- </ TooltipTrigger >
477- < TooltipContent side = "right" > { appConfig . appName } </ TooltipContent >
478- </ Tooltip >
479- </ TooltipProvider >
480-
481- < div className = "flex flex-col flex-1 items-center" >
458+ { /* Expand/Collapse button */ }
459+ < div className = "py-3 flex justify-center" >
482460 < TooltipProvider >
483461 < Tooltip >
484462 < TooltipTrigger asChild >
485463 < Button
486464 variant = "ghost"
487465 size = "icon"
488- className = "h-14 w-14 rounded-full hover:bg-slate-100"
466+ className = "h-10 w-10 rounded-full hover:bg-slate-100"
489467 onClick = { onToggleSidebar }
490468 >
491- < ChevronRight
492- className = "h-6 w-6"
493- style = { { height : "28px" , width : "28px" } }
494- />
469+ < ChevronRight className = "h-6 w-6" strokeWidth = { 2.5 } />
495470 </ Button >
496471 </ TooltipTrigger >
497472 < TooltipContent side = "right" >
498473 { t ( "chatLeftSidebar.expandSidebar" ) }
499474 </ TooltipContent >
500475 </ Tooltip >
501476 </ TooltipProvider >
477+ </ div >
502478
479+ { /* Application icon */ }
480+ < div className = "py-3 flex justify-center" >
481+ < TooltipProvider >
482+ < Tooltip >
483+ < TooltipTrigger asChild >
484+ < div
485+ className = "h-8 w-8 rounded-full overflow-hidden cursor-pointer"
486+ onClick = { ( ) => router . push ( `/${ i18n . language } ` ) }
487+ >
488+ < img
489+ src = { collapsedAvatarUrl }
490+ alt = { appConfig . appName }
491+ className = "h-full w-full object-cover"
492+ />
493+ </ div >
494+ </ TooltipTrigger >
495+ < TooltipContent side = "right" > { appConfig . appName } </ TooltipContent >
496+ </ Tooltip >
497+ </ TooltipProvider >
498+ </ div >
499+
500+ { /* New conversation button */ }
501+ < div className = "py-3 flex justify-center" >
503502 < TooltipProvider >
504503 < Tooltip >
505504 < TooltipTrigger asChild >
506505 < Button
507506 variant = "ghost"
508507 size = "icon"
509- className = "h-14 w-14 rounded-full hover:bg-slate-100"
508+ className = "h-10 w-10 rounded-full hover:bg-slate-100"
510509 onClick = { onNewConversation }
511510 >
512- < Plus
513- className = "h-6 w-6"
514- style = { { height : "20px" , width : "20px" } }
515- />
511+ < Plus className = "h-6 w-6" strokeWidth = { 2.5 } />
516512 </ Button >
517513 </ TooltipTrigger >
518514 < TooltipContent side = "right" >
@@ -522,20 +518,23 @@ export function ChatSidebar({
522518 </ TooltipProvider >
523519 </ div >
524520
525- { /* Bottom area */ }
521+ { /* Spacer */ }
522+ < div className = "flex-1" />
523+
524+ { /* Bottom area - User avatar */ }
526525 { userAuthLoading ? (
527- < div className = "py-2 flex justify-center" >
526+ < div className = "py-3 flex justify-center" >
528527 < div className = "h-8 w-8 flex items-center justify-center" >
529528 < Spin size = "default" />
530529 </ div >
531530 </ div >
532531 ) : ! isSpeedMode ? (
533- < TooltipProvider >
534- < Tooltip >
535- < TooltipTrigger asChild >
536- < div className = "py-2 flex justify-center cursor-pointer" >
532+ < div className = "py-3 flex justify-center" >
533+ < TooltipProvider >
534+ < Tooltip >
535+ < TooltipTrigger asChild >
537536 < div
538- className = "h-8 w-8 rounded-full overflow-hidden"
537+ className = "h-8 w-8 rounded-full overflow-hidden cursor-pointer "
539538 style = { { backgroundColor : "#f0f2f5" } }
540539 >
541540 { userAvatarUrl ? (
@@ -550,17 +549,19 @@ export function ChatSidebar({
550549 </ div >
551550 ) }
552551 </ div >
553- </ div >
554- </ TooltipTrigger >
555- { userEmail && (
556- < TooltipContent side = "right" > { userEmail } </ TooltipContent >
557- ) }
558- </ Tooltip >
559- </ TooltipProvider >
552+ </ TooltipTrigger >
553+ { userEmail && (
554+ < TooltipContent side = "right" > { userEmail } </ TooltipContent >
555+ ) }
556+ </ Tooltip >
557+ </ TooltipProvider >
558+ </ div >
560559 ) : null }
561560
562561 { /* Settings button */ }
563- { renderSettingsButton ( true ) }
562+ < div className = "py-3 flex justify-center" >
563+ { renderSettingsButton ( true ) }
564+ </ div >
564565 </ >
565566 ) ;
566567 } ;
@@ -581,7 +582,7 @@ export function ChatSidebar({
581582 < div className = "flex items-center p-2" >
582583 < div
583584 className = "flex-1 min-w-0 flex items-center justify-start cursor-pointer"
584- onClick = { onToggleSidebar }
585+ onClick = { ( ) => router . push ( `/ ${ i18n . language } ` ) }
585586 >
586587 < div > { renderAppIcon ( ) } </ div >
587588 < h1
0 commit comments