alfresco-content-app/projects/aca-content/src/lib/components/knowledge-retrieval/search-ai/search-ai-results/search-ai-results.component.scss

@use '../../../../ui/mat-selectors' as ms;

.aca-search-ai-results {
  aca-page-layout {
    .aca-page-layout-content {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      width: 100%;
      background-color: white;
      border-top: 1px solid var(--theme-grey-background-color);
      padding-top: 28px;

      .aca-search-ai-results-container {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow-y: auto;
        padding-right: 24%;
        padding-left: 24%;
        min-width: 51%;

        &-query {
          border-radius: 12px;
          padding: 20px 15px 19px;
          background: var(--theme-card-background-grey-color);
        }
      }

      .aca-search-ai-response-container {
        padding: 18px 20px;
        display: flex;
        flex-direction: column;
        border: 1px solid var(--adf-theme-foreground-divider-color);
        border-radius: 12px;
        margin: 16px 0 75px;

        &-references-container-header {
          padding-left: 8px;
        }

        .adf-skeleton {
          position: relative;
          background-image: linear-gradient(
            to left,
            var(--theme-light-grey-1-color) 0%,
            var(--theme-light-grey-2-color) 20%,
            var(--theme-light-grey-3-color) 40%,
            var(--theme-light-grey-1-color) 100%
          );
          background-size: 200%;
          display: inline-block;
          height: 1em;
          overflow: hidden;
          width: 100%;
          margin-bottom: 0.5rem;
          border-radius: 0.25rem;

          &-half {
            width: 50%;
            margin-bottom: 8px;
          }

          &::after {
            position: absolute;
            inset: 0;
            transform: translateX(-100%);
            background-image: linear-gradient(90deg, rgba(white, 0) 0, rgba(white, 0.2) 20%, rgba(white, 0.5) 60%, rgba(white, 0));
            animation: shimmer 2s infinite;
            content: '';
          }

          @keyframes shimmer {
            100% {
              transform: translateX(100%);
            }
          }
        }

        &-error {
          border-color: var(--adf-error-color);
          padding: 32px 18px;

          &-message {
            display: flex;
            justify-content: space-between;
            align-items: center;

            &-regeneration-button {
              background-color: var(--adf-secondary-button-background);

              &-icon {
                font-size: 24px;
                height: 24px;
                width: 23px;
              }
            }
          }
        }

        &-body {
          &-response {
            margin-bottom: 17px;
            overflow-wrap: break-word;
            white-space: pre-wrap;

            &-action {
              width: max-content;
              padding: 0;

              mat-icon {
                font-size: 17.25px;
              }

              &-regeneration {
                margin-left: 2px;
                margin-right: 2px;
              }

              #{ms.$mat-button-touch-target} {
                width: 24px;
              }
            }

            table {
              width: 100%;
              border-collapse: collapse;
              box-shadow: 0 2px 4px var(--theme-grey-divider-color);
              border-radius: 4px;
              overflow: hidden;

              & th {
                background-color: var(--adf-theme-mat-grey-color-a200);
                text-align: left;
              }

              & th,
              & td {
                padding: 16px;
                border-bottom: 1px solid var(--adf-theme-foreground-divider-color);
              }

              & tr {
                &:hover {
                  background-color: var(--adf-theme-background-hover-color);
                }

                &:nth-child(even) {
                  background-color: var(--theme-card-background-grey-color);
                }
              }
            }
          }

          &-divider {
            margin-top: 9px;
          }

          &-references-container {
            padding-right: 8px;
            padding-left: 8px;

            &-header {
              margin-top: 16px;
              color: var(--theme-text-light-color);
              font-weight: 400;
              margin-bottom: 3px;
            }

            &-documents {
              padding-right: 5px;
              padding-top: 5px;
              margin-left: -2px;
              display: flex;
              flex-wrap: wrap;
              gap: 21px;

              &-document {
                display: flex;
                flex-direction: row;
                padding-top: 7px;
                padding-bottom: 7px;

                &-icon {
                  height: auto;
                  align-content: center;
                  padding-right: 11px;
                }

                &-name {
                  display: flex;
                  flex-direction: column;
                  width: 100%;
                  justify-content: center;
                }

                &:hover {
                  text-decoration: underline;
                  text-decoration-color: var(--theme-primary-color);
                  color: var(--theme-primary-color);
                  cursor: pointer;
                }
              }
            }
          }
        }
      }
    }
  }
}