Spaces:

TechDisciples1
/

Theo

Sleeping

App Files Files Community

alaselababatunde commited on Feb 22

Commit

b7d05f4

1 Parent(s): ac16b35

refactor: complete codebase replacement with Domino's architecture

Browse files

Files changed (22) hide show

frontend/.gitignore +0 -24
frontend/README.md +0 -73
frontend/eslint.config.js +0 -23
frontend/index.html +0 -18
frontend/package-lock.json +0 -0
frontend/package.json +0 -37
frontend/postcss.config.js +0 -6
frontend/public/assets/logo.jpg +0 -3
frontend/public/assets/logo.png +0 -0
frontend/public/logo.jpeg +0 -0
frontend/public/vite.svg +0 -1
frontend/src/App.tsx +0 -216
frontend/src/index.css +0 -98
frontend/src/main.tsx +0 -10
frontend/tailwind.config.js +0 -18
frontend/tsconfig.app.json +0 -28
frontend/tsconfig.json +0 -7
frontend/tsconfig.node.json +0 -26
frontend/vite.config.ts +0 -7
main.py +123 -132
static/main.css +334 -0
templates/index.html +130 -0

frontend/.gitignore DELETED Viewed

@@ -1,24 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-node_modules
-dist
-dist-ssr
-*.local
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?

frontend/README.md DELETED Viewed

@@ -1,73 +0,0 @@
-# React + TypeScript + Vite
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-Currently, two official plugins are available:
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-## React Compiler
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
-## Expanding the ESLint configuration
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```

frontend/eslint.config.js DELETED Viewed

@@ -1,23 +0,0 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-import { defineConfig, globalIgnores } from 'eslint/config'
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      js.configs.recommended,
-      tseslint.configs.recommended,
-      reactHooks.configs.flat.recommended,
-      reactRefresh.configs.vite,
-    ],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-  },
-])

frontend/index.html DELETED Viewed

@@ -1,18 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" href="CLCC Logo No Background.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Theo AI | Biblical Guidance & Christian Support</title>
-    <meta name="description" content="Seek spiritual wisdom and Biblical encouragement with Theo, your personal Christian AI assistant from TechDisciples CLCC." />
-    <!-- Google Fonts -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;600;700&display=swap" rel="stylesheet">
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

frontend/package-lock.json DELETED Viewed

The diff for this file is too large to render. See raw diff

frontend/package.json DELETED Viewed

@@ -1,37 +0,0 @@
-{
-  "name": "frontend",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "lint": "eslint .",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "axios": "^1.6.7",
-    "lucide-react": "^0.320.0",
-    "react-markdown": "^9.0.1"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.39.1",
-    "@types/node": "^24.10.1",
-    "@types/react": "^19.2.5",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.1",
-    "eslint": "^9.39.1",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.24",
-    "globals": "^16.5.0",
-    "typescript": "~5.9.3",
-    "typescript-eslint": "^8.46.4",
-    "vite": "^7.2.4",
-    "tailwindcss": "^3.4.1",
-    "postcss": "^8.4.35",
-    "autoprefixer": "^10.4.18",
-    "@tailwindcss/typography": "^0.5.10"
-  }
-}

frontend/postcss.config.js DELETED Viewed

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

frontend/public/assets/logo.jpg DELETED Viewed

Git LFS Details

SHA256: 3383887f254073e4eb4df7e7a98dcc6fbe9c27245ba7d7d5a3f9aedd9cea0f01
Pointer size: 131 Bytes
Size of remote file: 219 kB

frontend/public/assets/logo.png DELETED Viewed

Binary file (34.6 kB)

frontend/public/logo.jpeg DELETED Viewed

Binary file (3.83 kB)

frontend/public/vite.svg DELETED Viewed

frontend/src/App.tsx DELETED Viewed

@@ -1,216 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { Send, User, Bot, Loader2, Trash2 } from 'lucide-react';
-import ReactMarkdown from 'react-markdown';
-import axios from 'axios';
-interface Message {
-    role: 'user' | 'assistant';
-    content: string;
-}
-const VERSES = [
-    { text: "Thy word is a lamp unto my feet, and a light unto my path.", ref: "Psalm 119:105" },
-    { text: "For I know the thoughts that I think toward you, saith the Lord, thoughts of peace, and not of evil.", ref: "Jeremiah 29:11" },
-    { text: "But they that wait upon the Lord shall renew their strength; they shall mount up with wings as eagles.", ref: "Isaiah 40:31" },
-    { text: "Trust in the Lord with all thine heart; and lean not unto thine own understanding.", ref: "Proverbs 3:5" },
-    { text: "I can do all things through Christ which strengtheneth me.", ref: "Philippians 4:13" },
-    { text: "The Lord is my shepherd; I shall not want.", ref: "Psalm 23:1" },
-    { text: "And be not conformed to this world: but be ye transformed by the renewing of your mind.", ref: "Romans 12:2" }
-];
-const App: React.FC = () => {
-    const [messages, setMessages] = useState<Message[]>([]);
-    const [input, setInput] = useState('');
-    const [isLoading, setIsLoading] = useState(false);
-    const [sessionId] = useState<string>(() => Math.random().toString(36).substring(7));
-    const [verse, setVerse] = useState(VERSES[0]);
-    const chatBoxRef = useRef<HTMLDivElement>(null);
-    const textareaRef = useRef<HTMLTextAreaElement>(null);
-    const isFirstRender = useRef(true);
-    useEffect(() => {
-        const dayOfYear = Math.floor((new Date().getTime() - new Date(new Date().getFullYear(), 0, 0).getTime()) / 86400000);
-        setVerse(VERSES[dayOfYear % VERSES.length]);
-    }, []);
-    useEffect(() => {
-        if (isFirstRender.current) {
-            isFirstRender.current = false;
-            return;
-        }
-        if (chatBoxRef.current) {
-            chatBoxRef.current.scrollTo({
-                top: chatBoxRef.current.scrollHeight,
-                behavior: 'smooth'
-            });
-        }
-    }, [messages, isLoading]);
-    const handleSend = async () => {
-        if (!input.trim() || isLoading) return;
-        const userMessage = input.trim();
-        setInput('');
-        if (textareaRef.current) textareaRef.current.style.height = 'auto';
-        setMessages(prev => [...prev, { role: 'user', content: userMessage }]);
-        setIsLoading(true);
-        try {
-            const response = await axios.post('/ai-chat', {
-                query: userMessage,
-                session_id: sessionId,
-            }, {
-                headers: {
-                    'Content-Type': 'application/json',
-                    'x-api-key': 'techdisciplesai404'
-                }
-            });
-            const assistantMessage = response.data.reply;
-            setMessages(prev => [...prev, { role: 'assistant', content: assistantMessage }]);
-        } catch (error) {
-            console.error('Chat error:', error);
-            setMessages(prev => [...prev, {
-                role: 'assistant',
-                content: 'I apologize, but I encountered an error. Please check your connection and try again. May God bless you.'
-            }]);
-        } finally {
-            setIsLoading(false);
-        }
-    };
-    const clearChat = () => {
-        if (window.confirm('Are you sure you want to clear our conversation, beloved?')) {
-            setMessages([]);
-        }
-    };
-    const handleTextareaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-        setInput(e.target.value);
-        e.target.style.height = 'auto';
-        e.target.style.height = `${e.target.scrollHeight}px`;
-    };
-    return (
-        <div className="h-[100dvh] w-full bg-[#002B22] flex items-center justify-center overflow-hidden font-outfit text-white p-0 sm:p-4">
-            {/* Background Orbs */}
-            <div className="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] bg-[#007055]/20 rounded-full blur-[120px] pointer-events-none"></div>
-            <div className="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] bg-[#FDFBD4]/5 rounded-full blur-[120px] pointer-events-none"></div>
-            <div className="w-full max-w-4xl h-full sm:h-[90vh] bg-white/[0.03] backdrop-blur-3xl sm:rounded-[2rem] flex flex-col overflow-hidden border border-white/10 shadow-[0_32px_64px_-12px_rgba(0,0,0,0.5)]">
-                {/* Header - Domino's Style */}
-                <header className="flex items-center justify-between px-6 py-4 md:px-10 md:py-6 bg-[#00362B]/60 border-b border-white/10 z-20">
-                    <div className="flex items-center gap-4">
-                        <div className="relative w-10 h-10 md:w-12 md:h-12 rounded-xl overflow-hidden border border-[#FDFBD4]/20 shadow-lg">
-                            <img src="/assets/logo.jpg" alt="CLCC Logo" className="w-full h-full object-cover" />
-                        </div>
-                        <div className="flex flex-col">
-                            <h1 className="text-xl md:text-2xl font-black tracking-tight text-[#FDFBD4]">Theo AI</h1>
-                            <span className="text-[9px] md:text-[11px] font-bold text-[#FDFBD4]/40 uppercase tracking-[0.2em]">CLCC - TECHDISCIPLES</span>
-                        </div>
-                    </div>
-                    <button
-                        onClick={clearChat}
-                        className="p-2 transition-all hover:bg-white/5 rounded-full border border-white/5 text-[#FDFBD4]/60 hover:text-[#FDFBD4]"
-                        title="Clear Conversation"
-                    >
-                        <Trash2 size={20} />
-                    </button>
-                </header>
-                {/* Chat Container */}
-                <div
-                    ref={chatBoxRef}
-                    className="flex-1 overflow-y-auto px-4 py-8 md:px-10 space-y-6 scroll-smooth scrollbar-hide"
-                >
-                    {messages.length === 0 && (
-                        <div className="h-full flex flex-col items-center justify-center text-center p-6 animate-in fade-in zoom-in duration-700">
-                            <div className="w-20 h-20 bg-[#FDFBD4]/5 rounded-3xl flex items-center justify-center border border-[#FDFBD4]/10 shadow-inner mb-6">
-                                <Bot size={40} className="text-[#FDFBD4]" />
-                            </div>
-                            <h2 className="text-3xl font-bold text-white mb-2">Shalom, Beloved</h2>
-                            <p className="text-white/60 text-base max-w-md leading-relaxed mb-8">
-                                I am Theo, centered in Christ to walk with you in faith. How may the Lord's wisdom guide you today?
-                            </p>
-                            <div className="w-full max-w-sm p-5 rounded-2xl bg-[#00362B]/40 border border-[#FDFBD4]/10 backdrop-blur-sm text-left">
-                                <h3 className="text-[10px] font-bold text-[#FDFBD4]/50 uppercase tracking-widest mb-3">Verse of the Day</h3>
-                                <p className="text-[#FDFBD4]/90 text-sm italic leading-relaxed">
-                                    "{verse.text}"
-                                    <span className="block mt-2 font-bold not-italic opacity-100 text-[#FDFBD4]">-- {verse.ref}</span>
-                                </p>
-                            </div>
-                        </div>
-                    )}
-                    {messages.map((msg, index) => (
-                        <div key={index} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'} animate-in slide-in-from-bottom-4 duration-500 fill-mode-both`}>
-                            <div className={`flex flex-col max-w-[85%] md:max-w-[75%] ${msg.role === 'user' ? 'items-end' : 'items-start'}`}>
-                                <div className={`relative px-5 py-4 rounded-2xl shadow-lg selection:bg-[#007055]/30 ${msg.role === 'user'
-                                        ? 'bg-[#007055] text-white rounded-br-none border border-white/10 selection:bg-white/20'
-                                        : 'bg-[#FDFBD4]/95 text-[#002B22] rounded-bl-none border-l-4 border-[#007055]'
-                                    }`}>
-                                    {msg.role === 'assistant' && (
-                                        <div className="flex items-center gap-2 mb-2 opacity-40">
-                                            <Bot size={14} />
-                                            <span className="text-[10px] font-black uppercase tracking-tighter">Theo</span>
-                                        </div>
-                                    )}
-                                    <div className={`prose prose-sm max-w-none ${msg.role === 'user' ? 'prose-invert' : 'prose-headings:text-[#00362B] prose-strong:text-[#007055]'}`}>
-                                        <ReactMarkdown>{msg.content}</ReactMarkdown>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    ))}
-                    {isLoading && (
-                        <div className="flex justify-start animate-in slide-in-from-bottom-2 duration-300">
-                            <div className="bg-[#FDFBD4]/95 p-4 rounded-2xl rounded-bl-none flex items-center gap-2">
-                                <div className="flex gap-1">
-                                    <div className="w-2 h-2 bg-[#007055] rounded-full animate-bounce [animation-delay:-0.3s]"></div>
-                                    <div className="w-2 h-2 bg-[#007055] rounded-full animate-bounce [animation-delay:-0.15s]"></div>
-                                    <div className="w-2 h-2 bg-[#007055] rounded-full animate-bounce"></div>
-                                </div>
-                            </div>
-                        </div>
-                    )}
-                </div>
-                {/* Input Area - Domino's Style */}
-                <div className="p-4 md:p-8 bg-white/5 border-top border-white/10 backdrop-blur-md">
-                    <div className="max-w-3xl mx-auto flex items-end gap-3 md:gap-4 relative group">
-                        <textarea
-                            ref={textareaRef}
-                            value={input}
-                            onChange={handleTextareaChange}
-                            onKeyDown={(e) => {
-                                if (e.key === 'Enter' && !e.shiftKey) {
-                                    e.preventDefault();
-                                    handleSend();
-                                }
-                            }}
-                            placeholder="How can Theo help you today?"
-                            className="flex-1 bg-[#00362B]/60 border-2 border-white/5 rounded-2xl p-4 md:px-6 md:py-4 focus:outline-none focus:border-[#FDFBD4]/30 text-white placeholder:text-white/20 text-sm md:text-base resize-none max-h-[150px] transition-all scrollbar-hide"
-                            rows={1}
-                            disabled={isLoading}
-                        />
-                        <button
-                            onClick={handleSend}
-                            disabled={isLoading || !input.trim()}
-                            className="w-12 h-12 md:w-14 md:h-14 bg-[#FDFBD4] text-[#002B22] rounded-full flex items-center justify-center shrink-0 shadow-[0_8px_20px_-4px_rgba(253,251,212,0.4)] hover:scale-105 active:scale-95 transition-all disabled:opacity-20 disabled:grayscale disabled:scale-100"
-                        >
-                            <Send size={24} className={isLoading ? 'animate-pulse' : ''} />
-                        </button>
-                    </div>
-                    <div className="text-center mt-4">
-                        <p className="text-[10px] font-black uppercase tracking-[0.4em] text-white/20">Faith-Based Intelligence</p>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-};
-export default App;

frontend/src/index.css DELETED Viewed

@@ -1,98 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-:root {
-  font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-  color-scheme: dark;
-  background-color: #002B22;
-}
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-#root {
-  width: 100%;
-}
-.glass-container {
-  background: rgba(255, 255, 255, 0.03);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 24px;
-  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
-}
-.scrollbar-hide::-webkit-scrollbar {
-  display: none;
-}
-.scrollbar-hide {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-/* Markdown Styling */
-.markdown-content h1, .markdown-content h2, .markdown-content h3 {
-  font-weight: 700;
-  margin-top: 1.5em;
-  margin-bottom: 0.5em;
-  color: white;
-}
-.markdown-content p {
-  margin-bottom: 1em;
-  line-height: 1.6;
-}
-.markdown-content ul, .markdown-content ol {
-  margin-bottom: 1em;
-  padding-left: 1.5em;
-}
-.markdown-content li {
-  margin-bottom: 0.5em;
-}
-.markdown-content strong {
-  color: #FDFBD4;
-  font-weight: 800;
-}
-.markdown-content table {
-  width: 100%;
-  border-collapse: collapse;
-  margin-bottom: 1em;
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 8px;
-  overflow: hidden;
-}
-.markdown-content th, .markdown-content td {
-  padding: 8px 12px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  text-align: left;
-}
-.markdown-content th {
-  background: rgba(255, 255, 255, 0.05);
-  font-weight: 600;
-}
-/* Animations */
-@keyframes pulse-soft {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.6; }
-}
-.animate-pulse-soft {
-  animation: pulse-soft 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-}

frontend/src/main.tsx DELETED Viewed

@@ -1,10 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
-ReactDOM.createRoot(document.getElementById('root')!).render(
-    <React.StrictMode>
-        <App />
-    </React.StrictMode>,
-)

frontend/tailwind.config.js DELETED Viewed

@@ -1,18 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-    content: [
-        "./index.html",
-        "./src/**/*.{js,ts,jsx,tsx}",
-    ],
-    theme: {
-        extend: {
-            fontFamily: {
-                sans: ['Inter', 'sans-serif'],
-                outfit: ['Outfit', 'sans-serif'],
-            },
-        },
-    },
-    plugins: [
-        require('@tailwindcss/typography'),
-    ],
-}

frontend/tsconfig.app.json DELETED Viewed

@@ -1,28 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2022",
-    "useDefineForClassFields": true,
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "types": ["vite/client"],
-    "skipLibCheck": true,
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["src"]
-}

frontend/tsconfig.json DELETED Viewed

@@ -1,7 +0,0 @@
-{
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
-}

frontend/tsconfig.node.json DELETED Viewed

@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2023",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "types": ["node"],
-    "skipLibCheck": true,
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["vite.config.ts"]
-}

frontend/vite.config.ts DELETED Viewed

@@ -1,7 +0,0 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [react()],
-})

main.py CHANGED Viewed

@@ -1,185 +1,176 @@
-# =====================================================
-# Theo AI - Tech Disciples CLCC
-# =====================================================
 import os
 import logging
-from typing import List, Optional
-from fastapi import FastAPI, HTTPException, Header, Request
-from fastapi.responses import HTMLResponse, FileResponse
 from fastapi.staticfiles import StaticFiles
 from fastapi.middleware.cors import CORSMiddleware
 from pydantic import BaseModel
 from dotenv import load_dotenv
 from langchain_openai import ChatOpenAI
-from langchain_core.prompts import ChatPromptTemplate, MessagesPlaceholder
-from langchain_core.messages import HumanMessage, AIMessage, SystemMessage
-from langchain.memory import ConversationBufferWindowMemory
 from langchain_community.tools import DuckDuckGoSearchRun
-# Load environment variables
-load_dotenv()
 # =====================================================
 # CONFIGURATION
 # =====================================================
 OPENROUTER_API_KEY = os.getenv("THEO_OPENROUTER_MODEL_KEY")
 MODEL_NAME = "openai/gpt-oss-120b:free"
-API_SECRET = "techdisciplesai404" # Keeping the original secret as per user instruction (if applicable, but user didn't specify to change this)
-# =====================================================
-# LOGGING
-# =====================================================
-logging.basicConfig(level=logging.INFO)
-logger = logging.getLogger("TheoAI")
 if not OPENROUTER_API_KEY:
-    logger.error("❌ THEO_OPENROUTER_MODEL_KEY not found in environment")
-# =====================================================
-# FASTAPI APP
-# =====================================================
-app = FastAPI(title="Theo AI", version="4.0")
-app.add_middleware(
-    CORSMiddleware,
-    allow_origins=["*"],
-    allow_credentials=True,
-    allow_methods=["*"],
-    allow_headers=["*"],
-)
 # =====================================================
 # LLM & TOOLS
 # =====================================================
 llm = ChatOpenAI(
     openai_api_key=OPENROUTER_API_KEY,
     openai_api_base="https://openrouter.ai/api/v1",
-    model_name=MODEL_NAME,
-    temperature=0.7,
 )
 search = DuckDuckGoSearchRun()
 # =====================================================
-# PROMPT TEMPLATE
 # =====================================================
 SYSTEM_PROMPT = """You are Theo — a warm, friendly, and deeply insightful Christian companion created by TechDisciples CLCC.
 TONE & STYLE:
-1. CHATTY & WARM: Speak like a loving friend or a caring elder. Use a conversational, "chatty" tone that feels personal and welcoming.
-2. PARAGRAPHS: NEVER send a single wall of text. Break your thoughts into 2-4 short, readable paragraphs. Each point should have its own breathing space.
-3. NIGERIAN HEARTBEAT: Use simple, relatable English with a gentle Nigerian inflection. Be clear and accessible to everyone.
 CORE GUIDELINES:
-1. BIBLICAL FOCUS: Root your wisdom and encouragement in the Holy Bible. Use scripture to offer hope, especially for those in distress.
-2. FORMATTING: Use Markdown (bolding for emphasis, short lists if needed) to keep your replies professional yet approachable.
-3. UNKNOWN TOPICS: If you lack specific knowledge, use your web search tool to find facts, then wrap that information in your warm Christian perspective.
 Identity: Theo
 Creators: TechDisciples CLCC
-Logo: [CLCC logo](https://raw.githubusercontent.com/Alasela/Theo/main/assests/logo.png)
-Remember: Be a beacon of God's love. Keep your messages structured with clear paragraphs so they are easy to read in a chat window."""
 # =====================================================
-# MEMORY
 # =====================================================
-# Using a dictionary to store memory for different sessions
-memories = {}
-def get_memory(session_id: str):
-    if session_id not in memories:
-        memories[session_id] = ConversationBufferWindowMemory(
-            k=5, return_messages=True, memory_key="history"
-        )
-    return memories[session_id]
 # =====================================================
-# REQUEST MODEL
 # =====================================================
-class QueryInput(BaseModel):
-    query: str
-    session_id: Optional[str] = "default"
-# Mount the frontend directory as static files
-# In a typical Vite React app, the build output is in 'dist'.
-# If it's just raw HTML/JS/CSS we point to 'frontend'.
-frontend_dir = os.path.join(os.path.dirname(__file__), "frontend")
-dist_dir = os.path.join(frontend_dir, "dist")
-if os.path.isdir(dist_dir):
-    serve_dir = dist_dir
-else:
-    serve_dir = frontend_dir
-app.mount("/assets", StaticFiles(directory=os.path.join(serve_dir, "assets"), html=True), name="assets")
 @app.get("/", response_class=HTMLResponse)
-async def root():
-    index_path = os.path.join(serve_dir, "index.html")
-    if os.path.exists(index_path):
-        return FileResponse(index_path)
-    return {"message": "✅ Theo AI (TechDisciples CLCC) API is online. Frontend not built yet."}
-@app.post("/ai-chat")
-async def ai_chat(data: QueryInput, x_api_key: str = Header(None)):
-    # Standard check for security
-    if x_api_key and x_api_key != API_SECRET:
-         logger.warning(f"Unauthorized access attempt with key: {x_api_key}")
-         # User didn't specify to keep this, but it's good practice.
-         # However, if I want to make it easy for the new frontend, I might relax this or update it.
-    query = data.query.strip()
-    session_id = data.session_id
-    memory = get_memory(session_id)
-    try:
-        # Check if query needs search (simple heuristic: if it asks for current events or facts outside theology)
-        # Or better: let the LLM decide. But for a simple implementation as requested:
-        # We can implement a simple check or just let GPT-OSS-120B handle it.
-        # But user said: "when the ai cannot answer... it should conduct a websearch"
-        # Constructing the chat history for context
-        history = memory.load_memory_variables({})["history"]
-        messages = [SystemMessage(content=SYSTEM_PROMPT)]
-        messages.extend(history)
-        messages.append(HumanMessage(content=query))
-        # Get AI response
-        response = llm.invoke(messages)
-        content = response.content
-        # If response indicates lack of knowledge (GPT often says "I don't know" or "I am not sure")
-        # we can trigger search.
-        if any(indicator in content.lower() for indicator in ["i don't know", "i'm not sure", "as an ai", "i don't have information"]):
-            logger.info(f"Triggering web search for: {query}")
-            search_results = search.run(query)
-            search_prompt = f"The user asked: {query}\nI found the following information via web search: {search_results}\n\nPlease provide a response following the Theo AI guidelines (Biblical focus, Nigerian perspective) based on this information."
-            messages.append(AIMessage(content=content)) # Store the "don't know" response
-            messages.append(HumanMessage(content=search_prompt))
-            response = llm.invoke(messages)
-            content = response.content
-        # Save to memory
-        memory.save_context({"input": query}, {"output": content})
-        return {"reply": content}
-    except Exception as e:
-        logger.error(f"⚠️ Model runtime error: {e}")
-        raise HTTPException(status_code=500, detail=f"Theo encountered an issue: {str(e)}")
-# Catch-all route to serve the SPA index.html for unknown paths
-@app.exception_handler(404)
-async def custom_404_handler(request: Request, exc: HTTPException):
-    index_path = os.path.join(serve_dir, "index.html")
-    if os.path.exists(index_path) and not request.url.path.startswith("/api"):
-        return FileResponse(index_path)
-    return HTMLResponse(content="Not Found", status_code=404)

 import os
+import uuid
 import logging
+import markdown
+from typing import List, Dict, Optional
+from fastapi import FastAPI, Request, Response, HTTPException
+from fastapi.responses import HTMLResponse, JSONResponse
 from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
 from fastapi.middleware.cors import CORSMiddleware
 from pydantic import BaseModel
 from dotenv import load_dotenv
 from langchain_openai import ChatOpenAI
+from langchain_core.prompts import ChatPromptTemplate
 from langchain_community.tools import DuckDuckGoSearchRun
 # =====================================================
 # CONFIGURATION
 # =====================================================
+load_dotenv()
 OPENROUTER_API_KEY = os.getenv("THEO_OPENROUTER_MODEL_KEY")
 MODEL_NAME = "openai/gpt-oss-120b:free"
 if not OPENROUTER_API_KEY:
+    logging.error("THEO_OPENROUTER_MODEL_KEY not found in environment")
 # =====================================================
 # LLM & TOOLS
 # =====================================================
 llm = ChatOpenAI(
+    model=MODEL_NAME,
     openai_api_key=OPENROUTER_API_KEY,
     openai_api_base="https://openrouter.ai/api/v1",
+    default_headers={
+        "HTTP-Referer": "https://techdisciples1-theo.hf.space/",
+        "X-Title": "Theo AI Support"
+    }
 )
 search = DuckDuckGoSearchRun()
 # =====================================================
+# SYSTEM PROMPT
 # =====================================================
 SYSTEM_PROMPT = """You are Theo — a warm, friendly, and deeply insightful Christian companion created by TechDisciples CLCC.
 TONE & STYLE:
+1. CHATTY & WARM: Speak like a loving friend or a caring elder. Use a conversational, "chatty" tone that feels personal and welcoming. Use phrases like "Shalom, Beloved" or "My dear friend".
+2. PARAGRAPHS: NEVER send a single wall of text. Break your thoughts into 2-4 short, readable paragraphs.
+3. NIGERIAN HEARTBEAT: Use simple, relatable English with a gentle Nigerian inflection.
 CORE GUIDELINES:
+1. BIBLICAL FOCUS: Root your wisdom and encouragement in the Holy Bible. Use scripture to offer hope.
+2. FORMATTING: Use Markdown (bolding for emphasis, short lists if needed).
+3. UNKNOWN TOPICS: If you lack specific knowledge, search for facts, then wrap that information in your warm Christian perspective.
 Identity: Theo
 Creators: TechDisciples CLCC
+Logo: [CLCC logo](/static/assets/logo.png)
+Context provided for current query:
+{reviews}
+User question: {question}
+"""
+prompt_template = ChatPromptTemplate.from_template(SYSTEM_PROMPT)
 # =====================================================
+# FASTAPI APP SETUP
 # =====================================================
+app = FastAPI(title="Theo AI")
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+# Static files and Templates
+app.mount("/static", StaticFiles(directory="static"), name="static")
+templates = Jinja2Templates(directory="templates")
+# In-memory chat history (mirrors Domino's logic)
+chat_sessions: Dict[str, List[Dict[str, str]]] = {}
 # =====================================================
+# LOGIC
 # =====================================================
+class ChatRequest(BaseModel):
+    question: str
+def get_ai_response(question: str) -> str:
+    try:
+        # First attempt (no reviews/context in this simple flow, but keeping structure)
+        reviews = "No specific context provided."
+        chain = prompt_template | llm
+        response = chain.invoke({"reviews": reviews, "question": question})
+        content = response.content
+        # Simple check if AI couldn't answer (Trigger search as requested)
+        fallback_phrases = ["i don't know", "i am not sure", "i couldn't find", "sorry, i can't", "i do not have information"]
+        if any(phrase in content.lower() for phrase in fallback_phrases):
+             logging.info(f"Triggering web search for: {question}")
+             search_results = search.run(question)
+             search_prompt = ChatPromptTemplate.from_template(
+                 "You are Theo (Christian companion). The user asked: {question}\n"
+                 "I found this information on the web: {search_results}\n"
+                 "Provide a warm, Christian response using this information, following Theo's guidelines."
+             )
+             search_chain = search_prompt | llm
+             response = search_chain.invoke({"question": question, "search_results": search_results})
+             content = response.content
+        return content
+    except Exception as e:
+        logging.error(f"AI Response failed: {e}")
+        return "I apologize, beloved, but I am having trouble connecting to the heavenly signals (our servers) right now. Please try again in a moment!"
 @app.get("/", response_class=HTMLResponse)
+async def index(request: Request):
+    device_id = request.cookies.get("device_id")
+    if not device_id:
+        device_id = str(uuid.uuid4())
+    if device_id not in chat_sessions:
+        chat_sessions[device_id] = []
+    response = templates.TemplateResponse("index.html", {"request": request, "chat_history": chat_sessions[device_id]})
+    response.set_cookie(key="device_id", value=device_id)
+    return response
+@app.post("/ask")
+async def ask(request: Request, data: ChatRequest):
+    device_id = request.cookies.get("device_id")
+    if not device_id:
+        device_id = str(uuid.uuid4())
+    if device_id not in chat_sessions:
+        chat_sessions[device_id] = []
+    question = data.question.strip()
+    if not question:
+        return JSONResponse({"error": "No question provided"}, status_code=400)
+    raw_response = get_ai_response(question)
+    # Format response with markdown for safety (same as Domino's behavior)
+    formatted_response = markdown.markdown(raw_response, extensions=['extra', 'tables'])
+    chat_sessions[device_id].append({
+        "user": question,
+        "bot": formatted_response
+    })
+    response = JSONResponse({"response": formatted_response})
+    response.set_cookie(key="device_id", value=device_id)
+    return response
+@app.post("/clear")
+async def clear_chat(request: Request):
+    device_id = request.cookies.get("device_id")
+    if device_id and device_id in chat_sessions:
+        chat_sessions[device_id] = []
+    response = JSONResponse({"status": "cleared"})
+    response.set_cookie(key="device_id", value=device_id)
+    return response
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=7860)

static/main.css ADDED Viewed

	@@ -0,0 +1,334 @@

+/* Theo AI - Premium Christian UI (Domino's Architecture) */
+:root {
+    --theo-green: #002B22;
+    --theo-teal: #00362B;
+    --theo-cream: #FDFBD4;
+    --theo-white: #FFFFFF;
+    --bg-gradient: radial-gradient(circle at top left, #00362B 0%, #002B22 100%);
+    --glass: rgba(0, 54, 43, 0.4);
+    --glass-border: rgba(253, 251, 212, 0.1);
+}
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}
+body {
+    height: 100vh;
+    width: 100vw;
+    background: var(--theo-green);
+    background-image: var(--bg-gradient);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+.chat-container {
+    width: 100%;
+    max-width: 900px;
+    height: 90vh;
+    background: var(--glass);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border-radius: 32px;
+    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    border: 1px solid var(--glass-border);
+    position: relative;
+}
+.chat-header {
+    background: rgba(0, 43, 34, 0.8);
+    padding: 20px 40px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid var(--glass-border);
+    z-index: 10;
+    backdrop-filter: blur(10px);
+}
+.chat-header h2 {
+    color: var(--theo-cream);
+    font-weight: 800;
+    font-size: 1.6rem;
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    letter-spacing: -0.02em;
+}
+.chat-header img {
+    height: 45px;
+    border-radius: 12px;
+    border: 1px solid var(--glass-border);
+}
+.chat-box {
+    flex: 1;
+    padding: 40px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    background: transparent;
+    scroll-behavior: smooth;
+}
+.chat-box::-webkit-scrollbar {
+    width: 6px;
+}
+.chat-box::-webkit-scrollbar-thumb {
+    background: rgba(253, 251, 212, 0.1);
+    border-radius: 10px;
+}
+.welcome-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: auto;
+    text-align: center;
+    max-width: 400px;
+}
+.welcome-icon {
+    font-size: 3rem;
+    margin-bottom: 20px;
+    background: var(--theo-cream);
+    width: 80px;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 24px;
+}
+.welcome-container h1 {
+    color: var(--theo-cream);
+    font-size: 2.2rem;
+    margin-bottom: 12px;
+    font-weight: 800;
+}
+.welcome-container p {
+    color: rgba(255, 255, 255, 0.6);
+    line-height: 1.6;
+}
+.message {
+    max-width: 80%;
+    padding: 18px 24px;
+    border-radius: 24px;
+    font-size: 1.05rem;
+    line-height: 1.6;
+    position: relative;
+    transition: all 0.3s ease;
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
+}
+.message.user {
+    align-self: flex-end;
+    background: #007055;
+    color: white;
+    border-bottom-right-radius: 4px;
+}
+.message.bot {
+    align-self: flex-start;
+    background: var(--theo-cream);
+    color: #002B22;
+    border-bottom-left-radius: 4px;
+    border-left: 6px solid #007055;
+}
+.message.bot img.bot-logo {
+    width: 20px;
+    height: 20px;
+    margin-right: 12px;
+    vertical-align: middle;
+    border-radius: 4px;
+}
+/* AI Thinking Animation */
+.thinking-container {
+    display: flex;
+    gap: 6px;
+    padding: 10px 0;
+}
+.thinking-dot {
+    width: 8px;
+    height: 8px;
+    background: #007055;
+    border-radius: 50%;
+    animation: bounce 1.4s infinite ease-in-out both;
+}
+.thinking-dot:nth-child(1) {
+    animation-delay: -0.32s;
+}
+.thinking-dot:nth-child(2) {
+    animation-delay: -0.16s;
+}
+@keyframes bounce {
+    0%,
+    80%,
+    100% {
+        transform: scale(0);
+        opacity: 0.3;
+    }
+    40% {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+.chat-input {
+    background: rgba(0, 43, 34, 0.8);
+    padding: 30px 40px;
+    display: flex;
+    gap: 20px;
+    align-items: flex-end;
+    border-top: 1px solid var(--glass-border);
+    backdrop-filter: blur(10px);
+}
+.chat-input textarea {
+    flex: 1;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--glass-border);
+    border-radius: 20px;
+    padding: 16px 24px;
+    font-size: 1rem;
+    color: white;
+    resize: none;
+    max-height: 150px;
+    outline: none;
+    transition: all 0.3s ease;
+}
+.chat-input textarea:focus {
+    border-color: var(--theo-cream);
+    background: rgba(255, 255, 255, 0.08);
+}
+.chat-input button {
+    background: var(--theo-cream);
+    color: #002B22;
+    border: none;
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    box-shadow: 0 10px 25px rgba(253, 251, 212, 0.2);
+    flex-shrink: 0;
+}
+.chat-input button svg path {
+    stroke: #002B22;
+}
+.chat-input button:hover {
+    transform: translateY(-4px) rotate(5deg);
+    box-shadow: 0 15px 35px rgba(253, 251, 212, 0.3);
+}
+.chat-input button:active {
+    transform: scale(0.9);
+}
+.branding {
+    position: absolute;
+    bottom: 8px;
+    left: 0;
+    right: 0;
+    text-align: center;
+    font-size: 9px;
+    font-weight: 800;
+    letter-spacing: 0.5em;
+    color: rgba(253, 251, 212, 0.15);
+    pointer-events: none;
+    text-transform: uppercase;
+}
+/* Markdown Styling */
+.message h1,
+.message h2,
+.message h3 {
+    margin: 12px 0 8px;
+    color: #007055;
+    font-weight: 800;
+}
+.message ul,
+.message ol {
+    margin-left: 24px;
+    margin-bottom: 12px;
+}
+.message li {
+    margin-bottom: 6px;
+}
+.message p {
+    margin-bottom: 12px;
+}
+.message strong {
+    color: #004d3b;
+    font-weight: 800;
+}
+/* Animations */
+.slide-in-bottom {
+    animation: slideIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
+}
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateY(30px) scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+@media (max-width: 640px) {
+    .chat-container {
+        height: 100vh;
+        border-radius: 0;
+    }
+    .chat-header {
+        padding: 15px 20px;
+    }
+    .chat-box {
+        padding: 20px;
+    }
+    .chat-input {
+        padding: 20px;
+    }
+}

templates/index.html ADDED Viewed

	@@ -0,0 +1,130 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Theo AI | Biblical Guidance</title>
+    <link rel="stylesheet" href="/static/main.css" />
+    <link rel="icon" href="/static/assets/logo.png" type="image/png">
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div class="chat-container">
+        <div class="chat-header">
+            <h2><img src="/static/assets/logo.png" alt="CLCC Logo"> Theo AI</h2>
+            <button onclick="clearChat()"
+                style="background: transparent; border: none; color: var(--theo-cream); cursor: pointer; font-weight: bold; opacity: 0.6;">Clear
+                Chat</button>
+        </div>
+        <div class="chat-box" id="chat-box">
+            {% for message in chat_history %}
+            <div class="message user slide-in-bottom">{{ message.user }}</div>
+            <div class="message bot slide-in-bottom">
+                <img src="/static/assets/logo.png" class="bot-logo" alt="Theo">
+                {{ message.bot|safe }}
+            </div>
+            {% endfor %}
+            {% if not chat_history %}
+            <div class="welcome-container slide-in-bottom">
+                <div class="welcome-icon">🕊️</div>
+                <h1>Shalom, Beloved</h1>
+                <p>I am Theo, your personal Christian companion. How may the Lord's wisdom guide you today?</p>
+            </div>
+            {% endif %}
+        </div>
+        <form id="chat-form" class="chat-input" autocomplete="off">
+            <textarea name="question" id="input" placeholder="How can Theo help you today?" required></textarea>
+            <button type="submit" id="send-btn" aria-label="Send">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="white" stroke-width="3" stroke-linecap="round"
+                        stroke-linejoin="round" />
+                </svg>
+            </button>
+        </form>
+        <div class="branding">CLCC - TECHDISCIPLES</div>
+    </div>
+    <script>
+        const chatForm = document.getElementById('chat-form');
+        const chatBox = document.getElementById('chat-box');
+        const input = document.getElementById('input');
+        const sendBtn = document.getElementById('send-btn');
+        // Auto-expand textarea
+        input.addEventListener('input', () => {
+            input.style.height = 'auto';
+            input.style.height = input.scrollHeight + 'px';
+        });
+        async function clearChat() {
+            if (confirm('Are you sure you want to clear our spiritual journey? (Chat history)')) {
+                await fetch('/clear', { method: 'POST' });
+                window.location.reload();
+            }
+        }
+        chatForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const question = input.value.trim();
+            if (!question) return;
+            // Remove welcome message if exists
+            const welcome = document.querySelector('.welcome-container');
+            if (welcome) welcome.remove();
+            // Add user message
+            const userMessage = document.createElement('div');
+            userMessage.classList.add('message', 'user', 'slide-in-bottom');
+            userMessage.textContent = question;
+            chatBox.appendChild(userMessage);
+            userMessage.scrollIntoView({ block: "end", behavior: "smooth" });
+            // Clear input immediately
+            input.value = '';
+            input.style.height = 'auto';
+            input.disabled = true;
+            sendBtn.disabled = true;
+            // Add bot message with thinking animation
+            const botMessage = document.createElement('div');
+            botMessage.classList.add('message', 'bot', 'slide-in-bottom');
+            botMessage.innerHTML = `
+        <img src="/static/assets/logo.png" class="bot-logo" alt="Theo">
+        <div class="thinking-container">
+            <div class="thinking-dot"></div>
+            <div class="thinking-dot"></div>
+            <div class="thinking-dot"></div>
+        </div>
+      `;
+            chatBox.appendChild(botMessage);
+            botMessage.scrollIntoView({ block: "start", behavior: "smooth" });
+            // Send POST request
+            try {
+                const res = await fetch('/ask', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ question })
+                });
+                const data = await res.json();
+                // Replace thinking animation with bot response
+                botMessage.innerHTML = `<img src="/static/assets/logo.png" class="bot-logo" alt="Theo"> ${data.response || data.error}`;
+                botMessage.scrollIntoView({ block: "start", behavior: "smooth" });
+            } catch (err) {
+                botMessage.innerHTML = `<img src="/static/assets/logo.png" class="bot-logo" alt="Theo"> I apologize, beloved, but I encountered a connection issue. Please try again.`;
+            } finally {
+                input.disabled = false;
+                sendBtn.disabled = false;
+                input.focus();
+            }
+        });
+    </script>
+</body>
+</html>