You are an expert AI consultant, application idea analyst, and senior full-stack developer. Your task is to generate a comprehensive AI Master Prompt for creating a single-page Software as a Service (SaaS) application. This application, named 'Context Genius: Long Conversation Manager', is designed to help users manage and analyze the vast context windows offered by advanced AI models like Claude Opus 4.6 and Sonnet 4.6.
**1. PROJECT OVERVIEW:**
Project Name: Context Genius: Long Conversation Manager
Objective: To provide a seamless and efficient platform for users to upload, interact with, and derive insights from large volumes of text data processed by AI models with extensive context windows (e.g., 1 million tokens). The application addresses the challenge of managing and leveraging massive amounts of information within a single AI session, making it easier to ask complex questions, retrieve specific information, generate summaries, and identify relationships within long conversations or documents.
Value Proposition: Empower users to unlock the full potential of large context AI models by simplifying the ingestion, querying, and analysis of extensive text data. Save time, enhance understanding, and gain deeper insights from your conversations and documents without the complexity of manual data management or the limitations of smaller context windows.
**2. TECH STACK:**
- **Frontend Framework:** React.js (using Vite for fast development environment)
- **Styling:** Tailwind CSS for utility-first styling and rapid UI development.
- **State Management:** Zustand for efficient and simple global state management.
- **Routing:** React Router DOM for navigation within the single-page application.
- **UI Components:** Headless UI for accessible and unstyled components.
- **API Interaction:** Axios for making HTTP requests to a backend (or mock API for MVP).
- **Code Editor/Highlighter (Optional for complex input):** Prism.js or similar for code snippets if applicable.
- **File Upload:** Standard HTML file input and potentially a library like React Dropzone for a better UX.
- **Icons:** React Icons.
**3. CORE FEATURES & USER FLOW:**
* **A. Document/Conversation Upload:**
* **User Flow:** User navigates to the 'Upload' section. They can either paste text directly into a large textarea, upload files (txt, pdf, docx - initial MVP might focus on txt and pasted text), or potentially connect to an API if future integrations are planned. Upon upload/paste, the content is processed and stored (initially in local state/storage, later a backend).
* **Details:** A clear visual indicator shows the amount of context being used (e.g., token count). Progress indicators for file uploads. Clear error handling for unsupported file types or excessively large files exceeding a safe limit for the initial load.
* **B. Contextual Querying:**
* **User Flow:** After uploading content, the user sees a dedicated query interface. They type a natural language question into an input field and submit. The application sends the query along with the context (or a relevant chunk of it, depending on implementation strategy) to the AI model (simulated or real API call). The response is displayed clearly below the query input.
* **Details:** Input field with a character/token limit indicator. Display area for conversation history (queries and responses). Option to 'clear context' or 'start new session'.
* **C. Automatic Summarization:**
* **User Flow:** User can trigger a summarization request for the entire loaded context. They might have options for summary length (e.g., 'brief', 'detailed', 'key points'). The application sends a summarization prompt to the AI model. The generated summary is displayed prominently.
* **Details:** A dedicated button/section for summarization. Options for summary style. Display of the generated summary, potentially with a 'copy to clipboard' button.
* **D. Insight Generation (Key Concepts & Relationships):**
* **User Flow:** User can request insights based on the loaded context. This could involve asking the AI to identify key themes, entities, relationships, or sentiment. The results are presented in a structured format (e.g., bullet points, mind map visualization if advanced).
* **Details:** A specific 'Generate Insights' button. Potential sub-options for the type of insights desired. Display of structured insights.
* **E. History & Search:**
* **User Flow:** Users can view a history of their uploaded documents/conversations, past queries, and generated summaries/insights. A search bar allows them to quickly find previous interactions.
* **Details:** A dedicated 'History' page or sidebar. Each history item is clickable, allowing the user to reload that context and interaction set. Search functionality filters history items.
**4. UI/UX DESIGN:**
- **Layout:** Single Page Application (SPA) with a clean, intuitive layout. A persistent sidebar could house navigation (Upload, Query, History) and potentially context management controls. The main area displays the primary interaction (uploading, querying, viewing results).
- **Color Palette:** Modern and clean. Primary colors: shades of blue and grey for a professional, tech-focused feel. Accent color (e.g., a vibrant green or teal) for interactive elements and calls to action. Use of dark mode option.
- **Typography:** Sans-serif fonts like Inter or Poppins for readability. Clear hierarchy using font sizes and weights. Body text: 16px. Headings: 24px, 32px, 40px.
- **Responsive Design:** Mobile-first approach. Layout should adapt seamlessly to different screen sizes (mobile, tablet, desktop). Sidebar might collapse into a hamburger menu on smaller screens. Ensure all interactive elements are easily tappable.
- **Component Hierarchy:**
- `App.js` (Main component, routing)
- `Layout.js` (Sidebar, header, main content area)
- `UploadSection.js` (File upload, text paste area)
- `QuerySection.js` (Query input, history display, AI response area)
- `SummarizationSection.js` (Summarize button, options, results display)
- `InsightsSection.js` (Insights request, results display)
- `HistorySidebar.js` (List of past sessions/uploads)
- `ChatBubble.js` (Component for displaying user queries and AI responses)
- `Button.js`, `Input.js`, `Textarea.js`, `Modal.js` (Reusable UI components).
**5. DATA MODEL & STATE MANAGEMENT:**
- **State Structure (Zustand Store):**
```javascript
{
currentContext: {
text: '', // The loaded text content
tokens: 0, // Estimated token count
source: 'paste' | 'file' | null // Where the context came from
},
sessionHistory: [], // Array of past sessions [{ id: string, timestamp: Date, contextSummary: string, queries: Array, summaries: Array, insights: Array }]
currentInteraction: {
queries: [], // Array of { query: string, response: string } for the current session
summary: string | null,
insights: any | null
},
isLoading: boolean,
error: string | null,
// UI states like darkMode: boolean
}
```
- **Local Storage:** Persist `sessionHistory` and `currentContext` to `localStorage` for session persistence and MVP functionality.
- **Mock API/Backend Structure (if applicable):**
- `POST /upload`: Accepts text or file, returns initial context analysis (e.g., token count).
- `POST /query`: Accepts user query and current context ID, returns AI response.
- `POST /summarize`: Accepts context ID, returns summary.
- `POST /insights`: Accepts context ID, returns insights.
**6. COMPONENT BREAKDOWN:**
* **`App.js`:**
* Props: None.
* Responsibilities: Sets up routing, initializes Zustand store, renders main `Layout` component.
* **`Layout.js`:**
* Props: `children`.
* Responsibilities: Renders the overall page structure (sidebar, main content area). Manages sidebar visibility.
* **`Sidebar.js`:**
* Props: `sessions`, `onSelectSession`, `onCreateNewSession`.
* Responsibilities: Displays navigation links and the list of past sessions. Handles creation of new sessions.
* **`UploadComponent.js`:**
* Props: `onContentLoad` (callback function).
* Responsibilities: Provides UI for pasting text or uploading files. Calculates token approximation. Calls `onContentLoad` with the processed text and metadata.
* **`QueryComponent.js`:**
* Props: `context`, `onSubmitQuery` (callback function).
* Responsibilities: Renders the query input field and the display area for the current conversation history (queries/responses). Handles query submission.
* **`ResponseDisplay.js`:**
* Props: `query`, `response`, `isLoading`.
* Responsibilities: Renders a single user query and its AI-generated response in a chat-like format.
* **`ActionButtons.js`:**
* Props: `onSummarize`, `onGenerateInsights`, `isProcessing`.
* Responsibilities: Contains buttons for triggering summarization and insight generation.
* **`ChatBubble.js`:**
* Props: `text`, `sender` ('user' | 'ai'), `isThinking`.
* Responsibilities: Renders a single message bubble with appropriate styling for user vs. AI.
**7. ANIMATIONS & INTERACTIONS:**
- **Loading States:** Use subtle spinners or pulsating animations within buttons and response areas when the AI is processing. A global loading overlay for longer operations.
- **Transitions:** Smooth transitions for sidebar opening/closing, content appearance/disappearance, and potentially for message bubbles appearing in the chat.
- **Hover Effects:** Subtle background color changes or slight scaling on interactive elements like buttons and session list items.
- **Micro-interactions:** Button press feedback, successful upload/send confirmation animations.
- **Text Input:** Gentle animation on focus for input fields.
**8. EDGE CASES:**
- **Empty State:** Display clear messages and visual cues when no context is loaded, no queries have been made, or history is empty. Guide the user on what to do next.
- **Error Handling:** Gracefully handle API errors, network issues, file upload failures, and unsupported content types. Display user-friendly error messages and suggest actions.
- **Validation:** Validate user inputs (e.g., prevent empty queries). Implement checks for file sizes and types during upload.
- **Large Context Management:** If directly handling 1M tokens client-side becomes problematic, implement strategies like:
- *Chunking:* Send context in manageable chunks to the AI.
- *Summarization Prompts:* Ask the AI to summarize parts of the context first.
- *Vector Databases (Future):* For more advanced retrieval.
- **Accessibility (a11y):** Ensure proper ARIA attributes, keyboard navigation, sufficient color contrast, and semantic HTML structure. Use focus management for modals and interactive elements.
**9. SAMPLE DATA (Mock):**
* **`sessionHistory` item:**
```json
{
"id": "sess_abc123",
"timestamp": "2024-03-15T10:30:00Z",
"contextSummary": "Meeting notes from Project Alpha kick-off.",
"queries": [
{ "query": "What were the main action items?", "response": "The main action items were to finalize the project scope document and set up the repository."},
{ "query": "Who is responsible for the scope document?", "response": "Sarah is responsible for the project scope document."}
],
"summary": "Project Alpha kick-off meeting focused on finalizing scope and setting up the repository. Sarah is assigned the scope document.",
"insights": {"key_themes": ["Project Scope", "Repository Setup", "Team Roles"], "sentiment": "positive"}
}
```
* **`currentInteraction.queries` item:**
```json
{
"query": "What is the significance of the 1M context window announcement?",
"response": "The announcement signifies that models like Opus 4.6 and Sonnet 4.6 can now process up to 1 million tokens of input at standard pricing, removing the previous long-context premium and increasing media limits significantly. This allows for deeper analysis of larger datasets and longer conversations."
}
```
* **`currentContext` object:**
```json
{
"text": "The following are minutes from the Q1 planning meeting... (truncated for brevity, would be ~1M tokens in reality)",
"tokens": 950000,
"source": "file"
}
```
**10. DEPLOYMENT NOTES:**
- **Build Tool:** Vite is recommended for its speed and modern development experience. Use `npm run build` or `yarn build`.
- **Environment Variables:** Use `.env` files for managing API keys (if using real AI APIs), base URLs, and other configurations. Prefix variables with `VITE_` for Vite.
- **Performance Optimizations:**
- Code Splitting: Vite handles this automatically to some extent. Lazy load components that are not immediately needed.
- Memoization: Use `React.memo` and `useMemo`/`useCallback` judiciously to prevent unnecessary re-renders.
- Image Optimization: If images are used in the UI, ensure they are properly sized and formatted.
- State Management Efficiency: Avoid deeply nested state updates. Use selectors effectively with Zustand.
- **Hosting:** Platforms like Vercel, Netlify, or AWS Amplify are suitable for deploying React SPAs.
- **Error Tracking:** Integrate a service like Sentry or LogRocket for monitoring production errors.
- **Testing:** Implement unit and integration tests using Jest and React Testing Library.