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,
|
Container,
|
||||||
Group,
|
Group,
|
||||||
Text,
|
Text,
|
||||||
|
Loader,
|
||||||
} from '@mantine/core';
|
} from '@mantine/core';
|
||||||
import { useRef, useState, useEffect } from 'react';
|
import { useRef, useState, useEffect } from 'react';
|
||||||
import { MicrophoneRecorder } from '@/components/MicrophoneRecorder';
|
import { MicrophoneRecorder } from '@/components/MicrophoneRecorder';
|
||||||
@@ -125,6 +126,27 @@ export default function ChatPage() {
|
|||||||
})}
|
})}
|
||||||
</Paper>
|
</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>
|
</Stack>
|
||||||
</ScrollArea>
|
</ScrollArea>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user