PM-2135 - fallback for ai model icon

Author: vas3a

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

@@ -0,0 +1,27 @@
+import { FC, useCallback, useRef } from 'react'
+
+import iconDeepseekAi from '~/apps/review/src/lib/assets/icons/deepseek.svg'
+
+import { AiWorkflow } from '../../../lib/hooks'
+
+interface AiModelIconProps {
+    model: AiWorkflow['llm']
+}
+
+const AiModelIcon: FC<AiModelIconProps> = props => {
+    const llmIconImgRef = useRef<HTMLImageElement>(null)
+
+    const handleError = useCallback(() => {
+        if (!llmIconImgRef.current) {
+            return
+        }
+
+        llmIconImgRef.current.src = iconDeepseekAi
+    }, [])
+
+    return (
+        <img src={props.model.icon} alt={props.model.name} onError={handleError} ref={llmIconImgRef} />
+    )
+}
+
+export default AiModelIcon

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

@@ -4,6 +4,8 @@ import { BaseModal } from '~/libs/ui'
 import { AiWorkflow } from '~/apps/review/src/lib/hooks'
 import { IconExternalLink } from '~/apps/review/src/lib/assets/icons'
 
+import AiModelIcon from '../AiModelIcon'
+
 import styles from './AiModelModal.module.scss'
 
 interface AiModelModalProps {
@@ -22,11 +24,11 @@ const AiModelModal: FC<AiModelModalProps> = props => (
         <div className={styles.wrap}>
             <div className={styles.modelNameWrap}>
                 <div className={styles.modelIcon}>
-                    <img src={props.model.icon} alt={props.model.name} />
+                    <AiModelIcon model={props.model} />
                 </div>
                 <div className={styles.modelName}>
                     <h3>{props.model.name}</h3>
-                    <a href={props.model.url} target='_blank' rel='noreferrer'>
+                    <a href={props.model.url} target='_blank' rel='noreferrer noopener'>
                         <IconExternalLink />
                     </a>
                 </div>

src/apps/review/src/pages/ai-scorecards/components/ScorecardHeader/ScorecardHeader.tsx

@@ -4,8 +4,9 @@ import moment, { Duration } from 'moment'
 import { AiScorecardContextModel } from '~/apps/review/src/lib/models'
 
 import { useAiScorecardContext } from '../../AiScorecardContext'
-import { IconClock, IconDeepseekAi, IconPremium } from '../../../../lib/assets/icons'
+import { IconClock, IconPremium } from '../../../../lib/assets/icons'
 import { AiModelModal } from '../AiModelModal'
+import AiModelIcon from '../AiModelIcon'
 
 import styles from './ScorecardHeader.module.scss'
 
@@ -19,7 +20,7 @@ const formatDuration = (duration: Duration): string => [
 const ScorecardHeader: FC = () => {
     const { workflow, workflowRun }: AiScorecardContextModel = useAiScorecardContext()
     const runDuration = useMemo(() => (
-        workflowRun && moment.duration(
+        workflowRun && workflowRun.completedAt && workflowRun.startedAt && moment.duration(
             +new Date(workflowRun.completedAt) - +new Date(workflowRun.startedAt),
             'milliseconds',
         )
@@ -38,7 +39,9 @@ const ScorecardHeader: FC = () => {
         <div className={styles.wrap}>
             <div className={styles.headerWrap}>
                 <div className={styles.workflowInfo}>
-                    <IconDeepseekAi className={styles.workflowIcon} />
+                    <div className={styles.workflowIcon}>
+                        <AiModelIcon model={workflow.llm} />
+                    </div>
                     <div className={styles.workflowName}>
                         <h3>{workflow.name}</h3>
                         <span className={styles.modelName} onClick={toggleModelDetails}>{workflow.llm.name}</span>