base.html•9.51 kB
<!DOCTYPE html>
<html lang="en" class="dark h-full">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}MCP Perplexity{% endblock %}</title>
<!-- HTMX for dynamic updates -->
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<!-- Custom JavaScript -->
<script>
function confirmDeleteChat(chatId) {
window.dialog.confirm({
title: 'Delete Chat',
message: 'Are you sure you want to delete this chat? This action cannot be undone.',
onConfirm: () => {
fetch(`/api/chat/${chatId}`, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json'
}
})
.then(response => {
if (!response.ok) {
throw new Error('Failed to delete chat');
}
// Remove the chat element from the DOM
const chatElement = document.getElementById(`chat-${chatId}`);
if (chatElement) {
chatElement.remove();
} else {
// If we're on the chat page, redirect to home
window.location.href = '/';
}
})
.catch(error => {
window.dialog.error({
title: 'Error',
message: 'An error occurred while deleting the chat.'
});
});
}
});
}
</script>
<!-- Custom styles with CSS variables -->
<style>
:root {
/* Tokyo Night Dark Theme Variables */
--tokyo-bg-default: #16161e;
--tokyo-bg-secondary: #1a1b26;
--tokyo-bg-accent: #24283b;
--tokyo-bg-message: #2f334d;
--tokyo-text-default: #cfc9c2;
--tokyo-text-secondary: #787c99;
--tokyo-accent-blue: #7dcfff;
--tokyo-accent-green: #9ece6a;
--tokyo-accent-red: #f7768e;
--tokyo-accent-yellow: #e0af68;
--tokyo-accent-purple: #bb9af7;
--tokyo-accent-orange: #ff9e64;
}
body {
background-color: var(--tokyo-bg-default);
color: var(--tokyo-text-default);
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* Think element styling */
details.think {
display: block;
border-left: 4px solid var(--tokyo-accent-blue);
border-radius: 0 8px 8px 0;
background-color: rgba(36, 40, 59, 0.6);
padding: 0.5rem 1rem;
margin: 1.5rem 0;
color: var(--tokyo-text-secondary);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
details.think:hover {
color: var(--tokyo-text-default);
border-left-color: var(--tokyo-accent-green);
background-color: rgba(36, 40, 59, 0.8);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}
details.think[open] {
color: var(--tokyo-text-default);
border-left-color: var(--tokyo-accent-purple);
background-color: rgba(36, 40, 59, 0.8);
}
details.think > summary {
outline: none;
font-weight: 600;
margin-bottom: 0.5rem;
cursor: pointer;
user-select: none;
color: var(--tokyo-accent-blue);
transition: color 0.2s ease;
list-style: none;
position: relative;
padding-left: 1.5rem;
}
details.think > summary::before {
content: "▶";
position: absolute;
left: 0;
font-size: 0.8rem;
top: 50%;
transform: translateY(-50%);
transition: transform 0.3s ease;
}
details.think[open] > summary::before {
transform: translateY(-50%) rotate(90deg);
}
details.think > summary:hover {
color: var(--tokyo-accent-green);
}
details.think[open] > summary {
color: var(--tokyo-accent-purple);
}
details.think .think-content {
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid rgba(120, 124, 153, 0.2);
animation: fadeIn 0.3s ease-in-out;
}
details.think .think-content * {
color: inherit;
}
details.think .think-content p {
margin-bottom: 0.5rem;
}
details.think .think-content pre {
background-color: rgba(26, 27, 38, 0.6);
border-radius: 4px;
padding: 0.75rem;
margin: 0.75rem 0;
}
@keyframes fadeIn {
0% { opacity: 0; transform: translateY(-10px); }
100% { opacity: 1; transform: translateY(0); }
}
.chat-container {
max-height: calc(100vh - 200px);
overflow-y: auto;
}
.message {
margin: 10px 0;
padding: 10px;
border-radius: 8px;
}
.message.assistant {
background-color: var(--tokyo-bg-message);
margin-right: 5%;
color: var(--tokyo-text-default);
}
.message.user {
background-color: var(--tokyo-bg-accent);
margin-left: 5%;
color: var(--tokyo-text-default);
}
/* Scrollbar styling */
.chat-container::-webkit-scrollbar {
width: 8px;
}
.chat-container::-webkit-scrollbar-track {
background: var(--tokyo-bg-secondary);
}
.chat-container::-webkit-scrollbar-thumb {
background: var(--tokyo-text-secondary);
border-radius: 4px;
}
.chat-container::-webkit-scrollbar-thumb:hover {
background: var(--tokyo-accent-blue);
}
/* Navigation and footer styling */
nav,
footer {
background-color: var(--tokyo-bg-secondary);
color: var(--tokyo-text-default);
}
a {
color: var(--tokyo-accent-blue);
}
a:hover {
color: var(--tokyo-accent-green);
}
.message {
margin: 10px 0;
padding: 10px;
border-radius: 8px;
width: 100%;
max-width: 100%;
overflow-wrap: break-word;
word-wrap: break-word;
}
</style>
<!-- Tailwind CSS for styling -->
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.tailwindcss.com?plugins=typography"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
tokyo: {
bg: {
DEFAULT: 'var(--tokyo-bg-default)',
secondary: 'var(--tokyo-bg-secondary)',
accent: 'var(--tokyo-bg-accent)',
message: 'var(--tokyo-bg-message)'
},
text: {
DEFAULT: 'var(--tokyo-text-default)',
secondary: 'var(--tokyo-text-secondary)'
},
accent: {
blue: 'var(--tokyo-accent-blue)',
green: 'var(--tokyo-accent-green)',
red: 'var(--tokyo-accent-red)',
yellow: 'var(--tokyo-accent-yellow)',
purple: 'var(--tokyo-accent-purple)',
orange: 'var(--tokyo-accent-orange)'
}
}
},
typography: {
DEFAULT: {
css: {
maxWidth: 'none',
width: '100%',
color: 'var(--tokyo-text-default)',
overflow: 'hidden',
h1: { color: 'var(--tokyo-text-default)' },
h2: { color: 'var(--tokyo-text-default)' },
h3: { color: 'var(--tokyo-text-default)' },
h4: { color: 'var(--tokyo-text-default)' },
p: {
color: 'var(--tokyo-text-default)',
whiteSpace: 'pre-wrap',
wordBreak: 'break-word',
overflow: 'hidden',
width: '100%',
maxWidth: '100%'
},
'pre': {
backgroundColor: 'var(--tokyo-bg-accent)',
overflowX: 'auto',
borderRadius: '0.5rem',
padding: '1rem',
margin: '0.5rem 0',
width: '100%',
maxWidth: '100%',
fontSize: '0.875em',
position: 'relative',
whiteSpace: 'pre-wrap'
},
'code': {
wordBreak: 'break-word',
whiteSpace: 'pre-wrap'
},
'@keyframes fadeIn': {
'0%': { opacity: 0, transform: 'translateY(-10px)' },
'100%': { opacity: 1, transform: 'translateY(0)' }
}
}
}
}
}
}
}
</script>
</head>
<body class="dark:bg-tokyo-bg min-h-screen">
<nav class="shadow-sm dark:bg-tokyo-bg-secondary">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-12">
<div class="flex">
<div class="flex-shrink-0 flex items-center">
<a href="/" class="text-lg font-bold dark:text-tokyo-text">
MCP Perplexity
</a>
</div>
</div>
</div>
</div>
</nav>
<main class="container mx-auto px-4 sm:px-6 lg:px-8 py-4 flex-grow">
{% block content %}{% endblock %}
</main>
<footer class="border-t dark:bg-tokyo-bg-secondary dark:border-tokyo-bg-accent mt-auto">
<div class="max-w-7xl mx-auto py-2 px-4 sm:px-6 lg:px-8">
<p class="text-center text-sm dark:text-tokyo-text-secondary">
<a href="https://github.com/daniel-lxs" class="text-tokyo-accent-blue">Made with ❤️</a>
</p>
</div>
</footer>
{% include '_dialog.html' %}
</body>
</html>