Skip to content

Commit f843f41

Browse files
rob-at-cortexrob-at-cortex
committed
fix: chat sidebar
1 parent 3b14a11 commit f843f41

2 files changed

Lines changed: 81 additions & 84 deletions

File tree

‎src/components/Chat/CopilotInterface.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { testCapabilities as capabilities } from '../../test-data/capabilities'
1111
const mockChatSessions = [
1212
{
1313
id: "1",
14-
title: "Logo Design Review",
14+
title: "Logo Design Review and some really long text that should wrap properly in the chat interface",
1515
lastMessage: "The color palette looks great! Let's refine the typography...",
1616
},
1717
{

‎src/components/Chat/chat-session-sidebar.tsx‎

Lines changed: 80 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Clock, Edit3, Plus, Trash2 } from "lucide-react"
44
import { Button } from "@/components/ui/button"
55
import { Card } from "@/components/ui/card"
66
import { ScrollArea } from "@/components/ui/scroll-area"
7+
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
78
import { cn } from "@/lib/utils"
89
import type { BusinessUnit } from "../DigitalColleagues/types"
910

@@ -35,92 +36,88 @@ export function ChatSessionSidebar({
3536
className,
3637
}: ChatSessionSidebarProps) {
3738
return (
38-
<div className={`space-y-4 h-full ${className || ""}`}>
39-
{/* Recent Chats */}
40-
<Card className="shadow-sm h-full">
41-
<div className="p-4 border-b">
42-
<div className="flex items-center justify-between">
43-
<h3 className="font-semibold text-sm flex items-center gap-2">
44-
<Clock className="h-4 w-4" />
45-
Recent Chats
46-
</h3>
47-
{/* New Chat Button */}
48-
<Button onClick={onNewChat} size="sm" className="gap-1 h-7 px-2 rounded-lg shadow-sm">
49-
<Plus className="h-3 w-3" />
50-
New
51-
</Button>
39+
<TooltipProvider>
40+
<div className={`space-y-4 h-full ${className || ""}`}>
41+
{/* Recent Chats */}
42+
<Card className="shadow-sm h-full">
43+
<div className="p-4 border-b">
44+
<div className="flex items-center justify-between">
45+
<h3 className="font-semibold text-sm flex items-center gap-2">
46+
<Clock className="h-4 w-4" />
47+
Recent Chats
48+
</h3>
49+
{/* New Chat Button */}
50+
<Button onClick={onNewChat} size="sm" className="gap-1 h-7 px-2 rounded-lg shadow-sm">
51+
<Plus className="h-3 w-3" />
52+
New
53+
</Button>
54+
</div>
5255
</div>
53-
</div>
54-
<ScrollArea className="h-[600px]">
55-
<div className="p-2">
56-
{sessions.length === 0 ? (
57-
<div className="p-4 text-center text-sm text-muted-foreground">No chat sessions yet</div>
58-
) : (
59-
sessions.map((session) => (
60-
<div
61-
key={session.id}
62-
className={cn(
63-
"group relative p-3 rounded-xl cursor-pointer transition-all hover:bg-muted/50 mb-2",
64-
currentSession?.id === session.id && "bg-muted border",
65-
)}
66-
onClick={() => onSessionSelect(session)}
67-
>
68-
<div className="flex items-start gap-3">
69-
{/* {team && (
70-
<div
71-
className={cn(
72-
"flex h-6 w-6 items-center justify-center rounded text-white text-xs flex-shrink-0 mt-0.5",
73-
team.color,
74-
)}
75-
>
76-
{team.icon}
77-
</div>
78-
)} */}
79-
<div className="flex-1 min-w-0">
80-
<div className="flex items-center justify-between mb-1">
81-
<h4 className="font-medium text-sm truncate">{session.title}</h4>
82-
<div className="flex items-center gap-1">
83-
{/* Action Buttons */}
84-
<div className="opacity-0 group-hover:opacity-100 transition-opacity flex gap-1">
85-
{onSessionEdit && (
86-
<Button
87-
variant="ghost"
88-
size="icon"
89-
className="h-5 w-5 rounded"
90-
onClick={(e) => {
91-
e.stopPropagation()
92-
onSessionEdit(session.id)
93-
}}
94-
>
95-
<Edit3 className="h-3 w-3" />
96-
</Button>
97-
)}
98-
{onSessionDelete && (
99-
<Button
100-
variant="ghost"
101-
size="icon"
102-
className="h-5 w-5 rounded text-destructive hover:text-destructive"
103-
onClick={(e) => {
104-
e.stopPropagation()
105-
onSessionDelete(session.id)
106-
}}
107-
>
108-
<Trash2 className="h-3 w-3" />
109-
</Button>
110-
)}
111-
</div>
56+
<ScrollArea className="h-[600px]">
57+
<div className="p-2">
58+
{sessions.length === 0 ? (
59+
<div className="p-4 text-center text-sm text-muted-foreground">No chat sessions yet</div>
60+
) : (
61+
sessions.map((session) => (
62+
<Tooltip key={session.id}>
63+
<TooltipTrigger asChild>
64+
<div
65+
className={cn(
66+
"group relative p-3 rounded-xl cursor-pointer transition-all hover:bg-muted/50 mb-2",
67+
currentSession?.id === session.id && "bg-muted border",
68+
)}
69+
onClick={() => onSessionSelect(session)}
70+
>
71+
<div className="grid grid-cols-[1fr_auto] gap-2 items-start">
72+
<div className="min-w-0 overflow-hidden">
73+
<h4 className="font-medium text-sm truncate mb-1">{session.title}</h4>
74+
<p className="text-xs text-muted-foreground line-clamp-2">{session.lastMessage}</p>
75+
</div>
76+
<div className="flex items-start gap-1 pt-0.5">
77+
{/* Action Buttons - Always visible */}
78+
{onSessionEdit && (
79+
<Button
80+
variant="ghost"
81+
size="icon"
82+
className="h-6 w-6 rounded opacity-30 group-hover:opacity-100 transition-opacity"
83+
onClick={(e) => {
84+
e.stopPropagation()
85+
onSessionEdit(session.id)
86+
}}
87+
>
88+
<Edit3 className="h-3 w-3" />
89+
</Button>
90+
)}
91+
{onSessionDelete && (
92+
<Button
93+
variant="ghost"
94+
size="icon"
95+
className="h-6 w-6 rounded text-destructive hover:text-destructive opacity-30 group-hover:opacity-100 transition-opacity"
96+
onClick={(e) => {
97+
e.stopPropagation()
98+
onSessionDelete(session.id)
99+
}}
100+
>
101+
<Trash2 className="h-3 w-3" />
102+
</Button>
103+
)}
112104
</div>
113105
</div>
114-
<p className="text-xs text-muted-foreground line-clamp-2">{session.lastMessage}</p>
115106
</div>
116-
</div>
117-
</div>
118-
)
119-
)
120-
)}
121-
</div>
122-
</ScrollArea>
123-
</Card>
124-
</div>
107+
</TooltipTrigger>
108+
<TooltipContent side="right" className="max-w-xs">
109+
<div className="space-y-1">
110+
<p className="font-medium text-sm">{session.title}</p>
111+
<p className="text-xs">{session.lastMessage}</p>
112+
</div>
113+
</TooltipContent>
114+
</Tooltip>
115+
))
116+
)}
117+
</div>
118+
</ScrollArea>
119+
</Card>
120+
</div>
121+
</TooltipProvider>
125122
)
126123
}

0 commit comments

Comments
 (0)