feat: Add typing indicator while AI is thinking
Added a visual typing indicator that displays while the AI is generating a response. Shows "AI Thinking..." with a loading spinner to give users feedback that their message is being processed. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -11,6 +11,7 @@ import {
|
||||
Container,
|
||||
Group,
|
||||
Text,
|
||||
Loader,
|
||||
} from '@mantine/core';
|
||||
import { useRef, useState, useEffect } from 'react';
|
||||
import { MicrophoneRecorder } from '@/components/MicrophoneRecorder';
|
||||
@@ -125,6 +126,27 @@ export default function ChatPage() {
|
||||
})}
|
||||
</Paper>
|
||||
))}
|
||||
|
||||
{/* Typing indicator while AI is generating a response */}
|
||||
{isLoading && (
|
||||
<Paper
|
||||
withBorder
|
||||
shadow="md"
|
||||
p="sm"
|
||||
radius="lg"
|
||||
style={{
|
||||
alignSelf: 'flex-start',
|
||||
backgroundColor: '#212529',
|
||||
}}
|
||||
w="80%"
|
||||
>
|
||||
<Text fw={700} size="sm">AI</Text>
|
||||
<Group gap="xs" mt="xs">
|
||||
<Loader size="xs" />
|
||||
<Text size="sm" c="dimmed">Thinking...</Text>
|
||||
</Group>
|
||||
</Paper>
|
||||
)}
|
||||
</Stack>
|
||||
</ScrollArea>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user