add ai assist to engagement detail page

SeedCompany · Dec 19, 2024 · 0a191b8 · 0a191b8
1 parent 749ceba
commit 0a191b8
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 18 deletions.
diff --git a/src/components/BooleanProperty/BooleanProperty.tsx b/src/components/BooleanProperty/BooleanProperty.tsx
@@ -1,8 +1,7 @@
 import { Chip, ChipProps, Skeleton } from '@mui/material';
 import { ReactElement } from 'react';
-import { makeStyles } from 'tss-react/mui';
 import { Except, SetRequired } from 'type-fest';
-import { SecuredProp } from '~/common';
+import { extendSx, SecuredProp } from '~/common';
 import { Redacted } from '../Redacted';
 
 export interface BooleanPropertyProps extends SetRequired<ChipProps, 'label'> {
@@ -11,24 +10,27 @@ export interface BooleanPropertyProps extends SetRequired<ChipProps, 'label'> {
   wrap?: (node: ReactElement) => ReactElement;
 }
 
-const useStyles = makeStyles()(({ palette, shape }) => ({
-  root: {
-    background: palette.info.main,
-    color: palette.info.contrastText,
-    borderRadius: shape.borderRadius,
-    height: 26,
-  },
-}));
-
 export const BooleanProperty = ({
   redacted,
   data,
   wrap,
+  sx,
   ...rest
 }: BooleanPropertyProps) => {
-  const { classes } = useStyles();
-
-  const chip = <Chip {...rest} className={classes.root} />;
+  const chip = (
+    <Chip
+      {...rest}
+      sx={[
+        ({ palette, shape }) => ({
+          background: palette.info.main,
+          color: palette.info.contrastText,
+          borderRadius: shape.borderRadius,
+          height: 26,
+        }),
+        ...extendSx(sx),
+      ]}
+    />
+  );
 
   const out = !data ? (
     <Skeleton>{chip}</Skeleton>

diff --git a/src/scenes/Engagement/EditEngagement/EditEngagementDialog.tsx b/src/scenes/Engagement/EditEngagement/EditEngagementDialog.tsx
@@ -6,6 +6,8 @@ import { ComponentType, useMemo } from 'react';
 import { Except, Merge } from 'type-fest';
 import { invalidateProps } from '~/api';
 import {
+  AIAssistList,
+  AIAssistTypeLabels,
   InternshipDomainLabels,
   InternshipPositionLabels,
   InternshipProgramLabels,
@@ -62,6 +64,7 @@ export type EditableEngagementField = ExtractStrict<
   | 'lukePartnership'
   | 'paratextRegistryId'
   | 'openToInvestorVisit'
+  | 'usingAIAssistedTranslation'
 >;
 
 interface EngagementFieldProps {
@@ -153,14 +156,41 @@ const fieldMapping: Record<
   paratextRegistryId: ({ props }) => (
     <TextField {...props} label="Paratext Registry ID" />
   ),
+  usingAIAssistedTranslation: ({ props }) => (
+    <EnumField
+      {...props}
+      label="AI Assisted Translation"
+      options={AIAssistList.map((item) =>
+        item === null ? 'null' : item.toString()
+      )}
+      getLabel={(value: string): string =>
+        AIAssistTypeLabels[value] ?? 'Unknown'
+      }
+      variant="toggle-grouped"
+    />
+  ),
 };
 
+// interface EngagementFormValues {
+//   engagement: Merge<
+//     UpdateLanguageEngagement & UpdateInternshipEngagement,
+//     {
+//       mentorId?: UserLookupItemFragment | null;
+//       countryOfOriginId?: DisplayLocationFragment | null;
+//     }
+//   >;
+// }
+
 interface EngagementFormValues {
   engagement: Merge<
-    UpdateLanguageEngagement & UpdateInternshipEngagement,
+    Omit<
+      UpdateLanguageEngagement & UpdateInternshipEngagement,
+      'usingAIAssistedTranslation'
+    >,
     {
       mentorId?: UserLookupItemFragment | null;
       countryOfOriginId?: DisplayLocationFragment | null;
+      usingAIAssistedTranslation?: string;
     }
   >;
 }
@@ -207,10 +237,13 @@ export const EditEngagementDialog = ({
       : UpdateLanguageEngagementDocument
   );
 
+  type OverrideUsingAIAssistedTranslation<T> = {
+    [K in keyof T]: K extends 'usingAIAssistedTranslation' ? string : T[K];
+  };
+
   const initialValues = useMemo(() => {
-    const fullInitialValuesFields: Except<
-      EngagementFormValues['engagement'],
-      'id'
+    const fullInitialValuesFields: OverrideUsingAIAssistedTranslation<
+      Except<EngagementFormValues['engagement'], 'id'>
     > = {
       startDateOverride: engagement.dateRangeOverride.value.start,
       endDateOverride: engagement.dateRangeOverride.value.end,
@@ -222,6 +255,10 @@ export const EditEngagementDialog = ({
             firstScripture: engagement.firstScripture.value,
             paratextRegistryId: engagement.paratextRegistryId.value,
             openToInvestorVisit: engagement.openToInvestorVisit.value,
+            usingAIAssistedTranslation:
+              engagement.usingAIAssistedTranslation.value === null
+                ? 'null'
+                : engagement.usingAIAssistedTranslation.value!.toString(),
           }
         : {
             methodologies: engagement.methodologies.value,
@@ -301,11 +338,21 @@ export const EditEngagementDialog = ({
         }
       }}
       onSubmit={async ({ engagement: values }, form) => {
+        const { usingAIAssistedTranslation } = values;
+
+        const convertedAIAssist: boolean | null =
+          String(usingAIAssistedTranslation) === 'true'
+            ? true
+            : String(usingAIAssistedTranslation) === 'false'
+            ? false
+            : null;
+
         const input = {
           engagement: {
             ...values,
             mentorId: getLookupId(values.mentorId),
             countryOfOriginId: getLookupId(values.countryOfOriginId),
+            usingAIAssistedTranslation: convertedAIAssist,
           },
           changeset: engagement.changeset?.id,
         };

diff --git a/src/scenes/Engagement/LanguageEngagement/Header/LanguageEngagementHeader.tsx b/src/scenes/Engagement/LanguageEngagement/Header/LanguageEngagementHeader.tsx
@@ -99,6 +99,7 @@ export const LanguageEngagementHeader = ({
                       'firstScripture',
                       'lukePartnership',
                       'openToInvestorVisit',
+                      'usingAIAssistedTranslation',
                     ])
                   }
                 >
@@ -162,6 +163,13 @@ export const LanguageEngagementHeader = ({
             empty="Enter Paratext Registry ID"
           />
         </Grid>
+        <BooleanProperty
+          label="AI Assisted Translation"
+          redacted="You do not have permission to view whether this engagement is using AI assistance"
+          data={engagement.usingAIAssistedTranslation}
+          wrap={(node) => <Grid item>{node}</Grid>}
+          sx={{ backgroundColor: '#FF9800' }}
+        />
         <BooleanProperty
           label="First Scripture"
           redacted="You do not have permission to view whether this engagement is the first scripture for this language"