Updated

.dockerignore

@@ -1,6 +1,9 @@
-frontend/
 .git/
 .gitignore
-data/chroma/
-*.pdf
-node_modules/
+chroma_db/
+memory.db/
+frontend/node_modules/
+frontend/dist/
+__pycache__/
+*.pyc
+.env

Dockerfile

@@ -1,11 +1,36 @@
+# Build stage for React frontend
+FROM node:20-slim as build-frontend
+
+WORKDIR /app/frontend
+COPY frontend/package*.json ./
+RUN npm install
+COPY frontend/ ./
+RUN npm run build
+
+# Final stage
 FROM python:3.11-slim
 
 WORKDIR /app
 
-COPY requirements.txt .
+# Install system dependencies for ChromaDB and other libraries
+RUN apt-get update && apt-get install -y \
+    build-essential \
+    curl \
+    && rm -rf /var/lib/apt/lists/*
 
+# Copy requirements and install
+COPY requirements.txt .
 RUN pip install --no-cache-dir -r requirements.txt
 
+# Copy backend code
 COPY . .
 
-CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "8000", "--reload"]
+# Copy built frontend from stage 1
+COPY --from=build-frontend /app/frontend/dist ./frontend/dist
+
+# Expose port (user requested 7860)
+EXPOSE 7860
+
+# Command to run the application
+# We use uvicorn to serve the FastAPI app which also serves the frontend
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -1,11 +0,0 @@
----
-title: DSTV AI Support
-emoji: 😻
-colorFrom: pink
-colorTo: red
-sdk: docker
-pinned: false
-license: apache-2.0
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app/api/endpoints/chat.py

@@ -1,51 +0,0 @@
-from fastapi import APIRouter, HTTPException
-from fastapi.responses import StreamingResponse
-from pydantic import BaseModel
-from typing import List
-from app.services.llm import llm_service
-from app.services.rag import rag_service
-
-router = APIRouter()
-
-class Message(BaseModel):
-    role: str
-    content: str
-
-class ChatRequest(BaseModel):
-    messages: List[Message]
-
-@router.post("/chat")
-async def chat_endpoint(request: ChatRequest):
-    try:
-        # 1. Extract latest query
-        if not request.messages:
-            raise HTTPException(status_code=400, detail="No messages provided")
-        
-        last_message = request.messages[-1]
-        user_query = last_message.content
-
-        # 2. Retrieve Context (RAG)
-        # Note: In a real system, we'd only RAG on user queries, not history, 
-        # but here we keep it simple.
-        context_docs = rag_service.query(user_query)
-        context_text = "\n\n".join(context_docs) # context_docs is list of strings
-
-        # 3. Stream Response
-        # Convert pydantic messages to dict
-        messages_dict = [{"role": m.role, "content": m.content} for m in request.messages]
-        
-        return StreamingResponse(
-            llm_service.chat_stream(messages_dict, context=context_text),
-            media_type="text/event-stream"
-        )
-
-    except Exception as e:
-        print(f"Error in chat endpoint: {e}")
-        raise HTTPException(status_code=500, detail=str(e))
-
-@router.post("/ingest")
-async def ingest_endpoint(url: str):
-    success = rag_service.scrape_and_ingest(url)
-    if success:
-        return {"status": "success", "message": f"Ingested {url}"}
-    raise HTTPException(status_code=400, detail="Failed to ingest URL")

app/core/config.py

@@ -1,11 +0,0 @@
-from pydantic_settings import BaseSettings
-
-class Settings(BaseSettings):
-    XAI_API_KEY: str
-    REDIS_HOST: str = "redis"
-    REDIS_PORT: int = 6379
-
-    class Config:
-        env_file = ".env"
-
-settings = Settings()

app/main.py

@@ -1,31 +0,0 @@
-from fastapi import FastAPI
-from fastapi.middleware.cors import CORSMiddleware
-from app.core.config import settings
-from app.api.endpoints import chat
-
-app = FastAPI(title="DStv AI Support")
-
-# CORS
-origins = [
-    "http://localhost:5173",
-    "http://localhost:80",
-]
-
-app.add_middleware(
-    CORSMiddleware,
-    allow_origins=origins,
-    allow_credentials=True,
-    allow_methods=["*"],
-    allow_headers=["*"],
-)
-
-@app.get("/health")
-def health_check():
-    return {"status": "ok", "service": "DStv AI Support Backend"}
-
-@app.get("/")
-def root():
-    return {"message": "DStv AI Support API is running"}
-
-app.include_router(chat.router, prefix="/api")
-

app/services/llm.py

@@ -1,45 +0,0 @@
-from openai import OpenAI
-from app.core.config import settings
-from typing import List, Dict, Generator
-
-class LLMService:
-    def __init__(self):
-        self.client = OpenAI(
-            api_key=settings.XAI_API_KEY,
-            base_url="https://api.x.ai/v1"
-        )
-        self.model = "grok-4-1-fast-reasoning" # Actually check if this is the exact string. Assuming yes based on prompt.
-
-    def get_system_prompt(self, context: str = "") -> str:
-        base_prompt = """You are DStv AI Support, a friendly and helpful customer service agent for DStv.
-Your goal is to assist customers with subscriptions, packages, payments, decoder issues, signal problems, installations, and account management.
-
-Brand Voice:
-- Friendly, practical, and clear.
-- Do NOT say "I am an AI", "Based on the context", or "Internal system details".
-- Speak like a real human agent.
-
-Context from Knowledge Base:
-{context}
-
-If the context helps, use it. If not, use your general knowledge but be careful not to hallucinate DStv specifics.
-If you don't know, suggest they check self-service on dstv.com or contact our call center.
-"""
-        return base_prompt.replace("{context}", context)
-
-    def chat_stream(self, messages: List[Dict[str, str]], context: str = "") -> Generator[str, None, None]:
-        system_msg = {"role": "system", "content": self.get_system_prompt(context)}
-        full_messages = [system_msg] + messages
-
-        stream = self.client.chat.completions.create(
-            model=self.model,
-            messages=full_messages, 
-            stream=True,
-            temperature=0.4 # Lower temperature for support accuracy
-        )
-
-        for chunk in stream:
-            if chunk.choices[0].delta.content:
-                yield chunk.choices[0].delta.content
-
-llm_service = LLMService()

app/services/rag.py

@@ -1,112 +0,0 @@
-import chromadb
-from chromadb.utils import embedding_functions
-import requests
-from bs4 import BeautifulSoup
-import uuid
-import os
-from pydantic_settings import BaseSettings
-from pypdf import PdfReader
-
-class RAGService:
-    def __init__(self):
-        # Persistent storage in ./data/chroma (relative to root now)
-        self.client = chromadb.PersistentClient(path="./data/chroma")
-        
-        self.embedding_fn = embedding_functions.DefaultEmbeddingFunction()
-        
-        self.collection = self.client.get_or_create_collection(
-            name="dstv_knowledge",
-            embedding_function=self.embedding_fn
-        )
-        # Auto ingest PDFs on startup
-        self.ingest_all_pdfs()
-
-    def ingest_pdf(self, file_path: str):
-        try:
-            print(f"Ingesting PDF: {file_path}")
-            reader = PdfReader(file_path)
-            text_chunks = []
-            
-            for i, page in enumerate(reader.pages):
-                text = page.extract_text()
-                if text and len(text) > 50:
-                    # In a real app, we'd split large pages. 
-                    # Assuming quick guides have less dense text per page or acceptable length.
-                    text_chunks.append(text)
-
-            if not text_chunks:
-                return False
-
-            ids = [f"{os.path.basename(file_path)}_page_{i}" for i in range(len(text_chunks))]
-            metadatas = [{"source": file_path, "page": i} for i in range(len(text_chunks))]
-            
-            self.collection.add(
-                documents=text_chunks,
-                ids=ids,
-                metadatas=metadatas
-            )
-            print(f"Ingested {len(text_chunks)} pages from {file_path}")
-            return True
-        except Exception as e:
-            print(f"Error ingesting PDF {file_path}: {e}")
-            return False
-
-    def ingest_all_pdfs(self, root_dir: str = "."):
-        for file in os.listdir(root_dir):
-            if file.lower().endswith(".pdf"):
-                # Check if already ingested (naive check by ID of page 0)
-                try:
-                    existing = self.collection.get(ids=[f"{file}_page_0"])
-                    if existing and existing['ids']:
-                       print(f"PDF {file} already found in DB.")
-                       continue
-                except:
-                    pass
-                    
-                self.ingest_pdf(os.path.join(root_dir, file))
-
-    def scrape_and_ingest(self, url: str):
-        try:
-            print(f"Scraping {url}...")
-            headers = {'User-Agent': 'Mozilla/5.0 (compatible; DStvBot/1.0)'}
-            response = requests.get(url, headers=headers, timeout=10)
-            if response.status_code != 200:
-                print(f"Failed to fetch {url}: {response.status_code}")
-                return False
-
-            soup = BeautifulSoup(response.text, 'html.parser')
-            
-            text_blocks = []
-            for tag in soup.find_all(['p', 'h1', 'h2', 'h3', 'li']):
-                text = tag.get_text(strip=True)
-                if len(text) > 30: 
-                    text_blocks.append(text)
-            
-            if not text_blocks:
-                return False
-
-            ids = [str(uuid.uuid4()) for _ in text_blocks]
-            metadatas = [{"source": url} for _ in text_blocks]
-            
-            self.collection.add(
-                documents=text_blocks,
-                ids=ids,
-                metadatas=metadatas
-            )
-            print(f"Ingested {len(text_blocks)} chunks from {url}")
-            return True
-
-        except Exception as e:
-            print(f"Error ingesting {url}: {e}")
-            return False
-
-    def query(self, query_text: str, n_results: int = 3):
-        results = self.collection.query(
-            query_texts=[query_text],
-            n_results=n_results
-        )
-        if results["documents"]:
-            return results["documents"][0]
-        return []
-
-rag_service = RAGService()

docker-compose.yml

@@ -1,34 +1,14 @@
 version: '3.8'
 
 services:
-  backend:
+  dstv-ai-support:
     build: .
-    container_name: dstv_backend
     ports:
-      - "8000:8000"
+      - "7860:7860"
+    env_file:
+      - .env
     volumes:
-      - .:/app
-    environment:
-      - XAI_API_KEY=${XAI_API_KEY}
-      - REDIS_HOST=redis
-    depends_on:
-      - redis
-
-  frontend:
-    build:
-      context: ./frontend
-      dockerfile: Dockerfile
-    container_name: dstv_frontend
-    ports:
-      - "5173:5173"
-    volumes:
-      - ./frontend:/app
-      - /app/node_modules
-    environment:
-      - VITE_API_URL=http://localhost:8000
-
-  redis:
-    image: redis:alpine
-    container_name: dstv_redis
-    ports:
-      - "6379:6379"
+      - ./data:/app/data
+      - ./chroma_db:/app/chroma_db
+      - ./memory.db:/app/memory.db
+    restart: always

frontend/.dockerignore

@@ -1,33 +0,0 @@
-# Dependencies
-node_modules
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-
-# Build output
-dist
-build
-.vite
-
-# Environment files
-.env
-.env.local
-.env.*.local
-
-# Git
-.git
-.gitignore
-
-# IDE
-.vscode
-.idea
-*.swp
-*.swo
-
-# OS
-.DS_Store
-Thumbs.db
-
-# Misc
-README.md

frontend/Dockerfile

@@ -1,18 +0,0 @@
-FROM node:18-alpine
-
-WORKDIR /app
-
-# Copy package files first for better layer caching
-COPY package*.json ./
-
-# Install dependencies using npm install (faster and more reliable in this env than npm ci)
-RUN npm install
-
-# Copy source code
-COPY . .
-
-# Expose Vite dev server port
-EXPOSE 5173
-
-# Start dev server with host binding for Docker
-CMD ["npm", "run", "dev", "--", "--host"]

frontend/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview"
   },
@@ -19,13 +19,10 @@
     "@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",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.4",
     "vite": "^7.2.4"

frontend/postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

frontend/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

frontend/src/App.tsx

@@ -1,11 +1,140 @@
-import ChatInterface from './components/ChatInterface';
+import React, { useState, useEffect, useRef } from 'react';
+import { Send, User, Bot, Loader2 } from 'lucide-react';
+import ReactMarkdown from 'react-markdown';
+import axios from 'axios';
+
+interface Message {
+  role: 'user' | 'assistant';
+  content: string;
+}
+
+const App: React.FC = () => {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [input, setInput] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [sessionId, setSessionId] = useState<string | null>(null);
+  const chatEndRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    // Initialize session
+    const initSession = async () => {
+      try {
+        const response = await axios.get('http://localhost:8000/session');
+        setSessionId(response.data.session_id);
+      } catch (error) {
+        console.error('Failed to initialize session:', error);
+      }
+    };
+    initSession();
+  }, []);
+
+  useEffect(() => {
+    chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  const handleSend = async () => {
+    if (!input.trim() || isLoading) return;
+
+    const userMessage = input.trim();
+    setInput('');
+    setMessages(prev => [...prev, { role: 'user', content: userMessage }]);
+    setIsLoading(true);
+
+    try {
+      const response = await fetch('http://localhost:8000/chat', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          message: userMessage,
+          session_id: sessionId,
+        }),
+      });
+
+      if (!response.ok) throw new Error('Failed to send message');
+      if (!response.body) throw new Error('No response body');
+
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let assistantContent = '';
+
+      setMessages(prev => [...prev, { role: 'assistant', content: '' }]);
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        const chunk = decoder.decode(value, { stream: true });
+        assistantContent += chunk;
+
+        setMessages(prev => {
+          const newMessages = [...prev];
+          newMessages[newMessages.length - 1].content = assistantContent;
+          return newMessages;
+        });
+      }
+    } catch (error) {
+      console.error('Chat error:', error);
+      setMessages(prev => [...prev, { role: 'assistant', content: 'I apologize, but I encountered an error. Please try again or contact support if the issue persists.' }]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
-function App() {
   return (
-    <div className="App w-full h-full bg-dstv-black">
-      <ChatInterface />
+    <div className="app-container">
+      <header className="header">
+        <img src="/logo.jpeg" alt="DStv Logo" className="logo" />
+        <h1>DStv AI Support</h1>
+      </header>
+
+      <div className="chat-window">
+        {messages.length === 0 && (
+          <div className="message assistant">
+            <p>Hello! I'm your DStv AI Support assistant. How can I help you today?</p>
+          </div>
+        )}
+        {messages.map((msg, index) => (
+          <div key={index} className={`message ${msg.role}`}>
+            <div className="flex items-center gap-2 mb-2 font-bold text-xs opacity-70">
+              {msg.role === 'user' ? <User size={14} /> : <Bot size={14} />}
+              {msg.role === 'user' ? 'You' : 'DStv Support'}
+            </div>
+            <div className="markdown-content">
+              <ReactMarkdown>{msg.content}</ReactMarkdown>
+            </div>
+          </div>
+        ))}
+        {isLoading && messages[messages.length - 1]?.role !== 'assistant' && (
+          <div className="message assistant">
+            <div className="typing-animation">
+              <div className="dot"></div>
+              <div className="dot"></div>
+              <div className="dot"></div>
+            </div>
+          </div>
+        )}
+        <div ref={chatEndRef} />
+      </div>
+
+      <div className="input-area">
+        <div className="input-wrapper">
+          <input
+            type="text"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyPress={(e) => e.key === 'Enter' && handleSend()}
+            placeholder="Type your message here..."
+            disabled={isLoading}
+          />
+        </div>
+        <button onClick={handleSend} disabled={isLoading || !input.trim()}>
+          {isLoading ? <Loader2 className="animate-spin" /> : <Send size={20} />}
+        </button>
+      </div>
     </div>
   );
-}
+};
 
 export default App;

frontend/src/components/ChatInterface.tsx

@@ -1,153 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import logo from '../assets/logo.jpeg';
-
-interface Message {
-    id: string;
-    role: 'user' | 'assistant';
-    content: string;
-}
-
-export default function ChatInterface() {
-    const [messages, setMessages] = useState<Message[]>([
-        { id: '1', role: 'assistant', content: 'Hello! I\'m your DStv guide. I can help with subscriptions, payments, technical issues, and more. How can I assist you today?' }
-    ]);
-    const [input, setInput] = useState('');
-    const [isLoading, setIsLoading] = useState(false);
-    const messagesEndRef = useRef<HTMLDivElement>(null);
-
-    const scrollToBottom = () => {
-        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-    };
-
-    useEffect(() => {
-        scrollToBottom();
-    }, [messages]);
-
-    const sendMessage = async () => {
-        if (!input.trim()) return;
-
-        const userMsg: Message = { id: Date.now().toString(), role: 'user', content: input };
-        setMessages(prev => [...prev, userMsg]);
-        setInput('');
-        setIsLoading(true);
-
-        try {
-            const response = await fetch(`${import.meta.env.VITE_API_URL || 'http://localhost:8000'}/api/chat`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    messages: [...messages, userMsg].map(m => ({ role: m.role, content: m.content }))
-                }),
-            });
-
-            if (!response.ok) throw new Error('Network response was not ok');
-            if (!response.body) return;
-
-            const reader = response.body.getReader();
-            const decoder = new TextDecoder();
-            const aiMsgId = (Date.now() + 1).toString();
-            
-            // Add empty AI message first
-            setMessages(prev => [...prev, { id: aiMsgId, role: 'assistant', content: '' }]);
-
-            let accumulatedContent = '';
-
-            while (true) {
-                const { done, value } = await reader.read();
-                if (done) break;
-                
-                const chunk = decoder.decode(value, { stream: true });
-                accumulatedContent += chunk;
-                
-                setMessages(prev => prev.map(msg => 
-                    msg.id === aiMsgId ? { ...msg, content: accumulatedContent } : msg
-                ));
-            }
-        } catch (error) {
-            console.error('Error sending message:', error);
-            setMessages(prev => [...prev, { id: Date.now().toString(), role: 'assistant', content: "Sorry, I'm having trouble connecting to the server. Please try again later." }]);
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    return (
-        <div className="flex flex-col h-screen bg-dstv-black text-white font-sans max-w-md mx-auto shadow-2xl overflow-hidden border-x border-dstv-dark-gray sm:max-w-2xl md:max-w-4xl lg:max-w-6xl xl:max-w-full">
-            {/* Header */}
-            <header className="bg-dstv-blue p-4 flex items-center shadow-lg z-10">
-                <img src={logo} alt="DStv Logo" className="h-8 md:h-10 mr-3 rounded-sm" />
-                <div>
-                    <h1 className="font-bold text-lg md:text-xl tracking-wide">DStv Support</h1>
-                    <span className="text-xs text-blue-100 opacity-90 block">Always here for you</span>
-                </div>
-            </header>
-
-            {/* Chat Area */}
-            <div className="flex-1 overflow-y-auto p-4 space-y-4 bg-gradient-to-b from-dstv-black to-dstv-dark-gray backdrop-blur-sm">
-                {messages.map((msg) => (
-                    <div
-                        key={msg.id}
-                        className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'} animate-fadeIn`}
-                    >
-                        <div
-                            className={`max-w-[80%] md:max-w-[70%] p-3 md:p-4 rounded-2xl text-sm md:text-base leading-relaxed shadow-sm ${msg.role === 'user'
-                                    ? 'bg-dstv-blue text-white rounded-br-none'
-                                    : 'bg-zinc-800 text-gray-100 rounded-bl-none border border-zinc-700'
-                                }`}
-                        >
-                            {msg.content.split('\n').map((paragraph, idx) => (
-                                <p key={idx} className={idx > 0 ? 'mt-3' : ''}>{paragraph}</p>
-                            ))}
-                        </div>
-                    </div>
-                ))}
-                {isLoading && (
-                    <div className="flex justify-start">
-                        <div className="bg-zinc-800 p-3 rounded-2xl rounded-bl-none border border-zinc-700 flex space-x-2 items-center">
-                            <div className="w-2 h-2 bg-dstv-blue rounded-full animate-bounce" style={{ animationDelay: '0ms' }}></div>
-                            <div className="w-2 h-2 bg-dstv-blue rounded-full animate-bounce" style={{ animationDelay: '150ms' }}></div>
-                            <div className="w-2 h-2 bg-dstv-blue rounded-full animate-bounce" style={{ animationDelay: '300ms' }}></div>
-                        </div>
-                    </div>
-                )}
-                <div ref={messagesEndRef} />
-            </div>
-
-            {/* Input Area */}
-            <div className="p-4 bg-dstv-dark-gray border-t border-zinc-800">
-                <div className="flex items-end space-x-2 bg-zinc-900 p-2 rounded-xl border border-zinc-700 focus-within:border-dstv-blue transition-colors">
-                    <textarea
-                        value={input}
-                        onChange={(e) => setInput(e.target.value)}
-                        onKeyDown={(e) => {
-                            if (e.key === 'Enter' && !e.shiftKey) {
-                                e.preventDefault();
-                                sendMessage();
-                            }
-                        }}
-                        placeholder="Type your message..."
-                        className="flex-1 bg-transparent border-none text-white focus:ring-0 resize-none max-h-32 min-h-[44px] py-1 px-2 placeholder-zinc-500"
-                        rows={1}
-                    />
-                    <button
-                        onClick={sendMessage}
-                        disabled={!input.trim() || isLoading}
-                        className={`p-2 rounded-lg transition-all duration-200 ${input.trim() && !isLoading
-                                ? 'bg-dstv-blue text-white hover:bg-blue-600 shadow-lg shadow-blue-500/20'
-                                : 'bg-zinc-700 text-zinc-500 cursor-not-allowed'
-                            }`}
-                    >
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6 transform rotate-[-45deg] relative left-0.5 top-[-2px]">
-                            <path d="M3.478 2.404a.75.75 0 00-.926.941l2.432 7.905H13.5a.75.75 0 010 1.5H4.984l-2.432 7.905a.75.75 0 00.926.94 60.519 60.519 0 0018.445-8.986.75.75 0 000-1.218A60.517 60.517 0 003.478 2.404z" />
-                        </svg>
-                    </button>
-                </div>
-                <div className="text-center mt-2">
-                    <p className="text-[10px] text-zinc-500">AI responses may vary. Check DStv.com for official info.</p>
-                </div>
-            </div>
-        </div>
-    );
-}

frontend/src/index.css

@@ -1,19 +1,184 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 
-@layer base {
-  body {
-    @apply bg-dstv-black text-white font-sans;
+:root {
+  --primary: #1B8DC6;
+  --primary-dark: #1573a0;
+  --secondary: #000000;
+  --bg-color: #f8fafc;
+  --text-main: #1e293b;
+  --text-muted: #64748b;
+  --glass-bg: rgba(255, 255, 255, 0.8);
+  --glass-border: rgba(255, 255, 255, 0.3);
+  --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Inter', sans-serif;
+  background-color: var(--bg-color);
+  color: var(--text-main);
+  line-height: 1.6;
+}
+
+.app-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  max-width: 1000px;
+  margin: 0 auto;
+  background: white;
+  box-shadow: var(--shadow);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  padding: 1rem 2rem;
+  background: var(--secondary);
+  color: white;
+  border-bottom: 2px solid var(--primary);
+}
+
+.logo {
+  height: 40px;
+  margin-right: 1rem;
+}
+
+.chat-window {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  background: #f1f5f9;
+}
+
+.message {
+  max-width: 80%;
+  padding: 1rem 1.25rem;
+  border-radius: 1rem;
+  position: relative;
+  animation: fadeIn 0.3s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
   }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.message.user {
+  align-self: flex-end;
+  background: var(--primary);
+  color: white;
+  border-bottom-right-radius: 0.25rem;
+}
+
+.message.assistant {
+  align-self: flex-start;
+  background: white;
+  color: var(--text-main);
+  border-bottom-left-radius: 0.25rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.input-area {
+  padding: 1.5rem;
+  background: white;
+  border-top: 1px solid #e2e8f0;
+  display: flex;
+  gap: 1rem;
+}
+
+.input-wrapper {
+  flex: 1;
+  position: relative;
 }
 
-@layer utilities {
-    .scrollbar-hide::-webkit-scrollbar {
-        display: none;
-    }
-    .scrollbar-hide {
-        -ms-overflow-style: none;
-        scrollbar-width: none;
-    }
+input {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  border: 1.5px solid #cbd5e1;
+  border-radius: 0.75rem;
+  font-size: 1rem;
+  outline: none;
+  transition: border-color 0.2s;
 }
+
+input:focus {
+  border-color: var(--primary);
+}
+
+button {
+  background: var(--primary);
+  color: white;
+  border: none;
+  padding: 0.75rem 1.5rem;
+  border-radius: 0.75rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+button:hover {
+  background: var(--primary-dark);
+}
+
+button:disabled {
+  background: #94a3b8;
+  cursor: not-allowed;
+}
+
+.typing-animation {
+  display: flex;
+  gap: 4px;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  background: var(--text-muted);
+  border-radius: 50%;
+  animation: bounce 1.4s infinite ease-in-out both;
+}
+
+.dot:nth-child(1) {
+  animation-delay: -0.32s;
+}
+
+.dot:nth-child(2) {
+  animation-delay: -0.16s;
+}
+
+@keyframes bounce {
+
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+  }
+
+  40% {
+    transform: scale(1);
+  }
+}
+
+.markdown-content p {
+  margin-bottom: 1rem;
+}
+
+.markdown-content p:last-child {
+  margin-bottom: 0;
+}

frontend/tailwind.config.js

@@ -1,18 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
-  theme: {
-    extend: {
-      colors: {
-        'dstv-blue': '#1B8DC6',
-        'dstv-black': '#000000',
-        'dstv-dark-gray': '#121212',
-        'dstv-light-gray': '#E5E5E5',
-      },
-    },
-  },
-  plugins: [],
-}

grok_client.py

@@ -0,0 +1,48 @@
+import os
+import json
+import httpx
+from typing import AsyncGenerator, List, Dict
+from dotenv import load_dotenv
+
+load_dotenv()
+
+class GrokClient:
+    def __init__(self):
+        self.api_key = os.getenv("XAI_API_KEY")
+        self.base_url = "https://api.x.ai/v1/chat/completions"
+        self.model = "grok-4-1-fast-reasoning" # Model specified by user
+
+    async def stream_chat(self, messages: List[Dict[str, str]]) -> AsyncGenerator[str, None]:
+        headers = {
+            "Authorization": f"Bearer {self.api_key}",
+            "Content-Type": "application/json"
+        }
+        
+        payload = {
+            "model": self.model,
+            "messages": messages,
+            "stream": True,
+            "temperature": 0.7
+        }
+
+        async with httpx.AsyncClient(timeout=60.0) as client:
+            async with client.stream("POST", self.base_url, headers=headers, json=payload) as response:
+                if response.status_code != 200:
+                    error_detail = await response.aread()
+                    yield f"Error: {response.status_code} - {error_detail.decode()}"
+                    return
+
+                async for line in response.aiter_lines():
+                    if line.startswith("data: "):
+                        data_str = line[6:].strip()
+                        if data_str == "[DONE]":
+                            break
+                        try:
+                            data = json.loads(data_str)
+                            content = data["choices"][0].get("delta", {}).get("content", "")
+                            if content:
+                                yield content
+                        except json.JSONDecodeError:
+                            continue
+
+grok_client = GrokClient()

main.py

@@ -0,0 +1,104 @@
+import os
+import uuid
+from fastapi import FastAPI, HTTPException, Request
+from fastapi.responses import StreamingResponse
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles
+from pydantic import BaseModel
+from typing import Optional, List
+
+from rag_engine import rag_engine
+from grok_client import grok_client
+from memory_manager import memory_manager
+from search_tool import search_tool
+
+app = FastAPI(title="DStv AI Support API")
+
+# Enable CORS for frontend development
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Serve static files from frontend/dist
+# This will be used in production (Docker)
+if os.path.exists("frontend/dist"):
+    app.mount("/", StaticFiles(directory="frontend/dist", html=True), name="static")
+
+class ChatRequest(BaseModel):
+    message: str
+    session_id: Optional[str] = None
+
+SYSTEM_PROMPT = """You are DStv AI Support, a helpful and professional customer support representative for DStv.
+Your tone is friendly, clear, practical, and human.
+Rules:
+1. Never say "as an AI".
+2. Never mention internal systems.
+3. Speak like real DStv support (e.g., "I can help you with that", "Let me check our guides for you").
+4. Use the provided context to answer accurately.
+5. If you cannot find the answer in the context or search results, politely inform the user and suggest they contact DStv support via official channels like the DStv app or WhatsApp.
+
+When answering, focus on providing direct, actionable advice to the user.
+"""
+
+@app.post("/chat")
+async def chat_endpoint(request: ChatRequest):
+    session_id = request.session_id or str(uuid.uuid4())
+    user_message = request.message
+    
+    # 1. Search RAG
+    rag_results = rag_engine.query(user_message)
+    context = ""
+    
+    if rag_results:
+        context = "\n".join([doc.page_content for doc in rag_results])
+    
+    # 2. If RAG results are weak or not found, try web search fallback
+    if not context or len(context) < 100:
+        web_results = search_tool.search_web(user_message)
+        if web_results:
+            context += "\n\nWeb Search Results:\n"
+            for res in web_results:
+                context += f"- {res['title']}: {res['snippet']}\n"
+
+    # 3. Retrieve Memory
+    history = memory_manager.get_history(session_id)
+    
+    # 4. Prepare messages for Grok
+    current_context_prompt = f"Context Information:\n{context}\n\nUser Question: {user_message}"
+    
+    messages = [{"role": "system", "content": SYSTEM_PROMPT}]
+    # Add relevant history (last 5 exchanges for context)
+    for msg in history[-10:]:
+        messages.append(msg)
+    
+    messages.append({"role": "user", "content": current_context_prompt})
+
+    # Save user message to memory
+    memory_manager.save_message(session_id, "user", user_message)
+
+    async def response_generator():
+        full_response = ""
+        async for chunk in grok_client.stream_chat(messages):
+            full_response += chunk
+            yield chunk
+        
+        # Save assistant response to memory after stream finishes
+        memory_manager.save_message(session_id, "assistant", full_response)
+
+    return StreamingResponse(response_generator(), media_type="text/event-stream")
+
+@app.get("/session")
+async def create_session():
+    return {"session_id": str(uuid.uuid4())}
+
+@app.get("/health")
+async def health_check():
+    return {"status": "healthy"}
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=8000)

memory_manager.py

@@ -0,0 +1,47 @@
+import sqlite3
+import json
+from typing import List, Dict
+
+class MemoryManager:
+    def __init__(self, db_path: str = "memory.db"):
+        self.db_path = db_path
+        self._init_db()
+
+    def _init_db(self):
+        with sqlite3.connect(self.db_path) as conn:
+            conn.execute("""
+                CREATE TABLE IF NOT EXISTS sessions (
+                    session_id TEXT PRIMARY KEY,
+                    history TEXT
+                )
+            """)
+            conn.commit()
+
+    def get_history(self, session_id: str) -> List[Dict[str, str]]:
+        with sqlite3.connect(self.db_path) as conn:
+            cursor = conn.execute("SELECT history FROM sessions WHERE session_id = ?", (session_id,))
+            row = cursor.fetchone()
+            if row:
+                return json.loads(row[0])
+            return []
+
+    def save_message(self, session_id: str, role: str, content: str):
+        history = self.get_history(session_id)
+        history.append({"role": role, "content": content})
+        
+        # Keep only last 10 messages for context window management if needed, 
+        # but the prompt says persistent history.
+        
+        with sqlite3.connect(self.db_path) as conn:
+            conn.execute("""
+                INSERT OR REPLACE INTO sessions (session_id, history)
+                VALUES (?, ?)
+            """, (session_id, json.dumps(history)))
+            conn.commit()
+
+    def clear_session(self, session_id: str):
+        with sqlite3.connect(self.db_path) as conn:
+            conn.execute("DELETE FROM sessions WHERE session_id = ?", (session_id,))
+            conn.commit()
+
+memory_manager = MemoryManager()

rag_engine.py

@@ -0,0 +1,50 @@
+import os
+from typing import List
+from langchain_community.document_loaders import PyPDFLoader
+from langchain.text_splitter import RecursiveCharacterTextSplitter
+from langchain_community.embeddings import HuggingFaceEmbeddings
+from langchain_community.vectorstores import Chroma
+from langchain.schema import Document
+
+class RAGEngine:
+    def __init__(self, data_dir: str = "data", db_dir: str = "chroma_db"):
+        self.data_dir = data_dir
+        self.db_dir = db_dir
+        self.embeddings = HuggingFaceEmbeddings(model_name="all-MiniLM-L6-v2")
+        self.vector_store = None
+        self._initialize_vector_store()
+
+    def _initialize_vector_store(self):
+        if not os.path.exists(self.db_dir):
+            os.makedirs(self.db_dir)
+            self._process_documents()
+        else:
+            self.vector_store = Chroma(
+                persist_directory=self.db_dir,
+                embedding_function=self.embeddings
+            )
+
+    def _process_documents(self):
+        documents = []
+        for file in os.listdir(self.data_dir):
+            if file.endswith(".pdf"):
+                file_path = os.path.join(self.data_dir, file)
+                loader = PyPDFLoader(file_path)
+                documents.extend(loader.load())
+
+        text_splitter = RecursiveCharacterTextSplitter(chunk_size=1000, chunk_overlap=100)
+        chunks = text_splitter.split_documents(documents)
+
+        self.vector_store = Chroma.from_documents(
+            documents=chunks,
+            embedding=self.embeddings,
+            persist_directory=self.db_dir
+        )
+        self.vector_store.persist()
+
+    def query(self, text: str, k: int = 3) -> List[Document]:
+        if not self.vector_store:
+            return []
+        return self.vector_store.similarity_search(text, k=k)
+
+rag_engine = RAGEngine()

requirements.txt

@@ -1,17 +1,16 @@
-fastapi
-uvicorn
-python-multipart
-# Networking
-requests
-httpx
-# AI / LLM
-openai
-# Database / Vector Store
-chromadb
-redis
-# Scraper
-beautifulsoup4
-# Utils
-pydantic-settings
-python-dotenv
-pypdf
+fastapi==0.109.0
+uvicorn==0.27.0
+python-dotenv==1.0.1
+chromadb==0.4.22
+langchain==0.1.4
+langchain-community==0.0.16
+langchain-openai==0.0.5
+pypdf==4.0.1
+requests==2.31.0
+beautifulsoup4==4.12.3
+duckduckgo-search==4.4.2
+httpx==0.26.0
+pydantic==2.6.0
+pydantic-settings==2.1.0
+python-multipart==0.0.6
+sentence-transformers==2.3.1

search_tool.py

@@ -0,0 +1,42 @@
+import requests
+from bs4 import BeautifulSoup
+from duckduckgo_search import DDGS
+from typing import List, Dict
+
+class SearchTool:
+    def __init__(self):
+        self.ddgs = DDGS()
+
+    def search_web(self, query: str, max_results: int = 5) -> List[Dict[str, str]]:
+        results = []
+        try:
+            # specifically prioritize dstv.com
+            search_query = f"{query} site:dstv.com"
+            with DDGS() as ddgs:
+                for r in ddgs.text(search_query, max_results=max_results):
+                    results.append({
+                        "title": r['title'],
+                        "link": r['href'],
+                        "snippet": r['body']
+                    })
+        except Exception as e:
+            print(f"Search error: {e}")
+        return results
+
+    def scrape_dstv_page(self, url: str) -> str:
+        try:
+            response = requests.get(url, timeout=10)
+            response.raise_for_status()
+            soup = BeautifulSoup(response.text, 'html.parser')
+            
+            # Remove script and style elements
+            for script in soup(["script", "style"]):
+                script.decompose()
+                
+            text = soup.get_text(separator=' ', strip=True)
+            return text[:2000] # Return first 2000 chars for context
+        except Exception as e:
+            print(f"Scrape error: {e}")
+            return ""
+
+search_tool = SearchTool()