Tailwind CSS AI Chat Bubbles Blocks

AI Chat Bubbles

AI chat bubbles for prompt messages, long-form responses, feedback actions, and source-aware reply interfaces.

Prompt Message Bubble with Copy and Edit Actions Pro

Right-aligned prompt bubble keeps the user message compact and reveals copy and edit actions on hover.

<div class="py-5 group flex flex-col gap-y-1 text-foreground">
                      <div class="flex justify-end gap-x-2" style="word-break: break-word;">
                        <div class="text-start bg-surface inline-block rounded-3xl py-2.5 px-4">
                          <p class="leading-relaxed">
                            what's preline ui?
                          </p>
                        </div>
                      </div>

<div class="flex items-center justify-end opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-300">
                        <div class="hs-tooltip [--placement:bottom-right] inline-block">
                          <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-8 text-sm text-muted-foreground-1 hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                              Copy
                            </span>
                          </button>
                        </div>

<div class="hs-tooltip [--placement:bottom-right] inline-block">
                          <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-8 text-sm text-muted-foreground-1 hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg>
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                              Edit message
                            </span>
                          </button>
                        </div>
                      </div>
                      
                    </div>

Open related AI chat details template

Long-Form AI Response Bubble with Feedback Actions and Sources Button Pro

Long-form AI response bubble supports headings, lists, feedback actions, sharing controls, and a sources button.

<div class="py-5 group flex flex-col gap-y-1 text-foreground">
                      <p class="mb-6 leading-relaxed">
                        <span class="font-semibold">Preline UI</span> is an open-source UI component library built with <span class="font-semibold">Tailwind CSS</span>. It helps developers and designers quickly build modern, responsive web interfaces by offering prebuilt, styled components and templates.
                      </p>
  
                      <h3 class="mb-3 font-medium text-xl">
                        Key Features:
                      </h3>

<ul class="mb-6 list-disc list-outside ps-7 space-y-3">
                        <li class="ps-2">
                          <span class="font-semibold">750+ UI components:</span> Buttons, modals, tooltips, forms, charts, etc.
                        </li>
                        <li class="ps-2">
                          <span class="font-semibold">Framework support:</span> Works with plain HTML, React, Vue, Angular (Pro), and more.
                        </li>
                        <li class="ps-2">
                          <span class="font-semibold">Figma design system:</span> Complete design kit for prototyping and design handoff.
                        </li>
                        <li class="ps-2">
                          <span class="font-semibold">Mobile-first & responsive:</span> All components are built to work well on different screen sizes.
                        </li>
                        <li class="ps-2">
                          <span class="font-semibold">Accessible (a11y):</span> Follows accessibility best practices.
                        </li>
                        <li class="ps-2">
                          <span class="font-semibold">Dark mode ready</span>
                        </li>
                        <li class="ps-2">
                          <span class="font-semibold">Free & open-source</span>, with a <span class="font-semibold">Pro version</span> offering more advanced components, templates, and framework support.
                        </li>
                      </ul>
  
                      <h3 class="mb-3 font-medium text-xl">
                        Common Use Cases:
                      </h3>
  
                      <ul class="mb-6 list-disc list-outside ps-7 space-y-3">
                        <li class="ps-2">
                          Admin dashboards
                        </li>
                        <li class="ps-2">
                          SaaS landing pages
                        </li>
                        <li class="ps-2">
                          Ecommerce sites
                        </li>
                        <li class="ps-2">
                          Documentation pages
                        </li>
                        <li class="ps-2">
                          Any Tailwind-based web project
                        </li>
                      </ul>

<div class="flex flex-wrap items-center">
                        
                        <div class="hs-tooltip [--placement:bottom-left] inline-block">
                          <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-8 text-sm text-foreground/70 hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg>
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                              Regenerate
                            </span>
                          </button>
                        </div>

<div class="hs-tooltip [--placement:bottom-left] inline-block">
                          <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-8 text-sm text-foreground/70 hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                              Copy
                            </span>
                          </button>
                        </div>

<div class="hs-tooltip [--placement:bottom-left] inline-block">
                          <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-8 text-sm text-foreground/70 hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"/></svg>
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                              Good response
                            </span>
                          </button>
                        </div>

<div class="hs-tooltip [--placement:bottom-left] inline-block">
                          <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-8 text-sm text-foreground/70 hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z"/></svg>
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                              Bad response
                            </span>
                          </button>
                        </div>

<div class="hs-tooltip [--placement:bottom-left] inline-block">
                          <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-8 text-sm text-foreground/70 hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v13"/><path d="m16 6-4-4-4 4"/><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/></svg>
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                              Share
                            </span>
                          </button>
                        </div>

<button type="button" class="ms-1 py-1.5 px-3 inline-flex items-center gap-x-1.5 text-sm text-foreground/70 hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-overlay="#hs-pro-chhds1" aria-controls="hs-pro-chhds1" aria-label="Toggle navigation" aria-expanded="false">
                          <span class="-ms-1.5 flex items-center -space-x-2">
                            <span class="size-5 flex shrink-0 justify-center items-center bg-background rounded-full">
                              <svg class="shrink-0 size-4" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
                              </svg>
                            </span>
                            <span class="size-5 flex shrink-0 justify-center items-center bg-background rounded-full">
                              <svg class="shrink-0 size-4" width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M18.0835 3.23358C9.88316 3.23358 3.23548 9.8771 3.23548 18.0723V35.5832H0.583496V18.0723C0.583496 8.41337 8.41851 0.583252 18.0835 0.583252C27.7485 0.583252 35.5835 8.41337 35.5835 18.0723C35.5835 27.7312 27.7485 35.5614 18.0835 35.5614H16.7357V32.911H18.0835C26.2838 32.911 32.9315 26.2675 32.9315 18.0723C32.9315 9.8771 26.2838 3.23358 18.0835 3.23358Z" fill="currentColor" class="fill-primary"/>
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M18.0833 8.62162C12.8852 8.62162 8.62666 12.9245 8.62666 18.2879V35.5833H5.97468V18.2879C5.97468 11.5105 11.3713 5.97129 18.0833 5.97129C24.7954 5.97129 30.192 11.5105 30.192 18.2879C30.192 25.0653 24.7954 30.6045 18.0833 30.6045H16.7355V27.9542H18.0833C23.2815 27.9542 27.54 23.6513 27.54 18.2879C27.54 12.9245 23.2815 8.62162 18.0833 8.62162Z" fill="currentColor" class="fill-primary"/>
                                <path d="M24.8225 18.1012C24.8225 21.8208 21.8053 24.8361 18.0833 24.8361C14.3614 24.8361 11.3442 21.8208 11.3442 18.1012C11.3442 14.3815 14.3614 11.3662 18.0833 11.3662C21.8053 11.3662 24.8225 14.3815 24.8225 18.1012Z" fill="currentColor" class="fill-primary"/>
                              </svg>
                            </span>
                          </span>
                          25 sources
                        </button>
                        
                      </div>
                      
                    </div>

Open related AI chat details template