Skip to content

Commit e4fd2df

Browse files
vas3avas3a
authored
Merge pull request #1295 from topcoder-platform/PM-2135_aiworkflow-scorcard-header
PM-2135 - AI Workflow Scorecard Header Component
2 parents 0b46c0f + e1dc7fd commit e4fd2df

File tree

11 files changed

+368
-3
lines changed

11 files changed

+368
-3
lines changed

‎src/apps/review/src/lib/assets/icons/deepseek.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/apps/review/src/lib/assets/icons/icon-clock.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/apps/review/src/lib/assets/icons/icon-premium.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/apps/review/src/lib/assets/icons/index.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ import { ReactComponent as IconReview } from './icon-phase-review.svg'
99
import { ReactComponent as IconAppeal } from './icon-phase-appeal.svg'
1010
import { ReactComponent as IconAppealResponse } from './icon-phase-appeal-response.svg'
1111
import { ReactComponent as IconPhaseWinners } from './icon-phase-winners.svg'
12+
import { ReactComponent as IconDeepseekAi } from './deepseek.svg'
13+
import { ReactComponent as IconClock } from './icon-clock.svg'
14+
import { ReactComponent as IconPremium } from './icon-premium.svg'
1215

1316
export * from './editor/bold'
1417
export * from './editor/code'
@@ -37,6 +40,9 @@ export {
3740
IconAppeal,
3841
IconAppealResponse,
3942
IconPhaseWinners,
43+
IconDeepseekAi,
44+
IconClock,
45+
IconPremium,
4046
}
4147

4248
export const phasesIcons = {

‎src/apps/review/src/lib/hooks/useFetchAiWorkflowRuns.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,21 @@ export interface AiWorkflow {
2525
name: string;
2626
description: string;
2727
scorecard?: Scorecard
28+
defUrl: string
29+
llm: {
30+
name: string
31+
description: string
32+
icon: string
33+
url: string
34+
provider: {
35+
name: string
36+
}
37+
}
2838
}
2939

3040
export interface AiWorkflowRun {
3141
id: string;
42+
startedAt: string;
3243
completedAt: string;
3344
status: AiWorkflowRunStatusEnum;
3445
score: number;

‎src/apps/review/src/pages/ai-scorecards/components/AiModelIcon.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { FC, useCallback, useRef } from 'react'
2+
3+
import iconDeepseekAi from '~/apps/review/src/lib/assets/icons/deepseek.svg'
4+
5+
import { AiWorkflow } from '../../../lib/hooks'
6+
7+
interface AiModelIconProps {
8+
model: AiWorkflow['llm']
9+
}
10+
11+
const AiModelIcon: FC<AiModelIconProps> = props => {
12+
const llmIconImgRef = useRef<HTMLImageElement>(null)
13+
14+
const handleError = useCallback(() => {
15+
if (!llmIconImgRef.current) {
16+
return
17+
}
18+
19+
llmIconImgRef.current.src = iconDeepseekAi
20+
}, [])
21+
22+
return (
23+
<img src={props.model.icon} alt={props.model.name} onError={handleError} ref={llmIconImgRef} />
24+
)
25+
}
26+
27+
export default AiModelIcon

‎src/apps/review/src/pages/ai-scorecards/components/AiModelModal/AiModelModal.module.scss‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
@import '@libs/ui/styles/includes';
2+
3+
.wrap {
4+
@include ltemd {
5+
padding-top: $sp-15;
6+
}
7+
}
8+
9+
.modelNameWrap {
10+
display: flex;
11+
align-items: center;
12+
gap: $sp-4;
13+
@include ltemd {
14+
flex-direction: column;
15+
gap: $sp-4;
16+
}
17+
}
18+
19+
.modelIcon {
20+
width: 60px;
21+
height: 60px;
22+
border-radius: $sp-1;
23+
border: 1px solid #A8A8A8;
24+
padding: $sp-1;
25+
26+
align-items: center;
27+
display: flex;
28+
justify-content: center;
29+
30+
flex: 0 0 auto;
31+
}
32+
33+
.modelName {
34+
display: flex;
35+
align-items: center;
36+
gap: $sp-3;
37+
38+
h3 {
39+
font-family: "Figtree", sans-serif;
40+
font-size: 26px;
41+
font-weight: 700;
42+
line-height: 30px;
43+
color: #0A0A0A;
44+
}
45+
46+
svg {
47+
display: block;
48+
width: 16px;
49+
height: 16px;
50+
}
51+
52+
@include ltemd {
53+
h3 {
54+
font-size: 22px;
55+
line-height: 26px;
56+
}
57+
}
58+
}
59+
60+
.modelDescription {
61+
margin-top: $sp-6;
62+
font-family: "Nunito Sans", sans-serif;
63+
font-size: 14px;
64+
line-height: 20px;
65+
color: #0A0A0A;
66+
}

‎src/apps/review/src/pages/ai-scorecards/components/AiModelModal/AiModelModal.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { FC } from 'react'
2+
3+
import { BaseModal } from '~/libs/ui'
4+
import { AiWorkflow } from '~/apps/review/src/lib/hooks'
5+
import { IconExternalLink } from '~/apps/review/src/lib/assets/icons'
6+
7+
import AiModelIcon from '../AiModelIcon'
8+
9+
import styles from './AiModelModal.module.scss'
10+
11+
interface AiModelModalProps {
12+
model: AiWorkflow['llm']
13+
onClose: () => void
14+
}
15+
16+
const AiModelModal: FC<AiModelModalProps> = props => (
17+
<BaseModal
18+
spacer={false}
19+
open
20+
blockScroll
21+
onClose={props.onClose}
22+
size='lg'
23+
>
24+
<div className={styles.wrap}>
25+
<div className={styles.modelNameWrap}>
26+
<div className={styles.modelIcon}>
27+
<AiModelIcon model={props.model} />
28+
</div>
29+
<div className={styles.modelName}>
30+
<h3>{props.model.name}</h3>
31+
<a href={props.model.url} target='_blank' rel='noreferrer noopener'>
32+
<IconExternalLink />
33+
</a>
34+
</div>
35+
</div>
36+
37+
<p className={styles.modelDescription}>
38+
{props.model.description}
39+
</p>
40+
</div>
41+
</BaseModal>
42+
)
43+
44+
export default AiModelModal

‎src/apps/review/src/pages/ai-scorecards/components/AiModelModal/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as AiModelModal } from './AiModelModal'

‎src/apps/review/src/pages/ai-scorecards/components/ScorecardHeader/ScorecardHeader.module.scss‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
@import '@libs/ui/styles/includes';
2+
3+
.wrap {
4+
width: 100%;
5+
color: #0A0A0A;
6+
}
7+
8+
.headerWrap {
9+
display: flex;
10+
align-items: flex-start;
11+
12+
@include ltemd {
13+
flex-direction: column;
14+
align-items: stretch;
15+
gap: $sp-6;
16+
}
17+
}
18+
19+
.workflowInfo {
20+
display: flex;
21+
align-items: flex-start;
22+
gap: $sp-4;
23+
}
24+
25+
.workflowIcon {
26+
width: 60px;
27+
height: 60px;
28+
border-radius: $sp-1;
29+
border: 1px solid #A8A8A8;
30+
padding: $sp-1;
31+
32+
align-items: center;
33+
display: flex;
34+
justify-content: center;
35+
36+
flex: 0 0 auto;
37+
@include ltemd {
38+
width: 56px;
39+
height: 56px;
40+
}
41+
}
42+
43+
.workflowName {
44+
h3 {
45+
font-family: "Figtree", sans-serif;
46+
font-size: 26px;
47+
font-weight: 700;
48+
line-height: 30px;
49+
color: #0A0A0A;
50+
margin-bottom: $sp-2;
51+
}
52+
53+
span {
54+
color: $link-blue-dark;
55+
font-family: "Nunito Sans", sans-serif;
56+
font-weight: bold;
57+
font-size: 16px;
58+
line-height: 22px;
59+
}
60+
61+
.modelName {
62+
cursor: pointer;
63+
}
64+
65+
@include ltemd {
66+
h3 {
67+
font-size: 22px;
68+
line-height: 26px;
69+
}
70+
}
71+
}
72+
73+
.workflowRunStats {
74+
margin-left: auto;
75+
display: flex;
76+
flex-direction: column;
77+
gap: $sp-1;
78+
79+
flex: 0 0 auto;
80+
81+
> span {
82+
display: flex;
83+
align-items: center;
84+
gap: $sp-2;
85+
86+
font-family: "Nunito Sans", sans-serif;
87+
font-size: 14px;
88+
line-height: 19px;
89+
color: var(--GrayFontColor);
90+
}
91+
92+
strong {
93+
font-family: "Nunito Sans", sans-serif;
94+
font-size: 14px;
95+
font-weight: 700;
96+
line-height: 19px;
97+
color: var(--FontColor);
98+
}
99+
100+
@include ltemd {
101+
margin-left: 0;
102+
}
103+
}
104+
105+
.workflowDescription {
106+
margin-top: $sp-6;
107+
font-family: "Nunito Sans", sans-serif;
108+
font-size: 14px;
109+
line-height: 20px;
110+
color: #0A0A0A;
111+
}
112+
113+
.workflowFileLink {
114+
margin-top: $sp-4;
115+
a {
116+
display: flex;
117+
align-items: center;
118+
gap: $sp-1;
119+
color: $link-blue-dark;
120+
font-family: "Nunito Sans", sans-serif;
121+
font-size: 14px;
122+
line-height: 20px;
123+
124+
svg {
125+
width: 12px;
126+
height: 12px;
127+
path {
128+
fill: $link-blue-dark;
129+
}
130+
}
131+
}
132+
133+
}

0 commit comments

Comments
 (0)