@genexus/genexus-ide-ui 0.0.73 → 0.0.74

package/dist/collection/components/ai-assistant/ai-assistant.css

@@ -180,113 +180,455 @@ gxg-tabs {
 /* hiChar styles
 Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
 */
+:root {
+  --ui-animaton-speed: 0.2s;
+}
+
+/*ALIGNMENT*/
+/*Ellipsis*/
+/*****************************************************
+TYPOGRAPHY
+*****************************************************/
+/*Title 01 (Positive)*/
+.gxg-title-01 {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-md);
+  letter-spacing: var(--letter-spacing-md);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+}
+
+/*Title 01 (Negative)*/
+.gxg-title-01--negative {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-md);
+  letter-spacing: var(--letter-spacing-md);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  color: var(--color-on-primary);
+}
+
+/*Title 02 (Positive)*/
+.gxg-title-02 {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-sm);
+  color: var(--color-on-background);
+  text-align: start;
+  text-transform: uppercase;
+  line-height: 1.556em;
+}
+
+.gxg-title-02--negative {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-sm);
+  color: var(--color-on-background);
+  text-align: start;
+  text-transform: uppercase;
+  line-height: 1.556em;
+  color: var(--color-on-primary);
+}
+
+/*Title 03*/
+.gxg-title-03 {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-xs);
+  letter-spacing: var(--letter-spacing-sm);
+  color: var(--color-on-background);
+  text-align: start;
+  text-transform: uppercase;
+  line-height: 1.556em;
+}
+
+.gxg-title-03--negative {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-xs);
+  letter-spacing: var(--letter-spacing-sm);
+  color: var(--color-on-background);
+  text-align: start;
+  text-transform: uppercase;
+  line-height: 1.556em;
+  color: var(--color-on-primary);
+}
+
+/*Title 04*/
+.gxg-title-04 {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-md);
+  letter-spacing: var(--letter-spacing-md);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+}
+
+.gxg-title-04--negative {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-md);
+  letter-spacing: var(--letter-spacing-md);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  color: var(--color-on-primary);
+}
+
+/*Title 05*/
+.gxg-title-05 {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-sm);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.556em;
+}
+
+.gxg-title-05--negative {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-sm);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.556em;
+  color: var(--color-on-primary);
+}
+
+/*Text*/
+.gxg-text {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+}
+
+.gxg-text--negative {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  color: var(--color-on-primary);
+}
+
+.gxg-text--gray {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  color: var(--gray-05);
+}
+
+/*Quote*/
+.gxg-quote {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  font-style: italic;
+}
+
+.gxg-quote--negative {
+  color: var(--color-on-primary);
+}
+
+/*Link*/
+.gxg-link {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  color: var(--color-primary);
+  text-decoration: underline;
+  cursor: pointer;
+  display: inline-block;
+}
+.gxg-link:hover {
+  color: var(--color-primary-hover);
+}
+.gxg-link:active {
+  color: var(--color-primary-active);
+}
+
+.gxg-link-gray {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  color: var(--color-primary);
+  text-decoration: underline;
+  cursor: pointer;
+  display: inline-block;
+  color: var(--gray-04);
+}
+.gxg-link-gray:hover {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  color: var(--color-primary);
+  text-decoration: underline;
+  cursor: pointer;
+  display: inline-block;
+  color: var(--gray-04);
+  color: var(--gray-06);
+}
+
+/*Alerts*/
+.gxg-alert-error {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  color: var(--color-error-dark);
+  display: inline-block;
+}
+
+.gxg-alert-warning {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  color: var(--color-warning-dark);
+  display: inline-block;
+}
+
+.gxg-alert-success {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  color: var(--color-success-dark);
+  display: inline-block;
+}
+
+/*Tab*/
+.gxg-tab--disabled {
+  color: var(--color-primary-disabled);
+  pointer-events: none;
+}
+.gxg-tab--disabled[disabled] {
+  color: var(--color-primary-disabled);
+  pointer-events: none;
+}
+
+/*Label*/
+.gxg-label {
+  font-family: var(--font-family-primary) !important;
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-sm) !important;
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-primary-enabled);
+  text-align: center;
+  line-height: 1.455em;
+}
+.gxg-label:hover {
+  color: var(--color-primary-hover);
+}
+.gxg-label:focus {
+  color: var(--color-primary-active);
+}
+.gxg-label:active {
+  color: var(--color-primary-active);
+}
+.gxg-label[disabled] {
+  color: var(--color-primary-disabled);
+}
+
+.gxg-label--negative {
+  color: var(--color-on-primary);
+}
+.gxg-label--negative[disabled] {
+  color: var(--color-on-disabled);
+}
+
+/*****************************************************
+GXG-BUTTON and GXG-BUTTON-GROUP COMMON STYLES
+*****************************************************/
+.gxg-button-styles {
+  font-family: var(--font-family-primary) !important;
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-sm) !important;
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-primary-enabled);
+  text-align: center;
+  line-height: 1.455em;
+}
+
+/*****************************************************
+FORM ELEMENTS
+*****************************************************/
+.gxg-scrollbar {
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+  cursor: initial;
+}
+.gxg-scrollbar::-webkit-scrollbar {
+  width: var(--gxg-scrollbar-width, 6px);
+  height: var(--gxg-scrollbar-width, 6px);
+}
+.gxg-scrollbar::-webkit-scrollbar-track {
+  background-color: var(--gxg-scrollbar-track-background, --gray-02);
+  border-radius: var(--gxg-scrollbar-track-border-radius, 10px);
+}
+.gxg-scrollbar::-webkit-scrollbar-thumb {
+  background-color: var(--gxg-scrollbar-track-thumb-background, --gray-05);
+  border-radius: var(--gxg-scrollbar-track-thumb-radius, 10px);
+  border: var(--gxg-scrollbar-track-thumb-border);
+  background-clip: padding-box;
+}
+.gxg-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);
+}
+
 :host {
+  --ai-dot-bg-color: var(--color-success-dark);
   display: block;
   height: 100%;
   --assistant-bg-color: var(--gray-11);
+  flex-basis: 286px;
+  flex-shrink: 0;
+  height: 100%;
+  overflow-y: auto;
+}
+:host .header::before {
+  transition: 200ms background-color;
 }
 
 /*--- Assistant Status ---*/
-:host(.assistant--success) .header::before {
-  background-color: var(--color-primary-hover);
+:host(.assistant--success) .header__first-row::before {
+  background-color: var(--ai-dot-bg-color);
 }
 
-:host(.assistant--error) .header::before {
-  background-color: var(--color-error-light);
+:host(.assistant--error) .header__first-row::before {
+  background-color: var(--color-error-dark);
 }
 
 .gx-ide-main-wrapper {
   padding: 106px 10px 52px 10px;
   background-color: var(--gray-10);
   height: 100%;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  gap: var(--spacing-comp-03);
 }
 
 /*--- Header ---*/
 .header {
   border-block-start: 1px solid var(--gray-13);
   padding-block-start: var(--spacing-comp-03);
+  display: flex;
+  flex-direction: column;
+}
+.header__actions-wrapper {
+  display: flex;
+  gap: var(--spacing-comp-02);
+  margin-inline-start: auto;
+}
+.header__first-row {
   display: flex;
   gap: var(--spacing-comp-02);
   align-items: center;
+  justify-content: space-between;
 }
-.header::before {
+.header__first-row::before {
   content: "";
   width: var(--spacing-comp-02);
   height: var(--spacing-comp-02);
   display: block;
   border-radius: calc(var(--spacing-comp-02) / 2);
-  background-color: var(--gray-02);
+  background-color: var(--ai-dot-bg-color);
 }
-
-/*--- Messages ---*/
-.messages {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-comp-02);
-  list-style-type: none;
-  padding: 0;
+.header__filter {
+  margin-block-start: var(--spacing-comp-02);
 }
-.messages .message {
+.header__second-row {
+  transition: 100ms grid-template-rows;
   display: grid;
   grid-template-rows: 0fr;
-  transition: grid-template-rows 100ms;
-  transition: grid-template-rows 100ms, -ms-grid-rows 100ms;
-  /*caption*/
 }
-.messages .message--visible {
+.header__second-row--visible {
   grid-template-rows: 1fr;
 }
-.messages .message__outer-wrapper {
+.header .filter-inner-wrapper {
   overflow: hidden;
 }
-.messages .message__inner-wrapper {
-  padding: 8px;
-  border-radius: var(--border-radius-sm);
-  border: var(--border-width-sm) solid transparent;
-  background-color: var(--assistant-bg-color);
-  border-inline-start-width: var(--border-width-md);
-}
-.messages .message__caption {
-  font-size: var(--mc-font-size-xxs);
-  line-height: var(--font-style-regular);
-}
-.messages .message--user .message__inner-wrapper {
-  background-color: var(--gray-12);
-}
-.messages .message--assistant-action .message__inner-wrapper, .messages .message--assistant-error .message__inner-wrapper {
-  font-style: italic;
-}
-.messages .message--assistant-in-progress .message__inner-wrapper {
-  font-style: italic;
-  display: grid;
-  grid-template-columns: 1fr auto;
-  gap: var(--spacing-comp-02);
-  border-inline-start-color: var(--gray-02);
+
+/*--- Messages ---*/
+.messages-wrapper {
+  position: relative;
+  overflow: auto;
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+  cursor: initial;
 }
-.messages .message--assistant-in-progress .message__inner-wrapper .message__caption {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  flex: 1;
+.messages-wrapper::-webkit-scrollbar {
+  width: var(--gxg-scrollbar-width, 6px);
+  height: var(--gxg-scrollbar-width, 6px);
 }
-.messages .message--assistant-in-progress .message__inner-wrapper .animation-wrapper {
-  flex: none;
+.messages-wrapper::-webkit-scrollbar-track {
+  background-color: var(--gxg-scrollbar-track-background, --gray-02);
+  border-radius: var(--gxg-scrollbar-track-border-radius, 10px);
 }
-.messages .message--assistant-chat .message__inner-wrapper, .messages .message--assistant-action .message__inner-wrapper {
-  border-inline-start-color: var(--color-primary-hover);
+.messages-wrapper::-webkit-scrollbar-thumb {
+  background-color: var(--gxg-scrollbar-track-thumb-background, --gray-05);
+  border-radius: var(--gxg-scrollbar-track-thumb-radius, 10px);
+  border: var(--gxg-scrollbar-track-thumb-border);
+  background-clip: padding-box;
 }
-.messages .message--assistant-error .message__inner-wrapper {
-  border-inline-start-color: var(--color-error-light);
+.messages-wrapper::-webkit-scrollbar-thumb:hover {
+  background-color: var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);
 }
-/*--- Message Animation ---*/
-@keyframes message-animation {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
+
+.messages {
+  display: flex;
+  flex-direction: column-reverse;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
 }
+
 /*--- Prompt ---*/
 .prompt {
   position: relative;
@@ -310,80 +652,4 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
   padding: var(--spacing-comp-00) var(--spacing-comp-02);
   background-color: var(--gray-00);
   border-radius: var(--border-width-md);
-}
-
-/*--- Dot Pulse Sweet Animation ---*/
-.animation-wrapper {
-  width: 60px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.dot-pulse {
-  position: relative;
-  left: -9999px;
-  width: 5px;
-  height: 5px;
-  border-radius: 2.5px;
-  background-color: var(--gray-03);
-  color: var(--gray-03);
-  box-shadow: 9999px 0 0 -5px;
-  animation: dot-pulse 1.5s infinite linear;
-  animation-delay: 0.25s;
-}
-.dot-pulse::before, .dot-pulse::after {
-  content: "";
-  display: inline-block;
-  position: absolute;
-  top: 0;
-  width: 5px;
-  height: 5px;
-  border-radius: 2.5px;
-  background-color: var(--gray-03);
-  color: var(--gray-03);
-}
-.dot-pulse::before {
-  box-shadow: 9984px 0 0 -5px;
-  animation: dot-pulse-before 1.5s infinite linear;
-  animation-delay: 0s;
-}
-.dot-pulse::after {
-  box-shadow: 10014px 0 0 -5px;
-  animation: dot-pulse-after 1.5s infinite linear;
-  animation-delay: 0.5s;
-}
-
-@keyframes dot-pulse-before {
-  0% {
-    box-shadow: 9984px 0 0 -5px;
-  }
-  30% {
-    box-shadow: 9984px 0 0 2px;
-  }
-  60%, 100% {
-    box-shadow: 9984px 0 0 -5px;
-  }
-}
-@keyframes dot-pulse {
-  0% {
-    box-shadow: 9999px 0 0 -5px;
-  }
-  30% {
-    box-shadow: 9999px 0 0 2px;
-  }
-  60%, 100% {
-    box-shadow: 9999px 0 0 -5px;
-  }
-}
-@keyframes dot-pulse-after {
-  0% {
-    box-shadow: 10014px 0 0 -5px;
-  }
-  30% {
-    box-shadow: 10014px 0 0 2px;
-  }
-  60%, 100% {
-    box-shadow: 10014px 0 0 -5px;
-  }
 }