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

172

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

Sticky fullpage pages / slides
Sticky full page

Author:
harinandana

1 month ago

239
Interactive Order Report Chart with TailwindCSS and Chart.js
Create a stunning and interactive order report chart using HTML, TailwindCSS, and Chart.js. This chart combines bar and line graphs to visualize delivered, shipping, cancelled, and returned orders effectively. Perfect for dashboards and analytics pages with responsive design and clean aesthetics.

Author:
SHARIFUL ISLAM

9 months ago

1.4k
Customer support chatbox
Floating chatbox

Author:
gmer33

2 years ago

11.5k
Calculator
A Basic Calculator

Author:
Debbie F

1 year ago

1.8k
Modern website that provides software services
The website is a platform that offers software services to users, including access to open-source code, downloadable projects, and relevant documentation. The main objective is to support students, developers, and the open-source community by sharing free tools and source code examples.

Author:
Rathanak Phan

5 months ago

399
templete
templete

Author:
Uwera Dorcas

6 months ago

528
Invoice template

Author:
Shakti

2 years ago

27.7k
machine
tell you how your MAC pc work

Author:
gidy

3 weeks ago

54
Recipe card
A modern and responsive Tailwind CSS recipe card with image, ingredients, and instructions. Supports dark mode and mobile view.

Author:
Rajesh Pandey

6 months ago

826
Privacy Policy Page Template

Author:
Anonymous

11 months ago

1.5k
Free SEO Audit & Analysis Tool
Instant SEO analysis of your website. Check 50+ ranking factors including on-page SEO, technical issues, and mobile performance.

Author:
MD Mostafa Niloy

3 weeks ago

35
Maintenance page template
The site is under maintenance placeholder page

Author:
Anonymous

1 year ago

10.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components