Skip to content

Commit

Permalink
pref: issue ai result style
Browse files Browse the repository at this point in the history
  • Loading branch information
@hai-tian
hai-tian committed Jan 9, 2025
1 parent 285929f commit 169cdff
Show file tree
Hide file tree
Showing 9 changed files with 904 additions and 658 deletions.
16 changes: 9 additions & 7 deletions ui/src/components/yaml/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -401,13 +401,6 @@ const Yaml = (props: IProps) => {
clear: 'both',
}}
/>
<div
className={`${styles.yaml_content_streamingIndicator} ${dotToTopHeight - contentToTopHeight + 53 - moduleHeight >= 0 ? styles.yaml_content_streamingIndicatorFixed : ''}`}
>
<span className={styles.dot}></span>
<span className={styles.dot}></span>
<span className={styles.dot}></span>
</div>
</>
) : interpretStatus === 'error' ? (
<Alert
Expand All @@ -419,6 +412,15 @@ const Yaml = (props: IProps) => {
<Markdown>{interpret}</Markdown>
)}
</div>
{interpretStatus === 'streaming' && interpret && (
<div
className={`${styles.yaml_content_streamingIndicator} ${dotToTopHeight - contentToTopHeight + 53 - moduleHeight >= 0 ? styles.yaml_content_streamingIndicatorFixed : ''}`}
>
<span className={styles.dot}></span>
<span className={styles.dot}></span>
<span className={styles.dot}></span>
</div>
)}
</div>
</div>
)}
Expand Down
77 changes: 39 additions & 38 deletions ui/src/components/yaml/styles.module.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -220,11 +220,9 @@
justify-content: space-between;
align-items: center;
padding: 12px;
background: linear-gradient(
135deg,
rgba(147, 112, 219, 0.15) 0%,
rgba(43, 29, 60, 0.95) 100%
);
background: linear-gradient(135deg,
rgba(147, 112, 219, 0.15) 0%,
rgba(43, 29, 60, 0.95) 100%);
border-bottom: 1px solid rgba(147, 112, 219, 0.2);
border-radius: 12px 12px 0 0;
color: #e6e6fa;
Expand Down Expand Up @@ -366,34 +364,7 @@
box-sizing: border-box;
word-wrap: break-word;

.yaml_content_streamingIndicator {
display: flex;
align-items: center;
gap: 4px;

.dot {
width: 6px;
height: 6px;
background-color: #4447c3;
border-radius: 50%;
opacity: 0.3;
animation: dotPulse 1.4s infinite;

&:nth-child(2) {
animation-delay: 0.2s;
}

&:nth-child(3) {
animation-delay: 0.4s;
}
}
}

.yaml_content_streamingIndicatorFixed {
position: fixed;
bottom: 16px;
left: 16px;
}

.yaml_content_diagnosisLoading {
height: 100%;
Expand Down Expand Up @@ -614,17 +585,46 @@
hr {
border: none;
height: 1px;
background: linear-gradient(
to right,
rgba(147, 112, 219, 0.1),
rgba(147, 112, 219, 0.4),
rgba(147, 112, 219, 0.1)
);
background: linear-gradient(to right,
rgba(147, 112, 219, 0.1),
rgba(147, 112, 219, 0.4),
rgba(147, 112, 219, 0.1));
margin: 24px 0;
}
}
}
}

.yaml_content_streamingIndicator {
display: flex;
align-items: center;
gap: 4px;
padding: 16px;

.dot {
width: 6px;
height: 6px;
background-color: #4447c3;
border-radius: 50%;
opacity: 0.3;
animation: dotPulse 1.4s infinite;

&:nth-child(2) {
animation-delay: 0.2s;
}

&:nth-child(3) {
animation-delay: 0.4s;
}
}
}

.yaml_content_streamingIndicatorFixed {
position: sticky;
bottom: 0;
left: 0;
right: 0;
}
}
}
}
Expand Down Expand Up @@ -687,6 +687,7 @@
}

@keyframes sparkle {

0%,
100% {
filter: drop-shadow(0 0 4px rgba(147, 112, 219, 0.4));
Expand Down
18 changes: 9 additions & 9 deletions ui/src/pages/insightDetail/components/eventAggregator/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -425,19 +425,19 @@ const EventAggregator: React.FC<EventAggregatorProps> = ({
) : (
<>
<Markdown>{diagnosis}</Markdown>
{diagnosisStatus === 'streaming' && (
<div
className={`${styles.events_content_streamingIndicator} ${dotToTopHeight - contentToTopHeight + 53 - (isVertical ? 300 : 600) >= 0 ? styles.events_content_streamingIndicatorFixed : ''}`}
>
<span className={styles.dot}></span>
<span className={styles.dot}></span>
<span className={styles.dot}></span>
</div>
)}
<div ref={diagnosisEndRef} />
</>
)}
</div>
{diagnosisStatus === 'streaming' && diagnosis && (
<div
className={`${styles.events_content_streamingIndicator} ${dotToTopHeight - contentToTopHeight + 53 - (isVertical ? 300 : 600) >= 0 ? styles.events_content_streamingIndicatorFixed : ''}`}
>
<span className={styles.dot}></span>
<span className={styles.dot}></span>
<span className={styles.dot}></span>
</div>
)}
</div>
</div>
)
Expand Down
121 changes: 55 additions & 66 deletions ui/src/pages/insightDetail/components/eventAggregator/styles.module.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -247,26 +247,18 @@
flex-direction: column;
backdrop-filter: blur(8px);
z-index: 10;
background-image: radial-gradient(
ellipse 489px 674px at 6px 0px,
background-image: radial-gradient(ellipse 489px 674px at 6px 0px,
#fcf8ff 0%,
#ebd7ff 100%
),
radial-gradient(
ellipse 587px 672px at 433px 513px,
#ebd7ff 100%),
radial-gradient(ellipse 587px 672px at 433px 513px,
#dae4ffa1 0%,
#e1d2e704 100%
),
radial-gradient(
ellipse 346px 396px at 15px 506px,
#e1d2e704 100%),
radial-gradient(ellipse 346px 396px at 15px 506px,
#dae4ffa3 0%,
#e1d2e704 100%
),
radial-gradient(
ellipse 583px 668px at 436px 8px,
#e1d2e704 100%),
radial-gradient(ellipse 583px 668px at 436px 8px,
#f8f5ff 0%,
#f3e7f904 100%
);
#f3e7f904 100%);
animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);

.events_content_diagnosisHeader {
Expand Down Expand Up @@ -467,34 +459,6 @@
}
}

.events_content_streamingIndicator {
display: flex;
align-items: center;
gap: 4px;

.dot {
width: 6px;
height: 6px;
background-color: #4447c3;
border-radius: 50%;
opacity: 0.3;
animation: dotPulse 1.4s infinite;

&:nth-child(2) {
animation-delay: 0.2s;
}

&:nth-child(3) {
animation-delay: 0.4s;
}
}
}

.events_content_streamingIndicatorFixed {
position: fixed;
bottom: 16px;
left: 16px;
}

.events_content_diagnosisLoading {
display: flex;
Expand Down Expand Up @@ -655,17 +619,46 @@
hr {
border: none;
height: 1px;
background: linear-gradient(
to right,
rgba(147, 112, 219, 0.1),
rgba(147, 112, 219, 0.4),
rgba(147, 112, 219, 0.1)
);
background: linear-gradient(to right,
rgba(147, 112, 219, 0.1),
rgba(147, 112, 219, 0.4),
rgba(147, 112, 219, 0.1));
margin: 24px 0;
}
}
}
}

.events_content_streamingIndicator {
display: flex;
align-items: center;
gap: 4px;
padding: 16px;

.dot {
width: 6px;
height: 6px;
background-color: #4447c3;
border-radius: 50%;
opacity: 0.3;
animation: dotPulse 1.4s infinite;

&:nth-child(2) {
animation-delay: 0.2s;
}

&:nth-child(3) {
animation-delay: 0.4s;
}
}
}

.events_content_streamingIndicatorFixed {
position: sticky;
bottom: 0;
left: 0;
right: 0;
}
}
}
}
Expand Down Expand Up @@ -722,12 +715,10 @@
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
120deg,
transparent,
rgba(255, 255, 255, 0.6),
transparent
);
background: linear-gradient(120deg,
transparent,
rgba(255, 255, 255, 0.6),
transparent);
transform: translateX(-100%);
}

Expand All @@ -753,15 +744,15 @@
.ant-table {
background: transparent;

.ant-table-thead > tr > th {
.ant-table-thead>tr>th {
background: #fafafa;
font-weight: 500;
border-bottom: 1px solid #f0f0f0;
padding: 12px 16px;
}

.ant-table-tbody {
> tr {
>tr {
transition: all 0.2s ease;

&:hover {
Expand All @@ -770,7 +761,7 @@
z-index: 1;
}

> td {
>td {
transition: background-color 0.2s ease;
}
}
Expand Down Expand Up @@ -817,13 +808,11 @@
.ant-skeleton-paragraph {
margin-bottom: 0;

> li {
background: linear-gradient(
90deg,
#f5f5f5 25%,
#e8e8e8 37%,
#f5f5f5 63%
);
>li {
background: linear-gradient(90deg,
#f5f5f5 25%,
#e8e8e8 37%,
#f5f5f5 63%);
background-size: 400% 100%;
animation: ant-skeleton-loading 1.4s ease infinite;
}
Expand Down
Loading

0 comments on commit 169cdff

Please sign in to comment.