You are an expert AI application architect and a senior full-stack developer. Your task is to generate a comprehensive, production-ready, single-page application (SPA) code for 'Gelecek GPT: Yapay Zeka Sohbet Deneyimi' (Future GPT: AI Chat Experience). This application will allow users to interact with and explore advanced AI models, visualizing their thought processes and comparing different scenarios.
**1. PROJECT OVERVIEW:**
'Gelecek GPT' aims to demystify advanced AI models like GPT-5.4 by providing an interactive platform. Users can engage in conversations, visualize the AI's reasoning steps (simulated 'thought process'), compare responses across different prompts and model versions, and learn about AI capabilities and ethics. The core value proposition is to make cutting-edge AI accessible, understandable, and explorable, fostering AI literacy and enabling deeper user engagement with complex AI systems.
**2. TECH STACK:**
- **Frontend Framework:** React (using Vite for fast development and build)
- **Styling:** Tailwind CSS (for rapid, utility-first UI development)
- **State Management:** Zustand (for efficient global state management)
- **Routing:** React Router DOM (for navigation within the SPA)
- **API Communication:** Axios (for making requests to a hypothetical AI backend)
- **UI Components:** Radix UI (for accessible, unstyled UI primitives) and custom components
- **Animation:** Framer Motion (for smooth UI animations and interactions)
- **Utilities:** Lodash or similar for utility functions
**3. CORE FEATURES:**
- **Interactive Chat Interface:** A primary view where users can type prompts and receive AI responses. This includes a message list displaying user prompts and AI replies chronologically. A "thinking process visualization" toggle will be available.
- *User Flow:* User enters text in the input field -> Clicks 'Send' -> Input is cleared -> User prompt appears in chat -> Loading indicator shows -> AI response appears in chat -> Model's 'thought process' (if enabled) is displayed in a side panel.
- **Thought Process Visualization (Simulated):** When enabled, this feature displays a simplified, visual representation of the AI's logical steps leading to a response. This could be a tree structure, a flowchart, or a step-by-step text breakdown. This is a *simulation* based on observed AI behavior patterns or simplified models of reasoning.
- *User Flow:* User toggles "Visualize Thinking" ON -> AI response is received -> A new panel slides in or expands, showing nodes/steps with brief explanations (e.g., "Information Retrieval", "Context Analysis", "Response Generation"). Clicking on a node could reveal more detail.
- **Scenario Comparison:** Allows users to save specific prompts and their corresponding AI responses (including the visualized thought process) to compare them side-by-side.
- *User Flow:* User clicks 'Save Scenario' on a chat message -> The prompt, response, and visualization are stored -> User navigates to 'Comparison' view -> Selects 2 or more saved scenarios -> Scenarios are displayed in adjacent columns for direct comparison.
- **User Workspace/History:** A dedicated area where users can view their past conversations, saved scenarios, and manage their data.
- *User Flow:* User clicks 'History' in navigation -> Sees a list of past conversations (date, prompt snippet) -> Clicks on a conversation to load it into the chat interface -> Can delete or rename conversations.
- **Educational Content Section:** Provides articles, explainers, and FAQs about advanced AI concepts, the specific model's capabilities (GPT-5.4 hypothetical), ethical considerations, and best practices for interacting with AI.
- *User Flow:* User clicks 'Learn' in navigation -> Sees a list of articles -> Clicks an article title -> Article content is displayed.
**4. UI/UX DESIGN:**
- **Layout:** A three-column layout for larger screens: Navigation sidebar (left), Main chat area (center), Context/Visualization panel (right, collapsible/expandable). On smaller screens, the context panel collapses, and navigation becomes a bottom bar or hamburger menu.
- **Color Palette:** Modern, clean, and tech-focused. Primary: Dark grey/deep blue (#1E1E2F). Secondary: Lighter grey/blue (#3A3A50). Accent: Electric blue or teal (#00BCD4 or #4DB6AC) for interactive elements and highlights. Text: Off-white (#E0E0E0) on dark backgrounds.
- **Typography:** Sans-serif fonts like Inter or Roboto for readability. Clear hierarchy using font weights and sizes.
- **Responsive Design:** Mobile-first approach. Utilize Tailwind's responsive modifiers (sm:, md:, lg:). Ensure all interactive elements are touch-friendly. The layout should adapt gracefully to various screen sizes.
- **Interactions:** Smooth transitions for panel expansion/collapse, message appearance, and loading states. Subtle hover effects on buttons and links. Clear visual feedback for user actions.
**5. DATA MODEL:**
- **State Structure (Zustand):**
```javascript
// store.js
import { create } from 'zustand';
const useStore = create((set) => ({
// Chat state
messages: [], // [{ id: string, role: 'user' | 'ai', content: string, timestamp: number, thinkingProcess?: object | null }]
currentPrompt: '',
isLoading: false,
isThinkingVizEnabled: false,
// Scenarios state
savedScenarios: [], // [{ id: string, prompt: string, response: string, thinkingProcess?: object | null, timestamp: number }]
selectedScenariosForCompare: [], // array of scenario IDs
// User settings
theme: 'dark', // 'dark' | 'light'
// Actions
addMessage: (message) => set((state) => ({ messages: [...state.messages, message] })),
setCurrentPrompt: (prompt) => set({ currentPrompt: prompt }),
setIsLoading: (loading) => set({ isLoading: loading }),
toggleThinkingViz: () => set((state) => ({ isThinkingVizEnabled: !state.isThinkingVizEnabled })),
saveScenario: (scenario) => set((state) => ({ savedScenarios: [...state.savedScenarios, scenario] })),
// ... other actions for managing history, comparison, etc.
}));
export default useStore;
```
- **Mock Data Formats:**
- `Message`: `{ id: 'msg_123', role: 'ai', content: 'The sky is blue due to Rayleigh scattering...', timestamp: 1678886400000, thinkingProcess: { ... } }`
- `Scenario`: `{ id: 'scn_abc', prompt: 'Why is the sky blue?', response: '...', timestamp: 1678886400000, thinkingProcess: { ... } }`
- `ThinkingProcess` (Example structure - this is highly abstract/simulated):
```json
{
"steps": [
{ "id": "step1", "name": "Analyze Prompt", "details": "Identified keywords: 'sky', 'blue', 'why'. Core question: cause of sky color.", "subSteps": [] },
{ "id": "step2", "name": "Retrieve Knowledge", "details": "Accessing information on atmospheric optics and light scattering.", "subSteps": [
{ "id": "step2.1", "name": "Identify Phenomenon", "details": "Relevant phenomenon is Rayleigh scattering.", "subSteps": [] },
{ "id": "step2.2", "name": "Explain Scattering", "details": "Short wavelengths (blue, violet) scatter more than long wavelengths (red, orange) by atmospheric particles.", "subSteps": [] }
] },
{ "id": "step3", "name": "Synthesize Response", "details": "Constructing a clear explanation incorporating identified phenomenon and scattering principles.", "subSteps": [] },
{ "id": "step4", "name": "Format Output", "details": "Ensuring response is coherent and easy to understand.", "subSteps": [] }
]
}
```
**6. COMPONENT BREAKDOWN:**
- **`App.jsx`:** Main application component. Sets up routing, theme provider, and global layout.
- **`Layout.jsx`:** Wrapper component defining the overall page structure (Sidebar, Main Area, Context Panel).
- **`Sidebar.jsx`:** Contains navigation links (Chat, History, Compare, Learn), settings toggle.
- *Props:* `activeLink` (string)
- **`ChatInterface.jsx`:** Main chat area.
- *Components:* `MessageList.jsx`, `PromptInput.jsx`, `LoadingIndicator.jsx`
- **`MessageList.jsx`:** Renders the list of chat messages.
- *Props:* `messages` (array), `isThinkingVizEnabled` (boolean)
- **`MessageBubble.jsx`:** Renders a single user or AI message.
- *Props:* `message` (object)
- **`PromptInput.jsx`:** Text input area with send button.
- *Props:* `value` (string), `onChange` (function), `onSubmit` (function), `isLoading` (boolean)
- **`LoadingIndicator.jsx`:** Visual cue for AI processing.
- *Props:* None
- **`ThinkingVizPanel.jsx`:** Collapsible panel displaying the simulated thought process.
- *Props:* `thinkingProcess` (object | null), `isOpen` (boolean)
- *Components:* `VizNode.jsx` (recursive component to render tree/flowchart nodes)
- **`ScenarioComparison.jsx`:** Component for comparing saved scenarios.
- *Props:* `scenarios` (array)
- **`HistoryPanel.jsx`:** Displays user's conversation history.
- *Props:* `conversations` (array), `onSelectConversation` (function)
- **`LearnSection.jsx`:** Displays educational articles.
- *Props:* `articles` (array)
- **`ArticleViewer.jsx`:** Renders the content of a single article.
- *Props:* `article` (object)
**7. ANIMATIONS & INTERACTIONS:**
- **Message Appearance:** Use `Framer Motion`'s `AnimatePresence` and `motion.div` to animate new messages sliding or fading in.
- **Panel Transitions:** Smooth slide-in/slide-out or fade transitions for the `ThinkingVizPanel` and `Sidebar` (on mobile).
- **Loading State:** A subtle pulsing animation or a skeleton loader within the chat area while `isLoading` is true.
- **Button Hovers:** Slight scale-up or background color change on interactive elements.
- **Input Focus:** Border color change or subtle glow effect on the `PromptInput` when focused.
- **Scenario Selection:** Visual feedback (e.g., border change, checkmark) when selecting scenarios for comparison.
**8. EDGE CASES:**
- **Empty States:** Display friendly messages and guides in the chat, history, and comparison views when they are empty (e.g., "Start a conversation!", "No saved scenarios yet.").
- **Error Handling:** Gracefully handle API errors (e.g., network issues, model unavailable). Display user-friendly error messages (e.g., "Could not connect to AI. Please try again later."). Implement retry mechanisms where appropriate.
- **Input Validation:** Basic validation for the prompt input (e.g., prevent sending empty prompts, though some models might handle this). Character limits can be considered.
- **Long Responses:** Ensure proper text wrapping and scrolling for very long AI responses.
- **Accessibility (a11y):** Use semantic HTML elements. Ensure proper ARIA attributes for interactive components, especially for the visualization panel. Keyboard navigability for all interactive elements. Sufficient color contrast.
- **Model Limitations:** Clearly communicate potential limitations or biases of the AI model in the educational section and potentially via disclaimers.
- **Visualization Complexity:** If the "thought process" becomes too complex, provide options to collapse/expand sections or simplify the view.
**9. SAMPLE DATA:**
- **`messages` Array Sample:**
```json
[
{ "id": "msg_user_1", "role": "user", "content": "Explain Rayleigh scattering simply.", "timestamp": 1678886000000 },
{ "id": "msg_ai_1", "role": "ai", "content": "Imagine sunlight hitting Earth's atmosphere. Tiny air molecules scatter the light. Blue light scatters more than red light because it travels in shorter, smaller waves. So, we see the sky as blue!", "timestamp": 1678886100000, "thinkingProcess": { /* ... see Data Model section ... */ } },
{ "id": "msg_user_2", "role": "user", "content": "What about violet light? It has an even shorter wavelength.", "timestamp": 1678886200000 },
{ "id": "msg_ai_2", "role": "ai", "content": "That's a great point! Violet light *is* scattered even more than blue. However, the sun emits slightly less violet light, and our eyes are also more sensitive to blue. This combination means blue dominates our perception of the sky's color.", "timestamp": 1678886300000, "thinkingProcess": { /* ... */ } }
]
```
- **`savedScenarios` Array Sample:**
```json
[
{
"id": "scn_abc",
"prompt": "Why is the sky blue?",
"response": "The sky appears blue due to a phenomenon called Rayleigh scattering. When sunlight enters Earth's atmosphere, it collides with gas molecules. These molecules scatter shorter wavelengths of light (like blue and violet) more effectively than longer wavelengths (like red and orange). Our eyes happen to be more sensitive to blue than violet, hence the sky looks blue.",
"timestamp": 1678887000000,
"thinkingProcess": { /* ... */ }
},
{
"id": "scn_def",
"prompt": "Explain quantum entanglement.",
"response": "Quantum entanglement is a bizarre phenomenon where two or more quantum particles become linked in such a way that they share the same fate, regardless of the distance separating them. Measuring a property of one particle instantaneously influences the correlated property of the other(s). Einstein famously called it 'spooky action at a distance'.",
"timestamp": 1678887500000,
"thinkingProcess": { /* ... */ }
}
]
```
- **`articles` Array Sample:**
```json
[
{ "id": "art_1", "title": "Understanding LLMs: A Primer", "slug": "understanding-llms", "content": "Large Language Models (LLMs) are a type of artificial intelligence..." },
{ "id": "art_2", "title": "The Ethics of AI Decision Making", "slug": "ai-ethics", "content": "As AI systems become more autonomous..." }
]
```
**10. DEPLOYMENT NOTES:**
- **Build Tool:** Vite (`npm run build` or `yarn build`).
- **Output:** Generates static files in a `dist/` directory, suitable for serving from any static hosting provider (Netlify, Vercel, GitHub Pages, AWS S3).
- **Environment Variables:** Use `.env` files for managing API endpoints (e.g., `VITE_AI_API_ENDPOINT`). Ensure sensitive variables are handled securely and not exposed client-side.
- **Performance Optimizations:**
- Code splitting: Vite handles this automatically for route-based splitting if React Router is used effectively.
- Image Optimization: Use optimized image formats and lazy loading where applicable.
- Memoization: Use `React.memo` or `useMemo`/`useCallback` judiciously to prevent unnecessary re-renders, especially in high-frequency components like `MessageList`.
- Bundle Analysis: Use tools like `rollup-plugin-visualizer` (integrated with Vite) to analyze bundle size and identify potential optimizations.
- **HTTPS:** Always deploy over HTTPS.
- **CORS:** Ensure the backend AI API correctly handles Cross-Origin Resource Sharing (CORS) if the frontend and backend are on different domains.