AI Assistant Client

33 | {messages.map((message) => ( 34 | 35 | ))} 36 | 37 | {isLoading && ( 38 |

39 |

40 |

41 |

42 |

43 |

44 |

45 |

46 |

47 |

48 |

49 |

50 | )} 51 | 52 |

53 |

54 | ); 55 | }; -------------------------------------------------------------------------------- /src/components/ChatInput.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Send, Loader2 } from 'lucide-react'; 3 | 4 | interface ChatInputProps { 5 | onSendMessage: (message: string) => void; 6 | disabled?: boolean; 7 | placeholder?: string; 8 | } 9 | 10 | export const ChatInput: React.FC = ({ 11 | onSendMessage, 12 | disabled = false, 13 | placeholder = "Type your message..." 14 | }) => { 15 | const [message, setMessage] = React.useState(''); 16 | const textareaRef = React.useRef(null); 17 | 18 | const handleSubmit = (e: React.FormEvent) => { 19 | e.preventDefault(); 20 | if (message.trim() && !disabled) { 21 | onSendMessage(message.trim()); 22 | setMessage(''); 23 | if (textareaRef.current) { 24 | textareaRef.current.style.height = 'auto'; 25 | } 26 | } 27 | }; 28 | 29 | const handleKeyDown = (e: React.KeyboardEvent) => { 30 | if (e.key === 'Enter' && !e.shiftKey) { 31 | e.preventDefault(); 32 | handleSubmit(e); 33 | } 34 | }; 35 | 36 | const adjustHeight = () => { 37 | const textarea = textareaRef.current; 38 | if (textarea) { 39 | textarea.style.height = 'auto'; 40 | textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px'; 41 | } 42 | }; 43 | 44 | React.useEffect(() => { 45 | adjustHeight(); 46 | }, [message]); 47 | 48 | return ( 49 |

50 |

51 |

setMessage(e.target.value)}
55 |           onKeyDown={handleKeyDown}
56 |           placeholder={placeholder}
57 |           disabled={disabled}
58 |           className="w-full px-4 py-3 pr-12 bg-white/90 backdrop-blur-sm border border-gray-200 rounded-xl resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 disabled:opacity-50"
59 |           rows={1}
60 |           style={{ minHeight: '52px', maxHeight: '120px' }}
61 |         />
62 |       </div>
63 |       
64 |       <button
65 |         type="submit"
66 |         disabled={!message.trim() || disabled}
67 |         className="flex-shrink-0 w-12 h-12 bg-blue-500 hover:bg-blue-600 disabled:bg-gray-400 text-white rounded-xl flex items-center justify-center transition-colors duration-200 disabled:cursor-not-allowed"
68 |         aria-label="Send message"
69 |       >
70 |         {disabled ? (
71 |           <Loader2 className="w-5 h-5 animate-spin" />
72 |         ) : (
73 |           <Send className="w-5 h-5" />
74 |         )}
75 |       </button>
76 |     </form>
77 |   );
78 | };

--------------------------------------------------------------------------------
/src/components/MessageBubble.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Copy, Check, User, Bot } from 'lucide-react';
 3 | import { Message } from '../types';
 4 | 
 5 | interface MessageBubbleProps {
 6 |   message: Message;
 7 | }
 8 | 
 9 | export const MessageBubble: React.FC<MessageBubbleProps> = ({ message }) => {
10 |   const [copied, setCopied] = React.useState(false);
11 |   const isUser = message.role === 'user';
12 | 
13 |   const handleCopy = async () => {
14 |     try {
15 |       await navigator.clipboard.writeText(message.content);
16 |       setCopied(true);
17 |       setTimeout(() => setCopied(false), 2000);
18 |     } catch (err) {
19 |       console.error('Failed to copy text:', err);
20 |     }
21 |   };
22 | 
23 |   return (
24 |     <div className={`flex gap-3 ${isUser ? 'flex-row-reverse' : 'flex-row'} group`}>
25 |       <div className={`
26 |         flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center
27 |         ${isUser ? 'bg-blue-500' : 'bg-gray-600'}
28 |       `}>
29 |         {isUser ? (
30 |           <User className="w-4 h-4 text-white" />
31 |         ) : (
32 |           <Bot className="w-4 h-4 text-white" />
33 |         )}
34 |       </div>
35 |       
36 |       <div className={`
37 |         max-w-[80%] px-4 py-3 rounded-2xl relative
38 |         ${isUser 
39 |           ? 'bg-blue-500 text-white rounded-tr-md' 
40 |           : 'bg-white/90 backdrop-blur-sm text-gray-800 rounded-tl-md border border-gray-200'
41 |         }
42 |       `}>
43 |         <div className="whitespace-pre-wrap break-words">{message.content}</div>
44 |         
45 |         {!isUser && (
46 |           <button
47 |             onClick={handleCopy}
48 |             className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 p-1 hover:bg-gray-100 rounded"
49 |             aria-label="Copy message"
50 |           >
51 |             {copied ? (
52 |               <Check className="w-3 h-3 text-green-500" />
53 |             ) : (
54 |               <Copy className="w-3 h-3 text-gray-500" />
55 |             )}
56 |           </button>
57 |         )}
58 |       </div>
59 |     </div>
60 |   );
61 | };

--------------------------------------------------------------------------------
/src/components/ModelSelector.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { ChevronDown, Bot } from 'lucide-react';
 3 | import { AIModel } from '../types';
 4 | 
 5 | interface ModelSelectorProps {
 6 |   models: AIModel[];
 7 |   selectedModel: string;
 8 |   onModelChange: (modelId: string) => void;
 9 | }
10 | 
11 | export const ModelSelector: React.FC<ModelSelectorProps> = ({
12 |   models,
13 |   selectedModel,
14 |   onModelChange,
15 | }) => {
16 |   const [isOpen, setIsOpen] = React.useState(false);
17 |   const selectedModelData = models.find(m => m.id === selectedModel);
18 | 
19 |   return (
20 |     <div className="relative">
21 |       <button
22 |         onClick={() => setIsOpen(!isOpen)}
23 |         className="flex items-center gap-3 w-full px-4 py-3 bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl hover:bg-white/15 transition-all duration-200 group"
24 |         aria-label="Select AI model"
25 |       >
26 |         <Bot className="w-5 h-5 text-blue-400" />
27 |         <div className="flex-1 text-left">
28 |           <div className="font-medium text-white">
29 |             {selectedModelData?.name || 'Select Model'}
30 |           </div>
31 |           <div className="text-sm text-gray-300">
32 |             {selectedModelData?.provider}
33 |           </div>
34 |         </div>
35 |         <ChevronDown 
36 |           className={`w-4 h-4 text-gray-400 transition-transform duration-200 ${
37 |             isOpen ? 'rotate-180' : ''
38 |           }`} 
39 |         />
40 |       </button>
41 | 
42 |       {isOpen && (
43 |         <div className="absolute top-full left-0 right-0 mt-2 bg-white/95 backdrop-blur-lg border border-gray-200 rounded-xl shadow-2xl overflow-hidden z-50">
44 |           {models.map((model) => (
45 |             <button
46 |               key={model.id}
47 |               onClick={() => {
48 |                 onModelChange(model.id);
49 |                 setIsOpen(false);
50 |               }}
51 |               className={`w-full px-4 py-3 text-left hover:bg-blue-50 transition-colors duration-150 border-b border-gray-100 last:border-b-0 ${
52 |                 selectedModel === model.id ? 'bg-blue-50 border-l-4 border-l-blue-500' : ''
53 |               }`}
54 |             >
55 |               <div className="font-medium text-gray-900">{model.name}</div>
56 |               <div className="text-sm text-gray-600 mb-1">{model.description}</div>
57 |               <div className="flex gap-1 flex-wrap">
58 |                 {model.capabilities.slice(0, 3).map((cap) => (
59 |                   <span
60 |                     key={cap}
61 |                     className="text-xs px-2 py-1 bg-gray-200 text-gray-700 rounded-full"
62 |                   >
63 |                     {cap}
64 |                   </span>
65 |                 ))}
66 |               </div>
67 |             </button>
68 |           ))}
69 |         </div>
70 |       )}
71 |     </div>
72 |   );
73 | };

--------------------------------------------------------------------------------
/src/components/__tests__/ChatInput.test.tsx:
--------------------------------------------------------------------------------
 1 | import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 2 | import userEvent from '@testing-library/user-event';
 3 | import { ChatInput } from '../ChatInput';
 4 | 
 5 | const mockOnSendMessage = vi.fn();
 6 | 
 7 | describe('ChatInput', () => {
 8 |   beforeEach(() => {
 9 |     mockOnSendMessage.mockClear();
10 |   });
11 | 
12 |   it('renders input field and send button', () => {
13 |     render(<ChatInput onSendMessage={mockOnSendMessage} />);
14 | 
15 |     expect(screen.getByPlaceholderText('Type your message...')).toBeInTheDocument();
16 |     expect(screen.getByRole('button', { name: /send message/i })).toBeInTheDocument();
17 |   });
18 | 
19 |   it('calls onSendMessage when form is submitted', async () => {
20 |     const user = userEvent.setup();
21 |     render(<ChatInput onSendMessage={mockOnSendMessage} />);
22 | 
23 |     const input = screen.getByPlaceholderText('Type your message...');
24 |     const sendButton = screen.getByRole('button', { name: /send message/i });
25 | 
26 |     await user.type(input, 'Hello, AI!');
27 |     await user.click(sendButton);
28 | 
29 |     expect(mockOnSendMessage).toHaveBeenCalledWith('Hello, AI!');
30 |   });
31 | 
32 |   it('sends message on Enter key press', async () => {
33 |     const user = userEvent.setup();
34 |     render(<ChatInput onSendMessage={mockOnSendMessage} />);
35 | 
36 |     const input = screen.getByPlaceholderText('Type your message...');
37 | 
38 |     await user.type(input, 'Test message');
39 |     await user.keyboard('{Enter}');
40 | 
41 |     expect(mockOnSendMessage).toHaveBeenCalledWith('Test message');
42 |   });
43 | 
44 |   it('does not send message on Shift+Enter', async () => {
45 |     const user = userEvent.setup();
46 |     render(<ChatInput onSendMessage={mockOnSendMessage} />);
47 | 
48 |     const input = screen.getByPlaceholderText('Type your message...');
49 | 
50 |     await user.type(input, 'Test message');
51 |     await user.keyboard('{Shift>}{Enter}{/Shift}');
52 | 
53 |     expect(mockOnSendMessage).not.toHaveBeenCalled();
54 |   });
55 | 
56 |   it('disables input when disabled prop is true', () => {
57 |     render(<ChatInput onSendMessage={mockOnSendMessage} disabled />);
58 | 
59 |     const input = screen.getByPlaceholderText('Type your message...');
60 |     const sendButton = screen.getByRole('button', { name: /send message/i });
61 | 
62 |     expect(input).toBeDisabled();
63 |     expect(sendButton).toBeDisabled();
64 |   });
65 | 
66 |   it('clears input after sending message', async () => {
67 |     const user = userEvent.setup();
68 |     render(<ChatInput onSendMessage={mockOnSendMessage} />);
69 | 
70 |     const input = screen.getByPlaceholderText('Type your message...') as HTMLTextAreaElement;
71 | 
72 |     await user.type(input, 'Test message');
73 |     await user.keyboard('{Enter}');
74 | 
75 |     await waitFor(() => {
76 |       expect(input.value).toBe('');
77 |     });
78 |   });
79 | 
80 |   it('does not send empty or whitespace-only messages', async () => {
81 |     const user = userEvent.setup();
82 |     render(<ChatInput onSendMessage={mockOnSendMessage} />);
83 | 
84 |     const input = screen.getByPlaceholderText('Type your message...');
85 | 
86 |     // Try to send empty message
87 |     await user.keyboard('{Enter}');
88 |     expect(mockOnSendMessage).not.toHaveBeenCalled();
89 | 
90 |     // Try to send whitespace-only message
91 |     await user.type(input, '   ');
92 |     await user.keyboard('{Enter}');
93 |     expect(mockOnSendMessage).not.toHaveBeenCalled();
94 |   });
95 | });

--------------------------------------------------------------------------------
/src/components/__tests__/MessageBubble.test.tsx:
--------------------------------------------------------------------------------
 1 | import { render, screen, fireEvent } from '@testing-library/react';
 2 | import { MessageBubble } from '../MessageBubble';
 3 | import { Message } from '../../types';
 4 | 
 5 | // Mock clipboard API
 6 | Object.assign(navigator, {
 7 |   clipboard: {
 8 |     writeText: vi.fn(() => Promise.resolve()),
 9 |   },
10 | });
11 | 
12 | const mockUserMessage: Message = {
13 |   id: '1',
14 |   content: 'Hello, how are you?',
15 |   role: 'user',
16 |   timestamp: new Date(),
17 | };
18 | 
19 | const mockAssistantMessage: Message = {
20 |   id: '2',
21 |   content: 'I am doing well, thank you for asking!',
22 |   role: 'assistant',
23 |   timestamp: new Date(),
24 |   model: 'gpt-4-turbo',
25 | };
26 | 
27 | describe('MessageBubble', () => {
28 |   it('renders user message correctly', () => {
29 |     render(<MessageBubble message={mockUserMessage} />);
30 | 
31 |     expect(screen.getByText('Hello, how are you?')).toBeInTheDocument();
32 |     // User messages should not have copy button
33 |     expect(screen.queryByLabelText(/copy message/i)).not.toBeInTheDocument();
34 |   });
35 | 
36 |   it('renders assistant message correctly', () => {
37 |     render(<MessageBubble message={mockAssistantMessage} />);
38 | 
39 |     expect(screen.getByText('I am doing well, thank you for asking!')).toBeInTheDocument();
40 |     // Assistant messages should have copy button (visible on hover)
41 |     expect(screen.getByLabelText(/copy message/i)).toBeInTheDocument();
42 |   });
43 | 
44 |   it('copies message content to clipboard when copy button is clicked', async () => {
45 |     render(<MessageBubble message={mockAssistantMessage} />);
46 | 
47 |     const copyButton = screen.getByLabelText(/copy message/i);
48 |     fireEvent.click(copyButton);
49 | 
50 |     expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
51 |       'I am doing well, thank you for asking!'
52 |     );
53 |   });
54 | 
55 |   it('shows different icons for user and assistant messages', () => {
56 |     const { rerender } = render(<MessageBubble message={mockUserMessage} />);
57 |     
58 |     // Check for user icon (User component from lucide-react)
59 |     expect(document.querySelector('[data-lucide="user"]')).toBeInTheDocument();
60 | 
61 |     rerender(<MessageBubble message={mockAssistantMessage} />);
62 |     
63 |     // Check for bot icon (Bot component from lucide-react)
64 |     expect(document.querySelector('[data-lucide="bot"]')).toBeInTheDocument();
65 |   });
66 | 
67 |   it('applies correct styling for user vs assistant messages', () => {
68 |     const { rerender } = render(<MessageBubble message={mockUserMessage} />);
69 |     
70 |     let messageContent = screen.getByText('Hello, how are you?').closest('div');
71 |     expect(messageContent).toHaveClass('bg-blue-500');
72 | 
73 |     rerender(<MessageBubble message={mockAssistantMessage} />);
74 |     
75 |     messageContent = screen.getByText('I am doing well, thank you for asking!').closest('div');
76 |     expect(messageContent).toHaveClass('bg-white/90');
77 |   });
78 | });

--------------------------------------------------------------------------------
/src/components/__tests__/ModelSelector.test.tsx:
--------------------------------------------------------------------------------
 1 | import { render, screen, fireEvent } from '@testing-library/react';
 2 | import { ModelSelector } from '../ModelSelector';
 3 | import { availableModels } from '../../data/models';
 4 | 
 5 | const mockOnModelChange = vi.fn();
 6 | 
 7 | describe('ModelSelector', () => {
 8 |   beforeEach(() => {
 9 |     mockOnModelChange.mockClear();
10 |   });
11 | 
12 |   it('renders with selected model', () => {
13 |     render(
14 |       <ModelSelector
15 |         models={availableModels}
16 |         selectedModel="gpt-4-turbo"
17 |         onModelChange={mockOnModelChange}
18 |       />
19 |     );
20 | 
21 |     expect(screen.getByText('GPT-4 Turbo')).toBeInTheDocument();
22 |     expect(screen.getByText('OpenAI')).toBeInTheDocument();
23 |   });
24 | 
25 |   it('opens dropdown when clicked', () => {
26 |     render(
27 |       <ModelSelector
28 |         models={availableModels}
29 |         selectedModel="gpt-4-turbo"
30 |         onModelChange={mockOnModelChange}
31 |       />
32 |     );
33 | 
34 |     const button = screen.getByRole('button', { name: /select ai model/i });
35 |     fireEvent.click(button);
36 | 
37 |     expect(screen.getByText('GPT-3.5 Turbo')).toBeInTheDocument();
38 |     expect(screen.getByText('Claude 3 Opus')).toBeInTheDocument();
39 |   });
40 | 
41 |   it('calls onModelChange when a model is selected', () => {
42 |     render(
43 |       <ModelSelector
44 |         models={availableModels}
45 |         selectedModel="gpt-4-turbo"
46 |         onModelChange={mockOnModelChange}
47 |       />
48 |     );
49 | 
50 |     const button = screen.getByRole('button', { name: /select ai model/i });
51 |     fireEvent.click(button);
52 | 
53 |     const claudeOption = screen.getByText('Claude 3 Opus');
54 |     fireEvent.click(claudeOption);
55 | 
56 |     expect(mockOnModelChange).toHaveBeenCalledWith('claude-3-opus');
57 |   });
58 | 
59 |   it('displays model capabilities', () => {
60 |     render(
61 |       <ModelSelector
62 |         models={availableModels}
63 |         selectedModel="gpt-4-turbo"
64 |         onModelChange={mockOnModelChange}
65 |       />
66 |     );
67 | 
68 |     const button = screen.getByRole('button', { name: /select ai model/i });
69 |     fireEvent.click(button);
70 | 
71 |     expect(screen.getByText('Text Generation')).toBeInTheDocument();
72 |     expect(screen.getByText('Code Analysis')).toBeInTheDocument();
73 |   });
74 | });

--------------------------------------------------------------------------------
/src/data/models.ts:
--------------------------------------------------------------------------------
 1 | import { AIModel } from '../types';
 2 | 
 3 | export const availableModels: AIModel[] = [
 4 |   {
 5 |     id: 'gpt-4-turbo',
 6 |     name: 'GPT-4 Turbo',
 7 |     description: 'Most capable model for complex reasoning and analysis',
 8 |     provider: 'OpenAI',
 9 |     capabilities: ['Text Generation', 'Code Analysis', 'Mathematical Reasoning', 'Creative Writing']
10 |   },
11 |   {
12 |     id: 'gpt-3.5-turbo',
13 |     name: 'GPT-3.5 Turbo',
14 |     description: 'Fast and efficient for most conversational tasks',
15 |     provider: 'OpenAI',
16 |     capabilities: ['Text Generation', 'Basic Coding', 'Q&A', 'Summarization']
17 |   },
18 |   {
19 |     id: 'claude-3-opus',
20 |     name: 'Claude 3 Opus',
21 |     description: 'Excellent for analysis, math, and creative tasks',
22 |     provider: 'Anthropic',
23 |     capabilities: ['Advanced Analysis', 'Creative Writing', 'Code Review', 'Research']
24 |   },
25 |   {
26 |     id: 'claude-3-sonnet',
27 |     name: 'Claude 3 Sonnet',
28 |     description: 'Balanced performance for everyday tasks',
29 |     provider: 'Anthropic',
30 |     capabilities: ['Text Generation', 'Code Help', 'Analysis', 'Writing']
31 |   },
32 |   {
33 |     id: 'gemini-pro',
34 |     name: 'Gemini Pro',
35 |     description: 'Google\'s advanced multimodal AI model',
36 |     provider: 'Google',
37 |     capabilities: ['Text Generation', 'Multimodal', 'Code Generation', 'Reasoning']
38 |   }
39 | ];

--------------------------------------------------------------------------------
/src/hooks/__tests__/useChat.test.tsx:
--------------------------------------------------------------------------------
  1 | import { renderHook, act, waitFor } from '@testing-library/react';
  2 | import { useChat } from '../useChat';
  3 | import { AIService } from '../../services/aiService';
  4 | 
  5 | // Mock the AI service
  6 | vi.mock('../../services/aiService', () => ({
  7 |   AIService: {
  8 |     generateResponse: vi.fn(),
  9 |   },
 10 | }));
 11 | 
 12 | const mockAIService = AIService as any;
 13 | 
 14 | describe('useChat', () => {
 15 |   beforeEach(() => {
 16 |     mockAIService.generateResponse.mockClear();
 17 |     // Mock window.alert
 18 |     vi.spyOn(window, 'alert').mockImplementation(() => {});
 19 |   });
 20 | 
 21 |   afterEach(() => {
 22 |     vi.restoreAllMocks();
 23 |   });
 24 | 
 25 |   it('initializes with empty messages', () => {
 26 |     const { result } = renderHook(() => useChat('gpt-4-turbo'));
 27 | 
 28 |     expect(result.current.messages).toEqual([]);
 29 |     expect(result.current.isLoading).toBe(false);
 30 |   });
 31 | 
 32 |   it('sends message and receives response', async () => {
 33 |     mockAIService.generateResponse.mockResolvedValue('AI response');
 34 | 
 35 |     const { result } = renderHook(() => useChat('gpt-4-turbo'));
 36 | 
 37 |     await act(async () => {
 38 |       await result.current.sendMessage('Hello');
 39 |     });
 40 | 
 41 |     await waitFor(() => {
 42 |       expect(result.current.messages).toHaveLength(2);
 43 |       expect(result.current.messages[0].content).toBe('Hello');
 44 |       expect(result.current.messages[0].role).toBe('user');
 45 |       expect(result.current.messages[1].content).toBe('AI response');
 46 |       expect(result.current.messages[1].role).toBe('assistant');
 47 |       expect(result.current.isLoading).toBe(false);
 48 |     });
 49 |   });
 50 | 
 51 |   it('shows loading state while generating response', async () => {
 52 |     mockAIService.generateResponse.mockImplementation(
 53 |       () => new Promise(resolve => setTimeout(() => resolve('AI response'), 100))
 54 |     );
 55 | 
 56 |     const { result } = renderHook(() => useChat('gpt-4-turbo'));
 57 | 
 58 |     act(() => {
 59 |       result.current.sendMessage('Hello');
 60 |     });
 61 | 
 62 |     expect(result.current.isLoading).toBe(true);
 63 | 
 64 |     await waitFor(() => {
 65 |       expect(result.current.isLoading).toBe(false);
 66 |     });
 67 |   });
 68 | 
 69 |   it('handles errors gracefully', async () => {
 70 |     mockAIService.generateResponse.mockRejectedValue(new Error('API Error'));
 71 | 
 72 |     const { result } = renderHook(() => useChat('gpt-4-turbo'));
 73 | 
 74 |     await act(async () => {
 75 |       await result.current.sendMessage('Hello');
 76 |     });
 77 | 
 78 |     await waitFor(() => {
 79 |       expect(result.current.messages).toHaveLength(2);
 80 |       expect(result.current.messages[1].content).toContain('Sorry, I encountered an error');
 81 |       expect(result.current.isLoading).toBe(false);
 82 |     });
 83 |   });
 84 | 
 85 |   it('alerts when no model is selected', async () => {
 86 |     const { result } = renderHook(() => useChat(''));
 87 | 
 88 |     await act(async () => {
 89 |       await result.current.sendMessage('Hello');
 90 |     });
 91 | 
 92 |     expect(window.alert).toHaveBeenCalledWith('Please select a model first');
 93 |     expect(result.current.messages).toHaveLength(0);
 94 |   });
 95 | 
 96 |   it('clears chat messages', () => {
 97 |     const { result } = renderHook(() => useChat('gpt-4-turbo'));
 98 | 
 99 |     act(() => {
100 |       result.current.sendMessage('Hello');
101 |     });
102 | 
103 |     act(() => {
104 |       result.current.clearChat();
105 |     });
106 | 
107 |     expect(result.current.messages).toEqual([]);
108 |   });
109 | });

--------------------------------------------------------------------------------
/src/hooks/useChat.ts:
--------------------------------------------------------------------------------
 1 | import { useState, useCallback } from 'react';
 2 | import { Message } from '../types';
 3 | import { AIService } from '../services/aiService';
 4 | 
 5 | export const useChat = (selectedModel: string) => {
 6 |   const [messages, setMessages] = useState<Message[]>([]);
 7 |   const [isLoading, setIsLoading] = useState(false);
 8 | 
 9 |   const sendMessage = useCallback(async (content: string) => {
10 |     if (!selectedModel) {
11 |       alert('Please select a model first');
12 |       return;
13 |     }
14 | 
15 |     const userMessage: Message = {
16 |       id: Date.now().toString(),
17 |       content,
18 |       role: 'user',
19 |       timestamp: new Date(),
20 |     };
21 | 
22 |     setMessages(prev => [...prev, userMessage]);
23 |     setIsLoading(true);
24 | 
25 |     try {
26 |       const response = await AIService.generateResponse(
27 |         [...messages, userMessage],
28 |         selectedModel
29 |       );
30 | 
31 |       const assistantMessage: Message = {
32 |         id: (Date.now() + 1).toString(),
33 |         content: response,
34 |         role: 'assistant',
35 |         timestamp: new Date(),
36 |         model: selectedModel,
37 |       };
38 | 
39 |       setMessages(prev => [...prev, assistantMessage]);
40 |     } catch (error) {
41 |       console.error('Error generating response:', error);
42 |       const errorMessage: Message = {
43 |         id: (Date.now() + 1).toString(),
44 |         content: 'Sorry, I encountered an error while generating a response. Please try again.',
45 |         role: 'assistant',
46 |         timestamp: new Date(),
47 |         model: selectedModel,
48 |       };
49 |       setMessages(prev => [...prev, errorMessage]);
50 |     } finally {
51 |       setIsLoading(false);
52 |     }
53 |   }, [messages, selectedModel]);
54 | 
55 |   const clearChat = useCallback(() => {
56 |     setMessages([]);
57 |   }, []);
58 | 
59 |   return {
60 |     messages,
61 |     isLoading,
62 |     sendMessage,
63 |     clearChat,
64 |   };
65 | };

--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |

--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
 1 | import { StrictMode } from 'react';
 2 | import { createRoot } from 'react-dom/client';
 3 | import App from './App.tsx';
 4 | import './index.css';
 5 | 
 6 | createRoot(document.getElementById('root')!).render(
 7 |   <StrictMode>
 8 |     <App />
 9 |   </StrictMode>
10 | );
11 |

--------------------------------------------------------------------------------
/src/services/__tests__/aiService.test.ts:
--------------------------------------------------------------------------------
 1 | import { AIService } from '../aiService';
 2 | import { Message } from '../../types';
 3 | 
 4 | describe('AIService', () => {
 5 |   const mockMessages: Message[] = [
 6 |     {
 7 |       id: '1',
 8 |       content: 'Hello',
 9 |       role: 'user',
10 |       timestamp: new Date(),
11 |     },
12 |   ];
13 | 
14 |   it('generates response for code-related queries', async () => {
15 |     const codeMessages: Message[] = [
16 |       {
17 |         id: '1',
18 |         content: 'Can you help me write some code?',
19 |         role: 'user',
20 |         timestamp: new Date(),
21 |       },
22 |     ];
23 | 
24 |     const response = await AIService.generateResponse(codeMessages, 'gpt-4-turbo');
25 | 
26 |     expect(response).toContain('code example');
27 |     expect(response).toContain('```python');
28 |     expect(response).toContain('gpt-4-turbo');
29 |   });
30 | 
31 |   it('generates help response for help queries', async () => {
32 |     const helpMessages: Message[] = [
33 |       {
34 |         id: '1',
35 |         content: 'I need help with something',
36 |         role: 'user',
37 |         timestamp: new Date(),
38 |       },
39 |     ];
40 | 
41 |     const response = await AIService.generateResponse(helpMessages, 'claude-3-opus');
42 | 
43 |     expect(response).toContain('I\'m here to help');
44 |     expect(response).toContain('Programming and software development');
45 |   });
46 | 
47 |   it('generates generic response for other queries', async () => {
48 |     const response = await AIService.generateResponse(mockMessages, 'gpt-4-turbo');
49 | 
50 |     expect(typeof response).toBe('string');
51 |     expect(response.length).toBeGreaterThan(0);
52 |     expect(response).toContain('gpt-4-turbo');
53 |   });
54 | 
55 |   it('includes model name in response', async () => {
56 |     const response = await AIService.generateResponse(mockMessages, 'claude-3-sonnet');
57 | 
58 |     expect(response).toContain('claude-3-sonnet');
59 |   });
60 | 
61 |   it('simulates realistic response time', async () => {
62 |     const startTime = Date.now();
63 |     await AIService.generateResponse(mockMessages, 'gpt-4-turbo');
64 |     const endTime = Date.now();
65 | 
66 |     const responseTime = endTime - startTime;
67 |     expect(responseTime).toBeGreaterThan(1000); // At least 1 second
68 |     expect(responseTime).toBeLessThan(4000); // Less than 4 seconds
69 |   });
70 | });

--------------------------------------------------------------------------------
/src/services/aiService.ts:
--------------------------------------------------------------------------------
 1 | import { Message } from '../types';
 2 | 
 3 | // Mock AI service - in a real app, this would connect to actual AI APIs
 4 | export class AIService {
 5 |   private static readonly MOCK_RESPONSES = [
 6 |     "I understand your question. Let me provide a comprehensive response that addresses your specific needs.",
 7 |     "That's an interesting point! Here's how I would approach this problem step by step.",
 8 |     "Based on the information you've provided, I can offer several insights and recommendations.",
 9 |     "This is a great question that touches on several important concepts. Let me break it down for you.",
10 |     "I'd be happy to help you with that! Here's what I think would work best in this situation."
11 |   ];
12 | 
13 |   static async generateResponse(
14 |     messages: Message[],
15 |     model: string
16 |   ): Promise<string> {
17 |     // Simulate API call delay
18 |     await new Promise(resolve => setTimeout(resolve, 1000 + Math.random() * 2000));
19 | 
20 |     const lastMessage = messages[messages.length - 1];
21 |     
22 |     // Simple mock logic based on user input
23 |     if (lastMessage.content.toLowerCase().includes('code')) {
24 |       return `Here's a code example for your request:\n\n\`\`\`python\ndef example_function():\n    return "Hello, World!"\n\nresult = example_function()\nprint(result)\n\`\`\`\n\nThis demonstrates the basic concept you asked about using ${model}.`;
25 |     }
26 | 
27 |     if (lastMessage.content.toLowerCase().includes('help')) {
28 |       return `I'm here to help! You can ask me about:\n\n• Programming and software development\n• General knowledge questions\n• Creative writing and brainstorming\n• Problem-solving and analysis\n\nWhat specific area would you like assistance with?`;
29 |     }
30 | 
31 |     // Return a random mock response
32 |     const randomResponse = this.MOCK_RESPONSES[
33 |       Math.floor(Math.random() * this.MOCK_RESPONSES.length)
34 |     ];
35 | 
36 |     return `${randomResponse}\n\n*Response generated by ${model}*`;
37 |   }
38 | }

--------------------------------------------------------------------------------
/src/test/setup.ts:
--------------------------------------------------------------------------------
1 | import '@testing-library/jest-dom';

--------------------------------------------------------------------------------
/src/types/index.ts:
--------------------------------------------------------------------------------
 1 | export interface Message {
 2 |   id: string;
 3 |   content: string;
 4 |   role: 'user' | 'assistant';
 5 |   timestamp: Date;
 6 |   model?: string;
 7 | }
 8 | 
 9 | export interface AIModel {
10 |   id: string;
11 |   name: string;
12 |   description: string;
13 |   provider: string;
14 |   capabilities: string[];
15 | }
16 | 
17 | export interface ChatSession {
18 |   id: string;
19 |   title: string;
20 |   messages: Message[];
21 |   model: string;
22 |   createdAt: Date;
23 |   updatedAt: Date;
24 | }

--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 |

--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 |   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
4 |   theme: {
5 |     extend: {},
6 |   },
7 |   plugins: [],
8 | };
9 |

--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2020",
 4 |     "useDefineForClassFields": true,
 5 |     "lib": ["ES2020", "DOM", "DOM.Iterable"],
 6 |     "module": "ESNext",
 7 |     "skipLibCheck": true,
 8 | 
 9 |     /* Bundler mode */
10 |     "moduleResolution": "bundler",
11 |     "allowImportingTsExtensions": true,
12 |     "isolatedModules": true,
13 |     "moduleDetection": "force",
14 |     "noEmit": true,
15 |     "jsx": "react-jsx",
16 | 
17 |     /* Linting */
18 |     "strict": true,
19 |     "noUnusedLocals": true,
20 |     "noUnusedParameters": true,
21 |     "noFallthroughCasesInSwitch": true
22 |   },
23 |   "include": ["src"]
24 | }
25 |

--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "files": [],
3 |   "references": [
4 |     { "path": "./tsconfig.app.json" },
5 |     { "path": "./tsconfig.node.json" }
6 |   ]
7 | }
8 |

--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2022",
 4 |     "lib": ["ES2023"],
 5 |     "module": "ESNext",
 6 |     "skipLibCheck": true,
 7 | 
 8 |     /* Bundler mode */
 9 |     "moduleResolution": "bundler",
10 |     "allowImportingTsExtensions": true,
11 |     "isolatedModules": true,
12 |     "moduleDetection": "force",
13 |     "noEmit": true,
14 | 
15 |     /* Linting */
16 |     "strict": true,
17 |     "noUnusedLocals": true,
18 |     "noUnusedParameters": true,
19 |     "noFallthroughCasesInSwitch": true
20 |   },
21 |   "include": ["vite.config.ts"]
22 | }
23 |

--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite';
 2 | import react from '@vitejs/plugin-react';
 3 | 
 4 | // https://vitejs.dev/config/
 5 | export default defineConfig({
 6 |   plugins: [react()],
 7 |   optimizeDeps: {
 8 |     exclude: ['lucide-react'],
 9 |   },
10 | });
11 |

--------------------------------------------------------------------------------
/vitest.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vitest/config';
 2 | import react from '@vitejs/plugin-react';
 3 | 
 4 | export default defineConfig({
 5 |   plugins: [react()],
 6 |   test: {
 7 |     globals: true,
 8 |     environment: 'jsdom',
 9 |     setupFiles: ['./src/test/setup.ts'],
10 |   },
11 | });

--------------------------------------------------------------------------------

Welcome to AI Assistant