Exploring AutoBot's Frontend: A Developer's Guide

Introduction

AutoBot presents a streamlined chat interface, featuring a two-pane layout with a conversation sidebar and an active chat panel. This simplicity hides a complex structure built from around 40 Vue single-file components, ensuring efficient and organized functionality.

Chat UI Components

The core chat flow is constructed with a hierarchy of Vue components:

• ChatView.vue
  • ChatInterface.vue
    • ChatSidebar.vue: Manages the conversation list and search function.
    • ChatHeader.vue: Includes the model selector and settings toggle.
    • ChatMessages.vue: Displays a scrolling feed of messages.
      • MessageItem.vue: Handles individual message bubbles and citations.
    • ChatInput.vue: Provides a textarea, attachments feature, and send button.
    • ChatTabs.vue: Allows switching between Chat, Browser, and Documentation views.
    • CitationsDisplay.vue: Shows inline source links.

The pivotal component, ChatTabs.vue, integrates multiple functionalities like raw conversation, embedded browsing, and documentation search within a single interface.

Knowledge Base Interface

AutoBot's Knowledge Base is a centralized hub for all your data. It is powered by the KnowledgeView.vue, which incorporates:

• KnowledgeBrowser: A file-tree explorer for documents.
• KnowledgeSearch: Offers full-text and vector search with a panel for scored results.
• KnowledgeGraph / KnowledgeGraph3D: Visualizes data connections using D3-powered graphs.
• KnowledgeUpload: Facilitates drag-and-drop document ingestion with real-time progress updates.
• KnowledgeMaintenance: Manages data deduplication and maintenance tasks.

Each component in the KnowledgeBase architecture has a specific function, ensuring streamlined development and maintenance.

Component Architecture

The autobot-frontend/ directory is organized into several key directories:

• components/: Contains feature-specific component trees.
• views/: Manages route-level pages.
• stores/: Utilizes Pinia for state management.
• composables/: Houses shared reactive logic.
• design-system/: Defines design tokens.
• router/: Configures Vue Router.
• styles/: Holds global CSS and Tailwind theme settings.

Tech Stack Overview

• Framework: Vue 3 (Composition API)
• Language: TypeScript
• Build Tool: Vite
• State Management: Pinia
• Styling: Tailwind CSS 4
• Testing: Vitest for unit tests and Cypress for end-to-end testing
• Storybook: Used for component stories and design token visualization

Design Tokens

Design tokens are centralized in src/design-system/tokens.ts, serving as the definitive source for token names. The actual values are stored in src/assets/tailwind.css.

Contributing to the UI

Setting Up the Repo

To start contributing:

git clone https://github.com/mrveiss/AutoBot-AI.git
cd AutoBot-AI/autobot-frontend
npm install
npm run dev

Use Storybook to view components in isolation:

npm run storybook

Finding Issues to Contribute

Look for "good first issue" and "frontend" labels to find manageable tasks. Common entry points include:

• Improving accessibility features.
• Addressing design token gaps.
• Enhancing Storybook coverage.
• Writing unit tests.

Testing and Quality Assurance

• Unit Tests: Use Vitest and Vue Test Utils, located in tests/ directories.
• End-to-End Tests: Run Cypress tests against the Vite dev server.
• Type Checking: Use npx vue-tsc --noEmit -p tsconfig.app.json to ensure no new type errors are introduced.

Conclusion

AutoBot's frontend reflects its core philosophy: everything is run locally, maintaining privacy and transparency. Engage with the codebase by contributing to ongoing issues or starting a new one. Explore AutoBot on GitHub to get started.