Enhance API versioning and frontend integration

- Added API versioning information in FastAPI, including a new `/version` endpoint to provide version and build date details.
- Updated the frontend to fetch and display API version information, enhancing user awareness of the current API status.
- Improved footer layout in the App component to include API version and operational status indicators.

CHANGELOG.md

@@ -0,0 +1,31 @@
+# Changelog
+
+All notable changes to the Quick Understand application will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.2.0] - 2024-06-14
+
+### Added
+- Response streaming for real-time AI answers
+- Improved font readability with better typography
+- Dark mode support with darker header in dark theme
+- Version information in application footer
+- API version endpoint
+
+### Changed
+- Renamed application to "Quick Understand"
+- Enhanced message display with better formatting
+- Fixed duplicate message issues in streaming responses
+- Improved code block styling
+
+## [0.1.0] - 2024-06-01
+
+### Added
+- Initial release of RAG Chat application
+- Document upload and processing
+- Question answering using RAG approach
+- Basic UI with chat interface
+- Quiz generation feature
+- Document summary visualization 

api/main.py

@@ -18,7 +18,15 @@ from aimakerspace.openai_utils.prompts import (
 from aimakerspace.vectordatabase import VectorDatabase
 from aimakerspace.openai_utils.chatmodel import ChatOpenAI
 
-app = FastAPI()
+# API Version information
+API_VERSION = "0.2.0"
+BUILD_DATE = "2024-06-14"  # Update this when making significant changes
+
+app = FastAPI(
+    title="Quick Understand API",
+    description="RAG-based question answering API for document understanding",
+    version=API_VERSION
+)
 
 # Add CORS middleware
 app.add_middleware(
@@ -540,6 +548,14 @@ def generate_fallback_questions(num_questions: int) -> List[QuizQuestion]:
 async def read_root():
     return FileResponse("static/index.html")
 
+@app.get("/version")
+async def get_version():
+    return {
+        "api_version": API_VERSION,
+        "build_date": BUILD_DATE,
+        "status": "operational"
+    }
+
 @app.get("/{path:path}")
 async def catch_all(path: str):
     if os.path.exists(f"static/{path}"):

app/frontend/src/App.js

@@ -7,6 +7,7 @@ import DocumentSummary from './components/DocumentSummary';
 import { ThemeProvider } from './components/ui/theme-provider';
 import { ThemeToggle } from './components/ui/theme-toggle';
 import { SettingsDialog } from './components/ui/settings-dialog';
+import { getVersionString, fetchApiVersion } from './utils/version';
 
 function App() {
   const [sessionId, setSessionId] = useState('');
@@ -14,6 +15,7 @@ function App() {
   const [uploadedFiles, setUploadedFiles] = useState([]);
   const [activeFileIndex, setActiveFileIndex] = useState(0);
   const [selectedQuestion, setSelectedQuestion] = useState('');
+  const [apiVersion, setApiVersion] = useState(null);
   
   // App settings with localStorage persistence
   const [settings, setSettings] = useState(() => {
@@ -32,6 +34,16 @@ function App() {
     }
   }, [sessionId]);
 
+  // Fetch API version information
+  useEffect(() => {
+    const getApiVersion = async () => {
+      const versionInfo = await fetchApiVersion();
+      setApiVersion(versionInfo);
+    };
+    
+    getApiVersion();
+  }, []);
+
   // Save settings to localStorage when they change
   useEffect(() => {
     localStorage.setItem('appSettings', JSON.stringify(settings));
@@ -166,7 +178,23 @@ function App() {
         </main>
         
         <footer className="w-full py-4 px-6 text-center text-sm text-muted-foreground">
-          <p>Made with <span role="img" aria-label="heart" className="text-red-500">❤️</span> and Shadcn/UI</p>
+          <div className="flex flex-col items-center justify-center">
+            <p>Made with <span role="img" aria-label="heart" className="text-red-500">❤️</span> and Shadcn/UI</p>
+            <div className="text-xs opacity-70 mt-1 flex items-center gap-2 justify-center">
+              <span>UI: {getVersionString()}</span>
+              {apiVersion && (
+                <>
+                  <span className="bg-border/30 w-[1px] h-3 inline-block"></span>
+                  <span>API: v{apiVersion.api_version}</span>
+                  <span className={`w-2 h-2 rounded-full ${
+                    apiVersion.status === 'operational' 
+                      ? 'bg-green-500' 
+                      : 'bg-amber-500'
+                  }`} title={`Status: ${apiVersion.status}`}></span>
+                </>
+              )}
+            </div>
+          </div>
         </footer>
       </div>
     </ThemeProvider>

app/frontend/src/utils/version.js

@@ -0,0 +1,43 @@
+// Version information
+import packageInfo from '../../package.json';
+import axios from 'axios';
+
+// App version from package.json
+export const APP_VERSION = packageInfo.version;
+
+// Build date (when the file is imported/executed)
+export const BUILD_DATE = new Date().toISOString().split('T')[0];
+
+// Format the version string for display
+export const getVersionString = () => {
+  return `v${APP_VERSION} (${BUILD_DATE})`;
+};
+
+// API version information
+export const fetchApiVersion = async () => {
+  try {
+    const response = await axios.get('/version');
+    return response.data;
+  } catch (error) {
+    console.error('Error fetching API version:', error);
+    return { 
+      api_version: 'unknown', 
+      build_date: 'unknown',
+      status: 'unknown'
+    };
+  }
+};
+
+// Check if version is newer than stored version
+export const isNewVersion = (storedVersion) => {
+  if (!storedVersion) return true;
+  return storedVersion !== APP_VERSION;
+};
+
+export default {
+  APP_VERSION,
+  BUILD_DATE,
+  getVersionString,
+  fetchApiVersion,
+  isNewVersion
+};