Tailwind CSS AI Chat Bubbles Blocks

AI Chat Bubbles

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

Prompt Message Bubble with Copy and Edit Actions Pro

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

Create a responsive UI block named "Prompt Message Bubble with Copy and Edit Actions" 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/ai-chat-bubbles/#prompt-message-bubble-with-copy-and-edit-actions. 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/ai-chat-bubbles
- Block ID: prompt-message-bubble-with-copy-and-edit-actions
- Source description: Right-aligned prompt bubble keeps the user message compact and reveals copy and edit actions on hover.
- Preview iframe: https://preline.co/blocks/communication/ai-chat-bubbles/iframes/pro/prompt-message-bubble-with-copy-and-edit-actions.html (repo path: blocks/communication/ai-chat-bubbles/iframes/pro/prompt-message-bubble-with-copy-and-edit-actions.html)
- Source markup reference:
  - partials/pro/ai-chat-interface/layouts-components/ai-chat-bubble-message.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.

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

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

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

Open related AI chat details template

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

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

Create a responsive UI block named "Long-Form AI Response Bubble with Feedback Actions and Sources Button" 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/ai-chat-bubbles/#long-form-ai-response-bubble-with-feedback-actions-and-sources-button. 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.

Source metadata:
- Catalog family: communication/ai-chat-bubbles
- Block ID: long-form-ai-response-bubble-with-feedback-actions-and-sources-button
- Source description: Long-form AI response bubble supports headings, lists, feedback actions, sharing controls, and a sources button.
- Preview iframe: https://preline.co/blocks/communication/ai-chat-bubbles/iframes/pro/long-form-ai-response-bubble-with-feedback-actions-and-sources-button.html (repo path: blocks/communication/ai-chat-bubbles/iframes/pro/long-form-ai-response-bubble-with-feedback-actions-and-sources-button.html)
- Source markup reference:
  - partials/pro/ai-chat-interface/layouts-components/ai-chat-bubble-reply.html

Block-specific fidelity rules:
- 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 whole block is one `<div class="py-5 group flex flex-col gap-y-1 text-foreground">` in a `w-full max-w-xl mx-auto` column: the assistant reply is plain flowing text with no bubble background, no border, no radius, no avatar, no sender name, and no timestamp.
  - Opening paragraph (`mb-6 leading-relaxed`): `Preline UI is an open-source UI component library built with Tailwind CSS. It helps developers and designers quickly build modern, responsive web interfaces by offering prebuilt, styled components and templates.` - only `Preline UI` and `Tailwind CSS` are wrapped in `font-semibold`.
  - Two `<h3 class="mb-3 font-medium text-xl">` headings in order: `Key Features:` then `Common Use Cases:`.
  - The Key Features list has exactly 7 bullets with bold lead-ins: `750+ UI components:` Buttons, modals, tooltips, forms, charts, etc.; `Framework support:` Works with plain HTML, React, Vue, Angular (Pro), and more.; `Figma design system:`; `Mobile-first & responsive:`; `Accessible (a11y):`; `Dark mode ready` (bold only, no trailing text); and a final bullet reading `Free & open-source, with a Pro version offering more advanced components, templates, and framework support.`
  - The Common Use Cases list has exactly 5 plain bullets, no bold: `Admin dashboards`, `SaaS landing pages`, `Ecommerce sites`, `Documentation pages`, `Any Tailwind-based web project`. Both lists use `mb-6 list-disc list-outside ps-7 space-y-3` with `ps-2` on each `<li>`.
  - The action row holds 5 circular icon buttons (`size-8 ... text-foreground/70 hover:bg-muted-hover rounded-full`), each wrapped in a Preline HSTooltip (`hs-tooltip [--placement:bottom-left]`, `hs-tooltip-toggle`) whose labels, in order, are `Regenerate`, `Copy`, `Good response`, `Bad response`, `Share` - rotate/refresh, copy, thumbs-up, thumbs-down and share-arrow outline icons. The action row is always visible; it is not hover-revealed.
  - The row ends with a pill button reading `25 sources` (`ms-1 py-1.5 px-3 ... rounded-full`) preceded by two overlapping `size-5 bg-background rounded-full` marks in a `-space-x-2` stack: the GitHub octocat glyph and a concentric-arc logo whose paths use `class="fill-primary"`. It is an overlay trigger - `data-hs-overlay="#hs-pro-chhds1" aria-controls="hs-pro-chhds1" aria-expanded="false"` - but the sources modal itself is not part of this block's markup.
  - Requires the Preline runtime for HSTooltip and HSOverlay only; there is no dropdown menu, no markdown/code block, no streaming or typing indicator, and no message composer in this block.

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

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

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

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

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

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

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

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

Open related AI chat details template