Add input/output tokens for ai workflow runs

Author: himaniraghav3

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

@@ -44,6 +44,10 @@ export interface AiWorkflowRun {
     gitRunUrl?: string;
     score: number;
     workflow: AiWorkflow
+    usage: {
+        input: number
+        output: number
+    }
 }
 
 export interface AiWorkflowRunArtifact {

src/apps/review/src/pages/reviews/components/ScorecardHeader/ScorecardHeader.module.scss

@@ -101,8 +101,16 @@
         &.sm {
             height: 16px;
         }
-        path {
-            fill: #0A0A0A;
+        &.md {
+            height: 20px;
+            stroke: #0a0a0a;
+        }
+        
+        &.iconFile {
+            path {
+                fill: #0A0A0A;
+            }
+            height: 16px;
         }
     }
 

src/apps/review/src/pages/reviews/components/ScorecardHeader/ScorecardHeader.tsx

@@ -3,6 +3,7 @@ import moment, { Duration } from 'moment'
 
 import { ReviewsContextModel } from '~/apps/review/src/lib/models'
 import { useRolePermissions, UseRolePermissionsResult } from '~/apps/review/src/lib/hooks'
+import { ArrowCircleDownIcon, ArrowCircleUpIcon } from '@heroicons/react/outline'
 
 import { IconClock, IconFile, IconPremium } from '../../../../lib/assets/icons'
 import { AiModelModal } from '../AiModelModal'
@@ -68,7 +69,7 @@ const ScorecardHeader: FC = () => {
                     </span>
                     {isAdmin && (
                         <span>
-                            <IconFile className={styles.sm} />
+                            <IconFile className={styles.iconFile} />
                             <span>
                                 <strong>Git log:</strong>
                                 {' '}
@@ -81,6 +82,26 @@ const ScorecardHeader: FC = () => {
                             </span>
                         </span>
                     )}
+                    {isAdmin && (
+                        <span>
+                            <ArrowCircleDownIcon className={styles.md} />
+                            <span>
+                                <strong>Input Tokens:</strong>
+                                {' '}
+                                {workflowRun.usage.input}
+                            </span>
+                        </span>
+                    )}
+                    {isAdmin && (
+                        <span>
+                            <ArrowCircleUpIcon className={styles.md} />
+                            <span>
+                                <strong>Output Tokens:</strong>
+                                {' '}
+                                {workflowRun.usage.output}
+                            </span>
+                        </span>
+                    )}
                 </div>
             </div>
             <p className={styles.workflowDescription}>