Initial commit: Analytical Finance Chatbot with Next.js frontend and FastAPI backend

.gitignore

@@ -0,0 +1,21 @@
+# Python-generated files
+__pycache__/
+*.py[oc]
+build/
+dist/
+wheels/
+*.egg-info
+
+# Virtual environments
+.venv
+
+# Environment variables
+.env
+*.env
+
+# Node modules
+node_modules/
+.next/
+
+# OS files
+.DS_Store

README.md

@@ -0,0 +1,251 @@
+# Analytical Finance Chatbot
+
+A full-stack AI-powered chatbot for financial data analysis with an OpenAI-inspired interface. The system analyzes CSV data (holdings and trades) and provides intelligent insights through natural language queries with real-time streaming responses.
+
+![Tech Stack](https://img.shields.io/badge/Next.js-15+-black?style=flat-square&logo=next.js)
+![FastAPI](https://img.shields.io/badge/FastAPI-0.100+-009688?style=flat-square&logo=fastapi)
+![Python](https://img.shields.io/badge/Python-3.10+-3776AB?style=flat-square&logo=python)
+![Tailwind](https://img.shields.io/badge/Tailwind-4.0-38B2AC?style=flat-square&logo=tailwind-css)
+
+## 🌟 Features
+
+### Backend
+- **Intelligent Data Analysis**: Processes financial CSV data (holdings & trades)
+- **Contextual Facts Engine**: Pre-computes analytical facts for accurate responses
+- **LLM-Powered Insights**: Uses Groq's Llama 3.1 for natural language understanding
+- **Streaming Responses**: Real-time Server-Sent Events (SSE) for smooth UX
+- **Conversation Management**: Persistent conversation history and context
+
+### Frontend
+- **OpenAI-Inspired UI**: Clean, minimalist black & white design
+- **Real-Time Streaming**: Live message streaming with visual feedback
+- **Rich Markdown Support**: Tables, code blocks, lists with proper formatting
+- **Responsive Design**: Mobile-friendly with collapsible sidebar
+- **Dark Mode**: Automatic light/dark theme support
+- **Conversation History**: Sidebar with all past conversations
+
+## 🏗️ Architecture
+
+```
+project-proojectloop/
+├── backend/                    # FastAPI backend
+│   ├── main.py                # API endpoints & streaming logic
+│   ├── csv_engine.py          # Data processing & fact extraction
+│   ├── llm_client.py          # Groq LLM integration
+│   └── data/
+│       ├── holdings.csv       # Financial holdings data
+│       └── trades.csv         # Trading data
+│
+└── frontend-next/             # Next.js frontend
+    ├── src/
+    │   ├── app/
+    │   │   ├── layout.js      # Root layout with sidebar
+    │   │   ├── page.js        # Home page
+    │   │   ├── globals.css    # Theme & styling
+    │   │   └── c/[id]/        # Dynamic chat routes
+    │   ├── components/
+    │   │   ├── Sidebar.js     # Conversation list
+    │   │   └── ChatInterface.js  # Main chat UI
+    │   └── lib/
+    │       └── api.js         # API client
+    └── package.json
+```
+
+## 🚀 Quick Start
+
+### Prerequisites
+- Python 3.10+
+- Node.js 18+
+- Groq API Key ([Get one here](https://console.groq.com))
+
+### Backend Setup
+
+1. **Navigate to backend directory**:
+   ```bash
+   cd backend
+   ```
+
+2. **Create virtual environment** (optional but recommended):
+   ```bash
+   python -m venv .venv
+   source .venv/bin/activate  # On Windows: .venv\Scripts\activate
+   ```
+
+3. **Install dependencies**:
+   ```bash
+   pip install fastapi uvicorn pandas groq python-dotenv
+   ```
+
+4. **Configure environment**:
+   Create a `.env` file in the `backend/` directory:
+   ```env
+   GROQ_API_KEY=your_groq_api_key_here
+   DATA_DIR=data
+   ```
+
+5. **Run the server**:
+   ```bash
+   uvicorn main:app --host 0.0.0.0 --port 8000 --reload
+   ```
+
+   Backend will be available at: `http://localhost:8000`
+
+### Frontend Setup
+
+1. **Navigate to frontend directory**:
+   ```bash
+   cd frontend-next
+   ```
+
+2. **Install dependencies**:
+   ```bash
+   npm install
+   ```
+
+3. **Run the development server**:
+   ```bash
+   npm run dev
+   ```
+
+   Frontend will be available at: `http://localhost:3000` (or next available port)
+
+## 📡 API Endpoints
+
+### Core Endpoints
+
+| Method | Endpoint | Description |
+|--------|----------|-------------|
+| `GET` | `/auth/status` | Authentication status |
+| `GET` | `/chat_models` | Available chat models |
+| `POST` | `/chat/new_conversation` | Create new conversation |
+| `GET` | `/conversation/all` | List all conversations |
+| `GET` | `/conversation/{id}` | Get specific conversation |
+| `POST` | `/chat/conversation` | Send message (streaming) |
+| `POST` | `/chat/get_alias` | Generate conversation title |
+
+### Example Request
+
+```bash
+curl -X POST http://localhost:8000/chat/conversation \
+  -H "Content-Type: application/json" \
+  -d '{
+    "conversation_id": "123e4567-e89b-12d3-a456-426614174000",
+    "user_message": [{"type": "text", "text": "Which funds performed better?"}]
+  }'
+```
+
+## 💡 Example Queries
+
+Try these questions with your data:
+
+- "Which funds performed better depending on the yearly Profit and Loss?"
+- "Show me the top 5 portfolios by total holdings"
+- "What is the total quantity for YTUM fund?"
+- "Which portfolio has the most records?"
+- "Compare the performance of Garfield vs Heather funds"
+
+## 🎨 Tech Stack
+
+### Backend
+- **FastAPI**: Modern Python web framework
+- **Pandas**: Data processing and analysis
+- **Groq**: LLM API (Llama 3.1 8B Instant)
+- **Uvicorn**: ASGI server
+
+### Frontend
+- **Next.js 15+**: React framework with App Router
+- **Tailwind CSS v4**: Utility-first styling
+- **React Markdown**: Rich text rendering
+- **Lucide React**: Icon library
+- **Inter Font**: Clean typography
+
+## 🔧 Configuration
+
+### Backend Environment Variables
+
+```env
+GROQ_API_KEY=your_api_key          # Required: Groq API key
+DATA_DIR=data                      # Optional: Data directory path
+```
+
+### Frontend API Configuration
+
+Update `src/lib/api.js` if your backend runs on a different port:
+
+```javascript
+const API_BASE_URL = 'http://localhost:8000';
+```
+
+## 📊 Data Format
+
+The system expects CSV files with the following structure:
+
+### Holdings CSV
+- `PortfolioName`: Fund/portfolio identifier
+- `PL_YTD`: Year-to-date profit/loss
+- `Qty`: Quantity
+- `MV_Base`: Market value
+- Other financial metrics...
+
+### Trades CSV
+- Similar structure with trade-specific fields
+
+## 🛠️ Development
+
+### Running Tests
+
+```bash
+# Backend tests
+cd backend
+python test_api.py
+
+# Frontend (if tests are added)
+cd frontend-next
+npm test
+```
+
+### Building for Production
+
+```bash
+# Frontend production build
+cd frontend-next
+npm run build
+npm start
+```
+
+## 🐛 Troubleshooting
+
+### Backend Issues
+
+**Problem**: `ModuleNotFoundError: No module named 'csv_engine'`
+- **Solution**: Run uvicorn from the `backend/` directory
+
+**Problem**: No CSV files found
+- **Solution**: Ensure CSV files are in `backend/data/` directory
+
+### Frontend Issues
+
+**Problem**: Grey/blurry text in responses
+- **Solution**: Already fixed with `prose-neutral dark:prose-invert` classes
+
+**Problem**: Page reloads on new chat
+- **Solution**: Using `window.history.pushState()` instead of router navigation
+
+**Problem**: Tables not rendering
+- **Solution**: Ensure `react-markdown` and `remark-gfm` are installed
+
+## 📝 License
+
+This project is open source and available under the MIT License.
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## 📧 Support
+
+For issues and questions, please open an issue on the repository.
+
+---
+
+**Built with ❤️ using Next.js, FastAPI, and Groq AI**

backend/.python-version

@@ -0,0 +1 @@
+3.10

backend/csv_engine.py

@@ -0,0 +1,135 @@
+import pandas as pd
+import os
+import re
+from typing import Dict, List, Any
+
+class CSVEngine:
+    def __init__(self, data_directory: str):
+        self.data_directory = data_directory
+        self.dataframes: Dict[str, pd.DataFrame] = {}
+
+    def load_all_csvs(self) -> bool:
+        if not os.path.isdir(self.data_directory):
+            return False
+
+        loaded = False
+        for file in os.listdir(self.data_directory):
+            if file.lower().endswith(".csv"):
+                path = os.path.join(self.data_directory, file)
+                try:
+                    df = pd.read_csv(path)
+                    # Normalize: strip and lowercase all string values
+                    for col in df.columns:
+                        if df[col].dtype == 'object':
+                            df[col] = df[col].astype(str).str.strip().str.lower()
+                        if any(x in col.lower() for x in ['qty', 'pl_', 'mv_', 'price', 'principal']):
+                            df[col] = pd.to_numeric(df[col].replace('NULL', 0), errors='coerce').fillna(0)
+                    
+                    if not df.empty:
+                        self.dataframes[file] = df
+                        loaded = True
+                except Exception as e:
+                    print(f"Error loading {file}: {e}")
+
+        return loaded
+
+    def get_analytical_facts(self, query: str) -> str:
+        """
+        Consolidated analytical engine. Detects intent and computes facts.
+        """
+        q = query.lower()
+        facts = []
+        
+        # 1. Identify potential entities (words that aren't common stopwords)
+        words = set(re.findall(r'\b\w{3,}\b', q))
+        stop_words = {
+            'the', 'what', 'which', 'many', 'total', 'how', 'for', 'present', 
+            'data', 'provided', 'based', 'perform', 'better', 'than', 'number', 
+            'trades', 'holdings', 'and', 'with', 'that', 'fund', 'depends', 
+            'depending', 'yearly', 'loss', 'profit', 'show', 'tell', 'me', 'about',
+            'most', 'least', 'highest', 'lowest', 'records', 'portfolio'
+        }
+        entities = words - stop_words
+
+        # Find all unique fund/portfolio names in the data for cross-referencing
+        all_known_funds = set()
+        for df in self.dataframes.values():
+            group_col = next((c for c in df.columns if c.lower() in ['portfolioname', 'portfolio_name', 'shortname', 'name']), None)
+            if group_col:
+                all_known_funds.update(df[group_col].astype(str).unique())
+
+        # 2. Performance / Ranking Facts
+        if any(k in q for k in ["profit", "loss", "performed", "performance", "p&l", "ranking", "better", "best"]):
+            for filename, df in self.dataframes.items():
+                pl_col = next((c for c in df.columns if c.lower() == 'pl_ytd'), None)
+                group_col = next((c for c in df.columns if c.lower() in ['portfolioname', 'portfolio_name', 'shortname', 'name']), None)
+                
+                if pl_col and group_col:
+                    stats = df.groupby(group_col)[pl_col].sum().sort_values(ascending=False).to_dict()
+                    if stats:
+                        ranked_names = [name.capitalize() for name in stats.keys()]
+                        facts.append(f"Fact: In {filename}, funds ranked by performance (Best to Worst): {', '.join(ranked_names)}")
+                        for name, val in list(stats.items()):
+                            facts.append(f"Fact: Fund {name.capitalize()} in {filename} has total PL_YTD of {val:.4f}")
+
+        # 3. Global Stats / Generic record counting
+        if any(k in q for k in ["most", "least", "count", "record", "portfolio", "records", "highest", "lowest"]):
+            for filename, df in self.dataframes.items():
+                group_col = next((c for c in df.columns if c.lower() in ['portfolioname', 'portfolio_name', 'shortname', 'name']), None)
+                if group_col:
+                    counts = df[group_col].value_counts().sort_values(ascending=False).to_dict()
+                    if counts:
+                        top_portfolio = list(counts.keys())[0]
+                        facts.append(f"Fact: In {filename}, portfolio '{top_portfolio.capitalize()}' has the absolute highest number of records ({counts[top_portfolio]}).")
+                        # Detailed counts for top portfolios
+                        details = [f"{k.capitalize()}: {v} records" for k, v in list(counts.items())]
+                        facts.append(f"Fact: Summary of record counts in {filename}: {', '.join(details)}.")
+
+        # 4. Entity specific investigation (Dynamic)
+        detected_entities = entities & all_known_funds
+
+        
+        # If no specific fund detected but user is asking about a fund, we check if any query word matches PARTIALLY
+        if not detected_entities:
+            for entity in entities:
+                matches = [fund for fund in all_known_funds if entity in fund]
+                detected_entities.update(matches)
+
+        for entity in detected_entities:
+            for filename, df in self.dataframes.items():
+                group_col = next((c for c in df.columns if c.lower() in ['portfolioname', 'portfolio_name', 'shortname', 'name', 'strategyname']), None)
+                if group_col:
+                    mask = df[group_col].astype(str).str.contains(entity, case=False, na=False)
+                    count = int(mask.sum())
+                    if count > 0 or entity in ["ytum", "garfield", "heather"]:
+                        facts.append(f"Fact: {entity.capitalize()} has {count} records in {filename}.")
+                        
+                        if count > 0:
+                            pl_col = next((c for c in df.columns if c.lower() == 'pl_ytd'), None)
+                            if pl_col:
+                                total_pl = df[mask][pl_col].sum()
+                                facts.append(f"Fact: {entity.capitalize()} has a total PL_YTD of {total_pl:.4f} in {filename}.")
+                            
+                            qty_col = next((c for c in df.columns if c.lower() == 'qty'), None)
+                            if qty_col:
+                                total_qty = df[mask][qty_col].sum()
+                                facts.append(f"Fact: {entity.capitalize()} has a total Quantity of {total_qty:.4f} in {filename}.")
+
+        # Deduplicate facts
+        facts = list(dict.fromkeys(facts))
+        return "\n".join(facts) if facts else "No specific numerical facts computed for the given entities/metrics."
+
+    def get_schema_sample(self, row_limit: int = 3) -> str:
+        output = []
+        for filename, df in self.dataframes.items():
+            output.append(f"### Dataset: {filename}")
+            output.append(f"Columns: {', '.join(df.columns)}")
+            output.append(df.head(row_limit).to_string(index=False))
+            output.append("")
+        return "\n".join(output)
+
+    def validate_schema(self) -> bool:
+        if not self.dataframes: return False
+        for df in self.dataframes.values():
+            if df.empty or len(df.columns) == 0: return False
+        return True

backend/llm_client.py

@@ -0,0 +1,69 @@
+import os
+from groq import Groq
+from dotenv import load_dotenv
+
+load_dotenv()
+
+SYSTEM_PROMPT_TEMPLATE = """You are a helpful and professional Financial Portfolio Assistant.
+
+Your objective is to provide clear, insightful, and accurate answers based on the provided data.
+
+CONTEXT:
+1. DATA INSIGHTS: These are pre-verified facts computed from the entire dataset. Use these as your primary source of truth for counts, sums, and rankings.
+2. SCHEMA SAMPLE: This shows the structure and a few example rows for context.
+
+HOW TO ANSWER:
+- Be conversational yet professional. Do NOT mention "Pre-computed facts" or "technical data" to the user. Simply present the numbers as part of your helpful response.
+- Use bold text, bullet points, and tables to make the data easy to read.
+- **Provide a comprehensive list**: If the DATA INSIGHTS contain many funds or portfolios, include all of them in your answer (using a table or list) instead of just the top few, unless the user specifically asks for a "top X".
+- If the data is available, answer directly and clearly.
+- If you don't have enough data to answer, say: "I'm sorry, I couldn't find specific information for that in the current data."
+- Treat technical terms like 'PL_YTD' as 'Profit and Loss' and 'MV_Base' as 'Market Value'.
+
+STRICT CONSTRAINTS:
+- Use only the provided information. No external knowledge.
+- Be precise with numbers—do not round them unless requested.
+
+DATA INSIGHTS:
+{FACTS}
+
+SCHEMA SAMPLE:
+{CSV_DATA}
+
+User Question:
+{USER_QUESTION}
+"""
+
+
+
+
+
+
+class LLMClient:
+    def __init__(self):
+        api_key = os.getenv("GROQ_API_KEY")
+        if not api_key:
+            raise ValueError("GROQ_API_KEY not found in environment variables.")
+
+        self.client = Groq(api_key=api_key)
+        self.model = "llama-3.1-8b-instant"
+
+    def get_answer(self, context: str, question: str, facts: str = "") -> str:
+        prompt = SYSTEM_PROMPT_TEMPLATE.format(
+            FACTS=facts if facts else "No specific facts computed.",
+            CSV_DATA=context,
+            USER_QUESTION=question
+        )
+
+        try:
+
+            response = self.client.chat.completions.create(
+                model=self.model,
+                messages=[{"role": "system", "content": prompt}],
+                temperature=0,
+                max_tokens=1000
+            )
+            return response.choices[0].message.content.strip()
+
+        except Exception as e:
+            return f"Error communicating with LLM: {str(e)}"

backend/main.py

@@ -0,0 +1,176 @@
+from fastapi import FastAPI, HTTPException, Request
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import StreamingResponse
+from pydantic import BaseModel
+from csv_engine import CSVEngine
+from llm_client import LLMClient
+import os
+import json
+import uuid
+from datetime import datetime
+from contextlib import asynccontextmanager
+
+# Memory storage for conversations
+conversations = {}
+
+@asynccontextmanager
+async def lifespan(app: FastAPI):
+    # Startup
+    if not engine.load_all_csvs():
+        print("Warning: No CSV files found.")
+    if not engine.validate_schema():
+        print("Warning: CSV files are invalid or empty.")
+    yield
+    # Shutdown
+
+app = FastAPI(title="Analytical Chatbot API", lifespan=lifespan)
+
+# Enable CORS for the frontend
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"], # In production, restrict this to your frontend URL
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+class ChatRequest(BaseModel):
+    question: str
+
+class OldChatResponse(BaseModel):
+    answer: str
+
+DATA_DIR = os.getenv("DATA_DIR", "data")
+engine = CSVEngine(DATA_DIR)
+llm = LLMClient()
+
+# --- Compatibility Endpoints for DevoChat UI ---
+
+@app.get("/auth/status")
+async def auth_status():
+    return {"logged_in": True, "user": {"id": "user_123", "username": "admin", "role": "admin"}}
+
+@app.get("/auth/user")
+async def auth_user():
+    return {"id": "user_123", "username": "admin", "role": "admin"}
+
+@app.get("/chat_models")
+async def chat_models():
+    return {
+        "default": "analytical",
+        "models": [{
+            "model_name": "analytical",
+            "model_alias": "Analytical Engine",
+            "capabilities": {"stream": True, "inference": False, "search": False, "deep_research": False, "image": False, "mcp": False},
+            "controls": {"temperature": True, "reason": True, "verbosity": True, "system_message": True},
+            "billing": {"in_billing": 0, "out_billing": 0},
+            "description": "Financial Analysis Engine",
+            "endpoint": "/chat/conversation"
+        }]
+    }
+
+@app.get("/image_models")
+async def image_models():
+    return {"default": None, "models": []}
+
+@app.get("/realtime_models")
+async def realtime_models():
+    return {"default": None, "models": []}
+
+@app.get("/notice")
+async def get_notice():
+    return {"message": "Welcome to the Analytical Finance Chatbot!", "hash": "v1"}
+
+@app.post("/chat/new_conversation")
+async def new_conversation():
+    conversation_id = str(uuid.uuid4())
+    now = datetime.now().isoformat()
+    conversations[conversation_id] = {
+        "conversation_id": conversation_id,
+        "messages": [],
+        "created_at": now,
+        "updated_at": now,
+        "model": "analytical"
+    }
+    return conversations[conversation_id]
+
+@app.get("/conversation/all")
+async def get_all_conversations():
+    return list(conversations.values())
+
+@app.get("/conversation/{conversation_id}")
+async def get_conversation(conversation_id: str):
+    if conversation_id not in conversations:
+        raise HTTPException(status_code=404, detail="Conversation not found")
+    return conversations[conversation_id]
+
+@app.post("/chat/get_alias")
+async def get_alias(request: dict):
+    # Simple alias generator: take first 20 chars of the text
+    text = request.get("text", "New Conversation")
+    alias = text[:20] + "..." if len(text) > 20 else text
+    return {"alias": alias}
+
+# --- Core Analytical Chat Endpoint (Streaming version for DevoChat) ---
+
+class DevoChatRequest(BaseModel):
+    conversation_id: str
+    user_message: list # List of dicts with 'text' or 'image'
+
+async def stream_analytical_response(question: str, conversation_id: str):
+    try:
+        # Get facts and schema
+        facts_text = engine.get_analytical_facts(question)
+        sample = engine.get_schema_sample()
+        
+        # Get answer from LLM
+        # Note: Our current LLMClient doesn't support streaming from Groq yet, 
+        # so we'll simulate streaming for the UI.
+        full_answer = llm.get_answer(sample, question, facts_text)
+        
+        # Update history
+        if conversation_id in conversations:
+            conversations[conversation_id]["messages"].append({"role": "user", "content": question})
+            conversations[conversation_id]["messages"].append({"role": "assistant", "content": full_answer})
+            conversations[conversation_id]["updated_at"] = datetime.now().isoformat()
+
+        # Stream chunks to the UI
+        # DevoChat expects "data: {\"content\": \"...\"}\n\n"
+        chunk_size = 20
+        for i in range(0, len(full_answer), chunk_size):
+            chunk = full_answer[i:i+chunk_size]
+            yield f"data: {json.dumps({'content': chunk})}\n\n"
+        
+        yield "data: [DONE]\n\n"
+    except Exception as e:
+        yield f"data: {json.dumps({'error': str(e)})}\n\n"
+
+@app.post("/chat/conversation")
+async def chat_conversation(request: DevoChatRequest):
+    conversation_id = request.conversation_id
+    # Extract the text message from the list
+    user_text = ""
+    for item in request.user_message:
+        if item.get("type") == "text":
+            user_text = item.get("text")
+            break
+    
+    if not user_text:
+        raise HTTPException(status_code=400, detail="No text message found")
+
+    return StreamingResponse(
+        stream_analytical_response(user_text, conversation_id),
+        media_type="text/event-stream"
+    )
+
+# --- Keep original endpoint for compatibility ---
+@app.post("/chat", response_model=OldChatResponse)
+async def chat_legacy(request: ChatRequest):
+    facts_text = engine.get_analytical_facts(request.question)
+    sample = engine.get_schema_sample()
+    answer = llm.get_answer(sample, request.question, facts_text)
+    return OldChatResponse(answer=answer)
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=8000)

backend/pyproject.toml

@@ -0,0 +1,14 @@
+[project]
+name = "project-proojectloop"
+version = "0.1.0"
+description = "Add your description here"
+readme = "README.md"
+requires-python = ">=3.10"
+dependencies = [
+    "fastapi",
+    "uvicorn",
+    "pandas",
+    "groq",
+    "python-dotenv",
+]
+

backend/test_api.py

@@ -0,0 +1,31 @@
+import requests
+import json
+
+BASE_URL = "http://127.0.0.1:8000"
+
+def test_chat(question):
+    payload = {"question": question}
+    response = requests.post(f"{BASE_URL}/chat", json=payload)
+    print(f"Question: {question}")
+    if response.status_code == 200:
+        print(f"Answer: {response.json()['answer']}")
+    else:
+        print(f"Error: {response.status_code} - {response.text}")
+    print("-" * 30)
+
+if __name__ == "__main__":
+    # Test 1: Performance Ranking
+    test_chat("Which funds performed better depending on the yearly Profit and Loss of that fund?")
+    
+    # Test 2: Specific Fund (Ytum)
+    test_chat("How many holdings does the Ytum fund have?")
+    
+    # Test 3: Specific Fund (Garfield)
+    test_chat("Can you tell me about the performance of the Garfield fund?")
+    
+    # Test 4: Cross-file check
+    test_chat("Does Heather have any trades?")
+    
+    # Test 5: Generic query
+    test_chat("Which portfolio has the most records?")
+

frontend-next/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

frontend-next/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

frontend-next/eslint.config.mjs

@@ -0,0 +1,16 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

frontend-next/jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

frontend-next/next.config.mjs

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

frontend-next/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "frontend-next",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@tailwindcss/typography": "^0.5.19",
+    "lucide-react": "^0.562.0",
+    "next": "16.1.4",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.4",
+    "tailwindcss": "^4"
+  }
+}

frontend-next/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

frontend-next/src/app/c/[id]/page.js

@@ -0,0 +1,32 @@
+import ChatInterface from '@/components/ChatInterface';
+import { api } from '@/lib/api';
+import { redirect } from 'next/navigation';
+
+// This is a Server Component fetching initial data
+export default async function ChatPage({ params }) {
+    const { id } = params;
+
+    // Fetch conversation history server-side for initial render
+    // Note: We need to handle this gracefully if it fails
+    let initialMessages = [];
+    try {
+        const data = await api.getConversation(id);
+        if (!data) {
+            // Conversation not found, redirect to new chat
+            redirect('/');
+        }
+        if (data && data.messages) {
+            initialMessages = data.messages;
+        }
+    } catch (e) {
+        // If redirect throws (which it does in Next.js), let it bubble up
+        if (e.message === 'NEXT_REDIRECT') throw e;
+        console.error("Failed to load conversation", e);
+    }
+
+    return (
+        <div className="h-full flex-1">
+            <ChatInterface conversationId={id} initialMessages={initialMessages} />
+        </div>
+    );
+}

frontend-next/src/app/globals.css

@@ -0,0 +1,60 @@
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+
+@theme {
+  --font-sans: 'Inter', sans-serif;
+}
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 255, 255, 255;
+  --background-end-rgb: 255, 255, 255;
+
+  --sidebar-bg: #000000;
+  --sidebar-fg: #ffffff;
+  --sidebar-hover: #202123;
+
+  --user-msg-bg: #ffffff;
+  --ai-msg-bg: #f7f7f8;
+  --border-color: #e5e5e5;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 52, 53, 65;
+    --background-end-rgb: 52, 53, 65;
+
+    --sidebar-bg: #202123;
+    --sidebar-fg: #ececf1;
+    --sidebar-hover: #2a2b32;
+
+    --user-msg-bg: #343541;
+    --ai-msg-bg: #444654;
+    --border-color: #2a2b32;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: rgb(var(--background-start-rgb));
+  font-family: var(--font-sans);
+}
+
+/* Custom Scrollbar */
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+.custom-scrollbar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.2);
+  border-radius: 3px;
+}

frontend-next/src/app/layout.js

@@ -0,0 +1,30 @@
+import { Inter } from 'next/font/google';
+import './globals.css';
+import Sidebar from '@/components/Sidebar';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata = {
+  title: 'Analytical Chat',
+  description: 'AI-powered analytical assistant',
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <div className="flex h-screen overflow-hidden">
+          {/* Sidebar */}
+          <div className="hidden md:flex flex-shrink-0 bg-black">
+            <Sidebar />
+          </div>
+
+          {/* Main Content */}
+          <main className="flex-1 relative h-full max-w-full overflow-hidden flex flex-col bg-[var(--background-start-rgb)]">
+            {children}
+          </main>
+        </div>
+      </body>
+    </html>
+  );
+}

frontend-next/src/app/page.js

@@ -0,0 +1,9 @@
+import ChatInterface from '@/components/ChatInterface';
+
+export default function Home() {
+  return (
+    <div className="h-full flex-1">
+      <ChatInterface />
+    </div>
+  );
+}

frontend-next/src/components/ChatInterface.js

@@ -0,0 +1,237 @@
+"use client";
+
+import { useState, useRef, useEffect } from 'react';
+import { Send, User, Bot, Loader2 } from 'lucide-react';
+import { api } from '@/lib/api';
+import { useRouter } from 'next/navigation';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+export default function ChatInterface({ conversationId, initialMessages = [] }) {
+    const [messages, setMessages] = useState(initialMessages);
+    const [input, setInput] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+    const messagesEndRef = useRef(null);
+    const router = useRouter();
+    const [streamingContent, setStreamingContent] = useState('');
+
+    const scrollToBottom = () => {
+        messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    };
+
+    useEffect(() => {
+        scrollToBottom();
+    }, [messages, streamingContent]);
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (!input.trim() || isLoading) return;
+
+        const userMessage = input.trim();
+        setInput('');
+        setMessages(prev => [...prev, { role: 'user', content: userMessage }]);
+        setIsLoading(true);
+        setStreamingContent('');
+
+        let currentId = conversationId;
+
+        try {
+            // If no conversation ID, create one first
+            if (!currentId) {
+                const newConv = await api.createConversation();
+                if (!newConv) throw new Error("Failed to create conversation");
+                currentId = newConv.conversation_id;
+                // Update URL without reloading
+                window.history.pushState({}, '', `/c/${currentId}`);
+                // Or use router.replace if prefer Next.js way, but we want to stay mounted
+                // We might need to handle this carefully.
+                // For now, let's just proceed with the currentId for the request.
+            }
+
+            // Start streaming request
+            const response = await fetch(api.getChatEndpoint(), {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    conversation_id: currentId,
+                    user_message: [{ type: 'text', text: userMessage }]
+                }),
+            });
+
+            if (!response.ok) throw new Error('Network response was not ok');
+
+            const reader = response.body.getReader();
+            const decoder = new TextDecoder();
+            let done = false;
+            let fullAssistantMessage = '';
+
+            while (!done) {
+                const { value, done: doneReading } = await reader.read();
+                done = doneReading;
+                const chunkValue = decoder.decode(value, { stream: !done });
+
+                // Parse SSE format: "data: {...}\n\n"
+                const lines = chunkValue.split('\n\n');
+                for (const line of lines) {
+                    if (line.startsWith('data: ')) {
+                        const dataStr = line.slice(6);
+                        if (dataStr === '[DONE]') {
+                            done = true;
+                            break;
+                        }
+                        try {
+                            const data = JSON.parse(dataStr);
+                            if (data.content) {
+                                fullAssistantMessage += data.content;
+                                setStreamingContent(fullAssistantMessage);
+                            }
+                            if (data.error) {
+                                console.error("Stream error:", data.error);
+                            }
+                        } catch (e) {
+                            // ignore partial json
+                        }
+                    }
+                }
+            }
+
+            // Finalize message
+            setMessages(prev => [...prev, { role: 'assistant', content: fullAssistantMessage }]);
+            setStreamingContent('');
+            setIsLoading(false);
+
+            // If we created a new chat, update the sidebar without reloading the chat component
+            if (!conversationId && currentId) {
+                window.dispatchEvent(new Event('chat-update'));
+                // Ensure the router knows about the new path for future navigations, 
+                // but do it silently if possible or just rely on pushState.
+                // We already did pushState.
+            } else {
+                // Triggers sidebar update for existing chats too (timestamp update)
+                window.dispatchEvent(new Event('chat-update'));
+            }
+
+        } catch (error) {
+            console.error("Error sending message:", error);
+            setMessages(prev => [...prev, { role: 'system', content: "Error sending message. Please try again." }]);
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <div className="flex flex-col h-full max-w-3xl mx-auto w-full">
+            {/* Messages Area */}
+            <div className="flex-1 overflow-y-auto w-full p-4 md:p-6 pb-32">
+                {messages.length === 0 && (
+                    <div className="h-full flex flex-col items-center justify-center text-center opacity-50">
+                        <h1 className="text-4xl font-semibold mb-8">Analytical Chat</h1>
+                        <p className="max-w-md text-sm">Ask anything about your data. The AI will analyze and provide insights.</p>
+                    </div>
+                )}
+
+                {messages.map((msg, idx) => (
+                    <div key={idx} className={`group w-full text-gray-800 dark:text-gray-100 border-b border-black/5 dark:border-white/5 ${msg.role === 'assistant' ? 'bg-[var(--ai-msg-bg)]' : 'bg-[var(--user-msg-bg)]'
+                        }`}>
+                        <div className="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-[38rem] xl:max-w-3xl flex lg:px-0 m-auto p-4 md:py-6">
+                            <div className="w-[30px] flex flex-col relative items-end">
+                                <div className={`relative h-[30px] w-[30px] p-1 rounded-sm flex items-center justify-center ${msg.role === 'user' ? 'bg-black text-white dark:bg-white dark:text-black' : 'bg-green-500 text-white'}`}>
+                                    {msg.role === 'user' ? <User size={18} /> : <Bot size={18} />}
+                                </div>
+                            </div>
+                            <div className="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
+                                <div className="flex flex-grow flex-col gap-3">
+                                    <div className="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap break-words prose prose-neutral dark:prose-invert max-w-none text-black dark:text-gray-100">
+                                        <ReactMarkdown
+                                            remarkPlugins={[remarkGfm]}
+                                            components={{
+                                                table: ({ node, ...props }) => <div className="overflow-x-auto my-4 w-full"><table className="border-collapse table-auto w-full text-sm" {...props} /></div>,
+                                                th: ({ node, ...props }) => <th className="border-b dark:border-white/20 border-black/10 px-4 py-2 text-left font-semibold" {...props} />,
+                                                td: ({ node, ...props }) => <td className="border-b dark:border-white/10 border-black/5 px-4 py-2" {...props} />,
+                                                p: ({ node, ...props }) => <p className="mb-2 last:mb-0" {...props} />,
+                                                ul: ({ node, ...props }) => <ul className="list-disc pl-4 mb-4" {...props} />,
+                                                ol: ({ node, ...props }) => <ol className="list-decimal pl-4 mb-4" {...props} />,
+                                                li: ({ node, ...props }) => <li className="mb-1" {...props} />,
+                                                code: ({ node, inline, className, children, ...props }) => {
+                                                    return inline ?
+                                                        <code className="bg-black/10 dark:bg-white/10 rounded-sm px-1 py-0.5 font-mono text-sm" {...props}>{children}</code> :
+                                                        <code className="block bg-black/10 dark:bg-white/10 rounded-md p-4 font-mono text-sm overflow-x-auto my-2" {...props}>{children}</code>
+                                                }
+                                            }}
+                                        >
+                                            {msg.content}
+                                        </ReactMarkdown>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                ))}
+
+                {/* Streaming Message Bubble */}
+                {(isLoading && streamingContent) && (
+                    <div className="group w-full text-gray-800 dark:text-gray-100 border-b border-black/5 dark:border-white/5 bg-[var(--ai-msg-bg)]">
+                        <div className="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-[38rem] xl:max-w-3xl flex lg:px-0 m-auto p-4 md:py-6">
+                            <div className="w-[30px] flex flex-col relative items-end">
+                                <div className="relative h-[30px] w-[30px] p-1 rounded-sm flex items-center justify-center bg-green-500 text-white">
+                                    <Bot size={18} />
+                                </div>
+                            </div>
+                            <div className="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
+                                <div className="flex flex-grow flex-col gap-3">
+                                    <div className="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap break-words prose prose-neutral dark:prose-invert max-w-none text-black dark:text-gray-100">
+                                        <ReactMarkdown
+                                            remarkPlugins={[remarkGfm]}
+                                            components={{
+                                                table: ({ node, ...props }) => <div className="overflow-x-auto my-4 w-full"><table className="border-collapse table-auto w-full text-sm" {...props} /></div>,
+                                                th: ({ node, ...props }) => <th className="border-b dark:border-white/20 border-black/10 px-4 py-2 text-left font-semibold" {...props} />,
+                                                td: ({ node, ...props }) => <td className="border-b dark:border-white/10 border-black/5 px-4 py-2" {...props} />,
+                                            }}
+                                        >
+                                            {streamingContent}
+                                        </ReactMarkdown>
+                                        <span className="w-2 h-4 bg-gray-500 inline-block animate-pulse" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                )}
+                {(isLoading && !streamingContent) && (
+                    <div className="flex justify-center p-4"><Loader2 className="animate-spin text-gray-400" /></div>
+                )}
+                <div ref={messagesEndRef} />
+            </div>
+
+            {/* Input Area */}
+            <div className="absolute bottom-0 left-0 w-full border-t md:border-t-0 dark:border-white/20 md:border-transparent md:dark:border-transparent md:bg-gradient-to-t from-white dark:from-[var(--background-start-rgb)] to-transparent pt-0 md:pt-2">
+                <div className="stretch mx-2 flex flex-row gap-3 md:mx-4 md:last:mb-6 lg:mx-auto lg:max-w-2xl xl:max-w-3xl">
+                    <div className="relative flex h-full flex-1 items-stretch md:flex-col">
+                        <div className="flex flex-col w-full py-2 flex-grow md:py-3 md:pl-4 relative border border-black/10 dark:border-gray-900/50 text-black dark:text-white bg-white dark:bg-gray-700 rounded-md shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:shadow-[0_0_15px_rgba(0,0,0,0.10)]">
+                            <form onSubmit={handleSubmit} className="flex flex-row w-full items-center">
+                                <input
+                                    className="m-0 w-full resize-none border-0 bg-transparent p-0 pr-7 focus:ring-0 focus-visible:ring-0 dark:bg-transparent pl-2 md:pl-0 outline-none overflow-y-hidden h-[24px]"
+                                    placeholder="Send a message..."
+                                    value={input}
+                                    onChange={(e) => setInput(e.target.value)}
+                                    autoFocus
+                                />
+                                <button
+                                    type="submit"
+                                    disabled={isLoading || input.length === 0}
+                                    className="absolute p-1 rounded-md text-gray-500 bottom-1.5 right-1 md:bottom-2.5 md:right-2 hover:bg-gray-100 dark:hover:bg-gray-900 disabled:hover:bg-transparent disabled:opacity-40 transition-colors"
+                                >
+                                    <Send size={16} />
+                                </button>
+                            </form>
+                        </div>
+                        <div className="px-2 py-2 text-center text-xs text-gray-600 dark:text-gray-300 md:px-[60px]">
+                            <span>AI can make mistakes. Consider checking important information.</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

frontend-next/src/components/Sidebar.js

@@ -0,0 +1,107 @@
+"use client";
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { usePathname, useRouter } from 'next/navigation';
+import { Plus, MessageSquare, ExternalLink, LogOut, User } from 'lucide-react';
+import { api } from '@/lib/api';
+
+export default function Sidebar() {
+    const [conversations, setConversations] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const router = useRouter();
+    const pathname = usePathname();
+
+    useEffect(() => {
+        loadConversations();
+
+        // Listen for updates from ChatInterface
+        const handleUpdate = () => loadConversations();
+        window.addEventListener('chat-update', handleUpdate);
+        return () => window.removeEventListener('chat-update', handleUpdate);
+    }, [pathname]); // Reload when path changes (e.g. new chat created)
+
+    const loadConversations = async () => {
+        try {
+            const data = await api.getConversations();
+            // Sort by updated_at desc
+            const sorted = (data || []).sort((a, b) =>
+                new Date(b.updated_at) - new Date(a.updated_at)
+            );
+            setConversations(sorted);
+        } catch (error) {
+            console.error('Failed to load conversations', error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleNewChat = async () => {
+        try {
+            const newConv = await api.createConversation();
+            if (newConv && newConv.conversation_id) {
+                router.push(`/c/${newConv.conversation_id}`);
+                // loadConversations will trigger via useEffect
+            }
+        } catch (error) {
+            console.error('Failed to create new chat', error);
+        }
+    };
+
+    return (
+        <div className="flex flex-col h-full w-[260px] bg-[var(--sidebar-bg)] text-[var(--sidebar-fg)] transition-all">
+            {/* New Chat Button */}
+            <div className="p-3">
+                <button
+                    onClick={handleNewChat}
+                    className="flex items-center gap-3 w-full px-3 py-3 rounded-md border border-white/20 transition-colors duration-200 hover:bg-[var(--sidebar-hover)] text-sm text-white mb-1"
+                >
+                    <Plus size={16} />
+                    <span>New chat</span>
+                </button>
+            </div>
+
+            {/* Conversation List */}
+            <div className="flex-1 overflow-y-auto custom-scrollbar px-2">
+                <div className="flex flex-col gap-2 pb-2 text-sm text-gray-100">
+                    {!loading && conversations.length === 0 && (
+                        <div className="px-3 text-gray-400 text-xs">No conversations yet.</div>
+                    )}
+
+                    {conversations.map((conv) => {
+                        const isActive = pathname === `/c/${conv.conversation_id}`;
+                        // If alias is missing, show ID or fallback
+                        const label = conv.alias || conv.messages?.[0]?.content || "New conversation";
+                        const truncatedLabel = label.length > 25 ? label.substring(0, 25) + '...' : label;
+
+                        return (
+                            <Link
+                                key={conv.conversation_id}
+                                href={`/c/${conv.conversation_id}`}
+                                className={`group flex items-center gap-3 px-3 py-3 rounded-md transition-colors duration-200 hover:bg-[var(--sidebar-hover)] ${isActive ? 'bg-[var(--sidebar-hover)]' : ''
+                                    }`}
+                            >
+                                <MessageSquare size={16} className="text-gray-300" />
+                                <div className="flex-1 overflow-hidden relative truncate">
+                                    {truncatedLabel}
+                                </div>
+                            </Link>
+                        );
+                    })}
+                </div>
+            </div>
+
+            {/* Footer / User Profile section */}
+            <div className="border-t border-white/20 p-3">
+                <button className="flex items-center gap-3 w-full px-3 py-3 rounded-md hover:bg-[var(--sidebar-hover)] transition-colors duration-200 text-sm text-white">
+                    <User size={16} />
+                    <div className="font-bold">Upgrade to Plus</div>
+                </button>
+                <div className="flex items-center gap-3 w-full px-3 py-3 rounded-md hover:bg-[var(--sidebar-hover)] transition-colors duration-200 text-sm text-white mt-1 cursor-pointer">
+                    <div className="w-5 h-5 rounded-sm bg-purple-600 flex items-center justify-center text-xs">U</div>
+                    <span>User</span>
+                </div>
+            </div>
+        </div>
+    );
+}

frontend-next/src/lib/api.js

@@ -0,0 +1,47 @@
+// Basic API client for the analytical backend
+
+const API_BASE_URL = 'http://localhost:8000'; // Make this configurable via env
+
+export const api = {
+    // Get all conversations
+    getConversations: async () => {
+        try {
+            const res = await fetch(`${API_BASE_URL}/conversation/all`);
+            if (!res.ok) throw new Error('Failed to fetch conversations');
+            return await res.json();
+        } catch (error) {
+            console.error(error);
+            return [];
+        }
+    },
+
+    // Create new conversation
+    createConversation: async () => {
+        try {
+            const res = await fetch(`${API_BASE_URL}/chat/new_conversation`, {
+                method: 'POST',
+            });
+            if (!res.ok) throw new Error('Failed to create conversation');
+            return await res.json();
+        } catch (error) {
+            console.error(error);
+            return null;
+        }
+    },
+
+    // Get specific conversation details
+    getConversation: async (id) => {
+        try {
+            const res = await fetch(`${API_BASE_URL}/conversation/${id}`);
+            if (res.status === 404) return null; // Gracefully handle not found
+            if (!res.ok) throw new Error('Failed to fetch conversation');
+            return await res.json();
+        } catch (error) {
+            console.error('API Error:', error);
+            return null;
+        }
+    },
+
+    // Stream response - helper for EventSource usage
+    getChatEndpoint: () => `${API_BASE_URL}/chat/conversation`,
+};