@patternfly/chatbot 2.2.0-prerelease.3 → 2.2.0-prerelease.31

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);
@@ -64,7 +64,7 @@
   background-color: var(--pf-t--chatbot--background);
   border-radius: var(--pf-t--global--border--radius--medium);
   box-shadow: var(--pf-t--global--box-shadow--lg);
-  font-size: var(--pf-t--chatbot--font-size);
+  font-size: var(--pf-t--global--font--size--md);
   z-index: var(--pf-t--global--z-index--md);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -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;
@@ -305,6 +308,20 @@
   border-radius: unset;
 }
 
+.pf-chatbot__history-loading {
+  display: flex;
+  padding: var(--pf-t--global--spacer--lg);
+  flex-direction: column;
+  gap: var(--pf-t--global--spacer--lg);
+}
+
+.pf-chatbot__history-loading-block {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pf-t--global--spacer--sm);
+  align-self: stretch;
+}
+
 .pf-chatbot__footnote {
   align-self: center;
 }
@@ -346,9 +363,6 @@
     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);
 }
@@ -412,9 +426,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 {
@@ -430,7 +441,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,
@@ -451,7 +462,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 {
@@ -489,7 +500,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);
@@ -661,7 +672,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;
@@ -690,11 +701,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 {
@@ -825,13 +919,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);
@@ -870,12 +957,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;
@@ -888,25 +975,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;
@@ -916,9 +990,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;
@@ -991,7 +1065,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);
@@ -1023,7 +1097,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);
 }
 
@@ -1031,37 +1105,45 @@
   display: inline-block;
 }
 
+.pf-chatbot__message-and-actions:has(.pf-chatbot__message-table) {
+  width: 100%;
+}
+
 .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-button.pf-m-link {
+  font-size: var(--pf-t--global--font--size--md);
 }
 .pf-chatbot__message-text .pf-v6-c-content,
 .pf-chatbot__message-text .pf-v6-c-content--small,
 .pf-chatbot__message-text .pf-v6-c-content--blockquote,
 .pf-chatbot__message-text p,
 .pf-chatbot__message-text a {
-  --pf-v6-c-content--FontSize: var(--pf-t--chatbot--font-size);
+  --pf-v6-c-content--FontSize: var(--pf-t--global--font--size--md);
 }
 .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-button__icon {
+  --pf-v6-c-button__icon--Color: var(--pf-t--global--text--color--on-brand--default);
 }
 .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 {
@@ -1094,7 +1176,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);
@@ -1126,52 +1208,68 @@
 }
 
 .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);
 }
 
+.pf-chatbot__message-image {
+  border-radius: var(--pf-t--global--border--radius--small);
+  max-width: 37.5rem;
+  max-height: 25rem;
+  min-height: 6.25rem;
+  display: block;
+}
+
 .pf-chatbot__message-and-actions blockquote .pf-chatbot__message-text {
   display: inline-block;
 }
 
+.pf-chatbot__message-and-actions:has(.pf-chatbot__message-table) {
+  width: 100%;
+}
+
 .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-button.pf-m-link {
+  font-size: var(--pf-t--global--font--size--md);
 }
 .pf-chatbot__message-text .pf-v6-c-content,
 .pf-chatbot__message-text .pf-v6-c-content--small,
 .pf-chatbot__message-text .pf-v6-c-content--blockquote,
 .pf-chatbot__message-text p,
 .pf-chatbot__message-text a {
-  --pf-v6-c-content--FontSize: var(--pf-t--chatbot--font-size);
+  --pf-v6-c-content--FontSize: var(--pf-t--global--font--size--md);
 }
 .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-button__icon {
+  --pf-v6-c-button__icon--Color: var(--pf-t--global--text--color--on-brand--default);
 }
 .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,
@@ -1179,21 +1277,41 @@
 .pf-chatbot__message-unordered-list .pf-v6-c-list,
 .pf-chatbot__message-unordered-list ul,
 .pf-chatbot__message-unordered-list li {
-  font-size: var(--pf-t--chatbot--font-size);
+  font-size: var(--pf-t--global--font--size--md);
 }
 
 .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-table {
+  border-radius: var(--pf-t--global--border--radius--small);
+  --pf-v6-c-table--BackgroundColor: var(--pf-t--global--background--color--tertiary--default);
+  --pf-v6-c-table--BorderColor: var(--pf-t--global--border--color--default);
+  padding: 0 var(--pf-t--global--spacer--lg) 0 var(--pf-t--global--spacer--lg);
+}
+.pf-chatbot__message-table.pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
+  border-block-start: 0;
+}
+.pf-chatbot__message-table tbody {
+  border-radius: var(--pf-t--global--border--radius--small);
+}
+.pf-chatbot__message-table tr {
+  --pf-v6-c-table__tr--responsive--PaddingInlineEnd: 0;
+  --pf-v6-c-table__tr--responsive--PaddingInlineStart: 0;
+}
+.pf-chatbot__message-table .pf-v6-c-table__tr:last-of-type {
+  border-block-end: 0;
 }
 
 .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;
@@ -1236,6 +1354,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);
@@ -1243,10 +1462,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: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, .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: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 {
@@ -1256,25 +1484,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);
@@ -1333,11 +1561,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);
@@ -1350,7 +1587,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 {
@@ -1364,29 +1601,19 @@
   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;
-  padding-block-start: var(--pf-chatbot__message-bar-child--PaddingBlockStart);
-  padding-block-end: var(--pf-chatbot__message-bar-child--PaddingBlockEnd);
-  overflow: hidden;
-  position: relative;
-}
-.pf-chatbot__message-bar-placeholder {
-  position: absolute;
-  top: 20px;
-  left: 16px;
-  color: var(--pf-t--global--text--color--placeholder);
-  pointer-events: none;
-  font-size: var(--pf-t--chatbot--font-size);
+  padding-block-start: var(--pf-t--global--spacer--sm);
+  padding-block-end: var(--pf-t--global--spacer--sm);
 }
 
 .pf-chatbot__message-textarea {
-  padding-block-start: var(--pf-t--global--spacer--md);
-  padding-block-end: var(--pf-t--global--spacer--md);
-  padding-inline-start: var(--pf-t--global--spacer--md);
-  padding-inline-end: var(--pf-t--global--spacer--md);
+  --pf-v6-c-form-control--before--BorderStyle: none;
+  --pf-v6-c-form-control--after--BorderStyle: none;
+  resize: none;
+  background-color: transparent;
   font-size: var(--pf-t--global--font--size--md);
   line-height: 1.5rem;
   max-height: 12rem;
@@ -1397,7 +1624,31 @@
   height: 100%;
   width: 100%;
   display: block !important;
-  position: relative;
+}
+.pf-chatbot__message-textarea .pf-v6-c-form-control__textarea:focus-visible {
+  outline: none;
+}
+.pf-chatbot__message-textarea textarea {
+  outline-offset: 0px !important;
+  --pf-v6-c-form-control--PaddingBlockStart: 0;
+  --pf-v6-c-form-control--PaddingBlockEnd: 0;
+  --pf-v6-c-form-control--BorderRadius: 0;
+}
+.pf-chatbot__message-textarea textarea:focus-visible {
+  outline: none;
+}
+
+@media screen and (max-width: 359px) {
+  .pf-chatbot__message-textarea {
+    margin-top: var(--pf-t--global--spacer--md) !important;
+    margin-bottom: var(--pf-t--global--spacer--md) !important;
+  }
+}
+@media screen and (max-width: 415px) {
+  .pf-chatbot--embedded .pf-chatbot__message-textarea {
+    margin-top: var(--pf-t--global--spacer--md) !important;
+    margin-bottom: var(--pf-t--global--spacer--md) !important;
+  }
 }
 
 .pf-chatbot__jump {
@@ -1414,9 +1665,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 {
@@ -1425,7 +1676,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;
@@ -1493,9 +1744,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 {
@@ -1504,7 +1755,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;
@@ -1523,7 +1774,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;
@@ -1531,11 +1783,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 {
@@ -1599,16 +1892,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 {
@@ -1637,6 +1930,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,
@@ -1649,7 +1997,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,
@@ -1658,11 +2005,8 @@
   );
   --pf-t--chatbot--blue-icon--fill--hover: var(--pf-t--global--color--brand--hover);
   --pf-t--chatbot-toggle--color: var(--pf-t--global--icon--color--inverse);
-  --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);
 }