Chatbox is not safely parsing when contents include code

[napter]

Describe the bug
The following input gets no response and causes a console error that references the onopen function from the code. It appears that the code is somehow being executed - or at the very least not safely parsed.

To Reproduce
Try sending the following:

change the modal to use nextui modal. dont output all the code, just the parts that we need to change:
The Modal handles the focus within the modal content. It means that you can use the modal with form elements without any problem. the focus returns to the trigger when the modal closes.


Preview

Code
App.jsx
MailIcon.jsx
LockIcon.jsx
import React from "react";
import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure, Checkbox, Input, Link} from "@nextui-org/react";
import {MailIcon} from './MailIcon.jsx';
import {LockIcon} from './LockIcon.jsx';

export default function App() {
  const {isOpen, onOpen, onOpenChange} = useDisclosure();

  return (
    <>
      <Button onPress={onOpen} color="primary">Open Modal</Button>
      <Modal 
        isOpen={isOpen} 
        onOpenChange={onOpenChange}
        placement="top-center"
      >
        <ModalContent>
          {(onClose) => (
            <>
              <ModalHeader className="flex flex-col gap-1">Log in</ModalHeader>
              <ModalBody>
                <Input
                  autoFocus
                  endContent={
                    <MailIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
                  }
                  label="Email"
                  placeholder="Enter your email"
                  variant="bordered"
                />
                <Input
                  endContent={
                    <LockIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
                  }
                  label="Password"
                  placeholder="Enter your password"
                  type="password"
                  variant="bordered"
                />
                <div className="flex py-2 px-1 justify-between">
                  <Checkbox
                    classNames={{
                      label: "text-small",
                    }}
                  >
                    Remember me
                  </Checkbox>
                  <Link color="primary" href="#" size="sm">
                    Forgot password?
                  </Link>
                </div>
              </ModalBody>
              <ModalFooter>
                <Button color="danger" variant="flat" onPress={onClose}>
                  Close
                </Button>
                <Button color="primary" onPress={onClose}>
                  Sign in
                </Button>
              </ModalFooter>
            </>
          )}
        </ModalContent>
      </Modal>
    </>
  );
}

It throws in console:
Uncaught (in promise) TypeError: Cannot create property 'u' on string '{onOpen}'
at I (shared.js:2:746597)
...

Please complete the following information):

• OS: Windows
• Browser: Chrome
• Extension Version: 2.4.8

Additional context
其他
Add any other context about the problem here.

[josStorer]

fixed in v2.4.9
and it's also recommended to wrap your code in
```
YOUR CODE
```