Skip to content

ChatbotSidebar Component

The ChatbotSidebar component provides a complete interface for interacting with the BidScript AI chatbot, managing conversations, and uploading documents for analysis.

Overview

The ChatbotSidebar is a sophisticated chat interface that allows users to engage with the BidScript AI, view conversation history, and upload documents for context. It features animations, conversation persistence, document uploads, and model selection capabilities.

Features

  • Real-time chat interface with animated message delivery
  • Conversation history management
  • Document upload and attachment functionality
  • AI model preference selection
  • Conversation export functionality
  • Mobile-responsive design with sidebar toggle

State Management

The component uses several state variables:

  • messages: Array of chat messages with text, sender info, and timestamps
  • inputValue: Current text input value
  • visibleMessage: Used for typing animation effects
  • uploadedFiles: List of documents attached to the conversation
  • isProcessing: Loading state for message processing
  • conversations: List of past conversations
  • currentConversationId: ID of the active conversation
  • isHistorySidebarOpen: Toggle for conversation history sidebar
  • selectedModelDeployment: Currently selected AI model

Key Methods

Method Description
handleSendMessage Processes and sends user messages to the API
handleFileUpload Processes file uploads and attaches them to the conversation
createNewConversation Initiates a new conversation thread
loadConversation Loads a specific conversation by ID
fetchConversations Retrieves the user's conversation history
scrollToBottom Ensures the chat view scrolls to the latest message
exportConversation Exports the current conversation to a text file
deleteConversation Removes a conversation from history

Components Used

Component Purpose
Button Interactive elements for actions
Textarea User input field for messages
ScrollArea Scrollable container for messages
DropdownMenu Model selection and actions menu
Various Lucide icons Visual indicators for different actions

API Routes Used

Route Purpose
/app/api/user/getModelPreference Retrieves user's preferred AI model
/app/api/chat/sendMessage Sends messages to the AI
/app/api/chat/conversations Manages conversation history
/app/api/upload Handles document uploads

Props

The component does not accept any props as it is a self-contained chatbot interface.

Dependencies

  • framer-motion: For smooth animations
  • lucide-react: Icon library
  • next-auth/react: For session management
  • @/components/ui/*: Various UI components
  • @/lib/apiClient: API client for backend communication
  • axios: For HTTP requests

Notes

  • The component features a sophisticated design with animation effects for message typing
  • Messages are stored with timestamps and sender information
  • The sidebar can be toggled for mobile responsiveness
  • Users can upload documents in various formats (PDF, Word, Excel, PowerPoint, images)
  • Conversation history is persisted and can be accessed later
  • The component allows users to select different AI models for their conversations