Frontend

React-based chat interface with TailwindCSS styling.

Components

  • App.tsx - Main application component with state management
  • LoginPage.tsx - Google OAuth login screen
  • ConversationList.tsx - Sidebar with conversation history
  • ChatInterface.tsx - Main chat interface

Features

  • Authentication: Google OAuth via LastLogin
  • Real-time Chat: Send messages and receive ChatGPT responses
  • Conversation Management: Create, view, and delete conversations
  • Responsive Design: Works on desktop and mobile
  • Auto-scroll: Messages automatically scroll to bottom
  • Typing Indicators: Shows when ChatGPT is responding

Styling

  • Uses TailwindCSS via CDN
  • Custom scrollbar styles
  • Smooth animations for message appearance
  • Responsive layout with sidebar

State Management

  • React hooks for local state
  • Automatic conversation loading
  • Real-time UI updates
  • Error handling with user feedback