m/custom-discord-ai-chatbot-site
1
0
Fork 0
mirror of https://github.com/m4rcel-lol/custom-discord-ai-chatbot-site.git synced 2025-12-06 19:03:58 +05:30
Code Issues Packages Projects Releases Wiki Activity

feat: Initialize Discord-style AI chat project

Browse Source 
Sets up the project structure, dependencies, and basic configuration for a Discord-inspired AI chat application. Includes placeholder components and types, Vite configuration for local development, and basic styling for a dark theme and custom scrollbars. Integrates Gemini API key handling and a service for sending messages.
This commit is contained in:
m5rcel { Marcel }
2025-12-04 21:13:35 +01:00
parent 2e3ea2d71d
commit cb1f66dbff
18 changed files with 1130 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
index.html Normal file
View File

@@ -0,0 +1,127 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Discord-Style AI Chat</title>
<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>
body {
font-family: 'Inter', sans-serif;
background-color: #313338;
color: #dbdee1;
}
/* Custom Scrollbar to match Discord feel */
::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: #2b2d31;
}
::-webkit-scrollbar-thumb {
background-color: #1a1b1e;
border-radius: 4px;
}
::-webkit-scrollbar-track {
background-color: #2b2d31;
}
/* Animations */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes scaleIn {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
animation: fadeIn 0.2s ease-out forwards;
}
.animate-scale-in {
animation: scaleIn 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.animate-slide-up {
animation: slideUp 0.3s ease-out forwards;
}
/* Markdown Styles */
.markdown-content strong {
font-weight: 700;
color: #f2f3f5;
}
.markdown-content em {
font-style: italic;
}
.markdown-content u {
text-decoration: underline;
}
.markdown-content a {
color: #00A8FC;
text-decoration: none;
}
.markdown-content a:hover {
text-decoration: underline;
}
.markdown-content code {
background-color: #2b2d31;
padding: 0.2em 0.4em;
border-radius: 3px;
font-family: monospace;
font-size: 0.85em;
}
.markdown-content pre {
background-color: #2b2d31;
padding: 1em;
border-radius: 4px;
margin-top: 0.5em;
margin-bottom: 0.5em;
overflow-x: auto;
border: 1px solid #1e1f22;
}
.markdown-content pre code {
background-color: transparent;
padding: 0;
border-radius: 0;
color: #dbdee1;
font-size: 0.9em;
}
.markdown-content blockquote {
border-left: 4px solid #4e5058;
padding-left: 1em;
margin: 0.5em 0;
color: #949ba4;
}
.markdown-content ul {
list-style-type: disc;
padding-left: 1.5em;
margin: 0.5em 0;
}
.markdown-content ol {
list-style-type: decimal;
padding-left: 1.5em;
margin: 0.5em 0;
}
</style>
<script type="importmap">
{
"imports": {
"react": "https://aistudiocdn.com/react@^19.2.1",
"react-dom/": "https://aistudiocdn.com/react-dom@^19.2.1/",
"react/": "https://aistudiocdn.com/react@^19.2.1/",
"@google/genai": "https://aistudiocdn.com/@google/genai@^1.31.0",
"lucide-react": "https://aistudiocdn.com/lucide-react@^0.555.0",
"react-markdown": "https://aistudiocdn.com/react-markdown@^10.1.0"
}
}
</script>
</head>
<body>
<div id="root"></div>
</body>
</html>