{
  "name": "PosTypingIndicator",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/PosTypingIndicator.tsx",
  "chapterTag": "26 Embed Extras",
  "chapter": "26-embed-extras.html",
  "sectionId": "pos-messages",
  "elName": "PosMessage",
  "demoUrl": "https://brand.magicblocks.ai/components/26-embed-extras#pos-messages",
  "hasLiveDemo": false,
  "description": "",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "PosTypingIndicator",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "PosTypingIndicatorProps",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { PosTypingIndicator } from \"@magicblocksai/ui\";",
  "props": [],
  "classesUsed": [
    "pos-typing",
    "pos-typing-dot"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"pos-theme-scope\" style=\"--p-side-width:380px\"><div class=\"pos-msg is-agent\"><div class=\"pos-msg-bubble\">Let&#x27;s get you priced. What are we doing today?</div></div><div class=\"pos-msg is-user\"><div class=\"pos-msg-bubble\">Refinancing</div></div><div class=\"pos-typing\" role=\"status\" aria-label=\"Typing\"><span class=\"pos-typing-dot\"></span><span class=\"pos-typing-dot\"></span><span class=\"pos-typing-dot\"></span></div></div>",
    "css": ".pos-typing { align-self: flex-start; display: flex; align-items: center; gap: 5px; padding: 14px 17px; background: var(--p-bubble); border-radius: var(--p-r-bubble) var(--p-r-bubble) var(--p-r-bubble) 5px; animation: pos-in 260ms var(--ease) both; }\n\n.pos-typing-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--p-fg); animation: pos-dot 1.25s var(--ease) infinite; }"
  }
}