chatbot

is my chatbot

This tailwind example is contributed by Omer fils ELENGA, on 07-Nov-2025. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Omer fils ELENGA

395

Fork Fullscreen

@keyframes laserBorder {
            0% {
              background-position: 0% 50%;
            }
            100% {
              background-position: 300% 50%;
            }
          }

/* Effet de chargement "laser" */
          .typing-dot {
            width: 8px;
            height: 8px;
            background: #1769c2;
            border-radius: 50%;
            animation: typingPulse 1.4s infinite ease-in-out;
          }
          .typing-dot:nth-child(1) {
            animation-delay: 0s;
          }
          .typing-dot:nth-child(2) {
            animation-delay: 0.2s;
          }
          .typing-dot:nth-child(3) {
            animation-delay: 0.4s;
          }

@keyframes typingPulse {
            0%,
            100% {
              transform: scale(1);
              opacity: 1;
            }
            50% {
              transform: scale(1.2);
              opacity: 0.4;
            }
          }

/* Effet laser sur réponse finale */
          @keyframes laserSweep {
            0% {
              width: 0%;
              left: 0;
            }
            100% {
              width: 100%;
              left: 0;
            }
          }
          .laser-reveal {
            position: relative;
            opacity: 0;
            animation: laserReveal 0.6s forwards;
          }
          .laser-reveal::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(
              90deg,
              transparent,
              #178cbe,
              #1769c2,
              transparent
            );
            animation: laserSweep 1s forwards 0.3s;
          }
          @keyframes laserReveal {
            to {
              opacity: 1;
            }
          }
</style>
   
  
    <div x-data="{ open: false }" class="fixed bottom-6 right-6 z-50">
      <button
        @click="open = true"
        class="w-14 h-14 rounded-full bg-gradient-to-r from-[#178cbe] to-[#1769c2] flex items-center justify-center shadow-lg hover:shadow-xl transition-shadow"
        aria-label="Ouvrir le chat IA">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="w-6 h-6 text-white"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor">
          <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-5l-5 5v-5z" />
        </svg>
      </button>

<div
        x-show="open"
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0 scale-90"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-90"
        class="absolute bottom-20 right-0 w-[95vw] max-w-xs md:max-w-md bg-[#050e16] rounded-2xl shadow-2xl overflow-hidden laser-border"
        @click.outside="open = false"
        role="dialog"
        aria-modal="true">
        
        <div
          class="px-4 py-3 bg-gray-900 border-b border-gray-800 flex items-center gap-2">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-5 h-5 text-[#1769c2]"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor">
            <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-5l-5 5v-5z" />
          </svg>
          <h3 class="text-white font-medium">Assistant Vision-It</h3>
        </div>

<div
          x-data="{
      messages: [
        { text: 'Bonjour ! 👋 Comment puis-je vous aider ?', sender: 'bot' }
      ],
      input: '',
      isTyping: false,
      sendMessage() {
        if (!this.input.trim()) return;
        this.messages.push({ text: this.input, sender: 'user' });
        this.input = '';
        this.isTyping = true;

setTimeout(() => {
          this.isTyping = false;
          const replies = [
            'Merci pour votre message ! Vision-It vous accompagne dans votre transformation numérique.',
            'Nos experts reviendront vers vous très vite.',
            '💡 Intéressé par une solution sur mesure ? Parlez-nous de votre projet !'
          ];
          this.messages.push({ 
            text: replies[Math.floor(Math.random() * replies.length)], 
            sender: 'bot' 
          });
        }, 1800);
      }
    }"
          class="flex flex-col h-80">
          <div class="flex-1 p-4 overflow-y-auto space-y-3">
            <template x-for="msg in messages" :key="msg.text">
              <div
                :class="{
            'ml-auto bg-[#1769c2] text-white rounded-2xl px-4 py-2 max-w-[80%]': msg.sender === 'user',
            'mr-auto bg-gray-800 text-gray-200 rounded-2xl px-4 py-2 max-w-[80%] laser-reveal': msg.sender === 'bot'
          }"
                x-text="msg.text"></div>
            </template>
            <div x-show="isTyping" class="mr-auto flex gap-1">
              <div class="typing-dot"></div>
              <div class="typing-dot"></div>
              <div class="typing-dot"></div>
            </div>
          </div>

<div class="border-t border-gray-800 p-3 flex gap-2">
            <input
              type="text"
              x-model="input"
              @keyup.enter="sendMessage()"
              placeholder="Écrivez un message..."
              class="flex-1 bg-gray-800 text-white rounded-full px-4 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#1769c2]" />
            <button
              @click="sendMessage()"
              class="bg-[#1769c2] w-10 h-10 rounded-full flex items-center justify-center text-white">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="w-4 h-4"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor">
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>

Related Examples

Services
This Services page design includes: 1. Responsive layout using Tailwind CSS grid system 2. Indigo-800 and Blue-900 color scheme 3. Dark mode support 4. Header with navigation 5. Six service cards with icons, titles, and descriptions 6. Footer with copyright information 7. Subtle animations and transitions 8. Accessibility considerations (proper heading structure, color contrast) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a white background in light mode and dark gray in dark mode - Service cards have a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - Icons use the Indigo-800 color (Indigo-400 in dark mode) for consistency - Each service card has a hover effect that scales it up slightly - Service cards fade in with a staggered delay for a smooth entrance - Dark mode is automatically applied based on system preferences - The design is fully responsive, adjusting from 1 to 3 columns based on screen size This design provides a clean, professional look for a services page while incorporating the requested color scheme and maintaining good usability across different devices and color modes.

Author:
nejaa badr

1 year ago

2.5k
5 Different Style of Button
Gradient Button outline button neon button Sliding Background pulsing Button

Author:
KULDEEP

8 months ago

468
simple responsive blog layout with sidebar

Author:
Isabella Kowalski

3 years ago

9.6k
Snake Game tailwind
snake game

Author:
QQ-VVN

9 months ago

904
Image Gallery with Alpine.Js

Author:
Maxim

1 year ago

1.2k
Coffee & Tea
Coffee: A brewed drink prepared from roasted seeds, called coffee beans, of the coffee plant. Tea: An agricultural product of the leaves, leaf buds, and internodes of various cultivars and sub-varieties of the Camellia sinensis plant, processed and cured using various methods.

Author:
Augustin

9 months ago

999
Automation that delivers real results
We design high modern UI

Author:
Alif Bima Pradana

3 weeks ago

23
Todo List
A simple tool to track tasks: add, edit, complete, or delete items to stay organized daily.

Author:
Muzammil Riaz

9 months ago

932
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

9 months ago

1.2k
Basic Terms of Service Page
Basic Terms of Service Page setup for light and dark mode. Repeat the sections to add as many as you need.

Author:
Monica D.

1 year ago

3.5k
super admin
super admin

Author:
Tanvir Hasan Bappy (Tanvir)

11 months ago

1.1k
responsive home page
the best home page

Author:
irahoza daniel

9 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components