AI ChatBot for Movie Recommendations

ChatBox Component Documentation

1. Code Structure Analysis

Main File Organisation

• Core components:
• ChatBox.tsx: the main chat interface container.
• MessageList.tsx: the message list display.
• InputArea.tsx: user input area
• ScrollableArea.tsx: auto-scrollable area

• Function Provider:
• MovieSearchProvider.tsx: movie search function provider
• InitialRecommendationProvider.tsx: Initial Movie Recommendation Provider

• UI component:
• ThinkingIndicator.tsx: thinking/generating indicator
• InitialRecommendation.tsx: initial recommendation presentation component

• Support files:
• types.ts: type definitions
• index.ts: export all components
• ThinkingIndicator.module.css: style file

2. Detailed code explanation

ChatBox.tsx

• Use useChat hook to handle chat logic, connect to /api/chat API endpoint.

• Maintains isGenerating state to differentiate between loaded and generating replies.

• Use Context Providers pattern to provide movie search and initial recommendation.

• Combine MessageList, ScrollableArea and InputArea to create a complete chat experience.

MessageList.tsx

• Parse the movie search pattern in the assistant's message: [MOVIE_SEARCH:Movie name].

• Show movie card or loading status based on search status

• Show initial recommendation when there is no message

• Format message content to remove special tags

InputArea.tsx

• Use useRef and useEffect to automatically adjust the height of the input area.

• Support Enter to submit (when not using Shift+Enter).

• Show ThinkingIndicator in loaded state.

• Handles form submission and input changes

MovieSearchProvider.tsx

• Use Context Provider pattern to provide movie search results and loading status.

• Use regular expression to extract movie search request from helper messages.

• Get movie data through API calls

• Maintain search result cache and load state

InitialRecommendationProvider.tsx

• Call getTopRatedMovies() to get the top movies.

• Random shuffle algorithm to select 5 movies as recommendation

• Show initial recommendation only when there is no message

• Use Context Provider pattern to provide recommendation data and loading status.

ScrollableArea.tsx

• Wrapping the ScrollArea component

• Use useRef and useEffect to track content changes.

• Use DOM manipulation to find the scroll viewport and automatically scroll to the bottom.

InitialRecommendation.tsx

• Receive an array of movie data and display it as a list of cards.

• Format the movie overview and limit the length

• Use MovieHorizontalCard component to display movie information.

ThinkingIndicator.tsx and ThinkingIndicator.module.css

• Use CSS animation to create points for pulse effects

• Display different text based on the isGenerating property

• Isolates styles using CSS Modules

types.ts

ChatBox Technical Documentation

Overview: ChatBox is a React and TypeScript based chat interface component.

Technology Stack

• React

• TypeScript

• Next.js (inferred from import path)

• AI/React library (for chat functionality)

• Radix UI (for ScrollArea and other UI components)

Key Features

1. AI chat interface: users can type messages and receive AI replies

2. Movie search and display: the AI assistant can search for movies and display the details

3. Initial movie recommendations: Top movie recommendations are displayed before the conversation starts

4. Responsive input area: automatically adjusts height based on content

5. Auto-scroll: automatically scrolls to the bottom when a new message appears

Component Architecture

Core Components

1. ChatBox: main container, managing overall chat state and UI layout.

2. MessageList: display chat messages and movie cards.

3. InputArea: handle user input and submission

4. MovieSearchProvider: Handles movie search logic and API calls.

5. InitialRecommendationProvider: manages initial movie recommendation.

6. ScrollableArea: Provide auto-scrolling function.

Data Flow

1. User enters a message in the InputArea

2. Messages are sent to the API via the useChat hook

3. AI replies contain special [MOVIE_SEARCH:MovieName] tags

4. MovieSearchProvider detects these tags and fetches movie data.

5. MessageList displays formatted message and movie cards

6. ScrollableArea ensures new messages are visible

API Integration

• /api/chat: handling chat messages

• /api/movie-search: search for movie information

• TMDB API: get top rated movies via getTopRatedMovies()

Key Interaction Modes

1. Initial loading: display initial movie recommendations

2. Chat interaction: user sends message, receives AI reply

3. Movie search: AI reply contains movie search, automatically get and display movie cards.

4. Load status: display "thinking" or "generating" animation

Extension Points

1. More movie-related features can be added, such as actor information or similar movies.

2. Movie cards could be enhanced to support more interactions, such as favoriting or sharing.

3. Message formatting could be improved to support richer content types.

Usage Guidelines