Home
Maxim
Dionysus AI Chat

Dionysus AI Chat

This tailwind example is contributed by Maxim, on 26-Sep-2025. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Maxim

547

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dionysus AI Chat</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    <script src="https://cdn.jsdelivr.net/npm/marked@16.3.0/lib/marked.umd.min.js"></script>
    <style>
        .highlight-message { 
            animation: slideInFade 0.5s ease-out; 
        }
        
        @keyframes slideInFade {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .glass-effect {
            backdrop-filter: blur(10px);
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .chat-bubble-user {
            background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
            box-shadow: 0 10px 30px rgba(236, 72, 153, 0.3);
        }
        
        .chat-bubble-assistant {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }
        
        .typing-animation {
            animation: pulse 2s infinite;
        }
        
        .gradient-border {
            background: linear-gradient(45deg, #ec4899, #be185d, #9333ea, #7c3aed);
            background-size: 400% 400%;
            animation: gradientShift 3s ease infinite;
        }
        
        @keyframes gradientShift {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }
        
        .send-button {
            background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
            transition: all 0.3s ease;
        }
        
        .send-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(236, 72, 153, 0.4);
        }
        
        .send-button:active {
            transform: translateY(0);
        }
        
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: linear-gradient(135deg, #ec4899, #be185d);
            border-radius: 10px;
        }
        
        .input-glow:focus {
            box-shadow: 0 0 20px rgba(236, 72, 153, 0.3);
        }
    </style>
</head>
<body class="bg-gradient-to-br from-purple-900 via-pink-900 to-rose-900 min-h-screen p-4">
    <div class="max-w-4xl mx-auto">
        <div x-data="aiChat('sample search query')" class="backdrop-blur-lg bg-white/10 rounded-3xl border border-white/20 shadow-2xl overflow-hidden">
            
            <div class="relative overflow-hidden">
                <div class="absolute inset-0 bg-gradient-to-r from-pink-500 via-rose-500 to-purple-600 opacity-90"></div>
                <div class="absolute inset-0 bg-gradient-to-br from-transparent via-white/10 to-transparent"></div>
                <div class="relative p-6">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-4">
                            <div class="p-3 bg-white/20 rounded-2xl backdrop-blur-sm">
                                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-4l-4 4z"></path>
                                </svg>
                            </div>
                            <div>
                                <h3 class="text-2xl font-bold text-white">Dionysus AI</h3>
                                <p class="text-white/80 text-sm">Expert in alcohol, cocktails & beverages</p>
                            </div>
                        </div>
                        <div class="hidden sm:flex items-center space-x-2">
                            <div class="px-3 py-1 bg-white/20 rounded-full backdrop-blur-sm">
                                <span class="text-white/90 text-xs font-medium">AI Powered</span>
                            </div>
                            <div class="w-3 h-3 bg-green-400 rounded-full animate-pulse shadow-lg shadow-green-400/50"></div>
                        </div>
                    </div>
                </div>
            </div>

<div class="h-96 overflow-y-auto p-6 space-y-4 custom-scrollbar" x-ref="messagesContainer" style="background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);">
                <template x-for="message in messages" :key="message.id">
                    <div class="flex" :class="message.role === 'user' ? 'justify-end' : 'justify-start'" :data-message-id="message.id">
                        <div class="max-w-xs lg:max-w-md xl:max-w-lg">
                            <div class="relative group">
                                <div class="px-6 py-4 rounded-3xl" 
                                     :class="message.role === 'user' ? 'chat-bubble-user text-white' : 'chat-bubble-assistant text-gray-800'">
                                    <div class="text-sm leading-relaxed" x-html="message.content"></div>
                                    <div class="text-xs mt-3 opacity-70 flex items-center space-x-2">
                                        <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path>
                                        </svg>
                                        <span x-text="message.timestamp"></span>
                                    </div>
                                </div>
                                
                                
                                <template x-if="message.role === 'assistant' && message.showCopy">
                                    <button 
                                        @click="copyMessage(message.content)"
                                        class="absolute -top-2 -right-2 p-2 bg-white/90 hover:bg-white text-gray-600 hover:text-gray-800 rounded-full shadow-lg opacity-0 group-hover:opacity-100 transition-all duration-300 transform hover:scale-110"
                                        aria-label="Copy message"
                                    >
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
                                        </svg>
                                    </button>
                                </template>
                            </div>
                        </div>
                    </div>
                </template>

<div x-show="isLoading" class="flex justify-start">
                    <div class="max-w-xs">
                        <div class="chat-bubble-assistant px-6 py-4 rounded-3xl">
                            <div class="flex items-center space-x-3">
                                <div class="flex space-x-1">
                                    <div class="w-2 h-2 bg-gradient-to-r from-pink-500 to-purple-500 rounded-full animate-bounce"></div>
                                    <div class="w-2 h-2 bg-gradient-to-r from-pink-500 to-purple-500 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
                                    <div class="w-2 h-2 bg-gradient-to-r from-pink-500 to-purple-500 rounded-full animate-bounce" style="animation-delay: 0.4s"></div>
                                </div>
                                <span class="text-sm text-gray-600 font-medium typing-animation">Dionysus is thinking...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

<div class="p-6 border-t border-white/10 backdrop-blur-sm" style="background: rgba(255,255,255,0.05);">
                <form @submit.prevent="sendMessage" class="flex space-x-4">
                    <div class="flex-1 relative">
                        <input 
                            type="text" 
                            x-model="currentMessage"
                            :disabled="isLoading"
                            placeholder="Ask me anything about alcohol, cocktails, brands, recipes..."
                            class="w-full px-6 py-4 bg-white/90 backdrop-blur-sm border border-white/20 rounded-2xl focus:outline-none focus:ring-2 focus:ring-pink-500/50 focus:border-transparent disabled:bg-gray-100/50 disabled:cursor-not-allowed transition-all duration-300 input-glow text-gray-800 placeholder-gray-500"
                        >
                        <div class="absolute inset-0 rounded-2xl bg-gradient-to-r from-pink-500/20 to-purple-500/20 opacity-0 transition-opacity duration-300 pointer-events-none" :class="{'opacity-100': currentMessage.trim()}"></div>
                    </div>
                    
                    <button 
                        type="submit"
                        :disabled="isLoading || !currentMessage.trim()"
                        class="send-button px-6 py-4 text-white rounded-2xl disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none transition-all duration-300 flex items-center justify-center min-w-[4rem] shadow-lg"
                    >
                        <svg x-show="!isLoading" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
                        </svg>
                        <svg x-show="isLoading" class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                    </button>
                </form>
                
                <div class="flex items-center justify-between mt-4">
                    <p class="text-xs text-white/60 flex items-center space-x-2">
                        <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z" clip-rule="evenodd"></path>
                        </svg>
                        <span>Press Enter to send</span>
                    </p>
                    <div class="flex items-center space-x-2 text-xs text-white/60">
                        <div class="flex space-x-1">
                            <div class="w-1 h-1 bg-green-400 rounded-full animate-pulse"></div>
                            <div class="w-1 h-1 bg-green-400 rounded-full animate-pulse" style="animation-delay: 0.5s"></div>
                            <div class="w-1 h-1 bg-green-400 rounded-full animate-pulse" style="animation-delay: 1s"></div>
                        </div>
                        <span>AI Optimized</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

Related Examples

rotate card
rotate card

Author:
Tanvir Hasan Bappy (Tanvir)

1 year ago

1.7k
default template

Author:
Anonymous

7 months ago

446
navigation header
responsive navigation header

Author:
Abid Ullah

1 year ago

2.5k
htmlcss0

Author:
Anonymous

6 months ago

543
Food Ordering Dashboard
A responsive user interface for selecting and ordering your favorite meals. The dashboard allows users to browse food categories, view dish details, and place orders with ease.

Author:
Muhammad Umair Arshad

7 months ago

1.1k
Apple Dock Navigation Bar

Author:
Cristian

1 year ago

1.9k
Your upside-down text

Author:
Isabella Kowalski

3 years ago

13k
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

8 months ago

1.3k
profil_eleve.html

Author:
Anonymous

2 months ago

132
Moving Background Animation

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

11 months ago

3.1k
Services

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

2k
nft card
nft card

Author:
5upreme505

1 year ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components