@patternfly/chatbot 6.7.0-prerelease.3 → 6.7.0-prerelease.5

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

@@ -1,6 +1,5 @@
 import { FunctionComponent, useState } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
-import patternflyAvatar from './patternfly_avatar.jpg';
 import { Checkbox, Flex, FlexItem } from '@patternfly/react-core';
 
 export const MessageWithToolCallExample: FunctionComponent = () => {
@@ -19,7 +18,6 @@ export const MessageWithToolCallExample: FunctionComponent = () => {
         <Message
           name="Bot"
           role="bot"
-          avatar={patternflyAvatar}
           content="This example has a static tool call title:"
           toolCall={{
             titleText: "Calling 'awesome_tool'",
@@ -30,7 +28,6 @@ export const MessageWithToolCallExample: FunctionComponent = () => {
         <Message
           name="Bot"
           role="bot"
-          avatar={patternflyAvatar}
           content="This example has an expandable tool call title, with an additional description:"
           toolCall={{
             titleText: "Calling 'awesome_tool_expansion'",
@@ -42,7 +39,6 @@ export const MessageWithToolCallExample: FunctionComponent = () => {
         <Message
           name="Bot"
           role="bot"
-          avatar={patternflyAvatar}
           content="This example has an expandable tool call that is expanded by default:"
           toolCall={{
             isDefaultExpanded: true,

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

@@ -1,6 +1,5 @@
 import { useState, FunctionComponent, MouseEvent as ReactMouseEvent } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
-import patternflyAvatar from './patternfly_avatar.jpg';
 import { CopyIcon, WrenchIcon } from '@patternfly/react-icons';
 import {
   Button,
@@ -27,7 +26,6 @@ export const MessageWithToolResponseExample: FunctionComponent = () => {
       <Message
         name="Bot"
         role="bot"
-        avatar={patternflyAvatar}
         content="This message has a body description that's within the recommended limit of 2 lines:"
         toolResponse={{
           toggleContent: 'Tool response: toolName',
@@ -138,7 +136,6 @@ export const MessageWithToolResponseExample: FunctionComponent = () => {
       <Message
         name="Bot"
         role="bot"
-        avatar={patternflyAvatar}
         content="This message has a tool response that is collapsed by default:"
         toolResponse={{
           isDefaultExpanded: false,

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

@@ -333,6 +333,12 @@ _Italic text, formatted with single underscores_
         avatar={userAvatar}
         avatarProps={{ isBordered: true }}
       />
+      <Message
+        name="User"
+        role="user"
+        content="This is a user message with `avatarProps` set to set an avatar with initials and a blue color."
+        avatarProps={{ initials: 'A', color: 'blue' }}
+      />
       <Message name="User" role="user" content="This is a user message with no avatar" />
       <Message
         name="User"

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

@@ -1,7 +1,6 @@
 import { Fragment, FunctionComponent, useState, useEffect } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import userAvatar from './user_avatar.svg';
-import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 import {
   Accordion,
   AccordionContent,
@@ -637,7 +636,6 @@ export const UserMessageWithExtraContent: FunctionComponent = () => (
       }}
     />
     <Message
-      avatar={patternflyAvatar}
       name="Bot"
       role="bot"
       content="This is a message with a live progress summmary card."
@@ -647,7 +645,6 @@ export const UserMessageWithExtraContent: FunctionComponent = () => (
       }}
     />
     <Message
-      avatar={patternflyAvatar}
       name="Bot"
       role="bot"
       content="This is a message with a version selector card."
@@ -657,7 +654,6 @@ export const UserMessageWithExtraContent: FunctionComponent = () => (
       }}
     />
     <Message
-      avatar={patternflyAvatar}
       name="Bot"
       role="bot"
       content="All set! I've finished building the Discovery ISO. The next step is to download it and boot your hosts, which you can do using the summary card I've prepared for you:"

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotWelcomeInteraction.tsx

@@ -8,7 +8,6 @@ import MessageBar from '@patternfly/chatbot/dist/dynamic/MessageBar';
 import MessageBox from '@patternfly/chatbot/dist/dynamic/MessageBox';
 import Message, { MessageProps } from '@patternfly/chatbot/dist/dynamic/Message';
 import userAvatar from '../Messages/user_avatar.svg';
-import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 import { FormGroup, Radio } from '@patternfly/react-core';
 
 export const ChatbotWelcomeInteractionDemo: FunctionComponent = () => {
@@ -50,7 +49,6 @@ export const ChatbotWelcomeInteractionDemo: FunctionComponent = () => {
       content: 'API response goes here',
       name: 'Bot',
       isLoading: true,
-      avatar: patternflyAvatar,
       timestamp: date.toLocaleString()
     });
     setMessages(newMessages);
@@ -70,7 +68,6 @@ export const ChatbotWelcomeInteractionDemo: FunctionComponent = () => {
         content: 'API response goes here',
         name: 'Bot',
         isLoading: false,
-        avatar: patternflyAvatar,
         timestamp: date.toLocaleString(),
         actions: {
           // eslint-disable-next-line no-console

package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.tsx

@@ -30,7 +30,6 @@ import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg';
 import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
 import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
 import userAvatar from '../Messages/user_avatar.svg';
-import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 import { getTrackingProviders } from '@patternfly/chatbot/dist/dynamic/tracking';
 import { InitProps } from '@patternfly/chatbot/dist/dynamic/tracking';
 import '@patternfly/react-core/dist/styles/base.css';
@@ -108,7 +107,6 @@ const initialMessages: MessageProps[] = [
     role: 'bot',
     content: markdown,
     name: 'Bot',
-    avatar: patternflyAvatar,
     timestamp: date.toLocaleString(),
     actions: {
       positive: { onClick: () => tracking.trackSingleItem(actionEventName, { response: 'Good response' }) },
@@ -225,7 +223,6 @@ export const ChatbotDemo: FunctionComponent = () => {
       content: 'API response goes here',
       name: 'Bot',
       isLoading: true,
-      avatar: patternflyAvatar,
       timestamp: date.toLocaleString()
     });
     setMessages(newMessages);
@@ -245,7 +242,6 @@ export const ChatbotDemo: FunctionComponent = () => {
         content: 'API response goes here',
         name: 'Bot',
         isLoading: false,
-        avatar: patternflyAvatar,
         timestamp: date.toLocaleString(),
         actions: {
           positive: { onClick: () => tracking.trackSingleItem(actionEvent2, { response: 'Good response' }) },

package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachment.tsx

@@ -28,7 +28,6 @@ import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg';
 import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
 import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
 import userAvatar from '../Messages/user_avatar.svg';
-import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/chatbot/dist/css/main.css';
 
@@ -70,7 +69,6 @@ export const BasicDemo: FunctionComponent = () => {
     {
       role: 'bot',
       content: 'Great, I can reference this attachment throughout our conversation.',
-      avatar: patternflyAvatar,
       name: 'Bot'
     }
   ];

package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachmentMenu.tsx

@@ -14,7 +14,6 @@ import FileDetailsLabel from '@patternfly/chatbot/dist/dynamic/FileDetailsLabel'
 import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon, UploadIcon } from '@patternfly/react-icons';
 import { useDropzone } from 'react-dropzone';
 import userAvatar from '../Messages/user_avatar.svg';
-import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/chatbot/dist/css/main.css';
 import { cloneElement, FunctionComponent, isValidElement, ReactNode, useState, Children } from 'react';
@@ -79,8 +78,7 @@ const messages: MessageProps[] = [
   {
     role: 'bot',
     content: 'I sure can!',
-    name: 'Bot',
-    avatar: patternflyAvatar
+    name: 'Bot'
   }
 ];
 

package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotCompact.tsx

@@ -30,7 +30,6 @@ import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg';
 import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
 import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
 import userAvatar from '../Messages/user_avatar.svg';
-import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 
 const footnoteProps = {
   label: 'Always review AI-generated content prior to use.'
@@ -89,7 +88,6 @@ const initialMessages: MessageProps[] = [
     role: 'bot',
     content: markdown,
     name: 'Bot',
-    avatar: patternflyAvatar,
     timestamp: date.toLocaleString(),
     actions: {
       // eslint-disable-next-line no-console
@@ -208,7 +206,6 @@ export const ChatbotDemo: FunctionComponent = () => {
       content: 'API response goes here',
       name: 'Bot',
       isLoading: true,
-      avatar: patternflyAvatar,
       timestamp: date.toLocaleString()
     });
     setMessages(newMessages);
@@ -228,7 +225,6 @@ export const ChatbotDemo: FunctionComponent = () => {
         content: 'API response goes here',
         name: 'Bot',
         isLoading: false,
-        avatar: patternflyAvatar,
         timestamp: date.toLocaleString(),
         actions: {
           // eslint-disable-next-line no-console

package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotDisplayMode.tsx

@@ -48,7 +48,6 @@ import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
 import OpenDrawerRightIcon from '@patternfly/react-icons/dist/esm/icons/open-drawer-right-icon';
 import OutlinedWindowRestoreIcon from '@patternfly/react-icons/dist/esm/icons/outlined-window-restore-icon';
 import userAvatar from '../Messages/user_avatar.svg';
-import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/chatbot/dist/css/main.css';
 
@@ -75,7 +74,6 @@ const initialMessages: MessageProps[] = [
     role: 'bot',
     content: markdown,
     name: 'Bot',
-    avatar: patternflyAvatar,
     timestamp: date.toLocaleString(),
     actions: {
       // eslint-disable-next-line no-console
@@ -198,7 +196,6 @@ export const ChatbotDisplayModeDemo: FunctionComponent = () => {
       role: 'bot',
       content: 'API response goes here',
       name: 'Bot',
-      avatar: patternflyAvatar,
       isLoading: true,
       timestamp: date.toLocaleString()
     });
@@ -213,7 +210,6 @@ export const ChatbotDisplayModeDemo: FunctionComponent = () => {
         role: 'bot',
         content: 'API response goes here',
         name: 'Bot',
-        avatar: patternflyAvatar,
         isLoading: false,
         actions: {
           // eslint-disable-next-line no-console

package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotInDrawer.tsx

@@ -41,7 +41,6 @@ import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
 import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
 import { BarsIcon } from '@patternfly/react-icons';
 import userAvatar from '../Messages/user_avatar.svg';
-import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/chatbot/dist/css/main.css';
 
@@ -102,7 +101,6 @@ const initialMessages: MessageProps[] = [
     role: 'bot',
     content: markdown,
     name: 'Bot',
-    avatar: patternflyAvatar,
     timestamp: date.toLocaleString(),
     actions: {
       // eslint-disable-next-line no-console
@@ -218,7 +216,6 @@ export const EmbeddedChatbotDemo: FunctionComponent = () => {
       role: 'bot',
       content: 'API response goes here',
       name: 'Bot',
-      avatar: patternflyAvatar,
       isLoading: true,
       timestamp: date.toLocaleString()
     });
@@ -238,7 +235,6 @@ export const EmbeddedChatbotDemo: FunctionComponent = () => {
         role: 'bot',
         content: 'API response goes here',
         name: 'Bot',
-        avatar: patternflyAvatar,
         isLoading: false,
         actions: {
           // eslint-disable-next-line no-console

package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotScrolling.tsx

@@ -31,7 +31,6 @@ import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg';
 import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
 import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
 import userAvatar from '../Messages/user_avatar.svg';
-import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/chatbot/dist/css/main.css';
 
@@ -94,7 +93,6 @@ const initialMessages: MessageProps[] = [
     role: 'bot',
     content: markdown,
     name: 'Bot',
-    avatar: patternflyAvatar,
     timestamp: date.toLocaleString(),
     actions: {
       // eslint-disable-next-line no-console
@@ -233,7 +231,6 @@ export const ChatbotScrollingDemo: React.FunctionComponent = () => {
       content: 'API response goes here',
       name: 'Bot',
       isLoading: true,
-      avatar: patternflyAvatar,
       timestamp: date.toLocaleString()
     });
     setMessages(newMessages);
@@ -255,7 +252,6 @@ export const ChatbotScrollingDemo: React.FunctionComponent = () => {
         content: 'API response goes here.',
         name: 'Bot',
         isLoading: false,
-        avatar: patternflyAvatar,
         timestamp: date.toLocaleString(),
         actions: {
           // eslint-disable-next-line no-console

package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotTranscripts.tsx

@@ -30,7 +30,6 @@ import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg';
 import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
 import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
 import userAvatar from '../Messages/user_avatar.svg';
-import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/chatbot/dist/css/main.css';
 import saveAs from 'file-saver';
@@ -182,7 +181,6 @@ export const ChatbotDemo: FunctionComponent = () => {
       role: 'bot',
       content: markdown,
       name: 'Bot',
-      avatar: patternflyAvatar,
       timestamp: date.toLocaleString(),
       actions: {
         download: {
@@ -193,7 +191,6 @@ export const ChatbotDemo: FunctionComponent = () => {
                 role: 'bot',
                 content: markdown,
                 name: 'Bot',
-                avatar: patternflyAvatar,
                 timestamp: date.toLocaleString()
               },
               selectedModel
@@ -292,7 +289,6 @@ export const ChatbotDemo: FunctionComponent = () => {
       content: 'API response goes here',
       name: 'Bot',
       isLoading: true,
-      avatar: patternflyAvatar,
       timestamp: date.toLocaleString()
     });
     setMessages(newMessages);
@@ -308,7 +304,6 @@ export const ChatbotDemo: FunctionComponent = () => {
       loadedMessages.pop();
       const id = generateId();
       const timestamp = date.toLocaleString();
-      const avatar = patternflyAvatar;
       const name = 'Bot';
       const content = 'API response goes here';
       const role = 'bot';
@@ -318,7 +313,6 @@ export const ChatbotDemo: FunctionComponent = () => {
         content,
         name,
         isLoading: false,
-        avatar,
         timestamp,
         actions: {
           download: {
@@ -329,7 +323,6 @@ export const ChatbotDemo: FunctionComponent = () => {
                   role,
                   content,
                   name,
-                  avatar,
                   timestamp
                 },
                 selectedModel

package/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedChatbot.tsx

@@ -39,7 +39,6 @@ import PFHorizontalLogoColor from '../UI/PF-HorizontalLogo-Color.svg';
 import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg';
 import { BarsIcon } from '@patternfly/react-icons';
 import userAvatar from '../Messages/user_avatar.svg';
-import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/chatbot/dist/css/main.css';
 
@@ -100,7 +99,6 @@ const initialMessages: MessageProps[] = [
     role: 'bot',
     content: markdown,
     name: 'Bot',
-    avatar: patternflyAvatar,
     timestamp: date.toLocaleString(),
     actions: {
       // eslint-disable-next-line no-console
@@ -209,7 +207,6 @@ export const EmbeddedChatbotDemo: FunctionComponent = () => {
       role: 'bot',
       content: 'API response goes here',
       name: 'Bot',
-      avatar: patternflyAvatar,
       isLoading: true,
       timestamp: date.toLocaleString()
     });
@@ -229,7 +226,6 @@ export const EmbeddedChatbotDemo: FunctionComponent = () => {
         role: 'bot',
         content: 'API response goes here',
         name: 'Bot',
-        avatar: patternflyAvatar,
         isLoading: false,
         actions: {
           // eslint-disable-next-line no-console

package/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedComparisonChatbot.tsx

@@ -22,7 +22,6 @@ import ChatbotHeader, { ChatbotHeaderMain } from '@patternfly/chatbot/dist/dynam
 import Compare from '@patternfly/chatbot/dist/dynamic/Compare';
 import { BarsIcon } from '@patternfly/react-icons';
 import userAvatar from '../Messages/user_avatar.svg';
-import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/chatbot/dist/css/main.css';
 
@@ -53,7 +52,6 @@ export const CompareChild = ({ name, input, hasNewInput, setIsSendButtonDisabled
         timestamp: `${date?.toLocaleDateString()} ${date?.toLocaleTimeString()}`
       });
       newMessages.push({
-        avatar: patternflyAvatar,
         id: generateId(),
         name,
         role: 'bot',
@@ -76,7 +74,6 @@ export const CompareChild = ({ name, input, hasNewInput, setIsSendButtonDisabled
           role: 'bot',
           content: `API response from ${name} goes here`,
           name,
-          avatar: patternflyAvatar,
           isLoading: false,
           actions: {
             // eslint-disable-next-line no-console

package/patternfly-docs/content/extensions/chatbot/examples/demos/Feedback.tsx

@@ -1,6 +1,5 @@
 import { FunctionComponent, useState, useRef } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
-import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/chatbot/dist/css/main.css';
 
@@ -37,7 +36,6 @@ export const MessageWithFeedbackExample: FunctionComponent = () => {
     <Message
       name="Bot"
       role="bot"
-      avatar={patternflyAvatar}
       content="Bot message with user feedback flow; click on a message action to launch the feedback flow. Click submit to see the thank-you message."
       actions={{
         positive: {

package/patternfly-docs/content/extensions/chatbot/examples/demos/WhiteEmbeddedChatbot.tsx

@@ -39,7 +39,6 @@ import PFHorizontalLogoColor from '../UI/PF-HorizontalLogo-Color.svg';
 import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg';
 import { BarsIcon } from '@patternfly/react-icons';
 import userAvatar from '../Messages/user_avatar.svg';
-import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/chatbot/dist/css/main.css';
 
@@ -109,7 +108,6 @@ const initialMessages: MessageProps[] = [
     role: 'bot',
     content: markdown,
     name: 'Bot',
-    avatar: patternflyAvatar,
     timestamp: date.toLocaleString(),
     actions: {
       // eslint-disable-next-line no-console
@@ -221,7 +219,6 @@ export const EmbeddedChatbotDemo: FunctionComponent = () => {
       role: 'bot',
       content: 'API response goes here',
       name: 'Bot',
-      avatar: patternflyAvatar,
       isLoading: true,
       timestamp: date.toLocaleString(),
       isPrimary: true
@@ -242,7 +239,6 @@ export const EmbeddedChatbotDemo: FunctionComponent = () => {
         role: 'bot',
         content: 'API response goes here',
         name: 'Bot',
-        avatar: patternflyAvatar,
         isLoading: false,
         actions: {
           // eslint-disable-next-line no-console

package/src/Chatbot/Chatbot.scss

@@ -9,10 +9,7 @@
   flex-direction: column;
   width: 30rem;
   height: 70vh;
-  background-color: var(
-    --pf-t--global--background--color--floating--secondary--default,
-    --pf-t--global--background--color--secondary--default
-  );
+  background-color: var(--pf-t--global--background--color--floating--secondary--default);
   border-radius: var(--pf-t--global--border--radius--medium);
   box-shadow: var(--pf-t--global--box-shadow--lg);
   font-size: var(--pf-t--global--font--size--md);
@@ -31,9 +28,8 @@
     opacity: 1;
     transform: translateY(0);
   }
-  // for high contrast support
-  border: var(--pf-t--global--border--width--high-contrast--regular) solid
-    var(--pf-t--global--border--color--high-contrast);
+
+  border: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--subtle);
 
   // 32 rem is the width of the overlay chatbot plus the insets
   // if the screen is smaller, we want to be 100%
@@ -46,24 +42,41 @@
   @media screen and (max-height: 518px) {
     overflow: auto;
   }
+
+  &:not(&--default) {
+    background-color: var(
+      --pf-t--global--background--color--glass--primary--default,
+      var(--pf-t--global--background--color--secondary--default)
+    );
+  }
+}
+
+:root:where(.pf-v6-theme-felt):not(.pf-v6-theme-glass) {
+  .pf-chatbot.pf-chatbot--default {
+    box-shadow: var(--pf-t--global--box-shadow--md);
+  }
 }
 
 // ============================================================================
 // Chatbot Display Mode - Docked
 // ============================================================================
 .pf-chatbot--docked {
-  // for high contrast support
   border: unset;
-  border-left: var(--pf-t--global--border--width--high-contrast--regular) solid
-    var(--pf-t--global--border--color--high-contrast);
+  border-left: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--subtle);
   inset-block-end: 0;
   inset-inline-end: 0;
   padding: 0;
   height: 100%;
   border-radius: 0;
-  box-shadow: var(--pf-t--global--box-shadow--lg--left);
   overflow: inherit;
 
+  @at-root :where(.pf-v6-theme-glass) & {
+    border-left: var(--pf-t--global--border--width--glass--default) solid
+      var(--pf-t--global--border--color--glass--default);
+    box-shadow: var(--pf-t--global--box-shadow--md--left);
+    backdrop-filter: var(--pf-t--global--background--filter--glass--blur--primary);
+  }
+
   // 30rem is the width of the docked chatbot
   // if the screen is smaller, we want to be 100%
   @media screen and (max-width: 30rem) {
@@ -75,9 +88,6 @@
 // Chatbot Display Mode - Fullscreen
 // ============================================================================
 .pf-chatbot--fullscreen {
-  background-color: var(--pf-t--global--background--color--secondary--default);
-
-  // for high contrast support
   border: unset;
   inset-block-end: 0;
   inset-inline-end: 0;
@@ -86,21 +96,27 @@
   height: 100%;
   border-radius: 0;
   box-shadow: none;
+
+  @at-root :where(.pf-v6-theme-glass) & {
+    backdrop-filter: var(--pf-t--global--background--filter--glass--blur--primary);
+  }
 }
 
 // ============================================================================
 // Chatbot Display Mode - Embedded
 // ============================================================================
 .pf-chatbot--embedded {
-  background-color: var(--pf-t--global--background--color--secondary--default);
-
-  // for high contrast support
-  border: unset;
   position: static;
   width: 100%;
   min-height: 100%;
   border-radius: 0;
-  box-shadow: none;
+  box-shadow: var(--pf-t--global--box-shadow--lg);
+
+  @at-root :where(.pf-v6-theme-glass) & {
+    border: var(--pf-t--global--border--width--glass--default) solid var(--pf-t--global--border--color--glass--default);
+    box-shadow: var(--pf-t--global--box-shadow--md);
+    backdrop-filter: var(--pf-t--global--background--filter--glass--blur--primary);
+  }
 }
 
 .pf-chatbot-container {
@@ -143,19 +159,19 @@
   height: 100%;
   border-radius: 0;
   box-shadow: none;
-  border-color: var(--pf-t--global--border--color--default);
+  border-color: var(--pf-t--global--border--color--subtle);
 
-  .pf-chatbot-container {
-    border-radius: var(--pf-t--global--border--radius--sharp);
+  @at-root :where(.pf-v6-theme-glass) & {
+    border: var(--pf-t--global--border--width--glass--default) solid var(--pf-t--global--border--color--glass--default);
+    box-shadow: var(--pf-t--global--box-shadow--md);
+    backdrop-filter: var(--pf-t--global--background--filter--glass--blur--primary);
   }
 
-  @media screen and (min-width: 768px) {
-    // only want if drawer open - drawer closes/stops being inline on mobile
-    border-left: var(--pf-t--global--border--width--divider--default) solid;
+  .pf-chatbot-container {
+    border-radius: var(--pf-t--global--border--radius--sharp);
   }
 }
 
-// for high contrast support
 :root:where(.pf-v6-theme-high-contrast) {
   .pf-chatbot--drawer {
     border: unset;

package/src/ChatbotContent/ChatbotContent.scss

@@ -3,10 +3,7 @@
 // ============================================================================
 .pf-chatbot__content {
   position: relative;
-  background-color: var(
-    --pf-t--global--background--color--floating--secondary--default,
-    --pf-t--global--background--color--secondary--default
-  );
+  background-color: var(--pf-t--global--background--color--floating--secondary--default);
   overflow-y: auto;
   overflow: hidden; // needed in Red Hat Developer Hub workspace
   flex: 1; // needed in Composer AI
@@ -21,6 +18,15 @@
   }
 }
 
+.pf-chatbot:not(.pf-chatbot--default) {
+  .pf-chatbot__content {
+    background-color: var(
+      --pf-t--global--background--color--glass--primary--default,
+      var(--pf-t--global--background--color--secondary--default)
+    );
+  }
+}
+
 // ============================================================================
 // Chatbot Display Mode - Fullscreen and Embedded
 // ============================================================================
@@ -29,7 +35,6 @@
   .pf-chatbot--fullscreen,
   .pf-chatbot--embedded {
     .pf-chatbot__content {
-      background-color: var(--pf-t--global--background--color--secondary--default);
       display: flex;
       justify-content: center;
     }