Spaces:

baeGil
/

calculus-agent

Sleeping

App Files Files Community

Đỗ Hải Nam commited on Jan 2

Commit

471f166

1 Parent(s): ba5110e

feat(frontend): interactive chat UI with math rendering

Browse files

Files changed (26) hide show

frontend/.gitignore +24 -0
frontend/README.md +16 -0
frontend/eslint.config.js +29 -0
frontend/index.html +29 -0
frontend/package-lock.json +0 -0
frontend/package.json +47 -0
frontend/public/calculus-icon.png +3 -0
frontend/public/electrocardiogram-svgrepo-com.svg +3 -0
frontend/public/hnam.jpeg +3 -0
frontend/public/pochi.jpeg +3 -0
frontend/src/App.css +0 -0
frontend/src/App.jsx +806 -0
frontend/src/assets/react.svg +1 -0
frontend/src/components/BlockRenderer.jsx +151 -0
frontend/src/components/ChatInput.jsx +282 -0
frontend/src/components/ErrorBoundary.jsx +26 -0
frontend/src/components/GuideTour.jsx +511 -0
frontend/src/components/Header.jsx +160 -0
frontend/src/components/MessageList.jsx +483 -0
frontend/src/components/Modals.jsx +596 -0
frontend/src/components/Sidebar.jsx +338 -0
frontend/src/index.css +426 -0
frontend/src/main.jsx +14 -0
frontend/src/utils/chatUtils.js +43 -0
frontend/tailwind.config.js +82 -0
frontend/vite.config.js +16 -0

frontend/.gitignore ADDED Viewed

	@@ -0,0 +1,24 @@

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+node_modules
+dist
+dist-ssr
+*.local
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/README.md ADDED Viewed

	@@ -0,0 +1,16 @@

+# React + Vite
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+Currently, two official plugins are available:
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## React Compiler
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+## Expanding the ESLint configuration
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

frontend/eslint.config.js ADDED Viewed

	@@ -0,0 +1,29 @@

+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

frontend/index.html ADDED Viewed

	@@ -0,0 +1,29 @@

+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/pochi.jpeg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Pochi</title>
+  <!-- Prevent FOUC: Apply theme class before CSS loads -->
+  <script>
+    (function () {
+      try {
+        var darkMode = localStorage.getItem('darkMode');
+        if (darkMode === 'true' || (darkMode === null && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+          document.documentElement.classList.add('dark');
+        } else {
+          document.documentElement.classList.add('light');
+        }
+      } catch (e) { }
+    })();
+  </script>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+</html>

frontend/package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

frontend/package.json ADDED Viewed

	@@ -0,0 +1,47 @@

+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "html2canvas": "^1.4.1",
+    "jspdf": "^3.0.4",
+    "katex": "^0.16.27",
+    "lucide-react": "^0.562.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-dropzone": "^14.3.8",
+    "react-joyride": "^2.9.3",
+    "react-katex": "^3.1.0",
+    "react-markdown": "^10.1.0",
+    "rehype-katex": "^7.0.1",
+    "rehype-mathjax": "^7.1.0",
+    "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@tailwindcss/typography": "^0.5.19",
+    "@tailwindcss/vite": "^4.1.18",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "autoprefixer": "^10.4.23",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.18",
+    "vite": "npm:rolldown-vite@7.2.5"
+  },
+  "overrides": {
+    "vite": "npm:rolldown-vite@7.2.5"
+  }
+}

frontend/public/calculus-icon.png ADDED Viewed

Git LFS Details

SHA256: 6f09aa4f9644b62b390b136d486be5b0632ae90bf328b3429b54cdef27cabc10
Pointer size: 130 Bytes
Size of remote file: 31.4 kB

frontend/public/electrocardiogram-svgrepo-com.svg ADDED Viewed

frontend/public/hnam.jpeg ADDED Viewed

Git LFS Details

SHA256: 492364b6a2e55004466e89321759572be9eaf54d5d9fab27c3026a62e560d94c
Pointer size: 131 Bytes
Size of remote file: 676 kB

frontend/public/pochi.jpeg ADDED Viewed

Git LFS Details

SHA256: 6dd24bcf4dbaecb7bc4baa758a3bd0167a3f8bcd7c9bfef602532848a88aa017
Pointer size: 131 Bytes
Size of remote file: 789 kB

frontend/src/App.css ADDED Viewed

The diff for this file is too large to render. See raw diff

frontend/src/App.jsx ADDED Viewed

	@@ -0,0 +1,806 @@

+import { useState, useEffect, useLayoutEffect, useRef } from 'react'
+import Header from './components/Header'
+import Sidebar from './components/Sidebar'
+import MessageList from './components/MessageList'
+import ChatInput from './components/ChatInput'
+import { SearchModal, ImageViewer, SettingsModal } from './components/Modals'
+import { Menu, MoreHorizontal } from 'lucide-react'
+import './App.css'
+import GuideTour from './components/GuideTour'
+const API_BASE = 'http://localhost:7860/api'
+function App() {
+    // --- State Management ---
+    const [darkMode, setDarkMode] = useState(() => {
+        if (typeof window !== 'undefined') {
+            const saved = localStorage.getItem('darkMode')
+            if (saved !== null) return saved === 'true'
+            return window.matchMedia('(prefers-color-scheme: dark)').matches
+        }
+        return false
+    })
+    const [conversations, setConversations] = useState([])
+    const [currentConversation, setCurrentConversation] = useState(() => {
+        return localStorage.getItem('lastConversationId') || null
+    })
+    const [messages, setMessages] = useState([])
+    const [isLoading, setIsLoading] = useState(false)
+    const [isInitializing, setIsInitializing] = useState(true) // Prevents flash on refresh
+    // User Profile State
+    const [userProfile, setUserProfile] = useState(() => {
+        const saved = localStorage.getItem('user_profile')
+        return saved ? JSON.parse(saved) : {
+            name: 'Guest',
+            email: 'guest@example.com',
+            avatar: '/hnam.jpeg'
+        }
+    })
+    const handleUpdateProfile = (newProfile) => {
+        const updated = { ...userProfile, ...newProfile }
+        setUserProfile(updated)
+        localStorage.setItem('user_profile', JSON.stringify(updated))
+    }
+    // UI State
+    const [sidebarOpen, setSidebarOpen] = useState(() => {
+        const saved = localStorage.getItem('sidebarOpen')
+        return saved !== null ? saved === 'true' : true
+    })
+    const [showSearch, setShowSearch] = useState(() => {
+        return sessionStorage.getItem('showSearch') === 'true'
+    })
+    const [tourVersion, setTourVersion] = useState(0)
+    const [showTour, setShowTour] = useState(() => {
+        const hasSeenTour = localStorage.getItem('hasSeenTour')
+        const savedIndex = localStorage.getItem('tourStepIndex')
+        // Auto-show if never seen or if interrupted (index exists and is not -1)
+        return !hasSeenTour || (savedIndex !== null && savedIndex !== '-1')
+    })
+    const [showSettings, setShowSettings] = useState(() => {
+        return sessionStorage.getItem('showSettings') === 'true'
+    })
+    const [settingsTab, setSettingsTab] = useState(() => {
+        return localStorage.getItem('settingsTab') || 'general'
+    })
+    const [viewerData, setViewerData] = useState(() => {
+        try {
+            const saved = sessionStorage.getItem('viewerData')
+            return saved ? JSON.parse(saved) : null
+        } catch (e) {
+            console.error('Failed to parse viewerData:', e)
+            return null
+        }
+    }) // { images: [], index: 0 }
+    const [memoryStatus, setMemoryStatus] = useState(null) // For future memory blocking features
+    const [showPinLimitToast, setShowPinLimitToast] = useState(false)
+    const [isMobile, setIsMobile] = useState(window.innerWidth < 768)
+    const [showRenameModal, setShowRenameModal] = useState(() => {
+        return sessionStorage.getItem('showRenameModal') === 'true'
+    })
+    const [modalTempTitle, setModalTempTitle] = useState(() => {
+        return sessionStorage.getItem('modalTempTitle') || ''
+    })
+    const appRef = useRef(null)
+    const isCreatingSessionRef = useRef(false)
+    const isInitialMountRef = useRef(true) // Track if this is the first mount after refresh
+    // --- Effects ---
+    // Note: Removed useLayoutEffect scroll reset - it caused more issues than it solved.
+    // Scroll persistence is now handled in MessageList.
+    // Dark Mode - Apply synchronously before paint to prevent flickering
+    useLayoutEffect(() => {
+        document.documentElement.classList.remove('light', 'dark')
+        document.documentElement.classList.add(darkMode ? 'dark' : 'light')
+        localStorage.setItem('darkMode', darkMode)
+    }, [darkMode])
+    useEffect(() => {
+        localStorage.setItem('sidebarOpen', sidebarOpen)
+    }, [sidebarOpen])
+    useEffect(() => {
+        sessionStorage.setItem('showSearch', showSearch)
+    }, [showSearch])
+    useEffect(() => {
+        sessionStorage.setItem('showSettings', showSettings)
+    }, [showSettings])
+    useEffect(() => {
+        localStorage.setItem('settingsTab', settingsTab)
+    }, [settingsTab])
+    useEffect(() => {
+        sessionStorage.setItem('showRenameModal', showRenameModal)
+        sessionStorage.setItem('modalTempTitle', modalTempTitle)
+    }, [showRenameModal, modalTempTitle])
+    useEffect(() => {
+        if (viewerData) {
+            sessionStorage.setItem('viewerData', JSON.stringify(viewerData))
+        } else {
+            sessionStorage.removeItem('viewerData')
+        }
+    }, [viewerData])
+    // Scroll Restoration & Event Listeners
+    useEffect(() => {
+        // Disable native scroll restoration to prevent jump on refresh
+        if ('scrollRestoration' in window.history) {
+            window.history.scrollRestoration = 'manual'
+        }
+        const handleResize = () => setIsMobile(window.innerWidth < 768)
+        const handleKeyDown = (e) => {
+            // Cmd+F or Ctrl+F for Search
+            if ((e.metaKey || e.ctrlKey) && e.key === 'f') {
+                e.preventDefault()
+                setShowSearch(true)
+            }
+            // Cmd+E or Ctrl+E for New Chat
+            if ((e.metaKey || e.ctrlKey) && e.key === 'e') {
+                e.preventDefault()
+                createConversation()
+            }
+            // Cmd+X or Ctrl+X for General Settings
+            if ((e.metaKey || e.ctrlKey) && e.key === 'x') {
+                e.preventDefault()
+                setSettingsTab('general')
+                setShowSettings(true)
+            }
+            // Cmd+I or Ctrl+I for Account Settings
+            if ((e.metaKey || e.ctrlKey) && e.key === 'i') {
+                e.preventDefault()
+                setSettingsTab('account')
+                setShowSettings(true)
+            }
+            // Cmd+K or Ctrl+K for Dark Mode Toggle
+            if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+                e.preventDefault()
+                setDarkMode(prev => !prev)
+            }
+        }
+        window.addEventListener('resize', handleResize)
+        window.addEventListener('keydown', handleKeyDown)
+        return () => {
+            window.removeEventListener('resize', handleResize)
+            window.removeEventListener('keydown', handleKeyDown)
+        }
+    }, [])
+    // Load Conversations on Mount
+    useEffect(() => {
+        const initConversations = async () => {
+            try {
+                const res = await fetch(`${API_BASE}/conversations`)
+                const data = await res.json()
+                // Merge persisted metadata (Pin/Archive)
+                const persistedMetadata = JSON.parse(localStorage.getItem('chat_metadata') || '{}')
+                const mergedData = data.map(conv => ({
+                    ...conv,
+                    isPinned: persistedMetadata[conv.id]?.isPinned || false,
+                    isArchived: persistedMetadata[conv.id]?.isArchived || false
+                }))
+                setConversations(mergedData)
+                const savedId = localStorage.getItem('lastConversationId')
+                if (savedId) {
+                    const exists = data.find(c => c.id === savedId)
+                    if (exists) {
+                        // Load messages for saved conversation before showing UI
+                        await loadMessagesSync(savedId)
+                    } else {
+                        localStorage.removeItem('lastConversationId')
+                        setCurrentConversation(null)
+                        setMessages([])
+                    }
+                }
+            } catch (error) {
+                console.error('Failed to fetch conversations:', error)
+            } finally {
+                // Always mark initialization as complete
+                setIsInitializing(false)
+            }
+        }
+        initConversations()
+    }, [])
+    // Mark initial mount as complete after first render cycle of the REAL UI
+    useEffect(() => {
+        if (!isInitializing) {
+            const timer = setTimeout(() => {
+                isInitialMountRef.current = false
+            }, 300) // Slightly longer to be safe
+            return () => clearTimeout(timer)
+        }
+    }, [isInitializing])
+    // Load Messages when Conversation Changes
+    useEffect(() => {
+        if (currentConversation) {
+            if (isCreatingSessionRef.current) {
+                isCreatingSessionRef.current = false
+                return
+            }
+            loadMessages(currentConversation)
+            if (currentConversation === 'null') {
+                localStorage.setItem('lastConversationId', 'null')
+            } else {
+                localStorage.setItem('lastConversationId', currentConversation)
+            }
+        } else {
+            setMessages([])
+        }
+    }, [currentConversation])
+    // Auto-refresh for pending messages (e.g., if user returns to a generating session)
+    useEffect(() => {
+        if (!currentConversation || isLoading || messages.length === 0) return
+        const lastMsg = messages[messages.length - 1]
+        const isPending = lastMsg.role === 'assistant' && !lastMsg.content
+        if (isPending) {
+            const pollInterval = setInterval(() => {
+                loadMessagesSync(currentConversation)
+            }, 3000) // Poll every 3s
+            return () => clearInterval(pollInterval)
+        }
+    }, [messages, currentConversation, isLoading])
+    // Simulation Engine for "Resume Streaming" experience
+    useEffect(() => {
+        if (messages.length === 0 || isLoading) return
+        const lastIdx = messages.length - 1
+        const lastMsg = messages[lastIdx]
+        if (lastMsg.isSimulating && lastMsg._fullContent) {
+            const simulationTimer = setTimeout(() => {
+                setMessages(prev => {
+                    const newMessages = [...prev]
+                    const msg = newMessages[lastIdx]
+                    if (!msg || !msg.isSimulating) return prev
+                    const currentLen = msg.content.length
+                    const fullContent = msg._fullContent
+                    // Batch size for simulation (approx 24 chars for that "super fast" feel)
+                    const batchSize = 24
+                    const nextContent = fullContent.substring(0, currentLen + batchSize)
+                    msg.content = nextContent
+                    if (nextContent.length >= fullContent.length) {
+                        msg.isStreaming = false
+                        msg.isSimulating = false
+                        delete msg._fullContent
+                    }
+                    return newMessages
+                })
+            }, 5) // Very fast update for simulation
+            return () => clearTimeout(simulationTimer)
+        }
+    }, [messages, isLoading])
+    // --- Actions ---
+    const loadMessages = async (conversationId) => {
+        try {
+            const res = await fetch(`${API_BASE}/conversations/${conversationId}/messages`)
+            const data = await res.json()
+            setMessages(parseMessagesData(data))
+        } catch (error) {
+            console.error('Failed to load messages:', error)
+        }
+    }
+    // Sync version for initial load (doesn't trigger effects that cause scroll)
+    const loadMessagesSync = async (conversationId) => {
+        try {
+            const res = await fetch(`${API_BASE}/conversations/${conversationId}/messages`)
+            const data = await res.json()
+            setMessages(parseMessagesData(data))
+        } catch (error) {
+            console.error('Failed to load messages:', error)
+        }
+    }
+    // Helper to parse messages data
+    const parseMessagesData = (data) => {
+        const TYPING_SPEED = 0.25 // chars/ms (approx 250 chars/sec)
+        const now = new Date().getTime()
+        return data.map((m, idx) => {
+            let images = []
+            if (m.image_data) {
+                try {
+                    const parsed = JSON.parse(m.image_data)
+                    if (Array.isArray(parsed)) {
+                        images = parsed.map(b64 => `data:image/jpeg;base64,${b64}`)
+                    } else {
+                        images = [`data:image/jpeg;base64,${m.image_data}`]
+                    }
+                } catch (e) {
+                    images = [`data:image/jpeg;base64,${m.image_data}`]
+                }
+            }
+            const createdAt = new Date(m.created_at).getTime()
+            const elapsed = now - createdAt
+            const fullContent = m.content || ''
+            // Only simulate for the VERY LAST message if it's an assistant message
+            const isLastMessage = idx === data.length - 1
+            const shouldSimulate = isLastMessage && m.role === 'assistant' && fullContent.length > 0
+            if (shouldSimulate) {
+                const expectedVisibleLength = Math.floor(elapsed * TYPING_SPEED)
+                if (expectedVisibleLength < fullContent.length) {
+                    return {
+                        role: m.role,
+                        content: fullContent.substring(0, Math.max(0, expectedVisibleLength)),
+                        _fullContent: fullContent, // Hidden property for simulation
+                        images: images,
+                        isStreaming: true,
+                        isSimulating: true // Flag for simulation
+                    }
+                }
+            }
+            return {
+                role: m.role,
+                content: fullContent,
+                images: images,
+                // If assistant message is empty, it means it's still being generated in background
+                isStreaming: m.role === 'assistant' && !fullContent
+            }
+        })
+    }
+    const createConversation = () => {
+        setCurrentConversation(null)
+        setMessages([])
+        localStorage.setItem('lastConversationId', 'null') // Persist current null state to prevent jump on refresh
+        if (window.innerWidth < 768) setSidebarOpen(false)
+    }
+    const deleteConversation = async (id) => {
+        try {
+            await fetch(`${API_BASE}/conversations/${id}`, { method: 'DELETE' })
+            const remaining = conversations.filter(c => c.id !== id)
+            setConversations(remaining)
+            if (currentConversation === id) {
+                setCurrentConversation(null)
+                setMessages([])
+                localStorage.removeItem('lastConversationId')
+            }
+            // Cleanup metadata
+            const metadata = JSON.parse(localStorage.getItem('chat_metadata') || '{}')
+            if (metadata[id]) {
+                delete metadata[id]
+                localStorage.setItem('chat_metadata', JSON.stringify(metadata))
+            }
+            // Cleanup message expansion states
+            Object.keys(localStorage).forEach(key => {
+                if (key.startsWith(`expand_${id}`)) {
+                    localStorage.removeItem(key)
+                }
+            })
+        } catch (error) {
+            console.error('Failed to delete conversation:', error)
+        }
+    }
+    const renameConversation = async (id, newTitle) => {
+        // Optimistic UI update
+        setConversations(prev => prev.map(c =>
+            c.id === id ? { ...c, title: newTitle } : c
+        ))
+        try {
+            const res = await fetch(`${API_BASE}/conversations/${id}`, {
+                method: 'PATCH',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ title: newTitle })
+            })
+            if (!res.ok) throw new Error('Failed to rename on server')
+        } catch (error) {
+            console.error('Failed to rename conversation:', error)
+            // Revert on error? (Optional, maybe just notify)
+        }
+    }
+    const handleSaveRename = () => {
+        if (modalTempTitle.trim() && currentConversation) {
+            renameConversation(currentConversation, modalTempTitle)
+        }
+        setShowRenameModal(false)
+    }
+    const togglePin = (id) => {
+        setConversations(prev => {
+            const isCurrentlyPinned = prev.find(c => c.id === id)?.isPinned
+            const currentPinnedCount = prev.filter(c => c.isPinned).length
+            // If we are pinning (not unpinning) and already at 5, stop and warn.
+            if (!isCurrentlyPinned && currentPinnedCount >= 5) {
+                setShowPinLimitToast(true)
+                setTimeout(() => setShowPinLimitToast(false), 3000)
+                return prev
+            }
+            const updated = prev.map(c => {
+                if (c.id === id) {
+                    const newPinned = !c.isPinned
+                    return { ...c, isPinned: newPinned, isArchived: newPinned ? false : c.isArchived }
+                }
+                return c
+            })
+            // Persist metadata
+            const metadata = JSON.parse(localStorage.getItem('chat_metadata') || '{}')
+            const conv = updated.find(c => c.id === id)
+            metadata[id] = { ...metadata[id], isPinned: conv.isPinned, isArchived: conv.isArchived }
+            localStorage.setItem('chat_metadata', JSON.stringify(metadata))
+            return updated
+        })
+    }
+    const toggleArchive = (id) => {
+        setConversations(prev => {
+            const updated = prev.map(c => {
+                if (c.id === id) {
+                    const newArchived = !c.isArchived
+                    return { ...c, isArchived: newArchived, isPinned: newArchived ? false : c.isPinned }
+                }
+                return c
+            })
+            // If the current conversation is archived, deselect it
+            if (currentConversation === id) {
+                const isArchiving = !prev.find(c => c.id === id)?.isArchived
+                if (isArchiving) {
+                    setCurrentConversation(null)
+                    setMessages([])
+                }
+            }
+            // Persist metadata
+            const metadata = JSON.parse(localStorage.getItem('chat_metadata') || '{}')
+            const conv = updated.find(c => c.id === id)
+            metadata[id] = { ...metadata[id], isPinned: conv.isPinned, isArchived: conv.isArchived }
+            localStorage.setItem('chat_metadata', JSON.stringify(metadata))
+            return updated
+        })
+    }
+    const sendMessage = async (text, uploadedImages) => {
+        const userMessage = text.trim()
+        const imagePreviews = uploadedImages.map(img => img.preview)
+        // Optimistic UI update
+        setMessages(prev => [...prev, {
+            role: 'user',
+            content: userMessage,
+            images: imagePreviews
+        }])
+        setIsLoading(true)
+        const formData = new FormData()
+        formData.append('message', userMessage)
+        if (currentConversation) formData.append('session_id', currentConversation)
+        uploadedImages.forEach(img => {
+            formData.append('images', img.file)
+        })
+        try {
+            const res = await fetch(`${API_BASE}/chat`, { method: 'POST', body: formData })
+            const sessionId = res.headers.get('X-Session-Id')
+            // Handle New Session
+            if (sessionId && !currentConversation) {
+                isCreatingSessionRef.current = true
+                setCurrentConversation(sessionId)
+                localStorage.setItem('lastConversationId', sessionId)
+                setConversations(prev => {
+                    if (prev.find(c => c.id === sessionId)) return prev
+                    return [{ id: sessionId, title: userMessage.slice(0, 50), created_at: new Date().toISOString() }, ...prev]
+                })
+            }
+            // Stream Response
+            const reader = res.body.getReader()
+            const decoder = new TextDecoder()
+            let assistantMessage = ''
+            setMessages(prev => [...prev, { role: 'assistant', content: '', isStreaming: true }])
+            while (true) {
+                const { done, value } = await reader.read()
+                if (done) break
+                const chunk = decoder.decode(value, { stream: true })
+                const lines = chunk.split('\n').filter(l => l.trim().length > 0)
+                let batchTokens = 0
+                const BATCH_SIZE = 8 // Update UI every 8 tokens if they arrive at once
+                for (let i = 0; i < lines.length; i++) {
+                    const line = lines[i]
+                    if (line.startsWith('data: ')) {
+                        const data = line.slice(6)
+                        if (data === '[DONE]') break
+                        let parsed = null
+                        try { parsed = JSON.parse(data) }
+                        catch { parsed = data } // Legacy fallback
+                        if (typeof parsed === 'object' && parsed !== null && parsed.type) {
+                            if (parsed.type === 'token') {
+                                assistantMessage += parsed.content
+                                batchTokens++
+                            } else if (parsed.type === 'status') {
+                                setMessages(prev => {
+                                    const newMessages = [...prev]
+                                    if (newMessages.length > 0) newMessages[newMessages.length - 1].status = parsed.status
+                                    return newMessages
+                                })
+                            } else if (parsed.type === 'done') {
+                                break;
+                            }
+                        } else if (typeof parsed === 'string') {
+                            assistantMessage += parsed
+                            batchTokens++
+                        }
+                        // Update UI either on batch size or end of chunk lines
+                        if (batchTokens >= BATCH_SIZE || i === lines.length - 1) {
+                            setMessages(prev => {
+                                const newMessages = [...prev]
+                                const lastMsg = newMessages[newMessages.length - 1]
+                                if (lastMsg) lastMsg.content = assistantMessage
+                                return newMessages
+                            })
+                            batchTokens = 0
+                            // A very tiny delay between batches to keep the main thread breathing
+                            // and maintain the typewriter feel
+                            await new Promise(resolve => setTimeout(resolve, 2))
+                        }
+                    }
+                }
+            }
+            // Finish Streaming
+            setMessages(prev => {
+                const newMessages = [...prev]
+                if (newMessages.length > 0) {
+                    newMessages[newMessages.length - 1].isStreaming = false
+                    newMessages[newMessages.length - 1].status = null // Clear any persistent "Thinking..." status
+                }
+                return newMessages
+            })
+        } catch (error) {
+            console.error('Failed to send message:', error)
+            setMessages(prev => {
+                const newMessages = [...prev]
+                // If the last message was the streaming one, mark it as finished/error
+                if (newMessages.length > 0 && newMessages[newMessages.length - 1].role === 'assistant') {
+                    newMessages[newMessages.length - 1].isStreaming = false
+                    newMessages[newMessages.length - 1].status = null
+                }
+                return [...newMessages, { role: 'assistant', content: 'Xin lỗi, đã có lỗi xảy ra.' }]
+            })
+        } finally {
+            setIsLoading(false)
+        }
+    }
+    return (
+        <div className="app-container" ref={appRef}>
+            {isInitializing ? (
+                // Only show loading if viewer is NOT active
+                !viewerData && (
+                    <div className="flex items-center justify-center h-screen w-screen bg-bg-primary">
+                        <div className="animate-spin w-8 h-8 border-4 border-primary border-t-transparent rounded-full"></div>
+                    </div>
+                )
+            ) : (
+                <>
+                    {showTour && (
+                        <GuideTour
+                            darkMode={darkMode}
+                            tourVersion={tourVersion}
+                            onTourEnd={() => {
+                                setTourVersion(0)
+                                setShowTour(false)
+                            }}
+                        />
+                    )}
+                    <Sidebar
+                        isOpen={sidebarOpen}
+                        toggleSidebar={() => setSidebarOpen(!sidebarOpen)}
+                        conversations={[...conversations].sort((a, b) => {
+                            if (a.isPinned && !b.isPinned) return -1
+                            if (!a.isPinned && b.isPinned) return 1
+                            const dateA = a.created_at ? new Date(a.created_at).getTime() : 0
+                            const dateB = b.created_at ? new Date(b.created_at).getTime() : 0
+                            return dateB - dateA
+                        })}
+                        currentConversationId={currentConversation}
+                        onSelectConversation={(id) => {
+                            setCurrentConversation(id)
+                            if (window.innerWidth < 768) setSidebarOpen(false)
+                        }}
+                        onNewChat={createConversation}
+                        onDeleteConversation={deleteConversation}
+                        onRenameConversation={renameConversation}
+                        onTogglePin={togglePin}
+                        onToggleArchive={toggleArchive}
+                        onSearchClick={() => setShowSearch(true)}
+                        onSettingsClick={(tab = 'general') => {
+                            setSettingsTab(tab)
+                            setShowSettings(true)
+                        }}
+                        darkMode={darkMode}
+                        toggleTheme={() => setDarkMode(!darkMode)}
+                        userProfile={userProfile}
+                    />
+                    <main className="main-content">
+                        <Header
+                            onOpenSidebar={() => setSidebarOpen(true)}
+                            isMobile={isMobile}
+                            currentConversationId={currentConversation}
+                            onDeleteConversation={deleteConversation}
+                            onRenameConversation={renameConversation}
+                            onTogglePin={togglePin}
+                            onToggleArchive={toggleArchive}
+                            currentChat={conversations.find(c => c.id === currentConversation)}
+                            onRenameClick={() => {
+                                const currentConv = conversations.find(c => c.id === currentConversation)
+                                setModalTempTitle(currentConv?.title || '')
+                                setShowRenameModal(true)
+                                sessionStorage.setItem('isNewRenameModal', 'true')
+                            }}
+                            title={conversations.find(c => c.id === currentConversation)?.title}
+                            onSettingsClick={(tab = 'general') => {
+                                setSettingsTab(tab)
+                                setShowSettings(true)
+                            }}
+                            onToggleTheme={() => setDarkMode(!darkMode)}
+                            darkMode={darkMode}
+                            userProfile={userProfile}
+                            onHelpClick={() => {
+                                setTourVersion(prev => prev + 1)
+                                setShowTour(true)
+                            }}
+                        />
+                        {showRenameModal && (
+                            <div className="rename-modal-overlay" onClick={() => setShowRenameModal(false)}>
+                                <div className="rename-modal-content" onClick={e => e.stopPropagation()}>
+                                    <h3 className="rename-modal-title">Đổi tên đoạn chat</h3>
+                                    <input
+                                        className="premium-rename-input"
+                                        value={modalTempTitle}
+                                        onChange={(e) => setModalTempTitle(e.target.value)}
+                                        onKeyDown={(e) => {
+                                            if (e.key === 'Enter') handleSaveRename()
+                                            if (e.key === 'Escape') setShowRenameModal(false)
+                                        }}
+                                        autoFocus
+                                        onFocus={e => {
+                                            const isRestored = !sessionStorage.getItem('isNewRenameModal');
+                                            if (!isRestored) {
+                                                e.target.select();
+                                                sessionStorage.removeItem('isNewRenameModal');
+                                            }
+                                        }}
+                                    />
+                                    <div className="rename-modal-actions">
+                                        <button className="modal-btn modal-btn-cancel" onClick={() => setShowRenameModal(false)}>Hủy</button>
+                                        <button className="modal-btn modal-btn-save" onClick={handleSaveRename}>Lưu</button>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+                        {isLoading && (
+                            <div className="loading-bar">
+                                <div className="loading-progress"></div>
+                            </div>
+                        )}
+                        <MessageList
+                            messages={messages}
+                            isLoading={isLoading}
+                            conversationId={currentConversation}
+                            onExampleClick={(text) => sendMessage(text, [])}
+                            onImageClick={(images, index) => setViewerData({ images, index })}
+                            userAvatar={userProfile.avatar}
+                            userName={userProfile.name}
+                        />
+                        <ChatInput
+                            onSendMessage={sendMessage}
+                            isLoading={isLoading}
+                            onImageClick={(images, index) => setViewerData({ images, index })}
+                        />
+                    </main>
+                    {showSearch && (
+                        <SearchModal
+                            conversations={conversations}
+                            onSelect={(id) => setCurrentConversation(id)}
+                            onClose={() => setShowSearch(false)}
+                            isRestored={isInitialMountRef.current}
+                        />
+                    )}
+                    {showSettings && (
+                        <SettingsModal
+                            onClose={() => setShowSettings(false)}
+                            darkMode={darkMode}
+                            onToggleTheme={() => setDarkMode(!darkMode)}
+                            archivedSessions={conversations.filter(c => c.isArchived)}
+                            onRestoreSession={(id) => toggleArchive(id)}
+                            initialTab={settingsTab}
+                            userProfile={userProfile}
+                            onUpdateProfile={handleUpdateProfile}
+                            isRestored={isInitialMountRef.current}
+                            onTabChange={setSettingsTab}
+                        />
+                    )}
+                    {showPinLimitToast && (
+                        <div className="premium-toast warning">
+                            <div className="toast-icon">⚠️</div>
+                            <div className="toast-content">
+                                <strong>Giới hạn ghim</strong>
+                                <p>Bạn chỉ có thể ghim tối đa 5 đoạn chat.</p>
+                            </div>
+                        </div>
+                    )}
+                </>
+            )}
+            {/* Always render at fixed position to prevent DOM unmount/remount on isInitializing change */}
+            {viewerData && (
+                <ImageViewer
+                    images={viewerData.images}
+                    startIndex={viewerData.index}
+                    onClose={() => setViewerData(null)}
+                    onIndexChange={(newIndex) => {
+                        setViewerData(prev => prev ? { ...prev, index: newIndex } : null)
+                    }}
+                    isRestored={isInitialMountRef.current || isInitializing}
+                />
+            )}
+        </div>
+    )
+}
+export default App

frontend/src/assets/react.svg ADDED Viewed

frontend/src/components/BlockRenderer.jsx ADDED Viewed

	@@ -0,0 +1,151 @@

+/**
+ * BlockRenderer - Renders structured message blocks
+ * NO hardcoded parsing - only handles proper JSON blocks from backend
+ */
+import { useMemo } from 'react'
+import { BlockMath, InlineMath } from 'react-katex'
+import 'katex/dist/katex.min.css'
+/**
+ * Render a TextBlock - plain text
+ */
+const TextBlock = ({ content }) => {
+    if (!content) return null
+    return <p className="text-block">{content}</p>
+}
+/**
+ * Render a MathBlock - KaTeX for math expressions
+ * Accepts either 'latex' or 'content' prop for compatibility
+ */
+const MathBlockRenderer = ({ latex, content, display = 'block' }) => {
+    // Support both 'latex' and 'content' field names
+    const mathContent = latex || content
+    if (!mathContent) return null
+    try {
+        if (display === 'inline') {
+            return <InlineMath math={mathContent} />
+        }
+        return (
+            <div className="math-block-container">
+                <BlockMath math={mathContent} />
+            </div>
+        )
+    } catch (error) {
+        console.error('KaTeX render error:', error)
+        return <code className="math-error">{mathContent}</code>
+    }
+}
+/**
+ * Render a ListBlock - ordered or unordered list
+ */
+const ListBlockRenderer = ({ items, ordered = false }) => {
+    if (!items || !items.length) return null
+    const ListTag = ordered ? 'ol' : 'ul'
+    return (
+        <ListTag className="list-block">
+            {items.map((item, idx) => (
+                <li key={idx}>{item}</li>
+            ))}
+        </ListTag>
+    )
+}
+/**
+ * Render a CodeBlock - syntax highlighted code
+ */
+const CodeBlockRenderer = ({ content, language = 'python' }) => {
+    if (!content) return null
+    return (
+        <pre className="code-block">
+            <code className={`language-${language}`}>{content}</code>
+        </pre>
+    )
+}
+/**
+ * Render a StepBlock - solution step with nested blocks
+ */
+const StepBlockRenderer = ({ index, title, blocks }) => {
+    return (
+        <div className="step-block">
+            <div className="step-header">
+                <span className="step-number">{index}</span>
+                <span className="step-title">{title}</span>
+            </div>
+            <div className="step-content">
+                {blocks && blocks.map((block, idx) => (
+                    <BlockRenderer key={idx} block={block} />
+                ))}
+            </div>
+        </div>
+    )
+}
+/**
+ * Main BlockRenderer - dispatches to appropriate renderer based on block type
+ */
+const BlockRenderer = ({ block }) => {
+    if (!block || !block.type) return null
+    switch (block.type) {
+        case 'text':
+            return <TextBlock content={block.content} />
+        case 'math':
+            // Support both 'latex' and 'content' fields
+            return <MathBlockRenderer latex={block.latex} content={block.content} display={block.display} />
+        case 'list':
+            return <ListBlockRenderer items={block.items} ordered={block.ordered} />
+        case 'code':
+            return <CodeBlockRenderer content={block.content} language={block.language} />
+        case 'step':
+            return <StepBlockRenderer index={block.index} title={block.title} blocks={block.blocks} />
+        default:
+            console.warn('Unknown block type:', block.type)
+            return <p className="text-block">{JSON.stringify(block)}</p>
+    }
+}
+/**
+ * MessageBlocks - Renders an array of blocks for a message
+ * Only parses JSON - no hardcoded fallback parsing
+ */
+export const MessageBlocks = ({ content }) => {
+    const blocks = useMemo(() => {
+        if (!content) return []
+        try {
+            // Parse JSON blocks from backend
+            const parsed = typeof content === 'string' ? JSON.parse(content) : content
+            if (parsed.blocks && Array.isArray(parsed.blocks)) {
+                return parsed.blocks
+            }
+            // If no blocks array, wrap as single text block
+            return [{ type: 'text', content: String(content) }]
+        } catch {
+            // JSON parse failed - backend didn't return proper format
+            // Show as plain text (no regex processing)
+            return [{ type: 'text', content: String(content) }]
+        }
+    }, [content])
+    if (!blocks.length) return null
+    return (
+        <div className="message-blocks">
+            {blocks.map((block, idx) => (
+                <BlockRenderer key={idx} block={block} />
+            ))}
+        </div>
+    )
+}
+export default BlockRenderer

frontend/src/components/ChatInput.jsx ADDED Viewed

	@@ -0,0 +1,282 @@

+import React, { useRef, useState, useCallback, useEffect } from 'react'
+import { useDropzone } from 'react-dropzone'
+import { Send, Plus, X, ImageIcon, Paperclip, UploadCloud } from 'lucide-react'
+const MAX_IMAGES = 5
+const ChatInput = ({ onSendMessage, isLoading, onImageClick }) => {
+    const [input, setInput] = useState(() => sessionStorage.getItem('chat_draft') || '')
+    const [uploadedImages, setUploadedImages] = useState([])
+    const [showAttachMenu, setShowAttachMenu] = useState(false)
+    const [uploadError, setUploadError] = useState('')
+    const textareaRef = useRef(null)
+    // Draft persistence
+    useEffect(() => {
+        sessionStorage.setItem('chat_draft', input)
+    }, [input])
+    // Initial image restoration
+    useEffect(() => {
+        const savedImages = sessionStorage.getItem('chat_images')
+        if (savedImages) {
+            try {
+                const parsed = JSON.parse(savedImages)
+                const restored = parsed.map(img => {
+                    // Convert base64 back to Blob/File if needed, or just use data URL as preview
+                    return {
+                        file: null, // Original file is lost on refresh, but we have the data
+                        preview: img.data,
+                        name: img.name,
+                        type: img.type
+                    }
+                })
+                setUploadedImages(restored)
+            } catch (e) {
+                console.error('Failed to restore images:', e)
+            }
+        }
+    }, [])
+    // Image persistence (Base64)
+    useEffect(() => {
+        if (uploadedImages.length === 0) {
+            sessionStorage.removeItem('chat_images')
+            return
+        }
+        // Only save images that have a preview (base64 or blob URL)
+        // If it's a blob URL, it won't survive refresh, so we need to ensure they are base64 when adding
+        const persistImages = async () => {
+            const dataToSave = await Promise.all(uploadedImages.map(async (img) => {
+                if (img.preview.startsWith('data:')) {
+                    return { name: img.name, type: img.type, data: img.preview }
+                }
+                // If it's a blob URL, we should have converted it already on drop
+                return { name: img.name, type: img.type, data: img.preview }
+            }))
+            sessionStorage.setItem('chat_images', JSON.stringify(dataToSave))
+        }
+        persistImages()
+    }, [uploadedImages])
+    // Auto-resize textarea
+    useEffect(() => {
+        if (textareaRef.current) {
+            textareaRef.current.style.height = 'auto'
+            textareaRef.current.style.height = Math.min(textareaRef.current.scrollHeight, 200) + 'px'
+        }
+    }, [input])
+    // Clear error after 3 seconds
+    useEffect(() => {
+        if (uploadError) {
+            const timer = setTimeout(() => setUploadError(''), 3000)
+            return () => clearTimeout(timer)
+        }
+    }, [uploadError])
+    // Close menu when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (showAttachMenu && !e.target.closest('.attach-btn-wrapper')) {
+                setShowAttachMenu(false)
+            }
+        }
+        document.addEventListener('mousedown', handleClickOutside)
+        return () => document.removeEventListener('mousedown', handleClickOutside)
+    }, [showAttachMenu])
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault()
+            handleSubmit()
+        }
+    }
+    const onDrop = useCallback((acceptedFiles) => {
+        const processFiles = async () => {
+            const newImagesPromises = acceptedFiles.map(file => {
+                return new Promise((resolve) => {
+                    const reader = new FileReader()
+                    reader.onloadend = () => {
+                        resolve({
+                            file,
+                            preview: reader.result,
+                            name: file.name,
+                            type: file.type
+                        })
+                    }
+                    reader.readAsDataURL(file)
+                })
+            })
+            const newImages = await Promise.all(newImagesPromises)
+            setUploadedImages(prev => {
+                const remaining = MAX_IMAGES - prev.length
+                if (remaining <= 0) {
+                    setUploadError(`Bạn chỉ được tải tối đa ${MAX_IMAGES} ảnh`)
+                    return prev
+                }
+                if (newImages.length > remaining) {
+                    setUploadError(`Chỉ nhận thêm ${remaining} ảnh cuối cùng`)
+                }
+                return [...prev, ...newImages.slice(0, remaining)]
+            })
+        }
+        processFiles()
+        setShowAttachMenu(false)
+    }, [])
+    const { getRootProps, getInputProps, isDragActive, open: openFilePicker } = useDropzone({
+        onDrop,
+        accept: { 'image/*': ['.png', '.jpg', '.jpeg', '.gif', '.webp'] },
+        maxFiles: MAX_IMAGES,
+        noClick: true,
+        noKeyboard: true,
+        disabled: uploadedImages.length >= MAX_IMAGES,
+    })
+    const removeImage = (index) => {
+        setUploadedImages(prev => prev.filter((_, i) => i !== index))
+    }
+    const clearAllImages = () => {
+        setUploadedImages([])
+    }
+    const handleSubmit = () => {
+        if ((!input.trim() && uploadedImages.length === 0) || isLoading) return
+        onSendMessage(input, uploadedImages)
+        // Clear persistence
+        setInput('')
+        setUploadedImages([])
+        sessionStorage.removeItem('chat_draft')
+        sessionStorage.removeItem('chat_images')
+        if (textareaRef.current) textareaRef.current.style.height = 'auto'
+    }
+    return (
+        <div className="input-container">
+            {/* Image Previews & Counter */}
+            {uploadedImages.length > 0 && (
+                <div className="image-attachment-area">
+                    <div className="attachment-header">
+                        <span className="attachment-counter">
+                            Đã đính kèm: <strong>{uploadedImages.length}/{MAX_IMAGES}</strong> ảnh
+                        </span>
+                        <button type="button" className="clear-all-btn" onClick={clearAllImages}>
+                            Xóa hết
+                        </button>
+                    </div>
+                    <div className="uploaded-images-preview">
+                        {uploadedImages.map((img, idx) => (
+                            <div
+                                key={idx}
+                                className="preview-item clickable"
+                                onClick={() => onImageClick?.(uploadedImages.map(img => img.preview), idx)}
+                                title="Xem ảnh lớn"
+                            >
+                                <img src={img.preview} alt={`Preview ${idx + 1}`} />
+                                <button
+                                    type="button"
+                                    className="remove-img-btn"
+                                    onClick={(e) => {
+                                        e.stopPropagation()
+                                        removeImage(idx)
+                                    }}
+                                    title="Xóa ảnh"
+                                >
+                                    <X size={12} />
+                                </button>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+            {/* Upload Error Message */}
+            {uploadError && (
+                <div className="upload-error-toast">
+                    {uploadError}
+                </div>
+            )}
+            <div className={`input-wrapper ${isLoading ? 'opacity-50' : ''}`} {...getRootProps()} id="tour-chat-input-area">
+                <input {...getInputProps()} />
+                {/* Drag Overlay - Compact & Premium */}
+                {isDragActive && (
+                    <div className="drag-overlay">
+                        <div className="drag-content">
+                            <UploadCloud size={24} className="drag-icon" />
+                            <span className="drag-text">Thả ảnh vào đây</span>
+                        </div>
+                    </div>
+                )}
+                <div className="attach-btn-wrapper">
+                    <button
+                        type="button"
+                        className="attach-btn"
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            setShowAttachMenu(!showAttachMenu);
+                        }}
+                        title="Đính kèm"
+                        id="tour-attach"
+                    >
+                        <Plus size={20} className={showAttachMenu ? 'rotate-45 transition-transform' : 'transition-transform'} />
+                    </button>
+                    {showAttachMenu && (
+                        <div className="attachment-menu">
+                            <button type="button" onClick={(e) => { e.stopPropagation(); openFilePicker(); setShowAttachMenu(false) }}>
+                                <ImageIcon size={18} /> Ảnh/Video
+                            </button>
+                            <button type="button" onClick={(e) => { e.stopPropagation(); setShowAttachMenu(false) }} className="opacity-50 cursor-not-allowed">
+                                <Paperclip size={18} /> Tài liệu (Sắp ra mắt)
+                            </button>
+                        </div>
+                    )}
+                </div>
+                <textarea
+                    ref={textareaRef}
+                    value={input}
+                    onChange={(e) => setInput(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    placeholder="Nhập tin nhắn..."
+                    rows={1}
+                    disabled={isLoading}
+                    id="tour-chat-input"
+                />
+                <button
+                    type="button"
+                    className="send-btn"
+                    onClick={(e) => {
+                        e.stopPropagation(); // Prevent bubbling to dropzone
+                        handleSubmit();
+                    }}
+                    disabled={isLoading || (!input.trim() && uploadedImages.length === 0)}
+                    title="Gửi"
+                    id="tour-send"
+                >
+                    <Send size={18} />
+                </button>
+            </div>
+            <p className="input-hint">
+                AI có thể mắc lỗi. Hãy kiểm tra lại thông tin quan trọng.
+            </p>
+        </div>
+    )
+}
+export default ChatInput

frontend/src/components/ErrorBoundary.jsx ADDED Viewed

	@@ -0,0 +1,26 @@

+import React from 'react'
+class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = { hasError: false }
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true }
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error("Markdown rendering error:", error, errorInfo)
+    }
+    render() {
+        if (this.state.hasError) {
+            return this.props.fallback || <span className="text-red-500 text-sm">⚠️ Không thể hiển thị nội dung này</span>
+        }
+        return this.props.children
+    }
+}
+export default ErrorBoundary

frontend/src/components/GuideTour.jsx ADDED Viewed

	@@ -0,0 +1,511 @@

+import React, { useState, useEffect, useMemo } from 'react';
+import Joyride, { STATUS } from 'react-joyride';
+const GuideTour = ({ darkMode, tourVersion, onTourEnd }) => {
+    const steps = useMemo(() => [
+        {
+            target: 'body',
+            title: 'Xin chào, tôi là Pochi',
+            content: 'Cùng bắt đầu khám phá không gian làm việc của bạn nhé!',
+            placement: 'center',
+            disableBeacon: true,
+        },
+        {
+            target: 'body',
+            title: 'Thao tác nhanh',
+            content: (
+                <div className="tour-shortcuts-container">
+                    <div className="shortcuts-intro">Sử dụng bàn phím để điều khiển linh hoạt:</div>
+                    <div className="shortcuts-grid">
+                        <span className="kbd-bullet">•</span>
+                        <div className="kbd-center">
+                            <span className="kbd-key">←</span>
+                            <span className="kbd-key">→</span>
+                        </div>
+                        <span className="kbd-colon">:</span>
+                        <span className="kbd-text">Điều hướng các bước.</span>
+                        <span className="kbd-bullet">•</span>
+                        <div className="kbd-center">
+                            <span className="kbd-key">Esc</span>
+                        </div>
+                        <span className="kbd-colon">:</span>
+                        <span className="kbd-text">Bỏ qua hướng dẫn nhanh.</span>
+                        <span className="kbd-bullet">•</span>
+                        <div className="kbd-center">
+                            <span className="kbd-key">Enter</span>
+                        </div>
+                        <span className="kbd-colon">:</span>
+                        <span className="kbd-text">Hoàn tất hướng dẫn.</span>
+                    </div>
+                </div>
+            ),
+            placement: 'center',
+            disableBeacon: true,
+        },
+        {
+            target: '#tour-new-chat',
+            title: 'Đoạn chat mới',
+            content: 'Nơi bạn bắt đầu những cuộc trò chuyện mới với Pochi linh hoạt và nhanh chóng.',
+            disableBeacon: true,
+        },
+        {
+            target: '#tour-chat-input-area',
+            title: 'Khung gửi tin nhắn',
+            content: 'Nhập nội dung câu hỏi, đính kèm hình ảnh để trò chuyện cùng Pochi.',
+            disableBeacon: true,
+        },
+        {
+            target: '#tour-chat-interface',
+            title: 'Giao diện trò chuyện',
+            content: 'Khu vực hiển thị nội dung trao đổi giữa bạn và Pochi một cách trực quan.',
+            disableBeacon: true,
+        },
+        {
+            target: '#tour-history-section',
+            title: 'Lịch sử trò chuyện',
+            content: 'Toàn bộ các cuộc trò chuyện của bạn đều được lưu trữ an toàn tại đây.',
+            spotlightPadding: 5,
+            disableBeacon: true,
+        },
+        {
+            target: '#tour-chat-features',
+            title: 'Tính năng nâng cao',
+            content: 'Bạn có thể ghim, đổi tên, lưu trữ hoặc xóa các cuộc trò chuyện thông qua menu này.',
+            spotlightPadding: 5,
+            disableBeacon: true,
+        },
+        {
+            target: '#tour-profile-header-avatar',
+            title: 'Cài đặt cá nhân (Header)',
+            content: 'Bạn có thể truy cập cài đặt, quản lý tài khoản hoặc đăng xuất nhanh tại logo góc trên này.',
+            spotlightPadding: 5,
+            disableBeacon: true,
+        },
+        {
+            target: '#tour-profile-sidebar-avatar',
+            title: 'Cài đặt cá nhân (Sidebar)',
+            content: 'Hoặc bạn cũng có thể thay đổi chế độ tối / sáng và xem tin nhắn lưu trữ tại logo phía dưới này.',
+            spotlightPadding: 5,
+            disableBeacon: true,
+        },
+        {
+            target: '#tour-search',
+            title: 'Tìm kiếm đoạn chat',
+            content: 'Giúp bạn tìm lại những thông tin cũ trong lịch sử trò chuyện chỉ với vài phím gõ.',
+            spotlightPadding: 5,
+            disableBeacon: true,
+        },
+        {
+            target: '#tour-toggle-sidebar',
+            title: 'Thu gọn thanh bên',
+            content: 'Tối ưu không gian làm việc bằng cách thu gọn thanh bên khi cần thiết.',
+            spotlightPadding: 5,
+            disableBeacon: true,
+        },
+        {
+            target: '#tour-help-btn',
+            title: 'Trợ giúp & Hướng dẫn',
+            content: 'Bất cứ lúc nào bạn cần, hãy nhấn vào đây để xem lại hướng dẫn sử dụng nhé!',
+            disableBeacon: true,
+        },
+        {
+            target: 'body',
+            title: 'Tổng hợp phím tắt',
+            content: (
+                <div className="tour-shortcuts-container">
+                    <div className="shortcuts-intro">Làm chủ ứng dụng qua các phím tắt nhanh:</div>
+                    <div className="shortcuts-grid">
+                        <span className="kbd-bullet">•</span>
+                        <div className="kbd-center">
+                            <span className="kbd-key">{navigator.platform.toUpperCase().indexOf('MAC') >= 0 ? '⌘' : 'Ctrl'}</span>
+                            <span className="kbd-key">F</span>
+                        </div>
+                        <span className="kbd-colon">:</span>
+                        <span className="kbd-text">Tìm kiếm trò chuyện.</span>
+                        <span className="kbd-bullet">•</span>
+                        <div className="kbd-center">
+                            <span className="kbd-key">{navigator.platform.toUpperCase().indexOf('MAC') >= 0 ? '⌘' : 'Ctrl'}</span>
+                            <span className="kbd-key">E</span>
+                        </div>
+                        <span className="kbd-colon">:</span>
+                        <span className="kbd-text">Tạo đoạn chat mới.</span>
+                        <span className="kbd-bullet">•</span>
+                        <div className="kbd-center">
+                            <span className="kbd-key">{navigator.platform.toUpperCase().indexOf('MAC') >= 0 ? '⌘' : 'Ctrl'}</span>
+                            <span className="kbd-key">K</span>
+                        </div>
+                        <span className="kbd-colon">:</span>
+                        <span className="kbd-text">Bật/tắt chế độ tối.</span>
+                        <span className="kbd-bullet">•</span>
+                        <div className="kbd-center">
+                            <span className="kbd-key">{navigator.platform.toUpperCase().indexOf('MAC') >= 0 ? '⌘' : 'Ctrl'}</span>
+                            <span className="kbd-key">X</span>
+                        </div>
+                        <span className="kbd-colon">:</span>
+                        <span className="kbd-text">Mở cài đặt chung.</span>
+                        <span className="kbd-bullet">•</span>
+                        <div className="kbd-center">
+                            <span className="kbd-key">{navigator.platform.toUpperCase().indexOf('MAC') >= 0 ? '⌘' : 'Ctrl'}</span>
+                            <span className="kbd-key">I</span>
+                        </div>
+                        <span className="kbd-colon">:</span>
+                        <span className="kbd-text">Thông tin tài khoản.</span>
+                    </div>
+                    <div style={{
+                        marginTop: '20px',
+                        fontSize: '0.95rem',
+                        fontWeight: 600,
+                        color: darkMode ? 'var(--text-secondary)' : '#4b5563',
+                        textAlign: 'center',
+                        paddingTop: '12px',
+                        borderTop: `1px solid ${darkMode ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.05)'}`
+                    }}>
+                        Ấn phím tắt <span className="kbd-key">Enter</span> để hoàn tất hướng dẫn.
+                    </div>
+                </div>
+            ),
+            placement: 'center',
+            disableBeacon: true,
+        }
+    ], [darkMode]);
+    const [run, setRun] = useState(false);
+    const [stepIndex, setStepIndex] = useState(() => {
+        const savedIndex = localStorage.getItem('tourStepIndex');
+        return (savedIndex && savedIndex !== '-1') ? parseInt(savedIndex, 10) : 0;
+    });
+    const finalizeTour = () => {
+        setRun(false);
+        setStepIndex(0);
+        localStorage.setItem('hasSeenTour', 'true');
+        localStorage.setItem('tourStepIndex', '-1');
+        if (onTourEnd) onTourEnd();
+        // Remove focus from whatever triggered the end/skip to prevent persistent focus outlines
+        if (document.activeElement && typeof document.activeElement.blur === 'function') {
+            document.activeElement.blur();
+        }
+    };
+    const handleJoyrideCallback = (data) => {
+        const { action, index, status, type, size } = data;
+        if (type === 'step:after' || type === 'target:not_found') {
+            const isLastStep = index === size - 1;
+            if (isLastStep && action === 'next') {
+                finalizeTour();
+                return;
+            }
+            const nextIndex = index + (action === 'next' ? 1 : -1);
+            if (nextIndex >= 0 && nextIndex < size) {
+                setStepIndex(nextIndex);
+                localStorage.setItem('tourStepIndex', nextIndex.toString());
+            }
+        }
+        const finishedStatuses = [STATUS.FINISHED, STATUS.SKIPPED];
+        if (finishedStatuses.includes(status)) {
+            finalizeTour();
+        }
+    };
+    useEffect(() => {
+        const hasSeenTour = localStorage.getItem('hasSeenTour');
+        const savedIndex = localStorage.getItem('tourStepIndex');
+        if (tourVersion > 0) {
+            setStepIndex(0);
+            localStorage.setItem('tourStepIndex', '0');
+            setRun(true);
+        } else if (tourVersion === -1) {
+            setRun(false);
+        } else if (!hasSeenTour || (savedIndex !== null && savedIndex !== '-1')) {
+            setRun(true);
+        } else {
+            setRun(false);
+        }
+    }, [tourVersion]);
+    useEffect(() => {
+        if (!run) return;
+        const handleKeyDown = (e) => {
+            const isLastStep = stepIndex === steps.length - 1;
+            const isFirstStep = stepIndex === 0;
+            switch (e.key) {
+                case 'ArrowRight':
+                    if (!isLastStep) {
+                        e.preventDefault();
+                        const nextIndex = stepIndex + 1;
+                        setStepIndex(nextIndex);
+                        localStorage.setItem('tourStepIndex', nextIndex.toString());
+                    }
+                    break;
+                case 'ArrowLeft':
+                    if (!isFirstStep) {
+                        e.preventDefault();
+                        const prevIndex = stepIndex - 1;
+                        setStepIndex(prevIndex);
+                        localStorage.setItem('tourStepIndex', prevIndex.toString());
+                    }
+                    break;
+                case 'Enter':
+                    e.preventDefault();
+                    if (isLastStep) {
+                        finalizeTour();
+                    }
+                    break;
+                case 'Escape':
+                    e.preventDefault();
+                    finalizeTour();
+                    break;
+                default:
+                    break;
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [run, stepIndex, steps]);
+    const CustomTooltip = ({
+        index,
+        step,
+        size,
+        backProps,
+        primaryProps,
+        skipProps,
+        tooltipProps,
+        arrowProps,
+        isLastStep
+    }) => {
+        const safeTooltipProps = tooltipProps || {};
+        const placement = safeTooltipProps['data-placement'] || step?.placement || 'bottom';
+        return (
+            <div {...safeTooltipProps} className="tour-tooltip glass" data-placement={placement}>
+                <div className="tour-header">
+                    <div className="tour-header-left">
+                        <span className="tour-progress">{index + 1} / {size}</span>
+                    </div>
+                    <div className="tour-header-right">
+                        {index > 0 && (
+                            <button {...backProps} className="tour-btn-nav tour-btn-back-header">
+                                Quay lại
+                            </button>
+                        )}
+                        <button {...primaryProps} className="tour-btn-nav tour-btn-next-header">
+                            {isLastStep ? 'Hoàn tất' : 'Tiếp theo'}
+                        </button>
+                    </div>
+                </div>
+                <div className="tour-content">
+                    {step?.title && <h4 className="tour-title">{step.title}</h4>}
+                    <div className="tour-body">{step?.content}</div>
+                </div>
+                <div className="tour-footer">
+                    {!isLastStep && (
+                        <button {...skipProps} className="tour-btn-skip">
+                            Bỏ qua
+                        </button>
+                    )}
+                </div>
+                <style dangerouslySetInnerHTML={{
+                    __html: `
+                    .tour-tooltip {
+                        max-width: 360px;
+                        padding: 20px;
+                        border-radius: 20px;
+                        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+                        font-family: 'Inter', sans-serif;
+                        color: var(--text-primary);
+                        border: 1px solid var(--border-light);
+                        position: relative;
+                        background: ${darkMode ? 'var(--bg-surface)' : '#f9fafb'} !important;
+                    }
+                    .tour-header {
+                        display: flex;
+                        align-items: center;
+                        justify-content: space-between;
+                        margin-bottom: 20px;
+                        padding-bottom: 12px;
+                        border-bottom: 1px solid var(--border-light);
+                    }
+                    .tour-header-right {
+                        display: flex;
+                        gap: 8px;
+                    }
+                    .tour-progress {
+                        font-size: 0.75rem;
+                        font-weight: 700;
+                        color: var(--brand-primary);
+                        background: var(--bg-surface-hover);
+                        padding: 4px 10px;
+                        border-radius: 12px;
+                        font-family: 'Outfit', sans-serif;
+                    }
+                    .tour-btn-nav {
+                        border: none;
+                        padding: 6px 14px;
+                        border-radius: 8px;
+                        font-weight: 700;
+                        font-size: 0.85rem;
+                        cursor: pointer;
+                        transition: background 0.2s, color 0.2s;
+                        font-family: 'Outfit', sans-serif;
+                        outline: none !important;
+                    }
+                    .tour-btn-next-header {
+                        background: var(--brand-primary);
+                        color: white;
+                    }
+                    .tour-btn-next-header:hover {
+                        background: var(--brand-hover);
+                    }
+                    .tour-btn-back-header {
+                        background: var(--bg-surface-hover);
+                        color: var(--text-secondary);
+                    }
+                    .tour-btn-back-header:hover {
+                        color: var(--text-primary);
+                        background: var(--border-light);
+                    }
+                    .tour-title {
+                        font-family: 'Outfit', sans-serif;
+                        font-size: 1.2rem;
+                        font-weight: 800;
+                        margin: 0 0 10px 0;
+                        color: var(--text-primary);
+                        letter-spacing: -0.01em;
+                    }
+                    .tour-body {
+                        font-size: 0.95rem;
+                        line-height: 1.6;
+                        color: ${darkMode ? 'var(--text-secondary)' : '#4b5563'};
+                        white-space: pre-wrap;
+                        font-weight: 600;
+                    }
+                    .tour-footer {
+                        margin-top: 16px;
+                        display: flex;
+                        justify-content: flex-start;
+                    }
+                    .tour-btn-skip {
+                        background: transparent;
+                        color: var(--text-tertiary);
+                        border: none;
+                        padding: 4px 0;
+                        font-weight: 600;
+                        font-size: 0.85rem;
+                        cursor: pointer;
+                        transition: color 0.2s;
+                        text-decoration: underline;
+                        text-underline-offset: 4px;
+                        font-family: 'Outfit', sans-serif;
+                        outline: none !important;
+                    }
+                    .tour-btn-skip:hover {
+                        color: var(--text-primary);
+                    }
+                    .kbd-key {
+                        background: ${darkMode ? '#2d2d2d' : '#ffffff'};
+                        border: 1px solid ${darkMode ? '#444' : '#94a3b8'};
+                        border-bottom-width: 3px;
+                        border-radius: 6px;
+                        padding: 1px 8px;
+                        font-size: 0.8rem;
+                        font-weight: 800;
+                        color: ${darkMode ? 'var(--text-primary)' : '#1e293b'};
+                        font-family: 'Inter', system-ui, sans-serif;
+                        display: inline-flex;
+                        align-items: center;
+                        justify-content: center;
+                        min-width: 24px;
+                        height: 24px;
+                        margin: 0 2px;
+                        box-shadow: 0 2px 0 ${darkMode ? 'rgba(0,0,0,0.5)' : 'rgba(0,0,0,0.15)'};
+                    }
+                    .tour-shortcuts-container {
+                        text-align: left;
+                        font-weight: 600;
+                    }
+                    .shortcuts-intro {
+                        margin-bottom: 12px;
+                        color: var(--text-primary);
+                    }
+                    .shortcuts-grid {
+                        display: grid;
+                        grid-template-columns: 20px 80px 10px 1fr;
+                        align-items: center;
+                        gap: 6px 0;
+                    }
+                    .kbd-bullet {
+                        color: var(--text-tertiary);
+                        font-size: 1.2rem;
+                    }
+                    .kbd-center {
+                        display: flex;
+                        justify-content: center;
+                        gap: 6px;
+                    }
+                    .kbd-colon {
+                        text-align: center;
+                        font-weight: 800;
+                        color: var(--text-secondary);
+                    }
+                    .kbd-text {
+                        padding-left: 8px;
+                        color: ${darkMode ? 'var(--text-secondary)' : '#4b5563'};
+                    }
+                `}} />
+            </div>
+        );
+    };
+    return (
+        <Joyride
+            key={tourVersion}
+            steps={steps}
+            run={run}
+            stepIndex={stepIndex}
+            continuous
+            showSkipButton
+            showProgress
+            disableOverlayClose={true}
+            disableBeacon={true}
+            disableScrolling={false}
+            tooltipComponent={CustomTooltip}
+            callback={handleJoyrideCallback}
+            styles={{
+                options: {
+                    arrowColor: 'transparent',
+                    overlayColor: 'rgba(0, 0, 0, 0.7)',
+                    zIndex: 10000,
+                },
+                spotlight: {
+                    borderRadius: 8,
+                    border: `4px dashed ${darkMode ? 'rgba(255, 255, 255, 0.7)' : '#334155'}`,
+                },
+                beacon: {
+                    display: 'none',
+                }
+            }}
+        />
+    );
+};
+export default GuideTour;

frontend/src/components/Header.jsx ADDED Viewed

	@@ -0,0 +1,160 @@

+import React, { useState, useRef, useEffect } from 'react'
+import { Share2, User, MoreHorizontal, Sparkles, ChevronDown, Edit3, Pin, Archive, Trash2, Settings, LogOut, Moon, Sun, HelpCircle } from 'lucide-react'
+const Header = ({ title, onOpenSidebar, isMobile, currentConversationId, onDeleteConversation, onRenameConversation, onRenameClick, onTogglePin, onToggleArchive, currentChat, onSettingsClick, onToggleTheme, darkMode, userProfile, onHelpClick }) => {
+    const [showMenu, setShowMenu] = useState(() => {
+        return sessionStorage.getItem('showHeaderMenu') === 'true'
+    })
+    const [showUserMenu, setShowUserMenu] = useState(() => {
+        return sessionStorage.getItem('showUserMenu') === 'true'
+    })
+    const menuRef = useRef(null)
+    const userMenuRef = useRef(null)
+    useEffect(() => {
+        sessionStorage.setItem('showHeaderMenu', showMenu)
+    }, [showMenu])
+    useEffect(() => {
+        sessionStorage.setItem('showUserMenu', showUserMenu)
+    }, [showUserMenu])
+    // Close menus when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (menuRef.current && !menuRef.current.contains(event.target)) {
+                setShowMenu(false)
+            }
+            if (userMenuRef.current && !userMenuRef.current.contains(event.target)) {
+                setShowUserMenu(false)
+            }
+        }
+        if (showMenu || showUserMenu) {
+            document.addEventListener('mousedown', handleClickOutside)
+        }
+        return () => document.removeEventListener('mousedown', handleClickOutside)
+    }, [showMenu, showUserMenu])
+    return (
+        <header className="premium-header">
+            <div className="header-left">
+                <div className="brand-wrapper">
+                    <span className="brand-name">Pochi <span className="brand-version">4.o</span></span>
+                    <ChevronDown size={16} className="brand-dropdown-icon" />
+                </div>
+            </div>
+            <div className="header-center">
+                <button className="upgrade-pill" id="tour-upgrade">
+                    <Sparkles size={14} className="sparkle-icon" />
+                    <span>Nâng cấp lên Pro</span>
+                </button>
+            </div>
+            <div className="header-right">
+                <button
+                    className="header-action-btn help-btn"
+                    id="tour-help-btn"
+                    title="Hướng dẫn sử dụng"
+                    onClick={onHelpClick}
+                    style={{ fontFamily: "'Outfit', sans-serif", fontWeight: 600 }}
+                >
+                    <HelpCircle size={18} />
+                    <span className="btn-label" style={{ marginTop: '1px' }}>Hướng dẫn</span>
+                </button>
+                <div className="user-avatar-container" ref={userMenuRef}>
+                    <div
+                        className={`user-avatar-wrapper ${showUserMenu ? 'active' : ''}`}
+                        onClick={() => setShowUserMenu(!showUserMenu)}
+                        id="tour-profile-header"
+                    >
+                        <div className="user-avatar" id="tour-profile-header-avatar">
+                            {userProfile.avatar ? (
+                                <img src={userProfile.avatar} alt="Avatar" />
+                            ) : (
+                                <div className="avatar-circle small">{userProfile?.name?.charAt(0) || 'U'}</div>
+                            )}
+                        </div>
+                    </div>
+                    {showUserMenu && (
+                        <div className="context-menu user-dropdown">
+                            <div className="user-dropdown-header">
+                                <div className="user-info">
+                                    <span className="user-name">{userProfile.name}</span>
+                                    <span className="user-email">{userProfile.email}</span>
+                                </div>
+                            </div>
+                            <div className="divider" />
+                            <button onClick={() => { onSettingsClick('account'); setShowUserMenu(false) }}>
+                                <User size={14} />
+                                <span>Tài khoản</span>
+                                <div className="shortcut-hint">
+                                    {navigator.platform.toUpperCase().indexOf('MAC') >= 0 ? '⌘I' : 'Ctrl I'}
+                                </div>
+                            </button>
+                            <button onClick={() => { onSettingsClick('general'); setShowUserMenu(false) }}>
+                                <Settings size={14} />
+                                <span>Cài đặt</span>
+                                <div className="shortcut-hint">
+                                    {navigator.platform.toUpperCase().indexOf('MAC') >= 0 ? '⌘X' : 'Ctrl X'}
+                                </div>
+                            </button>
+                            <button onClick={() => { onToggleTheme() }}>
+                                {darkMode ? <Sun size={14} /> : <Moon size={14} />}
+                                <span>{darkMode ? 'Chế độ sáng' : 'Chế độ tối'}</span>
+                                <div className="shortcut-hint">
+                                    {navigator.platform.toUpperCase().indexOf('MAC') >= 0 ? '⌘K' : 'Ctrl K'}
+                                </div>
+                            </button>
+                            <div className="divider" />
+                            <button className="danger" onClick={() => setShowUserMenu(false)}>
+                                <LogOut size={14} /> Đăng xuất
+                            </button>
+                        </div>
+                    )}
+                </div>
+                <div className="header-menu-container" ref={menuRef}>
+                    <button
+                        className={`header-icon-btn more-btn ${showMenu ? 'active' : ''}`}
+                        onClick={() => setShowMenu(!showMenu)}
+                        disabled={!currentConversationId}
+                        id="tour-chat-features"
+                    >
+                        <MoreHorizontal size={20} />
+                    </button>
+                    {showMenu && currentConversationId && (
+                        <div className="context-menu header-dropdown">
+                            <button onClick={() => {
+                                onRenameClick()
+                                setShowMenu(false)
+                            }}>
+                                <Edit3 size={14} /> Đổi tên
+                            </button>
+                            <button onClick={() => { onTogglePin(currentConversationId); setShowMenu(false) }}>
+                                <Pin size={14} className={currentChat?.isPinned ? 'fill-current' : ''} />
+                                {currentChat?.isPinned ? 'Bỏ ghim' : 'Ghim'}
+                            </button>
+                            <button onClick={() => { onToggleArchive(currentConversationId); setShowMenu(false) }}>
+                                <Archive size={14} />
+                                {currentChat?.isArchived ? 'Bỏ lưu trữ' : 'Lưu trữ'}
+                            </button>
+                            <div className="divider" />
+                            <button
+                                onClick={() => { onDeleteConversation(currentConversationId); setShowMenu(false) }}
+                                className="danger"
+                            >
+                                <Trash2 size={14} /> Xóa
+                            </button>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </header>
+    )
+}
+export default Header

frontend/src/components/MessageList.jsx ADDED Viewed

	@@ -0,0 +1,483 @@

+import React, { useState, useEffect, useRef, useCallback, useLayoutEffect } from 'react'
+import ReactMarkdown from 'react-markdown'
+import remarkMath from 'remark-math'
+import remarkGfm from 'remark-gfm'
+import rehypeKatex from 'rehype-katex'
+import { Copy, Check, ChevronDown, ChevronUp, Bot, User, FileText, FileDown, FileCode, Download } from 'lucide-react'
+import { jsPDF } from 'jspdf'
+import html2canvas from 'html2canvas'
+import { preprocessLaTeX, parseMessageContent } from '../utils/chatUtils'
+import ErrorBoundary from './ErrorBoundary'
+const MessageFooter = ({ role, onCopy, onToggleExpand, isExpanded, isOverflow, copiedId, idx, onExportMD, onExportPDF, onExportLaTeX }) => {
+    const [showMenu, setShowMenu] = useState(false)
+    return (
+        <div className="message-footer">
+            {isOverflow && (
+                <button className="footer-btn expand-toggle" onClick={onToggleExpand} title={isExpanded ? "Thu gọn" : "Xem thêm"}>
+                    {isExpanded ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
+                </button>
+            )}
+            <div className="footer-actions-right">
+                <button
+                    onClick={onCopy}
+                    title="Sao chép"
+                    className={`footer-btn copy-btn ${copiedId === idx ? 'copied' : ''}`}
+                >
+                    {copiedId === idx ? <Check size={16} /> : <Copy size={16} />}
+                    {copiedId === idx && <span className="copy-toast">Đã copy</span>}
+                </button>
+                {role === 'assistant' && (
+                    <div className="export-dropdown-wrapper">
+                        <button
+                            className="footer-btn export-trigger"
+                            onClick={() => setShowMenu(!showMenu)}
+                            title="Tải về"
+                        >
+                            <Download size={16} />
+                        </button>
+                        {showMenu && (
+                            <div className="export-menu" onMouseLeave={() => setShowMenu(false)}>
+                                <button onClick={() => { onExportMD(); setShowMenu(false); }}>
+                                    <FileText size={14} /> <span>Markdown (.md)</span>
+                                </button>
+                                <button onClick={() => { onExportLaTeX(); setShowMenu(false); }}>
+                                    <FileCode size={14} /> <span>LaTeX (.tex)</span>
+                                </button>
+                                <button onClick={() => { onExportPDF(); setShowMenu(false); }}>
+                                    <FileDown size={14} /> <span>PDF (.pdf)</span>
+                                </button>
+                            </div>
+                        )}
+                    </div>
+                )}
+            </div>
+        </div>
+    )
+}
+const CollapsibleContent = ({ content, messageId, maxLines = 12, isStreaming = false, children }) => {
+    const [expanded, setExpanded] = useState(() => {
+        if (!messageId) return false
+        return localStorage.getItem(messageId) === 'true'
+    })
+    // Maintain expanded state after streaming finishes for the current session
+    const [wasStreaming, setWasStreaming] = useState(false)
+    useEffect(() => {
+        if (isStreaming && !wasStreaming) {
+            setWasStreaming(true)
+            setExpanded(true)
+        }
+    }, [isStreaming, wasStreaming])
+    const [isOverflow, setIsOverflow] = useState(false)
+    const contentRef = useRef(null)
+    useEffect(() => {
+        if (contentRef.current) {
+            const lineHeight = parseFloat(getComputedStyle(contentRef.current).lineHeight)
+            const maxHeight = lineHeight * maxLines
+            setIsOverflow(contentRef.current.scrollHeight > maxHeight + 10)
+        }
+    }, [content, maxLines])
+    const toggleExpand = () => {
+        const nextState = !expanded
+        setExpanded(nextState)
+        if (messageId) {
+            localStorage.setItem(messageId, String(nextState))
+        }
+    }
+    return (
+        <div className={`collapsible-content ${expanded ? 'expanded' : ''} ${isOverflow && !expanded ? 'truncated' : ''}`}>
+            <div
+                ref={contentRef}
+                className="content-inner message-content"
+                style={(!expanded && isOverflow && !isStreaming) ? { maxHeight: `${maxLines * 1.7}em`, overflow: 'hidden' } : {}}
+            >
+                <ErrorBoundary>
+                    <ReactMarkdown
+                        remarkPlugins={[remarkMath, remarkGfm]}
+                        rehypePlugins={[[rehypeKatex, { strict: false, trust: true, throwOnError: false }]]}
+                        components={{
+                            a: ({ node, ...props }) => <a {...props} target="_blank" rel="noopener noreferrer" />
+                        }}
+                    >
+                        {preprocessLaTeX(parseMessageContent(content))}
+                    </ReactMarkdown>
+                </ErrorBoundary>
+            </div>
+            {children({ isOverflow, isExpanded: expanded, onToggleExpand: toggleExpand })}
+        </div>
+    )
+}
+const MessageList = ({
+    messages,
+    isLoading,
+    conversationId,
+    onExampleClick,
+    onImageClick,
+    userAvatar,
+    userName = 'User'
+}) => {
+    const messagesEndRef = useRef(null)
+    const containerRef = useRef(null)
+    const [showScrollBtn, setShowScrollBtn] = useState(false)
+    const [isRestored, setIsRestored] = useState(false)
+    const [isTransitioning, setIsTransitioning] = useState(false)
+    const scrollPositionsRef = useRef({}) // Persistent in-memory scroll storage
+    const prevConversationId = useRef(conversationId)
+    const prevMessagesLengthRef = useRef(0)
+    const prevStreamingRef = useRef(false)
+    const [copiedId, setCopiedId] = useState(null)
+    const pdfExportRef = useRef(null)
+    const [exportingIndex, setExportingIndex] = useState(null)
+    const scrollToBottom = (behavior = 'smooth') => {
+        if (containerRef.current) {
+            const container = containerRef.current
+            if (behavior === 'smooth') {
+                // Use requestAnimationFrame to ensure React has rendered the new content
+                requestAnimationFrame(() => {
+                    container.scrollTo({
+                        top: container.scrollHeight,
+                        behavior: 'smooth'
+                    })
+                })
+            } else {
+                container.scrollTop = container.scrollHeight
+            }
+        }
+    }
+    const handleScroll = useCallback(() => {
+        if (containerRef.current && conversationId && isRestored && !isTransitioning) {
+            const { scrollTop, scrollHeight, clientHeight } = containerRef.current
+            // Save to both Ref (instant access) and SessionStorage (persistence)
+            scrollPositionsRef.current[conversationId] = scrollTop
+            sessionStorage.setItem(`scroll_${conversationId}`, String(scrollTop))
+            setShowScrollBtn(scrollHeight - scrollTop - clientHeight > 100)
+        }
+    }, [conversationId, isRestored, isTransitioning])
+    // Detect Session Change
+    useLayoutEffect(() => {
+        if (prevConversationId.current !== conversationId) {
+            // Store current position before switching
+            if (containerRef.current && prevConversationId.current) {
+                scrollPositionsRef.current[prevConversationId.current] = containerRef.current.scrollTop
+            }
+            setIsRestored(false)
+            setIsTransitioning(true)
+            prevConversationId.current = conversationId
+            prevMessagesLengthRef.current = 0
+        }
+    }, [conversationId])
+    // Restore Scroll Position
+    useLayoutEffect(() => {
+        if (!containerRef.current || messages.length === 0 || !conversationId) {
+            if (messages.length === 0 && conversationId) {
+                setIsTransitioning(false) // No messages, nothing to restore
+                setIsRestored(true)
+            }
+            return
+        }
+        if (isRestored) return
+        const container = containerRef.current
+        // Priority: Ref -> SessionStorage -> Bottom
+        const savedScroll = scrollPositionsRef.current[conversationId] ??
+            sessionStorage.getItem(`scroll_${conversationId}`)
+        // Use 'auto' behavior for instant restoration (no jump)
+        if (savedScroll !== null) {
+            container.scrollTo({
+                top: parseInt(savedScroll, 10),
+                behavior: 'auto'
+            })
+        } else {
+            container.scrollTo({
+                top: container.scrollHeight,
+                behavior: 'auto'
+            })
+        }
+        // Force a layout reflow to ensure scroll is applied before showing
+        void container.offsetHeight
+        // If it's a session switch (isTransitioning), we use a small delay to hide the "jump"
+        if (isTransitioning) {
+            const timer = setTimeout(() => {
+                setIsRestored(true)
+                setIsTransitioning(false)
+                prevMessagesLengthRef.current = messages.length
+            }, 50)
+            return () => clearTimeout(timer)
+        } else {
+            // --- REFRESH CASE (INITIAL LOAD) ---
+            // Set isRestored to true to start animations
+            // Set prevMessagesLength to 0 to make ALL messages animate from the start
+            setIsRestored(true)
+            prevMessagesLengthRef.current = 0
+        }
+    }, [messages.length, conversationId, isRestored, isTransitioning])
+    const isInitialLoadRef = useRef(true)
+    // Handle New Messages
+    useEffect(() => {
+        if (!isRestored || isTransitioning || messages.length === 0) return
+        const isNewMessage = messages.length > prevMessagesLengthRef.current
+        // If it's the initial load (refresh), we want animations but NOT auto-scroll
+        if (isInitialLoadRef.current) {
+            isInitialLoadRef.current = false
+            prevMessagesLengthRef.current = messages.length
+            return
+        }
+        const lastMessage = messages[messages.length - 1]
+        const isUserMessage = lastMessage?.role === 'user'
+        if (isNewMessage) {
+            // Always scroll to bottom for user messages
+            // For bot messages, only scroll if already at bottom (sticky)
+            if (isUserMessage || !showScrollBtn) {
+                scrollToBottom('smooth')
+            }
+        }
+        prevMessagesLengthRef.current = messages.length
+    }, [messages.length, showScrollBtn, isRestored, isTransitioning])
+    // Auto-scroll during streaming to keep user's view locked on new content
+    const lastMessageContent = messages[messages.length - 1]?.content
+    const isLastMessageStreaming = messages[messages.length - 1]?.isStreaming
+    useEffect(() => {
+        if (!containerRef.current) return
+        if (isLastMessageStreaming) {
+            // "Sticky Scroll": Only auto-scroll if user is already near the bottom
+            // !showScrollBtn means distance to bottom < 100px
+            if (!showScrollBtn) {
+                containerRef.current.scrollTop = containerRef.current.scrollHeight
+            }
+        } else if (prevStreamingRef.current) {
+            // Just finished streaming - do one final sync to be sure
+            // but only if the user didn't scroll too far up
+            if (!showScrollBtn) {
+                scrollToBottom('smooth')
+            }
+        }
+        prevStreamingRef.current = isLastMessageStreaming
+    }, [lastMessageContent, isLastMessageStreaming, showScrollBtn])
+    const copyToClipboard = (text, idx) => {
+        navigator.clipboard.writeText(text)
+        setCopiedId(idx)
+        setTimeout(() => setCopiedId(null), 2000)
+    }
+    const exportToMarkdown = (content, idx) => {
+        const blob = new Blob([content], { type: 'text/markdown' })
+        const url = URL.createObjectURL(blob)
+        const a = document.createElement('a')
+        a.href = url
+        a.download = `chat-answer-${idx + 1}.md`
+        document.body.appendChild(a)
+        a.click()
+        document.body.removeChild(a)
+        URL.revokeObjectURL(url)
+    }
+    const exportToLaTeX = (content, idx) => {
+        const texContent = `\\documentclass{article}\n\\usepackage[utf8]{inputenc}\n\\usepackage{amsmath}\n\n\\begin{document}\n${content}\n\\end{document}`
+        const blob = new Blob([texContent], { type: 'text/x-tex' })
+        const url = URL.createObjectURL(blob)
+        const a = document.createElement('a')
+        a.href = url
+        a.download = `chat-answer-${idx + 1}.tex`
+        document.body.appendChild(a)
+        a.click()
+        document.body.removeChild(a)
+        URL.revokeObjectURL(url)
+    }
+    const exportToPDF = async (idx) => {
+        setExportingIndex(idx)
+        // Wait for DOM to update the hidden element
+        setTimeout(async () => {
+            if (!pdfExportRef.current) return
+            try {
+                const canvas = await html2canvas(pdfExportRef.current, {
+                    scale: 3,
+                    useCORS: true,
+                    backgroundColor: '#ffffff',
+                    logging: false,
+                })
+                const imgData = canvas.toDataURL('image/png')
+                const pdfWidth = 595.28
+                const pdfHeight = 841.89
+                const pdf = new jsPDF('p', 'pt', 'a4')
+                const margin = 0 // Container already has padding
+                const innerWidth = pdfWidth
+                const imgProps = pdf.getImageProperties(imgData)
+                const imgHeight = (imgProps.height * innerWidth) / imgProps.width
+                let heightLeft = imgHeight
+                let position = 0
+                pdf.addImage(imgData, 'PNG', 0, position, innerWidth, imgHeight)
+                heightLeft -= pdfHeight
+                while (heightLeft >= 0) {
+                    pdf.addPage()
+                    position = heightLeft - imgHeight
+                    pdf.addImage(imgData, 'PNG', 0, position, innerWidth, imgHeight)
+                    heightLeft -= pdfHeight
+                }
+                pdf.save(`chat-answer-${idx + 1}.pdf`)
+                setExportingIndex(null)
+            } catch (error) {
+                console.error('PDF Export failed:', error)
+                setExportingIndex(null)
+            }
+        }, 100)
+    }
+    if (messages.length === 0) {
+        return (
+            <div className="welcome-screen">
+                <div id="tour-chat-interface" className="tour-chat-spotlight"></div>
+                <div className="welcome-icon">
+                    <img src="/calculus-icon.png" alt="Icon" onError={(e) => e.target.style.display = 'none'} />
+                    <div className="p-4 bg-indigo-100 rounded-full dark:bg-indigo-900/30" style={{ display: 'none' }}>
+                        <Bot size={48} className="text-indigo-600 dark:text-indigo-400" />
+                    </div>
+                </div>
+                <h2>Xin chào, tôi có thể giúp gì?</h2>
+                <p>Tôi là trợ lý AI chuyên về giải tích và toán học.<br />Hãy gửi bài toán hoặc câu hỏi của bạn để bắt đầu.</p>
+                <div className="example-prompts">
+                    <button onClick={() => onExampleClick('Tính đạo hàm của hàm số y = x³ - 3x + 2')}>Tính đạo hàm của hàm số y = x³ - 3x + 2</button>
+                    <button onClick={() => onExampleClick('Tính tích phân của hàm số f(x) = sin(x) từ 0 đến π')}>Tính tích phân của hàm số f(x) = sin(x) từ 0 đến π</button>
+                    <button onClick={() => onExampleClick('Tìm cực trị của hàm số y = x⁴ - 2x²')}>Tìm cực trị của hàm số y = x⁴ - 2x²</button>
+                </div>
+            </div>
+        )
+    }
+    return (
+        <div className="messages-section">
+            <div id="tour-chat-interface" className="tour-chat-spotlight"></div>
+            <div
+                className={`messages-container ${isTransitioning ? 'transitioning' : ''}`}
+                ref={containerRef}
+                onScroll={handleScroll}
+            >
+                {messages.map((msg, idx) => (
+                    <div
+                        key={`${idx}-${msg.role}`}
+                        className={`message ${msg.role} ${msg.isStreaming ? 'streaming' : ''} ${isRestored && idx >= prevMessagesLengthRef.current - 1 ? 'animate-msg-slide-up' : ''}`}
+                        style={{ animationDelay: isRestored ? `${Math.min((idx - (prevMessagesLengthRef.current - 1)) * 0.05, 0.5)}s` : '0s' }}
+                    >
+                        {/* Avatar removed */}
+                        <div className="message-body">
+                            {msg.status && <div className="agent-status-badge">{msg.status}</div>}
+                            {msg.images && msg.images.length > 0 && (
+                                <div className="message-images-list">
+                                    {msg.images.map((src, i) => (
+                                        <div key={i} className="message-image-preview" onClick={() => onImageClick(msg.images, i)}>
+                                            <img src={src} alt={`Attachment ${i}`} />
+                                        </div>
+                                    ))}
+                                </div>
+                            )}
+                            {msg.content ? (
+                                <CollapsibleContent
+                                    content={msg.content}
+                                    messageId={conversationId ? `expand_${conversationId}_${idx}` : null}
+                                    isStreaming={msg.isStreaming}
+                                >
+                                    {({ isOverflow, isExpanded, onToggleExpand }) => (
+                                        <MessageFooter
+                                            role={msg.role}
+                                            isOverflow={isOverflow}
+                                            isExpanded={isExpanded}
+                                            onToggleExpand={onToggleExpand}
+                                            onCopy={() => copyToClipboard(msg.content, idx)}
+                                            onExportMD={() => exportToMarkdown(msg.content, idx)}
+                                            onExportPDF={() => exportToPDF(idx)}
+                                            onExportLaTeX={() => exportToLaTeX(msg.content, idx)}
+                                            copiedId={copiedId}
+                                            idx={idx}
+                                        />
+                                    )}
+                                </CollapsibleContent>
+                            ) : msg.role === 'assistant' ? (
+                                <div className="thinking-indicator"><span></span><span></span><span></span>Đang suy nghĩ...</div>
+                            ) : (
+                                <span className="text-gray-400 italic">...</span>
+                            )}
+                        </div>
+                    </div>
+                ))}
+                <div ref={messagesEndRef} />
+            </div>
+            {/* Hidden Premium PDF Layout Component */}
+            {exportingIndex !== null && (
+                <div className="pdf-export-container" ref={pdfExportRef}>
+                    {/* Background Watermark */}
+                    <div className="pdf-watermark">POCHI</div>
+                    <div className="pdf-header">
+                        <div className="pdf-brand">POCHI</div>
+                        <div className="pdf-meta">
+                            <div>Assistant Export</div>
+                            <div>{new Date().toLocaleDateString('vi-VN')}</div>
+                        </div>
+                    </div>
+                    <div className="pdf-content">
+                        <ReactMarkdown
+                            remarkPlugins={[remarkMath, remarkGfm]}
+                            rehypePlugins={[[rehypeKatex, { strict: false, trust: true, throwOnError: false }]]}
+                        >
+                            {preprocessLaTeX(parseMessageContent(messages[exportingIndex].content))}
+                        </ReactMarkdown>
+                    </div>
+                    <div className="pdf-footer">
+                        Tài liệu được tạo bởi Pochi
+                    </div>
+                </div>
+            )}
+            {showScrollBtn && (
+                <button className="scroll-to-bottom" onClick={() => scrollToBottom('smooth')}>
+                    <ChevronDown size={20} />
+                </button>
+            )}
+        </div>
+    )
+}
+export default MessageList

frontend/src/components/Modals.jsx ADDED Viewed

	@@ -0,0 +1,596 @@

+import React, { useState, useEffect, useMemo } from 'react'
+import { Search, X, MessageSquare, Clock, ChevronLeft, ChevronRight, ZoomIn, ZoomOut, Maximize, Download, RotateCcw, Settings, User, Sun, Edit, Archive } from 'lucide-react'
+export const SearchModal = ({ onSelect, onClose, conversations = [], isRestored = false }) => {
+    // Lock in the initial isRestored value to prevent re-triggering animations if App re-renders
+    const [wasRestored] = useState(isRestored)
+    const [query, setQuery] = useState(() => {
+        return sessionStorage.getItem('searchQuery') || ''
+    })
+    const [results, setResults] = useState([])
+    const [isLoading, setIsLoading] = useState(false)
+    const [debouncedQuery, setDebouncedQuery] = useState('')
+    useEffect(() => {
+        sessionStorage.setItem('searchQuery', query)
+        const timer = setTimeout(() => setDebouncedQuery(query), 300)
+        return () => clearTimeout(timer)
+    }, [query])
+    useEffect(() => {
+        if (!debouncedQuery || debouncedQuery.trim().length < 1) {
+            setResults([])
+            return
+        }
+        const fetchResults = async () => {
+            setIsLoading(true)
+            try {
+                const res = await fetch(`http://localhost:7860/api/search?q=${encodeURIComponent(debouncedQuery)}`)
+                if (res.ok) {
+                    const data = await res.json()
+                    setResults(data)
+                }
+            } catch (error) {
+                console.error("Search failed", error)
+            } finally {
+                setIsLoading(false)
+            }
+        }
+        fetchResults()
+    }, [debouncedQuery])
+    const groupedConversations = React.useMemo(() => {
+        if (query.trim().length >= 1) return null;
+        const groups = { today: [], yesterday: [], last7Days: [], older: [] }
+        const now = new Date()
+        const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+        const yesterday = new Date(today)
+        yesterday.setDate(yesterday.getDate() - 1)
+        const last7Days = new Date(today)
+        last7Days.setDate(last7Days.getDate() - 7)
+        conversations.forEach(conv => {
+            const dateStr = conv.updated_at || conv.created_at
+            if (!dateStr) { groups.older.push(conv); return; }
+            const date = new Date(dateStr)
+            if (date >= today) groups.today.push(conv)
+            else if (date >= yesterday) groups.yesterday.push(conv)
+            else if (date >= last7Days) groups.last7Days.push(conv)
+            else groups.older.push(conv)
+        })
+        return groups
+    }, [conversations, query])
+    useEffect(() => {
+        const handleEsc = (e) => { if (e.key === 'Escape') onClose() }
+        window.addEventListener('keydown', handleEsc)
+        return () => window.removeEventListener('keydown', handleEsc)
+    }, [onClose])
+    const highlightText = (text, highlight) => {
+        if (!highlight) return text
+        // Function to strip Vietnamese accents for matching
+        const stripAccents = (str) => {
+            return str.normalize('NFD')
+                .replace(/[\u0300-\u036f]/g, "")
+                .replace(/đ/g, "d")
+                .replace(/Đ/g, "D");
+        }
+        const normalizedText = stripAccents(text.toLowerCase())
+        const normalizedQuery = stripAccents(highlight.toLowerCase())
+        if (!normalizedText.includes(normalizedQuery)) return text
+        const parts = []
+        let lastIdx = 0
+        let idx = normalizedText.indexOf(normalizedQuery)
+        while (idx !== -1) {
+            // Push non-matching part
+            parts.push(text.substring(lastIdx, idx))
+            // Push matching part with original formatting
+            const matchedContent = text.substring(idx, idx + highlight.length)
+            parts.push(
+                <span key={idx} className="bg-brand-primary/20 text-brand-primary rounded px-0.5">
+                    {text.substring(idx, idx + highlight.length)}
+                </span>
+            )
+            lastIdx = idx + highlight.length
+            idx = normalizedText.indexOf(normalizedQuery, lastIdx)
+        }
+        parts.push(text.substring(lastIdx))
+        return parts
+    }
+    const renderGroup = (title, items) => {
+        if (!items || items.length === 0) return null
+        return (
+            <div className="search-group">
+                <h3 className="group-title">{title}</h3>
+                <div className="group-items">
+                    {items.map(conv => (
+                        <button
+                            key={conv.id}
+                            onClick={() => { onSelect(conv.id); onClose(); }}
+                            className="search-result-item"
+                        >
+                            <div className="item-icon">
+                                <MessageSquare size={14} />
+                            </div>
+                            <span className="item-title truncate">{conv.title || 'Đoạn chat mới'}</span>
+                        </button>
+                    ))}
+                </div>
+            </div>
+        )
+    }
+    return (
+        <div className={`modal-overlay centered ${wasRestored ? 'no-animation' : ''}`} onClick={onClose}>
+            <div className={`search-modal-container glass ${wasRestored ? 'no-animation' : ''}`} onClick={e => e.stopPropagation()}>
+                <div className="search-modal-header">
+                    <Search className="w-5 h-5 text-text-tertiary" />
+                    <input
+                        type="text"
+                        placeholder="Tìm kiếm tin nhắn, hội thoại..."
+                        className="search-input"
+                        value={query}
+                        onChange={e => setQuery(e.target.value)}
+                        autoFocus
+                    />
+                    <div className="search-shortcut">ESC</div>
+                </div>
+                <div className="search-modal-content custom-scrollbar">
+                    {query.trim().length >= 1 ? (
+                        <div className="p-2">
+                            {results.length > 0 ? (
+                                <div className="flex flex-col gap-1">
+                                    {results.map((item) => (
+                                        <button
+                                            key={`${item.type}-${item.id}`}
+                                            onClick={() => { onSelect(item.conversation_id || item.id); onClose(); }}
+                                            className="search-result-item"
+                                        >
+                                            <div className="item-icon">
+                                                {item.type === 'conversation' ? <MessageSquare size={14} /> : <Search size={14} />}
+                                            </div>
+                                            <div className="flex-1 min-w-0">
+                                                <div className="flex items-center justify-between gap-2">
+                                                    <span className="item-title font-medium text-sm truncate">{highlightText(item.title, debouncedQuery)}</span>
+                                                    <span className="item-date text-[10px] opacity-40 uppercase">{new Date(item.created_at).toLocaleDateString()}</span>
+                                                </div>
+                                                {item.content && (
+                                                    <p className="text-xs opacity-60 line-clamp-1 mt-0.5">{highlightText(item.content, debouncedQuery)}</p>
+                                                )}
+                                            </div>
+                                        </button>
+                                    ))}
+                                </div>
+                            ) : (!isLoading && query.trim() === debouncedQuery.trim()) ? (
+                                <div className="empty-state">Không tìm thấy kết quả nào cho "{query}"</div>
+                            ) : null}
+                        </div>
+                    ) : (
+                        <div className="py-2">
+                            {groupedConversations && Object.entries(groupedConversations).map(([key, items]) => {
+                                const labels = { today: 'Hôm nay', yesterday: 'Hôm qua', last7Days: '7 ngày qua', older: 'Cũ hơn' }
+                                return renderGroup(labels[key], items)
+                            })}
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    )
+}
+export const SettingsModal = ({
+    onClose,
+    darkMode,
+    onToggleTheme,
+    archivedSessions = [],
+    onRestoreSession,
+    onUpdateProfile,
+    userProfile,
+    initialTab = 'general',
+    isRestored = false,
+    onTabChange
+}) => {
+    // Lock in the initial isRestored value to prevent re-triggering animations if App re-renders
+    const [wasRestored] = useState(isRestored)
+    const [activeTab, setActiveTab] = useState(initialTab)
+    const [editName, setEditName] = useState(userProfile.name)
+    const [editEmail, setEditEmail] = useState(userProfile.email)
+    const [editAvatar, setEditAvatar] = useState(userProfile.avatar)
+    const [isSaving, setIsSaving] = useState(false)
+    const [showUnsavedWarning, setShowUnsavedWarning] = useState(false)
+    const [pendingAction, setPendingAction] = useState(null) // { type: 'tab', value: '...' } or { type: 'close' }
+    const tabs = [
+        { id: 'general', label: 'Chung', icon: Settings },
+        { id: 'account', label: 'Tài khoản', icon: User },
+        { id: 'appearance', label: 'Giao diện', icon: Sun },
+        { id: 'archived', label: 'Lưu trữ', icon: Archive }
+    ]
+    const hasUnsavedChanges = useMemo(() => {
+        return editName !== userProfile.name ||
+            editEmail !== userProfile.email ||
+            editAvatar !== userProfile.avatar
+    }, [editName, editEmail, editAvatar, userProfile])
+    const handleTabClick = (tabId) => {
+        if (activeTab === 'account' && hasUnsavedChanges) {
+            setPendingAction({ type: 'tab', value: tabId })
+            setShowUnsavedWarning(true)
+        } else {
+            setActiveTab(tabId)
+            if (onTabChange) onTabChange(tabId)
+        }
+    }
+    const handleCloseClick = () => {
+        if (activeTab === 'account' && hasUnsavedChanges) {
+            setPendingAction({ type: 'close' })
+            setShowUnsavedWarning(true)
+        } else {
+            onClose()
+        }
+    }
+    const handleDiscard = () => {
+        // Reset local state to original
+        setEditName(userProfile.name)
+        setEditEmail(userProfile.email)
+        setEditAvatar(userProfile.avatar)
+        setShowUnsavedWarning(false)
+        if (pendingAction.type === 'tab') {
+            setActiveTab(pendingAction.value)
+            if (onTabChange) onTabChange(pendingAction.value)
+        } else if (pendingAction.type === 'close') {
+            onClose()
+        }
+    }
+    const handleSaveAndContinue = async () => {
+        setIsSaving(true)
+        await onUpdateProfile({ name: editName, email: editEmail, avatar: editAvatar })
+        setIsSaving(false)
+        setShowUnsavedWarning(false)
+        if (pendingAction.type === 'tab') {
+            setActiveTab(pendingAction.value)
+        } else if (pendingAction.type === 'close') {
+            onClose()
+        }
+    }
+    return (
+        <div className={`modal-overlay centered ${wasRestored ? 'no-animation' : ''}`} onClick={handleCloseClick}>
+            <div className={`settings-container glass ${wasRestored ? 'no-animation' : ''}`} onClick={e => e.stopPropagation()}>
+                {/* Sidebar Tabs */}
+                <div className="settings-nav">
+                    <div className="nav-title">Cài đặt</div>
+                    <div className="nav-items">
+                        {tabs.map(tab => (
+                            <button
+                                key={tab.id}
+                                className={`nav-tab ${activeTab === tab.id ? 'active' : ''}`}
+                                onClick={() => handleTabClick(tab.id)}
+                            >
+                                <tab.icon size={18} />
+                                <span>{tab.label}</span>
+                            </button>
+                        ))}
+                    </div>
+                </div>
+                <button className="body-close" onClick={handleCloseClick}><X size={20} /></button>
+                {/* Main Content */}
+                <div className="settings-body">
+                    <div className="body-content custom-scrollbar">
+                        <header className="content-header">
+                            <h2>{tabs.find(t => t.id === activeTab).label}</h2>
+                        </header>
+                        {activeTab === 'general' && (
+                            <div className="content-section">
+                                <section className="setting-group">
+                                    <div className="group-info">
+                                        <h3>Dữ liệu huấn luyện</h3>
+                                        <p>Đóng góp các cuộc hội thoại để cải thiện mô hình AI cho mọi người.</p>
+                                    </div>
+                                    <div className="group-action">
+                                        <button className="toggle-pill on">Bật</button>
+                                    </div>
+                                </section>
+                                <section className="setting-group">
+                                    <div className="group-info">
+                                        <h3>Lưu trữ hội thoại</h3>
+                                        <p>Tự động lưu lịch sử chat vào tài khoản của bạn.</p>
+                                    </div>
+                                    <div className="group-action">
+                                        <button className="toggle-pill on">Bật</button>
+                                    </div>
+                                </section>
+                            </div>
+                        )}
+                        {activeTab === 'account' && (
+                            <div className="content-section">
+                                <div className="user-profile-card editing">
+                                    <div className="card-avatar large">
+                                        {editAvatar ? <img src={editAvatar} alt="Avatar" /> : <div className="avatar-placeholder large">{editName.charAt(0)}</div>}
+                                        <label className="avatar-edit-overlay">
+                                            <Edit size={16} />
+                                            <span>Thay đổi</span>
+                                            <input type="file" hidden accept="image/*" onChange={e => {
+                                                const file = e.target.files[0]
+                                                if (file) {
+                                                    const reader = new FileReader()
+                                                    reader.onloadend = () => {
+                                                        setEditAvatar(reader.result)
+                                                    }
+                                                    reader.readAsDataURL(file)
+                                                }
+                                            }} />
+                                        </label>
+                                    </div>
+                                    <div className="card-form">
+                                        <div className="form-group">
+                                            <label>Họ và tên</label>
+                                            <input
+                                                type="text"
+                                                value={editName}
+                                                onChange={e => setEditName(e.target.value)}
+                                                placeholder="Nhập tên của bạn"
+                                            />
+                                        </div>
+                                        <div className="form-group">
+                                            <label>Email</label>
+                                            <input
+                                                type="email"
+                                                value={editEmail}
+                                                onChange={e => setEditEmail(e.target.value)}
+                                                placeholder="social@example.com"
+                                            />
+                                        </div>
+                                        <button
+                                            className={`save-profile-btn ${hasUnsavedChanges ? 'active' : ''}`}
+                                            disabled={isSaving || !hasUnsavedChanges}
+                                            onClick={() => {
+                                                setIsSaving(true)
+                                                onUpdateProfile({ name: editName, email: editEmail, avatar: editAvatar })
+                                                setTimeout(() => setIsSaving(false), 500)
+                                            }}
+                                        >
+                                            {isSaving ? 'Đang lưu...' : 'Lưu thay đổi'}
+                                        </button>
+                                    </div>
+                                </div>
+                                <div className="account-danger-zone">
+                                    <button className="danger-btn-outline">Đăng xuất khỏi tất cả các thiết bị</button>
+                                    <button className="danger-text">Xóa tài khoản</button>
+                                </div>
+                            </div>
+                        )}
+                        {activeTab === 'appearance' && (
+                            <div className="content-section">
+                                <div className="appearance-grid">
+                                    <button
+                                        className={`theme-card ${!darkMode ? 'active' : ''}`}
+                                        onClick={() => !darkMode || onToggleTheme()}
+                                    >
+                                        <div className="theme-preview light" />
+                                        <span>Giao diện sáng</span>
+                                    </button>
+                                    <button
+                                        className={`theme-card ${darkMode ? 'active' : ''}`}
+                                        onClick={() => darkMode || onToggleTheme()}
+                                    >
+                                        <div className="theme-preview dark" />
+                                        <span>Giao diện tối</span>
+                                    </button>
+                                </div>
+                            </div>
+                        )}
+                        {activeTab === 'archived' && (
+                            <div className="content-section">
+                                {archivedSessions.length > 0 ? (
+                                    <div className="archived-list">
+                                        {archivedSessions.map(session => (
+                                            <div key={session.id} className="archived-row">
+                                                <div className="row-info">
+                                                    <span className="row-title">{session.title || 'Không có tiêu đề'}</span>
+                                                    <span className="row-date">{new Date(session.created_at).toLocaleDateString()}</span>
+                                                </div>
+                                                <button
+                                                    className="restore-btn"
+                                                    onClick={() => onRestoreSession(session.id)}
+                                                    title="Khôi phục"
+                                                >
+                                                    <Archive size={14} />
+                                                    Khôi phục
+                                                </button>
+                                            </div>
+                                        ))}
+                                    </div>
+                                ) : (
+                                    <div className="empty-state">
+                                        <Clock size={40} className="mb-4 opacity-20" />
+                                        <p>Không có hội thoại nào được lưu trữ</p>
+                                    </div>
+                                )}
+                            </div>
+                        )}
+                    </div>
+                </div>
+                {/* Unsaved Changes Warning Overlay */}
+                {showUnsavedWarning && (
+                    <div className="unsaved-warning-overlay glass">
+                        <div className="warning-content">
+                            <div className="warning-icon-wrapper">
+                                <Clock size={28} className="text-amber-500 animate-pulse" />
+                            </div>
+                            <h3>Bạn chưa lưu thay đổi</h3>
+                            <p>Các chỉnh sửa trong phần tài khoản của bạn chưa được lưu lại. Bạn muốn làm gì tiếp theo?</p>
+                            <div className="warning-actions">
+                                <button className="warning-btn discard" onClick={handleDiscard}>Bỏ qua</button>
+                                <button className="warning-btn cancel" onClick={() => setShowUnsavedWarning(false)}>Quay lại</button>
+                                <button className="warning-btn save" onClick={handleSaveAndContinue}>Lưu & Tiếp tục</button>
+                            </div>
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    )
+}
+// Helper needed for the above
+const renderedGroups = (groups, renderer) => {
+    if (!groups) return null;
+    return (
+        <>
+            {renderer("Hôm nay", groups.today)}
+            {renderer("Hôm qua", groups.yesterday)}
+            {renderer("7 ngày trước", groups.last7Days)}
+            {renderer("Cũ hơn", groups.older)}
+        </>
+    )
+}
+export const ImageViewer = ({ images = [], startIndex = 0, onClose, onIndexChange, isRestored = false }) => {
+    // Lock in the initial isRestored value to prevent re-triggering animations if App re-renders
+    const [wasRestored] = useState(isRestored)
+    const [currentIndex, setCurrentIndex] = useState(startIndex)
+    const [zoom, setZoom] = useState(1)
+    const [rotation, setRotation] = useState(0)
+    // Sync current index to parent for persistence
+    useEffect(() => {
+        if (onIndexChange) onIndexChange(currentIndex)
+    }, [currentIndex, onIndexChange])
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape') onClose()
+            if (e.key === 'ArrowLeft') handlePrev()
+            if (e.key === 'ArrowRight') handleNext()
+        }
+        window.addEventListener('keydown', handleKeyDown)
+        return () => window.removeEventListener('keydown', handleKeyDown)
+    }, [currentIndex, images.length])
+    const handleNext = () => {
+        setCurrentIndex((prev) => (prev + 1) % images.length)
+        setZoom(1)
+        setRotation(0)
+    }
+    const handlePrev = () => {
+        setCurrentIndex((prev) => (prev - 1 + images.length) % images.length)
+        setZoom(1)
+        setRotation(0)
+    }
+    const handleZoomIn = () => setZoom(prev => Math.min(prev + 0.25, 3))
+    const handleZoomOut = () => setZoom(prev => Math.max(prev - 0.25, 0.5))
+    const handleReset = () => {
+        setZoom(1)
+        setRotation(0)
+    }
+    const handleDownload = () => {
+        const link = document.createElement('a')
+        link.href = images[currentIndex]
+        link.download = `image-${currentIndex + 1}.png`
+        link.click()
+    }
+    if (!images || images.length === 0) return null
+    return (
+        <div className={`premium-viewer-overlay ${wasRestored ? 'is-restored' : ''}`} onClick={onClose}>
+            {/* Top Controls */}
+            <div className="viewer-top-bar" onClick={e => e.stopPropagation()}>
+                <div className="viewer-info">
+                    {currentIndex + 1} / {images.length}
+                </div>
+                <div className="viewer-actions">
+                    <button onClick={handleZoomOut} title="Thu nhỏ"><ZoomOut size={20} /></button>
+                    <button onClick={handleZoomIn} title="Phóng to"><ZoomIn size={20} /></button>
+                    <button onClick={handleReset} title="Đặt lại"><RotateCcw size={20} /></button>
+                    <div className="viewer-divider"></div>
+                    <button onClick={handleDownload} title="Tải về"><Download size={20} /></button>
+                    <button onClick={onClose} className="viewer-close-btn" title="Đóng (Esc)"><X size={20} /></button>
+                </div>
+            </div>
+            {/* Navigation Arrows */}
+            {images.length > 1 && (
+                <>
+                    <button
+                        className="viewer-nav-btn prev"
+                        onClick={(e) => { e.stopPropagation(); handlePrev(); }}
+                    >
+                        <ChevronLeft size={32} />
+                    </button>
+                    <button
+                        className="viewer-nav-btn next"
+                        onClick={(e) => { e.stopPropagation(); handleNext(); }}
+                    >
+                        <ChevronRight size={32} />
+                    </button>
+                </>
+            )}
+            {/* Image Container */}
+            <div className="viewer-image-container" onClick={e => e.stopPropagation()}>
+                <img
+                    src={images[currentIndex]}
+                    alt={`Preview ${currentIndex + 1}`}
+                    style={{
+                        transform: `scale(${zoom}) rotate(${rotation}deg)`,
+                        transition: zoom === 1 ? 'transform 0.3s cubic-bezier(0.16, 1, 0.3, 1)' : 'none'
+                    }}
+                    className="viewer-main-image"
+                />
+            </div>
+            {/* Thumbnails Strip */}
+            {images.length > 1 && (
+                <div className="viewer-thumbnails-strip" onClick={e => e.stopPropagation()}>
+                    {images.map((img, idx) => (
+                        <div
+                            key={idx}
+                            className={`viewer-thumb-item ${idx === currentIndex ? 'active' : ''}`}
+                            onClick={() => {
+                                setCurrentIndex(idx)
+                                setZoom(1)
+                                setRotation(0)
+                            }}
+                        >
+                            <img src={img} alt={`Thumb ${idx}`} />
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    )
+}

frontend/src/components/Sidebar.jsx ADDED Viewed

	@@ -0,0 +1,338 @@

+import React, { useState, useEffect, useRef } from 'react'
+import {
+    ChevronLeft,
+    ChevronDown,
+    ChevronRight,
+    Search,
+    MessageSquare,
+    Edit,
+    Image,
+    LayoutGrid,
+    Folder,
+    Settings,
+    User,
+    Pin,
+    MoreHorizontal,
+    Archive,
+    Trash2,
+    PanelLeft,
+    PanelRight
+} from 'lucide-react'
+const Sidebar = ({
+    isOpen,
+    toggleSidebar,
+    conversations = [],
+    currentConversationId,
+    onSelectConversation,
+    onNewChat,
+    onDeleteConversation,
+    onRenameConversation,
+    onTogglePin,
+    onToggleArchive,
+    onSearchClick,
+    onSettingsClick,
+    darkMode,
+    userProfile
+}) => {
+    const sidebarRef = useRef(null)
+    const [activeMenuId, setActiveMenuId] = React.useState(() => {
+        return sessionStorage.getItem('activeMenuId') || null
+    })
+    const [isHistoryCollapsed, setIsHistoryCollapsed] = useState(() => {
+        return localStorage.getItem('isHistoryCollapsed') === 'true'
+    })
+    const [editingId, setEditingId] = useState(() => {
+        return sessionStorage.getItem('editingId') || null
+    })
+    const [editTitle, setEditTitle] = useState(() => {
+        return sessionStorage.getItem('editTitle') || ''
+    })
+    const [menuPlacement, setMenuPlacement] = useState(() => {
+        return sessionStorage.getItem('menuPlacement') || 'bottom'
+    })
+    const pinnedChats = conversations.filter(c => c.isPinned && !c.isArchived)
+    const activeChats = conversations.filter(c => !c.isPinned && !c.isArchived)
+    const handleStartRename = (conv) => {
+        setEditingId(conv.id)
+        setEditTitle(conv.title || 'Đoạn chat mới')
+        setActiveMenuId(null)
+        sessionStorage.setItem('isNewRename', 'true')
+    }
+    const handleSaveRename = (id) => {
+        if (editTitle.trim()) {
+            onRenameConversation(id, editTitle.trim())
+        }
+        setEditingId(null)
+    }
+    const handleCancelRename = () => {
+        setEditingId(null)
+    }
+    // Close menu when clicking outside
+    React.useEffect(() => {
+        const handleClickOutside = () => setActiveMenuId(null)
+        window.addEventListener('click', handleClickOutside)
+        return () => window.removeEventListener('click', handleClickOutside)
+    }, [])
+    useEffect(() => {
+        localStorage.setItem('isHistoryCollapsed', isHistoryCollapsed)
+    }, [isHistoryCollapsed])
+    useEffect(() => {
+        if (activeMenuId) {
+            sessionStorage.setItem('activeMenuId', activeMenuId)
+            sessionStorage.setItem('menuPlacement', menuPlacement)
+        } else {
+            sessionStorage.removeItem('activeMenuId')
+            sessionStorage.removeItem('menuPlacement')
+        }
+    }, [activeMenuId, menuPlacement])
+    useEffect(() => {
+        if (editingId) {
+            sessionStorage.setItem('editingId', editingId)
+            sessionStorage.setItem('editTitle', editTitle)
+        } else {
+            sessionStorage.removeItem('editingId')
+            sessionStorage.removeItem('editTitle')
+        }
+    }, [editingId, editTitle])
+    const historyScrollRef = useRef(null)
+    // Handle history scroll persistence
+    const handleHistoryScroll = (e) => {
+        if (!isOpen) return // Only save if open
+        sessionStorage.setItem('sidebarScrollTop', e.target.scrollTop)
+    }
+    React.useLayoutEffect(() => {
+        if (!isHistoryCollapsed && historyScrollRef.current) {
+            const savedScroll = sessionStorage.getItem('sidebarScrollTop')
+            if (savedScroll) {
+                historyScrollRef.current.scrollTop = parseInt(savedScroll, 10)
+            }
+        }
+    }, [isHistoryCollapsed, conversations]) // Restore when expanded or conversations change
+    const renderChatItem = (conv) => (
+        <div
+            key={conv.id}
+            className={`sidebar-chat-item group ${conv.id === currentConversationId ? 'active' : ''} ${activeMenuId === conv.id ? 'menu-open' : ''} ${editingId === conv.id ? 'editing' : ''}`}
+            onClick={() => onSelectConversation(conv.id)}
+        >
+            <div className="active-indicator" />
+            {editingId === conv.id ? (
+                <div className="chat-item-text editing" onClick={e => e.stopPropagation()}>
+                    <input
+                        className="inline-rename-input"
+                        value={editTitle}
+                        onChange={(e) => setEditTitle(e.target.value)}
+                        onBlur={() => handleSaveRename(conv.id)}
+                        onKeyDown={(e) => {
+                            if (e.key === 'Enter') handleSaveRename(conv.id)
+                            if (e.key === 'Escape') handleCancelRename()
+                        }}
+                        autoFocus
+                        spellCheck="false"
+                        autoComplete="off"
+                        onFocus={e => {
+                            // Only select all if this is NOT a restored state from refresh
+                            const isRestored = !sessionStorage.getItem('isNewRename');
+                            if (!isRestored) {
+                                e.target.select();
+                                sessionStorage.removeItem('isNewRename');
+                            }
+                        }}
+                    />
+                </div>
+            ) : (
+                <div className="chat-item-text truncate">
+                    {conv.isPinned && <Pin size={12} className="chat-pin-icon" fill="currentColor" />}
+                    <span>{conv.title || 'Đoạn chat mới'}</span>
+                </div>
+            )}
+            {/* Chat Actions Menu */}
+            {!editingId && (
+                <div className="chat-item-actions">
+                    <button
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            const rect = e.currentTarget.getBoundingClientRect();
+                            const spaceBelow = window.innerHeight - rect.bottom;
+                            const newPlacement = spaceBelow < 200 ? 'top' : 'bottom';
+                            setMenuPlacement(newPlacement);
+                            setActiveMenuId(activeMenuId === conv.id ? null : conv.id)
+                        }}
+                        className="menu-trigger-btn"
+                    >
+                        <MoreHorizontal size={15.5} />
+                    </button>
+                    {activeMenuId === conv.id && (
+                        <div className={`chat-menu-dropdown glass placement-${menuPlacement}`} onClick={e => e.stopPropagation()}>
+                            <button className="menu-item" onClick={() => handleStartRename(conv)}>
+                                <Edit size={15} />
+                                <span>Đổi tên</span>
+                            </button>
+                            <button className="menu-item" onClick={() => { onTogglePin(conv.id); setActiveMenuId(null); }}>
+                                <Pin size={15} fill={conv.isPinned ? "currentColor" : "none"} />
+                                <span>{conv.isPinned ? "Bỏ ghim" : "Ghim"}</span>
+                            </button>
+                            <button className="menu-item" onClick={() => { onToggleArchive(conv.id); setActiveMenuId(null); }}>
+                                <Archive size={15} />
+                                <span>Lưu trữ</span>
+                            </button>
+                            <div className="menu-separator" />
+                            <button className="menu-item delete" onClick={() => { onDeleteConversation(conv.id); setActiveMenuId(null); }}>
+                                <Trash2 size={15} />
+                                <span>Xóa</span>
+                            </button>
+                        </div>
+                    )}
+                </div>
+            )}
+        </div>
+    )
+    return (
+        <div className={`sidebar-container ${isOpen ? 'open' : 'closed'}`}>
+            <div className="sidebar-inner">
+                {/* Header Actions */}
+                <div className="sidebar-top-nav">
+                    <div className="nav-header">
+                        <div className="sidebar-brand">
+                            <img src="/pochi.jpeg" alt="Pochi Logo" className="brand-logo" id="tour-logo" />
+                        </div>
+                        {isOpen && (
+                            <button
+                                className="toggle-sidebar-trigger"
+                                onClick={toggleSidebar}
+                                title="Đóng sidebar"
+                                id="tour-toggle-sidebar"
+                            >
+                                <PanelLeft size={20} />
+                            </button>
+                        )}
+                    </div>
+                    <div className="nav-list">
+                        <button className="nav-item new-chat-btn" onClick={onNewChat} id="tour-new-chat">
+                            <div className="nav-item-icon">
+                                <Edit size={18} />
+                            </div>
+                            <span>Đoạn chat mới</span>
+                            {isOpen && (
+                                <div className="shortcut-hint">
+                                    {navigator.platform.toUpperCase().indexOf('MAC') >= 0 ? '⌘E' : 'Ctrl E'}
+                                </div>
+                            )}
+                        </button>
+                        <button className="nav-item search-btn" onClick={onSearchClick} id="tour-search">
+                            <div className="nav-item-icon">
+                                <Search size={18} />
+                            </div>
+                            <span>Tìm kiếm đoạn chat</span>
+                            {isOpen && (
+                                <div className="shortcut-hint">
+                                    {navigator.platform.toUpperCase().indexOf('MAC') >= 0 ? '⌘F' : 'Ctrl F'}
+                                </div>
+                            )}
+                        </button>
+                        <div className="nav-item-pill disabled">
+                            <div className="nav-item-icon">
+                                <Image size={18} />
+                            </div>
+                            <span>Ảnh <span className="badge-new">MỚI</span></span>
+                        </div>
+                        <div className="nav-item-pill disabled">
+                            <div className="nav-item-icon">
+                                <LayoutGrid size={18} />
+                            </div>
+                            <span>Ứng dụng</span>
+                        </div>
+                        <div className="nav-item-pill disabled">
+                            <div className="nav-item-icon">
+                                <Folder size={18} />
+                            </div>
+                            <span>Dự án</span>
+                        </div>
+                    </div>
+                </div>
+                <div className="sidebar-history" id="tour-history-section">
+                    {/* Clickable area when sidebar is closed - from "Dự án" down to footer (but not including footer) */}
+                    {!isOpen && (
+                        <div
+                            className="sidebar-clickable-area"
+                            onClick={toggleSidebar}
+                        />
+                    )}
+                    <div
+                        className="history-label collapsible"
+                        onClick={() => setIsHistoryCollapsed(!isHistoryCollapsed)}
+                        id="tour-history-label"
+                    >
+                        <span>Các đoạn chat của bạn</span>
+                        {isHistoryCollapsed ? <ChevronRight size={15} /> : <ChevronDown size={15} />}
+                    </div>
+                    {!isHistoryCollapsed && (
+                        <div
+                            className="history-scroll-area custom-scrollbar"
+                            ref={historyScrollRef}
+                            onScroll={handleHistoryScroll}
+                        >
+                            {pinnedChats.length > 0 && (
+                                <div className="history-section">
+                                    {pinnedChats.map(renderChatItem)}
+                                </div>
+                            )}
+                            <div className="history-section">
+                                {activeChats.length > 0 ? (
+                                    activeChats.map(renderChatItem)
+                                ) : (
+                                    <div className="history-empty">Chưa có cuộc trò chuyện nào</div>
+                                )}
+                            </div>
+                        </div>
+                    )}
+                </div>
+                <div className="sidebar-footer" id="tour-profile">
+                    <div className="profile-section" onClick={() => onSettingsClick('account')}>
+                        <div className="profile-avatar" id="tour-profile-sidebar-avatar">
+                            {userProfile?.avatar ? (
+                                <img src={userProfile.avatar} alt="Avatar" className="sidebar-avatar-img" />
+                            ) : (
+                                <div className="avatar-circle">{userProfile?.name?.charAt(0) || 'U'}</div>
+                            )}
+                        </div>
+                        <div className="profile-info">
+                            <div className="profile-name">{userProfile?.name || 'Vô danh'}</div>
+                            <div className="profile-plan">Free</div>
+                        </div>
+                        <button className="upgrade-btn" onClick={(e) => { e.stopPropagation(); /* handle upgrade */ }}>
+                            Nâng cấp
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+export default Sidebar

frontend/src/index.css ADDED Viewed

	@@ -0,0 +1,426 @@

+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+/* KaTeX styles */
+@import 'katex/dist/katex.min.css';
+/* =========================================
+   DESIGN SYSTEM & TOKENS
+   ========================================= */
+:root {
+  /* --- LIGHT THEME (Clean, Airy, Professional) --- */
+  /* Brand Colors - Indigo/Violet fused for modern tech feel */
+  --brand-primary: #6366f1;
+  --brand-primary-rgb: 99, 102, 241;
+  /* Indigo 500 */
+  --brand-hover: #4f46e5;
+  /* Indigo 600 */
+  --brand-light: #e0e7ff;
+  /* Indigo 100 */
+  --brand-text: #ffffff;
+  /* Backgrounds */
+  --bg-canvas: #ffffff;
+  --bg-canvas-rgb: 255, 255, 255;
+  --bg-surface: #f8fafc;
+  --bg-surface-rgb: 248, 250, 252;
+  /* Slate 50 */
+  --bg-surface-hover: #eaeff3;
+  /* Balanced hover: slightly darker than Slate 100, lighter than Slate 200 */
+  --bg-modal: rgba(255, 255, 255, 0.95);
+  /* Text */
+  --text-primary: #0f172a;
+  /* Slate 900 */
+  --text-secondary: #64748b;
+  /* Slate 500 */
+  --text-tertiary: #94a3b8;
+  /* Slate 400 */
+  /* Borders */
+  --border-light: #e2e8f0;
+  /* Slate 200 */
+  --border-medium: #cbd5e1;
+  /* Slate 300 */
+  /* Status */
+  --status-success: #10b981;
+  --status-error: #ef4444;
+  --status-warning: #f59e0b;
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.15);
+  /* Legacy variable mapping for compatibility */
+  --bg-primary: var(--bg-canvas);
+  --bg-secondary: var(--bg-surface);
+  --border-color: var(--border-light);
+  --accent: var(--brand-primary);
+}
+.dark {
+  /* --- DARK THEME (Deep, Rich, Premium) --- */
+  /* Brand Colors - Slightly desaturated for dark mode legibility */
+  --brand-primary: #818cf8;
+  --brand-primary-rgb: 129, 140, 248;
+  /* Indigo 400 */
+  --brand-hover: #6366f1;
+  /* Indigo 500 */
+  --brand-light: rgba(99, 102, 241, 0.15);
+  --brand-text: #ffffff;
+  /* Backgrounds - Zinc scale for a rich "Obsidian" feel */
+  --bg-canvas: #09090b;
+  --bg-canvas-rgb: 9, 9, 11;
+  /* Zinc 950 */
+  --bg-surface: #18181b;
+  --bg-surface-rgb: 24, 24, 27;
+  /* Zinc 900 */
+  --bg-surface-hover: #27272a;
+  /* Zinc 800 */
+  --bg-modal: rgba(24, 24, 27, 0.96);
+  /* More solid for better text contrast */
+  /* Text */
+  --text-primary: #f4f4f5;
+  /* Zinc 100 */
+  --text-secondary: #a1a1aa;
+  /* Zinc 400 */
+  --text-tertiary: #52525b;
+  /* Zinc 600 */
+  /* Borders */
+  --border-light: #27272a;
+  /* Zinc 800 */
+  --border-medium: #3f3f46;
+  /* Zinc 700 */
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.5);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);
+  --shadow-glow: 0 0 25px rgba(129, 140, 248, 0.15);
+  /* Legacy mapping */
+  --bg-primary: var(--bg-canvas);
+  --bg-secondary: var(--bg-surface);
+  --border-color: var(--border-light);
+  --accent: var(--brand-primary);
+}
+/* =========================================
+   GLOBAL RESET & BASE
+   ========================================= */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+html,
+body {
+  height: 100%;
+  overflow: hidden;
+  /* App-like feel */
+  overscroll-behavior: none;
+  /* Prevent bounce/rubber-band effect */
+}
+body {
+  font-family: 'Outfit', 'Inter', system-ui, sans-serif;
+  /* Outfit for headings, Inter for body */
+  background-color: var(--bg-canvas);
+  color: var(--text-primary);
+  /* Removed transition on color/background to prevent flickering on theme switch */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+/* Selection Highlight */
+::selection {
+  background-color: var(--brand-primary);
+  color: white;
+}
+/* Scrollbar Styling - Minimalist */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--border-light);
+  border-radius: 10px;
+  transition: background 0.2s;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--text-tertiary);
+}
+/* =========================================
+   UTILITIES & COMPONENTS
+   ========================================= */
+@layer utilities {
+  /* Modern Glassmorphism */
+  .glass {
+    background: rgba(255, 255, 255, 0.65);
+    backdrop-filter: blur(16px) saturate(180%);
+    -webkit-backdrop-filter: blur(16px) saturate(180%);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+  }
+  .dark .glass {
+    background: rgba(10, 10, 12, 0.65);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+  }
+  .glass-panel {
+    background: var(--bg-modal);
+    backdrop-filter: blur(20px);
+    border: 1px solid var(--border-light);
+  }
+  /* Text Gradients */
+  .text-gradient {
+    background: linear-gradient(135deg, var(--brand-primary), #a855f7);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+}
+/* Markdown / Message Content Styling */
+.message-content {
+  line-height: 1.7;
+  font-size: 0.95rem;
+}
+.message-content p {
+  margin-bottom: 0.85rem;
+}
+.message-content p:last-child {
+  margin-bottom: 0;
+}
+.message-content strong {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.message-content a {
+  color: var(--brand-primary);
+  text-decoration: none;
+  border-bottom: 1px dashed var(--brand-primary);
+  transition: all 0.2s;
+}
+.message-content a:hover {
+  border-style: solid;
+}
+/* Code Blocks */
+.message-content pre {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-light);
+  border-radius: 0.75rem;
+  padding: 1.25rem;
+  overflow-x: auto;
+  margin: 1.25rem 0;
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
+}
+.message-content code {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.85em;
+  padding: 0.2em 0.4em;
+  border-radius: 0.25rem;
+  background: var(--bg-surface-hover);
+  color: var(--brand-primary);
+}
+.message-content pre code {
+  background: transparent;
+  padding: 0;
+  color: inherit;
+  font-size: 0.9em;
+}
+/* Lists */
+.message-content ul,
+.message-content ol {
+  padding-left: 1.5rem;
+  margin: 0.75rem 0;
+}
+.message-content li {
+  margin: 0.4rem 0;
+  padding-left: 0.5rem;
+}
+/* KaTeX Override (Math) - Minimalist Integrated Look */
+.katex-display {
+  margin: 1.5rem 0;
+  padding: 0.5rem 0;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  overflow-x: auto;
+  box-shadow: none;
+  position: relative;
+  transition: color 0.3s ease;
+}
+.katex-display:hover {
+  border-color: transparent;
+  box-shadow: none;
+}
+.katex {
+  font-size: 1.1em;
+  color: var(--text-primary);
+}
+.katex-error {
+  color: var(--status-error);
+  background: rgba(239, 68, 68, 0.1);
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+/* =========================================
+   ANIMATIONS
+   ========================================= */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes popIn {
+  0% {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+@keyframes messageSlideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.animate-msg-slide-up {
+  animation: messageSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+/* Agent Tracking UI Refinements */
+.agent-status-badge {
+  display: inline-flex;
+  align-items: center;
+  background: var(--brand-light);
+  color: var(--brand-primary);
+  padding: 0.35rem 0.85rem;
+  border-radius: 20px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  margin-bottom: 0.75rem;
+  border: 1px solid rgba(var(--brand-primary-rgb), 0.2);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.1);
+  position: relative;
+  overflow: hidden;
+}
+.agent-status-badge::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 50%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+  animation: badgeShine 2s infinite;
+}
+@keyframes badgeShine {
+  0% {
+    left: -100%;
+  }
+  100% {
+    left: 200%;
+  }
+}
+.agent-steps {
+  margin-bottom: 1.25rem;
+  font-size: 0.85rem;
+  border: 1px solid var(--border-light);
+  border-radius: 0.75rem;
+  overflow: hidden;
+  background: var(--bg-surface);
+  box-shadow: var(--shadow-sm);
+}
+.agent-steps summary {
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+  font-weight: 500;
+  color: var(--text-secondary);
+  transition: color 0.2s;
+  background: var(--bg-secondary);
+}
+.agent-steps summary:hover {
+  color: var(--brand-primary);
+}
+.steps-list {
+  padding: 0.75rem;
+  gap: 0.75rem;
+}
+.step-item {
+  background: var(--bg-canvas);
+  border: 1px solid var(--border-light);
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+}
+.step-tool {
+  color: var(--brand-primary);
+}

frontend/src/main.jsx ADDED Viewed

	@@ -0,0 +1,14 @@

+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+import ErrorBoundary from './components/ErrorBoundary.jsx'
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <ErrorBoundary fallback={<div className="p-4 text-red-500"><h1>Application Crashed</h1><p>Check console for details.</p></div>}>
+      <App />
+    </ErrorBoundary>
+  </StrictMode>,
+)

frontend/src/utils/chatUtils.js ADDED Viewed

	@@ -0,0 +1,43 @@

+/**
+ * Preprocess LaTeX content to ensure proper rendering
+ * Convert \[...\] to $$...$$ and \(...\) to $...$
+ */
+export const preprocessLaTeX = (content) => {
+    if (!content) return ''
+    let processed = content
+    // Convert \[...\] to $$...$$ (display math)
+    processed = processed.replace(/\\\[([\s\S]*?)\\\]/g, (match, math) => `$$${math}$$`)
+    // Convert \(...\) to $...$ (inline math)
+    processed = processed.replace(/\\\(([\s\S]*?)\\\)/g, (match, math) => `$${math}$`)
+    return processed
+}
+/**
+ * Parse message content - handles both legacy JSON blocks and new plain markdown
+ */
+export const parseMessageContent = (content) => {
+    if (!content) return ''
+    if (content.trim().startsWith('{') && content.includes('"blocks"')) {
+        try {
+            const parsed = JSON.parse(content)
+            if (parsed.blocks && Array.isArray(parsed.blocks)) {
+                return parsed.blocks.map(block => {
+                    if (block.type === 'text') return block.content || ''
+                    else if (block.type === 'math') {
+                        const latex = block.latex || block.content || ''
+                        const display = block.display === 'inline' ? '$' : '$$'
+                        return `${display}${latex}${display}`
+                    } else if (block.type === 'list') {
+                        const items = block.items || []
+                        return items.map((item, i) => `${block.ordered ? `${i + 1}.` : '-'} ${item}`).join('\n')
+                    }
+                    return ''
+                }).join('\n\n')
+            }
+        } catch { /* Not valid JSON */ }
+    }
+    return content.replace(/\\n/g, '\n')
+}

frontend/tailwind.config.js ADDED Viewed

	@@ -0,0 +1,82 @@

+/** @type {import('tailwindcss').Config} */
+export default {
+    content: [
+        "./index.html",
+        "./src/**/*.{js,ts,jsx,tsx}",
+    ],
+    darkMode: 'class',
+    theme: {
+        extend: {
+            colors: {
+                // Semantic Colors (mapping to CSS variables)
+                'brand': {
+                    primary: 'var(--brand-primary)',
+                    hover: 'var(--brand-hover)',
+                    light: 'var(--brand-light)',
+                    text: 'var(--brand-text)',
+                },
+                'bg': {
+                    canvas: 'var(--bg-canvas)',
+                    surface: 'var(--bg-surface)',
+                    'surface-hover': 'var(--bg-surface-hover)',
+                    modal: 'var(--bg-modal)',
+                },
+                'text': {
+                    primary: 'var(--text-primary)',
+                    secondary: 'var(--text-secondary)',
+                    tertiary: 'var(--text-tertiary)',
+                },
+                'border': {
+                    light: 'var(--border-light)',
+                    medium: 'var(--border-medium)',
+                },
+                'status': {
+                    success: 'var(--status-success)',
+                    error: 'var(--status-error)',
+                    warning: 'var(--status-warning)',
+                },
+                // Legacy support (optional, if you want to keep old names working temporarily)
+                primary: {
+                    50: '#f0f9ff',
+                    100: '#e0f2fe',
+                    200: '#bae6fd',
+                    300: '#7dd3fc',
+                    400: '#38bdf8',
+                    500: '#0ea5e9',
+                    600: '#0284c7',
+                    700: '#0369a1',
+                    800: '#075985',
+                    900: '#0c4a6e',
+                },
+            },
+            fontFamily: {
+                sans: ['Inter', 'system-ui', 'sans-serif'],
+                mono: ['JetBrains Mono', 'monospace'],
+                display: ['Outfit', 'sans-serif'],
+            },
+            animation: {
+                'fade-in': 'fadeIn 0.3s ease-out',
+                'slide-up': 'slideUp 0.3s ease-out',
+                'pulse-soft': 'pulseSoft 2s infinite',
+            },
+            keyframes: {
+                fadeIn: {
+                    '0%': { opacity: '0' },
+                    '100%': { opacity: '1' },
+                },
+                slideUp: {
+                    '0%': { opacity: '0', transform: 'translateY(10px)' },
+                    '100%': { opacity: '1', transform: 'translateY(0)' },
+                },
+                pulseSoft: {
+                    '0%, 100%': { opacity: '1' },
+                    '50%': { opacity: '0.5' },
+                },
+            },
+        },
+    },
+    plugins: [
+        require('@tailwindcss/typography'),
+    ],
+}

frontend/vite.config.js ADDED Viewed

	@@ -0,0 +1,16 @@

+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:7860',
+        changeOrigin: true,
+      },
+    },
+  },
+})