Skip to main content

Frontend Architecture

Core Pages and Functionalities​

  • Home Page: This serves as the landing page for users, often including an overview of Ayushma's capabilities, key features, and options to either register or log in.
  • Authentication (Login, Registration, Password Reset): Provides functionalities for user registration, login, and password reset, ensuring secure access to the platform.
  • Chat Interface: The central hub for user interactions with the AI assistant. It includes components like:
    • Chat Input: Where users can type or speak their queries.
    • Conversation History: Displays the ongoing conversation between the user and Ayushma, with clear distinction between user messages, AI responses, and system messages.
    • Chat Sidebar: Houses options for starting new chats, searching past conversations, and accessing settings.
    • Language Selection: Allows users to choose the language for input and output on a per-chat basis.
    • Audio Controls: Provides options to play, pause, or stop audio output for AI responses, as well as manage autoplay settings.
  • Project Management:
    • Project List: Displays available projects that users can access based on their permissions.
    • Project Details: Provides an overview of a specific project, including its title, description, associated documents, prompt (if applicable), and preset questions.
    • Document Viewer: Allows users to view the content of reference documents linked to projects.
  • Admin Panel: (Accessible only to users with admin privileges)
    • Project Administration: Enables admins to create, edit, and manage projects, configure AI settings, and handle document uploading and organization.
    • User Management: Provides tools to oversee user accounts, assign roles and permissions, and control access to the platform.
    • Test Suite Management: Allows admins to create and manage test suites for evaluating the AI assistant's performance.
    • Test Run Management: Enables admins to view and analyze the results of test runs, providing insights into the AI's strengths and weaknesses and guiding further improvements.

Frontend Technologies and Libraries​

  • Next.js: The core framework for building the frontend, providing server-side rendering, static site generation, and efficient routing capabilities.
  • React: The underlying JavaScript library for building user interfaces and managing component states.
  • Jotai: A state management library that simplifies state management and data flow across components.
  • Tailwind CSS: A utility-first CSS framework that streamlines styling and ensures a consistent design language throughout the application.
  • Tanstack React Query: Optimizes data fetching and caching, improving the performance and responsiveness of the application, particularly when dealing with large datasets or frequent API interactions.
  • Additional Libraries: Ayushma may incorporate various other libraries for specific functionalities, such as audio recording, charting, PDF generation, and accessibility enhancements.

Design Considerations and Trade-offs​

  • Modularity and Reusability: The frontend architecture emphasizes modularity, breaking down functionalities into reusable components. This promotes maintainability, code organization, and efficient development.
  • Performance Optimization: Techniques like server-side rendering, static site generation, and data caching are employed to ensure fast loading times and a responsive user experience.
  • Accessibility: The frontend design should prioritize accessibility, following best practices to ensure the application is usable by individuals with disabilities.
  • Scalability: The architecture should be scalable to accommodate future growth, such as the addition of new features, support for more languages, and increased user traffic.
  • Maintainability: The codebase should be well-organized, documented, and easy to maintain, enabling ongoing development and updates.

Component Structure​

The frontend is composed of various components, including:

  • Layout Components: Define the overall structure and layout of the application, including headers, sidebars, and content areas.
  • UI Components: Reusable UI elements such as buttons, inputs, and modals, providing a consistent look and feel throughout the application.
  • Page Components: Represent individual pages or sections of the application, such as the chat interface, project management pages, and admin dashboards.
  • Data Fetching Components: Responsible for retrieving data from the backend API using libraries like Tanstack React Query.
  • State Management: Jotai manages the application state and ensures data consistency across different components.