AI Assistant
Relevant source files
The following files were used as context for generating this wiki page:
The AI Assistant is an interactive feature designed to help users with fashion design tasks. It provides a dual-mode interface: a conversational chat for getting advice and generating ideas, and a feature discovery view that showcases the application's AI-powered capabilities. The entire feature is controlled by a feature flag and is intended to include premium functionalities, such as "AI Suggestions," which require an API key.
Users can access the AI Assistant directly from the home screen. The current implementation uses mock data and simulated AI responses, serving as a foundation for future integration with a real AI backend service.
Sources: src/screens/AIAssistantScreen.js, src/features/home/screens/HomeScreen.js:310-315, TASK_4_SUMMARY.md, src/config/constants.js:203-209
Architecture and Core Concepts
The AIAssistantScreen is built around a central state variable, selectedMode, which toggles the view between two distinct functionalities: 'chat' and 'features'.
Sources: src/screens/AIAssistantScreen.js:250
This diagram illustrates the main components that constitute the AI Assistant screen.
Sources: src/screens/AIAssistantScreen.js
State Management
The component's behavior is managed by several local state variables using React's useState hook.
| State Variable | Type | Description |
|---|---|---|
messages | Array | Stores the history of chat messages between the user and the AI. |
inputText | String | Holds the current text in the message input field. |
isTyping | Boolean | Controls the visibility of the AI typing indicator. |
showFeatures | Boolean | Toggles the visibility of the quick action cards in chat mode. |
selectedMode | String | Determines which mode is active: 'chat' or 'features'. Default is 'chat'. |
apiKey | String | Stores the user's API key for advanced AI features. |
showApiKeyModal | Boolean | Controls the visibility of the API key entry modal. |
Sources: src/screens/AIAssistantScreen.js:246-253
User Interface & Components
The UI is split into two main views, controlled by a mode selector.
Mode Selector
A persistent header allows the user to switch between 'Chat' and 'Features' modes. It also contains a settings icon to open the API Key modal.
Sources: src/screens/AIAssistantScreen.js:522-548
Chat Mode
This is the default view, providing a conversational interface. It is rendered by the renderChatMode function.
- Message List: A scrollable view that displays
MessageBubblecomponents for each message in themessagesstate. - Quick Actions: A horizontal
ScrollViewofQuickActionCardcomponents, visible only at the start of a conversation. These cards provide prompts for common queries. - Input Bar: A text input field for users to type messages, an attachment button (currently non-functional), and a send button.
Sources: src/screens/AIAssistantScreen.js:446-488
MessageBubble Component
This component renders individual chat messages. It visually distinguishes between user messages (right-aligned, primary color) and AI messages (left-aligned, with a robot avatar). It also includes slide-in and fade-in animations on render.
Sources: src/screens/AIAssistantScreen.js:22-79
Features Mode
This view, rendered by renderFeaturesMode, showcases a list of available AI-powered tools using expandable AIFeatureCard components. Each card displays a title, subtitle, description, and a "Try Now" button.
Sources: src/screens/AIAssistantScreen.js:490-506
AIFeatureCard Component
An expandable card that provides more details about a specific AI feature when tapped. The "Try Now" button navigates the user to the Studio screen, passing the selected feature's data.
Sources: src/screens/AIAssistantScreen.js:170-221, src/screens/AIAssistantScreen.js:442-444
Data Flow and Logic
The core logic revolves around message handling in chat mode and navigation from the features mode.
Sending a Message
The sendMessage function orchestrates the chat flow. It is an async function that currently simulates an AI response with a 2-second delay.
This sequence diagram shows the flow when a user sends a message.
Mock AI Response Logic
The generateAIResponse function contains placeholder logic that checks for keywords in the user's input to return a canned response. This serves as a mock for a real AI service.
// src/screens/AIAssistantScreen.js:382-402
const generateAIResponse = (input) => {
const lowerInput = input.toLowerCase();
if (lowerInput.includes('dress')) {
return 'For a stunning dress design, I suggest...';
} else if (lowerInput.includes('color')) {
return 'Based on current trends, here are some amazing color combinations...';
} else if (lowerInput.includes('trend')) {
return 'Top Fashion Trends for 2024...';
} else {
return 'That\'s an interesting concept! Let me help you develop it further...';
}
};
Sources: src/screens/AIAssistantScreen.js:382-402
Configuration and Settings
The AI Assistant's behavior and data are defined in several places.
Feature Flag
The visibility and availability of the AI Assistant feature are controlled by a boolean flag in the application's constants.
src/config/constants.js:ENABLE_AI_ASSISTANT: truesrc/core/config/features.config.js: The feature flag system is defined here, controlling AI features among others.
Sources: src/config/constants.js:205, src/core/config/features.config.js:46-49
API Key Management
The screen includes a modal for users to enter an API key for "advanced AI features." The UI for this is complete, but the logic to save and use the key is a placeholder. This aligns with the plan to offer "AI Suggestions" as a premium feature.
Sources: src/screens/AIAssistantScreen.js:252-253, src/screens/AIAssistantScreen.js:596-641, TASK_4_SUMMARY.md
AI Features Data
The aiFeatures array defines the content for the AIFeatureCard components in the 'Features' mode.
| Title | Subtitle | Icon | Description |
|---|---|---|---|
| Design Generator | Text to Design | creation | Describe your vision and watch it come to life with AI-powered design generation. |
| Style Analyzer | Upload & Analyze | image-search | Upload any fashion image and get detailed analysis of style, colors, and patterns. |
| Trend Predictor | Future Fashion | chart-line | AI predicts upcoming fashion trends based on current data and historical patterns. |
| Virtual Stylist | Personal Assistant | human-female-dance | Get personalized styling advice based on your body type, preferences, and occasions. |
| Material Suggester | Fabric & Texture | texture | AI recommends the best materials and textures for your design concepts. |
| Pattern Mixer | Creative Combinations | dots-grid | Intelligently mix and match patterns to create unique design combinations. |
Sources: src/screens/AIAssistantScreen.js:290-355
Quick Actions Data
The quickActions array provides the data for the initial suggestion chips in the chat view.
| Title | Description | Icon | Action Triggered |
|---|---|---|---|
| Generate Design | Create from description | magic-staff | Sends "I want to generate a new design" |
| Color Palette | Get color suggestions | palette | Sends "Suggest a color palette for my design" |
| Trend Analysis | Latest fashion trends | trending-up | Sends "What are the latest fashion trends?" |
| Style Ideas | Get inspiration | lightbulb | Sends "Give me some style inspiration" |
Sources: src/screens/AIAssistantScreen.js:256-288, src/screens/AIAssistantScreen.js:404-423
Conclusion
The AI Assistant screen is a well-structured feature that serves as both a functional chat interface and a discovery platform for the app's AI capabilities. While the current implementation relies on mock data and simulated responses, it establishes a solid architectural foundation. The inclusion of an API key modal and the definition of premium features indicate a clear path toward future integration with a live AI backend, enabling advanced, potentially monetized, functionality.