Codestin Search App

{(isRunning && !callingToolName) && ( ({ + useLazyGetConfigurationQuery: vi.fn(() => [ + vi.fn(() => Promise.resolve({ data: [{ configuration: { enabledComponents: { deleteSessionHistory: true } } }] })), + ]), +})); + +vi.mock('@/shared/reducers/session.reducer', () => ({ + sessionApi: { + util: { + invalidateTags: vi.fn(), + }, + }, + useDeleteAllSessionsForUserMutation: vi.fn(() => [ + vi.fn(), + { isSuccess: false, isError: false, error: null, isLoading: false }, + ]), + useDeleteSessionByIdMutation: vi.fn(() => [ + vi.fn(), + { isSuccess: false, isError: false, error: null, isLoading: false }, + ]), + useLazyGetSessionByIdQuery: vi.fn(() => [vi.fn()]), + useListSessionsQuery: vi.fn(), + useUpdateSessionNameMutation: vi.fn(() => [ + vi.fn(), + { isSuccess: false, isError: false, error: null, isLoading: false }, + ]), +})); + +vi.mock('@/config/store', () => ({ + useAppDispatch: vi.fn(() => vi.fn()), +})); + +vi.mock('@/shared/util/hooks', () => ({ + useNotificationService: vi.fn(() => ({ + generateNotification: vi.fn(), + })), +})); + +const createMockStore = () => { + return configureStore({ + reducer: { + modal: modalReducer, + }, + }); +}; + +const renderWithProviders = (component: React.ReactElement) => { + const mockStore = createMockStore(); + return render( + + + + {component} + + + + ); +}; + +describe('Sessions', () => { + const mockNewSession = vi.fn(); + + beforeEach(() => { + vi.clearAllMocks(); + }); + + it('displays "No sessions" message when there are no sessions', async () => { + const { useListSessionsQuery } = await import('@/shared/reducers/session.reducer'); + vi.mocked(useListSessionsQuery).mockReturnValue({ + data: [], + isLoading: false, + } as any); + + renderWithProviders(); + + await waitFor(() => { + expect(screen.getByText('No sessions')).toBeInTheDocument(); + expect(screen.getByText('Start a new conversation to create your first session')).toBeInTheDocument(); + }); + }); + + it('displays sessions when data is available', async () => { + const mockSessions = [ + { + sessionId: 'session-1', + name: 'Test Session 1', + startTime: new Date().toISOString(), + lastUpdated: new Date().toISOString(), + }, + { + sessionId: 'session-2', + name: 'Test Session 2', + startTime: new Date(Date.now() - 86400000).toISOString(), // 1 day ago + lastUpdated: new Date(Date.now() - 86400000).toISOString(), + }, + ]; + + const { useListSessionsQuery } = await import('@/shared/reducers/session.reducer'); + vi.mocked(useListSessionsQuery).mockReturnValue({ + data: mockSessions, + isLoading: false, + } as any); + + renderWithProviders(); + + await waitFor(() => { + expect(screen.getByText('Test Session 1')).toBeInTheDocument(); + expect(screen.getByText('Test Session 2')).toBeInTheDocument(); + }); + + expect(screen.queryByText('No sessions')).not.toBeInTheDocument(); + }); + + it('displays loading state while fetching sessions', async () => { + const { useListSessionsQuery } = await import('@/shared/reducers/session.reducer'); + vi.mocked(useListSessionsQuery).mockReturnValue({ + data: undefined, + isLoading: true, + } as any); + + renderWithProviders(); + + await waitFor(() => { + expect(screen.getByText('Loading sessions...')).toBeInTheDocument(); + }); + }); + + it('displays "No sessions" with search hint when search returns no results', async () => { + const user = userEvent.setup(); + const mockSessions = [ + { + sessionId: 'session-1', + name: 'Test Session', + startTime: new Date().toISOString(), + lastUpdated: new Date().toISOString(), + }, + ]; + + const { useListSessionsQuery } = await import('@/shared/reducers/session.reducer'); + vi.mocked(useListSessionsQuery).mockReturnValue({ + data: mockSessions, + isLoading: false, + } as any); + + renderWithProviders(); + + // Open search popover + const searchButton = screen.getByLabelText('Search sessions'); + await user.click(searchButton); + + // Type search query that won't match + const searchInput = screen.getByPlaceholderText('Search sessions by name...'); + await user.type(searchInput, 'NonExistentSession'); + + await waitFor(() => { + expect(screen.getByText('No sessions')).toBeInTheDocument(); + expect(screen.getByText('Try adjusting your search query')).toBeInTheDocument(); + }); + }); + + it('filters sessions based on search query', async () => { + const user = userEvent.setup(); + const mockSessions = [ + { + sessionId: 'session-1', + name: 'Python Tutorial', + startTime: new Date().toISOString(), + lastUpdated: new Date().toISOString(), + }, + { + sessionId: 'session-2', + name: 'JavaScript Guide', + startTime: new Date().toISOString(), + lastUpdated: new Date().toISOString(), + }, + ]; + + const { useListSessionsQuery } = await import('@/shared/reducers/session.reducer'); + vi.mocked(useListSessionsQuery).mockReturnValue({ + data: mockSessions, + isLoading: false, + } as any); + + renderWithProviders(); + + // Open search popover + const searchButton = screen.getByLabelText('Search sessions'); + await user.click(searchButton); + + // Type search query + const searchInput = screen.getByPlaceholderText('Search sessions by name...'); + await user.type(searchInput, 'Python'); + + await waitFor(() => { + expect(screen.getByText('Python Tutorial')).toBeInTheDocument(); + expect(screen.queryByText('JavaScript Guide')).not.toBeInTheDocument(); + }); + }); + + it('calls newSession when new session button is clicked', async () => { + const user = userEvent.setup(); + const { useListSessionsQuery } = await import('@/shared/reducers/session.reducer'); + vi.mocked(useListSessionsQuery).mockReturnValue({ + data: [], + isLoading: false, + } as any); + + renderWithProviders(); + + const newSessionButton = screen.getByLabelText('New Session'); + await user.click(newSessionButton); + + expect(mockNewSession).toHaveBeenCalledOnce(); + }); +}); diff --git a/lib/user-interface/react/src/components/chatbot/components/Sessions.tsx b/lib/user-interface/react/src/components/chatbot/components/Sessions.tsx index fef75ce48..831a27d3c 100644 --- a/lib/user-interface/react/src/components/chatbot/components/Sessions.tsx +++ b/lib/user-interface/react/src/components/chatbot/components/Sessions.tsx @@ -287,109 +287,127 @@ export function Sessions ({ newSession }) { {!isSessionsLoading && (

- - {(() => { - const timeGroups = Object.entries(groupedSessions); - - return timeGroups.map(([timeGroup, sessions]) => { - if (sessions.length === 0) return null; - - return ( - - - {sessions.map((item) => ( - - - - navigate(`/ai-assistant/${item.sessionId}`)}> - - {getSessionDisplay(item, 40)} - - - - - { - if (e.detail.id === 'delete-session') { - dispatch( - setConfirmationModal({ - action: 'Delete', - resourceName: 'Session', - onConfirm: () => { - setSessionBeingDeleted(item.sessionId); - deleteById(item.sessionId); - }, - description: `This will delete the Session: ${item.sessionId}.` - }) - ); - } else if (e.detail.id === 'download-session') { - getSessionById(item.sessionId).then((resp) => { - const sess: LisaChatSession = resp.data; - const file = new Blob([JSON.stringify(sess, null, 2)], { type: 'application/json' }); - downloadFile(URL.createObjectURL(file), `${sess.sessionId}.json`); - }); - } else if (e.detail.id === 'export-images') { - getSessionById(item.sessionId).then(async (resp) => { - const sess: LisaChatSession = resp.data; - const images = sess.history.filter((msg) => msg.type === 'ai' && messageContainsImage(msg.content)) - .flatMap((msg) => { - if (Array.isArray(msg.content)) { - return msg.content - .filter((contentItem: any) => contentItem.type === 'image_url' && contentItem.image_url?.url) - .map((contentItem: any) => contentItem.image_url.url as string); - } - return []; - }); - - if (images.length === 0) { - notificationService.generateNotification('No images found to export', 'info'); - } else { - const zip = new JSZip(); - const imagePromises = images.map(async (imageUrl, index) => { - try { - const blob = await fetchImage(imageUrl); - zip.file(`image_${index + 1}.png`, blob, { binary: true }); - } catch (error) { - console.error(`Error processing image ${index + 1}:`, error); - } - }); - - // Wait for all images to be processed - await Promise.all(imagePromises); - const content = await zip.generateAsync({ type: 'blob' }); - downloadFile(URL.createObjectURL(content), `${sess.sessionId}-images.zip`); - } - }); - } else if (e.detail.id === 'rename-session') { - handleRenameSession(item); - } - }} - /> - - - - ))} - - - ); - }); - })()} - + {filteredSessions.length === 0 ? ( + + + No sessions + {searchQuery && ( + + Try adjusting your search query + + )} + {!searchQuery && ( + + Start a new conversation to create your first session + + )} + + + ) : ( + + {(() => { + const timeGroups = Object.entries(groupedSessions); + + return timeGroups.map(([timeGroup, sessions]) => { + if (sessions.length === 0) return null; + + return ( + + + {sessions.map((item) => ( + + + + navigate(`/ai-assistant/${item.sessionId}`)}> + + {getSessionDisplay(item, 40)} + + + + + { + if (e.detail.id === 'delete-session') { + dispatch( + setConfirmationModal({ + action: 'Delete', + resourceName: 'Session', + onConfirm: () => { + setSessionBeingDeleted(item.sessionId); + deleteById(item.sessionId); + }, + description: `This will delete the Session: ${item.sessionId}.` + }) + ); + } else if (e.detail.id === 'download-session') { + getSessionById(item.sessionId).then((resp) => { + const sess: LisaChatSession = resp.data; + const file = new Blob([JSON.stringify(sess, null, 2)], { type: 'application/json' }); + downloadFile(URL.createObjectURL(file), `${sess.sessionId}.json`); + }); + } else if (e.detail.id === 'export-images') { + getSessionById(item.sessionId).then(async (resp) => { + const sess: LisaChatSession = resp.data; + const images = sess.history.filter((msg) => msg.type === 'ai' && messageContainsImage(msg.content)) + .flatMap((msg) => { + if (Array.isArray(msg.content)) { + return msg.content + .filter((contentItem: any) => contentItem.type === 'image_url' && contentItem.image_url?.url) + .map((contentItem: any) => contentItem.image_url.url as string); + } + return []; + }); + + if (images.length === 0) { + notificationService.generateNotification('No images found to export', 'info'); + } else { + const zip = new JSZip(); + const imagePromises = images.map(async (imageUrl, index) => { + try { + const blob = await fetchImage(imageUrl); + zip.file(`image_${index + 1}.png`, blob, { binary: true }); + } catch (error) { + console.error(`Error processing image ${index + 1}:`, error); + } + }); + + // Wait for all images to be processed + await Promise.all(imagePromises); + const content = await zip.generateAsync({ type: 'blob' }); + downloadFile(URL.createObjectURL(content), `${sess.sessionId}-images.zip`); + } + }); + } else if (e.detail.id === 'rename-session') { + handleRenameSession(item); + } + }} + /> + + + + ))} + + + ); + }); + })()} + + )}

)} diff --git a/lib/user-interface/react/src/components/chatbot/components/WelcomeScreen.tsx b/lib/user-interface/react/src/components/chatbot/components/WelcomeScreen.tsx index e4dffb848..6d7c9948e 100644 --- a/lib/user-interface/react/src/components/chatbot/components/WelcomeScreen.tsx +++ b/lib/user-interface/react/src/components/chatbot/components/WelcomeScreen.tsx @@ -53,6 +53,7 @@ export const WelcomeScreen = ({ modelSelectRef?.current?.focus(); }} show={true} + dataTestId='start-chatting-button' /> openModal('documentSummarization')} show={true} + dataTestId='summarize-doc-button' /> navigate('/model-comparison')} show={config?.configuration?.enabledComponents?.enableModelComparisonUtility} + dataTestId='compare-models-button' />

File Context

Upload to RAG