Merge pull request microsoft#315 from microsoft/psl-bug-16106

fix: resolved DocGen- After hovering over the chat history, no tooltip is displayed

Author: Roopan-Microsoft

package-lock.json

@@ -57,7 +57,7 @@ describe('ChatHistoryList', () => {
     renderChatHistoryList({ chatHistory });
 
     expect(screen.getByText('Recent')).toBeInTheDocument();
-    expect(screen.getByText('Recent Chat')).toBeInTheDocument();
+    expect(screen.getAllByText('Recent Chat').length).toBeGreaterThan(1);
   });
 
   it('handles empty chat history group gracefully', () => {
@@ -71,16 +71,16 @@ describe('ChatHistoryList', () => {
       { id: '4', title: 'Month Old Chat', date: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString(), messages: [] },
     ];
     renderChatHistoryList({ chatHistory });
-    expect(screen.getByText('Week Old Chat')).toBeInTheDocument();
-    expect(screen.getByText('Month Old Chat')).toBeInTheDocument();
+    expect(screen.getAllByText('Week Old Chat').length).toBeGreaterThan(1);
+    expect(screen.getAllByText('Month Old Chat').length).toBeGreaterThan(1);
   });
 
   it('groups entries without matching month-year into a new group', () => {
     const chatHistory: Conversation[] = [
       { id: '5', title: 'Very Old Chat', date: new Date(Date.now() - 365 * 24 * 60 * 60 * 1000).toISOString(), messages: [] },
     ];
     renderChatHistoryList({ chatHistory });
-    expect(screen.getByText('Very Old Chat')).toBeInTheDocument();
+    expect(screen.getAllByText('Very Old Chat').length).toBeGreaterThan(1);
     // Check that a new group for the year appears if it's far in the past
   });
 
@@ -90,8 +90,8 @@ describe('ChatHistoryList', () => {
       { id: '7', title: 'Chat 2', date: new Date(Date.now() - 20 * 24 * 60 * 60 * 1000).toISOString(), messages: [] },
     ];
     renderChatHistoryList({ chatHistory });
-    expect(screen.getByText('Chat 1')).toBeInTheDocument();
-    expect(screen.getByText('Chat 2')).toBeInTheDocument();
+    expect(screen.getAllByText('Chat 1').length).toBeGreaterThan(1);
+    expect(screen.getAllByText('Chat 2').length).toBeGreaterThan(1);
     // Confirm that both entries are grouped in the same month
   });
   it('groups recent and older entries separately', () => {
@@ -101,7 +101,7 @@ describe('ChatHistoryList', () => {
     ];
     renderChatHistoryList({ chatHistory });
     expect(screen.getByText('Recent')).toBeInTheDocument();
-    expect(screen.getByText('Older Chat')).toBeInTheDocument();
+    expect(screen.getAllByText('Older Chat').length).toBeGreaterThan(1);
     // Ensures "Recent Chat" is grouped separately from older entries
   });
   it('groups multiple entries in the same month-year and sorts them', () => {
@@ -110,8 +110,8 @@ describe('ChatHistoryList', () => {
       { id: '11', title: 'Chat on Day 2', date: new Date(Date.now() - 46 * 24 * 60 * 60 * 1000).toISOString(), messages: [] },
     ];
     renderChatHistoryList({ chatHistory });
-    expect(screen.getByText('Chat on Day 1')).toBeInTheDocument();
-    expect(screen.getByText('Chat on Day 2')).toBeInTheDocument();
+    expect(screen.getAllByText('Chat on Day 1').length).toBeGreaterThan(1);
+    expect(screen.getAllByText('Chat on Day 2').length).toBeGreaterThan(1);
     // Confirms entries from the same month-year are grouped and sorted within the group
   });
   it('handles empty groups gracefully', () => {
@@ -130,9 +130,9 @@ describe('ChatHistoryList', () => {
       { id: '15', title: 'Oldest Chat', date: new Date(Date.now() - 365 * 24 * 60 * 60 * 1000).toISOString(), messages: [] },
     ];
     renderChatHistoryList({ chatHistory });
-    expect(screen.getByText('Newest Chat')).toBeInTheDocument();
-    expect(screen.getByText('Older Chat')).toBeInTheDocument();
-    expect(screen.getByText('Oldest Chat')).toBeInTheDocument();
+    expect(screen.getAllByText('Newest Chat').length).toBeGreaterThan(1);
+    expect(screen.getAllByText('Older Chat').length).toBeGreaterThan(1);
+    expect(screen.getAllByText('Oldest Chat').length).toBeGreaterThan(1);
 
   });
 

src/frontend/src/components/ChatHistory/ChatHistoryList.test.tsx

@@ -7,14 +7,17 @@ import {
   DialogType,
   IconButton,
   ITextField,
+  ITooltipHostStyles,
   List,
   PrimaryButton,
   Separator,
   Spinner,
   SpinnerSize,
   Stack,
   Text,
-  TextField
+  TextField,
+  TooltipHost,
+  DirectionalHint,
 } from '@fluentui/react'
 import { useBoolean } from '@fluentui/react-hooks'
 
@@ -77,6 +80,10 @@ export const ChatHistoryListItemCell: React.FC<ChatHistoryListItemCellProps> = (
     isBlocking: true,
     styles: { main: { maxWidth: 450 } }
   }
+  
+  const tooltipStyles: Partial<ITooltipHostStyles> = {
+    root: { display: 'inline-block', maxWidth: '80%' }
+  };
 
   if (!item) {
     return null
@@ -145,7 +152,7 @@ export const ChatHistoryListItemCell: React.FC<ChatHistoryListItemCellProps> = (
     }
   }
 
-  const truncatedTitle = item?.title?.length > 28 ? `${item.title.substring(0, 28)} ...` : item.title
+  const truncatedTitle = item?.title?.length > 24 ? `${item.title.substring(0, 24)} ...` : item.title
 
   const handleSaveEdit = async (e: any) => {
     e.preventDefault()
@@ -285,9 +292,17 @@ export const ChatHistoryListItemCell: React.FC<ChatHistoryListItemCellProps> = (
       ) : (
         <>
           <Stack horizontal verticalAlign={'center'} style={{ width: '100%' }}>
-            <div className={styles.chatTitle}>{truncatedTitle}</div>
+            <Stack.Item grow>
+              <TooltipHost
+                content={item.title}
+                directionalHint={DirectionalHint.bottomCenter}
+              >
+                <div className={styles.chatTitle}>{truncatedTitle}</div>
+              </TooltipHost>
+            </Stack.Item>
+            {/* <div className={styles.chatTitle}>{truncatedTitle}</div> */}
             {(isSelected || isHovered) && (
-              <Stack horizontal horizontalAlign="end">
+              <Stack horizontal horizontalAlign="end" styles={{ root: { marginLeft: 'auto' } }}>
                 <IconButton
                   className={styles.itemButton}
                   iconProps={{ iconName: 'Delete' }}

src/frontend/src/components/ChatHistory/ChatHistoryListItem.tsx

@@ -75,12 +75,14 @@ describe('ChatHistoryListItemGroups', () => {
     });
   });
 
-  test('renders grouped chat history correctly', () => {
+  test('renders grouped chat history correctly', async () => {
     renderWithContext(<ChatHistoryListItemGroups groupedChatHistory={mockGroupedChatHistory} />)
 
     // Check if group month and titles are rendered
-    expect(screen.getByText('2024-11')).toBeInTheDocument()
-    expect(screen.getByText('Chat 1')).toBeInTheDocument()
+    await waitFor(() => {
+      expect(screen.getByText('2024-11')).toBeInTheDocument();
+      expect(screen.getAllByText('Chat 1').length).toBeGreaterThan(1);
+    });
   })
 
   test('displays a spinner when fetching history', async () => {
@@ -162,8 +164,8 @@ describe('ChatHistoryListItemCell', () => {
   test('renders the chat history item', () => {
     renderWithContext(<ChatHistoryListItemCell item={conversation} onSelect={mockOnSelect} />, mockAppState)
 
-    const titleElement = screen.getByText(/Test Chat/i)
-    expect(titleElement).toBeInTheDocument()
+    const titleElement = screen.getAllByText(/Test Chat/i)
+    expect(titleElement.length).toBeGreaterThan(1)
   })
   // test('calls onSelect when a chat history item is clicked', async () => {
   //   renderWithContext(<ChatHistoryListItemCell item={conversation} onSelect={mockOnSelect} />, mockAppState)
@@ -192,7 +194,7 @@ describe('ChatHistoryListItemCell', () => {
 
     renderWithContext(<ChatHistoryListItemCell item={conversation} onSelect={mockOnSelect} />, mockAppState);
 
-    fireEvent.click(screen.getByText(/Test Chat/i));
+    fireEvent.click(screen.getAllByText(/Test Chat/i)[0]);
 
     await waitFor(() => {
       expect(mockOnSelect).toHaveBeenCalledWith({ ...conversation, messages: mockMessages });
@@ -202,12 +204,12 @@ describe('ChatHistoryListItemCell', () => {
   test('truncates long title', () => {
     const longTitleConversation = {
       ...conversation,
-      title: 'A very long title that should be truncated after 28 characters'
+      title: 'A very long title that should be truncated after 24 characters'
     }
 
     renderWithContext(<ChatHistoryListItemCell item={longTitleConversation} onSelect={mockOnSelect} />, mockAppState)
 
-    const truncatedTitle = screen.getByText(/A very long title that shoul .../i)
+    const truncatedTitle = screen.getByText(/A very long title that s .../i)
     expect(truncatedTitle).toBeInTheDocument()
   })
 

src/frontend/src/components/ChatHistory/chatHistoryListItem.test.tsx

@@ -5,7 +5,7 @@ set NODE_OPTIONS=--max_old_space_size=8192
 echo.
 echo Restoring backend python packages
 echo.
-call python -m pip install -r src/requirements.txt
+call python -m pip install -r requirements.txt
 if "%errorlevel%" neq "0" (
     echo Failed to restore backend python packages
     exit /B %errorlevel%
@@ -14,7 +14,7 @@ if "%errorlevel%" neq "0" (
 echo.
 echo Restoring frontend npm packages
 echo.
-cd src/frontend
+cd frontend
 call npm install
 if "%errorlevel%" neq "0" (
     echo Failed to restore frontend npm packages