added mcp tools in chatbot settings icon

.cursor/rules/rules.mdc

@@ -204,6 +204,119 @@ import type { Debate } from '../types/debater.types.ts';
 - Keep functions pure and typed
 - Export for reuse
 
+### Custom Hooks & Data Fetching
+- Create custom hooks in `src/app/hooks/` for reusable data-fetching logic
+- Use `useCallback` to memoize async functions and prevent unnecessary re-renders
+- Implement intelligent caching with localStorage (use `cache.utils.ts`)
+- Handle loading, error, and empty states explicitly
+- Use defensive type checking for API responses:
+
+```typescript
+// Example: Custom hook with caching and error handling
+import { useState, useEffect, useCallback } from 'react';
+import api from '../services/api-wrapper.ts';
+import type { MyType } from '../types/index.ts';
+import { cacheMyData, getCachedMyData } from '../utils/cache.utils.ts';
+
+type MyDataState = {
+  data: MyType[];
+  loading: boolean;
+  error: Error | null;
+};
+
+const isValidData = (value: unknown): value is MyType => {
+  if (!value || typeof value !== 'object') return false;
+  const candidate = value as { id?: unknown; name?: unknown };
+  return typeof candidate.id === 'number' && typeof candidate.name === 'string';
+};
+
+const normalizeResponse = (payload: unknown): MyType[] | null => {
+  if (Array.isArray(payload)) return payload.filter(isValidData);
+  if (payload && typeof payload === 'object') {
+    const candidate = payload as { data?: unknown; items?: unknown };
+    if (Array.isArray(candidate.data)) return candidate.data.filter(isValidData);
+    if (Array.isArray(candidate.items)) return candidate.items.filter(isValidData);
+  }
+  return null;
+};
+
+export const useMyData = () => {
+  const [state, setState] = useState<MyDataState>({ data: [], loading: false, error: null });
+
+  const fetchData = useCallback(async () => {
+    try {
+      const cached = getCachedMyData();
+      if (cached?.length > 0) {
+        setState({ data: cached, loading: false, error: null });
+      } else {
+        setState(prev => ({ ...prev, loading: true, error: null }));
+      }
+      
+      const payload = await api.get<unknown>('/api/endpoint');
+      const normalized = normalizeResponse(payload);
+      
+      if (!normalized) throw new Error('Invalid response shape');
+      
+      setState({ data: normalized, loading: false, error: null });
+      cacheMyData(normalized);
+    } catch (err) {
+      setState({
+        data: getCachedMyData() ?? [],
+        loading: false,
+        error: err instanceof Error ? err : new Error('Failed to fetch data'),
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  return { ...state, refetch: fetchData };
+};
+```
+
+### UI Components & Interactions
+- Use refs (`useRef`) for managing DOM elements that need direct access (e.g., dropdown containers)
+- Implement click-outside detection for dropdowns/modals:
+  - Add `mousedown` listener (not `click`) to capture events before bubbling
+  - Always clean up event listeners in `useEffect` return
+- Implement state visibility toggles that also trigger data refetch on open:
+  - Useful for keeping data fresh when user opens a dropdown/modal
+- Add proper ARIA attributes for accessibility:
+  - `aria-expanded` on toggle buttons
+  - `aria-haspopup` on buttons that open menus
+- Limit list item display (e.g., `slice(0, 6)`) to prevent UI overflow
+
+```typescript
+// Dropdown component pattern
+const dropdownRef = useRef<HTMLDivElement>(null);
+const [showDropdown, setShowDropdown] = useState(false);
+
+// Close on click outside
+useEffect(() => {
+  const handleClickOutside = (event: MouseEvent) => {
+    if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+      setShowDropdown(false);
+    }
+  };
+
+  document.addEventListener('mousedown', handleClickOutside);
+  return () => {
+    document.removeEventListener('mousedown', handleClickOutside);
+  };
+}, []);
+
+// Toggle with refetch on open
+const toggleDropdown = () => {
+  const nextState = !showDropdown;
+  setShowDropdown(nextState);
+  if (nextState) {
+    refetch(); // Refresh data when opening
+  }
+};
+```
+
 ## Conventions
 
 1. **Authentication**:
@@ -218,13 +331,58 @@ import type { Debate } from '../types/debater.types.ts';
      - Use `.tsx` for React components (e.g., `import Component from './Component.tsx'`)
      - Use `.ts` for TypeScript files (e.g., `import { func } from './utils/index.ts'`)
      - Use `/index.ts` for directory barrel exports (e.g., `import { something } from './utils/index.ts'`)
+     - Use `type` keyword for type imports (e.g., `import type { Type } from './types.ts'`)
    - This is required for webpack module resolution in this project
-2. **Styling**: Tailwind-first, avoid custom CSS
+   - **Import organization order**:
+     1. React and React hooks (e.g., `import React, { useState } from 'react'`)
+     2. Third-party libraries (e.g., `import { Icon } from 'lucide-react'`)
+     3. Local imports (hooks, types, components, services, utils)
+     4. Type imports last (e.g., `import type { MyType } from './types.ts'`)
+2. **Styling**: 
+   - Tailwind-first, avoid custom CSS files
+   - For utility classes needed globally (e.g., `.scrollbar-hide`), add to `src/index.css` with appropriate vendor prefixes
+   - Use Tailwind modifiers for responsive, dark mode, and interactive states
+   - Example utilities to `src/index.css`:
+     ```css
+     .scrollbar-hide {
+       scrollbar-width: none;
+     }
+     .scrollbar-hide::-webkit-scrollbar {
+       display: none;
+     }
+     ```
 3. **Error Handling**: Use ErrorBoundary for React errors, try/catch for API errors
 4. **Loading States**: Use `Loading` component from `components/common/Loading`
 5. **Environment Variables**: All must start with `REACT_APP_` prefix
 6. **Testing**: Use React Testing Library, co-locate tests
 
+## Response Normalization & API Best Practices
+
+- **Assume API responses may vary**: Backend APIs can return data in different shapes (direct array, `.data` property, `.items` property, etc.)
+- **Always implement type guards**: Use predicate functions to validate each item before using
+- **Normalize responses early**: Convert varied response shapes into a consistent internal format in hooks/services
+- **Handle edge cases**: Plan for empty responses, null values, and unexpected data structures
+
+```typescript
+// ✅ GOOD: Defensive response handling
+const isValidTool = (value: unknown): value is MCPTool => {
+  if (!value || typeof value !== 'object') return false;
+  const candidate = value as { name?: unknown; description?: unknown };
+  return typeof candidate.name === 'string' &&
+    (candidate.description === undefined || typeof candidate.description === 'string');
+};
+
+const normalizeToolsResponse = (payload: unknown): MCPTool[] | null => {
+  if (Array.isArray(payload)) return payload.filter(isValidTool);
+  if (payload && typeof payload === 'object') {
+    const candidate = payload as { tools?: unknown; data?: unknown };
+    if (Array.isArray(candidate.tools)) return candidate.tools.filter(isValidTool);
+    if (Array.isArray(candidate.data)) return candidate.data.filter(isValidTool);
+  }
+  return null;
+};
+```
+
 ## What NOT to Do
 
 - ❌ Don't use class components (except ErrorBoundary)
@@ -234,6 +392,10 @@ import type { Debate } from '../types/debater.types.ts';
 - ❌ Don't commit `.env*` files (except `.env.example`)
 - ❌ Don't skip TypeScript types
 - ❌ Don't call `isUserRegistered()` directly in components - use `useAuth()` hook instead
+- ❌ Don't assume API response shapes - always normalize and validate
+- ❌ Don't forget to clean up event listeners in useEffect return statements
+- ❌ Don't use inline anonymous functions in onClick/onChange - prefer named handlers
+- ❌ Don't skip error states in loading components - implement proper error UI
 
 ## When Adding New Features
 

.gitignore

@@ -89,3 +89,4 @@ tmp/
 temp/
 QWEN.md
 .qwen/rules.md
+.windsurf/rules/rules.md

package-lock.json

@@ -22,6 +22,8 @@
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
+        "@types/react": "^19.2.7",
+        "@types/react-dom": "^19.2.3",
         "autoprefixer": "^10.4.22",
         "postcss": "^8.5.6",
         "tailwindcss": "^3.4.18"
@@ -3870,6 +3872,26 @@
       "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==",
       "license": "MIT"
     },
+    "node_modules/@types/react": {
+      "version": "19.2.7",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.7.tgz",
+      "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
+      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
+      "devOptional": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.2.0"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -6482,6 +6504,13 @@
       "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
       "license": "MIT"
     },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "devOptional": true,
+      "license": "MIT"
+    },
     "node_modules/d3-array": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",

package.json

@@ -17,6 +17,8 @@
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "autoprefixer": "^10.4.22",
     "postcss": "^8.5.6",
     "tailwindcss": "^3.4.18"

src/app/components/chat/ChatInput.tsx

@@ -1,14 +1,25 @@
-import React, { useState, useEffect } from 'react';
-import { Plus, ArrowUp, Settings2, Mic, X, Check } from 'lucide-react';
+import React, { useState, useRef, useEffect } from 'react';
+import { Plus, ArrowUp, Settings2, Mic, X, Check, Loader2 } from 'lucide-react';
+import { useMCPTools } from '../../hooks/useMCPTools.ts';
+import type { MCPTool } from '../../types/index.ts';
 
 type ChatInputProps = {
   onSubmit?: (message: string) => void;
   placeholder?: string;
 };
 
+// Type guard to ensure tool type safety (used for runtime validation if needed)
+const isMCPTool = (value: any): value is MCPTool => {
+  return value && typeof value === 'object' && typeof value.name === 'string';
+};
+
 const ChatInput = ({ onSubmit, placeholder = 'Ask a follow-up...' }: ChatInputProps) => {
   const [input, setInput] = useState('');
   const [isRecording, setIsRecording] = useState(false);
+  const [showToolsDropdown, setShowToolsDropdown] = useState(false);
+  const [selectedTool, setSelectedTool] = useState<string | null>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const { tools, loading, error, refetch } = useMCPTools();
 
   const handleSubmit = (e: any) => {
     e.preventDefault();
@@ -25,7 +36,7 @@ const ChatInput = ({ onSubmit, placeholder = 'Ask a follow-up...' }: ChatInputPr
     setIsRecording(true);
     setTimeout(() => {
       setIsRecording(false);
-      setInput('When speech to text feature ?');
+      setInput('speech to text feature');
     }, 5000);
   };
 
@@ -35,7 +46,7 @@ const ChatInput = ({ onSubmit, placeholder = 'Ask a follow-up...' }: ChatInputPr
 
   const handleConfirmRecording = () => {
     setIsRecording(false);
-    setInput('When speech to text feature ?');
+    setInput('speech to text feature');
   };
 
   const WaveAnimation = () => {
@@ -74,11 +85,34 @@ const ChatInput = ({ onSubmit, placeholder = 'Ask a follow-up...' }: ChatInputPr
     );
   };
 
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setShowToolsDropdown(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  const toggleToolsDropdown = () => {
+    const nextState = !showToolsDropdown;
+    setShowToolsDropdown(nextState);
+
+    if (nextState) {
+      refetch();
+    }
+  };
+
   return (
     <div className="relative">
       <form onSubmit={handleSubmit} className="relative">
         <div
-          className="border border-zinc-300 dark:border-zinc-700 rounded-2xl p-4 relative transition-all duration-500 ease-in-out overflow-hidden bg-zinc-100 dark:bg-[#141415]"
+          className="border border-zinc-300 dark:border-zinc-700 rounded-2xl p-4 relative transition-all duration-500 ease-in-out overflow-visible bg-zinc-100 dark:bg-[#141415]"
         >
           {isRecording ? (
             <div className="flex items-center justify-between h-12 animate-fade-in w-full">
@@ -124,12 +158,56 @@ const ChatInput = ({ onSubmit, placeholder = 'Ask a follow-up...' }: ChatInputPr
                     <Plus className="h-5 w-5" />
                   </button>
 
-                  <button
-                    type="button"
-                    className="h-8 w-8 p-0 text-zinc-800 dark:text-white hover:text-zinc-900 dark:hover:text-white hover:bg-zinc-200 dark:hover:bg-zinc-700 rounded-lg transition-all duration-200 hover:scale-110 flex items-center justify-center"
-                  >
-                    <Settings2 className="h-5 w-5" />
-                  </button>
+                  <div className="relative" ref={dropdownRef}>
+                    <button
+                      type="button"
+                      onClick={toggleToolsDropdown}
+                      className={`h-8 w-8 p-0 rounded-lg transition-all duration-200 hover:scale-110 flex items-center justify-center ${selectedTool ? 'bg-teal-500/15 text-teal-600 dark:bg-teal-500/20 dark:text-teal-300 hover:bg-teal-500/25 dark:hover:bg-teal-500/30' : 'text-zinc-800 dark:text-white hover:text-zinc-900 dark:hover:text-white hover:bg-zinc-200 dark:hover:bg-zinc-700'}`}
+                      aria-expanded={showToolsDropdown}
+                      aria-haspopup="true"
+                    >
+                      <Settings2 className="h-5 w-5" />
+                    </button>
+                    
+                    {showToolsDropdown && (
+                      <div className="absolute top-[calc(100%+0.6rem)] left-0 w-fit min-w-[9rem] max-w-[20rem] rounded-2xl border border-zinc-200/70 dark:border-zinc-700/60 bg-white/95 dark:bg-zinc-900/90 backdrop-blur-xl shadow-[0_20px_45px_-20px_rgba(12,12,12,0.75)] z-50 overflow-hidden">
+                        <div className="px-3 py-3 max-h-64 overflow-y-auto scrollbar-hide">
+                          {loading ? (
+                            <div className="flex items-center justify-center gap-3 rounded-xl bg-zinc-100/80 dark:bg-zinc-800/70 px-4 py-3 text-sm text-zinc-500 dark:text-zinc-300">
+                              <Loader2 className="h-4 w-4 animate-spin" />
+                              Loading tools…
+                            </div>
+                          ) : error ? (
+                            <div className="rounded-xl border border-red-400/50 bg-red-50/80 px-4 py-3 text-sm text-red-600 dark:border-red-500/40 dark:bg-red-900/20 dark:text-red-300">
+                              Failed to load tools. Please try again.
+                            </div>
+                          ) : tools.length === 0 ? (
+                            <div className="rounded-xl bg-zinc-100/70 px-4 py-3 text-sm text-zinc-500 dark:bg-zinc-800/70 dark:text-zinc-300">
+                              No tools available yet.
+                            </div>
+                          ) : (
+                            <ul className="space-y-2">
+                              {tools.slice(0, 6).filter(isMCPTool).map((tool, index) => (
+                                <li key={tool.name || index}>
+                                  <button
+                                    type="button"
+                                    className={`w-full rounded-xl border border-transparent bg-gradient-to-r from-zinc-100/70 via-white to-zinc-100/70 px-4 py-3 text-left text-sm font-semibold text-zinc-800 transition-all duration-200 hover:-translate-y-0.5 hover:border-teal-300/80 hover:bg-white/90 hover:shadow-lg dark:from-zinc-800/50 dark:via-zinc-900/60 dark:to-zinc-800/50 dark:text-zinc-50 dark:hover:border-teal-400/70 dark:hover:bg-zinc-700/70 flex items-center justify-between gap-3 whitespace-nowrap ${selectedTool === tool.name ? 'border-teal-300/70 dark:border-teal-400/70' : ''}`}
+                                    onClick={() => {
+                                      setSelectedTool((current) => (current === tool.name ? null : tool.name));
+                                      setShowToolsDropdown(false);
+                                    }}
+                                  >
+                                    <span className="truncate">{tool.name}</span>
+                                    {selectedTool === tool.name && <Check className="h-4 w-4 text-teal-400 dark:text-teal-300" />}
+                                  </button>
+                                </li>
+                              ))}
+                            </ul>
+                          )}
+                        </div>
+                      </div>
+                    )}
+                  </div>
 
                   <button
                     type="button"

src/app/constants/index.ts

@@ -10,6 +10,7 @@ export const API_ENDPOINTS = {
   USER_UPDATE_NAME: '/api/v1/user/me/name',
   ANALYSIS: '/api/v1/analyse',
   ANALYSIS_CSV: '/api/v1/analyse/csv',
+  MCP_TOOLS: '/api/v1/mcp/tools',
 } as const;
 
 // App configuration

src/app/hooks/useMCPTools.ts

@@ -0,0 +1,83 @@
+import { useState, useEffect, useCallback } from 'react';
+import api from '../services/api-wrapper.ts';
+import type { MCPTool } from '../types/index.ts';
+import { API_ENDPOINTS } from '../constants/index.ts';
+import { cacheMcpTools, getCachedMcpTools } from '../utils/cache.utils.ts';
+
+type MCPToolsState = {
+  tools: MCPTool[];
+  loading: boolean;
+  error: Error | null;
+};
+
+const INITIAL_STATE = {
+  tools: [] as MCPTool[],
+  loading: false,
+  error: null,
+} as MCPToolsState;
+
+const isMCPTool = (value: unknown): value is MCPTool => {
+  if (!value || typeof value !== 'object') {
+    return false;
+  }
+
+  const candidate = value as { name?: unknown; description?: unknown };
+  return typeof candidate.name === 'string' &&
+    (candidate.description === undefined || typeof candidate.description === 'string');
+};
+
+const normalizeToolsResponse = (payload: unknown): MCPTool[] | null => {
+  if (Array.isArray(payload)) {
+    return payload.filter(isMCPTool);
+  }
+
+  if (payload && typeof payload === 'object') {
+    const candidate = payload as { tools?: unknown; data?: unknown };
+    if (Array.isArray(candidate.tools)) {
+      return candidate.tools.filter(isMCPTool);
+    }
+
+    if (Array.isArray(candidate.data)) {
+      return candidate.data.filter(isMCPTool);
+    }
+  }
+
+  return null;
+};
+
+export const useMCPTools = () => {
+  const [state, setState] = useState(INITIAL_STATE);
+
+  const fetchTools = useCallback(async () => {
+    try {
+      const cachedTools = getCachedMcpTools();
+      if (cachedTools && cachedTools.length > 0) {
+        setState({ tools: cachedTools, loading: false, error: null });
+      } else {
+        setState((prev) => ({ ...prev, loading: true, error: null }));
+      }
+
+      const payload = await api.get<unknown>(API_ENDPOINTS.MCP_TOOLS);
+      const parsedTools = normalizeToolsResponse(payload);
+
+      if (!parsedTools) {
+        throw new Error('Invalid MCP tools response shape');
+      }
+
+      setState({ tools: parsedTools, loading: false, error: null });
+      cacheMcpTools(parsedTools);
+    } catch (err) {
+      setState({
+        tools: getCachedMcpTools() ?? [],
+        loading: false,
+        error: err instanceof Error ? err : new Error('Failed to fetch MCP tools'),
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchTools();
+  }, [fetchTools]);
+
+  return { ...state, refetch: fetchTools };
+};

src/app/types/index.ts

@@ -6,4 +6,5 @@
 export * from './api.types.ts';
 export * from './analysis.types.ts';
 export * from './user.types.ts';
+export * from './mcp.types.ts';
 

src/app/types/mcp.types.ts

@@ -0,0 +1,8 @@
+/**
+ * Types related to Model Context Protocol tools
+ */
+
+export type MCPTool = {
+  name: string;
+  description?: string;
+};

src/app/utils/cache.utils.ts

@@ -3,15 +3,24 @@
  */
 
 import type { AnalysisResult } from '../types/analysis.types.ts';
+import type { MCPTool } from '../types/mcp.types.ts';
 
 const CACHE_KEY = 'analysis_data_cache';
 const CACHE_TIMESTAMP_KEY = 'analysis_data_cache_timestamp';
 
+const MCP_TOOLS_CACHE_KEY = 'mcp_tools_cache';
+const MCP_TOOLS_CACHE_TIMESTAMP_KEY = 'mcp_tools_cache_timestamp';
+
 type CachedAnalysisData = {
   results: AnalysisResult[];
   timestamp: number;
 };
 
+type CachedMCPToolsData = {
+  tools: MCPTool[];
+  timestamp: number;
+};
+
 /**
  * Cache analysis results to localStorage
  */
@@ -70,3 +79,41 @@ export function clearAnalysisCache(): void {
   }
 }
 
+export function cacheMcpTools(tools: MCPTool[]): void {
+  try {
+    const cacheData: CachedMCPToolsData = {
+      tools,
+      timestamp: Date.now(),
+    };
+    localStorage.setItem(MCP_TOOLS_CACHE_KEY, JSON.stringify(cacheData));
+    localStorage.setItem(
+      MCP_TOOLS_CACHE_TIMESTAMP_KEY,
+      String(cacheData.timestamp)
+    );
+  } catch (error) {
+    console.warn('Failed to cache MCP tools:', error);
+  }
+}
+
+export function getCachedMcpTools(): MCPTool[] | null {
+  try {
+    const cached = localStorage.getItem(MCP_TOOLS_CACHE_KEY);
+    if (!cached) return null;
+
+    const cacheData: CachedMCPToolsData = JSON.parse(cached);
+    return cacheData.tools;
+  } catch (error) {
+    console.warn('Failed to retrieve cached MCP tools:', error);
+    return null;
+  }
+}
+
+export function clearMcpToolsCache(): void {
+  try {
+    localStorage.removeItem(MCP_TOOLS_CACHE_KEY);
+    localStorage.removeItem(MCP_TOOLS_CACHE_TIMESTAMP_KEY);
+  } catch (error) {
+    console.warn('Failed to clear MCP tools cache:', error);
+  }
+}
+

src/index.css

@@ -17,3 +17,11 @@ body {
   margin: 0;
   min-height: 100vh;
 }
+
+.scrollbar-hide {
+  scrollbar-width: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}