+ {!runs.length && isLoading && (
+
+ )
+ }
+
+ return (
+ Loading...
+ )}
+
+ {aiRuns.map(run => (
+
+
+ ))}
+
+
+
+ Reviewer
+
+
+
+
+
+
+ Review Date
+
+ {run.status === 'SUCCESS'
+ ? moment(run.completedAt)
+ .local()
+ .format(TABLE_DATE_FORMAT)
+ : '-'}
+
+
+
+
+ Score
+
+ {run.status === 'SUCCESS' ? (
+ run.workflow.scorecard ? (
+ {run.score}
+ ) : run.score
+ ) : '-'}
+
+
+
+ Result
+
+
+
+
+
+
+
+ )
+}
+
+export default AiReviewsTable
diff --git a/src/apps/review/src/lib/components/AiReviewsTable/AiWorkflowRunStatus.module.scss b/src/apps/review/src/lib/components/AiReviewsTable/AiWorkflowRunStatus.module.scss
new file mode 100644
index 000000000..b99473257
--- /dev/null
+++ b/src/apps/review/src/lib/components/AiReviewsTable/AiWorkflowRunStatus.module.scss
@@ -0,0 +1,39 @@
+@import '@libs/ui/styles/includes';
+
+.result {
+ display: flex;
+ align-items: center;
+ gap: $sp-2;
+}
+
+.icon {
+ display: flex;
+ width: 20px;
+ height: 20px;
+ border-radius: 10px;
+ border: 1px solid #e9ecef;
+ background: #fff;
+ align-items: center;
+ justify-content: center;
+
+ &.failed,
+ &.failed-score {
+ color: #C1294F;
+ }
+
+ &.passed {
+ color: $teal-160;
+ }
+
+ &.pending {
+ color: $black-20;
+ border-color: $black-20;
+ }
+}
+
+.score {
+ font-size: 14px;
+ .failed-score {
+ color: #C1294F;
+ }
+}
diff --git a/src/apps/review/src/lib/components/AiReviewsTable/AiWorkflowRunStatus.tsx b/src/apps/review/src/lib/components/AiReviewsTable/AiWorkflowRunStatus.tsx
new file mode 100644
index 000000000..0534ae0fc
--- /dev/null
+++ b/src/apps/review/src/lib/components/AiReviewsTable/AiWorkflowRunStatus.tsx
@@ -0,0 +1,66 @@
+import { FC, useMemo } from 'react'
+
+import { IconOutline } from '~/libs/ui'
+
+import { aiRunFailed, aiRunInProgress, AiWorkflowRun } from '../../hooks'
+
+import StatusLabel from './StatusLabel'
+
+interface AiWorkflowRunStatusProps {
+ run: Pick| AI Reviewer | +Review Date | +Score | +Result | +
|---|---|---|---|
| Loading... | +|||
|
+
+
+
+ |
+ + {run.status === 'SUCCESS' && ( + moment(run.completedAt) + .local() + .format(TABLE_DATE_FORMAT) + )} + | ++ {run.status === 'SUCCESS' ? ( + run.workflow.scorecard ? ( + {run.score} + ) : run.score + ) : '-'} + | +
+ |
+
+ {props.score && (
+ {props.score}
+ )}
+ {props.icon && (
+
+ {props.icon}
+
+ )}
+ {!props.hideLabel && props.label}
+
+)
+
+export default StatusLabel
diff --git a/src/apps/review/src/lib/components/AiReviewsTable/index.ts b/src/apps/review/src/lib/components/AiReviewsTable/index.ts
new file mode 100644
index 000000000..9e371fd40
--- /dev/null
+++ b/src/apps/review/src/lib/components/AiReviewsTable/index.ts
@@ -0,0 +1,2 @@
+export { default as AiReviewsTable } from './AiReviewsTable'
+export * from './AiWorkflowRunStatus'
diff --git a/src/apps/review/src/lib/components/ChallengeDetailsContent/ChallengeDetailsContent.tsx b/src/apps/review/src/lib/components/ChallengeDetailsContent/ChallengeDetailsContent.tsx
index 22401683c..f0fce8004 100644
--- a/src/apps/review/src/lib/components/ChallengeDetailsContent/ChallengeDetailsContent.tsx
+++ b/src/apps/review/src/lib/components/ChallengeDetailsContent/ChallengeDetailsContent.tsx
@@ -127,6 +127,7 @@ interface SubmissionTabParams {
isDownloadingSubmission: useDownloadSubmissionProps['isLoading']
downloadSubmission: useDownloadSubmissionProps['downloadSubmission']
isActiveChallenge: boolean
+ aiReviewers: { aiWorkflowId: string }[]
}
const renderSubmissionTab = ({
@@ -138,6 +139,7 @@ const renderSubmissionTab = ({
isDownloadingSubmission,
downloadSubmission,
isActiveChallenge,
+ aiReviewers,
}: SubmissionTabParams): JSX.Element => {
const isSubmissionTab = selectedTabNormalized === 'submission'
const isTopgearSubmissionTab = selectedTabNormalized === 'topgearsubmission'
@@ -156,6 +158,7 @@ const renderSubmissionTab = ({
if (canShowSubmissionList) {
return (
+
+ {aiReviewersCount}
+ {' '}
+ AI Reviewer
+ {aiReviewersCount === 1 ? '' : 's'}
+
+ )
+}
+
+export default CollapsibleAiReviewsRow
diff --git a/src/apps/review/src/lib/components/CollapsibleAiReviewsRow/index.ts b/src/apps/review/src/lib/components/CollapsibleAiReviewsRow/index.ts
new file mode 100644
index 000000000..757542122
--- /dev/null
+++ b/src/apps/review/src/lib/components/CollapsibleAiReviewsRow/index.ts
@@ -0,0 +1 @@
+export { default as CollapsibleAiReviewsRow } from './CollapsibleAiReviewsRow'
diff --git a/src/apps/review/src/lib/components/SubmissionHistoryModal/SubmissionHistoryModal.module.scss b/src/apps/review/src/lib/components/SubmissionHistoryModal/SubmissionHistoryModal.module.scss
index 59fc9266f..6fc566bec 100644
--- a/src/apps/review/src/lib/components/SubmissionHistoryModal/SubmissionHistoryModal.module.scss
+++ b/src/apps/review/src/lib/components/SubmissionHistoryModal/SubmissionHistoryModal.module.scss
@@ -146,3 +146,21 @@
font-size: 14px;
text-align: center;
}
+
+.reviewersDropown {
+ display: flex;
+ align-items: center;
+ gap: $sp-2;
+
+ svg {
+ color: #767676;
+ }
+}
+
+.table .aiReviewersTableRow.aiReviewersTableRow {
+ padding: 0;
+}
+
+.aiReviewersTable {
+ margin-top: -1px;
+}
diff --git a/src/apps/review/src/lib/components/SubmissionHistoryModal/SubmissionHistoryModal.tsx b/src/apps/review/src/lib/components/SubmissionHistoryModal/SubmissionHistoryModal.tsx
index 685c1bd8a..321461b41 100644
--- a/src/apps/review/src/lib/components/SubmissionHistoryModal/SubmissionHistoryModal.tsx
+++ b/src/apps/review/src/lib/components/SubmissionHistoryModal/SubmissionHistoryModal.tsx
@@ -1,4 +1,4 @@
-import { FC, MouseEvent, useCallback, useMemo } from 'react'
+import { FC, Fragment, MouseEvent, useCallback, useMemo, useState } from 'react'
import { toast } from 'react-toastify'
import classNames from 'classnames'
import moment from 'moment'
@@ -9,6 +9,7 @@ import { BaseModal, IconOutline, Tooltip } from '~/libs/ui'
import { SubmissionInfo } from '../../models'
import { TABLE_DATE_FORMAT } from '../../../config/index.config'
+import { AiReviewsTable } from '../AiReviewsTable'
import styles from './SubmissionHistoryModal.module.scss'
@@ -29,6 +30,7 @@ export interface SubmissionHistoryModalProps {
* when the provided submission entry is missing those fields.
*/
getSubmissionMeta?: (submissionId: string) => SubmissionInfo | undefined
+ aiReviewers?: { aiWorkflowId: string }[]
}
function getTimestamp(submission: SubmissionInfo): number {
@@ -97,6 +99,11 @@ export const SubmissionHistoryModal: FC
+
+ )}
+
+
+
- {data.currentPhase}
-
- ),
+ renderer: (data: ActiveReviewAssignment) => {
+ const Icon = data.hasAIReview ? IconAiReview : (
+ phasesIcons[data.currentPhase.toLowerCase() as keyof typeof phasesIcons]
+ )
+
+ return (
+
+ {Icon && (
+
+ )
+ },
type: 'element',
},
{
diff --git a/src/apps/review/src/lib/hooks/index.ts b/src/apps/review/src/lib/hooks/index.ts
index 38b71fef1..5d2b5455f 100644
--- a/src/apps/review/src/lib/hooks/index.ts
+++ b/src/apps/review/src/lib/hooks/index.ts
@@ -18,3 +18,4 @@ export * from './useScoreVisibility'
export * from './useSubmissionDownloadAccess'
export * from './useSubmissionHistory'
export * from './useScorecardPassingScores'
+export * from './useFetchAiWorkflowRuns'
diff --git a/src/apps/review/src/lib/hooks/useFetchActiveReviews.ts b/src/apps/review/src/lib/hooks/useFetchActiveReviews.ts
index b226180f2..e12ee1d3a 100644
--- a/src/apps/review/src/lib/hooks/useFetchActiveReviews.ts
+++ b/src/apps/review/src/lib/hooks/useFetchActiveReviews.ts
@@ -141,6 +141,7 @@ export const transformAssignments = (
.local()
.format(TABLE_DATE_FORMAT)
: undefined,
+ hasAIReview: base.hasAIReview,
id: base.challengeId,
index: currentIndex,
name: base.challengeName,
diff --git a/src/apps/review/src/lib/hooks/useFetchAiWorkflowRuns.ts b/src/apps/review/src/lib/hooks/useFetchAiWorkflowRuns.ts
new file mode 100644
index 000000000..8787d55da
--- /dev/null
+++ b/src/apps/review/src/lib/hooks/useFetchAiWorkflowRuns.ts
@@ -0,0 +1,105 @@
+import { useEffect } from 'react'
+import useSWR, { SWRResponse } from 'swr'
+
+import { EnvironmentConfig } from '~/config'
+import { xhrGetAsync } from '~/libs/core'
+import { handleError } from '~/libs/shared/lib/utils/handle-error'
+
+import { Scorecard } from '../models'
+
+import { useRolePermissions, UseRolePermissionsResult } from './useRolePermissions'
+
+export enum AiWorkflowRunStatusEnum {
+ INIT = 'INIT',
+ QUEUED = 'QUEUED',
+ DISPATCHED = 'DISPATCHED',
+ IN_PROGRESS = 'IN_PROGRESS',
+ CANCELLED = 'CANCELLED',
+ FAILURE = 'FAILURE',
+ COMPLETED = 'COMPLETED',
+ SUCCESS = 'SUCCESS',
+}
+
+export interface AiWorkflow {
+ id: string;
+ name: string;
+ description: string;
+ scorecard?: Scorecard
+ defUrl: string
+ llm: {
+ name: string
+ description: string
+ icon: string
+ url: string
+ provider: {
+ name: string
+ }
+ }
+}
+
+export interface AiWorkflowRun {
+ id: string;
+ startedAt: string;
+ completedAt: string;
+ status: AiWorkflowRunStatusEnum;
+ score: number;
+ workflow: AiWorkflow
+}
+
+const TC_API_BASE_URL = EnvironmentConfig.API.V6
+
+export interface AiWorkflowRunsResponse {
+ runs: AiWorkflowRun[]
+ isLoading: boolean
+}
+
+export const aiRunInProgress = (aiRun: Pick
+
+
+
+
+
+
+
+
+
+
+ {props.model.name}
+ ++ {props.model.description} +
+
+ {workflow && workflowRun && (
+
+ )
+}
+
+export default AiWorkflowsSidebar
diff --git a/src/apps/review/src/pages/ai-scorecards/components/AiWorkflowsSidebar/index.ts b/src/apps/review/src/pages/ai-scorecards/components/AiWorkflowsSidebar/index.ts
new file mode 100644
index 000000000..1c0991661
--- /dev/null
+++ b/src/apps/review/src/pages/ai-scorecards/components/AiWorkflowsSidebar/index.ts
@@ -0,0 +1 @@
+export { default as AiWorkflowsSidebar } from './AiWorkflowsSidebar'
diff --git a/src/apps/review/src/pages/ai-scorecards/components/ScorecardHeader/ScorecardHeader.module.scss b/src/apps/review/src/pages/ai-scorecards/components/ScorecardHeader/ScorecardHeader.module.scss
new file mode 100644
index 000000000..b84af1272
--- /dev/null
+++ b/src/apps/review/src/pages/ai-scorecards/components/ScorecardHeader/ScorecardHeader.module.scss
@@ -0,0 +1,133 @@
+@import '@libs/ui/styles/includes';
+
+.wrap {
+ width: 100%;
+ color: #0A0A0A;
+}
+
+.headerWrap {
+ display: flex;
+ align-items: flex-start;
+
+ @include ltemd {
+ flex-direction: column;
+ align-items: stretch;
+ gap: $sp-6;
+ }
+}
+
+.workflowInfo {
+ display: flex;
+ align-items: flex-start;
+ gap: $sp-4;
+}
+
+.workflowIcon {
+ width: 60px;
+ height: 60px;
+ border-radius: $sp-1;
+ border: 1px solid #A8A8A8;
+ padding: $sp-1;
+
+ align-items: center;
+ display: flex;
+ justify-content: center;
+
+ flex: 0 0 auto;
+ @include ltemd {
+ width: 56px;
+ height: 56px;
+ }
+}
+
+.workflowName {
+ h3 {
+ font-family: "Figtree", sans-serif;
+ font-size: 26px;
+ font-weight: 700;
+ line-height: 30px;
+ color: #0A0A0A;
+ margin-bottom: $sp-2;
+ }
+
+ span {
+ color: $link-blue-dark;
+ font-family: "Nunito Sans", sans-serif;
+ font-weight: bold;
+ font-size: 16px;
+ line-height: 22px;
+ }
+
+ .modelName {
+ cursor: pointer;
+ }
+
+ @include ltemd {
+ h3 {
+ font-size: 22px;
+ line-height: 26px;
+ }
+ }
+}
+
+.workflowRunStats {
+ margin-left: auto;
+ display: flex;
+ flex-direction: column;
+ gap: $sp-1;
+
+ flex: 0 0 auto;
+
+ > span {
+ display: flex;
+ align-items: center;
+ gap: $sp-2;
+
+ font-family: "Nunito Sans", sans-serif;
+ font-size: 14px;
+ line-height: 19px;
+ color: var(--GrayFontColor);
+ }
+
+ strong {
+ font-family: "Nunito Sans", sans-serif;
+ font-size: 14px;
+ font-weight: 700;
+ line-height: 19px;
+ color: var(--FontColor);
+ }
+
+ @include ltemd {
+ margin-left: 0;
+ }
+}
+
+.workflowDescription {
+ margin-top: $sp-6;
+ font-family: "Nunito Sans", sans-serif;
+ font-size: 14px;
+ line-height: 20px;
+ color: #0A0A0A;
+}
+
+.workflowFileLink {
+ margin-top: $sp-4;
+ a {
+ display: flex;
+ align-items: center;
+ gap: $sp-1;
+ color: $link-blue-dark;
+ font-family: "Nunito Sans", sans-serif;
+ font-size: 14px;
+ line-height: 20px;
+
+ svg {
+ width: 12px;
+ height: 12px;
+ path {
+ fill: $link-blue-dark;
+ }
+ }
+ }
+
+}
diff --git a/src/apps/review/src/pages/ai-scorecards/components/ScorecardHeader/ScorecardHeader.tsx b/src/apps/review/src/pages/ai-scorecards/components/ScorecardHeader/ScorecardHeader.tsx
new file mode 100644
index 000000000..442ee1232
--- /dev/null
+++ b/src/apps/review/src/pages/ai-scorecards/components/ScorecardHeader/ScorecardHeader.tsx
@@ -0,0 +1,87 @@
+import { FC, useCallback, useMemo, useState } from 'react'
+import moment, { Duration } from 'moment'
+
+import { AiScorecardContextModel } from '~/apps/review/src/lib/models'
+
+import { useAiScorecardContext } from '../../AiScorecardContext'
+import { IconClock, IconPremium } from '../../../../lib/assets/icons'
+import { AiModelModal } from '../AiModelModal'
+import AiModelIcon from '../AiModelIcon'
+
+import styles from './ScorecardHeader.module.scss'
+
+const formatDuration = (duration: Duration): string => [
+ !!duration.hours() && `${duration.hours()}h`,
+ !!duration.minutes() && `${duration.minutes()}m`,
+ !!duration.seconds() && `${duration.seconds()}s`,
+].filter(Boolean)
+ .join(' ')
+
+const ScorecardHeader: FC = () => {
+ const { workflow, workflowRun }: AiScorecardContextModel = useAiScorecardContext()
+ const runDuration = useMemo(() => (
+ workflowRun && workflowRun.completedAt && workflowRun.startedAt && moment.duration(
+ +new Date(workflowRun.completedAt) - +new Date(workflowRun.startedAt),
+ 'milliseconds',
+ )
+ ), [workflowRun])
+ const [modelDetailsModalVisible, setModelDetailsModalVisible] = useState(false)
+
+ const toggleModelDetails = useCallback(() => {
+ setModelDetailsModalVisible(wasVisible => !wasVisible)
+ }, [])
+
+ if (!workflow || !workflowRun) {
+ return <>
+ }
+
+ return (
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+ {workflowRuns.map(run => (
+
-
+
+
+
+ {run.workflow.name} + + +
+ ))}
+
+
+
+ Legend
+
+ -
+
-
+
} + label='Passed' + status='passed' + /> +
+ -
+
} + label='Failed' + status='failed' + /> +
+ -
+
} + label='To be filled' + status='pending' + /> +
+
+
+ )
+}
+
+export default ScorecardHeader
diff --git a/src/apps/review/src/pages/ai-scorecards/components/ScorecardHeader/index.ts b/src/apps/review/src/pages/ai-scorecards/components/ScorecardHeader/index.ts
new file mode 100644
index 000000000..5cafe1a64
--- /dev/null
+++ b/src/apps/review/src/pages/ai-scorecards/components/ScorecardHeader/index.ts
@@ -0,0 +1 @@
+export { default as ScorecardHeader } from './ScorecardHeader'
diff --git a/src/apps/review/src/pages/ai-scorecards/components/index.ts b/src/apps/review/src/pages/ai-scorecards/components/index.ts
new file mode 100644
index 000000000..3bbdff305
--- /dev/null
+++ b/src/apps/review/src/pages/ai-scorecards/components/index.ts
@@ -0,0 +1 @@
+export * from './AiWorkflowsSidebar'
diff --git a/src/apps/review/src/pages/ai-scorecards/index.ts b/src/apps/review/src/pages/ai-scorecards/index.ts
new file mode 100644
index 000000000..aec1c4968
--- /dev/null
+++ b/src/apps/review/src/pages/ai-scorecards/index.ts
@@ -0,0 +1 @@
+export * from './ai-scorecard.routes'
diff --git a/src/apps/review/src/pages/past-review-assignments/index.ts b/src/apps/review/src/pages/past-review-assignments/index.ts
new file mode 100644
index 000000000..a55eedde5
--- /dev/null
+++ b/src/apps/review/src/pages/past-review-assignments/index.ts
@@ -0,0 +1 @@
+export * from './past-review.routes'
diff --git a/src/apps/review/src/pages/past-review-assignments/past-review.routes.tsx b/src/apps/review/src/pages/past-review-assignments/past-review.routes.tsx
new file mode 100644
index 000000000..04402e78f
--- /dev/null
+++ b/src/apps/review/src/pages/past-review-assignments/past-review.routes.tsx
@@ -0,0 +1,28 @@
+import { getRoutesContainer, lazyLoad, LazyLoadedComponent } from '~/libs/core'
+
+import { pastReviewAssignmentsRouteId } from '../../config/routes.config'
+import { challengeDetailsRoutes } from '../active-review-assignements'
+
+const PastReviewsPage: LazyLoadedComponent = lazyLoad(
+ () => import('./PastReviewsPage'),
+ 'PastReviewsPage',
+)
+
+export const pastReviewChildRoutes = [
+ {
+ authRequired: true,
+ element:
+
+
+
+
+
+
+
+ {workflow.name}
+ {workflow.llm.name} +
+
+
+ + {workflow.description} +
+ {/* */} + + {modelDetailsModalVisible && ( +
+ {notifications.map(n => (
+
+ )
+}
+
+export default NotificationsContainer
diff --git a/src/libs/shared/lib/components/notifications/Notifications.context.tsx b/src/libs/shared/lib/components/notifications/Notifications.context.tsx
new file mode 100644
index 000000000..23dbcf558
--- /dev/null
+++ b/src/libs/shared/lib/components/notifications/Notifications.context.tsx
@@ -0,0 +1,92 @@
+import React, { createContext, ReactNode, useCallback, useContext, useMemo, useState } from 'react'
+
+import { useProfileContext } from '~/libs/core'
+
+import { dismiss, wasDismissed } from './localstorage.utils'
+
+export type NotificationType = 'success' | 'error' | 'info' | 'warning' | 'banner';
+
+export interface Notification {
+ id: string;
+ type: NotificationType;
+ icon?: ReactNode
+ message: string;
+ duration?: number; // in ms
+}
+
+type NotifyPayload = string | (Partial
+
+ )
+}
+
+export default NotificationBanner
diff --git a/src/libs/ui/lib/components/notification/banner/index.ts b/src/libs/ui/lib/components/notification/banner/index.ts
new file mode 100644
index 000000000..51f3cf392
--- /dev/null
+++ b/src/libs/ui/lib/components/notification/banner/index.ts
@@ -0,0 +1 @@
+export { default as NotificationBanner } from './NotificationBanner'
diff --git a/src/libs/ui/lib/components/notification/index.ts b/src/libs/ui/lib/components/notification/index.ts
new file mode 100644
index 000000000..ef0ca420e
--- /dev/null
+++ b/src/libs/ui/lib/components/notification/index.ts
@@ -0,0 +1,2 @@
+export * from './banner'
+export { default as Notification } from './Notification'
diff --git a/src/libs/ui/lib/components/table/table-column.model.ts b/src/libs/ui/lib/components/table/table-column.model.ts
index d0fb0d15c..a230cb27e 100644
--- a/src/libs/ui/lib/components/table/table-column.model.ts
+++ b/src/libs/ui/lib/components/table/table-column.model.ts
@@ -13,4 +13,5 @@ export interface TableColumn
+
+
+ {props.icon || (
+
+
+ {props.content}
+
+ {!props.persistent && (
+
+
+ )}
+