Re-factoring API services (#14)

This pull request includes significant refactoring and improvements to the codebase, focusing on updating API endpoints, improving error handling, and enhancing test coverage. The most important changes include the removal of deprecated API calls, the introduction of a new error handling mechanism, and the refactoring of service classes to use updated endpoints. ### API Refactoring: * Removed deprecated API calls in `src/api/index.ts` and updated the corresponding service classes to use new endpoints. (`[[1]](diffhunk://#diff-764761d79ed791ea154187526b088322dba3bebe94f9d38ab22120554aba77c7L1-L28)`, `[[2]](diffhunk://#diff-9dd13b51c673219aa9d6fb02c8bc1100134172df11c9c69008b0b299c0b3d53fR28-R39)`, `[[3]](diffhunk://#diff-9dd13b51c673219aa9d6fb02c8bc1100134172df11c9c69008b0b299c0b3d53fL47-R58)`, `[[4]](diffhunk://#diff-cd77df0f49406951d1fac5878b9dbaedda26efdcfdf299051c8efa5b820c22fcL10-R10)`, `[[5]](diffhunk://#diff-ebf1d939d609a4816004caf5632789818db419201d7af8b12e6123dcfd0b995dL6-R10)`) ### Error Handling: * Introduced a new error handling mechanism using `useCallback` in `ChatContainer.tsx` to centralize error notifications. (`[[1]](diffhunk://#diff-c0bfccaf03a29a5059f6a47c6dd2cdd194fcb1e06fe8e0e188d700a86204f073R27-R36)`, `[[2]](diffhunk://#diff-c0bfccaf03a29a5059f6a47c6dd2cdd194fcb1e06fe8e0e188d700a86204f073L53-R63)`, `[[3]](diffhunk://#diff-c0bfccaf03a29a5059f6a47c6dd2cdd194fcb1e06fe8e0e188d700a86204f073L71-R73)`) ### Test Coverage: * Refactored tests in `ChatContainer.test.tsx` and `ToolsModal.test.tsx` to mock the updated service classes and ensure proper test isolation. (`[[1]](diffhunk://#diff-5bc04b73d213740634c14cc7f3b8c028d08edba97c1c08197b8ed348a3112d47L29-L35)`, `[[2]](diffhunk://#diff-5bc04b73d213740634c14cc7f3b8c028d08edba97c1c08197b8ed348a3112d47L98-L103)`, `[[3]](diffhunk://#diff-5403659b7ee64a58dcfa7026e4f58e57a731ed7d0cd222e7c4391912bd6d10afL1-R79)`, `[[4]](diffhunk://#diff-5403659b7ee64a58dcfa7026e4f58e57a731ed7d0cd222e7c4391912bd6d10afL74-R93)`) ### Component Updates: * Updated `ToolsModal.tsx` and `Sidebar.tsx` components to use the refactored service classes for fetching data. (`[[1]](diffhunk://#diff-63552adfc136b5745280f1413214afb454e46b6558a54e0ac1a62d3076779256L5-R6)`, `[[2]](diffhunk://#diff-63552adfc136b5745280f1413214afb454e46b6558a54e0ac1a62d3076779256L21-R23)`, `[[3]](diffhunk://#diff-63552adfc136b5745280f1413214afb454e46b6558a54e0ac1a62d3076779256L33)`, `[[4]](diffhunk://#diff-5f3a5cc0c274c553bf7e5a260f594f138c16fd5197e1555cb608f862f0120f1cL4-R9)`, `[[5]](diffhunk://#diff-5f3a5cc0c274c553bf7e5a260f594f138c16fd5197e1555cb608f862f0120f1cL36-R38)`) These changes collectively improve the maintainability, reliability, and testability of the codebase.

Author: shahariaazam

src/api/index.ts

@@ -26,13 +26,6 @@ jest.mock('../../services/ToolService', () => ({
  }))
 }));
 
-// Mock the api module
-jest.mock('../../api', () => ({
- fetchChatHistories: jest.fn(),
- fetchLLMProviders: jest.fn(),
- fetchTools: jest.fn()
-}));
-
 // Mock the auth0 hook
 jest.mock('@auth0/auth0-react');
 
@@ -95,12 +88,6 @@ beforeAll(() => {
  Element.prototype.scrollIntoView = jest.fn();
 });
 
-afterAll(() => {
- // Clean up
- // @ts-ignore
- delete window.import;
-});
-
 describe('ChatContainer', () => {
  const mockModelSettings = {
  temperature: 0.7,

src/components/ChatContainer/ChatContainer.test.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {useAuth0} from '@auth0/auth0-react';
 import {ChatContainerProps, ChatPayload, MessageHandlerConfig} from "../../types/chat.ts";
 import {ApiChatMessage, ChatService, ClientChatMessage} from "../../services/ChatService.ts";
@@ -24,6 +24,16 @@ export const ChatContainer: React.FC<ChatContainerProps> = ({
  const [useStreaming, setUseStreaming] = useState(true);
  const [availableTools, setAvailableTools] = useState<string[]>([]);
 
+ const handleError = useCallback((error: unknown) => {
+ addNotification(
+ 'error',
+ error instanceof Error || (typeof error === 'object' && error && 'message' in error)
+ ? (error as { message: string }).message
+ : 'Failed to send message'
+ );
+ }, [addNotification]);
+
+
  const handleStreamingChange = (value: boolean) => {
  setUseStreaming(value);
  };
@@ -50,16 +60,7 @@ export const ChatContainer: React.FC<ChatContainerProps> = ({
 
  if (response.error) {
  console.error('Error loading tools:', response.error);
- // Creating a local function that uses addNotification
- const notifyError = () => {
- addNotification(
- 'error',
- typeof response.error === 'object' && true && 'message' in response.error
- ? response.error
- : 'Failed to send message'
- );
- };
- notifyError();
+ handleError(response.error);
  return;
  }
 
@@ -68,14 +69,8 @@ export const ChatContainer: React.FC<ChatContainerProps> = ({
  }
  } catch (error) {
  console.error('Error fetching tools:', error);
- // Creating another local function
- const notifyError = () => {
- addNotification(
- 'error',
- error instanceof Error ? error.message : 'Failed to send message'
- );
- };
- notifyError();
+ handleError(error);
+ return;
  }
  };
 

src/components/ChatContainer/ChatContainer.tsx

@@ -1,63 +1,82 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import {fetchTools} from "../../api";
-import {act} from "react";
-import {ToolsModal} from "./ToolsModal.tsx";
-import {Tool} from "../../types/tools.ts";
-
-// Mock the entire api module
-jest.mock('../../api', () => ({
- fetchTools: jest.fn()
-}));
+import { render, screen, act, fireEvent } from '@testing-library/react';
+import { ToolsModal } from './ToolsModal';
+import { ToolService } from '../../services/ToolService';
+import { Tool } from '../../types/tools';
+
+// Create mock data
+const mockTools = [
+ { name: 'Tool1', description: 'Description 1' },
+ { name: 'Tool2', description: 'Description 2' },
+ { name: 'Tool3', description: 'Description 3' },
+];
 
-// Mock the XMarkIcon component
-jest.mock('@heroicons/react/24/outline', () => ({
- XMarkIcon: () => <div data-testid="close-icon">X</div>
+// Mock the ToolItem component
+jest.mock('../ToolItem/ToolItem', () => ({
+ ToolItem: ({ tool, onToggle }: {
+ tool: Tool;
+ isSelected: boolean;
+ onToggle: (name: string) => void;
+ }) => (
+ <div
+ data-testid={`tool-item-${tool.name}`}
+ onClick={() => onToggle(tool.name)}
+ >
+ {tool.name}
+ </div>
+ )
 }));
 
 // Mock SearchBar component
-jest.mock('../SearchBar.tsx', () => ({
- SearchBar: ({ value, onChange }: { value: string; onChange: (value: string) => void }) => (
+jest.mock('../SearchBar', () => ({
+ SearchBar: ({ value, onChange }: {
+ value: string;
+ onChange: (value: string) => void;
+ }) => (
  <input
  data-testid="search-bar"
+ placeholder="Search tools"
  value={value}
  onChange={(e) => onChange(e.target.value)}
- placeholder="Search tools"
  />
  )
 }));
 
-// Mock ToolItem component
+// Mock the ToolService
+jest.mock('../../services/ToolService', () => ({
+ ToolService: jest.fn().mockImplementation(() => ({
+ getTools: jest.fn().mockResolvedValue({
+ data: mockTools
+ })
+ }))
+}));
+
+// Mock the ToolItem component
 jest.mock('../ToolItem/ToolItem', () => ({
  ToolItem: ({ tool, isSelected, onToggle }: {
  tool: Tool;
  isSelected: boolean;
- onToggle: (name: string) => void
+ onToggle: (name: string) => void;
  }) => (
  <div
  data-testid={`tool-item-${tool.name}`}
  onClick={() => onToggle(tool.name)}
  >
- {tool.name} {isSelected ? '(Selected)' : ''}
+ {tool.name}
+ {isSelected && ' (Selected)'}
  </div>
  )
 }));
 
-const mockTools = [
- { name: 'Tool1', description: 'Description 1' },
- { name: 'Tool2', description: 'Description 2' },
- { name: 'Tool3', description: 'Description 3' },
-];
 
 describe('ToolsModal', () => {
  const mockOnClose = jest.fn();
  const mockOnSave = jest.fn();
 
  beforeEach(() => {
  jest.clearAllMocks();
- (fetchTools as jest.Mock).mockResolvedValue(mockTools);
  });
 
+
  it('should render and fetch tools when opened', async () => {
  await act(async () => {
  render(
@@ -71,7 +90,7 @@ describe('ToolsModal', () => {
  });
 
  expect(screen.getByText('Available Tools')).toBeInTheDocument();
- expect(fetchTools).toHaveBeenCalledTimes(1);
+ expect(ToolService).toHaveBeenCalledTimes(1);
 
  expect(screen.getByTestId('tool-item-Tool1')).toBeInTheDocument();
  expect(screen.getByTestId('tool-item-Tool2')).toBeInTheDocument();

src/components/ChatInputButton/ToolsModal.test.tsx

@@ -2,8 +2,8 @@ import React, {useEffect, useMemo, useState} from 'react';
 import {XMarkIcon} from "@heroicons/react/24/outline";
 import {Tool, ToolsModalProps} from "../../types/tools.ts";
 import {SearchBar} from "../SearchBar.tsx";
-import {fetchTools} from "../../api";
 import {ToolItem} from "../ToolItem/ToolItem.tsx";
+import {ToolService} from "../../services/ToolService.ts";
 
 export const ToolsModal: React.FC<ToolsModalProps> = ({
  isOpen,
@@ -18,8 +18,9 @@ export const ToolsModal: React.FC<ToolsModalProps> = ({
  useEffect(() => {
  const loadTools = async () => {
  try {
- const data = await fetchTools();
- setTools(data);
+ const toolService = new ToolService();
+ const response = await toolService.getTools();
+ setTools(response.data || []);
  } catch (error) {
  console.error('Error fetching tools:', error);
  }
@@ -30,7 +31,6 @@ export const ToolsModal: React.FC<ToolsModalProps> = ({
  }
  }, [isOpen]);
 
-
  const handleToolToggle = (toolName: string) => {
  setSelectedTools(prev =>
  prev.includes(toolName)

src/components/ChatInputButton/ToolsModal.tsx

@@ -1,12 +1,12 @@
 // components/Sidebar.tsx
 import React, {useCallback, useEffect, useState} from 'react';
 import {ChatHistory} from "../types";
-import {fetchChatHistories} from "../api";
 import {SidebarHeader} from "./sidebar/SidebarHeader";
 import {NewChatSection} from "./sidebar/NewChatSection";
 import {ChatHistoryList} from "./sidebar/ChatHistoryList";
 import {SidebarFooter} from "./sidebar/SidebarFooter";
 import {useAuth0} from '@auth0/auth0-react';
+import {ChatService} from "../services/ChatService.ts";
 
 
 interface SidebarProps {
@@ -33,8 +33,9 @@ export const Sidebar: React.FC<SidebarProps> = ({
  setIsLoading(true);
  try {
  const token = await getAccessTokenSilently();
- const response = await fetchChatHistories(token);
- setChatHistories(response.chats || []);
+ const chatService = new ChatService(token);
+ const response = await chatService.getChatHistories();
+ setChatHistories(response.data.chats || []);
  setError(null);
  } catch (err) {
  setError('Failed to load chat histories');

src/components/Sidebar.tsx

@@ -25,15 +25,18 @@ interface StreamChunk {
  done?: boolean;
 }
 
+interface ChatHistoriesResponse {
+ chats: ChatHistory[];
+}
 
 // Updated ChatService
 export class ChatService extends APIClient {
  constructor(token: string = '') {
  super(import.meta.env.VITE_MCP_BACKEND_API_ENDPOINT, token);
  }
 
- async getChatHistories(): Promise<APIResponse<ChatHistory[]>> {
- return this.fetchWithError<ChatHistory[]>('/chats');
+ async getChatHistories(): Promise<APIResponse<ChatHistoriesResponse>> {
+ return this.fetchWithError<ChatHistoriesResponse>('/api/v1/chats');
  }
 
  async sendMessage(payload: ChatPayload): Promise<APIResponse<ChatResponse>> {
@@ -44,15 +47,15 @@ export class ChatService extends APIClient {
  }
 
  async loadChatHistory(chatId: string): Promise<APIResponse<{ messages: ApiChatMessage[] }>> {
- return this.fetchWithError<{ messages: ApiChatMessage[] }>(`/chats/${chatId}`);
+ return this.fetchWithError<{ messages: ApiChatMessage[] }>(`/api/v1/chats/${chatId}`);
  }
 
  async sendStreamMessage(
  payload: ChatPayload,
  onChunk: (chunk: StreamChunk) => void
  ): Promise<void> {
  try {
- const response = await this.fetchStream('/ask-stream', {
+ const response = await this.fetchStream('/api/v1/chats/stream', {
  method: 'POST',
  body: JSON.stringify(payload),
  });

src/services/ChatService.ts

@@ -7,6 +7,6 @@ export class LLMService extends APIClient {
  }
 
  async getLLMProviders(): Promise<APIResponse<LLMProvidersResponse>> {
- return this.fetchWithError<LLMProvidersResponse>('/llm-providers');
+ return this.fetchWithError<LLMProvidersResponse>('/api/v1/llm-providers');
  }
 }

src/services/LLMService.ts

@@ -3,10 +3,10 @@ import {APIClient, APIResponse} from "./APIClient.ts";
 
 export class ToolService extends APIClient {
  constructor(token: string = '') {
- super('http://localhost:8081/api', token);
+ super(import.meta.env.VITE_MCP_BACKEND_API_ENDPOINT, token);
  }
 
  async getTools(): Promise<APIResponse<Tool[]>> {
- return this.fetchWithError<Tool[]>('/tools');
+ return this.fetchWithError<Tool[]>('/api/v1/tools');
  }
-}
+}