mirror of
https://github.com/m4rcel-lol/custom-discord-ai-chatbot-site.git
synced 2025-12-06 10:53:58 +05:30
feat: Improve loading, error handling, and console output
Adds a loading animation fade-in and reduces initial loading time. Suppresses Tailwind CDN production warnings in the console for a cleaner developer experience. Enhances error messages for missing API keys and API communication failures, providing more specific guidance. Removes redundant content from README.md and updates the banner image reference. Sets body overflow to hidden to prevent unwanted scrolling and ensures the application handles its own scroll.
This commit is contained in:
m5rcel { Marcel }
11
App.tsx
11
App.tsx
@@ -12,24 +12,23 @@ const App: React.FC = () => {
|
||||
// Simulate initial asset loading
|
||||
const timer = setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
}, 1500);
|
||||
}, 1000);
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="h-screen w-screen bg-[#313338] flex flex-col items-center justify-center">
|
||||
<div className="relative w-24 h-24 mb-4 animate-bounce">
|
||||
<div className="h-screen w-screen bg-[#313338] flex flex-col items-center justify-center animate-fade-in">
|
||||
<div className="relative w-24 h-24 mb-4">
|
||||
{/* Simple Logo Placeholder */}
|
||||
<div className="w-20 h-20 bg-[#5865F2] rounded-2xl flex items-center justify-center mx-auto shadow-xl">
|
||||
<div className="w-20 h-20 bg-[#5865F2] rounded-2xl flex items-center justify-center mx-auto shadow-xl animate-bounce">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19.25 4.5H4.75C3.50736 4.5 2.5 5.50736 2.5 6.75V17.25C2.5 18.4926 3.50736 19.5 4.75 19.5H19.25C20.4926 19.5 21.5 18.4926 21.5 17.25V6.75C21.5 5.50736 20.4926 4.5 19.25 4.5Z" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M8.5 10L12 14L15.5 10" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-[#dbdee1] font-bold text-lg animate-pulse">Starting...</div>
|
||||
<div className="text-[#949ba4] text-sm mt-2">Connecting to Discord-Style Interface</div>
|
||||
<div className="text-[#dbdee1] font-bold text-lg animate-pulse">Starting Discord AI...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
132
README.md
132
README.md
@@ -1,130 +1,20 @@
|
||||
<div align="center">
|
||||
|
||||
<!-- PROJECT LOGO OR BANNER -->
|
||||
<!-- Replace the src below with a screenshot of your chat interface or a custom banner -->
|
||||
<img src="https://raw.githubusercontent.com/m4rcel-lol/assets/13ebd5bfa7abe5ee591107b9a7b411f3e3ae2d13/Gemini-API-IoT-banner_1.original.png" alt="Discord AI Chat Banner" width="100%" style="border-radius: 10px; border: 2px solid #2b2d31;" />
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
# 🤖 Discord-Style Gemini AI Temporary Chatbot Page
|
||||
|
||||
**A pixel-perfect recreation of the modern Discord UI, powered by Google's Gemini AI. Messages do not get saved after refreshing the page.**
|
||||
|
||||
<p>
|
||||
<a href="#-key-features">Key Features</a> •
|
||||
<a href="#-tech-stack">Tech Stack</a> •
|
||||
<a href="#-getting-started">Getting Started</a> •
|
||||
<a href="#-configuration">Configuration</a>
|
||||
</p>
|
||||
|
||||
<!-- BADGES -->
|
||||
<p>
|
||||
<img src="https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB" alt="React" />
|
||||
<img src="https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript" />
|
||||
<img src="https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white" alt="Tailwind" />
|
||||
<img src="https://img.shields.io/badge/Google_Gemini-8E75B2?style=for-the-badge&logo=google&logoColor=white" alt="Gemini" />
|
||||
</p>
|
||||
<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
|
||||
</div>
|
||||
|
||||
---
|
||||
# Run and deploy your AI Studio app
|
||||
|
||||
## 📖 About The Project
|
||||
This contains everything you need to run your app locally.
|
||||
|
||||
This project is a fully functional web-based chat interface that meticulously recreates the look and feel of Discord's Direct Message (DM) UI. It connects to the **Google Gemini API** to provide an intelligent, conversational AI bot that acts just like a user in your DMs.
|
||||
View your app in AI Studio: https://ai.studio/apps/drive/1--JasS0nNpTl-PmY3TkDkX8eL8Omwi5n
|
||||
|
||||
It features the latest Discord design trends, including the dark theme palette, rounded UI elements, "Nitro" style gradient profiles, and custom role badges.
|
||||
## Run Locally
|
||||
|
||||
## ✨ Key Features
|
||||
**Prerequisites:** Node.js
|
||||
|
||||
* **🎨 Authentic UI/UX:** Custom-built components mimicking Discord's Chat, Sidebar, and Profile views.
|
||||
* **🧠 Powered by Gemini:** Real-time conversational AI using the `gemini-2.5-flash` model.
|
||||
* **💎 Premium Aesthetics:**
|
||||
* Nitro-style animated gradient themes for profiles.
|
||||
* Full-screen User Profile Modals with banners.
|
||||
* Mini-profile popouts on click.
|
||||
* **📝 Rich Text Support:** Full Markdown rendering (Bold, Italic, Code Blocks) for AI responses.
|
||||
* **🏷️ Custom Badges:** Includes high-quality assets for "Verified AI", "Staff", "Bug Hunter", and "Nitro" badges.
|
||||
* **⚡ Responsive Design:** Mobile-friendly layout (Sidebar collapses on smaller screens).
|
||||
* **🎬 Smooth Animations:** Custom CSS keyframes for fade-ins, scale-ups, and slide transitions.
|
||||
|
||||
## 📸 Screenshots
|
||||
|
||||
<!-- Replace these links with actual screenshots of your app -->
|
||||
|
||||
| **Main Chat Interface** | **Profile Popout (Nitro Style)** |
|
||||
|:---:|:---:|
|
||||
| <img src="https://raw.githubusercontent.com/m4rcel-lol/assets/main/Screenshot_1.png" alt="Main Chat" width="400"/> | <img src="https://raw.githubusercontent.com/m4rcel-lol/assets/main/Screenshot_2.png" alt="Mini Profile" width="400"/> |
|
||||
|
||||
| **Full Profile Modal** | **Sidebar Preview** |
|
||||
|:---:|:---:|
|
||||
| <img src="https://raw.githubusercontent.com/m4rcel-lol/assets/main/Screenshot_4.png" alt="Full Profile" width="400"/> | <img src="https://raw.githubusercontent.com/m4rcel-lol/assets/main/Screenshot_3.png" alt="Sidebar" width="400"/> |
|
||||
|
||||
## 🛠️ Tech Stack
|
||||
|
||||
* **Frontend Framework:** React 19
|
||||
* **Language:** TypeScript
|
||||
* **Styling:** Tailwind CSS + Vanilla CSS (for custom scrollbars & animations)
|
||||
* **Icons:** Lucide React
|
||||
* **AI Integration:** @google/genai SDK
|
||||
* **Markdown:** react-markdown
|
||||
|
||||
## 🚀 Getting Started
|
||||
|
||||
To get a local copy up and running, follow these simple steps.
|
||||
|
||||
### Prerequisites
|
||||
|
||||
* Node.js (v18 or higher)
|
||||
* npm or yarn
|
||||
|
||||
### Installation
|
||||
|
||||
1. **Clone the repo**
|
||||
```sh
|
||||
git clone https://github.com/yourusername/discord-ai-chat.git
|
||||
```
|
||||
2. **Install NPM packages**
|
||||
```sh
|
||||
npm install
|
||||
```
|
||||
3. **Set up your API Key**
|
||||
* Create a `.env` file in the root directory.
|
||||
* Add your Google Gemini API key:
|
||||
```env
|
||||
API_KEY=your_google_gemini_api_key_here
|
||||
```
|
||||
*(Note: You can get an API key from [Google AI Studio](https://aistudio.google.com/))*
|
||||
|
||||
4. **Run the application**
|
||||
```sh
|
||||
npm run dev
|
||||
```
|
||||
|
||||
## 🎨 Customization
|
||||
|
||||
You can easily customize the bot's personality or the UI assets:
|
||||
|
||||
* **Bot Persona:** Edit the `systemInstruction` in `services/geminiService.ts`.
|
||||
* **Images/Assets:** Updated URLs in `components/ChatArea.tsx` and `components/UserProfileSidebar.tsx`.
|
||||
* **Badges:** Add or remove badges in `components/Badges.tsx`.
|
||||
|
||||
## 🤝 Contributing
|
||||
|
||||
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
|
||||
|
||||
1. Fork the Project
|
||||
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
|
||||
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
|
||||
4. Push to the Branch (`git push origin feature/AmazingFeature`)
|
||||
5. Open a Pull Request
|
||||
|
||||
## 📝 License
|
||||
|
||||
Distributed under the MIT License, however it may be a risk to use it, since it mimics the real look of Discord and may get you in trouble. See `LICENSE` for more information.
|
||||
|
||||
---
|
||||
|
||||
<div align="center">
|
||||
<p>Made with ❤️ and patience by m5rcel using React & Gemini</p>
|
||||
</div>
|
||||
1. Install dependencies:
|
||||
`npm install`
|
||||
2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
|
||||
3. Run the app:
|
||||
`npm run dev`
|
||||
|
||||
12
index.html
12
index.html
@@ -4,6 +4,16 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Discord-Style AI Chat</title>
|
||||
<!-- Script to suppress Tailwind CDN production warning for a cleaner console -->
|
||||
<script>
|
||||
(function() {
|
||||
var originalWarn = console.warn;
|
||||
console.warn = function(...args) {
|
||||
if (args[0] && typeof args[0] === 'string' && args[0].includes('cdn.tailwindcss.com')) return;
|
||||
originalWarn.apply(console, args);
|
||||
};
|
||||
})();
|
||||
</script>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
@@ -11,6 +21,7 @@
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: #313338;
|
||||
color: #dbdee1;
|
||||
overflow: hidden; /* Prevent body scroll, let app handle it */
|
||||
}
|
||||
/* Custom Scrollbar to match Discord feel */
|
||||
::-webkit-scrollbar {
|
||||
@@ -123,5 +134,6 @@
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="./index.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -4,9 +4,12 @@ import { Message } from '../types';
|
||||
let chatSession: any = null;
|
||||
|
||||
const getClient = () => {
|
||||
// Ensure process.env.API_KEY is available.
|
||||
// If running in a browser without a bundler that polyfills process, this might fail unless configured.
|
||||
const apiKey = process.env.API_KEY;
|
||||
|
||||
if (!apiKey) {
|
||||
console.error("API Key not found");
|
||||
console.error("Gemini API Key is missing. Ensure process.env.API_KEY is set.");
|
||||
return null;
|
||||
}
|
||||
return new GoogleGenAI({ apiKey });
|
||||
@@ -17,13 +20,9 @@ export const sendMessageToGemini = async (
|
||||
previousMessages: Message[]
|
||||
): Promise<string> => {
|
||||
const ai = getClient();
|
||||
if (!ai) return "Error: API Key is missing. Please check your configuration.";
|
||||
if (!ai) return "Error: API Key is missing. Check the console for details.";
|
||||
|
||||
try {
|
||||
// We maintain a simple local chat session if possible, or create new one
|
||||
// Ideally, we'd persist the `chatSession` object, but for this stateless example
|
||||
// we can re-hydrate somewhat or just use the persistent variable module-level.
|
||||
|
||||
if (!chatSession) {
|
||||
chatSession = ai.chats.create({
|
||||
model: 'gemini-2.5-flash',
|
||||
@@ -37,6 +36,6 @@ export const sendMessageToGemini = async (
|
||||
return response.text;
|
||||
} catch (error) {
|
||||
console.error("Gemini API Error:", error);
|
||||
return "I'm having trouble connecting to the mainframe right now. Try again later!";
|
||||
return "I'm having trouble connecting to the servers right now. Please check your network or API key configuration.";
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user