app/components/ChatInterface.tsx

'use client';

import { useChat } from 'ai';
import { Container, ScrollArea, Paper, Group, TextInput, Button, Stack, Text, Box } from '@mantine/core';
import { useEffect, useRef } from 'react';
import { MicrophoneRecorder } from './MicrophoneRecorder';

export function ChatInterface() {
  const viewport = useRef<HTMLDivElement>(null);

  const {
    messages,
    input,
    handleInputChange,
    handleSubmit,
    setInput,
    isLoading,
  } = useChat({
    api: '/api/chat',
  });

  // Auto-scroll to bottom when new messages arrive
  useEffect(() => {
    if (viewport.current) {
      viewport.current.scrollTo({
        top: viewport.current.scrollHeight,
        behavior: 'smooth',
      });
    }
  }, [messages]);

  return (
    <Container size="md" h="100vh" style={{ display: 'flex', flexDirection: 'column' }}>
      <Stack h="100%" gap="md" py="md">
        {/* Chat messages area */}
        <ScrollArea
          flex={1}
          type="auto"
          viewportRef={viewport}
        >
          <Stack gap="md">
            {messages.length === 0 && (
              <Text c="dimmed" ta="center" mt="xl">
                Start a conversation by typing or speaking...
              </Text>
            )}
            {messages.map((message) => (
              <Box
                key={message.id}
                style={{
                  alignSelf: message.role === 'user' ? 'flex-end' : 'flex-start',
                  maxWidth: '70%',
                }}
              >
                <Paper
                  p="sm"
                  radius="md"
                  bg={message.role === 'user' ? 'dark.6' : 'dark.7'}
                >
                  <Text size="sm">{message.content}</Text>
                </Paper>
              </Box>
            ))}
          </Stack>
        </ScrollArea>

        {/* Input area */}
        <form onSubmit={handleSubmit}>
          <Paper withBorder p="sm" radius="xl">
            <Group gap="xs">
              <TextInput
                value={input}
                onChange={handleInputChange}
                placeholder="Speak or type your thoughts..."
                style={{ flex: 1 }}
                variant="unstyled"
                disabled={isLoading}
              />

              {/* Microphone Recorder */}
              <MicrophoneRecorder
                onTranscriptUpdate={(transcript) => {
                  // Update the input field in real-time
                  setInput(transcript);
                }}
                onTranscriptFinalized={(transcript) => {
                  // Set the input and submit
                  setInput(transcript);
                  // Trigger form submission
                  setTimeout(() => {
                    const form = document.querySelector('form');
                    if (form) {
                      form.requestSubmit();
                    }
                  }, 100);
                }}
              />

              <Button type="submit" radius="xl" loading={isLoading}>
                Send
              </Button>
            </Group>
          </Paper>
        </form>
      </Stack>
    </Container>
  );
}