diff --git a/frontend/app/admin/knowledge-base/page.tsx b/frontend/app/admin/knowledge-base/page.tsx index 10e2f72..0149411 100644 --- a/frontend/app/admin/knowledge-base/page.tsx +++ b/frontend/app/admin/knowledge-base/page.tsx @@ -15,7 +15,10 @@ import { FolderOpen, File, Plus, + Menu, } from "lucide-react"; +import { useSidebar } from "@/components/ui/sidebar"; +import Image from "next/image"; interface KnowledgeFile { name: string; @@ -29,6 +32,7 @@ interface FileContent { } export default function KnowledgeBasePage() { + const { toggleSidebar, isMobile } = useSidebar(); const [files, setFiles] = useState([]); const [filteredFiles, setFilteredFiles] = useState([]); const [loading, setLoading] = useState(true); @@ -190,39 +194,65 @@ export default function KnowledgeBasePage() { return (
-
+ {/* Mobile Header */} + {isMobile && ( +
+ +
+ VCell Logo + + Knowledge Base + +
+
+ )} + +
{/* Header */} -
-
-
-

- - Knowledge Base Management +
+
+
+

+ + Knowledge Base Management

-

+

Upload, manage, and organize knowledge base files

-
+
{/* Search and Filters */} - - + +
@@ -239,11 +269,13 @@ export default function KnowledgeBasePage() { {/* Files Table */} - - - - Knowledge Base Files - + + +
+ + Knowledge Base Files +
+ {files.length} files diff --git a/frontend/app/admin/page.tsx b/frontend/app/admin/page.tsx index 1f84add..a5a07ec 100644 --- a/frontend/app/admin/page.tsx +++ b/frontend/app/admin/page.tsx @@ -14,7 +14,10 @@ import { Trash2, Save, X, + Menu, } from "lucide-react"; +import { useSidebar } from "@/components/ui/sidebar"; +import Image from "next/image"; interface User { id: string; @@ -40,6 +43,7 @@ interface DashboardStats { } export default function AdminDashboard() { + const { toggleSidebar, isMobile } = useSidebar(); const [stats, setStats] = useState({ totalUsers: 0, totalConversations: 0, @@ -272,31 +276,57 @@ export default function AdminDashboard() { return (
-
+ {/* Mobile Header */} + {isMobile && ( +
+ +
+ VCell Logo + + Admin Dashboard + +
+
+ )} + +
{/* Header */} -
-
-
-

- - Admin Dashboard +
+
+
+

+ + Admin Dashboard

-

+

Manage users, conversations, and system resources

-
+
diff --git a/frontend/app/admin/settings/page.tsx b/frontend/app/admin/settings/page.tsx index 28fa6c7..1f58d59 100644 --- a/frontend/app/admin/settings/page.tsx +++ b/frontend/app/admin/settings/page.tsx @@ -16,7 +16,10 @@ import { Monitor, Copy, ExternalLink, + Menu, } from "lucide-react"; +import { useSidebar } from "@/components/ui/sidebar"; +import Image from "next/image"; interface SystemSettings { modelProvider: string; @@ -33,6 +36,7 @@ interface LocalSettings { } export default function AdminSettingsPage() { + const { toggleSidebar, isMobile } = useSidebar(); const [activeTab, setActiveTab] = useState("hosted"); const [settings, setSettings] = useState({ modelProvider: "Azure OpenAI", @@ -118,28 +122,51 @@ export default function AdminSettingsPage() { return (
-
+ {/* Mobile Header */} + {isMobile && ( +
+ +
+ VCell Logo + + Admin Settings + +
+
+ )} + +
{/* Header */} -
-
-
-

- - Admin Settings -

-

- Configure LLM settings and preferences -

-
-
- -
+
+
+

+ + Admin Settings +

+
+

+ Configure LLM settings and preferences +

{/* Success/Error Messages */} @@ -158,14 +185,16 @@ export default function AdminSettingsPage() { {/* Tabs */} - - - - Hosted Settings + + + + Hosted Settings + Hosted - - - Local Settings + + + Local Settings + Local @@ -256,54 +285,55 @@ export default function AdminSettingsPage() { {/* Local Settings Tab */} -
+
{/* Setup Guide */} - - - - Local Setup Guide + + + + Local Setup Guide - +
-
+

This is a guide to setup this platform locally on your machine and use your own LLM for unlimited usage. -
Follow the steps below to get started with your local deployment. + Follow the steps below to get started with your local deployment.

- For more details, check https://github.com/KacemMathlouthi/VCell-GSoC + For more details, check https://github.com/KacemMathlouthi/VCell-GSoC

-
-

Step 1: Clone the Repository

-
- +
+

Step 1: Clone the Repository

+
+ git clone https://github.com/KacemMathlouthi/VCell-GSoC.git
-
-

Step 2: Configure Environment Variables

-

Configure the .env files following the .env.example in both frontend and backend folders

-
- 
+                  

+                    
Step 2: Configure Environment Variables

+                    
Configure the .env files following the .env.example in both frontend and backend folders

+                    

+                      
 {`# Frontend .env
 cp frontend/.env.example frontend/.env
 # Backend .env  
@@ -313,41 +343,44 @@ cp backend/.env.example backend/.env`}
                         onClick={() => copyToClipboard("cp frontend/.env.example frontend/.env && cp backend/.env.example backend/.env")}
                         size="sm"
                         variant="outline"
+                        className="flex-shrink-0 px-3 py-2"
                       >
-                        
+                        
                       
                     

                   

 
-                  

-                    
Step 3: Start the Application

-                    

-                      
+                  

+                    
Step 3: Start the Application

+                    

+                      
                         docker compose up --build -d
                       
                       
                     

                   

 
-                  

-                    
Step 4: Access the Application

-                    
Once running, access this page at:

-                    

-                      
+                  

+                    
Step 4: Access the Application

+                    
Once running, access this page at:

+                    

+                      
                         http://localhost:3000/admin/settings
                       
                       
                     

                   

@@ -356,13 +389,13 @@ cp backend/.env.example backend/.env`}
 
               {/* Local Settings Form */}
               
-                
-                  
-                    
-                    Local LLM Configuration
+                
+                  
+                    
+                    Local LLM Configuration
                   
                 
-                
+                
                   

                     

 
-                  

+                  

                     
                   

                 
diff --git a/frontend/app/analyze/[id]/page.tsx b/frontend/app/analyze/[id]/page.tsx
index 779fcc0..79867ce 100644
--- a/frontend/app/analyze/[id]/page.tsx
+++ b/frontend/app/analyze/[id]/page.tsx
@@ -18,10 +18,13 @@ import {
   Calendar,
   Hash,
   Users,
+  Menu,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { ChatBox } from "@/components/ChatBox";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { useSidebar } from "@/components/ui/sidebar";
+import Image from "next/image";
 
 interface AnalysisResults {
   title: string;
@@ -47,6 +50,7 @@ export default function AnalysisResultsPage({
 }: {
   params: Promise<{ id: string }>;
 }) {
+  const { toggleSidebar, isMobile } = useSidebar();
   const router = useRouter();
   const searchParams = useSearchParams();
   const prompt = searchParams.get("prompt") || "";
@@ -242,32 +246,58 @@ export default function AnalysisResultsPage({
 
   return (
     

-      

-        
-          
-            

-              

-                
-                  
-                  {biomodelData?.name || `Biomodel ${id}`}
+      {/* Mobile Header */}
+      {isMobile && (
+        

+          
+          

+            VCell Logo
+            
+              Analysis Results
+            
+          

+        

+      )}
+      
+      

+        
+          
+            

+              

+                
+                  
+                  {biomodelData?.name || `Biomodel ${id}`}
                 
-                

+                

                   
                   
                 

               

               {biomodelData && (
-                

+                

                   
                     {" "}
                     {biomodelData.bmKey}
@@ -303,33 +333,35 @@ export default function AnalysisResultsPage({
               )}
             

           
-          
+          
             {/* Biomodel Diagram block */}
-            

-              

-                
-                
+            

+              

+                
+                
                   Biomodel Diagram
                 
               

-              Biomodel Diagram setError("Failed to load diagram image.")}
-                onLoad={() => setError("")}
-              />
+              

+                Biomodel Diagram setError("Failed to load diagram image.")}
+                  onLoad={() => setError("")}
+                />
+              

             

 
             {/* Chat Box */}
-            

-              

-                
-                
+            

+              

+                
+                
                   AI Analysis Assistant
                 
               

-              

+              

                 
-      

+      {/* Mobile Header */}
+      {isMobile && (
+        

+          
+          

+            VCell Logo
+            
+              AI Analysis
+            
+          

+        

+      )}
+      
+      

         {/* Header */}
         

           

diff --git a/frontend/app/chat/page.tsx b/frontend/app/chat/page.tsx
index de589c7..e476638 100644
--- a/frontend/app/chat/page.tsx
+++ b/frontend/app/chat/page.tsx
@@ -11,14 +11,18 @@ import {
   BarChart3Icon as Diagram3,
   HelpCircle,
   FlaskConical,
+  Menu,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { OnboardingModal } from "@/components/onboarding-modal";
 import { ChatBox } from "@/components/ChatBox";
+import { useSidebar } from "@/components/ui/sidebar";
+import Image from "next/image";
 
 export default function ChatPage() {
   const [showOnboarding, setShowOnboarding] = useState(false);
+  const { toggleSidebar, isMobile } = useSidebar();
 
   useEffect(() => {
     // Check if user has seen onboarding before
@@ -92,14 +96,40 @@ export default function ChatPage() {
 
   return (
     

-      

+      {/* Mobile Header */}
+      {isMobile && (
+        

+          
+          

+            VCell Logo
+            
+              VCell AI Chat
+            
+          

+        

+      )}
+      
+      

         {/* Header */}
         

           

-            

+            

               {/* Warning Alert - takes most of the space */}
               
-                
+                
                   ⚠️ Important: Responses are AI generated and may contain errors, or hallucinations.
                 
               
@@ -108,10 +138,11 @@ export default function ChatPage() {
                 variant="outline"
                 size="sm"
                 onClick={() => setShowOnboarding(true)}
-                className="flex items-center gap-2 flex-shrink-0"
+                className="flex items-center gap-1 sm:gap-2 flex-shrink-0 px-2 sm:px-3"
               >
-                
-                How to Use
+                
+                How to Use
+                Help
               
             

           

diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index ede5909..e90e6c1 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -18,31 +18,31 @@ export default function LandingPage() {
     

       {/* Header with Navigation */}
       

-        

+        

           

-            

+            

               VCell Logo
-              
+              
                 AI Explorer
               
             

-            

-              
-              
             

@@ -53,42 +53,42 @@ export default function LandingPage() {
       

         

           {/* Hero Section */}
-          

-            

+          

+            

               VCell Logo
-              

+              

                 VCell Models
                 

                 AI Explorer
               

             

 
-            

+            

               Discover, analyze, and explore biomodels with the power of AI.
               Comprehensive platform for scientific model research.
             

 
-            

-              
+            

+              
                 
               
-              
+              
                 
@@ -97,7 +97,7 @@ export default function LandingPage() {
           

 
           {/* Features Section */}
-          

+          

             {/* AI Chatbot Feature */}
             
               
diff --git a/frontend/app/search/[bmid]/page.tsx b/frontend/app/search/[bmid]/page.tsx
index fc7c478..42af136 100644
--- a/frontend/app/search/[bmid]/page.tsx
+++ b/frontend/app/search/[bmid]/page.tsx
@@ -3,6 +3,7 @@
 import { useEffect, useState } from "react";
 import { useParams } from "next/navigation";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
 import {
   Collapsible,
   CollapsibleContent,
@@ -27,7 +28,10 @@ import {
   Atom,
   Briefcase,
   Cog,
+  Menu,
 } from "lucide-react";
+import { useSidebar } from "@/components/ui/sidebar";
+import Image from "next/image";
 
 interface Simulation {
   key: string;
@@ -79,6 +83,7 @@ interface BiomodelDetail {
 }
 
 export default function BiomodelDetailPage() {
+  const { toggleSidebar, isMobile } = useSidebar();
   const params = useParams<{ bmid: string }>();
   const bmid = params?.bmid;
   const [data, setData] = useState(null);
@@ -190,24 +195,51 @@ export default function BiomodelDetailPage() {
 
   return (
     

-      

+      {/* Mobile Header */}
+      {isMobile && (
+        

+          
+          

+            VCell Logo
+            
+              Biomodel Details
+            
+          

+        

+      )}
+      
+      

         
-          
-            

-              

-                
-                  
-                  {data.name}
+          
+            

+              

+                
+                  
+                  {data.name}
                 
-                

+                

                   
                   {/* 
+          

+            VCell Logo
+            
+              Biomodel Search
+            
+          

+        

+      )}
+      
+      

         {/* Header */}
         

           

diff --git a/frontend/components/onboarding-modal.tsx b/frontend/components/onboarding-modal.tsx
index a9e6a16..08adff8 100644
--- a/frontend/components/onboarding-modal.tsx
+++ b/frontend/components/onboarding-modal.tsx
@@ -309,7 +309,7 @@ export function OnboardingModal({ isOpen, onClose }: OnboardingModalProps) {
 
   return (
     
-      
+