Initial clean deploy without binary files

.gitignore

@@ -0,0 +1,12 @@
+# API Keys and Secrets
+.env
+
+# Python Environment
+botenv/
+venv/
+__pycache__/
+*.pyc
+
+# OS files
+.DS_Store
+Thumbs.db

Dockerfile

@@ -0,0 +1,6 @@
+FROM python:3.9
+WORKDIR /code
+COPY ./app/requirements.txt /code/requirements.txt
+RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
+COPY . .
+CMD ["uvicorn", "app.index:app", "--host", "0.0.0.0", "--port", "7860"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ali Abdullah
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,219 @@
+# <img src="app/static/atomcamp_logo.png" alt="atomcamp logo" height="40" align="center"> RAG Chatbot
+
+This is a Retrieval-Augmented Generation (RAG) chatbot I built to serve as a factual representative for **atomcamp** programs, courses, and admissions. Instead of relying on general AI knowledge, this system uses a **FastAPI** backend and **LangChain** to retrieve verified data from a **Qdrant** vector database, ensuring every response from the **GPT-OSS-120B** model is grounded in actual company information. By processing website data through **Hugging Face** embeddings and using a **Maximal Marginal Relevance (MMR)** retrieval strategy, the bot provides accurate, non-robotic answers without the "hallucinations" typical of standard AI.
+
+## Table of Contents
+
+1.  Project Overview
+2.  Interface Preview
+3.  Core Technical Features
+4.  System Architecture
+5.  Tech Stack Specifications
+6.  Installation and Environment Setup
+7.  Configuration and API Integration
+8.  Project Directory Structure
+9.  Execution Workflow
+10. Key Component Breakdown
+11. Advanced UI/UX Implementation
+12. Status and Versioning
+
+-----
+
+## Project Overview
+
+The primary objective of this project is to eliminate the "robotic" nature of traditional AI assistants. By implementing a sophisticated RAG pipeline, the system grounds every response in verified atomcamp data. The architecture is designed for low latency, high relevance, and a professional user experience through a bespoke web interface that supports dynamic theme switching and responsive data rendering.
+
+-----
+
+## Interface Preview
+
+The platform provides a professional-grade interface with a custom-built theme toggle to support various user environments.
+
+| Light Mode Interface | Dark Mode Interface |
+| :--- | :--- |
+| ![Light Mode Interface](image.png) | ![Dark Mode Interface](image2.png) |
+
+-----
+
+## Core Technical Features
+
+  * Official Representative Persona: The system is programmed with a custom prompt that forces the LLM to "own" the knowledge, speaking as an authoritative human representative rather than a machine reading a file.
+  * High-Speed Inference: Powered by the Groq LPU (Language Processing Unit) engine using the GPT-OSS-120B model for near-instantaneous responses.
+  * Cloud-Native Vector Search: Utilizes a managed Qdrant collection for high-dimensional semantic search and retrieval.
+  * Maximal Marginal Relevance (MMR): A specialized retrieval strategy that balances document relevance with information diversity to provide more comprehensive answers.
+  * Dynamic Dark Mode: A fully integrated CSS variable system that swaps entire color palettes, including high-contrast link colors (Orange in Dark Mode) for maximum accessibility.
+  * Auto-Expanding Interface: The input section utilizes an intelligent vertical-growth textarea that expands as the user types complex inquiries.
+  * Markdown Integration: Full support for professional text formatting, including bold terms and standard bulleted lists.
+
+-----
+
+## System Architecture
+
+### The RAG Pipeline
+
+1.  Data Ingestion: The system crawls the official atomcamp web domain, extracts core content using BeautifulSoup4, and splits it into semantic chunks.
+2.  Embedding Generation: Chunks are converted into 768-dimensional vectors using the Hugging Face all-mpnet-base-v2 model.
+3.  Vector Storage: Vectors are stored in a Qdrant Cloud collection with full metadata support.
+4.  User Query: The user submits a question through the FastAPI web interface.
+5.  Semantic Retrieval: The system performs a similarity search in Qdrant, retrieving the top contexts while applying MMR to reduce redundancy.
+6.  Contextual Synthesis: The LLM processes the retrieved context, user question, and conversation history to generate a natural, authoritative response.
+
+-----
+
+## Tech Stack Specifications
+
+### Backend and Orchestration
+
+  * Framework: FastAPI (v0.105.0) for high-performance API routing.
+  * Orchestrator: LangChain (v0.3.0) for managing the RAG chain and memory.
+  * Web Server: Uvicorn (v0.34.0) for asynchronous execution.
+
+### Artificial Intelligence
+
+  * Inference Engine: Groq.
+  * Model: openai/gpt-oss-120b.
+  * Embeddings: sentence-transformers/all-mpnet-base-v2 via Hugging Face.
+
+### Data and Storage
+
+  * Vector DB: Qdrant Cloud.
+  * Web Scraping: BeautifulSoup4 and WebBaseLoader.
+
+-----
+
+## Installation and Environment Setup
+
+### 1\. Repository Initialization
+
+Clone the project and enter the application directory:
+
+```bash
+git clone <your-repository-url>
+cd RAG-Based-Chatbot-main/app
+```
+
+### 2\. Virtual Environment Creation
+
+It is highly recommended to use a virtual environment to manage dependencies:
+
+```bash
+python -m venv botenv
+# On Windows:
+botenv\Scripts\activate
+# On macOS/Linux:
+source botenv/bin/activate
+```
+
+### 3\. Dependency Installation
+
+Install the required packages listed in the requirements file:
+
+```bash
+pip install -r requirements.txt
+```
+
+-----
+
+## Configuration and API Integration
+
+The system requires an environment file to manage secure credentials. Create a file named `.env` in the `app/` directory:
+
+```env
+# Hugging Face Access Token
+HF_TOKEN=your_huggingface_token
+
+# Groq Cloud API Key
+GROQ_API_KEY=your_groq_api_key
+
+# Qdrant Cloud Credentials
+QDRANT_API_KEY=your_qdrant_api_key
+QDRANT_URL=your_qdrant_cloud_url
+```
+
+-----
+
+## Project Directory Structure
+
+The project follows a modular "Zero-Hurdle" root structure to ensure all paths are resolved correctly during execution:
+
+```text
+app/
+├── main.py                  # FastAPI server and API entry point
+├── chain.py                 # RAG logic and conversation memory
+├── ingest.py                # Data crawling and vector ingestion
+├── .env                     # Private API keys
+├── requirements.txt         # Project dependencies
+├── Prompt/
+│   └── Prompt.py            # Custom representative persona
+├── LLM/
+│   └── LLM.py               # Groq model configuration
+├── VectorStores/
+│   └── Vectorstores.py      # Qdrant cloud connection logic
+├── embeddings/
+│   └── embedding.py         # Hugging Face model setup
+├── config/
+│   └── config.py            # Environment variable loader
+├── static/                  # Professional UI/UX assets
+│   ├── css/
+│   │   └── style.css        # Theme and layout styling
+│   ├── js/
+│   │   └── chat.js          # Interaction and animation logic
+│   ├── templates/
+│   │   └── index.html       # Web structure
+│   └── atomcamp_logo.png    # Official organization logo
+└── Extras/               # If Document and Other resource 
+```
+
+-----
+
+## Execution Workflow
+
+### Step 1: Knowledge Base Ingestion
+
+Before running the chatbot, you must populate the vector database with atomcamp's latest information:
+
+```bash
+python ingest.py
+```
+
+### Step 2: Launching the Platform
+
+Start the FastAPI server to initialize the RAG chain and the web interface:
+
+```bash
+python main.py
+```
+
+### Step 3: Accessing the UI
+
+Open your browser and navigate to the following address:
+`http://localhost:8000`
+
+-----
+
+## Key Component Breakdown
+
+### Advanced Prompt Engineering (Prompt.py)
+
+The core of the system's intelligence lies in its specialized persona. The prompt explicitly forbids the use of robotic disclaimers like "According to the context" or "The information provided state." It instructs the AI to combine duplicate facts into sophisticated, high-intelligence sentences and strictly enforce the lowercase **atomcamp** branding.
+
+### Retrieval Logic (chain.py)
+
+The system utilizes a `RunnableParallel` architecture. When a question is received, the chain simultaneously retrieves relevant documents from Qdrant, pulls the last several turns of conversation from memory, and prepares the final prompt for the LLM. This parallel execution minimizes response latency.
+
+-----
+
+## Advanced UI/UX Implementation
+
+  * Professional Input Handling: The input bar is a custom textarea that supports `Enter` to send and `Shift + Enter` for new lines, behaving like a modern enterprise communication tool.
+  * Vertical Container Stability: The chat bubbles use advanced word-break rules to ensure that long strings of code or characters never break the horizontal container width.
+  * Thematic Link Management: Links are styled with a dynamic CSS variable (`--link-color`) that switches to a high-contrast orange in dark mode, ensuring email addresses and URLs are always readable.
+
+-----
+
+## Status and Versioning
+
+  * Version: 1.5.0
+  * Last Updated: July 2025
+  * Status: Production Ready
+  * Organization: atomcamp Official

app/LLM/LLM.py

@@ -0,0 +1,12 @@
+from langchain_groq import ChatGroq
+from config.config import GROQ_API_KEY
+
+llm = ChatGroq(
+    model="openai/gpt-oss-120b",
+    temperature=1.0,
+    max_tokens=None,
+    reasoning_format="parsed",
+    timeout=None,
+    max_retries=2,
+    api_key=GROQ_API_KEY,
+)

app/Prompt/Prompt.py

@@ -0,0 +1,23 @@
+from langchain_core.prompts import ChatPromptTemplate
+
+prompt = ChatPromptTemplate.from_template("""
+You are a highly intelligent and confident Official Representative of atomcamp.
+
+CRITICAL GUIDELINES:
+1. BRANDING: Always use "atomcamp" (lowercase 'a') when referring to the organization.
+2. NO ROBOTIC META-TALK: Never use phrases like "based on the provided context," "according to the information," or "the context does not mention." 
+3. OWN THE KNOWLEDGE: Answer as if you inherently know this information. Use "We," "Our," and "The program is."
+4. NO REPETITION: Combine duplicate facts into one clear, smart sentence.
+5. FALLBACK: If the information is genuinely missing, simply say you don't have the specific details on that right now and suggest they contact the team at atomcamp.com.
+
+Internal Knowledge Base:
+{context}
+
+Conversation History:
+{chat_history}
+
+User Inquiry:
+{question}
+
+Answer confidently, naturally, and professionally as a human representative would.
+""")

app/VectorStores/Vectorstores.py

@@ -0,0 +1,14 @@
+from langchain_qdrant import QdrantVectorStore
+from embeddings.embedding import get_embedding
+from config.config import QDRANT_URL, QDRANT_API_KEY # Use config variables
+from dotenv import load_dotenv
+load_dotenv()
+
+def get_vectorstore():
+    return QdrantVectorStore.from_existing_collection(
+        embedding=get_embedding(),
+        collection_name="Ninesol_Technologies_Knowledge_Base",
+        prefer_grpc=True,
+        url=QDRANT_URL,        
+        api_key=QDRANT_API_KEY 
+    )

app/chain.py

@@ -0,0 +1,51 @@
+from langchain_core.runnables import RunnableParallel, RunnableLambda, RunnablePassthrough
+from langchain_core.output_parsers import StrOutputParser
+from langchain_core.messages import get_buffer_string
+from langchain_classic.memory import ConversationBufferMemory
+from VectorStores.Vectorstores import get_vectorstore
+from LLM.LLM import llm
+from Prompt.Prompt import prompt
+
+def join_docs(docs):
+    return "\n\n".join(doc.page_content for doc in docs)
+
+memory = ConversationBufferMemory(
+        return_messages=True,
+        memory_key="chat_history"
+)
+
+def create_rag_chain(memory):
+    retriever = get_vectorstore().as_retriever(
+        search_type="mmr",
+        search_kwargs={"k": 3, "fetch_k": 10}
+    )
+
+    return (
+        RunnableParallel({
+            "context": retriever | RunnableLambda(join_docs),
+            "question": RunnablePassthrough(),
+            "chat_history": RunnableLambda(
+                lambda _: get_buffer_string(memory.chat_memory.messages)
+            )
+        })
+        | prompt
+        | llm
+
+    )
+
+chain=create_rag_chain(memory)
+# while True:
+#         user_input = input("Enter your query (or 'exit' to quit): ")
+#         print("User:", user_input)
+#         if user_input.lower() in ['q', 'exit']:
+#             break
+
+#         # .invoke() returns the final state dictionary directly
+#         result = create_rag_chain(memory).invoke(
+#             user_input
+#         )
+#         memory.chat_memory.add_user_message(user_input)
+#         memory.chat_memory.add_ai_message(result)
+#         AI_msg=result
+#         print("Bot:", AI_msg)
+            

app/config/config.py

@@ -0,0 +1,9 @@
+from dotenv import load_dotenv
+import os
+
+load_dotenv()
+
+QDRANT_URL = os.getenv("QDRANT_URL")
+QDRANT_API_KEY = os.getenv("QDRANT_API_KEY")
+GROQ_API_KEY = os.getenv("GROQ_API_KEY")
+HUGGINGFACEHUB_API_TOKEN = os.getenv("HUGGINGFACEHUB_API_TOKEN")

app/embeddings/embedding.py

@@ -0,0 +1,16 @@
+from langchain_huggingface import HuggingFaceEndpointEmbeddings
+from dotenv import load_dotenv
+from config.config import HUGGINGFACEHUB_API_TOKEN
+load_dotenv()
+
+def get_embedding():
+    embeddings = HuggingFaceEndpointEmbeddings(
+    repo_id="sentence-transformers/all-mpnet-base-v2",
+    task="feature-extraction",
+    huggingfacehub_api_token=HUGGINGFACEHUB_API_TOKEN
+    )
+    return embeddings
+
+
+# vector = embedding().embed_query("This is a cloud-based embedding.")
+# print(vector)

app/index.py

@@ -0,0 +1,51 @@
+from fastapi import FastAPI
+from pydantic import BaseModel
+from chain import chain, memory # Direct import for simple root structure
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import HTMLResponse 
+from fastapi.staticfiles import StaticFiles
+import os
+
+app = FastAPI()
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"], 
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+class ChatRequest(BaseModel):
+    message: str
+
+@app.post("/chat")
+async def chat_endpoint(request: ChatRequest):
+    # Asynchronous response for better performance and responsiveness
+    response = await chain.ainvoke(request.message) 
+    
+    # Update conversation history manually for RAG context
+    memory.chat_memory.add_user_message(request.message)
+    memory.chat_memory.add_ai_message(response.content)
+    
+    return {"response": response.content}
+
+# Mount the static folder to serve CSS, JS, and the atomcamp logo
+if os.path.exists("static"):
+    app.mount("/static", StaticFiles(directory="static"), name="static")
+
+@app.get("/", response_class=HTMLResponse)
+async def read_root():
+    # Serves the index.html from your organized static/templates directory
+    file_path = os.path.join("static", "templates", "index.html")
+    
+    # Check for file existence to avoid internal server errors
+    if not os.path.exists(file_path):
+        return HTMLResponse(content=f"UI Error: File not found at {file_path}", status_code=404)
+        
+    with open(file_path, "r") as f:
+        return f.read()
+
+if __name__ == "__main__":
+    import uvicorn
+    # The server runs on localhost:8000
+    uvicorn.run(app, host="0.0.0.0", port=8000)

app/ingest.py

@@ -0,0 +1,52 @@
+import os
+import bs4 # Make sure to 'pip install beautifulsoup4'
+from langchain_community.document_loaders import WebBaseLoader
+from langchain_text_splitters import RecursiveCharacterTextSplitter
+from langchain_qdrant import QdrantVectorStore
+from embeddings.embedding import get_embedding
+from config.config import QDRANT_URL, QDRANT_API_KEY 
+
+# 1. Smarter Loading: Only grab the 'main' content to prevent repeating 
+# headers, footers, and menus in every single chunk.
+loader = WebBaseLoader(
+    web_paths=[
+        "https://atomcamp.com/", 
+        "https://www.atomcamp.com/course/",
+        "https://www.atomcamp.com/about-us/",
+        "https://www.atomcamp.com/events/",
+        "https://www.atomcamp.com/blogs/",
+        "https://www.atomcamp.com/news/",
+        "https://www.atomcamp.com/webinars/",
+        "https://www.atomcamp.com/publications/",
+        "https://www.atomcamp.com/ai-solutions/"
+    ],
+    bs_kwargs=dict(
+        parse_only=bs4.SoupStrainer(["main", "article", "h1", "h2", "p"])
+    )
+)
+
+data = loader.load()
+
+# 2. Split into clean chunks
+text_splitter = RecursiveCharacterTextSplitter(chunk_size=1000, chunk_overlap=150)
+docs = text_splitter.split_documents(data)
+
+# 3. Safe Upload to Cloud
+BATCH_SIZE = 20 
+
+print(f"Cleaning old data and starting ingestion of {len(docs)} documents...")
+
+# NOTE: Using .from_documents will ADD to the collection. 
+# If you want to fix the repetition from previous runs, 
+# you should delete the collection in your Qdrant Dashboard first.
+qdrant = QdrantVectorStore.from_documents(
+    docs,
+    get_embedding(),
+    url=QDRANT_URL,
+    api_key=QDRANT_API_KEY,
+    collection_name="atomcamp_knowledge_base",
+    batch_size=BATCH_SIZE,
+    timeout=120
+)
+
+print("Ingestion complete! atomcamp knowledge base is clean and ready.")

app/requirements.txt

@@ -0,0 +1,9 @@
+langchain==0.3.0
+langchain-core==0.3.0
+langchain-groq==0.2.0
+langchain-huggingface==0.1.0
+langchain-qdrant==0.2.0
+qdrant-client==1.12.0
+streamlit==1.40.2
+python-dotenv==1.0.1
+huggingface-hub==0.23.0

app/static/css/style.css

@@ -0,0 +1,253 @@
+/* 1. Global Variables & Themes */
+:root {
+    --primary: #166534; 
+    --accent: #22c55e;
+    --bg-body: #f1f5f9; 
+    --bg-app: #ffffff;
+    --bg-chat: linear-gradient(to bottom, #ffffff, #f9fafb);
+    --bg-input: #f8fafc; 
+    --text-main: #1e293b;
+    --text-light: #64748b; 
+    --bot-bubble: #f1f5f9;
+    --border: #e2e8f0; 
+    --icon-color: #64748b;
+    --link-color: #0d00ff; /* Professional Blue for Light Mode */
+}
+
+body.dark-mode {
+    --bg-body: #0f172a; 
+    --bg-app: #1e293b;
+    --bg-chat: #1e293b; 
+    --bg-input: #0f172a;
+    --text-main: #f8fafc; 
+    --text-light: #94a3b8;
+    --bot-bubble: #334155; 
+    --border: #334155;
+    --icon-color: #f8fafc;
+    --link-color: #ffa321; /* High-Visibility Orange for Dark Mode */
+}
+
+/* 2. Global Reset */
+* { 
+    box-sizing: border-box; 
+    margin: 0; 
+    padding: 0; 
+    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; 
+}
+
+body { 
+    font-family: 'Inter', sans-serif; 
+    background: var(--bg-body); 
+    color: var(--text-main); 
+    display: flex; 
+    height: 100vh; 
+    justify-content: center; 
+    overflow: hidden; 
+}
+
+/* 3. Main Layout */
+.app-container { 
+    width: 100%; 
+    max-width: 850px; 
+    height: 96vh; 
+    margin-top: 2vh; 
+    display: flex; 
+    flex-direction: column; 
+    background: var(--bg-app); 
+    border-radius: 24px; 
+    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); 
+    position: relative; 
+}
+
+header { 
+    padding: 1.5rem; 
+    border-bottom: 1px solid var(--border); 
+    display: flex; 
+    flex-direction: column; 
+    align-items: center; 
+    gap: 8px; 
+    position: relative; 
+}
+
+.logo-img { 
+    height: 35px; 
+    width: auto; 
+    object-fit: contain; 
+}
+
+#theme-toggle { 
+    position: absolute; 
+    top: 1.5rem; 
+    right: 1.5rem; 
+    background: none; 
+    border: none; 
+    cursor: pointer; 
+    width: 40px; 
+    height: 40px; 
+    border-radius: 12px; 
+    display: flex; 
+    align-items: center; 
+    justify-content: center; 
+    color: var(--icon-color); 
+}
+
+#theme-toggle:hover { background: var(--bg-body); }
+#theme-toggle svg { width: 22px; height: 22px; stroke-width: 2; }
+
+/* 4. Status Badge */
+.status-badge { 
+    display: flex; 
+    align-items: center; 
+    gap: 6px; 
+    padding: 4px 12px; 
+    background: rgba(16, 185, 129, 0.1); 
+    border-radius: 20px; 
+}
+
+.status-dot { width: 6px; height: 6px; border-radius: 50%; }
+.status-text { 
+    font-size: 0.65rem; 
+    font-weight: 700; 
+    text-transform: uppercase; 
+    letter-spacing: 0.05em; 
+}
+
+.online .status-dot { 
+    background: var(--accent); 
+    box-shadow: 0 0 8px var(--accent); 
+}
+.online .status-text { color: var(--accent); }
+
+.typing .status-dot { 
+    background: var(--text-light); 
+    animation: pulse 1s infinite; 
+}
+.typing .status-text { color: var(--text-light); }
+
+/* 5. Chat History & Bubbles */
+#chat-box { 
+    flex: 1; 
+    overflow-y: auto; 
+    overflow-x: hidden; 
+    padding: 2.5rem; 
+    display: flex; 
+    flex-direction: column; 
+    gap: 1.5rem; 
+    background: var(--bg-chat); 
+}
+
+.message-row { 
+    display: flex; 
+    gap: 12px; 
+    width: 100%;
+    max-width: 85%; 
+    animation: slideUp 0.4s ease; 
+}
+
+.message-row.user { 
+    align-self: flex-end; 
+    flex-direction: row-reverse; 
+}
+
+.bubble { 
+    padding: 1rem 1.25rem; 
+    border-radius: 18px; 
+    line-height: 1.6; 
+    font-size: 0.95rem; 
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    word-break: break-word;
+}
+
+/* Fix for Link Visibility */
+.bubble a {
+    color: var(--link-color);
+    text-decoration: underline;
+    font-weight: 500;
+    transition: color 0.3s ease;
+}
+
+.bot .bubble { 
+    background: var(--bot-bubble); 
+    border: 1px solid var(--border); 
+    border-top-left-radius: 4px; 
+    color: var(--text-main); 
+}
+
+.user .bubble { 
+    background: var(--primary); 
+    color: white; 
+    border-top-right-radius: 4px; 
+    box-shadow: 0 4px 12px rgba(22, 101, 52, 0.15); 
+}
+
+.bubble ul { list-style-type: disc; margin: 10px 0 10px 20px; }
+.bubble li { margin-bottom: 6px; }
+
+/* 6. Typing Animations */
+.loader { display: flex; gap: 4px; padding: 6px 0; }
+.dot { 
+    width: 5px; 
+    height: 5px; 
+    background: var(--text-light); 
+    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; }
+
+/* 7. Input Section */
+.input-wrapper { 
+    padding: 1.5rem 2.5rem; 
+    background: var(--bg-app); 
+    border-top: 1px solid var(--border); 
+}
+
+.input-box { 
+    display: flex; 
+    align-items: flex-end; 
+    background: var(--bg-input); 
+    border-radius: 16px; 
+    padding: 8px 12px; 
+    border: 1.5px solid var(--border); 
+    transition: 0.3s;
+    min-height: 56px;
+}
+
+.input-box:focus-within { border-color: var(--primary); }
+
+#user-input { 
+    flex: 1; 
+    border: none; 
+    background: transparent; 
+    padding: 10px 4px; 
+    outline: none; 
+    font-size: 0.95rem; 
+    color: var(--text-main); 
+    font-family: inherit; 
+    resize: none; 
+    max-height: 150px; 
+    overflow-y: auto; 
+    line-height: 1.5; 
+}
+
+button#send-btn { 
+    background: var(--primary); 
+    color: white; 
+    border: none; 
+    padding: 12px 24px; 
+    border-radius: 12px; 
+    cursor: pointer; 
+    font-weight: 600; 
+    margin-left: 8px;
+    margin-bottom: 4px; 
+}
+
+/* 8. Keyframes */
+@keyframes slideUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }
+@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
+
+/* Scrollbar Styling */
+::-webkit-scrollbar { width: 5px; }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }

app/static/js/chat.js

@@ -0,0 +1,98 @@
+// 1. Elements Selection
+const box = document.getElementById('chat-box');
+const input = document.getElementById('user-input');
+const btn = document.getElementById('send-btn');
+const statusBadge = document.getElementById('status-badge');
+const statusText = document.getElementById('status-text');
+const themeToggle = document.getElementById('theme-toggle');
+
+// 2. Professional SVG Icons
+const sunIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>`;
+const moonIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>`;
+
+// 3. Theme Toggle Logic
+function updateToggleIcon(isDark) {
+    themeToggle.innerHTML = isDark ? moonIcon : sunIcon;
+}
+
+themeToggle.onclick = () => {
+    document.body.classList.toggle('dark-mode');
+    updateToggleIcon(document.body.classList.contains('dark-mode'));
+};
+
+// 4. Input Auto-Resize Logic
+input.addEventListener('input', function() {
+    this.style.height = 'auto';
+    this.style.height = (this.scrollHeight) + 'px';
+});
+
+// 5. Messaging Logic
+async function sendMessage() {
+    const msg = input.value.trim();
+    if (!msg) return;
+
+    // UI Reset
+    input.value = '';
+    input.style.height = 'auto'; 
+    addMessage(msg, 'user');
+
+    // Show "Typing..." Status
+    statusBadge.className = 'status-badge typing';
+    statusText.innerText = 'Typing...';
+
+    // Add Loading Animation Row
+    const loaderId = 'loader-' + Date.now();
+    const loaderRow = document.createElement('div');
+    loaderRow.className = 'message-row bot';
+    loaderRow.id = loaderId;
+    loaderRow.innerHTML = `<div class="bubble"><div class="loader"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div></div>`;
+    box.appendChild(loaderRow);
+    box.scrollTo({ top: box.scrollHeight, behavior: 'smooth' });
+
+    try {
+        const res = await fetch('/chat', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ message: msg })
+        });
+        const data = await res.json();
+        
+        // Remove loader and display bot response
+        document.getElementById(loaderId).remove();
+        addMessage(data.response, 'bot');
+    } catch (e) {
+        if (document.getElementById(loaderId)) document.getElementById(loaderId).remove();
+        addMessage("Sorry, I'm having trouble connecting to the server.", 'bot');
+    } finally {
+        // Restore "Online" status
+        statusBadge.className = 'status-badge online';
+        statusText.innerText = 'Online';
+    }
+}
+
+function addMessage(content, role) {
+    const div = document.createElement('div');
+    div.className = `message-row ${role}`;
+    // Use marked.js for professional Markdown rendering in bot responses
+    const html = role === 'bot' ? marked.parse(content) : content;
+    div.innerHTML = `<div class="bubble">${html}</div>`;
+    box.appendChild(div);
+    box.scrollTo({ top: box.scrollHeight, behavior: 'smooth' });
+}
+
+// 6. Event Listeners
+btn.onclick = sendMessage;
+
+input.onkeydown = (e) => {
+    // Enter sends message, Shift+Enter adds new line
+    if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault(); 
+        sendMessage();
+    }
+};
+
+// 7. Initial State
+updateToggleIcon(false);
+// Pre-parse the initial welcome message
+const initialBotMsg = box.querySelector('.bot .bubble');
+if (initialBotMsg) initialBotMsg.innerHTML = marked.parse(initialBotMsg.innerHTML);

app/static/templates/index.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>atomcamp AI</title>
+    <link rel="stylesheet" href="/static/css/style.css">
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+</head>
+<body>
+    <div class="app-container">
+        <header>
+            <img src="/static/atomcamp_logo.png" alt="atomcamp" class="logo-img">
+            
+            <button id="theme-toggle" title="Toggle Theme"></button>
+            
+            <div id="status-badge" class="status-badge online">
+                <span class="status-dot"></span>
+                <span id="status-text" class="status-text">Online</span>
+            </div>
+        </header>
+
+        <div id="chat-box">
+            <div class="message-row bot">
+                <div class="bubble">Hello! I'm the **atomcamp** AI. How can I assist you with our programs today?</div>
+            </div>
+        </div>
+
+        <div class="input-wrapper">
+            <div class="input-box">
+                <textarea id="user-input" placeholder="Type a message..." autocomplete="off" rows="1"></textarea>
+                <button id="send-btn">Send</button>
+            </div>
+        </div>
+    </div>
+
+    <script src="/static/js/chat.js"></script>
+</body>
+</html>