From 7ee3cc14ff038215395e6b8074c65205acca676c Mon Sep 17 00:00:00 2001
From: spencrmartin <spencermartin@squareup.com>
Date: Tue, 19 Aug 2025 12:45:31 -0400
Subject: [PATCH] feat: add clickable functionality to Recent Chats widget

- Individual session rows are now clickable and navigate to session details
- 'See all' button routes to sessions history view
- Added proper pointer-events handling for interactive elements
- Integrated with React Router navigation system
- Sessions load automatically when clicked from dashboard widget

This enables users to quickly access their chat history directly from
the dashboard without losing the drag-and-drop widget functionality.
---
 .../components/dashboard/DashboardWidget.tsx   | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/ui/desktop/src/components/dashboard/DashboardWidget.tsx b/ui/desktop/src/components/dashboard/DashboardWidget.tsx
index e89423c0bd63..6a3d06544d2d 100644
--- a/ui/desktop/src/components/dashboard/DashboardWidget.tsx
+++ b/ui/desktop/src/components/dashboard/DashboardWidget.tsx
@@ -3,6 +3,7 @@ import { CardContent, CardDescription } from '../ui/card';
 import { WidgetData, WidgetType } from '../../types/dashboard';
 import { Button } from '../ui/button';
 import { ChatSmart } from '../icons/';
+import { useNavigate } from 'react-router-dom';
 
 interface DashboardWidgetProps {
   widget: WidgetData;
@@ -13,6 +14,7 @@ interface DashboardWidgetProps {
 
 export function DashboardWidget({ widget, onMouseDown, isDragging, onReset }: DashboardWidgetProps) {
   const [showSavedIndicator, setShowSavedIndicator] = useState(false);
+  const navigate = useNavigate();
 
   // Show saved indicator when position changes (but not during dragging)
   useEffect(() => {
@@ -25,6 +27,16 @@ export function DashboardWidget({ widget, onMouseDown, isDragging, onReset }: Da
     }
   }, [widget.position.x, widget.position.y, isDragging]);
 
+  const handleSessionClick = (sessionId: string) => {
+    // Navigate to sessions view with the selected session
+    navigate('/sessions', { state: { selectedSessionId: sessionId } });
+  };
+
+  const handleSeeAllClick = () => {
+    // Navigate to sessions view (history space)
+    navigate('/sessions');
+  };
+
   const renderWidgetContent = () => {
     switch (widget.type) {
       case WidgetType.TOTAL_SESSIONS:
@@ -63,7 +75,8 @@ export function DashboardWidget({ widget, onMouseDown, isDragging, onReset }: Da
               <Button
                 variant="ghost"
                 size="sm"
-                className="text-xs text-text-muted flex items-center gap-1 !px-0 hover:bg-transparent hover:underline hover:text-text-default"
+                onClick={handleSeeAllClick}
+                className="text-xs text-text-muted flex items-center gap-1 !px-0 hover:bg-transparent hover:underline hover:text-text-default pointer-events-auto"
               >
                 See all
               </Button>
@@ -72,7 +85,8 @@ export function DashboardWidget({ widget, onMouseDown, isDragging, onReset }: Da
               {widget.data?.recentSessions?.slice(0, 5).map((session: any) => (
                 <div
                   key={session.id}
-                  className="flex items-center justify-between text-xs py-1 px-1 rounded-md hover:bg-background-muted/50 cursor-pointer transition-colors"
+                  onClick={() => handleSessionClick(session.id)}
+                  className="flex items-center justify-between text-xs py-1 px-1 rounded-md hover:bg-background-muted/50 cursor-pointer transition-colors pointer-events-auto"
                 >
                   <div className="flex items-center space-x-2 min-w-0">
                     <ChatSmart className="h-3 w-3 text-text-muted flex-shrink-0" />