forked from cardosofelipe/fast-next-template
Felipe Cardoso
68f1865a1e
- Add agent types list page with search and filter functionality - Add agent type detail/edit page with tabbed interface - Create AgentTypeForm component with React Hook Form + Zod validation - Implement model configuration (temperature, max tokens, top_p) - Add MCP permission management with checkboxes - Include personality prompt editor textarea - Create TanStack Query hooks for agent-types API - Add useDebounce hook for search optimization - Comprehensive unit tests for all components (68 tests) Components: - AgentTypeList: Grid view with status badges, expertise tags - AgentTypeDetail: Full detail view with model config, MCP permissions - AgentTypeForm: Create/edit with 4 tabs (Basic, Model, Permissions, Personality) Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
47 lines
1.0 KiB
TypeScript
47 lines
1.0 KiB
TypeScript
/**
|
|
* useDebounce Hook
|
|
*
|
|
* Debounces a value by a specified delay.
|
|
* Useful for search inputs and other user input that triggers API calls.
|
|
*/
|
|
|
|
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
|
|
/**
|
|
* Hook that debounces a value
|
|
*
|
|
* @param value - The value to debounce
|
|
* @param delay - Delay in milliseconds
|
|
* @returns The debounced value
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* const [searchQuery, setSearchQuery] = useState('');
|
|
* const debouncedSearch = useDebounce(searchQuery, 300);
|
|
*
|
|
* // Use debouncedSearch for API calls
|
|
* useEffect(() => {
|
|
* fetchResults(debouncedSearch);
|
|
* }, [debouncedSearch]);
|
|
* ```
|
|
*/
|
|
export function useDebounce<T>(value: T, delay: number): T {
|
|
const [debouncedValue, setDebouncedValue] = useState<T>(value);
|
|
|
|
useEffect(() => {
|
|
// Set up the timeout
|
|
const timeoutId = setTimeout(() => {
|
|
setDebouncedValue(value);
|
|
}, delay);
|
|
|
|
// Clean up on value change or unmount
|
|
return () => {
|
|
clearTimeout(timeoutId);
|
|
};
|
|
}, [value, delay]);
|
|
|
|
return debouncedValue;
|
|
}
|