inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-09-10 14:11:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-8382] Blurring the AI answer section before getting response from backend

Browse Source
This commit is contained in:
Jacek Pluta
2024-07-17 08:33:56 +02:00
parent 88dd1e76ed
commit df8f1208c6
2 changed files with 104 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
projects/aca-content/src/lib/components/knowledge-retrieval/search-ai/search-ai-results/search-ai-results.component.html
View File

@@ -38,7 +38,7 @@
</mat-card>
</div>
<mat-divider class="aca-search-ai-response-container-body-divider"></mat-divider>
<ng-container *ngIf="!loading">
<ng-container *ngIf="!loading else skeleton">
<div
class="aca-search-ai-response-container-body"
*ngIf="!hasAnsweringError">
@@ -125,3 +125,27 @@
*ngIf="hasError">
</adf-empty-content>
</aca-page-layout>
<ng-template #skeleton>
<div class="adf-skeleton-container">
<div class="adf-skeleton adf-skeleton-text"></div>
<div class="adf-skeleton adf-skeleton-text"></div>
<div class="adf-skeleton adf-skeleton-text adf-skeleton-text-half"></div>
<mat-divider class="aca-search-ai-response-container-body-divider"></mat-divider>
<p class="aca-search-ai-response-container-body-references-container-header adf-skeleton-references-container-header">
{{ 'KNOWLEDGE_RETRIEVAL.SEARCH.RESULTS_PAGE.REFERENCED_DOCUMENTS_HEADER' | translate }}
</p>
<div class="adf-skeleton-header-container">
<div class="adf-skeleton-header-container-element">
<div class="adf-skeleton adf-skeleton-image"></div>
<div class="adf-skeleton adf-skeleton-text adf-skeleton-text-title"></div>
</div>
<div class="adf-skeleton-header-container-element">
<div class="adf-skeleton adf-skeleton-image"></div>
<div class="adf-skeleton adf-skeleton-text adf-skeleton-text-title"></div>
</div>
</div>
</div>
</ng-template>

80
projects/aca-content/src/lib/components/knowledge-retrieval/search-ai/search-ai-results/search-ai-results.component.scss
View File

@@ -1,3 +1,7 @@
$light-grey1: #d5d5d5;
$light-grey2: #d9d9d9;
$light-grey3: #dedede;
.aca-search-ai-results {
aca-page-layout {
.aca-page-layout-content {
@@ -34,6 +38,80 @@
margin: 16px 0 75px;
padding: 14px 40px 36px 35px;
.adf-skeleton {
position: relative;
background-image: linear-gradient(to left, $light-grey1 0%, $light-grey2 20%, $light-grey3 40%, $light-grey1 100%);
background-size: 200%;
display: inline-block;
height: 1em;
overflow: hidden;
&::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%);
}
}
}
.adf-skeleton-container {
margin-top: 16px;
.adf-skeleton-text {
width: 90%;
height: 1rem;
margin-bottom: 0.5rem;
border-radius: 0.25rem;
margin-left: 6px;
&-title {
width: 75px;
}
&-half {
width: 50%;
margin-bottom: 8px;
}
}
.adf-skeleton-references-container-header {
padding-left: 8px;
}
.adf-skeleton-header-container {
padding-left: 6px;
margin-top: 16px;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 6px;
&-element {
display: flex;
align-items: center;
margin-right: 16px;
.adf-skeleton-text {
margin-bottom: 0;
}
}
}
.adf-skeleton-image {
height: 16px;
width: 16px;
border-radius: 0.25rem;
}
}
&-error {
border-color: var(--adf-error-color);
padding: 21px 19px 27px 18px;
@@ -166,7 +244,7 @@
padding-left: 8px;
&-header {
margin-top: 16px;
margin-top: 24px;
color: var(--theme-text-light-color);
font-weight: 400;
margin-bottom: 3px;