@patternfly/chatbot 6.4.0-prerelease.13 → 6.4.0-prerelease.14

package/dist/cjs/Message/CodeBlockMessage/CodeBlockMessage.js

@@ -28,9 +28,9 @@ const CodeBlockMessage = (_a) => {
     const [copied, setCopied] = (0, react_1.useState)(false);
     const [isExpanded, setIsExpanded] = (0, react_1.useState)(false);
     const buttonRef = (0, react_1.useRef)();
-    const tooltipID = (0, react_1.useId)();
-    const toggleId = (0, react_1.useId)();
-    const contentId = (0, react_1.useId)();
+    const tooltipID = (0, react_core_1.getUniqueId)();
+    const toggleId = (0, react_core_1.getUniqueId)();
+    const contentId = (0, react_core_1.getUniqueId)();
     const codeBlockRef = (0, react_1.useRef)(null);
     const language = (_b = /language-(\w+)/.exec(className || '')) === null || _b === void 0 ? void 0 : _b[1];
     // Get custom toggle text from data attributes if available - for use with rehype plugins

package/dist/esm/Message/CodeBlockMessage/CodeBlockMessage.js

@@ -13,9 +13,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // ============================================================================
 // 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, CodeBlockAction, CodeBlockCode, Button, Tooltip, ExpandableSection, ExpandableSectionToggle, ExpandableSectionVariant } from '@patternfly/react-core';
+import { CodeBlock, CodeBlockAction, CodeBlockCode, Button, Tooltip, ExpandableSection, ExpandableSectionToggle, ExpandableSectionVariant, getUniqueId } from '@patternfly/react-core';
 import { CheckIcon } from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import { CopyIcon } from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 const DEFAULT_EXPANDED_TEXT = 'Show less';
@@ -26,9 +26,9 @@ const CodeBlockMessage = (_a) => {
     const [copied, setCopied] = useState(false);
     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(null);
     const language = (_b = /language-(\w+)/.exec(className || '')) === null || _b === void 0 ? void 0 : _b[1];
     // Get custom toggle text from data attributes if available - for use with rehype plugins

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "6.4.0-prerelease.13",
+  "version": "6.4.0-prerelease.14",
   "description": "This library provides React components based on PatternFly 6 that can be used to build chatbots.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -49,8 +49,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",

package/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx

@@ -331,7 +331,16 @@ Setting up cluster console...`;
         </CardHeader>
         <CardExpandableContent>
           <CardBody>
-            <hr className="pf-v6-u-mb-md" />
+            <hr
+              style={
+                {
+                  border: 'none',
+                  height: 'var(--pf-t--global--border--width--divider--default)',
+                  backgroundColor: 'var(--pf-t--global--border--color--control--read-only)'
+                } as React.CSSProperties
+              }
+              className="pf-v6-u-mb-md"
+            />
             <Accordion
               style={
                 {

package/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];