reachat 2.2.0 → 3.0.0

package/dist/docs.json

@@ -105,7 +105,7 @@
       },
       "theme": {
         "defaultValue": {
-          "value": "{\n  base: 'dark:text-white text-gray-500',\n  console: 'flex w-full gap-4 h-full',\n  companion: 'w-full h-full overflow-hidden',\n  empty: 'text-center flex-1',\n  appbar: 'flex p-5',\n  status: {\n    base: 'py-2 px-3 rounded-lg bg-gray-100/50 dark:bg-gray-800/30',\n    header: 'flex items-center gap-2',\n    icon: {\n      base: 'flex-shrink-0 w-4 h-4',\n      loading: 'text-blue-500 dark:text-blue-400',\n      complete: 'text-green-500 dark:text-green-400',\n      error: 'text-red-500 dark:text-red-400'\n    },\n    text: {\n      base: 'text-sm',\n      loading: 'text-gray-600 dark:text-gray-400',\n      complete: 'text-gray-600 dark:text-gray-400',\n      error: 'text-red-600 dark:text-red-400'\n    },\n    steps: {\n      base: 'mt-1 ml-6 space-y-0.5',\n      step: {\n        base: 'flex items-center gap-2',\n        icon: 'flex-shrink-0 w-3.5 h-3.5',\n        text: 'text-sm',\n        loading: 'text-gray-500 dark:text-gray-500',\n        complete: 'text-gray-500 dark:text-gray-500',\n        error: 'text-red-500 dark:text-red-400'\n      }\n    }\n  },\n  sessions: {\n    base: 'overflow-auto',\n    console:\n      'min-w-[150px] w-[30%] max-w-[300px] dark:bg-[#11111F] bg-[#F2F3F7] p-5 rounded-3xl',\n    companion: 'w-full h-full',\n    group:\n      'text-xs dart:text-gray-400 text-gray-700 mt-4 hover:bg-transparent mb-1',\n    create: 'relative mb-4 rounded-[10px] text-white',\n    session: {\n      base: [\n        'group my-1 rounded-[10px] p-2 text-gray-500 border border-transparent hover:bg-gray-300 hover:border-gray-400 [&_svg]:text-gray-500',\n        'dark:text-typography dark:text-gray-400 dark:hover:bg-gray-800/50 dark:hover:border-gray-700/50 dark:[&_svg]:text-gray-200'\n      ].join(' '),\n      active: [\n        'border border-gray-300 hover:border-gray-400 text-gray-700 bg-gray-200 hover:bg-gray-300 ',\n        'dark:text-gray-500 dark:bg-gray-800/70 dark:border-gray-700/50 dark:text-white dark:border-gray-700/70 dark:hover:bg-gray-800/50',\n        '[&_button]:opacity-100!'\n      ].join(' '),\n      delete: '[&>svg]:w-4 [&>svg]:h-4 opacity-0 group-hover:opacity-50!'\n    }\n  },\n  messages: {\n    base: '',\n    console: 'flex flex-col mx-5 flex-1 min-h-0',\n    companion: 'flex w-full h-full',\n    back: 'self-start p-0 my-2',\n    inner: 'flex-1 h-full flex flex-col',\n    title: ['text-base font-bold text-gray-500', 'dark:text-gray-200'].join(\n      ' '\n    ),\n    date: 'text-xs whitespace-nowrap text-gray-400',\n    content: [\n      'mt-2 flex-1 overflow-auto [&_hr]:bg-gray-200',\n      'dark:[&_hr]:bg-gray-800/60'\n    ].join(' '),\n    header: 'flex justify-between items-center gap-2',\n    showMore: 'mb-4',\n    message: {\n      base: 'mt-4 mb-4 flex flex-col p-0 rounded-sm border-none bg-transparent',\n      question: [\n        'relative font-semibold mb-4 px-4 py-4 pb-2 rounded-3xl rounded-br-none text-typography border bg-gray-200 border-gray-300 text-gray-900',\n        'dark:bg-gray-900/60 dark:border-gray-700/50 dark:text-gray-100'\n      ].join(' '),\n      response: [\n        'relative data-[compact=false]:px-4 text-gray-900',\n        'dark:text-gray-100'\n      ].join(' '),\n      overlay:\n        \"overflow-y-hidden max-h-[350px] after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-16 after:bg-linear-to-b after:from-transparent dark:after:to-gray-900 after:to-gray-200\",\n      cursor: 'inline-block w-1 h-4 bg-current',\n      expand: 'absolute bottom-1 right-1 z-10',\n      scrollToBottom: {\n        container: 'absolute bottom-2 left-1/2 transform -translate-x-1/2 z-10',\n        button: 'rounded-full p-2 shadow-lg'\n      },\n      files: {\n        base: 'mb-2 flex flex-wrap gap-3 ',\n        file: {\n          base: [\n            'flex items-center gap-2 border border-gray-300 px-3 py-2 rounded-lg cursor-pointer',\n            'dark:border-gray-700'\n          ].join(' '),\n          name: ['text-sm text-gray-500', 'dark:text-gray-200'].join(' ')\n        }\n      },\n      sources: {\n        base: 'my-4 flex flex-wrap gap-3',\n        source: {\n          base: [\n            'flex gap-2 border border-gray-200 px-4 py-2 rounded-lg cursor-pointer',\n            'dark:border-gray-700'\n          ].join(' '),\n          companion: 'flex-1 px-3 py-1.5',\n          image: 'max-w-10 max-h-10 rounded-md w-full h-fit self-center',\n          title: 'text-md block',\n          url: 'text-sm text-blue-400 underline'\n        }\n      },\n      markdown: {\n        copy: 'sticky py-1 [&>svg]:w-4 [&>svg]:h-4 opacity-50',\n        p: 'mb-2',\n        a: 'text-blue-400 underline',\n        table: 'table-auto w-full m-2',\n        th: 'px-4 py-2 text-left font-bold border-b border-gray-500',\n        td: 'px-4 py-2',\n        code: 'm-2 rounded-b relative',\n        toolbar:\n          'text-xs dark:bg-gray-700/50 flex items-center justify-between px-2 py-1 rounded-t sticky top-0 backdrop-blur-md bg-gray-200 ',\n        li: 'mb-2 ml-6',\n        ul: 'mb-4 list-disc',\n        ol: 'mb-4 list-decimal'\n      },\n      footer: {\n        base: 'mt-3 flex gap-1.5',\n        copy: [\n          'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-200 hover:text-gray-500',\n          'dark:hover:bg-gray-800 dark:hover:text-white text-gray-400'\n        ].join(' '),\n        upvote:\n          'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-700/40 hover:text-white text-gray-400',\n        downvote:\n          'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-700/40 hover:text-white text-gray-400',\n        refresh:\n          'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-700/40 hover:text-white text-gray-400'\n      }\n    }\n  },\n  input: {\n    base: 'flex mt-4 relative',\n    upload: ['px-5 py-2 text-gray-400 size-10', 'dark:gray-500'].join(' '),\n    input: [\n      'w-full border rounded-3xl px-3 py-2 pr-16 text-gray-500 border-gray-200 hover:bg-blue-100 hover:border-blue-500 after:hidden after:mx-10! bg-white [&>textarea]:w-full [&>textarea]:flex-none',\n      'dark:border-gray-700/50 dark:text-gray-200 dark:bg-gray-950 dark:hover:bg-blue-950/40'\n    ].join(' '),\n    actions: {\n      base: 'absolute flex gap-2 items-center right-5 inset-y-1/2 -translate-y-1/2 z-10',\n      send: [\n        'px-3 py-3 hover:bg-primary-hover rounded-full bg-gray-200 hover:bg-gray-300 text-gray-500',\n        'dark:text-white light:text-gray-500 dark:bg-gray-800 dark:hover:bg-gray-700'\n      ].join(' '),\n      stop: 'px-2 py-2 bg-red-500 text-white rounded-full hover:bg-red-700 '\n    },\n    popup: {\n      base: [\n        'bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden min-w-[200px] max-w-[300px]',\n        'dark:bg-gray-900 dark:border-gray-700'\n      ].join(' '),\n      content: 'overflow-y-auto max-h-[250px]',\n      item: [\n        'flex items-center gap-2 px-3 py-2 cursor-pointer transition-colors',\n        'hover:bg-gray-100 dark:hover:bg-gray-800'\n      ].join(' '),\n      itemHighlighted: 'bg-gray-100 dark:bg-gray-800',\n      itemIcon: [\n        'flex-shrink-0 w-5 h-5 text-gray-500 [&>svg]:w-full [&>svg]:h-full',\n        'dark:text-gray-400'\n      ].join(' '),\n      itemContent: 'flex flex-col min-w-0 flex-1',\n      itemLabel: [\n        'text-sm font-medium text-gray-900 truncate',\n        'dark:text-gray-100'\n      ].join(' '),\n      itemDescription: 'text-xs text-gray-500 dark:text-gray-400 truncate',\n      itemShortcut: 'text-xs text-gray-400 dark:text-gray-500 ml-auto',\n      empty: 'px-3 py-4 text-sm text-center text-gray-500 dark:text-gray-400',\n      loading: [\n        'flex items-center justify-center gap-2 px-3 py-4 text-gray-500',\n        'dark:text-gray-400'\n      ].join(' ')\n    },\n    tag: {\n      base: [\n        'inline-flex items-center px-1.5 py-0.5 mx-0.5 rounded',\n        'font-medium text-sm leading-[1.2] relative top-[1px]'\n      ].join(' '),\n      mention: [\n        'bg-blue-100 dark:bg-blue-900/30',\n        'text-blue-700 dark:text-blue-300'\n      ].join(' '),\n      command: [\n        'bg-purple-100 dark:bg-purple-900/30',\n        'text-purple-700 dark:text-purple-300'\n      ].join(' ')\n    },\n    editor: {\n      base: [\n        'outline-none w-full overflow-y-auto',\n        'text-inherit font-inherit',\n        '[&_.tiptap-paragraph]:m-0'\n      ].join(' '),\n      container: 'px-3 py-2 pr-16',\n      placeholder: [\n        '[&_.is-editor-empty]:before:content-[attr(data-placeholder)]',\n        '[&_.is-editor-empty]:before:text-gray-400',\n        '[&_.is-editor-empty]:before:dark:text-gray-500',\n        '[&_.is-editor-empty]:before:float-left',\n        '[&_.is-editor-empty]:before:h-0',\n        '[&_.is-editor-empty]:before:pointer-events-none'\n      ].join(' ')\n    }\n  },\n  suggestions: {\n    base: 'flex flex-wrap gap-2 mt-4',\n    item: {\n      base: [\n        'rounded-full! max-w-full py-2 px-4',\n        'bg-gray-100 border-gray-200 hover:bg-gray-200 hover:border-gray-300 text-gray-700',\n        'dark:bg-gray-800/50 dark:border-gray-700 dark:hover:bg-gray-700/70 dark:hover:border-gray-600 dark:text-gray-200',\n        '[&>svg]:w-4 [&>svg]:h-4 [&>svg]:text-blue-500 [&>svg]:dark:text-blue-400 [&>svg]:flex-shrink-0'\n      ].join(' '),\n      icon: 'w-4 h-4 text-blue-500 dark:text-blue-400 flex-shrink-0',\n      text: 'text-sm truncate'\n    }\n  },\n  chart: {\n    base: 'my-6',\n    title: 'text-sm font-medium mb-2 text-gray-600 dark:text-gray-400',\n    content: 'flex items-center justify-center',\n    error: {\n      base: [\n        'my-4 p-4 border rounded',\n        'border-red-300 bg-red-50 text-red-500',\n        'dark:border-red-700 dark:bg-red-900/20'\n      ].join(' '),\n      title: 'text-red-600 dark:text-red-400 text-sm font-medium mb-2',\n      code: 'text-xs overflow-auto'\n    },\n    warning: {\n      base: [\n        'my-4 p-4 border rounded',\n        'border-yellow-300 bg-yellow-50 text-yellow-600',\n        'dark:border-yellow-700 dark:bg-yellow-900/20 dark:text-yellow-400'\n      ].join(' '),\n      title: 'text-yellow-600 dark:text-yellow-400 text-sm font-medium mb-2'\n    }\n  }\n}"
+          "value": "{\n  base: 'dark:text-white text-gray-500',\n  console: 'flex w-full gap-4 h-full',\n  companion: 'w-full h-full overflow-hidden',\n  empty: 'text-center flex-1',\n  appbar: 'flex p-5',\n  status: {\n    base: 'py-2 px-3 rounded-lg bg-gray-100/50 dark:bg-gray-800/30',\n    header: 'flex items-center gap-2',\n    icon: {\n      base: 'flex-shrink-0 w-4 h-4',\n      loading: 'text-blue-500 dark:text-blue-400',\n      complete: 'text-green-500 dark:text-green-400',\n      error: 'text-red-500 dark:text-red-400'\n    },\n    text: {\n      base: 'text-sm',\n      loading: 'text-gray-600 dark:text-gray-400',\n      complete: 'text-gray-600 dark:text-gray-400',\n      error: 'text-red-600 dark:text-red-400'\n    },\n    steps: {\n      base: 'mt-1 ml-6 space-y-0.5',\n      step: {\n        base: 'flex items-center gap-2',\n        icon: 'flex-shrink-0 w-3.5 h-3.5',\n        text: 'text-sm',\n        loading: 'text-gray-500 dark:text-gray-500',\n        complete: 'text-gray-500 dark:text-gray-500',\n        error: 'text-red-500 dark:text-red-400'\n      }\n    }\n  },\n  sessions: {\n    base: 'overflow-auto',\n    console:\n      'min-w-[150px] w-[30%] max-w-[300px] dark:bg-[#11111F] bg-[#F2F3F7] p-5 rounded-3xl',\n    companion: 'w-full h-full',\n    group:\n      'text-xs dart:text-gray-400 text-gray-700 mt-4 hover:bg-transparent mb-1',\n    create: 'relative mb-4 rounded-[10px] text-white',\n    session: {\n      base: [\n        'group my-1 rounded-[10px] p-2 text-gray-500 border border-transparent hover:bg-gray-300 hover:border-gray-400 [&_svg]:text-gray-500',\n        'dark:text-typography dark:text-gray-400 dark:hover:bg-gray-800/50 dark:hover:border-gray-700/50 dark:[&_svg]:text-gray-200'\n      ].join(' '),\n      active: [\n        'border border-gray-300 hover:border-gray-400 text-gray-700 bg-gray-200 hover:bg-gray-300 ',\n        'dark:text-gray-500 dark:bg-gray-800/70 dark:border-gray-700/50 dark:text-white dark:border-gray-700/70 dark:hover:bg-gray-800/50',\n        '[&_button]:opacity-100!'\n      ].join(' '),\n      delete: '[&>svg]:w-4 [&>svg]:h-4 opacity-0 group-hover:opacity-50!'\n    }\n  },\n  messages: {\n    base: '',\n    console: 'flex flex-col mx-5 flex-1 min-h-0',\n    companion: 'flex w-full h-full',\n    back: 'self-start p-0 my-2',\n    inner: 'flex-1 h-full flex flex-col',\n    title: ['text-base font-bold text-gray-500', 'dark:text-gray-200'].join(\n      ' '\n    ),\n    date: 'text-xs whitespace-nowrap text-gray-400',\n    content: [\n      'mt-2 flex-1 overflow-auto [&_hr]:bg-gray-200',\n      'dark:[&_hr]:bg-gray-800/60'\n    ].join(' '),\n    header: 'flex justify-between items-center gap-2',\n    showMore: 'mb-4',\n    message: {\n      base: 'mt-4 mb-4 flex flex-col p-0 rounded-sm border-none bg-transparent',\n      question: [\n        'relative font-semibold mb-4 px-4 py-4 pb-2 rounded-3xl rounded-br-none text-typography border bg-gray-200 border-gray-300 text-gray-900',\n        'dark:bg-gray-900/60 dark:border-gray-700/50 dark:text-gray-100'\n      ].join(' '),\n      response: [\n        'relative data-[compact=false]:px-4 text-gray-900',\n        'dark:text-gray-100'\n      ].join(' '),\n      overlay:\n        \"overflow-y-hidden max-h-[350px] after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-16 after:bg-linear-to-b after:from-transparent dark:after:to-gray-900 after:to-gray-200\",\n      cursor: 'inline-block w-1 h-4 bg-current',\n      expand: 'absolute bottom-1 right-1 z-10',\n      scrollToBottom: {\n        container: 'absolute bottom-2 left-1/2 transform -translate-x-1/2 z-10',\n        button: 'rounded-full p-2 shadow-lg'\n      },\n      files: {\n        base: 'mb-2 flex flex-wrap gap-3 ',\n        file: {\n          base: [\n            'flex items-center gap-2 border border-gray-300 px-3 py-2 rounded-lg cursor-pointer',\n            'dark:border-gray-700'\n          ].join(' '),\n          name: ['text-sm text-gray-500', 'dark:text-gray-200'].join(' ')\n        }\n      },\n      sources: {\n        base: 'my-4 flex flex-wrap gap-3',\n        source: {\n          base: [\n            'flex gap-2 border border-gray-200 px-4 py-2 rounded-lg cursor-pointer',\n            'dark:border-gray-700'\n          ].join(' '),\n          companion: 'flex-1 px-3 py-1.5',\n          image: 'max-w-10 max-h-10 rounded-md w-full h-fit self-center',\n          title: 'text-md block',\n          url: 'text-sm text-blue-400 underline'\n        }\n      },\n      markdown: {\n        copy: 'sticky py-1 [&>svg]:w-4 [&>svg]:h-4 opacity-50',\n        p: 'mb-2',\n        a: 'text-blue-400 underline',\n        table: 'table-auto w-full m-2',\n        th: 'px-4 py-2 text-left font-bold border-b border-gray-500',\n        td: 'px-4 py-2',\n        code: 'm-2 rounded-b relative',\n        toolbar:\n          'text-xs dark:bg-gray-700/50 flex items-center justify-between px-2 py-1 rounded-t sticky top-0 backdrop-blur-md bg-gray-200 ',\n        li: 'mb-2 ml-6',\n        ul: 'mb-4 list-disc',\n        ol: 'mb-4 list-decimal'\n      },\n      footer: {\n        base: 'mt-3 flex gap-1.5',\n        copy: [\n          'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-200 hover:text-gray-500',\n          'dark:hover:bg-gray-800 dark:hover:text-white text-gray-400'\n        ].join(' '),\n        upvote:\n          'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-700/40 hover:text-white text-gray-400',\n        downvote:\n          'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-700/40 hover:text-white text-gray-400',\n        refresh:\n          'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-700/40 hover:text-white text-gray-400'\n      }\n    }\n  },\n  input: {\n    base: 'flex mt-4 relative',\n    upload: ['px-5 py-2 text-gray-400 size-10', 'dark:gray-500'].join(' '),\n    input: [\n      'w-full border rounded-3xl px-3 py-2 pr-16 text-gray-500 border-gray-200 hover:bg-blue-100 hover:border-blue-500 after:hidden after:mx-10! bg-white [&>textarea]:w-full [&>textarea]:flex-none',\n      'dark:border-gray-700/50 dark:text-gray-200 dark:bg-gray-950 dark:hover:bg-blue-950/40'\n    ].join(' '),\n    actions: {\n      base: 'absolute flex gap-2 items-center right-5 inset-y-1/2 -translate-y-1/2 z-10',\n      send: [\n        'px-3 py-3 hover:bg-primary-hover rounded-full bg-gray-200 hover:bg-gray-300 text-gray-500',\n        'dark:text-white light:text-gray-500 dark:bg-gray-800 dark:hover:bg-gray-700'\n      ].join(' '),\n      stop: 'px-2 py-2 bg-red-500 text-white rounded-full hover:bg-red-700 '\n    },\n    popup: {\n      base: [\n        'bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden min-w-[200px] max-w-[300px]',\n        'dark:bg-gray-900 dark:border-gray-700'\n      ].join(' '),\n      content: 'overflow-y-auto max-h-[250px]',\n      item: [\n        'flex items-center gap-2 px-3 py-2 cursor-pointer transition-colors',\n        'hover:bg-gray-100 dark:hover:bg-gray-800'\n      ].join(' '),\n      itemHighlighted: 'bg-gray-100 dark:bg-gray-800',\n      itemIcon: [\n        'flex-shrink-0 w-5 h-5 text-gray-500 [&>svg]:w-full [&>svg]:h-full',\n        'dark:text-gray-400'\n      ].join(' '),\n      itemContent: 'flex flex-col min-w-0 flex-1',\n      itemLabel: [\n        'text-sm font-medium text-gray-900 truncate',\n        'dark:text-gray-100'\n      ].join(' '),\n      itemDescription: 'text-xs text-gray-500 dark:text-gray-400 truncate',\n      itemShortcut: 'text-xs text-gray-400 dark:text-gray-500 ml-auto',\n      empty: 'px-3 py-4 text-sm text-center text-gray-500 dark:text-gray-400',\n      loading: [\n        'flex items-center justify-center gap-2 px-3 py-4 text-gray-500',\n        'dark:text-gray-400'\n      ].join(' ')\n    },\n    tag: {\n      base: [\n        'inline-flex items-center px-1.5 py-0.5 mx-0.5 rounded',\n        'font-medium text-sm leading-[1.2] relative top-[1px]'\n      ].join(' '),\n      mention: [\n        'bg-blue-100 dark:bg-blue-900/30',\n        'text-blue-700 dark:text-blue-300'\n      ].join(' '),\n      command: [\n        'bg-purple-100 dark:bg-purple-900/30',\n        'text-purple-700 dark:text-purple-300'\n      ].join(' ')\n    },\n    editor: {\n      base: [\n        'outline-none w-full overflow-y-auto',\n        'text-inherit font-inherit',\n        '[&_.tiptap-paragraph]:m-0'\n      ].join(' '),\n      container: 'px-3 py-2 pr-16',\n      placeholder: [\n        '[&_.is-editor-empty]:before:content-[attr(data-placeholder)]',\n        '[&_.is-editor-empty]:before:text-gray-400',\n        '[&_.is-editor-empty]:before:dark:text-gray-500',\n        '[&_.is-editor-empty]:before:float-left',\n        '[&_.is-editor-empty]:before:h-0',\n        '[&_.is-editor-empty]:before:pointer-events-none'\n      ].join(' ')\n    }\n  },\n  suggestions: {\n    base: 'flex flex-wrap gap-2 mt-4',\n    item: {\n      base: [\n        'rounded-full! max-w-full py-2 px-4',\n        'bg-gray-100 border-gray-200 hover:bg-gray-200 hover:border-gray-300 text-gray-700',\n        'dark:bg-gray-800/50 dark:border-gray-700 dark:hover:bg-gray-700/70 dark:hover:border-gray-600 dark:text-gray-200',\n        '[&>svg]:w-4 [&>svg]:h-4 [&>svg]:text-blue-500 [&>svg]:dark:text-blue-400 [&>svg]:flex-shrink-0'\n      ].join(' '),\n      icon: 'w-4 h-4 text-blue-500 dark:text-blue-400 flex-shrink-0',\n      text: 'text-sm truncate'\n    }\n  },\n  chart: {\n    base: 'my-6',\n    title: 'text-sm font-medium mb-2 text-gray-600 dark:text-gray-400',\n    content: 'flex items-center justify-center',\n    error: {\n      base: [\n        'my-4 p-4 border rounded',\n        'border-red-300 bg-red-50 text-red-500',\n        'dark:border-red-700 dark:bg-red-900/20'\n      ].join(' '),\n      title: 'text-red-600 dark:text-red-400 text-sm font-medium mb-2',\n      code: 'text-xs overflow-auto'\n    },\n    warning: {\n      base: [\n        'my-4 p-4 border rounded',\n        'border-yellow-300 bg-yellow-50 text-yellow-600',\n        'dark:border-yellow-700 dark:bg-yellow-900/20 dark:text-yellow-400'\n      ].join(' '),\n      title: 'text-yellow-600 dark:text-yellow-400 text-sm font-medium mb-2'\n    }\n  },\n  component: {\n    base: 'my-4'\n  }\n}"
         },
         "description": "Custom theme for the chat.",
         "name": "theme",
@@ -142,7 +142,7 @@
         ],
         "required": false,
         "type": {
-          "name": "Plugin<[], Node, Node>[]"
+          "name": "Plugin[]"
         }
       },
       "markdownComponents": {
@@ -164,6 +164,25 @@
           "name": "Components"
         }
       },
+      "components": {
+        "defaultValue": null,
+        "description": "A component catalog created via `componentCatalog()`.\nEnables dynamic component rendering from LLM responses using\nfenced code blocks (e.g. ```component).\n\nThis automatically wires in the necessary remark plugin and\nmarkdown component overrides. For advanced control, use the\ncatalog's `remarkPlugin` and `components` properties directly\nvia the `remarkPlugins` and `markdownComponents` props instead.",
+        "name": "components",
+        "parent": {
+          "fileName": "src/Chat.tsx",
+          "name": "ChatProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/Chat.tsx",
+            "name": "ChatProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "ComponentCatalog"
+        }
+      },
       "isLoading": {
         "defaultValue": null,
         "description": "Whether to display a loading state.",
@@ -346,7 +365,7 @@
       },
       "theme": {
         "defaultValue": {
-          "value": "{\n  base: 'dark:text-white text-gray-500',\n  console: 'flex w-full gap-4 h-full',\n  companion: 'w-full h-full overflow-hidden',\n  empty: 'text-center flex-1',\n  appbar: 'flex p-5',\n  status: {\n    base: 'py-2 px-3 rounded-lg bg-gray-100/50 dark:bg-gray-800/30',\n    header: 'flex items-center gap-2',\n    icon: {\n      base: 'flex-shrink-0 w-4 h-4',\n      loading: 'text-blue-500 dark:text-blue-400',\n      complete: 'text-green-500 dark:text-green-400',\n      error: 'text-red-500 dark:text-red-400'\n    },\n    text: {\n      base: 'text-sm',\n      loading: 'text-gray-600 dark:text-gray-400',\n      complete: 'text-gray-600 dark:text-gray-400',\n      error: 'text-red-600 dark:text-red-400'\n    },\n    steps: {\n      base: 'mt-1 ml-6 space-y-0.5',\n      step: {\n        base: 'flex items-center gap-2',\n        icon: 'flex-shrink-0 w-3.5 h-3.5',\n        text: 'text-sm',\n        loading: 'text-gray-500 dark:text-gray-500',\n        complete: 'text-gray-500 dark:text-gray-500',\n        error: 'text-red-500 dark:text-red-400'\n      }\n    }\n  },\n  sessions: {\n    base: 'overflow-auto',\n    console:\n      'min-w-[150px] w-[30%] max-w-[300px] dark:bg-[#11111F] bg-[#F2F3F7] p-5 rounded-3xl',\n    companion: 'w-full h-full',\n    group:\n      'text-xs dart:text-gray-400 text-gray-700 mt-4 hover:bg-transparent mb-1',\n    create: 'relative mb-4 rounded-[10px] text-white',\n    session: {\n      base: [\n        'group my-1 rounded-[10px] p-2 text-gray-500 border border-transparent hover:bg-gray-300 hover:border-gray-400 [&_svg]:text-gray-500',\n        'dark:text-typography dark:text-gray-400 dark:hover:bg-gray-800/50 dark:hover:border-gray-700/50 dark:[&_svg]:text-gray-200'\n      ].join(' '),\n      active: [\n        'border border-gray-300 hover:border-gray-400 text-gray-700 bg-gray-200 hover:bg-gray-300 ',\n        'dark:text-gray-500 dark:bg-gray-800/70 dark:border-gray-700/50 dark:text-white dark:border-gray-700/70 dark:hover:bg-gray-800/50',\n        '[&_button]:opacity-100!'\n      ].join(' '),\n      delete: '[&>svg]:w-4 [&>svg]:h-4 opacity-0 group-hover:opacity-50!'\n    }\n  },\n  messages: {\n    base: '',\n    console: 'flex flex-col mx-5 flex-1 min-h-0',\n    companion: 'flex w-full h-full',\n    back: 'self-start p-0 my-2',\n    inner: 'flex-1 h-full flex flex-col',\n    title: ['text-base font-bold text-gray-500', 'dark:text-gray-200'].join(\n      ' '\n    ),\n    date: 'text-xs whitespace-nowrap text-gray-400',\n    content: [\n      'mt-2 flex-1 overflow-auto [&_hr]:bg-gray-200',\n      'dark:[&_hr]:bg-gray-800/60'\n    ].join(' '),\n    header: 'flex justify-between items-center gap-2',\n    showMore: 'mb-4',\n    message: {\n      base: 'mt-4 mb-4 flex flex-col p-0 rounded-sm border-none bg-transparent',\n      question: [\n        'relative font-semibold mb-4 px-4 py-4 pb-2 rounded-3xl rounded-br-none text-typography border bg-gray-200 border-gray-300 text-gray-900',\n        'dark:bg-gray-900/60 dark:border-gray-700/50 dark:text-gray-100'\n      ].join(' '),\n      response: [\n        'relative data-[compact=false]:px-4 text-gray-900',\n        'dark:text-gray-100'\n      ].join(' '),\n      overlay:\n        \"overflow-y-hidden max-h-[350px] after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-16 after:bg-linear-to-b after:from-transparent dark:after:to-gray-900 after:to-gray-200\",\n      cursor: 'inline-block w-1 h-4 bg-current',\n      expand: 'absolute bottom-1 right-1 z-10',\n      scrollToBottom: {\n        container: 'absolute bottom-2 left-1/2 transform -translate-x-1/2 z-10',\n        button: 'rounded-full p-2 shadow-lg'\n      },\n      files: {\n        base: 'mb-2 flex flex-wrap gap-3 ',\n        file: {\n          base: [\n            'flex items-center gap-2 border border-gray-300 px-3 py-2 rounded-lg cursor-pointer',\n            'dark:border-gray-700'\n          ].join(' '),\n          name: ['text-sm text-gray-500', 'dark:text-gray-200'].join(' ')\n        }\n      },\n      sources: {\n        base: 'my-4 flex flex-wrap gap-3',\n        source: {\n          base: [\n            'flex gap-2 border border-gray-200 px-4 py-2 rounded-lg cursor-pointer',\n            'dark:border-gray-700'\n          ].join(' '),\n          companion: 'flex-1 px-3 py-1.5',\n          image: 'max-w-10 max-h-10 rounded-md w-full h-fit self-center',\n          title: 'text-md block',\n          url: 'text-sm text-blue-400 underline'\n        }\n      },\n      markdown: {\n        copy: 'sticky py-1 [&>svg]:w-4 [&>svg]:h-4 opacity-50',\n        p: 'mb-2',\n        a: 'text-blue-400 underline',\n        table: 'table-auto w-full m-2',\n        th: 'px-4 py-2 text-left font-bold border-b border-gray-500',\n        td: 'px-4 py-2',\n        code: 'm-2 rounded-b relative',\n        toolbar:\n          'text-xs dark:bg-gray-700/50 flex items-center justify-between px-2 py-1 rounded-t sticky top-0 backdrop-blur-md bg-gray-200 ',\n        li: 'mb-2 ml-6',\n        ul: 'mb-4 list-disc',\n        ol: 'mb-4 list-decimal'\n      },\n      footer: {\n        base: 'mt-3 flex gap-1.5',\n        copy: [\n          'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-200 hover:text-gray-500',\n          'dark:hover:bg-gray-800 dark:hover:text-white text-gray-400'\n        ].join(' '),\n        upvote:\n          'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-700/40 hover:text-white text-gray-400',\n        downvote:\n          'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-700/40 hover:text-white text-gray-400',\n        refresh:\n          'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-700/40 hover:text-white text-gray-400'\n      }\n    }\n  },\n  input: {\n    base: 'flex mt-4 relative',\n    upload: ['px-5 py-2 text-gray-400 size-10', 'dark:gray-500'].join(' '),\n    input: [\n      'w-full border rounded-3xl px-3 py-2 pr-16 text-gray-500 border-gray-200 hover:bg-blue-100 hover:border-blue-500 after:hidden after:mx-10! bg-white [&>textarea]:w-full [&>textarea]:flex-none',\n      'dark:border-gray-700/50 dark:text-gray-200 dark:bg-gray-950 dark:hover:bg-blue-950/40'\n    ].join(' '),\n    actions: {\n      base: 'absolute flex gap-2 items-center right-5 inset-y-1/2 -translate-y-1/2 z-10',\n      send: [\n        'px-3 py-3 hover:bg-primary-hover rounded-full bg-gray-200 hover:bg-gray-300 text-gray-500',\n        'dark:text-white light:text-gray-500 dark:bg-gray-800 dark:hover:bg-gray-700'\n      ].join(' '),\n      stop: 'px-2 py-2 bg-red-500 text-white rounded-full hover:bg-red-700 '\n    },\n    popup: {\n      base: [\n        'bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden min-w-[200px] max-w-[300px]',\n        'dark:bg-gray-900 dark:border-gray-700'\n      ].join(' '),\n      content: 'overflow-y-auto max-h-[250px]',\n      item: [\n        'flex items-center gap-2 px-3 py-2 cursor-pointer transition-colors',\n        'hover:bg-gray-100 dark:hover:bg-gray-800'\n      ].join(' '),\n      itemHighlighted: 'bg-gray-100 dark:bg-gray-800',\n      itemIcon: [\n        'flex-shrink-0 w-5 h-5 text-gray-500 [&>svg]:w-full [&>svg]:h-full',\n        'dark:text-gray-400'\n      ].join(' '),\n      itemContent: 'flex flex-col min-w-0 flex-1',\n      itemLabel: [\n        'text-sm font-medium text-gray-900 truncate',\n        'dark:text-gray-100'\n      ].join(' '),\n      itemDescription: 'text-xs text-gray-500 dark:text-gray-400 truncate',\n      itemShortcut: 'text-xs text-gray-400 dark:text-gray-500 ml-auto',\n      empty: 'px-3 py-4 text-sm text-center text-gray-500 dark:text-gray-400',\n      loading: [\n        'flex items-center justify-center gap-2 px-3 py-4 text-gray-500',\n        'dark:text-gray-400'\n      ].join(' ')\n    },\n    tag: {\n      base: [\n        'inline-flex items-center px-1.5 py-0.5 mx-0.5 rounded',\n        'font-medium text-sm leading-[1.2] relative top-[1px]'\n      ].join(' '),\n      mention: [\n        'bg-blue-100 dark:bg-blue-900/30',\n        'text-blue-700 dark:text-blue-300'\n      ].join(' '),\n      command: [\n        'bg-purple-100 dark:bg-purple-900/30',\n        'text-purple-700 dark:text-purple-300'\n      ].join(' ')\n    },\n    editor: {\n      base: [\n        'outline-none w-full overflow-y-auto',\n        'text-inherit font-inherit',\n        '[&_.tiptap-paragraph]:m-0'\n      ].join(' '),\n      container: 'px-3 py-2 pr-16',\n      placeholder: [\n        '[&_.is-editor-empty]:before:content-[attr(data-placeholder)]',\n        '[&_.is-editor-empty]:before:text-gray-400',\n        '[&_.is-editor-empty]:before:dark:text-gray-500',\n        '[&_.is-editor-empty]:before:float-left',\n        '[&_.is-editor-empty]:before:h-0',\n        '[&_.is-editor-empty]:before:pointer-events-none'\n      ].join(' ')\n    }\n  },\n  suggestions: {\n    base: 'flex flex-wrap gap-2 mt-4',\n    item: {\n      base: [\n        'rounded-full! max-w-full py-2 px-4',\n        'bg-gray-100 border-gray-200 hover:bg-gray-200 hover:border-gray-300 text-gray-700',\n        'dark:bg-gray-800/50 dark:border-gray-700 dark:hover:bg-gray-700/70 dark:hover:border-gray-600 dark:text-gray-200',\n        '[&>svg]:w-4 [&>svg]:h-4 [&>svg]:text-blue-500 [&>svg]:dark:text-blue-400 [&>svg]:flex-shrink-0'\n      ].join(' '),\n      icon: 'w-4 h-4 text-blue-500 dark:text-blue-400 flex-shrink-0',\n      text: 'text-sm truncate'\n    }\n  },\n  chart: {\n    base: 'my-6',\n    title: 'text-sm font-medium mb-2 text-gray-600 dark:text-gray-400',\n    content: 'flex items-center justify-center',\n    error: {\n      base: [\n        'my-4 p-4 border rounded',\n        'border-red-300 bg-red-50 text-red-500',\n        'dark:border-red-700 dark:bg-red-900/20'\n      ].join(' '),\n      title: 'text-red-600 dark:text-red-400 text-sm font-medium mb-2',\n      code: 'text-xs overflow-auto'\n    },\n    warning: {\n      base: [\n        'my-4 p-4 border rounded',\n        'border-yellow-300 bg-yellow-50 text-yellow-600',\n        'dark:border-yellow-700 dark:bg-yellow-900/20 dark:text-yellow-400'\n      ].join(' '),\n      title: 'text-yellow-600 dark:text-yellow-400 text-sm font-medium mb-2'\n    }\n  }\n}"
+          "value": "{\n  base: 'dark:text-white text-gray-500',\n  console: 'flex w-full gap-4 h-full',\n  companion: 'w-full h-full overflow-hidden',\n  empty: 'text-center flex-1',\n  appbar: 'flex p-5',\n  status: {\n    base: 'py-2 px-3 rounded-lg bg-gray-100/50 dark:bg-gray-800/30',\n    header: 'flex items-center gap-2',\n    icon: {\n      base: 'flex-shrink-0 w-4 h-4',\n      loading: 'text-blue-500 dark:text-blue-400',\n      complete: 'text-green-500 dark:text-green-400',\n      error: 'text-red-500 dark:text-red-400'\n    },\n    text: {\n      base: 'text-sm',\n      loading: 'text-gray-600 dark:text-gray-400',\n      complete: 'text-gray-600 dark:text-gray-400',\n      error: 'text-red-600 dark:text-red-400'\n    },\n    steps: {\n      base: 'mt-1 ml-6 space-y-0.5',\n      step: {\n        base: 'flex items-center gap-2',\n        icon: 'flex-shrink-0 w-3.5 h-3.5',\n        text: 'text-sm',\n        loading: 'text-gray-500 dark:text-gray-500',\n        complete: 'text-gray-500 dark:text-gray-500',\n        error: 'text-red-500 dark:text-red-400'\n      }\n    }\n  },\n  sessions: {\n    base: 'overflow-auto',\n    console:\n      'min-w-[150px] w-[30%] max-w-[300px] dark:bg-[#11111F] bg-[#F2F3F7] p-5 rounded-3xl',\n    companion: 'w-full h-full',\n    group:\n      'text-xs dart:text-gray-400 text-gray-700 mt-4 hover:bg-transparent mb-1',\n    create: 'relative mb-4 rounded-[10px] text-white',\n    session: {\n      base: [\n        'group my-1 rounded-[10px] p-2 text-gray-500 border border-transparent hover:bg-gray-300 hover:border-gray-400 [&_svg]:text-gray-500',\n        'dark:text-typography dark:text-gray-400 dark:hover:bg-gray-800/50 dark:hover:border-gray-700/50 dark:[&_svg]:text-gray-200'\n      ].join(' '),\n      active: [\n        'border border-gray-300 hover:border-gray-400 text-gray-700 bg-gray-200 hover:bg-gray-300 ',\n        'dark:text-gray-500 dark:bg-gray-800/70 dark:border-gray-700/50 dark:text-white dark:border-gray-700/70 dark:hover:bg-gray-800/50',\n        '[&_button]:opacity-100!'\n      ].join(' '),\n      delete: '[&>svg]:w-4 [&>svg]:h-4 opacity-0 group-hover:opacity-50!'\n    }\n  },\n  messages: {\n    base: '',\n    console: 'flex flex-col mx-5 flex-1 min-h-0',\n    companion: 'flex w-full h-full',\n    back: 'self-start p-0 my-2',\n    inner: 'flex-1 h-full flex flex-col',\n    title: ['text-base font-bold text-gray-500', 'dark:text-gray-200'].join(\n      ' '\n    ),\n    date: 'text-xs whitespace-nowrap text-gray-400',\n    content: [\n      'mt-2 flex-1 overflow-auto [&_hr]:bg-gray-200',\n      'dark:[&_hr]:bg-gray-800/60'\n    ].join(' '),\n    header: 'flex justify-between items-center gap-2',\n    showMore: 'mb-4',\n    message: {\n      base: 'mt-4 mb-4 flex flex-col p-0 rounded-sm border-none bg-transparent',\n      question: [\n        'relative font-semibold mb-4 px-4 py-4 pb-2 rounded-3xl rounded-br-none text-typography border bg-gray-200 border-gray-300 text-gray-900',\n        'dark:bg-gray-900/60 dark:border-gray-700/50 dark:text-gray-100'\n      ].join(' '),\n      response: [\n        'relative data-[compact=false]:px-4 text-gray-900',\n        'dark:text-gray-100'\n      ].join(' '),\n      overlay:\n        \"overflow-y-hidden max-h-[350px] after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-16 after:bg-linear-to-b after:from-transparent dark:after:to-gray-900 after:to-gray-200\",\n      cursor: 'inline-block w-1 h-4 bg-current',\n      expand: 'absolute bottom-1 right-1 z-10',\n      scrollToBottom: {\n        container: 'absolute bottom-2 left-1/2 transform -translate-x-1/2 z-10',\n        button: 'rounded-full p-2 shadow-lg'\n      },\n      files: {\n        base: 'mb-2 flex flex-wrap gap-3 ',\n        file: {\n          base: [\n            'flex items-center gap-2 border border-gray-300 px-3 py-2 rounded-lg cursor-pointer',\n            'dark:border-gray-700'\n          ].join(' '),\n          name: ['text-sm text-gray-500', 'dark:text-gray-200'].join(' ')\n        }\n      },\n      sources: {\n        base: 'my-4 flex flex-wrap gap-3',\n        source: {\n          base: [\n            'flex gap-2 border border-gray-200 px-4 py-2 rounded-lg cursor-pointer',\n            'dark:border-gray-700'\n          ].join(' '),\n          companion: 'flex-1 px-3 py-1.5',\n          image: 'max-w-10 max-h-10 rounded-md w-full h-fit self-center',\n          title: 'text-md block',\n          url: 'text-sm text-blue-400 underline'\n        }\n      },\n      markdown: {\n        copy: 'sticky py-1 [&>svg]:w-4 [&>svg]:h-4 opacity-50',\n        p: 'mb-2',\n        a: 'text-blue-400 underline',\n        table: 'table-auto w-full m-2',\n        th: 'px-4 py-2 text-left font-bold border-b border-gray-500',\n        td: 'px-4 py-2',\n        code: 'm-2 rounded-b relative',\n        toolbar:\n          'text-xs dark:bg-gray-700/50 flex items-center justify-between px-2 py-1 rounded-t sticky top-0 backdrop-blur-md bg-gray-200 ',\n        li: 'mb-2 ml-6',\n        ul: 'mb-4 list-disc',\n        ol: 'mb-4 list-decimal'\n      },\n      footer: {\n        base: 'mt-3 flex gap-1.5',\n        copy: [\n          'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-200 hover:text-gray-500',\n          'dark:hover:bg-gray-800 dark:hover:text-white text-gray-400'\n        ].join(' '),\n        upvote:\n          'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-700/40 hover:text-white text-gray-400',\n        downvote:\n          'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-700/40 hover:text-white text-gray-400',\n        refresh:\n          'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:opacity-100! hover:bg-gray-700/40 hover:text-white text-gray-400'\n      }\n    }\n  },\n  input: {\n    base: 'flex mt-4 relative',\n    upload: ['px-5 py-2 text-gray-400 size-10', 'dark:gray-500'].join(' '),\n    input: [\n      'w-full border rounded-3xl px-3 py-2 pr-16 text-gray-500 border-gray-200 hover:bg-blue-100 hover:border-blue-500 after:hidden after:mx-10! bg-white [&>textarea]:w-full [&>textarea]:flex-none',\n      'dark:border-gray-700/50 dark:text-gray-200 dark:bg-gray-950 dark:hover:bg-blue-950/40'\n    ].join(' '),\n    actions: {\n      base: 'absolute flex gap-2 items-center right-5 inset-y-1/2 -translate-y-1/2 z-10',\n      send: [\n        'px-3 py-3 hover:bg-primary-hover rounded-full bg-gray-200 hover:bg-gray-300 text-gray-500',\n        'dark:text-white light:text-gray-500 dark:bg-gray-800 dark:hover:bg-gray-700'\n      ].join(' '),\n      stop: 'px-2 py-2 bg-red-500 text-white rounded-full hover:bg-red-700 '\n    },\n    popup: {\n      base: [\n        'bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden min-w-[200px] max-w-[300px]',\n        'dark:bg-gray-900 dark:border-gray-700'\n      ].join(' '),\n      content: 'overflow-y-auto max-h-[250px]',\n      item: [\n        'flex items-center gap-2 px-3 py-2 cursor-pointer transition-colors',\n        'hover:bg-gray-100 dark:hover:bg-gray-800'\n      ].join(' '),\n      itemHighlighted: 'bg-gray-100 dark:bg-gray-800',\n      itemIcon: [\n        'flex-shrink-0 w-5 h-5 text-gray-500 [&>svg]:w-full [&>svg]:h-full',\n        'dark:text-gray-400'\n      ].join(' '),\n      itemContent: 'flex flex-col min-w-0 flex-1',\n      itemLabel: [\n        'text-sm font-medium text-gray-900 truncate',\n        'dark:text-gray-100'\n      ].join(' '),\n      itemDescription: 'text-xs text-gray-500 dark:text-gray-400 truncate',\n      itemShortcut: 'text-xs text-gray-400 dark:text-gray-500 ml-auto',\n      empty: 'px-3 py-4 text-sm text-center text-gray-500 dark:text-gray-400',\n      loading: [\n        'flex items-center justify-center gap-2 px-3 py-4 text-gray-500',\n        'dark:text-gray-400'\n      ].join(' ')\n    },\n    tag: {\n      base: [\n        'inline-flex items-center px-1.5 py-0.5 mx-0.5 rounded',\n        'font-medium text-sm leading-[1.2] relative top-[1px]'\n      ].join(' '),\n      mention: [\n        'bg-blue-100 dark:bg-blue-900/30',\n        'text-blue-700 dark:text-blue-300'\n      ].join(' '),\n      command: [\n        'bg-purple-100 dark:bg-purple-900/30',\n        'text-purple-700 dark:text-purple-300'\n      ].join(' ')\n    },\n    editor: {\n      base: [\n        'outline-none w-full overflow-y-auto',\n        'text-inherit font-inherit',\n        '[&_.tiptap-paragraph]:m-0'\n      ].join(' '),\n      container: 'px-3 py-2 pr-16',\n      placeholder: [\n        '[&_.is-editor-empty]:before:content-[attr(data-placeholder)]',\n        '[&_.is-editor-empty]:before:text-gray-400',\n        '[&_.is-editor-empty]:before:dark:text-gray-500',\n        '[&_.is-editor-empty]:before:float-left',\n        '[&_.is-editor-empty]:before:h-0',\n        '[&_.is-editor-empty]:before:pointer-events-none'\n      ].join(' ')\n    }\n  },\n  suggestions: {\n    base: 'flex flex-wrap gap-2 mt-4',\n    item: {\n      base: [\n        'rounded-full! max-w-full py-2 px-4',\n        'bg-gray-100 border-gray-200 hover:bg-gray-200 hover:border-gray-300 text-gray-700',\n        'dark:bg-gray-800/50 dark:border-gray-700 dark:hover:bg-gray-700/70 dark:hover:border-gray-600 dark:text-gray-200',\n        '[&>svg]:w-4 [&>svg]:h-4 [&>svg]:text-blue-500 [&>svg]:dark:text-blue-400 [&>svg]:flex-shrink-0'\n      ].join(' '),\n      icon: 'w-4 h-4 text-blue-500 dark:text-blue-400 flex-shrink-0',\n      text: 'text-sm truncate'\n    }\n  },\n  chart: {\n    base: 'my-6',\n    title: 'text-sm font-medium mb-2 text-gray-600 dark:text-gray-400',\n    content: 'flex items-center justify-center',\n    error: {\n      base: [\n        'my-4 p-4 border rounded',\n        'border-red-300 bg-red-50 text-red-500',\n        'dark:border-red-700 dark:bg-red-900/20'\n      ].join(' '),\n      title: 'text-red-600 dark:text-red-400 text-sm font-medium mb-2',\n      code: 'text-xs overflow-auto'\n    },\n    warning: {\n      base: [\n        'my-4 p-4 border rounded',\n        'border-yellow-300 bg-yellow-50 text-yellow-600',\n        'dark:border-yellow-700 dark:bg-yellow-900/20 dark:text-yellow-400'\n      ].join(' '),\n      title: 'text-yellow-600 dark:text-yellow-400 text-sm font-medium mb-2'\n    }\n  },\n  component: {\n    base: 'my-4'\n  }\n}"
         },
         "description": "Custom theme for the appbar",
         "name": "theme",
@@ -1296,6 +1315,177 @@
       }
     }
   },
+  {
+    "tags": {},
+    "filePath": "src/ComponentCatalog/ComponentError.tsx",
+    "description": "",
+    "displayName": "ComponentError",
+    "methods": [],
+    "props": {
+      "variant": {
+        "defaultValue": {
+          "value": "error"
+        },
+        "description": "The visual style variant of the error display.\nDefaults to 'error'.",
+        "name": "variant",
+        "parent": {
+          "fileName": "src/ComponentCatalog/ComponentError.tsx",
+          "name": "ComponentErrorProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/ComponentCatalog/ComponentError.tsx",
+            "name": "ComponentErrorProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"error\" | \"warning\""
+        }
+      },
+      "title": {
+        "defaultValue": null,
+        "description": "The heading text displayed at the top of the error.",
+        "name": "title",
+        "parent": {
+          "fileName": "src/ComponentCatalog/ComponentError.tsx",
+          "name": "ComponentErrorProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/ComponentCatalog/ComponentError.tsx",
+            "name": "ComponentErrorProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "message": {
+        "defaultValue": null,
+        "description": "The descriptive message explaining the error or warning.",
+        "name": "message",
+        "parent": {
+          "fileName": "src/ComponentCatalog/ComponentError.tsx",
+          "name": "ComponentErrorProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/ComponentCatalog/ComponentError.tsx",
+            "name": "ComponentErrorProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "code": {
+        "defaultValue": null,
+        "description": "The raw code or data that caused the error, displayed in a code block.",
+        "name": "code",
+        "parent": {
+          "fileName": "src/ComponentCatalog/ComponentError.tsx",
+          "name": "ComponentErrorProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/ComponentCatalog/ComponentError.tsx",
+            "name": "ComponentErrorProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      }
+    }
+  },
+  {
+    "tags": {},
+    "filePath": "src/ComponentCatalog/ComponentPre.tsx",
+    "description": "Creates a `pre` component override for react-markdown that intercepts\nfenced code blocks with the configured language tag and renders them\nvia the ComponentRenderer.\n\nChecks for a `language-{tag}` className on the nested `<code>` element\nand, if matched, extracts the text content and hands it off to the\nrenderer.\n\nAny non-matching `<pre>` blocks are passed through as-is.",
+    "displayName": "createComponentPre",
+    "methods": [],
+    "props": {}
+  },
+  {
+    "tags": {},
+    "filePath": "src/ComponentCatalog/ComponentRenderer.tsx",
+    "description": "",
+    "displayName": "ComponentRenderer",
+    "methods": [],
+    "props": {
+      "raw": {
+        "defaultValue": null,
+        "description": "The raw JSON string from the ```component code block.",
+        "name": "raw",
+        "parent": {
+          "fileName": "src/ComponentCatalog/ComponentRenderer.tsx",
+          "name": "ComponentRendererProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/ComponentCatalog/ComponentRenderer.tsx",
+            "name": "ComponentRendererProps"
+          }
+        ],
+        "required": true,
+        "type": {
+          "name": "string"
+        }
+      },
+      "definitions": {
+        "defaultValue": null,
+        "description": "The component definitions from the catalog.",
+        "name": "definitions",
+        "parent": {
+          "fileName": "src/ComponentCatalog/ComponentRenderer.tsx",
+          "name": "ComponentRendererProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/ComponentCatalog/ComponentRenderer.tsx",
+            "name": "ComponentRendererProps"
+          }
+        ],
+        "required": true,
+        "type": {
+          "name": "ComponentDefinitions"
+        }
+      },
+      "options": {
+        "defaultValue": null,
+        "description": "Optional catalog options (for onError callback).",
+        "name": "options",
+        "parent": {
+          "fileName": "src/ComponentCatalog/ComponentRenderer.tsx",
+          "name": "ComponentRendererProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/ComponentCatalog/ComponentRenderer.tsx",
+            "name": "ComponentRendererProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "ComponentCatalogOptions"
+        }
+      }
+    }
+  },
+  {
+    "tags": {
+      "example": "```tsx\nimport { componentCatalog, createChartComponentDef } from 'reachat';\n\nconst catalog = componentCatalog({\n  Chart: createChartComponentDef(),\n  // ... other components\n});\n```\n\nThe LLM can then output:\n```component\n{\n  \"type\": \"Chart\",\n  \"props\": {\n    \"type\": \"bar\",\n    \"data\": [{ \"key\": \"A\", \"data\": 10 }, { \"key\": \"B\", \"data\": 20 }],\n    \"title\": \"My Chart\"\n  }\n}\n```"
+    },
+    "filePath": "src/ComponentCatalog/chartComponentDef.tsx",
+    "description": "Wraps `ChartRenderer` as a component definition so charts can\nbe registered in a `componentCatalog()`.\n\nThe adapter renders a `ChartRenderer` internally using the same\nconfig-based API, with reaviz as the underlying chart library.\n\nBecause reaviz is an optional peer dependency, this adapter is\nfully tree-shakeable — it only loads reaviz code when imported.\n\nBoth `zod` and `reaviz` are required when this helper is used.",
+    "displayName": "createChartComponentDef",
+    "methods": [],
+    "props": {}
+  },
   {
     "tags": {},
     "filePath": "src/Markdown/CodeHighlighter.tsx",
@@ -1446,7 +1636,7 @@
         ],
         "required": false,
         "type": {
-          "name": "Plugin<[], Node, Node>[]"
+          "name": "Plugin[]"
         }
       },
       "rehypePlugins": {
@@ -1467,7 +1657,7 @@
         ],
         "required": false,
         "type": {
-          "name": "Plugin<[], Node, Node>[]"
+          "name": "Plugin[]"
         }
       },
       "customComponents": {
@@ -2091,137 +2281,129 @@
   },
   {
     "tags": {},
-    "filePath": "src/Markdown/charts/ChartError.tsx",
+    "filePath": "src/Markdown/charts/ChartRenderer.tsx",
     "description": "",
-    "displayName": "ChartError",
+    "displayName": "ChartRenderer",
     "methods": [],
     "props": {
-      "variant": {
-        "defaultValue": {
-          "value": "error"
-        },
-        "description": "The visual style variant of the error display.\nDefaults to 'error'.",
-        "name": "variant",
+      "config": {
+        "defaultValue": null,
+        "description": "The chart configuration.",
+        "name": "config",
         "parent": {
-          "fileName": "src/Markdown/charts/ChartError.tsx",
-          "name": "ChartErrorProps"
+          "fileName": "src/Markdown/charts/ChartRenderer.tsx",
+          "name": "ChartRendererProps"
         },
         "declarations": [
           {
-            "fileName": "src/Markdown/charts/ChartError.tsx",
-            "name": "ChartErrorProps"
+            "fileName": "src/Markdown/charts/ChartRenderer.tsx",
+            "name": "ChartRendererProps"
           }
         ],
-        "required": false,
+        "required": true,
         "type": {
-          "name": "\"error\" | \"warning\""
+          "name": "ChartConfig"
         }
       },
-      "title": {
+      "className": {
         "defaultValue": null,
-        "description": "The heading text displayed at the top of the error.",
-        "name": "title",
+        "description": "The class name to apply to the chart container.",
+        "name": "className",
         "parent": {
-          "fileName": "src/Markdown/charts/ChartError.tsx",
-          "name": "ChartErrorProps"
+          "fileName": "src/Markdown/charts/ChartRenderer.tsx",
+          "name": "ChartRendererProps"
         },
         "declarations": [
           {
-            "fileName": "src/Markdown/charts/ChartError.tsx",
-            "name": "ChartErrorProps"
+            "fileName": "src/Markdown/charts/ChartRenderer.tsx",
+            "name": "ChartRendererProps"
           }
         ],
         "required": false,
         "type": {
           "name": "string"
         }
-      },
-      "message": {
-        "defaultValue": null,
-        "description": "The descriptive message explaining the error or warning.",
-        "name": "message",
+      }
+    }
+  },
+  {
+    "tags": {},
+    "filePath": "src/Markdown/charts/ComponentError.tsx",
+    "description": "",
+    "displayName": "ComponentError",
+    "methods": [],
+    "props": {
+      "variant": {
+        "defaultValue": {
+          "value": "error"
+        },
+        "description": "The visual style variant of the error display.\nDefaults to 'error'.",
+        "name": "variant",
         "parent": {
-          "fileName": "src/Markdown/charts/ChartError.tsx",
-          "name": "ChartErrorProps"
+          "fileName": "src/ComponentCatalog/ComponentError.tsx",
+          "name": "ComponentErrorProps"
         },
         "declarations": [
           {
-            "fileName": "src/Markdown/charts/ChartError.tsx",
-            "name": "ChartErrorProps"
+            "fileName": "src/ComponentCatalog/ComponentError.tsx",
+            "name": "ComponentErrorProps"
           }
         ],
         "required": false,
         "type": {
-          "name": "string"
+          "name": "\"error\" | \"warning\""
         }
       },
-      "code": {
+      "title": {
         "defaultValue": null,
-        "description": "The raw code or data that caused the error, displayed in a code block.",
-        "name": "code",
+        "description": "The heading text displayed at the top of the error.",
+        "name": "title",
         "parent": {
-          "fileName": "src/Markdown/charts/ChartError.tsx",
-          "name": "ChartErrorProps"
+          "fileName": "src/ComponentCatalog/ComponentError.tsx",
+          "name": "ComponentErrorProps"
         },
         "declarations": [
           {
-            "fileName": "src/Markdown/charts/ChartError.tsx",
-            "name": "ChartErrorProps"
+            "fileName": "src/ComponentCatalog/ComponentError.tsx",
+            "name": "ComponentErrorProps"
           }
         ],
         "required": false,
         "type": {
           "name": "string"
         }
-      }
-    }
-  },
-  {
-    "tags": {},
-    "filePath": "src/Markdown/charts/ChartPre.tsx",
-    "description": "",
-    "displayName": "ChartPre",
-    "methods": [],
-    "props": {}
-  },
-  {
-    "tags": {},
-    "filePath": "src/Markdown/charts/ChartRenderer.tsx",
-    "description": "",
-    "displayName": "ChartRenderer",
-    "methods": [],
-    "props": {
-      "config": {
+      },
+      "message": {
         "defaultValue": null,
-        "description": "The chart configuration.",
-        "name": "config",
+        "description": "The descriptive message explaining the error or warning.",
+        "name": "message",
         "parent": {
-          "fileName": "src/Markdown/charts/ChartRenderer.tsx",
-          "name": "ChartRendererProps"
+          "fileName": "src/ComponentCatalog/ComponentError.tsx",
+          "name": "ComponentErrorProps"
         },
         "declarations": [
           {
-            "fileName": "src/Markdown/charts/ChartRenderer.tsx",
-            "name": "ChartRendererProps"
+            "fileName": "src/ComponentCatalog/ComponentError.tsx",
+            "name": "ComponentErrorProps"
           }
         ],
-        "required": true,
+        "required": false,
         "type": {
-          "name": "ChartConfig"
+          "name": "string"
         }
       },
-      "className": {
+      "code": {
         "defaultValue": null,
-        "description": "The class name to apply to the chart container.",
-        "name": "className",
+        "description": "The raw code or data that caused the error, displayed in a code block.",
+        "name": "code",
         "parent": {
-          "fileName": "src/Markdown/charts/ChartRenderer.tsx",
-          "name": "ChartRendererProps"
+          "fileName": "src/ComponentCatalog/ComponentError.tsx",
+          "name": "ComponentErrorProps"
         },
         "declarations": [
           {
-            "fileName": "src/Markdown/charts/ChartRenderer.tsx",
-            "name": "ChartRendererProps"
+            "fileName": "src/ComponentCatalog/ComponentError.tsx",
+            "name": "ComponentErrorProps"
           }
         ],
         "required": false,