Tailwind CSS Support Chat Sidebars Blocks

All Blocks
Application UI
Communication
Support Chat Sidebars

Support Chat Sidebars

Support chat sidebars for slide-in conversation panels with agent headers, message histories, and full-width reply composers.

Slide-In Support Chat Sidebar with Reply Composer Pro

Slide-in chat sidebar pairs an agent header, stacked message history, and a full-width reply composer in one panel.

<div id="hs-pro-chwwd" class="hs-overlay hs-overlay-open:translate-x-0
                    translate-x-full transition-all duration-300 transform
                    size-full sm:w-100
                    hidden
                    fixed top-0 inset-e-0 z-80
                    flex flex-col
                    bg-overlay border-s border-overlay-line" role="dialog" tabindex="-1" aria-label="Sidebar">
                      <div class="flex flex-col h-full">
                        
                        <div class="py-3 px-4 flex justify-between items-center border-b border-line-2">
                          
                          <div class="w-full">
                            <div class="truncate flex items-center gap-x-2">
                              <span class="relative shrink-0">
                                <img class="shrink-0 size-8 rounded-full" src="https://images.unsplash.com/photo-1601935111741-ae98b2b230b0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                                <span class="absolute bottom-0 inset-e-0 block size-2 rounded-full ring-2 ring-layer bg-green-500"></span>
                              </span>
                              <span class="grow truncate">
                                <span class="truncate block font-semibold text-sm leading-4 text-foreground">
                                  Costa Quinn
                                </span>
                                <span class="truncate block text-xs text-primary-600 leading-4">
                                  Online
                                </span>
                              </span>
                            </div>
                          </div>

<button type="button" class="size-8 shrink-0 flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-surface text-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-label="Close" data-hs-overlay="#hs-pro-chwwd">
                            <span class="sr-only">Close</span>
                            <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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                          </button>
                        </div>

<div class="h-full overflow-y-auto overflow-hidden [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                          <div class="pt-2 pb-5 px-4">
                            <div class="relative">
                              
                              <div class="sticky top-0 inset-x-0 z-8 max-w-lg mx-auto text-center">
                                <span class="py-0.5 px-1.5 bg-background-2 text-xs text-muted-foreground-1 rounded-full">Today</span>
                              </div>

<div class="w-full space-y-5">
                                
                                <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">James</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 dark:bg-primary-500/20 inline-block rounded-xl pt-2 pb-1.5 px-2.5">
                                          <div class="text-sm text-foreground">
                                            Hi there,
      
                                            <span>
                                              <span class="text-[11px] text-end text-muted-foreground italic">12:44</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-cht1cmd_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-cht1cmd_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-end gap-x-2" style="word-break: break-word;">
                                        <div class="order-2 text-start bg-primary-100 dark:bg-primary-500/20 inline-block rounded-xl pt-2 pb-1.5 px-2.5">
                                          <div class="text-sm text-foreground">
                                            Hi, I'd like to ask some questions. Can I use Preline UI on a client project?
      
                                            <span>
                                              <span class="text-[11px] text-end text-muted-foreground italic">11:27</span>
                                            </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-cht1cmd_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-cht1cmd_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>

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

<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-1601935111741-ae98b2b230b0?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">Costa</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-primary-100 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="mb-2 py-1 ps-2.5 pe-1.5 relative cursor-default bg-layer before:bg-muted-foreground-2 rounded-lg overflow-hidden group-focus:scale-[.98] transition before:absolute before:inset-y-0 before:inset-s-0 before:w-1 before:h-full">
                                              <blockquote>
                                                <p class="font-medium text-[13px] text-primary">James Collins</p>
                                                <p class="text-[13px] text-foreground">Hi, I'd like to ask some questions. Can I use Preline UI on a client project?</p>
                                              </blockquote>
                                            </div>
                                            Yes, you can!
      
                                            <span>
                                              <span class="text-[11px] text-muted-foreground italic">12:44</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-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-cht1cmd_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-cht1cmd_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>

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

<footer class=" bg-layer border-t border-layer-line">
                          <label for="hs-chat-widgets-sidebar-example-autoheight-textarea" class="sr-only">Message</label>

<div class="pb-2 ps-2">
                                <textarea id="hs-chat-widgets-sidebar-example-autoheight-textarea" class="max-h-36 pt-4 pb-2 ps-2 pe-4 block w-full bg-layer border-transparent rounded-0 md:text-sm leading-4 resize-none text-foreground placeholder:text-muted-foreground-1 focus:outline-hidden focus:border-transparent focus:ring-transparent disabled:opacity-50 disabled:pointer-events-none [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb" placeholder="Message Costa" rows="1" data-hs-textarea-auto-height='{"defaultHeight": 48}'></textarea>
    
                            <div class="pe-4 flex justify-between items-center gap-x-1">
                              
                              <div class="flex items-center gap-x-1">
                                
                                <button type="button" class="flex justify-center items-center gap-x-1.5 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.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
                                  <span class="sr-only">Attach file</span>
                                </button>
                                
        
                                
                                <button type="button" class="flex justify-center items-center gap-x-1.5 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="M22 11v1a10 10 0 1 1-9-10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" x2="9.01" y1="9" y2="9"/><line x1="15" x2="15.01" y1="9" y2="9"/><path d="M16 5h6"/><path d="M19 2v6"/></svg>
                                  <span class="sr-only">Add emoji</span>
                                </button>
                                
        
                                
                              </div>

<div class="flex items-center gap-x-1">
                                
                                <button type="button" class="flex justify-center items-center gap-x-1.5 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="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></svg>
                                  <span class="sr-only">Send voice message</span>
                                </button>

<button type="button" class="inline-flex shrink-0 justify-center items-center size-8 text-sm font-medium rounded-full bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus">
                                  <span class="sr-only">Send</span>
                                  <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="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                                </button>
                                
                              </div>
                              
                            </div>
                          </div>
                        </footer>

</div>
                    </div>