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.

Create a responsive UI block named "Slide-In Support Chat Sidebar with Reply Composer" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/communication/support-chat-sidebars/#slide-in-support-chat-sidebar-with-reply-composer. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Build only this source block. Do not add unrelated page chrome, marketing sections, dashboard widgets, extra cards, extra modals, placeholder states, or footer content unless they are present in the source block.

Source metadata:
- Catalog family: communication/support-chat-sidebars
- Block ID: slide-in-support-chat-sidebar-with-reply-composer
- Source description: Slide-in chat sidebar pairs an agent header, stacked message history, and a full-width reply composer in one panel.
- Preview iframe: https://preline.co/blocks/communication/support-chat-sidebars/iframes/pro/slide-in-support-chat-sidebar-with-reply-composer.html (repo path: blocks/communication/support-chat-sidebars/iframes/pro/slide-in-support-chat-sidebar-with-reply-composer.html)
- Source markup reference:
  - partials/pro/chat-widgets/sidebars/sidebar-example.html
  - partials/pro/sources/overlay-close-button.html
  - partials/pro/helpdesk/layouts-components/time-label.html
  - partials/pro/helpdesk/sources/message.html
  - partials/pro/helpdesk/layouts-components/full-width-textarea-input-with-rounded-buttons.html

Use the source HTML tab and referenced partials as the source of truth. Preserve exact visible copy, content order, hierarchy, component density, spacing relationships, borders, radii, icons, status markers, dropdown/menu rows, form states, responsive order, and interaction content. If the source imports shared partials or assets, reuse those local components/assets when the destination can import them; otherwise recreate their visible structure faithfully from the source.

Block-specific fidelity rules:
- For headers, navbars, sidebars, tabs, and app chrome, separate source demo wrapper width from the destination app shell. Reuse the destination project's header/container max width and padding when adapting.
- Preserve active/current states, trigger geometry, separator presence, mobile ordering, dropdown placement, and focus/keyboard behavior.
- Preserve message grouping, avatar/channel badge anchoring, per-message action menus, timestamps, delivery/read-status icons, composer order, reply previews, and conversation pane density.
- Do not duplicate sender avatars for grouped messages or stretch shrink-wrapped bubbles into full-width cards unless the source does.
- Source content inventory (from the source markup):
  - The block is an HSOverlay off-canvas panel: `id="hs-pro-chwwd"`, classes `hs-overlay hs-overlay-open:translate-x-0 translate-x-full transition-all duration-300 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"` with `aria-label="Sidebar"`. It is HIDDEN on first load and slides in from the inline-end edge.
  - The floating `size-12` round primary launcher pinned `fixed bottom-4 inset-e-4` and the auto-open script are iframe demo chrome, not part of the block - ship the panel closed and open it from your own `data-hs-overlay="#hs-pro-chwwd"` trigger.
  - Header: `size-8` round photo avatar with a `size-2 bg-green-500` presence dot ringed `ring-2 ring-layer` at its bottom inline-end, name `Costa Quinn` in `font-semibold text-sm`, status `Online` in `text-xs text-primary-600`, and a `size-8` round close button (`aria-label="Close"`, `sr-only` text `Close`).
  - Scrollable body starts with a sticky centered `Today` pill, then exactly two message groups: right-aligned `James` with two bubbles (`Hi there,` at `12:44` carrying a read double-check, and `Hi, I'd like to ask some questions. Can I use Preline UI on a client project?` at `11:27` with no check), then left-aligned `Costa` with one bubble.
  - The Costa bubble contains a quoted-reply strip attributed to `James Collins` repeating the same question, followed by the answer `Yes, you can!`, timestamped `12:44` with a read check. Note both sides use the `bg-primary-100` / `dark:bg-primary-500/20` tint here - the incoming bubble is NOT `bg-layer`.
  - Composer footer is `bg-layer border-t border-layer-line` with an auto-height textarea (`rows="1"`, `data-hs-textarea-auto-height` with `defaultHeight` 48) whose placeholder reads `Message Costa` and whose label is `sr-only` `Message`.
  - Composer controls are all `size-8` round icon-only buttons with `sr-only` names: left `Attach file` and `Add emoji`; right `Send voice message` plus a primary-filled send button (up-arrow icon, `sr-only` `Send`). There is no Magic AI dropdown, no reply-preview strip, and no channel toggle in this variant.

Token and Tailwind rules:
- Treat source token classes as semantic roles, not fixed class names to blindly copy.
- Map every source `primary` role to the destination project's current primary token/config/CSS variable. Active links, checked states, progress lines, focus rings, primary gradients, logo primary fills/strokes, and primary buttons must share that destination primary color.
- Do not hardcode Preline blue or emit `text-blue-*`, `bg-blue-*`, `border-blue-*`, `fill-blue-*`, `stroke-blue-*`, `from-blue-*`, `via-blue-*`, `to-blue-*`, or fixed blue hex/rgb values for primary roles unless the destination primary is explicitly blue.
- Before using source-only token classes such as `text-foreground-inverse`, `bg-layer`, `border-layer-line`, `bg-navbar`, `border-line-2`, `bg-dropdown`, or similar Preline tokens, inspect the destination Tailwind config, global CSS/theme variables, and existing components for an equivalent utility/token.
- Prefer existing destination utilities such as `text-white`, `text-primary-foreground`, `text-foreground`, `text-muted-foreground`, `bg-background`, `bg-card`, `bg-popover`, `border-border`, `bg-muted`, `bg-accent`, `ring-ring`, or app-specific tokens when they match the source role.
- If no equivalent exists, add the smallest project-appropriate token or utility before using it. Do not leave undefined source classes in the generated markup.

Asset and icon rules:
- Use exact source images, avatars, product media, branded SVGs, payment marks, channel logos, and app icons when the source provides them.
- Do not replace source assets with initials, emojis, generic icons, generated placeholders, or different stock media.
- Ordinary interface icons should match the destination icon system. If the project uses Lucide-style outline icons, keep the 24 viewBox, `fill="none"`, `stroke="currentColor"`, rounded caps/joins, and source stroke widths.
- Brand/source SVG shape is fixed content. Only map semantic colors such as primary fill/stroke to the destination token.

Behavior and accessibility:
- Preserve source interactions: links, buttons, dropdowns, tooltips, tabs, menus, drawers, modals, toggles, search, filters, form controls, validation states, loading/empty states, and open/closed defaults.
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.
- Use semantic HTML and accessible names. Keep `aria-current`, `aria-expanded`, `aria-haspopup`, `role`, labels, focus states, and keyboard behavior when the source exposes them or the destination primitive requires them.
- Desktop and mobile states must not overlap text, clip controls, or shift layout unexpectedly. Controls with icons, counters, badges, and labels should keep stable dimensions across hover/focus/active states.

Final QA:
- Compare the result against the source preview and HTML tab.
- Verify primary color follows the destination project, not Preline's default blue.
- Verify all emitted classes exist in the destination or are added deliberately.
- Verify responsive layout, focus states, dropdown/popover layering, long-text truncation, and source asset paths.
- Keep the final implementation scoped to this block and avoid unrelated refactors.

<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>