import React, { useState } from 'react';

import { Plus, Search, Library, Share2, Menu, X, Code2, Settings, LogOut, Home, FolderOpen, MessageSquare, Send, ChevronRight, Star, Clock, Zap, Copy, Download, Eye } from 'lucide-react';

export default function EspaceCodage() {
const [sidebarOpen, setSidebarOpen] = useState(true);
const [currentView, setCurrentView] = useState('home');
const [userInput, setUserInput] = useState('');
const [chatActive, setChatActive] = useState(false);
const [messages, setMessages] = useState([]);
const [generatedCode, setGeneratedCode] = useState(null);
const [selectedProject, setSelectedProject] = useState(null);
const [projects, setProjects] = useState([
{ id: 1, name: 'Portfolio Pro', status: 'active', timestamp: '2 jours', code: '' },
{ id: 2, name: 'E-shop Mode', status: 'active', timestamp: '5 jours', code: '' },
{ id: 3, name: 'App SaaS', status: 'archived', timestamp: '10 jours', code: '' }
]);

// Rosalinda - IA intelligente pour générer du code
const rosalinda = async (userText) => {
try {
// Appel à l'API Claude pour générer du code complet
const response = await fetch("https://api.anthropic.com/v1/messages", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
model: "claude-sonnet-4-20250514",
max_tokens: 2000,
system: `Tu es Rosalinda, une IA senior full-stack spécialisée dans la génération de code complet et professionnel.

Tu dois :
1. Comprendre exactement ce que l'utilisateur demande
2. Générer du code HTML/CSS/JavaScript complet et fonctionnel
3. Générer du code React moderne si demandé
4. Expliquer ton code clairement en français

Format de réponse :
- D'abord une explication courte
- Ensuite le code complet dans un bloc \`\`\`language
- Toujours du code prêt à l'emploi, sans placeholders

Sois créatif, professionnel et produis du vrai code !`,
messages: [
{ role: "user", content: userText }
],
})
});

const data = await response.json();
return data.content[0]?.text || "Erreur de génération";
} catch (error) {
return `Je vais générer du code pour: ${userText}. Voici une solution professionnelle !`;
}
};

const handleUserMessage = async (text) => {
if (!text.trim()) return;

// Ajouter le message de l'utilisateur
const newMessages = [...messages, {
id: Date.now(),
user: 'Vous',
type: 'user',
text: text,
time: new Date().toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })
}];
setMessages(newMessages);

// Rosalinda génère une réponse intelligente
let rosalindaResponse = '';

// Appel à Rosalinda pour générer du code ou répondre
if (text.toLowerCase().includes('site') ||
text.toLowerCase().includes('code') ||
text.toLowerCase().includes('html') ||
text.toLowerCase().includes('app') ||
text.toLowerCase().includes('portfolio') ||
text.toLowerCase().includes('e-shop') ||
text.toLowerCase().includes('landing')) {

rosalindaResponse = await rosalinda(text);

// Extraire le code généré si présent
const codeMatch = rosalindaResponse.match(/```(?:html|jsx?|css|javascript)?\n([\s\S]*?)```/);
if (codeMatch) {
setGeneratedCode({
language: text.includes('react') ? 'jsx' : 'html',
code: codeMatch[1],
description: text
});
}
} else {
// Réponse standard si pas de demande de code
rosalindaResponse = await rosalinda(`Réponds brièvement (2-3 phrases max) en français à: ${text}`);
}

// Ajouter la réponse de Rosalinda
setTimeout(() => {
setMessages(prev => [...prev, {
id: Date.now() + 1,
user: 'Rosalinda',
type: 'assistant',
text: rosalindaResponse,
time: new Date().toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })
}]);
}, 500);

setUserInput('');
};

const copyCode = (code) => {
navigator.clipboard.writeText(code);
alert('Code copié ! ✓');
};

const downloadCode = (code, filename = 'code.html') => {
const element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(code));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
};

const saveProjectCode = () => {
if (generatedCode && selectedProject) {
const updatedProjects = projects.map(p =>
p.id === selectedProject
? { ...p, code: generatedCode.code }
: p
);
setProjects(updatedProjects);
alert('Projet sauvegardé ! ✓');
}
};

return (
<div className="flex h-screen bg-gray-50">
{/* Sidebar */}
<div className={`${sidebarOpen ? 'w-72' : 'w-20'} bg-white border-r border-gray-200 transition-all duration-300 flex flex-col`}>
{/* Logo */}
<div className="p-6 flex items-center justify-between border-b border-gray-200">
{sidebarOpen && (
<div className="flex items-center space-x-3">
<div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center text-white font-bold text-lg">
EC
</div>
<div>
<h1 className="font-bold text-gray-900">Espace Codage</h1>
<p className="text-xs text-gray-500">Workspace Rosalinda</p>
</div>
</div>
)}
<button
onClick={() => setSidebarOpen(!sidebarOpen)}
className="p-2 hover:bg-gray-100 rounded-lg transition"
>
{sidebarOpen ? <X size={20} /> : <Menu size={20} />}
</button>
</div>

{/* New Task */}
{sidebarOpen && (
<div className="p-4 border-b border-gray-200">
<button className="w-full flex items-center justify-center space-x-2 bg-gray-900 text-white py-3 rounded-lg hover:bg-gray-800 transition font-semibold">
<Plus size={20} />
<span>Nouvelle tâche</span>
</button>
</div>
)}

{/* Search */}
{sidebarOpen && (
<div className="p-4 border-b border-gray-200">
<div className="relative">
<Search size={18} className="absolute left-3 top-3 text-gray-400" />
<input
type="text"
placeholder="Rechercher..."
className="w-full pl-10 pr-4 py-2 bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
/>
</div>
</div>
)}

{/* Navigation */}
<nav className="flex-1 p-4 space-y-2">
{[
{ id: 'home', icon: Home, label: 'Accueil' },
{ id: 'chat', icon: MessageSquare, label: 'Chat Rosalinda' },
{ id: 'projects', icon: FolderOpen, label: 'Mes Projets' },
{ id: 'code', icon: Code2, label: 'Code Généré' },
{ id: 'library', icon: Library, label: 'Bibliothèque' }
].map(item => (
<button
key={item.id}
onClick={() => {
setCurrentView(item.id);
if (item.id === 'chat') setChatActive(true);
}}
className={`w-full flex items-center space-x-3 p-3 rounded-lg transition ${
currentView === item.id
? 'bg-blue-100 text-blue-900'
: 'text-gray-600 hover:bg-gray-50'
}`}
>
<item.icon size={20} />
{sidebarOpen && <span>{item.label}</span>}
</button>
))}
</nav>

{/* Projects */}
{sidebarOpen && (
<div className="p-4 border-t border-gray-200">
<h3 className="font-semibold text-gray-900 mb-3 text-sm">Vos Projets</h3>
<div className="space-y-2">
{projects.map(project => (
<button
key={project.id}
onClick={() => setSelectedProject(project.id)}
className={`w-full text-left p-3 rounded-lg transition text-sm ${
selectedProject === project.id
? 'bg-green-100 border-l-4 border-green-500'
: 'hover:bg-gray-50'
}`}
>
<div className="flex items-center space-x-2">
<div className={`w-2 h-2 rounded-full ${project.status === 'active' ? 'bg-green-500' : 'bg-gray-300'}`}></div>
<span className="font-medium">{project.name}</span>
</div>
<p className="text-xs text-gray-500 mt-1">{project.timestamp}</p>
</button>
))}
</div>
</div>
)}

{/* Footer */}
{sidebarOpen && (
<div className="p-4 border-t border-gray-200 space-y-2">
<button className="w-full flex items-center space-x-3 p-3 text-gray-600 hover:bg-gray-50 rounded-lg transition text-sm">
<Settings size={18} />
<span>Paramètres</span>
</button>
<button className="w-full flex items-center space-x-3 p-3 text-gray-600 hover:bg-gray-50 rounded-lg transition text-sm">
<LogOut size={18} />
<span>Déconnexion</span>
</button>
</div>
)}
</div>

{/* Main Content */}
<div className="flex-1 flex flex-col">
{/* Header */}
<div className="bg-white border-b border-gray-200 p-6 sticky top-0 z-10">
<div className="flevoilà je voudrais déjà vous intégrer toutes les côtes dedans soit propre et professionnel je voudrais la première interface comme celui que je vous ai prouvé sur la capture d'écra

README.md

@@ -1,10 +1,13 @@
 ---
-title: Codegenius Rosalinda Ai Coding Assistant
-emoji: 📉
-colorFrom: gray
-colorTo: purple
+title: CodeGenius Rosalinda - AI Coding Assistant 🚀
+colorFrom: purple
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/chat.js

@@ -0,0 +1,311 @@
+class ChatComponent extends HTMLElement {
+    constructor() {
+        super();
+        this.messages = [];
+    }
+
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.render();
+        this.setupEventListeners();
+    }
+
+    render() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    height: 100%;
+                }
+
+                .chat-container {
+                    display: flex;
+                    flex-direction: column;
+                    height: 100%;
+                    max-width: 800px;
+                    margin: 0 auto;
+                }
+
+                .chat-header {
+                    display: flex;
+                    align-items: center;
+                    gap: 1rem;
+                    margin-bottom: 1.5rem;
+                }
+
+                .chat-avatar {
+                    width: 3rem;
+                    height: 3rem;
+                    border-radius: 50%;
+                    background: linear-gradient(135deg, #8b5cf6, #ec4899);
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: white;
+                    font-weight: bold;
+                    font-size: 1.25rem;
+                }
+
+                .chat-title {
+                    font-size: 1.5rem;
+                    font-weight: 600;
+                    color: #111827;
+                }
+
+                .chat-subtitle {
+                    font-size: 0.875rem;
+                    color: #6b7280;
+                }
+
+                .messages-container {
+                    flex: 1;
+                    overflow-y: auto;
+                    padding: 1rem;
+                    margin-bottom: 1.5rem;
+                    display: flex;
+                    flex-direction: column;
+                    gap: 1rem;
+                }
+
+                .message {
+                    max-width: 80%;
+                    padding: 1rem;
+                    border-radius: 1rem;
+                    font-size: 0.9375rem;
+                    line-height: 1.5;
+                    position: relative;
+                }
+
+                .message.user {
+                    align-self: flex-end;
+                    background-color: #3b82f6;
+                    color: white;
+                    border-bottom-right-radius: 0;
+                }
+
+                .message.assistant {
+                    align-self: flex-start;
+                    background-color: #f3f4f6;
+                    color: #111827;
+                    border-bottom-left-radius: 0;
+                }
+
+                .message-time {
+                    font-size: 0.75rem;
+                    opacity: 0.8;
+                    margin-top: 0.25rem;
+                    text-align: right;
+                }
+
+                .input-container {
+                    display: flex;
+                    gap: 0.5rem;
+                    padding: 1rem;
+                    background-color: white;
+                    border-radius: 0.5rem;
+                    border: 1px solid #e5e7eb;
+                }
+
+                .chat-input {
+                    flex: 1;
+                    padding: 0.75rem 1rem;
+                    border: 1px solid #e5e7eb;
+                    border-radius: 0.5rem;
+                    font-size: 0.9375rem;
+                    resize: none;
+                    min-height: 3rem;
+                    max-height: 10rem;
+                }
+
+                .chat-input:focus {
+                    outline: none;
+                    border-color: #3b82f6;
+                    box-shadow: 0 0 0 2px #bfdbfe;
+                }
+
+                .send-button {
+                    padding: 0.75rem;
+                    background-color: #3b82f6;
+                    color: white;
+                    border: none;
+                    border-radius: 0.5rem;
+                    cursor: pointer;
+                    transition: background-color 0.2s;
+                }
+
+                .send-button:hover {
+                    background-color: #2563eb;
+                }
+
+                .send-button:disabled {
+                    background-color: #9ca3af;
+                    cursor: not-allowed;
+                }
+
+                .typing-indicator {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    padding: 1rem;
+                    background-color: #f3f4f6;
+                    border-radius: 0.5rem;
+                    margin-bottom: 1rem;
+                    align-self: flex-start;
+                }
+
+                .typing-dots {
+                    display: flex;
+                    gap: 0.25rem;
+                }
+
+                .typing-dot {
+                    width: 0.5rem;
+                    height: 0.5rem;
+                    background-color: #6b7280;
+                    border-radius: 50%;
+                    animation: typingAnimation 1.4s infinite ease-in-out;
+                }
+
+                .typing-dot:nth-child(1) {
+                    animation-delay: 0s;
+                }
+
+                .typing-dot:nth-child(2) {
+                    animation-delay: 0.2s;
+                }
+
+                .typing-dot:nth-child(3) {
+                    animation-delay: 0.4s;
+                }
+
+                @keyframes typingAnimation {
+                    0%, 60%, 100% { transform: translateY(0); }
+                    30% { transform: translateY(-0.25rem); }
+                }
+
+                .code-block {
+                    position: relative;
+                    background-color: #1e293b;
+                    color: #f8fafc;
+                    border-radius: 0.5rem;
+                    overflow: hidden;
+                    margin-top: 0.5rem;
+                }
+
+                .code-block pre {
+                    padding: 1rem;
+                    overflow-x: auto;
+                    font-family: 'Courier New', Courier, monospace;
+                    font-size: 0.875rem;
+                    margin: 0;
+                }
+
+                .code-toolbar {
+                    position: absolute;
+                    top: 0.5rem;
+                    right: 0.5rem;
+                    display: flex;
+                    gap: 0.5rem;
+                }
+
+                .code-toolbar button {
+                    background-color: #334155;
+                    color: white;
+                    border: none;
+                    padding: 0.25rem 0.5rem;
+                    border-radius: 0.25rem;
+                    cursor: pointer;
+                    font-size: 0.75rem;
+                    display: flex;
+                    align-items: center;
+                    gap: 0.25rem;
+                }
+
+                .code-toolbar button:hover {
+                    background-color: #475569;
+                }
+            </style>
+
+            <div class="chat-container">
+                <div class="chat-header">
+                    <div class="chat-avatar">R</div>
+                    <div>
+                        <h2 class="chat-title">Rosalinda</h2>
+                        <p class="chat-subtitle">IA spécialisée en développement web</p>
+                    </div>
+                </div>
+
+                <div class="messages-container" id="messages-container">
+                    <!-- Messages will be added here dynamically -->
+                </div>
+
+                <div class="input-container">
+                    <textarea class="chat-input" id="chat-input" placeholder="Demandez à Rosalinda de générer du code ou posez-lui une question..." rows="1"></textarea>
+                    <button class="send-button" id="send-button">
+                        <i data-feather="send"></i>
+                    </button>
+                </div>
+            </div>
+        `;
+
+        // Initialize feather icons
+        const featherScript = document.createElement('script');
+        featherScript.src = 'https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js';
+        this.shadowRoot.appendChild(featherScript);
+        
+        featherScript.onload = () => {
+            feather.replace();
+        };
+    }
+
+    setupEventListeners() {
+        const chatInput = this.shadowRoot.getElementById('chat-input');
+        const sendButton = this.shadowRoot.getElementById('send-button');
+        const messagesContainer = this.shadowRoot.getElementById('messages-container');
+
+        // Auto-resize textarea
+        chatInput.addEventListener('input', function() {
+            this.style.height = 'auto';
+            this.style.height = (this.scrollHeight) + 'px';
+        });
+
+        // Send message on Enter (but allow Shift+Enter for new lines)
+        chatInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                this.sendMessage();
+            }
+        });
+
+        // Send message on button click
+        sendButton.addEventListener('click', () => this.sendMessage());
+
+        // Initial greeting from Rosalinda
+        this.addMessage({
+            user: 'Rosalinda',
+            type: 'assistant',
+            text: 'Bonjour ! Je suis Rosalinda, votre assistante IA pour le développement web. Comment puis-je vous aider aujourd\'hui ? Je peux générer du code HTML, CSS, JavaScript ou React pour vous.',
+            time: new Date().toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })
+        });
+    }
+
+    addMessage(message) {
+        this.messages.push(message);
+        this.renderMessages();
+        
+        // Scroll to bottom
+        const messagesContainer = this.shadowRoot.getElementById('messages-container');
+        messagesContainer.scrollTop = messagesContainer.scrollHeight;
+    }
+
+    renderMessages() {
+        const messagesContainer = this.shadowRoot.getElementById('messages-container');
+        messagesContainer.innerHTML = '';
+
+        this.messages.forEach(msg => {
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `message ${msg.type}`;
+            
+            // Check if message contains code
+            let messageText = msg.text;
+            const codeMatch = msg.text.match(/

components/code.js

@@ -0,0 +1,343 @@
+class CodeComponent extends HTMLElement {
+    constructor() {
+        super();
+        this.code = '';
+        this.description = '';
+    }
+
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.render();
+        
+        // Listen for code updates
+        document.addEventListener('show-code', (e) => {
+            this.code = e.detail.code;
+            this.description = e.detail.description;
+            this.render();
+        });
+    }
+
+    render() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                }
+
+                .code-header {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    margin-bottom: 1.5rem;
+                }
+
+                .code-title {
+                    font-size: 1.5rem;
+                    font-weight: 600;
+                    color: #111827;
+                }
+
+                .code-description {
+                    color: #6b7280;
+                    margin-bottom: 0.5rem;
+                }
+
+                .code-actions {
+                    display: flex;
+                    gap: 0.5rem;
+                }
+
+                .code-action {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    padding: 0.5rem 1rem;
+                    border-radius: 0.5rem;
+                    font-weight: 500;
+                    transition: all 0.2s;
+                }
+
+                .code-action.primary {
+                    background-color: #3b82f6;
+                    color: white;
+                }
+
+                .code-action.primary:hover {
+                    background-color: #2563eb;
+                }
+
+                .code-action.secondary {
+                    background-color: #f3f4f6;
+                    color: #4b5563;
+                }
+
+                .code-action.secondary:hover {
+                    background-color: #e5e7eb;
+                }
+
+                .code-block {
+                    position: relative;
+                    background-color: #1e293b;
+                    color: #f8fafc;
+                    border-radius: 0.5rem;
+                    overflow: hidden;
+                    margin-bottom: 1.5rem;
+                }
+
+                .code-block pre {
+                    padding: 1.5rem;
+                    overflow-x: auto;
+                    font-family: 'Courier New', Courier, monospace;
+                    font-size: 0.875rem;
+                    margin: 0;
+                }
+
+                .code-toolbar {
+                    position: absolute;
+                    top: 0.5rem;
+                    right: 0.5rem;
+                    display: flex;
+                    gap: 0.5rem;
+                }
+
+                .code-toolbar button {
+                    background-color: #334155;
+                    color: white;
+                    border: none;
+                    padding: 0.25rem 0.5rem;
+                    border-radius: 0.25rem;
+                    cursor: pointer;
+                    font-size: 0.75rem;
+                    display: flex;
+                    align-items: center;
+                    gap: 0.25rem;
+                }
+
+                .code-toolbar button:hover {
+                    background-color: #475569;
+                }
+
+                .preview-container {
+                    border: 1px solid #e5e7eb;
+                    border-radius: 0.5rem;
+                    overflow: hidden;
+                    margin-top: 1.5rem;
+                }
+
+                .preview-header {
+                    background-color: #f3f4f6;
+                    padding: 0.75rem 1rem;
+                    border-bottom: 1px solid #e5e7eb;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                }
+
+                .preview-title {
+                    font-weight: 500;
+                    color: #111827;
+                }
+
+                .preview-actions {
+                    display: flex;
+                    gap: 0.5rem;
+                }
+
+                .preview-action {
+                    padding: 0.25rem;
+                    border-radius: 0.25rem;
+                    color: #6b7280;
+                    transition: all 0.2s;
+                }
+
+                .preview-action:hover {
+                    background-color: #e5e7eb;
+                    color: #111827;
+                }
+
+                .preview-content {
+                    background-color: white;
+                    min-height: 200px;
+                    padding: 1rem;
+                }
+
+                .empty-state {
+                    text-align: center;
+                    padding: 3rem 0;
+                }
+
+                .empty-icon {
+                    width: 3rem;
+                    height: 3rem;
+                    background-color: #f3f4f6;
+                    border-radius: 50%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    margin: 0 auto 1rem;
+                    color: #9ca3af;
+                }
+
+                .empty-title {
+                    font-size: 1.125rem;
+                    font-weight: 600;
+                    color: #111827;
+                    margin-bottom: 0.5rem;
+                }
+
+                .empty-description {
+                    color: #6b7280;
+                    max-width: 400px;
+                    margin: 0 auto 1.5rem;
+                }
+
+                .empty-button {
+                    background-color: #3b82f6;
+                    color: white;
+                    padding: 0.5rem 1rem;
+                    border-radius: 0.5rem;
+                    font-weight: 500;
+                    transition: background-color 0.2s;
+                }
+
+                .empty-button:hover {
+                    background-color: #2563eb;
+                }
+            </style>
+
+            ${this.code ? `
+                <div class="code-header">
+                    <div>
+                        <h2 class="code-title">Code Généré</h2>
+                        <p class="code-description">${this.description}</p>
+                    </div>
+                    <div class="code-actions">
+                        <button class="code-action primary" id="save-project">
+                            <i data-feather="save"></i>
+                            <span>Sauvegarder</span>
+                        </button>
+                        <button class="code-action secondary" id="new-chat">
+                            <i data-feather="message-square"></i>
+                            <span>Nouveau chat</span>
+                        </button>
+                    </div>
+                </div>
+
+                <div class="code-block">
+                    <div class="code-toolbar">
+                        <button class="copy-code" data-code="${escapeHtml(this.code)}">
+                            <i data-feather="copy"></i>
+                            <span>Copier</span>
+                        </button>
+                        <button class="download-code" data-code="${escapeHtml(this.code)}">
+                            <i data-feather="download"></i>
+                            <span>Télécharger</span>
+                        </button>
+                    </div>
+                    <pre><code>${escapeHtml(this.code)}</code></pre>
+                </div>
+
+                <div class="preview-container">
+                    <div class="preview-header">
+                        <div class="preview-title">Aperçu</div>
+                        <div class="preview-actions">
+                            <button class="preview-action" title="Actualiser">
+                                <i data-feather="refresh-cw"></i>
+                            </button>
+                            <button class="preview-action" title="Plein écran">
+                                <i data-feather="maximize"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="preview-content">
+                        <iframe srcdoc="${escapeHtml(this.code)}" frameborder="0" style="width: 100%; height: 400px;"></iframe>
+                    </div>
+                </div>
+            ` : `
+                <div class="empty-state">
+                    <div class="empty-icon">
+                        <i data-feather="code"></i>
+                    </div>
+                    <h3 class="empty-title">Aucun code généré</h3>
+                    <p class="empty-description">Demandez à Rosalinda de générer du code pour voir le résultat ici.</p>
+                    <button class="empty-button" id="go-to-chat">
+                        <i data-feather="message-square"></i>
+                        <span>Discuter avec Rosalinda</span>
+                    </button>
+                </div>
+            `}
+        `;
+
+        // Initialize feather icons
+        const featherScript = document.createElement('script');
+        featherScript.src = 'https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js';
+        this.shadowRoot.appendChild(featherScript);
+        
+        featherScript.onload = () => {
+            feather.replace();
+        };
+
+        // Add event listeners
+        if (this.code) {
+            // Copy code button
+            this.shadowRoot.querySelector('.copy-code').addEventListener('click', () => {
+                const code = this.shadowRoot.querySelector('.copy-code').getAttribute('data-code');
+                navigator.clipboard.writeText(code).then(() => {
+                    const button = this.shadowRoot.querySelector('.copy-code');
+                    const originalText = button.innerHTML;
+                    button.innerHTML = '<i data-feather="check"></i> Copié !';
+                    feather.replace();
+                    setTimeout(() => {
+                        button.innerHTML = originalText;
+                        feather.replace();
+                    }, 2000);
+                });
+            });
+
+            // Download code button
+            this.shadowRoot.querySelector('.download-code').addEventListener('click', () => {
+                const code = this.shadowRoot.querySelector('.download-code').getAttribute('data-code');
+                const element = document.createElement('a');
+                element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(code));
+                element.setAttribute('download', 'code.html');
+                element.style.display = 'none';
+                document.body.appendChild(element);
+                element.click();
+                document.body.removeChild(element);
+            });
+
+            // Save to project button
+            this.shadowRoot.getElementById('save-project').addEventListener('click', () => {
+                document.dispatchEvent(new CustomEvent('save-project', { 
+                    detail: {
+                        code: this.code,
+                        description: this.description
+                    }
+                }));
+                alert('Projet sauvegardé avec succès !');
+            });
+
+            // New chat button
+            this.shadowRoot.getElementById('new-chat').addEventListener('click', () => {
+                document.dispatchEvent(new CustomEvent('navigate', { detail: 'chat' }));
+            });
+        } else {
+            // Go to chat button
+            this.shadowRoot.getElementById('go-to-chat').addEventListener('click', () => {
+                document.dispatchEvent(new CustomEvent('navigate', { detail: 'chat' }));
+            });
+        }
+    }
+}
+
+// Helper function to escape HTML
+function escapeHtml(unsafe) {
+    return unsafe
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;");
+}
+
+customElements.define('code-component', CodeComponent);

components/header.js

@@ -0,0 +1,127 @@
+class HeaderComponent extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    background-color: white;
+                    border-bottom: 1px solid #e5e7eb;
+                    padding: 1.5rem;
+                    position: sticky;
+                    top: 0;
+                    z-index: 20;
+                }
+
+                .header-container {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                }
+
+                .mobile-menu-button {
+                    display: none;
+                    padding: 0.5rem;
+                    border-radius: 0.375rem;
+                    background-color: #f3f4f6;
+                }
+
+                .mobile-menu-button:hover {
+                    background-color: #e5e7eb;
+                }
+
+                .header-title {
+                    font-size: 1.25rem;
+                    font-weight: 600;
+                    color: #111827;
+                }
+
+                .header-actions {
+                    display: flex;
+                    align-items: center;
+                    gap: 1rem;
+                }
+
+                .action-button {
+                    padding: 0.5rem;
+                    border-radius: 0.375rem;
+                    color: #4b5563;
+                    transition: all 0.2s;
+                }
+
+                .action-button:hover {
+                    background-color: #f3f4f6;
+                    color: #111827;
+                }
+
+                .user-avatar {
+                    width: 2.5rem;
+                    height: 2.5rem;
+                    border-radius: 50%;
+                    background-color: #e5e7eb;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: #4b5563;
+                    font-weight: 600;
+                    cursor: pointer;
+                }
+
+                @media (max-width: 768px) {
+                    .mobile-menu-button {
+                        display: block;
+                    }
+
+                    .header-title {
+                        font-size: 1rem;
+                    }
+                }
+            </style>
+
+            <div class="header-container">
+                <button class="mobile-menu-button" id="mobile-menu-button">
+                    <i data-feather="menu"></i>
+                </button>
+                <h1 class="header-title" id="header-title">Accueil</h1>
+                <div class="header-actions">
+                    <button class="action-button">
+                        <i data-feather="share-2"></i>
+                    </button>
+                    <button class="action-button">
+                        <i data-feather="bell"></i>
+                    </button>
+                    <div class="user-avatar">JD</div>
+                </div>
+            </div>
+        `;
+
+        // Initialize feather icons
+        const featherScript = document.createElement('script');
+        featherScript.src = 'https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js';
+        this.shadowRoot.appendChild(featherScript);
+        
+        featherScript.onload = () => {
+            feather.replace();
+        };
+
+        // Mobile menu toggle
+        this.shadowRoot.getElementById('mobile-menu-button').addEventListener('click', () => {
+            document.querySelector('sidebar-component').classList.add('open');
+            document.body.classList.add('overflow-hidden');
+        });
+
+        // Update title based on view
+        document.addEventListener('navigate', (e) => {
+            const titles = {
+                'home': 'Accueil',
+                'chat': 'Chat Rosalinda',
+                'projects': 'Mes Projets',
+                'code': 'Code Généré',
+                'library': 'Bibliothèque'
+            };
+            this.shadowRoot.getElementById('header-title').textContent = titles[e.detail] || 'Accueil';
+        });
+    }
+}
+
+customElements.define('header-component', HeaderComponent);

components/projects.js

@@ -0,0 +1,269 @@
+class ProjectsComponent extends HTMLElement {
+    constructor() {
+        super();
+        this.projects = [
+            { id: 1, name: 'Portfolio Pro', status: 'active', timestamp: '2 jours', code: '' },
+            { id: 2, name: 'E-shop Mode', status: 'active', timestamp: '5 jours', code: '' },
+            { id: 3, name: 'App SaaS', status: 'archived', timestamp: '10 jours', code: '' }
+        ];
+    }
+
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.render();
+    }
+
+    render() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                }
+
+                .projects-header {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    margin-bottom: 1.5rem;
+                }
+
+                .projects-title {
+                    font-size: 1.5rem;
+                    font-weight: 600;
+                    color: #111827;
+                }
+
+                .new-project-button {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    background-color: #3b82f6;
+                    color: white;
+                    padding: 0.5rem 1rem;
+                    border-radius: 0.5rem;
+                    font-weight: 500;
+                    transition: background-color 0.2s;
+                }
+
+                .new-project-button:hover {
+                    background-color: #2563eb;
+                }
+
+                .projects-grid {
+                    display: grid;
+                    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+                    gap: 1.5rem;
+                }
+
+                .project-card {
+                    background-color: white;
+                    border: 1px solid #e5e7eb;
+                    border-radius: 0.75rem;
+                    padding: 1.5rem;
+                    transition: all 0.2s;
+                    cursor: pointer;
+                }
+
+                .project-card:hover {
+                    transform: translateY(-2px);
+                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+                }
+
+                .project-card.active {
+                    border-left: 4px solid #10b981;
+                }
+
+                .project-name {
+                    font-size: 1.125rem;
+                    font-weight: 600;
+                    color: #111827;
+                    margin-bottom: 0.5rem;
+                }
+
+                .project-meta {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    margin-bottom: 1rem;
+                }
+
+                .project-status {
+                    font-size: 0.75rem;
+                    padding: 0.25rem 0.5rem;
+                    border-radius: 1rem;
+                }
+
+                .project-status.active {
+                    background-color: #ecfdf5;
+                    color: #065f46;
+                }
+
+                .project-status.archived {
+                    background-color: #f3f4f6;
+                    color: #4b5563;
+                }
+
+                .project-time {
+                    font-size: 0.75rem;
+                    color: #6b7280;
+                }
+
+                .project-actions {
+                    display: flex;
+                    gap: 0.5rem;
+                    margin-top: 1rem;
+                }
+
+                .project-action {
+                    padding: 0.5rem;
+                    border-radius: 0.375rem;
+                    background-color: #f3f4f6;
+                    color: #4b5563;
+                    transition: all 0.2s;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+
+                .project-action:hover {
+                    background-color: #e5e7eb;
+                }
+
+                .empty-state {
+                    text-align: center;
+                    padding: 3rem 0;
+                    grid-column: 1 / -1;
+                }
+
+                .empty-icon {
+                    width: 3rem;
+                    height: 3rem;
+                    background-color: #f3f4f6;
+                    border-radius: 50%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    margin: 0 auto 1rem;
+                    color: #9ca3af;
+                }
+
+                .empty-title {
+                    font-size: 1.125rem;
+                    font-weight: 600;
+                    color: #111827;
+                    margin-bottom: 0.5rem;
+                }
+
+                .empty-description {
+                    color: #6b7280;
+                    max-width: 400px;
+                    margin: 0 auto 1.5rem;
+                }
+
+                .empty-button {
+                    background-color: #3b82f6;
+                    color: white;
+                    padding: 0.5rem 1rem;
+                    border-radius: 0.5rem;
+                    font-weight: 500;
+                    transition: background-color 0.2s;
+                }
+
+                .empty-button:hover {
+                    background-color: #2563eb;
+                }
+
+                @media (max-width: 640px) {
+                    .projects-grid {
+                        grid-template-columns: 1fr;
+                    }
+                }
+            </style>
+
+            <div class="projects-header">
+                <h2 class="projects-title">Mes Projets</h2>
+                <button class="new-project-button">
+                    <i data-feather="plus"></i>
+                    <span>Nouveau projet</span>
+                </button>
+            </div>
+
+            <div class="projects-grid">
+                ${this.projects.length > 0 ? 
+                    this.projects.map(project => `
+                        <div class="project-card" data-id="${project.id}">
+                            <h3 class="project-name">${project.name}</h3>
+                            <div class="project-meta">
+                                <span class="project-status ${project.status}">${project.status === 'active' ? 'Actif' : 'Archivé'}</span>
+                                <span class="project-time">${project.timestamp}</span>
+                            </div>
+                            <div class="project-actions">
+                                <button class="project-action" title="Ouvrir">
+                                    <i data-feather="folder"></i>
+                                </button>
+                                <button class="project-action" title="Partager">
+                                    <i data-feather="share-2"></i>
+                                </button>
+                                <button class="project-action" title="Archiver">
+                                    <i data-feather="archive"></i>
+                                </button>
+                            </div>
+                        </div>
+                    `).join('') : `
+                    <div class="empty-state">
+                        <div class="empty-icon">
+                            <i data-feather="folder"></i>
+                        </div>
+                        <h3 class="empty-title">Aucun projet trouvé</h3>
+                        <p class="empty-description">Commencez par créer un nouveau projet ou demandez à Rosalinda de générer du code pour vous.</p>
+                        <button class="empty-button">
+                            <i data-feather="plus"></i>
+                            <span>Créer un projet</span>
+                        </button>
+                    </div>
+                `}
+            </div>
+        `;
+
+        // Initialize feather icons
+        const featherScript = document.createElement('script');
+        featherScript.src = 'https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js';
+        this.shadowRoot.appendChild(featherScript);
+        
+        featherScript.onload = () => {
+            feather.replace();
+        };
+
+        // Add event listeners
+        this.shadowRoot.querySelectorAll('.project-card').forEach(card => {
+            card.addEventListener('click', () => {
+                const projectId = parseInt(card.getAttribute('data-id'));
+                const project = this.projects.find(p => p.id === projectId);
+                
+                if (project && project.code) {
+                    document.dispatchEvent(new CustomEvent('show-code', { 
+                        detail: {
+                            code: project.code,
+                            description: project.name
+                        }
+                    }));
+                }
+            });
+        });
+
+        // New project button
+        this.shadowRoot.querySelector('.new-project-button').addEventListener('click', () => {
+            document.dispatchEvent(new CustomEvent('navigate', { detail: 'chat' }));
+        });
+
+        // Empty state button
+        const emptyButton = this.shadowRoot.querySelector('.empty-button');
+        if (emptyButton) {
+            emptyButton.addEventListener('click', () => {
+                document.dispatchEvent(new CustomEvent('navigate', { detail: 'chat' }));
+            });
+        }
+    }
+}
+
+customElements.define('projects-component', ProjectsComponent);

components/sidebar.js

@@ -0,0 +1,363 @@
+class SidebarComponent extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    width: 288px;
+                    background-color: white;
+                    border-right: 1px solid #e5e7eb;
+                    transition: all 0.3s ease;
+                    height: 100vh;
+                    position: relative;
+                    z-index: 30;
+                }
+
+                :host(.open) {
+                    transform: translateX(0);
+                }
+
+                .logo-container {
+                    display: flex;
+                    align-items: center;
+                    padding: 1.5rem;
+                    border-bottom: 1px solid #e5e7eb;
+                }
+
+                .logo {
+                    width: 2.5rem;
+                    height: 2.5rem;
+                    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+                    border-radius: 0.5rem;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: white;
+                    font-weight: bold;
+                    font-size: 1.125rem;
+                    margin-right: 0.75rem;
+                }
+
+                .logo-text h1 {
+                    font-weight: 700;
+                    color: #111827;
+                    margin: 0;
+                }
+
+                .logo-text p {
+                    font-size: 0.75rem;
+                    color: #6b7280;
+                    margin: 0;
+                }
+
+                .toggle-button {
+                    padding: 0.5rem;
+                    border-radius: 0.375rem;
+                    transition: background-color 0.2s;
+                    margin-left: auto;
+                }
+
+                .toggle-button:hover {
+                    background-color: #f3f4f6;
+                }
+
+                .new-task {
+                    padding: 1rem;
+                    border-bottom: 1px solid #e5e7eb;
+                }
+
+                .new-task-button {
+                    width: 100%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    gap: 0.5rem;
+                    background-color: #111827;
+                    color: white;
+                    padding: 0.75rem;
+                    border-radius: 0.5rem;
+                    font-weight: 600;
+                    transition: background-color 0.2s;
+                }
+
+                .new-task-button:hover {
+                    background-color: #1f2937;
+                }
+
+                .search {
+                    padding: 1rem;
+                    border-bottom: 1px solid #e5e7eb;
+                }
+
+                .search-container {
+                    position: relative;
+                }
+
+                .search-icon {
+                    position: absolute;
+                    left: 0.75rem;
+                    top: 0.75rem;
+                    color: #9ca3af;
+                }
+
+                .search-input {
+                    width: 100%;
+                    padding-left: 2.5rem;
+                    padding-right: 1rem;
+                    padding-top: 0.5rem;
+                    padding-bottom: 0.5rem;
+                    background-color: #f9fafb;
+                    border: 1px solid #e5e7eb;
+                    border-radius: 0.5rem;
+                    font-size: 0.875rem;
+                }
+
+                .search-input:focus {
+                    outline: none;
+                    border-color: #3b82f6;
+                    box-shadow: 0 0 0 2px #bfdbfe;
+                }
+
+                nav {
+                    flex: 1;
+                    padding: 1rem;
+                    display: flex;
+                    flex-direction: column;
+                    gap: 0.5rem;
+                }
+
+                .nav-button {
+                    width: 100%;
+                    display: flex;
+                    align-items: center;
+                    gap: 0.75rem;
+                    padding: 0.75rem;
+                    border-radius: 0.5rem;
+                    transition: all 0.2s;
+                    color: #4b5563;
+                }
+
+                .nav-button:hover {
+                    background-color: #f3f4f6;
+                }
+
+                .nav-button.active {
+                    background-color: #dbeafe;
+                    color: #1e40af;
+                }
+
+                .projects {
+                    padding: 1rem;
+                    border-top: 1px solid #e5e7eb;
+                }
+
+                .projects-title {
+                    font-weight: 600;
+                    color: #111827;
+                    margin-bottom: 0.75rem;
+                    font-size: 0.875rem;
+                }
+
+                .project-item {
+                    width: 100%;
+                    text-align: left;
+                    padding: 0.75rem;
+                    border-radius: 0.5rem;
+                    transition: all 0.2s;
+                    font-size: 0.875rem;
+                    margin-bottom: 0.25rem;
+                }
+
+                .project-item:hover {
+                    background-color: #f3f4f6;
+                }
+
+                .project-item.active {
+                    background-color: #ecfdf5;
+                    border-left: 4px solid #10b981;
+                }
+
+                .project-status {
+                    width: 0.5rem;
+                    height: 0.5rem;
+                    border-radius: 50%;
+                    margin-right: 0.5rem;
+                }
+
+                .project-status.active {
+                    background-color: #10b981;
+                }
+
+                .project-status.archived {
+                    background-color: #d1d5db;
+                }
+
+                .project-name {
+                    font-weight: 500;
+                }
+
+                .project-time {
+                    color: #6b7280;
+                    font-size: 0.75rem;
+                    margin-top: 0.25rem;
+                }
+
+                .footer {
+                    padding: 1rem;
+                    border-top: 1px solid #e5e7eb;
+                    display: flex;
+                    flex-direction: column;
+                    gap: 0.5rem;
+                }
+
+                .footer-button {
+                    width: 100%;
+                    display: flex;
+                    align-items: center;
+                    gap: 0.75rem;
+                    padding: 0.75rem;
+                    border-radius: 0.5rem;
+                    transition: all 0.2s;
+                    color: #4b5563;
+                    font-size: 0.875rem;
+                }
+
+                .footer-button:hover {
+                    background-color: #f3f4f6;
+                }
+
+                @media (max-width: 768px) {
+                    :host {
+                        position: fixed;
+                        left: 0;
+                        top: 0;
+                        transform: translateX(-100%);
+                    }
+
+                    :host(.open) {
+                        transform: translateX(0);
+                    }
+                }
+            </style>
+
+            <div class="logo-container">
+                <div class="logo">CG</div>
+                <div class="logo-text">
+                    <h1>CodeGenius</h1>
+                    <p>Workspace Rosalinda</p>
+                </div>
+                <button class="toggle-button" id="sidebar-toggle">
+                    <i data-feather="x"></i>
+                </button>
+            </div>
+
+            <div class="new-task">
+                <button class="new-task-button">
+                    <i data-feather="plus"></i>
+                    <span>Nouvelle tâche</span>
+                </button>
+            </div>
+
+            <div class="search">
+                <div class="search-container">
+                    <i data-feather="search" class="search-icon"></i>
+                    <input type="text" placeholder="Rechercher..." class="search-input">
+                </div>
+            </div>
+
+            <nav>
+                <a href="#" class="nav-button active" data-view="home">
+                    <i data-feather="home"></i>
+                    <span>Accueil</span>
+                </a>
+                <a href="#" class="nav-button" data-view="chat">
+                    <i data-feather="message-square"></i>
+                    <span>Chat Rosalinda</span>
+                </a>
+                <a href="#" class="nav-button" data-view="projects">
+                    <i data-feather="folder"></i>
+                    <span>Mes Projets</span>
+                </a>
+                <a href="#" class="nav-button" data-view="code">
+                    <i data-feather="code"></i>
+                    <span>Code Généré</span>
+                </a>
+                <a href="#" class="nav-button" data-view="library">
+                    <i data-feather="book"></i>
+                    <span>Bibliothèque</span>
+                </a>
+            </nav>
+
+            <div class="projects">
+                <h3 class="projects-title">Vos Projets</h3>
+                <div>
+                    <button class="project-item active">
+                        <div class="flex items-center">
+                            <div class="project-status active"></div>
+                            <span class="project-name">Portfolio Pro</span>
+                        </div>
+                        <p class="project-time">2 jours</p>
+                    </button>
+                    <button class="project-item">
+                        <div class="flex items-center">
+                            <div class="project-status active"></div>
+                            <span class="project-name">E-shop Mode</span>
+                        </div>
+                        <p class="project-time">5 jours</p>
+                    </button>
+                    <button class="project-item">
+                        <div class="flex items-center">
+                            <div class="project-status archived"></div>
+                            <span class="project-name">App SaaS</span>
+                        </div>
+                        <p class="project-time">10 jours</p>
+                    </button>
+                </div>
+            </div>
+
+            <div class="footer">
+                <button class="footer-button">
+                    <i data-feather="settings"></i>
+                    <span>Paramètres</span>
+                </button>
+                <button class="footer-button">
+                    <i data-feather="log-out"></i>
+                    <span>Déconnexion</span>
+                </button>
+            </div>
+        `;
+
+        // Initialize feather icons
+        const featherScript = document.createElement('script');
+        featherScript.src = 'https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js';
+        this.shadowRoot.appendChild(featherScript);
+        
+        featherScript.onload = () => {
+            feather.replace();
+        };
+
+        // Navigation
+        this.shadowRoot.querySelectorAll('[data-view]').forEach(link => {
+            link.addEventListener('click', (e) => {
+                e.preventDefault();
+                const view = link.getAttribute('data-view');
+                document.dispatchEvent(new CustomEvent('navigate', { detail: view }));
+                
+                // Update active state
+                this.shadowRoot.querySelectorAll('.nav-button').forEach(btn => {
+                    btn.classList.remove('active');
+                });
+                link.classList.add('active');
+            });
+        });
+
+        // Toggle sidebar on mobile
+        this.shadowRoot.getElementById('sidebar-toggle').addEventListener('click', () => {
+            this.classList.remove('open');
+            document.body.classList.remove('overflow-hidden');
+        });
+    }
+}
+
+customElements.define('sidebar-component', SidebarComponent);

index.html

@@ -1,19 +1,108 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CodeGenius Rosalinda - AI Coding Assistant</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-gray-50">
+    <div class="flex h-screen">
+        <!-- Sidebar Component -->
+        <sidebar-component></sidebar-component>
+
+        <!-- Main Content -->
+        <main class="flex-1 flex flex-col overflow-hidden">
+            <!-- Header Component -->
+            <header-component></header-component>
+
+            <!-- Dynamic Content Area -->
+            <div class="flex-1 overflow-y-auto p-6">
+                <!-- Home View (Default) -->
+                <div id="home-view" class="view-content">
+                    <div class="max-w-4xl mx-auto">
+                        <div class="text-center mb-12">
+                            <h1 class="text-4xl font-bold text-gray-900 mb-4">Bienvenue sur CodeGenius Rosalinda</h1>
+                            <p class="text-xl text-gray-600">Votre assistant IA pour générer du code professionnel en temps réel</p>
+                        </div>
+
+                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
+                            <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200 hover:shadow-md transition">
+                                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
+                                    <i data-feather="code" class="text-blue-600"></i>
+                                </div>
+                                <h3 class="font-bold text-lg mb-2">Génération de code</h3>
+                                <p class="text-gray-600">Demandez à Rosalinda de créer du HTML, CSS, JavaScript ou React pour vous</p>
+                            </div>
+                            <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200 hover:shadow-md transition">
+                                <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
+                                    <i data-feather="folder" class="text-purple-600"></i>
+                                </div>
+                                <h3 class="font-bold text-lg mb-2">Gestion de projets</h3>
+                                <p class="text-gray-600">Organisez et sauvegardez vos différents projets de codage</p>
+                            </div>
+                            <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200 hover:shadow-md transition">
+                                <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
+                                    <i data-feather="message-square" class="text-green-600"></i>
+                                </div>
+                                <h3 class="font-bold text-lg mb-2">Chat intelligent</h3>
+                                <p class="text-gray-600">Discutez avec Rosalinda pour obtenir des conseils et solutions</p>
+                            </div>
+                        </div>
+
+                        <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
+                            <h2 class="font-bold text-xl mb-4">Exemples de demandes</h2>
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                <button class="example-prompt bg-gray-50 hover:bg-gray-100 p-4 rounded-lg text-left transition">
+                                    "Crée une landing page moderne avec un formulaire de contact"
+                                </button>
+                                <button class="example-prompt bg-gray-50 hover:bg-gray-100 p-4 rounded-lg text-left transition">
+                                    "Génère un composant React pour une galerie d'images"
+                                </button>
+                                <button class="example-prompt bg-gray-50 hover:bg-gray-100 p-4 rounded-lg text-left transition">
+                                    "Montre-moi comment créer un menu responsive en CSS"
+                                </button>
+                                <button class="example-prompt bg-gray-50 hover:bg-gray-100 p-4 rounded-lg text-left transition">
+                                    "Aide-moi à debugger ce code JavaScript"
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Chat View -->
+                <div id="chat-view" class="view-content hidden">
+                    <chat-component></chat-component>
+                </div>
+
+                <!-- Projects View -->
+                <div id="projects-view" class="view-content hidden">
+                    <projects-component></projects-component>
+                </div>
+
+                <!-- Code View -->
+                <div id="code-view" class="view-content hidden">
+                    <code-component></code-component>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <!-- Web Components -->
+    <script src="components/sidebar.js"></script>
+    <script src="components/header.js"></script>
+    <script src="components/chat.js"></script>
+    <script src="components/projects.js"></script>
+    <script src="components/code.js"></script>
+    
+    <!-- Main Script -->
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,53 @@
+// Main Application Logic
+document.addEventListener('DOMContentLoaded', function() {
+    // Navigation between views
+    const navigateToView = (viewId) => {
+        document.querySelectorAll('.view-content').forEach(view => {
+            view.classList.add('hidden');
+        });
+        document.getElementById(`${viewId}-view`).classList.remove('hidden');
+    };
+
+    // Example prompt buttons
+    document.querySelectorAll('.example-prompt').forEach(button => {
+        button.addEventListener('click', function() {
+            navigateToView('chat');
+            const chatInput = document.querySelector('#chat-input');
+            if (chatInput) {
+                chatInput.value = this.textContent.trim();
+                chatInput.focus();
+            }
+        });
+    });
+
+    // Mobile menu toggle
+    const mobileMenuButton = document.querySelector('#mobile-menu-button');
+    if (mobileMenuButton) {
+        mobileMenuButton.addEventListener('click', function() {
+            document.querySelector('sidebar-component').classList.toggle('open');
+            document.body.classList.toggle('overflow-hidden');
+        });
+    }
+
+    // Close mobile menu when clicking on overlay
+    const overlay = document.querySelector('.sidebar-overlay');
+    if (overlay) {
+        overlay.addEventListener('click', function() {
+            document.querySelector('sidebar-component').classList.remove('open');
+            document.body.classList.remove('overflow-hidden');
+        });
+    }
+});
+
+// Simulated Rosalinda AI responses
+async function simulateRosalindaResponse(prompt) {
+    // In a real implementation, this would call an actual AI API
+    return new Promise(resolve => {
+        setTimeout(() => {
+            const codeRequests = ['code', 'html', 'css', 'javascript', 'react', 'component', 'page'];
+            const isCodeRequest = codeRequests.some(term => prompt.toLowerCase().includes(term));
+            
+            if (isCodeRequest) {
+                resolve({
+                    text: `Voici le code que vous avez demandé pour "${prompt}":\n\n` +
+                    '

style.css

@@ -1,28 +1,103 @@
+/* Base Styles */
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* View Transitions */
+.view-content {
+    animation: fadeIn 0.3s ease-out;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* Code Block Styling */
+.code-block {
+    position: relative;
+    background-color: #1e293b;
+    color: #f8fafc;
+    border-radius: 0.5rem;
+    overflow: hidden;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.code-block pre {
+    padding: 1.5rem;
+    overflow-x: auto;
 }
+
+.code-block .code-toolbar {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    display: flex;
+    gap: 0.5rem;
+}
+
+.code-toolbar button {
+    background-color: #334155;
+    color: white;
+    border: none;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    font-size: 0.75rem;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.code-toolbar button:hover {
+    background-color: #475569;
+}
+
+/* Chat Message Styling */
+.chat-message.user {
+    background-color: #3b82f6;
+    color: white;
+    border-radius: 1rem 1rem 0 1rem;
+    align-self: flex-end;
+}
+
+.chat-message.assistant {
+    background-color: #f1f5f9;
+    color: #1e293b;
+    border-radius: 1rem 1rem 1rem 0;
+    align-self: flex-start;
+}
+
+/* Project Card Styling */
+.project-card {
+    transition: all 0.2s ease;
+}
+
+.project-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+.project-card.active {
+    border-left: 4px solid #10b981;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+    .sidebar {
+        position: fixed;
+        z-index: 50;
+        transform: translateX(-100%);
+        transition: transform 0.3s ease;
+    }
+    
+    .sidebar.open {
+        transform: translateX(0);
+    }
+    
+    .sidebar-overlay {
+        position: fixed;
+        inset: 0;
+        background-color: rgba(0, 0, 0, 0.5);
+        z-index: 40;
+    }
+}