File size: 3,314 Bytes
5feba25 20948c2 5feba25 20948c2 5feba25 20948c2 5feba25 20948c2 5feba25 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | import { useState } from 'react'
import { Menu, X } from 'lucide-react'
import useChat from './hooks/useChat'
import FeatureSidebar from './components/FeatureSidebar'
import ChatWindow from './components/ChatWindow'
import InputBar from './components/InputBar'
function App() {
const { messages, features, loading, prediction, sendMessage, resetChat } = useChat()
const [showConfirm, setShowConfirm] = useState(false)
const [sidebarOpen, setSidebarOpen] = useState(false)
const handleReset = async () => {
setShowConfirm(true)
}
const confirmReset = async () => {
setShowConfirm(false)
await resetChat()
}
return (
<div className="flex h-screen bg-white overflow-hidden flex-col md:flex-row">
{/* Mobile Header with Sidebar Toggle */}
<div className="md:hidden flex items-center justify-between border-b border-gray-200 bg-white px-4 py-3 z-40">
<h1 className="text-lg font-semibold text-gray-900">MediHelp</h1>
<button
onClick={() => setSidebarOpen(!sidebarOpen)}
className="p-2 rounded-lg hover:bg-gray-100 transition-colors"
title="Toggle sidebar"
>
{sidebarOpen ? <X size={24} /> : <Menu size={24} />}
</button>
</div>
{/* Sidebar - Hidden on mobile, visible on md+ */}
<div className={`
fixed md:static inset-y-0 left-0 z-30 transition-transform duration-300 md:translate-x-0
${sidebarOpen ? 'translate-x-0' : '-translate-x-full'}
`}>
<FeatureSidebar features={features} />
</div>
{/* Mobile Sidebar Overlay */}
{sidebarOpen && (
<div
className="md:hidden fixed inset-0 bg-black bg-opacity-30 z-20"
onClick={() => setSidebarOpen(false)}
/>
)}
{/* Main chat area - Full width on mobile */}
<div className="flex-1 flex flex-col w-full md:w-auto">
{/* Chat messages */}
<ChatWindow messages={messages} prediction={prediction} />
{/* Input bar */}
<InputBar
onSend={sendMessage}
onReset={handleReset}
disabled={loading}
/>
</div>
{/* Reset Confirmation Modal */}
{showConfirm && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div className="bg-white rounded-lg shadow-xl p-6 max-w-sm mx-4">
<h3 className="text-lg font-semibold text-gray-900 mb-2">Start New Assessment?</h3>
<p className="text-gray-600 mb-6">
This will clear all your current health data and start a fresh assessment.
</p>
<div className="flex gap-3 justify-end">
<button
onClick={() => setShowConfirm(false)}
className="px-4 py-2 rounded-lg border border-gray-300 text-gray-700 hover:bg-gray-50 font-medium transition-colors"
>
Cancel
</button>
<button
onClick={confirmReset}
className="px-4 py-2 rounded-lg bg-purple-600 hover:bg-purple-700 text-white font-medium transition-colors"
>
Start New
</button>
</div>
</div>
</div>
)}
</div>
)
}
export default App
|