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

294

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

A Code Master Academy
A Code Master Academy – Empowering the Next Generation of Tech Leaders in Rwanda 👨‍💻 I'm Acode Master, the founder of A Code Master Academy, a practical and inclusive coding school based in Rubavu, Rwanda. The academy is dedicated to transforming lives by equipping unemployed youth and passionate learners with job-ready skills in modern software development.

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

1.1k
Privacy policy page template

Author:
Anonymous

1 year ago

2.8k
Card KPI
Targetas

Author:
Raul antonio de la cruz hernandez

2 months ago

390
Ethical Fashion

Author:
Tanvir Hasan Bappy (Tanvir)

10 months ago

1.1k
Login / Register Form
Tailwind CSS styling only – no frameworks required Smooth tab switch with JavaScript Fully responsive for mobile and desktop Clean, modern form design with interactive elements

Author:
KULDEEP

6 months ago

1k
Content Discovery Platform with Search & Filter
A modern, responsive web application built with Tailwind CSS that showcases content cards with search and filter functionality.

Author:
Sufyan jutt

2 months ago

194
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.3k
status indicatior
status indicator navigation dashbord

Author:
Rushikesh Latpate

1 year ago

1k
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

1.1k
Team Members

Author:
Abdul Baset Bappy

7 months ago

948
Gradient Flip-Text Button with Hover Animation
This stylish button features a dynamic gradient background that shifts from a calm green gradient by default to a vibrant purple-pink-red gradient on hover. The button also includes an interactive text flip effect, where the text seamlessly transitions on hover, creating a visually appealing and modern UI element. Perfect for adding flair to your websites or applications while maintaining functionality and responsiveness.

Author:
SHARIFUL ISLAM

11 months ago

1.2k
Contact Form Component
A multi-step, responsive contact form with a modern dark-themed design. The form includes four steps: name, email, phone number, and message. It features a side panel with contact information and a sleek, gradient-styled interface using Tailwind CSS.

Author:
Muhammad Umair Arshad

9 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components