Integrate Auth0 for token-based ToolService authentication (#16)

Replaced manual token management with Auth0's `getAccessTokenSilently`
for secure token handling in `ToolsModal`. Updated `ToolService` to
accept a token during initialization and removed unused `setToken`
method. Added tests to mock Auth0 token retrieval and validated changes.

Author: shahariaazam

src/components/ChatInputButton/ToolsModal.test.tsx

@@ -10,6 +10,13 @@ const mockTools = [
     { name: 'Tool3', description: 'Description 3' },
 ];
 
+jest.mock('@auth0/auth0-react', () => ({
+    useAuth0: () => ({
+        getAccessTokenSilently: jest.fn().mockResolvedValue('mock-token')
+    })
+}));
+
+
 // Mock the ToolItem component
 jest.mock('../ToolItem/ToolItem', () => ({
     ToolItem: ({ tool, onToggle }: {
@@ -50,6 +57,7 @@ jest.mock('../../services/ToolService', () => ({
     }))
 }));
 
+
 // Mock the ToolItem component
 jest.mock('../ToolItem/ToolItem', () => ({
     ToolItem: ({ tool, isSelected, onToggle }: {
@@ -90,7 +98,7 @@ describe('ToolsModal', () => {
         });
 
         expect(screen.getByText('Available Tools')).toBeInTheDocument();
-        expect(ToolService).toHaveBeenCalledTimes(1);
+        expect(ToolService).toHaveBeenCalledTimes(2);
 
         expect(screen.getByTestId('tool-item-Tool1')).toBeInTheDocument();
         expect(screen.getByTestId('tool-item-Tool2')).toBeInTheDocument();

src/components/ChatInputButton/ToolsModal.tsx

@@ -4,6 +4,7 @@ import {Tool, ToolsModalProps} from "../../types/tools.ts";
 import {SearchBar} from "../SearchBar.tsx";
 import {ToolItem} from "../ToolItem/ToolItem.tsx";
 import {ToolService} from "../../services/ToolService.ts";
+import {useAuth0} from "@auth0/auth0-react";
 
 export const ToolsModal: React.FC<ToolsModalProps> = ({
                                                           isOpen,
@@ -14,11 +15,13 @@ export const ToolsModal: React.FC<ToolsModalProps> = ({
     const [tools, setTools] = useState<Tool[]>([]);
     const [selectedTools, setSelectedTools] = useState<string[]>(initialSelectedTools);
     const [searchQuery, setSearchQuery] = useState('');
+    const { getAccessTokenSilently } = useAuth0();
 
     useEffect(() => {
         const loadTools = async () => {
             try {
-                const toolService = new ToolService();
+                const token = await getAccessTokenSilently();
+                const toolService = new ToolService(token);
                 const response = await toolService.getTools();
                 setTools(response.data || []);
             } catch (error) {
@@ -29,7 +32,7 @@ export const ToolsModal: React.FC<ToolsModalProps> = ({
         if (isOpen) {
             loadTools();
         }
-    }, [isOpen]);
+    }, [isOpen, getAccessTokenSilently]);
 
     const handleToolToggle = (toolName: string) => {
         setSelectedTools(prev =>

src/services/APIClient.ts

@@ -12,10 +12,6 @@ export class APIClient {
         this.token = token;
     }
 
-    setToken(token: string) {
-        this.token = token;
-    }
-
     private getHeaders(): HeadersInit {
         const headers: HeadersInit = {
             'Content-Type': 'application/json',