From f76d80366c2f9ec227edd135fe82f3f2b675b0c2 Mon Sep 17 00:00:00 2001
From: Albert <albert@noreply.git.vaporware.studio>
Date: Sun, 9 Nov 2025 04:57:24 +0000
Subject: [PATCH] feat: Add typing indicator while AI is thinking
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 app/chat/page.tsx | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/app/chat/page.tsx b/app/chat/page.tsx
index 3315da4..30038b3 100644
--- a/app/chat/page.tsx
+++ b/app/chat/page.tsx
@@ -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>