diff --git a/client/src/components/AiChat.tsx b/client/src/components/AiChat.tsx index 3aff916..9fda0e7 100644 --- a/client/src/components/AiChat.tsx +++ b/client/src/components/AiChat.tsx @@ -4,7 +4,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Card, CardFooter, CardHeader } from '@/components/ui/card'; -import { Bot, X, Send, Sparkles, Loader2 } from 'lucide-react'; +import { Bot, X, Send, Sparkles } from 'lucide-react'; import { apiRequest } from '@/lib/queryClient'; import { cn } from '@/lib/utils'; @@ -13,8 +13,20 @@ interface Message { content: string; } +// Typing indicator with animated dots +function TypingIndicator() { + return ( +
+
+
+
+
+ ); +} + export function AiChat() { const { t } = useTranslation(); + const queryClient = useQueryClient(); const [isOpen, setIsOpen] = useState(false); const [input, setInput] = useState(''); const [messages, setMessages] = useState([]); @@ -31,9 +43,13 @@ export function AiChat() { }, onSuccess: (data) => { setMessages(prev => [...prev, data]); + // Refresh tasks and labels in case AI created/modified them + queryClient.invalidateQueries({ queryKey: ['/api/tasks'] }); + queryClient.invalidateQueries({ queryKey: ['/api/labels'] }); + queryClient.invalidateQueries({ queryKey: ['/api/user'] }); }, onError: (err: Error) => { - setMessages(prev => [...prev, { role: 'assistant', content: t('ai.error') + ": " + err.message }]); + setMessages(prev => [...prev, { role: 'assistant', content: t('ai.chat.error', 'Something went wrong') + ": " + err.message }]); } }); @@ -70,7 +86,12 @@ export function AiChat() {
- {t('ai.title')} + {t('ai.chat.title', 'AI Assistant')} + {mutation.isPending && ( + + {t('ai.chat.thinking', 'Thinking')}... + + )}