@patternfly/chatbot 2.2.0-prerelease.2 → 2.2.0-prerelease.20

package/dist/css/main.css

@@ -47,7 +47,7 @@
   width: 21px;
 }
 .pf-chatbot__menu .pf-v6-c-menu__item-description {
-  font-weight: 500;
+  font-weight: var(--pf-t--global--font--weight--body--bold);
 }
 .pf-chatbot__menu .pf-v6-c-divider {
   padding: 0 var(--pf-t--global--spacer--md) 0 var(--pf-t--global--spacer--md);
@@ -189,7 +189,7 @@
 }
 .pf-chatbot__history .pf-chatbot__menu-item-header > .pf-v6-c-menu__group-title {
   color: var(--pf-t--global--text--color--subtle);
-  font-weight: 500;
+  font-weight: var(--pf-t--global--font--weight--body--bold);
   font-size: var(--pf-t--global--icon--size--font--sm);
   --pf-v6-c-menu__group-title--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-menu__group-title--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -276,6 +276,9 @@
   flex-direction: column;
   height: 70vh;
 }
+.pf-chatbot__history.pf-v6-c-drawer .pf-v6-c-drawer__panel.pf-m-resizable .pf-v6-c-drawer__panel-main {
+  row-gap: var(--pf-v6-c-drawer__panel--RowGap);
+}
 
 .pf-chatbot--docked .pf-chatbot__history.pf-v6-c-drawer {
   height: 100vh;
@@ -341,13 +344,11 @@
   }
   .pf-chatbot--embedded .pf-chatbot__footer-container,
   .pf-chatbot--fullscreen .pf-chatbot__footer-container {
-    width: 60rem;
+    width: 90%;
+    max-width: 60rem;
     padding: var(--pf-t--global--spacer--sm) 0;
   }
 }
-.pf-chatbot--docked .pf-chatbot__footer .pf-v6-c-divider {
-  display: none;
-}
 .pf-chatbot--docked .pf-chatbot__footer-container {
   padding: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--lg);
 }
@@ -411,9 +412,6 @@
 .pf-chatbot--docked .pf-chatbot__header {
   background-color: var(--pf-t--chatbot--background);
 }
-.pf-chatbot--docked .pf-chatbot__header__divider {
-  display: none;
-}
 
 .pf-chatbot__button--toggle-options,
 .pf-chatbot__button--toggle-menu {
@@ -429,7 +427,7 @@
 .pf-chatbot__button--toggle-menu .pf-v6-c-button__icon,
 .pf-chatbot__button--toggle-menu .pf-v6-c-menu-toggle__icon,
 .pf-chatbot__button--toggle-menu .pf-v6-c-icon__content {
-  color: var(--pf-t--chatbot--icon--fill);
+  color: var(--pf-t--global--icon--color--subtle);
 }
 .pf-chatbot__button--toggle-options .pf-v6-c-button__icon,
 .pf-chatbot__button--toggle-options .pf-v6-c-menu-toggle__icon,
@@ -450,7 +448,7 @@
 .pf-chatbot__button--toggle-menu:focus .pf-v6-c-button__icon,
 .pf-chatbot__button--toggle-menu:focus .pf-v6-c-menu-toggle__icon,
 .pf-chatbot__button--toggle-menu:focus .pf-v6-c-icon__content {
-  color: var(--pf-t--chatbot--icon--fill--hover);
+  color: var(--pf-t--global--icon--color--regular);
 }
 
 .pf-chatbot__button--toggle-options svg {
@@ -488,7 +486,7 @@
 }
 .pf-chatbot__chatbot-modal .pf-v6-c-button.pf-m-primary.pf-m-block,
 .pf-chatbot__chatbot-modal .pf-v6-c-button.pf-m-link.pf-m-block {
-  --pf-v6-c-button--FontWeight: 500;
+  --pf-v6-c-button--FontWeight: var(--pf-t--global--font--weight--body--bold);
 }
 .pf-chatbot__chatbot-modal .pf-v6-c-modal-box__footer {
   padding-block-start: var(--pf-t--global--spacer--xl);
@@ -660,7 +658,7 @@
   border: none;
   --pf-v6-c-code-editor__tab--BorderStartEndRadius: 0;
   border-start-start-radius: var(--pf-t--global--border--radius--small);
-  --pf-t--global--font--weight--body--default: 500;
+  --pf-t--global--font--weight--body--default: var(--pf-t--global--font--weight--body--bold);
 }
 .pf-chatbot__code-modal .pf-v6-c-code-editor__tab-icon {
   display: none;
@@ -689,11 +687,94 @@
   --pf-v6-c-button--hover__icon--Color: #c7c7c7;
 }
 
+.pf-chatbot__code-modal-body {
+  flex: 1;
+}
+
+.pf-chatbot__code-modal--fullscreen {
+  height: inherit;
+}
+
+.pf-chatbot__compare-container {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  height: 100%;
+}
+
+.pf-chatbot__compare-toggle {
+  width: 100%;
+}
+.pf-chatbot__compare-toggle .pf-v6-c-toggle-group__button {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.pf-chatbot__compare {
+  display: flex;
+  height: 100%;
+  width: 100%;
+}
+@media screen and (max-width: 900px) {
+  .pf-chatbot__compare {
+    overflow-y: auto;
+  }
+}
+.pf-chatbot__compare .pf-chatbot__compare-item:first-of-type {
+  border-right: 1px solid var(--pf-t--global--border--color--default);
+}
+@media screen and (max-width: 900px) {
+  .pf-chatbot__compare .pf-chatbot__compare-item:first-of-type {
+    border-right: 0px;
+  }
+}
+
+.pf-chatbot__compare-item {
+  flex: 1;
+}
+.pf-chatbot__compare-item .pf-chatbot--embedded .pf-chatbot__messagebox {
+  width: 100%;
+}
+.pf-chatbot__compare-item .pf-chatbot__content {
+  padding: 0;
+}
+@media screen and (max-width: 900px) {
+  .pf-chatbot__compare-item .pf-chatbot.pf-chatbot--embedded {
+    height: 100%;
+  }
+}
+
+.pf-chatbot__compare-item-hidden {
+  display: block;
+}
+@media screen and (max-width: 900px) {
+  .pf-chatbot__compare-item-hidden {
+    display: none;
+  }
+}
+
+.pf-chatbot__compare-mobile-controls {
+  padding: var(--pf-t--global--spacer--md) var(--pf-t--global--spacer--lg) 0 var(--pf-t--global--spacer--lg);
+  display: none;
+  background-color: var(--pf-t--global--background--color--secondary--default);
+  position: sticky;
+  top: 0;
+  z-index: 9999;
+}
+@media screen and (max-width: 900px) {
+  .pf-chatbot__compare-mobile-controls {
+    display: flex;
+    flex-direction: column;
+    gap: var(--pf-t--global--spacer--md);
+  }
+}
+
 .pf-chatbot__code-language {
   color: var(--pf-t--global--text--color--subtle);
   display: flex;
   font-size: var(--pf-t--global--icon--size--font--xs);
-  font-weight: 500;
+  font-weight: var(--pf-t--global--font--weight--body--bold);
 }
 
 .pf-chatbot__code-icon {
@@ -824,13 +905,6 @@
 }
 
 .pf-chatbot__message {
-  --pf-t--chatbot-message--type--background--color--default: var(--pf-t--global--background--color--tertiary--default);
-  --pf-t--chatbot-message--type--background--color--primary: var(--pf-t--global--color--brand--default);
-  --pf-t--chatbot-message--type--padding: var(--pf-t--global--spacer--sm);
-  --pf-t--chatbot-message--type--text--color--default: var(--pf-t--global--text--color--regular);
-  --pf-t--chatbot-message--type--text--color--primary: var(--pf-t--global--text--color--inverse);
-  --pf-t--chatbot-message--type--border--radius: var(--pf-t--global--border--radius--small);
-  --pf-t--chatbot-message--meta--label--color: var(--pf-t--global--border--color--on-secondary);
   display: flex;
   align-items: flex-start;
   gap: var(--pf-t--global--spacer--lg);
@@ -869,12 +943,12 @@
   font-size: var(--pf-t--global--font--size--sm);
 }
 .pf-chatbot__message-meta .pf-v6-c-label {
-  --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--chatbot-message--meta--label--color);
+  --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--on-secondary);
   --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--xs);
-  font-weight: 500;
+  font-weight: var(--pf-t--global--font--weight--body--bold);
 }
 .pf-chatbot__message-meta .pf-v6-c-label .pf-v6-c-label__content {
-  --pf-v6-c-label--Color: var(--pf-t--chatbot-message--meta--label--color);
+  --pf-v6-c-label--Color: var(--pf-t--global--border--color--on-secondary);
 }
 .pf-chatbot__message-meta .pf-v6-c-timestamp {
   flex: 1 0 max-content;
@@ -887,25 +961,12 @@
   flex-direction: column;
   align-items: flex-start;
   gap: var(--pf-t--global--font--size--sm);
-  color: var(--pf-t--chatbot-message--type--text--color--default);
+  color: var(--pf-t--global--text--color--regular);
 }
 .pf-chatbot__message-and-actions {
   display: grid;
   gap: var(--pf-t--global--spacer--sm);
 }
-.pf-chatbot__message-quick-response .pf-v6-c-label {
-  --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--md);
-}
-@media screen and (min-width: 401px) and (max-width: 600px) {
-  .pf-chatbot__message-quick-response .pf-v6-c-label {
-    --pf-v6-c-label__text--MaxWidth: 20ch;
-  }
-}
-@media screen and (max-width: 400px) {
-  .pf-chatbot__message-quick-response .pf-v6-c-label {
-    --pf-v6-c-label__text--MaxWidth: 15ch;
-  }
-}
 
 .pf-chatbot__message-attachments-container {
   display: flex;
@@ -915,9 +976,9 @@
 
 .pf-chatbot__message-loading {
   width: 36px;
-  padding: var(--pf-t--chatbot-message--type--padding);
+  padding: var(--pf-t--global--spacer--sm);
   background-color: var(--pf-t--global--background--color--tertiary--default);
-  border-radius: var(--pf-t--chatbot-message--type--border--radius);
+  border-radius: var(--pf-t--global--border--radius--small);
 }
 .pf-chatbot__message-loading-dots {
   position: relative;
@@ -990,7 +1051,7 @@
   justify-content: space-between;
   width: 100%;
   font-size: var(--pf-t--global--font--size--sm);
-  font-weight: 500;
+  font-weight: var(--pf-t--global--font--weight--body--bold);
 }
 .pf-chatbot__message-code-block .pf-v6-c-code-block__header .pf-chatbot__button--copy.pf-v6-c-button {
   color: var(--pf-t--color--white);
@@ -1022,7 +1083,7 @@
 }
 
 .pf-chatbot__message-inline-code {
-  background-color: var(--pf-t--chatbot--code--background);
+  background-color: var(--pf-t--global--background--color--tertiary--default);
   font-size: var(--pf-t--global--font--size--body--default);
 }
 
@@ -1032,8 +1093,8 @@
 
 .pf-chatbot__message-text {
   width: fit-content;
-  padding: var(--pf-t--chatbot-message--type--padding) 0 var(--pf-t--chatbot-message--type--padding) 0;
-  border-radius: var(--pf-t--chatbot-message--type--border--radius);
+  padding: var(--pf-t--global--spacer--sm) 0 var(--pf-t--global--spacer--sm) 0;
+  border-radius: var(--pf-t--global--border--radius--small);
 }
 .pf-chatbot__message-text .pf-v6-c-content,
 .pf-chatbot__message-text .pf-v6-c-content--small,
@@ -1043,24 +1104,22 @@
   --pf-v6-c-content--FontSize: var(--pf-t--chatbot--font-size);
 }
 .pf-chatbot__message-text code {
-  background-color: var(--pf-t--chatbot-message--type--background--color--default);
+  background-color: var(--pf-t--global--background--color--tertiary--default);
   font-size: var(--pf-t--global--font--size--body--default);
 }
 
 .pf-chatbot__message--user .pf-chatbot__message-text {
-  background-color: var(--pf-t--chatbot-message--type--background--color--primary);
-  color: var(--pf-t--chatbot-message--type--text--color--primary);
-  padding: var(--pf-t--chatbot-message--type--padding);
+  background-color: var(--pf-t--global--color--brand--default);
+  color: var(--pf-t--global--text--color--on-brand--default);
+  --pf-v6-c-content--Color: var(--pf-t--global--text--color--on-brand--default);
+  padding: var(--pf-t--global--spacer--sm);
 }
 .pf-chatbot__message--user .pf-chatbot__message-text .pf-v6-c-content,
 .pf-chatbot__message--user .pf-chatbot__message-text .pf-v6-c-content--small,
 .pf-chatbot__message--user .pf-chatbot__message-text .pf-v6-c-content--blockquote,
 .pf-chatbot__message--user .pf-chatbot__message-text p,
 .pf-chatbot__message--user .pf-chatbot__message-text a {
-  color: var(--pf-t--chatbot-message--type--text--color--primary);
-}
-.pf-chatbot__message--user .pf-chatbot__message-text code {
-  background-color: initial;
+  color: var(--pf-t--global--text--color--on-brand--default);
 }
 
 .pf-chatbot__message-code-block {
@@ -1093,7 +1152,7 @@
   justify-content: space-between;
   width: 100%;
   font-size: var(--pf-t--global--font--size--sm);
-  font-weight: 500;
+  font-weight: var(--pf-t--global--font--weight--body--bold);
 }
 .pf-chatbot__message-code-block .pf-v6-c-code-block__header .pf-chatbot__button--copy.pf-v6-c-button {
   color: var(--pf-t--color--white);
@@ -1125,7 +1184,7 @@
 }
 
 .pf-chatbot__message-inline-code {
-  background-color: var(--pf-t--chatbot--code--background);
+  background-color: var(--pf-t--global--background--color--tertiary--default);
   font-size: var(--pf-t--global--font--size--body--default);
 }
 
@@ -1135,8 +1194,8 @@
 
 .pf-chatbot__message-text {
   width: fit-content;
-  padding: var(--pf-t--chatbot-message--type--padding) 0 var(--pf-t--chatbot-message--type--padding) 0;
-  border-radius: var(--pf-t--chatbot-message--type--border--radius);
+  padding: var(--pf-t--global--spacer--sm) 0 var(--pf-t--global--spacer--sm) 0;
+  border-radius: var(--pf-t--global--border--radius--small);
 }
 .pf-chatbot__message-text .pf-v6-c-content,
 .pf-chatbot__message-text .pf-v6-c-content--small,
@@ -1146,31 +1205,29 @@
   --pf-v6-c-content--FontSize: var(--pf-t--chatbot--font-size);
 }
 .pf-chatbot__message-text code {
-  background-color: var(--pf-t--chatbot-message--type--background--color--default);
+  background-color: var(--pf-t--global--background--color--tertiary--default);
   font-size: var(--pf-t--global--font--size--body--default);
 }
 
 .pf-chatbot__message--user .pf-chatbot__message-text {
-  background-color: var(--pf-t--chatbot-message--type--background--color--primary);
-  color: var(--pf-t--chatbot-message--type--text--color--primary);
-  padding: var(--pf-t--chatbot-message--type--padding);
+  background-color: var(--pf-t--global--color--brand--default);
+  color: var(--pf-t--global--text--color--on-brand--default);
+  --pf-v6-c-content--Color: var(--pf-t--global--text--color--on-brand--default);
+  padding: var(--pf-t--global--spacer--sm);
 }
 .pf-chatbot__message--user .pf-chatbot__message-text .pf-v6-c-content,
 .pf-chatbot__message--user .pf-chatbot__message-text .pf-v6-c-content--small,
 .pf-chatbot__message--user .pf-chatbot__message-text .pf-v6-c-content--blockquote,
 .pf-chatbot__message--user .pf-chatbot__message-text p,
 .pf-chatbot__message--user .pf-chatbot__message-text a {
-  color: var(--pf-t--chatbot-message--type--text--color--primary);
-}
-.pf-chatbot__message--user .pf-chatbot__message-text code {
-  background-color: initial;
+  color: var(--pf-t--global--text--color--on-brand--default);
 }
 
 .pf-chatbot__message-ordered-list,
 .pf-chatbot__message-unordered-list {
   width: fit-content;
-  padding: var(--pf-t--chatbot-message--type--padding) 0 var(--pf-t--chatbot-message--type--padding) 0;
-  border-radius: var(--pf-t--chatbot-message--type--border--radius);
+  padding: var(--pf-t--global--spacer--sm) 0 var(--pf-t--global--spacer--sm) 0;
+  border-radius: var(--pf-t--global--border--radius--small);
 }
 .pf-chatbot__message-ordered-list .pf-v6-c-list,
 .pf-chatbot__message-ordered-list ul,
@@ -1183,16 +1240,16 @@
 
 .pf-chatbot__message--user .pf-chatbot__message-ordered-list,
 .pf-chatbot__message--user .pf-chatbot__message-unordered-list {
-  background-color: var(--pf-t--chatbot-message--type--background--color--primary);
-  color: var(--pf-t--chatbot-message--type--text--color--primary);
-  padding: var(--pf-t--chatbot-message--type--padding);
+  background-color: var(--pf-t--global--color--brand--default);
+  color: var(--pf-t--global--text--color--on-brand--default);
+  padding: var(--pf-t--global--spacer--sm);
 }
 
 .pf-chatbot__message-loading {
   width: 36px;
-  padding: var(--pf-t--chatbot-message--type--padding);
+  padding: var(--pf-t--global--spacer--sm);
   background-color: var(--pf-t--global--background--color--tertiary--default);
-  border-radius: var(--pf-t--chatbot-message--type--border--radius);
+  border-radius: var(--pf-t--global--border--radius--small);
 }
 .pf-chatbot__message-loading-dots {
   position: relative;
@@ -1235,6 +1292,107 @@
   }
 }
 
+.pf-chatbot__quickstarts-tile {
+  max-width: 650px;
+  width: 100%;
+}
+@media screen and (max-width: 700px) {
+  .pf-chatbot__quickstarts-tile {
+    max-width: 100%;
+    min-width: initial;
+  }
+}
+.pf-chatbot__quickstarts-tile .pf-v6-c-card__header-main .pf-v6-c-icon__content {
+  display: contents;
+}
+
+.pf-v6-theme-dark .pf-chatbot__quickstarts-tile .pfext-catalog-item-icon__img {
+  filter: brightness(1.5) invert(1) hue-rotate(180deg) saturate(4);
+}
+
+.pf-chatbot__message-quick-response .pf-v6-c-label {
+  --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--md);
+}
+@media screen and (min-width: 401px) and (max-width: 600px) {
+  .pf-chatbot__message-quick-response .pf-v6-c-label {
+    --pf-v6-c-label__text--MaxWidth: 20ch;
+  }
+}
+@media screen and (max-width: 400px) {
+  .pf-chatbot__message-quick-response .pf-v6-c-label {
+    --pf-v6-c-label__text--MaxWidth: 15ch;
+  }
+}
+.pf-chatbot__message-quick-response .pf-chatbot__message-quick-response--selected .pf-v6-c-label__content:is(:hover, :focus) {
+  --pf-v6-c-label--m-clickable--hover--BorderWidth: 0;
+  --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
+}
+.pf-chatbot__message-quick-response .pf-chatbot__message-quick-response--selected:hover,
+.pf-chatbot__message-quick-response .pf-chatbot__message-quick-response--selected:focus {
+  --pf-v6-c-label--m-clickable--hover--BorderWidth: 0;
+  --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
+}
+.pf-chatbot__message-quick-response .pf-v6-c-label.pf-m-blue.pf-m-clickable .pf-v6-c-label__content:is(:active) {
+  --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
+  --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
+  --pf-v6-c-label--m-clickable--hover--BorderWidth: 0;
+}
+
+.pf-chatbot__feedback-card {
+  box-shadow: var(--pf-t--global--box-shadow--sm);
+  --pf-v6-c-card--BorderWidth: 0;
+  max-width: 27.5rem;
+}
+
+.pf-chatbot__feedback-complete-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pf-t--global--spacer--lg);
+  align-items: center;
+}
+
+.pf-chatbot__feedback-complete-text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-card--first-child--PaddingBlockStart: 0;
+  --pf-v6-c-card__title--not--last-child--PaddingBlockEnd: 0;
+}
+
+.pf-chatbot__feedback-complete-image {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pf-chatbot__feedback-complete-body {
+  text-align: center;
+}
+
+.pf-chatbot__feedback-complete-title {
+  font-family: var(--pf-t--global--font--family--heading);
+  font-size: var(--pf-t--global--font--size--lg);
+  font-weight: var(--pf-t--global--font--weight--body--bold);
+  line-height: var(--pf-t--global--font--line-height--heading);
+}
+
+.pf-chatbot__feedback-card-title {
+  font-family: var(--pf-t--global--font--family--heading);
+  font-size: var(--pf-t--global--font--size--md);
+  font-weight: var(--pf-t--global--font--weight--body--bold);
+  line-height: var(--pf-t--global--font--line-height--heading);
+}
+
+.pf-chatbot__feedback-card-form {
+  --pf-v6-c-form__group--m-action--MarginBlockStart: 0;
+}
+
+.pf-chatbot__feedback-card-optional {
+  font-weight: initial;
+}
+
 .pf-v6-c-button.pf-chatbot__button--attach {
   border-radius: var(--pf-t--global--border--radius--pill);
   padding: var(--pf-t--global--spacer--md);
@@ -1242,10 +1400,19 @@
   height: 3rem;
 }
 .pf-v6-c-button.pf-chatbot__button--attach .pf-v6-c-button__icon {
-  color: var(--pf-t--chatbot--icon--fill);
+  color: var(--pf-t--global--icon--color--subtle);
+}
+.pf-v6-c-button.pf-chatbot__button--attach:hover .pf-v6-c-button__icon {
+  color: var(--pf-t--global--icon--color--regular);
+}
+.pf-v6-c-button.pf-chatbot__button--attach:active, .pf-v6-c-button.pf-chatbot__button--attach:focus {
+  background-color: var(--pf-t--global--color--brand--clicked);
+}
+.pf-v6-c-button.pf-chatbot__button--attach:active .pf-v6-c-button__icon, .pf-v6-c-button.pf-chatbot__button--attach:focus .pf-v6-c-button__icon {
+  color: var(--pf-t--global--icon--color--inverse);
 }
-.pf-v6-c-button.pf-chatbot__button--attach:hover .pf-v6-c-button__icon, .pf-v6-c-button.pf-chatbot__button--attach:focus .pf-v6-c-button__icon {
-  color: var(--pf-t--chatbot--icon--fill--hover);
+.pf-v6-c-button.pf-chatbot__button--attach:active:hover .pf-v6-c-button__icon, .pf-v6-c-button.pf-chatbot__button--attach:active:focus .pf-v6-c-button__icon, .pf-v6-c-button.pf-chatbot__button--attach:focus:hover .pf-v6-c-button__icon, .pf-v6-c-button.pf-chatbot__button--attach:focus:focus .pf-v6-c-button__icon {
+  color: var(--pf-t--global--icon--color--inverse);
 }
 
 .pf-v6-c-button.pf-chatbot__button--microphone {
@@ -1255,25 +1422,25 @@
   height: 3rem;
 }
 .pf-v6-c-button.pf-chatbot__button--microphone .pf-v6-c-button__icon {
-  color: var(--pf-t--chatbot--icon--fill);
+  color: var(--pf-t--global--icon--color--subtle);
 }
 .pf-v6-c-button.pf-chatbot__button--microphone:hover .pf-v6-c-button__icon, .pf-v6-c-button.pf-chatbot__button--microphone:focus .pf-v6-c-button__icon {
-  color: var(--pf-t--chatbot--icon--fill--hover);
+  color: var(--pf-t--global--icon--color--regular);
 }
 .pf-v6-c-button.pf-chatbot__button--microphone--active {
-  background-color: var(--pf-t--color--blue--50);
-  animation: motionMicButton var(--pf-t--chatbot--timing-function) calc(var(--pf-t--global--motion--duration--md) * 8) infinite;
+  background-color: var(--pf-t--global--color--brand--clicked);
+  animation: motionMicButton var(--pf-t--global--motion--timing-function--accelerate) calc(var(--pf-t--global--motion--duration--md) * 8) infinite;
 }
 .pf-v6-c-button.pf-chatbot__button--microphone--active .pf-v6-c-button__icon {
-  color: var(--pf-t--color--white);
+  color: var(--pf-t--global--icon--color--on-brand--default);
 }
 .pf-v6-c-button.pf-chatbot__button--microphone--active:hover .pf-v6-c-button__icon, .pf-v6-c-button.pf-chatbot__button--microphone--active:focus .pf-v6-c-button__icon {
-  color: var(--pf-t--color--white);
+  color: var(--pf-t--global--icon--color--on-brand--default);
 }
 
 @keyframes motionMicButton {
   0% {
-    box-shadow: 0 0 0 0 rgb(0, 102, 204);
+    box-shadow: 0 0 0 0 rgb(0, 77, 153);
   }
   100% {
     box-shadow: 0 0 0 16px rgba(0, 102, 204, 0);
@@ -1332,11 +1499,20 @@
   align-items: center;
 }
 .pf-v6-c-button.pf-chatbot__button--stop .pf-v6-c-button__icon {
-  color: var(--pf-t--global--icon--color--inverse);
+  color: var(--pf-t--global--icon--color--on-brand--default);
 }
-.pf-v6-c-button.pf-chatbot__button--stop:hover, .pf-v6-c-button.pf-chatbot__button--stop:focus {
+.pf-v6-c-button.pf-chatbot__button--stop:hover {
   background-color: var(--pf-t--global--color--brand--hover);
 }
+.pf-v6-c-button.pf-chatbot__button--stop:focus {
+  background-color: var(--pf-t--global--color--brand--clicked);
+}
+.pf-v6-c-button.pf-chatbot__button--stop:focus .pf-v6-c-button__icon {
+  color: var(--pf-t--global--icon--color--on-brand--default);
+}
+.pf-v6-c-button.pf-chatbot__button--stop:focus:hover .pf-v6-c-button__icon, .pf-v6-c-button.pf-chatbot__button--stop:focus:focus .pf-v6-c-button__icon {
+  color: var(--pf-t--global--icon--color--on-brand--default);
+}
 
 .pf-chatbot__message-bar {
   --pf-chatbot__message-bar-child--PaddingBlockStart: var(--pf-t--global--spacer--xs);
@@ -1349,7 +1525,7 @@
   justify-content: flex-end;
   background-color: var(--pf-t--global--background--color--primary--default);
   border-radius: calc(var(--pf-t--global--border--radius--medium) * 2);
-  transition: box-shadow var(--pf-t--chatbot--timing-function) var(--pf-t--global--motion--duration--sm);
+  transition: box-shadow var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--sm);
   overflow: hidden;
 }
 .pf-chatbot__message-bar:hover {
@@ -1363,7 +1539,7 @@
   justify-content: end;
   padding-block-start: var(--pf-t--global--spacer--xs);
   padding-block-end: var(--pf-t--global--spacer--xs);
-  gap: var(--pf-t--global--spacer--xs);
+  gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
 }
 .pf-chatbot__message-bar-input {
   flex: 1 1 auto;
@@ -1413,9 +1589,9 @@
   background-color: var(--pf-t--global--background--color--primary--default) !important;
   border: 1px solid var(--pf-t--chatbot--border) !important;
   box-shadow: var(--pf-t--global--box-shadow--sm);
-  color: var(--pf-t--chatbot--icon--fill) !important;
+  color: var(--pf-t--global--icon--color--subtle) !important;
   transform: translate3d(-50%, 0, 0) !important;
-  transition: background-color var(--pf-t--chatbot--timing-function) var(--pf-t--global--motion--duration--sm), box-shadow var(--pf-t--chatbot--timing-function) var(--pf-t--global--motion--duration--sm), transform var(--pf-t--chatbot--timing-function) var(--pf-t--global--motion--duration--md), opacity var(--pf-t--chatbot--timing-function) var(--pf-t--global--motion--duration--md) !important;
+  transition: background-color var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--sm), box-shadow var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--sm), transform var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--md), opacity var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--md) !important;
   z-index: var(--pf-t--global--z-index--md) !important;
 }
 .pf-chatbot__jump .pf-v6-c-button__text {
@@ -1424,7 +1600,7 @@
 .pf-chatbot__jump:hover, .pf-chatbot__jump:focus {
   background-color: var(--pf-t--global--background--color--primary--hover) !important;
   box-shadow: var(--pf-t--global--box-shadow--md) !important;
-  color: var(--pf-t--chatbot--icon--fill--hover) !important;
+  color: var(--pf-t--global--icon--color--regular) !important;
 }
 .pf-chatbot__jump--top {
   inset-block-start: var(--pf-t--global--spacer--md) !important;
@@ -1492,9 +1668,9 @@
   background-color: var(--pf-t--global--background--color--primary--default) !important;
   border: 1px solid var(--pf-t--chatbot--border) !important;
   box-shadow: var(--pf-t--global--box-shadow--sm);
-  color: var(--pf-t--chatbot--icon--fill) !important;
+  color: var(--pf-t--global--icon--color--subtle) !important;
   transform: translate3d(-50%, 0, 0) !important;
-  transition: background-color var(--pf-t--chatbot--timing-function) var(--pf-t--global--motion--duration--sm), box-shadow var(--pf-t--chatbot--timing-function) var(--pf-t--global--motion--duration--sm), transform var(--pf-t--chatbot--timing-function) var(--pf-t--global--motion--duration--md), opacity var(--pf-t--chatbot--timing-function) var(--pf-t--global--motion--duration--md) !important;
+  transition: background-color var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--sm), box-shadow var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--sm), transform var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--md), opacity var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--md) !important;
   z-index: var(--pf-t--global--z-index--md) !important;
 }
 .pf-chatbot__jump .pf-v6-c-button__text {
@@ -1503,7 +1679,7 @@
 .pf-chatbot__jump:hover, .pf-chatbot__jump:focus {
   background-color: var(--pf-t--global--background--color--primary--hover) !important;
   box-shadow: var(--pf-t--global--box-shadow--md) !important;
-  color: var(--pf-t--chatbot--icon--fill--hover) !important;
+  color: var(--pf-t--global--icon--color--regular) !important;
 }
 .pf-chatbot__jump--top {
   inset-block-start: var(--pf-t--global--spacer--md) !important;
@@ -1522,7 +1698,8 @@
   gap: var(--pf-t--global--spacer--xs);
   grid-template-columns: repeat(auto-fit, minmax(0, max-content));
 }
-.pf-chatbot__response-actions .pf-v6-c-button {
+.pf-chatbot__response-actions .pf-chatbot__button--response-action.pf-v6-c-button.pf-m-plain.pf-m-small {
+  --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--subtle);
   border-radius: var(--pf-t--global--border--radius--pill);
   width: 2.3125rem;
   height: 2.3125rem;
@@ -1530,11 +1707,52 @@
   align-items: center;
   justify-content: center;
 }
-.pf-chatbot__response-actions .pf-v6-c-button .pf-v6-c-button__icon {
-  color: var(--pf-t--global--icon--color--subtle);
+.pf-chatbot__response-actions .pf-chatbot__button--response-action.pf-v6-c-button.pf-m-plain.pf-m-small:hover {
+  --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--subtle);
 }
-.pf-chatbot__response-actions .pf-v6-c-button:hover .pf-v6-c-button__icon, .pf-chatbot__response-actions .pf-v6-c-button:focus .pf-v6-c-button__icon {
-  color: var(--pf-t--global--icon--color--subtle);
+.pf-chatbot__response-actions .pf-chatbot__button--response-action.pf-v6-c-button.pf-m-plain.pf-m-small:focus {
+  --pf-v6-c-button--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--clicked);
+  --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
+}
+
+.pf-v6-c-button.pf-chatbot__button--response-action-clicked.pf-v6-c-button.pf-m-plain.pf-m-small {
+  --pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--clicked);
+  --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
+}
+
+.pf-chatbot__settings-form-container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  overflow: scroll;
+}
+
+.pf-chatbot__settings-form {
+  display: flex;
+  flex-direction: column;
+  max-width: 60rem;
+  flex: 1;
+}
+
+.pf-chatbot__settings-form-row {
+  font-size: var(--pf-t--global--font--size--body--lg);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--pf-t--global--border--color--default);
+  padding: var(--pf-t--global--spacer--lg);
+  font-weight: var(--pf-t--global--font--weight--body--bold);
+}
+
+.pf-chatbot__settings-form-row:last-of-type {
+  border-bottom: 0px;
+}
+
+.pf-chatbot__settings--title {
+  font-family: var(--pf-t--global--font--family--heading);
+  font-size: var(--pf-t--global--font--size--xl);
+  font-weight: var(--pf-t--global--font--weight--body--bold);
+  text-align: center;
 }
 
 .pf-chatbot__source {
@@ -1598,16 +1816,16 @@
 }
 .pf-chatbot__sources-card-footer-container .pf-chatbot__sources-card-footer-buttons .pf-v6-c-button:hover .pf-v6-c-button__icon,
 .pf-chatbot__sources-card-footer-container .pf-chatbot__sources-card-footer-buttons .pf-v6-c-button:focus .pf-v6-c-button__icon {
-  color: var(--pf-t--chatbot--icon--fill--hover);
+  color: var(--pf-t--global--icon--color--regular);
 }
 .pf-chatbot__sources-card-footer-container .pf-chatbot__sources-card-footer-buttons .pf-v6-c-button__icon {
-  color: var(--pf-t--chatbot--icon--fill);
+  color: var(--pf-t--global--icon--color--subtle);
 }
 
 .pf-chatbot__source-details-subhead {
   color: var(--pf-t--global--text--color--subtle);
   font-size: var(--pf-t--global--icon--size--font--xs);
-  font-weight: 500;
+  font-weight: var(--pf-t--global--font--weight--body--bold);
 }
 
 .pf-chatbot__source-details-heading {
@@ -1636,6 +1854,61 @@
   max-width: 20rem;
 }
 
+.pf-chatbot__terms-of-use-modal .pf-v6-c-content {
+  font-size: var(--pf-t--global--font--size--body--lg);
+}
+.pf-chatbot__terms-of-use-modal .pf-v6-c-content h2 {
+  font-size: var(--pf-t--global--icon--size--font--heading--h2);
+  font-family: var(--pf-t--global--font--family--heading);
+  margin-bottom: var(--pf-t--global--spacer--md);
+  margin-top: var(--pf-t--global--spacer--md);
+  font-weight: var(--pf-t--global--font--weight--heading--default);
+}
+.pf-chatbot__terms-of-use-modal .pf-v6-c-content h2:first-of-type {
+  margin-top: 0;
+}
+.pf-chatbot__terms-of-use-modal .pf-chatbot__terms-of-use--header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: var(--pf-t--global--spacer--xl);
+  margin-block-start: var(--pf-t--global--spacer--xl);
+}
+.pf-chatbot__terms-of-use-modal .pf-chatbot__terms-of-use--title {
+  font-size: var(--pf-t--global--font--size--heading--h1);
+  font-family: var(--pf-t--global--font--family--heading);
+  font-weight: var(--pf-t--global--font--weight--heading--bold);
+}
+.pf-chatbot__terms-of-use-modal .pf-chatbot__terms-of-use--footer {
+  margin-block-start: var(--pf-t--global--spacer--md);
+}
+.pf-chatbot__terms-of-use-modal .pf-chatbot__terms-of-use--section {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+@media screen and (max-height: 620px) {
+  .pf-chatbot__terms-of-use-modal .pf-v6-c-modal-box__body {
+    --pf-v6-c-modal-box__body--MinHeight: auto;
+    overflow: visible;
+  }
+}
+
+.pf-chatbot__chatbot-modal.pf-chatbot__chatbot-modal--fullscreen.pf-chatbot__terms-of-use-modal.pf-chatbot__terms-of-use-modal--fullscreen,
+.pf-chatbot__chatbot-modal.pf-chatbot__chatbot-modal--embedded.pf-chatbot__terms-of-use-modal.pf-chatbot__terms-of-use-modal--embedded {
+  height: inherit;
+}
+.pf-chatbot__chatbot-modal.pf-chatbot__chatbot-modal--fullscreen.pf-chatbot__terms-of-use-modal.pf-chatbot__terms-of-use-modal--fullscreen .pf-v6-c-content h2,
+.pf-chatbot__chatbot-modal.pf-chatbot__chatbot-modal--embedded.pf-chatbot__terms-of-use-modal.pf-chatbot__terms-of-use-modal--embedded .pf-v6-c-content h2 {
+  font-size: var(--pf-t--global--icon--size--font--heading--h1);
+}
+.pf-chatbot__chatbot-modal.pf-chatbot__chatbot-modal--fullscreen.pf-chatbot__terms-of-use-modal.pf-chatbot__terms-of-use-modal--fullscreen .pf-chatbot__terms-of-use--title,
+.pf-chatbot__chatbot-modal.pf-chatbot__chatbot-modal--embedded.pf-chatbot__terms-of-use-modal.pf-chatbot__terms-of-use-modal--embedded .pf-chatbot__terms-of-use--title {
+  font-size: var(--pf-t--global--font--size--heading--2xl);
+}
+
 :where(:root) {
   --pf-t--chatbot--heading--font-family: var(
     --pf-v6-c-content--heading--FontFamily,
@@ -1648,7 +1921,6 @@
   --pf-t--chatbot--illustration--fill: var(--pf-t--color--red--50);
   --pf-t--chatbot--code--background: var(--pf-t--color--gray--20);
   --pf-t--chatbot-toggle--background--hover: var(--pf-t--color--gray--70);
-  --pf-t--chatbot--timing-function: cubic-bezier(0.77, 0, 0.175, 1);
   --pf-t--chatbot--blue-icon--background--color--hover: rgba(
     146,
     197,
@@ -1660,8 +1932,6 @@
   --pf-t--chatbot--font-size: var(--pf-t--global--font--size--md);
   --pf-t--chatbot--background: var(--pf-t--global--background--color--secondary--default);
   --pf-t--chatbot--border: var(--pf-t--global--border--color--default);
-  --pf-t--chatbot--icon--fill: var(--pf-t--global--icon--color--subtle);
-  --pf-t--chatbot--icon--fill--hover: var(--pf-t--global--icon--color--regular);
   --pf-t--chatbot--icon--fill--active: var(--pf-t--global--text--color--regular);
   --pf-t--chatbot--blue-icon--fill: var(--pf-t--global--color--brand--default);
 }