Tailwind CSS Media & Attachment Bubbles Blocks

All Blocks
Application UI
Communication
Media & Attachment Bubbles

Media & Attachment Bubbles

Media and attachment bubbles for audio clips, images, media groups, and downloadable files inside chat conversations.

Audio Message Bubble with Waveform Player Pro

Audio message bubble pairs sender metadata with an inline waveform player and duration label.

<div class="group flex justify-start gap-x-2" style="word-break: break-word;">
                                <div class="order-1 bg-layer shadow-2xs inline-block rounded-xl pt-2 pb-1.5 px-2.5">
                                  <div class="text-sm text-foreground">
                                    <div class="flex items-center gap-x-2">
                                      <button type="button" class="flex justify-center items-center size-9 bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus rounded-full">
                                        <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"><polygon points="6 3 20 12 6 21 6 3"/></svg>
                                      </button>
                                      <div class="grow">
                                        <svg class="text-primary" width="77" height="19" viewBox="0 0 77 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                                          <rect y="18" width="2" height="1" fill="currentColor"/>
                                          <rect x="3" y="18" width="2" height="1" fill="currentColor"/>
                                          <rect x="6" y="18" width="2" height="1" fill="currentColor"/>
                                          <rect x="9" y="18" width="2" height="1" fill="currentColor"/>
                                          <rect x="12" y="4" width="2" height="15" fill="currentColor"/>
                                          <rect x="15" y="6" width="2" height="13" fill="currentColor"/>
                                          <rect x="18" y="14" width="2" height="5" fill="currentColor"/>
                                          <rect x="21" y="15" width="2" height="4" fill="currentColor"/>
                                          <rect x="24" y="12" width="2" height="7" fill="currentColor"/>
                                          <rect x="27" width="2" height="19" fill="currentColor"/>
                                          <rect x="30" y="7" width="2" height="12" fill="currentColor"/>
                                          <rect x="33" y="3" width="2" height="16" fill="currentColor"/>
                                          <rect x="36" y="9" width="2" height="10" fill="currentColor"/>
                                          <rect x="39" y="14" width="2" height="5" fill="currentColor"/>
                                          <rect x="42" y="18" width="2" height="1" fill="currentColor"/>
                                          <rect x="45" y="18" width="2" height="1" fill="currentColor"/>
                                          <rect x="48" y="18" width="2" height="1" fill="currentColor"/>
                                          <rect x="51" y="14" width="2" height="5" fill="currentColor"/>
                                          <rect x="54" y="14" width="2" height="5" fill="currentColor"/>
                                          <rect x="57" y="14" width="2" height="5" fill="currentColor"/>
                                          <rect x="60" width="2" height="19" fill="currentColor"/>
                                          <rect x="63" y="7" width="2" height="12" fill="currentColor"/>
                                          <rect x="66" width="2" height="19" fill="currentColor"/>
                                          <rect x="69" y="18" width="2" height="1" fill="currentColor"/>
                                          <rect x="72" y="18" width="2" height="1" fill="currentColor"/>
                                          <rect x="75" y="18" width="2" height="1" fill="currentColor"/>
                                        </svg>
                                        <div class="inline-flex items-center gap-x-1">
                                          <p class="text-xs text-muted-foreground-1">
                                            00:08
                                          </p>
                                        </div>
                                      </div>
                                    </div>
                                    
      
                                    <span>
                                      <span class="text-[11px] text-muted-foreground italic">10:51</span>
                                    </span>
                                  </div>
                                </div>

<div class="order-2 lg:opacity-0 lg:group-hover:opacity-100">
                                  <div class="hs-dropdown --exclude-from-auto-opening [--strategy:absolute] [--auto-close:inside]  relative inline-flex">
                                    <button id="hs-pro-cht4cmd_5" type="button" class="flex justify-center items-center gap-x-3 size-8 text-sm text-muted-foreground-1 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                      <svg class="shrink-0 size-4 rounded-full" 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"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
                                    </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-32 transition-[opacity,margin] duration opacity-0 hidden z-8 bg-dropdown-1 border border-dropdown-line rounded-xl shadow-lg before:h-4 before:absolute before:-top-4 before:inset-s-0 before:w-full after:h-4 after:absolute after:-bottom-4 after:inset-s-0 after:w-full" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-cht4cmd_5">
                                      <div class="p-1">
                                        <a class="flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                          <svg class="shrink-0 size-3.5" 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 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
                                          Edit
                                        </a>
                                        <a class="flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                          <svg class="shrink-0 size-3.5" 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 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="m10 7-3 3 3 3"/><path d="M17 13v-1a2 2 0 0 0-2-2H7"/></svg>
                                          Reply
                                        </a>
                                        <a class="flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                          <svg class="shrink-0 size-3.5" 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 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                          Delete
                                        </a>
                                      </div>
                                    </div>
                                    
                                  </div>
                                </div>
                                
                              </div>

</div>
                          </div>
                          
                        </div>
                        
                      </div>

Open related help desk chat template

Voice Message Reply Bubble with Active Playback Pro

Right-aligned voice reply bubble shows active playback styling with a waveform control and timestamp.

<div class="w-full space-y-4">

<div class="max-w-md ms-auto text-end flex justify-end gap-x-2">
                          
                          <div>
                            <p class="mb-1.5 pe-2.5 text-xs text-muted-foreground">Christina</p>
        
                            <div class="space-y-1">
                              
                              <div class="group flex justify-end gap-x-2" style="word-break: break-word;">
                                <div class="order-2 text-start bg-primary-100 shadow-2xs dark:bg-primary-500/20 inline-block rounded-xl pt-2 pb-1.5 px-2.5">
                                  <div class="text-sm text-foreground">
                                    <div class="flex items-center gap-x-2">
                                      <button type="button" class="flex justify-center items-center size-9 bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus rounded-full">
                                        <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"><polygon points="6 3 20 12 6 21 6 3"/></svg>
                                      </button>
                                      <div class="grow">
                                        <svg class="text-primary" width="77" height="19" viewBox="0 0 77 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                                          <rect y="18" width="2" height="1" fill="currentColor"/>
                                          <rect x="3" y="18" width="2" height="1" fill="currentColor"/>
                                          <rect x="6" y="18" width="2" height="1" fill="currentColor"/>
                                          <rect x="9" y="18" width="2" height="1" fill="currentColor"/>
                                          <rect x="12" y="4" width="2" height="15" fill="currentColor"/>
                                          <rect x="15" y="6" width="2" height="13" fill="currentColor"/>
                                          <rect x="18" y="14" width="2" height="5" fill="currentColor"/>
                                          <rect x="21" y="15" width="2" height="4" fill="currentColor"/>
                                          <rect x="24" y="12" width="2" height="7" fill="currentColor"/>
                                          <rect x="27" width="2" height="19" fill="currentColor"/>
                                          <rect x="30" y="7" width="2" height="12" fill="currentColor"/>
                                          <rect x="33" y="3" width="2" height="16" fill="currentColor"/>
                                          <rect x="36" y="9" width="2" height="10" fill="currentColor"/>
                                          <rect x="39" y="14" width="2" height="5" fill="currentColor"/>
                                          <rect x="42" y="18" width="2" height="1" fill="currentColor"/>
                                          <rect x="45" y="18" width="2" height="1" fill="currentColor"/>
                                          <rect x="48" y="18" width="2" height="1" fill="currentColor"/>
                                          <rect x="51" y="14" width="2" height="5" fill="currentColor"/>
                                          <rect x="54" y="14" width="2" height="5" fill="currentColor"/>
                                          <rect x="57" y="14" width="2" height="5" fill="currentColor"/>
                                          <rect x="60" width="2" height="19" fill="currentColor"/>
                                          <rect x="63" y="7" width="2" height="12" fill="currentColor"/>
                                          <rect x="66" width="2" height="19" fill="currentColor"/>
                                          <rect x="69" y="18" width="2" height="1" fill="currentColor"/>
                                          <rect x="72" y="18" width="2" height="1" fill="currentColor"/>
                                          <rect x="75" y="18" width="2" height="1" fill="currentColor"/>
                                        </svg>
                                        <div class="inline-flex items-center gap-x-1">
                                          <p class="text-xs text-muted-foreground-1">
                                            00:08
                                          </p>
                                          <span class="inline-block size-1.5 rounded-full bg-primary"></span>
                                        </div>
                                      </div>
                                    </div>
                                    
      
                                    <span>
                                      <span class="text-[11px] text-end text-muted-foreground italic">09:52</span>
                                      <svg class="inline-block shrink-0 size-4 text-muted-foreground" 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="M18 6 7 17l-5-5"/><path d="m22 10-7.5 7.5L13 16"/></svg>
                                    </span>
                                  </div>
                                </div>

<div class="order-1 lg:opacity-0 lg:group-hover:opacity-100">
                                  <div class="hs-dropdown --exclude-from-auto-opening [--strategy:absolute] [--auto-close:inside] [--placement:bottom-right] relative inline-flex">
                                    <button id="hs-pro-cht4cmd_6" type="button" class="flex justify-center items-center gap-x-3 size-8 text-sm text-muted-foreground-1 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                      <svg class="shrink-0 size-4 rounded-full" 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"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
                                    </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-32 transition-[opacity,margin] duration opacity-0 hidden z-8 bg-dropdown-1 border border-dropdown-line rounded-xl shadow-lg before:h-4 before:absolute before:-top-4 before:inset-s-0 before:w-full after:h-4 after:absolute after:-bottom-4 after:inset-s-0 after:w-full" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-cht4cmd_6">
                                      <div class="p-1">
                                        <a class="flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                          <svg class="shrink-0 size-3.5" 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 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
                                          Edit
                                        </a>
                                        <a class="flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                          <svg class="shrink-0 size-3.5" 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 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="m10 7-3 3 3 3"/><path d="M17 13v-1a2 2 0 0 0-2-2H7"/></svg>
                                          Reply
                                        </a>
                                        <a class="flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                          <svg class="shrink-0 size-3.5" 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 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                          Delete
                                        </a>
                                      </div>
                                    </div>
                                    
                                  </div>
                                </div>
                                
                              </div>

</div>
                          </div>
                          
      
                          <div class="shrink-0 mt-auto">
                            <img class="shrink-0 size-8 rounded-full" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
                          </div>
                        </div>
                        
                      </div>

Open related help desk chat template

Image Message Bubble with Comment Text Pro

Message bubble stacks image attachments with short comment text inside a left-aligned conversation thread.

<div class="w-full space-y-5">
                        
                        <div class="max-w-md flex gap-x-2">
                          <div class="shrink-0 mt-auto">
                            <span class="flex shrink-0 justify-center items-center size-8 text-xs font-medium uppercase rounded-full bg-indigo-500 text-foreground-inverse">
                              R
                            </span>
                          </div>

<div>
                            <p class="mb-1.5 ps-2.5 text-xs text-muted-foreground">Rachel</p>
        
                            <div class="space-y-1">

<div class="group flex justify-start gap-x-2" style="word-break: break-word;">
                                <div class="order-1 bg-layer shadow-2xs inline-block rounded-xl pt-2 pb-1.5 px-2.5">
                                  <div class="text-sm text-foreground">
                                    <img class="mb-2 rounded-lg" src="../../../assets/img/mockups/img12.jpg" alt="Download Image">
                                    When using open method,<br><code>const select = new</code><br>it creates another instance of the select.
      
                                    <span>
                                      <span class="text-[11px] text-muted-foreground italic">11:10</span>
                                    </span>
                                  </div>
                                </div>

<div class="order-2 lg:opacity-0 lg:group-hover:opacity-100">
                                  <div class="hs-dropdown --exclude-from-auto-opening [--strategy:absolute] [--auto-close:inside]  relative inline-flex">
                                    <button id="hs-pro-cht2cmd_2" type="button" class="flex justify-center items-center gap-x-3 size-8 text-sm text-muted-foreground-1 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                      <svg class="shrink-0 size-4 rounded-full" 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"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
                                    </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-32 transition-[opacity,margin] duration opacity-0 hidden z-8 bg-dropdown-1 border border-dropdown-line rounded-xl shadow-lg before:h-4 before:absolute before:-top-4 before:inset-s-0 before:w-full after:h-4 after:absolute after:-bottom-4 after:inset-s-0 after:w-full" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-cht2cmd_2">
                                      <div class="p-1">
                                        <a class="flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                          <svg class="shrink-0 size-3.5" 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 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
                                          Edit
                                        </a>
                                        <a class="flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                          <svg class="shrink-0 size-3.5" 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 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="m10 7-3 3 3 3"/><path d="M17 13v-1a2 2 0 0 0-2-2H7"/></svg>
                                          Reply
                                        </a>
                                        <a class="flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                          <svg class="shrink-0 size-3.5" 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 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                          Delete
                                        </a>
                                      </div>
                                    </div>
                                    
                                  </div>
                                </div>
                                
                              </div>

<div class="group flex justify-start gap-x-2" style="word-break: break-word;">
                                <div class="order-1 bg-layer shadow-2xs inline-block rounded-xl pt-2 pb-1.5 px-2.5">
                                  <div class="text-sm text-foreground">
                                    <img class="mb-2 rounded-lg" src="../../../assets/img/mockups/img10.jpg" alt="Download Image">
                                    2. Using the static method causes an error in the console.
      
                                    <span>
                                      <span class="text-[11px] text-muted-foreground italic">11:12</span>
                                    </span>
                                  </div>
                                </div>

<div class="order-2 lg:opacity-0 lg:group-hover:opacity-100">
                                  <div class="hs-dropdown --exclude-from-auto-opening [--strategy:absolute] [--auto-close:inside]  relative inline-flex">
                                    <button id="hs-pro-cht2cmd_3" type="button" class="flex justify-center items-center gap-x-3 size-8 text-sm text-muted-foreground-1 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                      <svg class="shrink-0 size-4 rounded-full" 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"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
                                    </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-32 transition-[opacity,margin] duration opacity-0 hidden z-8 bg-dropdown-1 border border-dropdown-line rounded-xl shadow-lg before:h-4 before:absolute before:-top-4 before:inset-s-0 before:w-full after:h-4 after:absolute after:-bottom-4 after:inset-s-0 after:w-full" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-cht2cmd_3">
                                      <div class="p-1">
                                        <a class="flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                          <svg class="shrink-0 size-3.5" 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 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
                                          Edit
                                        </a>
                                        <a class="flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                          <svg class="shrink-0 size-3.5" 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 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="m10 7-3 3 3 3"/><path d="M17 13v-1a2 2 0 0 0-2-2H7"/></svg>
                                          Reply
                                        </a>
                                        <a class="flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                          <svg class="shrink-0 size-3.5" 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 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                          Delete
                                        </a>
                                      </div>
                                    </div>
                                    
                                  </div>
                                </div>
                                
                              </div>

Open related help desk chat template

Image Group Message Bubble with Thumbnail Grid Pro

Message bubble combines a short text line with a three-image thumbnail grid inside a single media post.

<div class="w-full space-y-4">
                        
                        <div class="max-w-md flex gap-x-2">
                          <div class="shrink-0 mt-auto">
                            <img class="shrink-0 size-8 rounded-full" src="https://images.unsplash.com/photo-1679412330254-90cb240038c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                          </div>
      
                          
                          <div>
                            <p class="mb-1.5 ps-2.5 text-xs text-muted-foreground">Lewis</p>
        
                            <div class="space-y-1">
                              
                              <div class="group flex justify-start gap-x-2" style="word-break: break-word;">
                                <div class="order-1 bg-layer shadow-2xs inline-block rounded-xl pt-2 pb-1.5 px-2.5">
                                  <div class="text-sm text-foreground">
                                    <div class="mb-1 grid grid-cols-2 gap-x-1">
                                      <img class="shrink-0 size-41 rounded-s-md object-cover" src="../../../assets/img/demo-previews/img9.webp" alt="Media Image">
                                      <div class="space-y-1">
                                        <img class="shrink-0 w-full h-20 rounded-tr-md object-cover" src="../../../assets/img/demo-previews/img6.webp" alt="Media Image">
                                        <img class="shrink-0 w-full h-20 rounded-br-md object-cover" src="../../../assets/img/demo-previews/img1.webp" alt="Media Image">
                                      </div>
                                    </div>
                                    How's these all free? 🤯
      
                                    <span>
                                      <span class="text-[11px] text-muted-foreground italic">07:02</span>
                                    </span>
                                  </div>
                                </div>

<div class="order-2 lg:opacity-0 lg:group-hover:opacity-100">
                                  <div class="hs-dropdown --exclude-from-auto-opening [--strategy:absolute] [--auto-close:inside]  relative inline-flex">
                                    <button id="hs-pro-cht3cmd_1" type="button" class="flex justify-center items-center gap-x-3 size-8 text-sm text-muted-foreground-1 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                      <svg class="shrink-0 size-4 rounded-full" 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"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
                                    </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-32 transition-[opacity,margin] duration opacity-0 hidden z-8 bg-dropdown-1 border border-dropdown-line rounded-xl shadow-lg before:h-4 before:absolute before:-top-4 before:inset-s-0 before:w-full after:h-4 after:absolute after:-bottom-4 after:inset-s-0 after:w-full" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-cht3cmd_1">
                                      <div class="p-1">
                                        <a class="flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                          <svg class="shrink-0 size-3.5" 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 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
                                          Edit
                                        </a>
                                        <a class="flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                          <svg class="shrink-0 size-3.5" 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 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="m10 7-3 3 3 3"/><path d="M17 13v-1a2 2 0 0 0-2-2H7"/></svg>
                                          Reply
                                        </a>
                                        <a class="flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                          <svg class="shrink-0 size-3.5" 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 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                          Delete
                                        </a>
                                      </div>
                                    </div>
                                    
                                  </div>
                                </div>
                                
                              </div>

Open related help desk chat template

Attached Image Bubble with Caption Text Pro

Message bubble pairs supporting text with an attached image file card and message timestamp.

<div class="w-full space-y-4">
                        
                        <div class="max-w-md flex gap-x-2">
                          <div class="shrink-0 mt-auto">
                            <span class="flex shrink-0 justify-center items-center size-8 text-xs font-medium uppercase rounded-full bg-pink-500 text-foreground-inverse">
                              B
                            </span>
                          </div>

<div>
                            <p class="mb-1.5 ps-2.5 text-xs text-muted-foreground">Bob</p>
        
                            <div class="space-y-1">
                              
                              <div class="group flex justify-start gap-x-2" style="word-break: break-word;">
                                <div class="order-1 bg-layer shadow-2xs inline-block rounded-xl pt-2 pb-1.5 px-2.5">
                                  <div class="text-sm text-foreground">
                                    <div class="flex items-center gap-x-2">
                                      <img class="shrink-0 mb-2 size-16 rounded-md object-cover" src="../../../assets/img/mockups/img8.jpg" alt="Download Image">
                                      <div class="grow">
                                        <p class="font-medium text-[13px] text-foreground">Screenshot 2024-05-01 at 11.23.24</p>
                                        <p class="text-xs text-muted-foreground-1">339 KB - <a class="font-medium text-primary hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="#">Download</a></p>
                                      </div>
                                    </div>
                                    Hey Preline team, I got an error while using the headless UI component with preline. I'm not sure how to fix it. Could you kindly assist me in identifying what I might be missing? Your help would be greatly appreciate
      
                                    <span>
                                      <span class="text-[11px] text-muted-foreground italic">10:47</span>
                                    </span>
                                  </div>
                                </div>

<div class="order-2 lg:opacity-0 lg:group-hover:opacity-100">
                                  <div class="hs-dropdown --exclude-from-auto-opening [--strategy:absolute] [--auto-close:inside]  relative inline-flex">
                                    <button id="hs-pro-cht5cmd_2" type="button" class="flex justify-center items-center gap-x-3 size-8 text-sm text-muted-foreground-1 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                      <svg class="shrink-0 size-4 rounded-full" 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"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
                                    </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-32 transition-[opacity,margin] duration opacity-0 hidden z-8 bg-dropdown-1 border border-dropdown-line rounded-xl shadow-lg before:h-4 before:absolute before:-top-4 before:inset-s-0 before:w-full after:h-4 after:absolute after:-bottom-4 after:inset-s-0 after:w-full" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-cht5cmd_2">
                                      <div class="p-1">
                                        <a class="flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                          <svg class="shrink-0 size-3.5" 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 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
                                          Edit
                                        </a>
                                        <a class="flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                          <svg class="shrink-0 size-3.5" 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 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="m10 7-3 3 3 3"/><path d="M17 13v-1a2 2 0 0 0-2-2H7"/></svg>
                                          Reply
                                        </a>
                                        <a class="flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                          <svg class="shrink-0 size-3.5" 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 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                          Delete
                                        </a>
                                      </div>
                                    </div>
                                    
                                  </div>
                                </div>
                                
                              </div>

Open related help desk chat template

File Download Bubble with Attachment Metadata Pro

Message bubble pairs supporting text with a downloadable file row that shows filename and size.

<div class="order-2 lg:opacity-0 lg:group-hover:opacity-100">
                                  <div class="hs-dropdown --exclude-from-auto-opening [--strategy:absolute] [--auto-close:inside]  relative inline-flex">
                                    <button id="hs-pro-cht7cmd_2" type="button" class="flex justify-center items-center gap-x-3 size-8 text-sm text-muted-foreground-1 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                      <svg class="shrink-0 size-4 rounded-full" 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"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
                                    </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-32 transition-[opacity,margin] duration opacity-0 hidden z-8 bg-dropdown-1 border border-dropdown-line rounded-xl shadow-lg before:h-4 before:absolute before:-top-4 before:inset-s-0 before:w-full after:h-4 after:absolute after:-bottom-4 after:inset-s-0 after:w-full" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-cht7cmd_2">
                                      <div class="p-1">
                                        <a class="flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                          <svg class="shrink-0 size-3.5" 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 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
                                          Edit
                                        </a>
                                        <a class="flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                          <svg class="shrink-0 size-3.5" 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 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="m10 7-3 3 3 3"/><path d="M17 13v-1a2 2 0 0 0-2-2H7"/></svg>
                                          Reply
                                        </a>
                                        <a class="flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                          <svg class="shrink-0 size-3.5" 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 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                          Delete
                                        </a>
                                      </div>
                                    </div>
                                    
                                  </div>
                                </div>
                                
                              </div>

Open related help desk chat template