chore(docs): Update README and package file to include info on React 17

README.md

@@ -18,6 +18,8 @@ Make sure to add the CSS imports as the last import in your index file. The exte
 import '@patternfly/chatbot/dist/css/main.css';
 ```
 
+If you are using React 17, ChatBot currently has a dependency on [react-markdown](https://github.com/remarkjs/react-markdown) that relies on React 18 and 19. There is an older version of react-markdown (8.0.7) that supports 17, but it does not have support for 19. You should be able to add `"react"` and `"react-dom"` of the appropriate version to the `overrides` section of your `package.json` file if you need to use ChatBot with 17.
+
 ## Contribution guide
 
 ### AI-assisted development guidelines

packages/module/package.json

@@ -50,8 +50,8 @@
     "unist-util-visit": "^5.0.0"
   },
   "peerDependencies": {
-    "react": "^17 || ^18 || ^19",
-    "react-dom": "^17 || ^18 || ^19"
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
   },
   "devDependencies": {
     "@patternfly/documentation-framework": "6.16.0",

packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.tsx

@@ -1,7 +1,7 @@
 // ============================================================================
 // Chatbot Main - Message - Content - Code Block
 // ============================================================================
-import { useState, useRef, useId, useCallback, useEffect } from 'react';
+import { useState, useRef, useCallback, useEffect } from 'react';
 // Import PatternFly components
 import {
   CodeBlock,
@@ -13,7 +13,8 @@ import {
   ExpandableSectionToggle,
   ExpandableSectionProps,
   ExpandableSectionToggleProps,
-  ExpandableSectionVariant
+  ExpandableSectionVariant,
+  getUniqueId
 } from '@patternfly/react-core';
 
 import { CheckIcon } from '@patternfly/react-icons/dist/esm/icons/check-icon';
@@ -56,9 +57,9 @@ const CodeBlockMessage = ({
   const [isExpanded, setIsExpanded] = useState(false);
 
   const buttonRef = useRef();
-  const tooltipID = useId();
-  const toggleId = useId();
-  const contentId = useId();
+  const tooltipID = getUniqueId();
+  const toggleId = getUniqueId();
+  const contentId = getUniqueId();
   const codeBlockRef = useRef<HTMLDivElement>(null);
 
   const language = /language-(\w+)/.exec(className || '')?.[1];