Gen AI: separate "publish" and "save" buttons when filling out model card

apps/src/aichat/redux/aichatRedux.ts

@@ -1,28 +1,30 @@
 import moment from 'moment';
-import {createSlice, PayloadAction, createAsyncThunk} from '@reduxjs/toolkit';
+import {createAsyncThunk, createSlice, PayloadAction} from '@reduxjs/toolkit';
+
+import {registerReducers} from '@cdo/apps/redux';
+import {RootState} from '@cdo/apps/types/redux';
 import {LabState} from '@cdo/apps/lab2/lab2Redux';
 import Lab2Registry from '@cdo/apps/lab2/Lab2Registry';
-const registerReducers = require('@cdo/apps/redux').registerReducers;
 
 import {
+  AI_CUSTOMIZATIONS_LABELS,
   DEFAULT_VISIBILITIES,
   EMPTY_AI_CUSTOMIZATIONS,
-  AI_CUSTOMIZATIONS_LABELS,
 } from '../views/modelCustomization/constants';
 import {initialChatMessages} from '../constants';
 import {getChatCompletionMessage} from '../chatApi';
 import {
-  ChatCompletionMessage,
   AichatLevelProperties,
-  Role,
+  AiCustomizations,
   AITutorInteractionStatus as Status,
   AITutorInteractionStatusType,
-  AiCustomizations,
+  ChatCompletionMessage,
+  LevelAichatSettings,
   ModelCardInfo,
+  Role,
+  ViewMode,
   Visibility,
-  LevelAichatSettings,
 } from '../types';
-import {RootState} from '@cdo/apps/types/redux';
 
 const haveDifferentValues = (
   value1: AiCustomizations[keyof AiCustomizations],
@@ -68,8 +70,10 @@ export interface AichatState {
   // Denotes if there is an error with the chat completion response
   chatMessageError: boolean;
   currentAiCustomizations: AiCustomizations;
-  previouslySavedAiCustomizations?: AiCustomizations;
+  previouslySavedAiCustomizations: AiCustomizations;
   fieldVisibilities: {[key in keyof AiCustomizations]: Visibility};
+  viewMode: ViewMode;
+  hasPublished: boolean;
 }
 
 const initialState: AichatState = {
@@ -78,7 +82,10 @@ const initialState: AichatState = {
   showWarningModal: true,
   chatMessageError: false,
   currentAiCustomizations: EMPTY_AI_CUSTOMIZATIONS,
+  previouslySavedAiCustomizations: EMPTY_AI_CUSTOMIZATIONS,
   fieldVisibilities: DEFAULT_VISIBILITIES,
+  viewMode: ViewMode.EDIT,
+  hasPublished: false,
 };
 
 // THUNKS
@@ -244,6 +251,12 @@ const aichatSlice = createSlice({
         chatMessage.status = status;
       }
     },
+    setViewMode: (state, action: PayloadAction<ViewMode>) => {
+      state.viewMode = action.payload;
+    },
+    setHasPublished: (state, action: PayloadAction<boolean>) => {
+      state.hasPublished = action.payload;
+    },
     setStartingAiCustomizations: (
       state,
       action: PayloadAction<{
@@ -338,6 +351,8 @@ export const {
   setIsWaitingForChatResponse,
   setShowWarningModal,
   updateChatMessageStatus,
+  setViewMode,
+  setHasPublished,
   setStartingAiCustomizations,
   setPreviouslySavedAiCustomizations,
   setAiCustomizationProperty,

apps/src/aichat/views/AichatView.tsx

@@ -1,14 +1,14 @@
 /** @file Top-level view for AI Chat Lab */
 
-import React, {useCallback, useEffect, useState} from 'react';
+import React, {useCallback, useEffect} from 'react';
 import Instructions from '@cdo/apps/lab2/views/components/Instructions';
 import PanelContainer from '@cdo/apps/lab2/views/components/PanelContainer';
 import {sendSuccessReport} from '@cdo/apps/code-studio/progressRedux';
 import {useAppDispatch, useAppSelector} from '@cdo/apps/util/reduxHooks';
 const commonI18n = require('@cdo/locale');
 const aichatI18n = require('@cdo/aichat/locale');
 
-import {setStartingAiCustomizations} from '../redux/aichatRedux';
+import {setStartingAiCustomizations, setViewMode} from '../redux/aichatRedux';
 import ChatWorkspace from './ChatWorkspace';
 import ModelCustomizationWorkspace from './ModelCustomizationWorkspace';
 import PresentationView from './presentation/PresentationView';
@@ -22,7 +22,6 @@ import {isProjectTemplateLevel} from '@cdo/apps/lab2/lab2Redux';
 import ProjectTemplateWorkspaceIcon from '@cdo/apps/templates/ProjectTemplateWorkspaceIcon';
 
 const AichatView: React.FunctionComponent = () => {
-  const [viewMode, setViewMode] = useState<string>(ViewMode.EDIT);
   const dispatch = useAppDispatch();
 
   const beforeNextLevel = useCallback(() => {
@@ -41,6 +40,11 @@ const AichatView: React.FunctionComponent = () => {
 
   const projectTemplateLevel = useAppSelector(isProjectTemplateLevel);
 
+  const {currentAiCustomizations, viewMode, hasPublished} = useAppSelector(
+    state => state.aichat
+  );
+  const {botName} = currentAiCustomizations.modelCardInfo;
+
   useEffect(() => {
     const studentAiCustomizations = JSON.parse(initialSources);
     dispatch(
@@ -51,10 +55,6 @@ const AichatView: React.FunctionComponent = () => {
     );
   }, [dispatch, initialSources, levelAichatSettings]);
 
-  const {botName} = useAppSelector(
-    state => state.aichat.currentAiCustomizations.modelCardInfo
-  );
-
   const viewModeButtonsProps: SegmentedButtonsProps = {
     buttons: [
       {
@@ -74,7 +74,7 @@ const AichatView: React.FunctionComponent = () => {
     ],
     size: 'm',
     selectedButtonValue: viewMode,
-    onChange: setViewMode,
+    onChange: viewMode => dispatch(setViewMode(viewMode as ViewMode)),
   };
 
   const chatWorkspaceHeader = (
@@ -90,7 +90,7 @@ const AichatView: React.FunctionComponent = () => {
 
   return (
     <div id="aichat-lab" className={moduleStyles.aichatLab}>
-      {!levelAichatSettings?.hidePresentationPanel && (
+      {!levelAichatSettings?.hidePresentationPanel && hasPublished && (
         <div className={moduleStyles.viewModeButtons}>
           <SegmentedButtons {...viewModeButtonsProps} />
         </div>

apps/src/aichat/views/ModelCustomizationWorkspace.tsx

@@ -7,11 +7,18 @@ import PublishNotes from './modelCustomization/PublishNotes';
 import styles from './model-customization-workspace.module.scss';
 import {isVisible} from './modelCustomization/utils';
 import {useAppSelector} from '@cdo/apps/util/reduxHooks';
+import {AichatLevelProperties} from '@cdo/apps/aichat/types';
 
 const ModelCustomizationWorkspace: React.FunctionComponent = () => {
   const {temperature, systemPrompt, retrievalContexts, modelCardInfo} =
     useAppSelector(state => state.aichat.fieldVisibilities);
 
+  const hidePresentationPanel = useAppSelector(
+    state =>
+      (state.lab.levelProperties as AichatLevelProperties | undefined)
+        ?.aichatSettings?.hidePresentationPanel
+  );
+
   const showSetupCustomization =
     isVisible(temperature) || isVisible(systemPrompt);
 
@@ -28,10 +35,11 @@ const ModelCustomizationWorkspace: React.FunctionComponent = () => {
               title: 'Retrieval',
               content: <RetrievalCustomization />,
             },
-            isVisible(modelCardInfo) && {
-              title: 'Publish',
-              content: <PublishNotes />,
-            },
+            isVisible(modelCardInfo) &&
+              !hidePresentationPanel && {
+                title: 'Publish',
+                content: <PublishNotes />,
+              },
           ].filter(Boolean) as Tab[]
         }
         name="model-customization"

apps/src/aichat/views/chatMessage.module.scss

@@ -36,6 +36,10 @@
       color: $light_gray_700;
     }
   }
+
+  &Alert {
+    background-color: #FEF7DF;
+  }
 }
 
 .modelUpdateMessageTextContainer {
@@ -47,6 +51,11 @@
   font-size: 16px;
 }
 
+.alert {
+  color: $light_caution_500;
+  font-size: 16px;
+}
+
 .userMessage {
   background-color: $lightest_cyan;
 }

apps/src/aichat/views/model-customization-workspace.module.scss

@@ -59,4 +59,10 @@
 
 .updateButton {
   width: 100%;
+  margin: 10px;
+}
+
+.buttonNoMargin {
+  width: 100%;
+  margin: 0;
 }

apps/src/aichat/views/modelCustomization/PublishNotes.tsx

@@ -1,18 +1,23 @@
 import React, {useCallback} from 'react';
+import classNames from 'classnames';
 
 import {
   setModelCardProperty,
+  setViewMode,
+  setHasPublished,
   updateAiCustomization,
 } from '@cdo/apps/aichat/redux/aichatRedux';
 import {useAppSelector, useAppDispatch} from '@cdo/apps/util/reduxHooks';
 import {StrongText} from '@cdo/apps/componentLibrary/typography/TypographyElements';
 import Button from '@cdo/apps/componentLibrary/button/Button';
 
 import {MODEL_CARD_FIELDS_LABELS_ICONS} from './constants';
-import {isVisible, isDisabled} from './utils';
+import {isDisabled} from './utils';
 import ExampleTopicsInputs from './ExampleTopicsInputs';
-import styles from '../model-customization-workspace.module.scss';
-import {ModelCardInfo} from '../../types';
+import PublishStatus from './PublishStatus';
+import moduleStyles from './publish-notes.module.scss';
+import modelCustomizationStyles from '../model-customization-workspace.module.scss';
+import {ModelCardInfo, ViewMode} from '../../types';
 
 const PublishNotes: React.FunctionComponent = () => {
   const dispatch = useAppDispatch();
@@ -24,24 +29,34 @@ const PublishNotes: React.FunctionComponent = () => {
     state => state.aichat.currentAiCustomizations
   );
 
-  const onUpdate = useCallback(
-    () => dispatch(updateAiCustomization()),
-    [dispatch]
-  );
+  const onSave = useCallback(() => {
+    dispatch(updateAiCustomization());
+    if (!hasFilledOutModelCard(modelCardInfo)) {
+      dispatch(setHasPublished(false));
+    }
+  }, [dispatch, modelCardInfo]);
 
-  const getInputTag = (property: keyof ModelCardInfo) => {
-    return property === 'botName' ? 'input' : 'textarea';
-  };
+  const onPublish = useCallback(() => {
+    dispatch(updateAiCustomization());
+    dispatch(setHasPublished(true));
+    dispatch(setViewMode(ViewMode.PRESENTATION));
+  }, [dispatch]);
 
   return (
-    <div className={styles.verticalFlexContainer}>
-      {isVisible(visibility) && (
-        <div className={styles.customizationContainer}>
+    <div className={modelCustomizationStyles.verticalFlexContainer}>
+      <div>
+        {hasFilledOutModelCard(modelCardInfo)
+          ? renderPublishOkNotification()
+          : renderCompleteToPublishNotification()}
+        <div className={modelCustomizationStyles.customizationContainer}>
           {MODEL_CARD_FIELDS_LABELS_ICONS.map(([property, label, _]) => {
             const InputTag = getInputTag(property);
 
             return (
-              <div className={styles.inputContainer} key={property}>
+              <div
+                className={modelCustomizationStyles.inputContainer}
+                key={property}
+              >
                 <label htmlFor={property}>
                   <StrongText>{label}</StrongText>
                 </label>
@@ -70,18 +85,80 @@ const PublishNotes: React.FunctionComponent = () => {
             );
           })}
         </div>
-      )}
-      <div className={styles.footerButtonContainer}>
+      </div>
+      <div className={modelCustomizationStyles.footerButtonContainer}>
+        <Button
+          text="Save"
+          iconLeft={{iconName: 'download'}}
+          type="secondary"
+          color="black"
+          disabled={isDisabled(visibility)}
+          onClick={onSave}
+          className={modelCustomizationStyles.updateButton}
+        />
         <Button
           text="Publish"
           iconLeft={{iconName: 'upload'}}
-          disabled={isDisabled(visibility)}
-          onClick={onUpdate}
-          className={styles.updateButton}
+          disabled={
+            isDisabled(visibility) || !hasFilledOutModelCard(modelCardInfo)
+          }
+          onClick={onPublish}
+          className={modelCustomizationStyles.updateButton}
         />
       </div>
     </div>
   );
 };
 
+const getInputTag = (property: keyof ModelCardInfo) => {
+  return property === 'botName' ? 'input' : 'textarea';
+};
+
+const hasFilledOutModelCard = (modelCardInfo: ModelCardInfo) => {
+  for (const key of Object.keys(modelCardInfo)) {
+    const typedKey = key as keyof ModelCardInfo;
+
+    if (typedKey === 'exampleTopics') {
+      if (
+        !modelCardInfo['exampleTopics'].filter(topic => topic.length).length
+      ) {
+        return false;
+      }
+    } else if (!modelCardInfo[typedKey].length) {
+      return false;
+    }
+  }
+
+  return true;
+};
+
+const renderPublishOkNotification = () => {
+  return (
+    <PublishStatus
+      iconName="check"
+      iconStyle={moduleStyles.check}
+      content="Ready to publish"
+      contentStyle={moduleStyles.messageTextContainer}
+      containerStyle={moduleStyles.messageContainerPublishOk}
+    />
+  );
+};
+
+const renderCompleteToPublishNotification = () => {
+  return (
+    <PublishStatus
+      iconName="triangle-exclamation"
+      iconStyle={moduleStyles.alert}
+      content={
+        <>
+          In order to publish, you <StrongText>must</StrongText> fill out a
+          model card
+        </>
+      }
+      contentStyle={moduleStyles.messageTextContainer}
+      containerStyle={classNames(moduleStyles.messageContainerAlert)}
+    />
+  );
+};
+
 export default PublishNotes;

apps/src/aichat/views/modelCustomization/PublishStatus.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import FontAwesomeV6Icon from '@cdo/apps/componentLibrary/fontAwesomeV6Icon';
+
+const PublishStatus: React.FunctionComponent<{
+  iconName: string;
+  iconStyle: string;
+  content: React.ReactNode;
+  contentStyle: string;
+  containerStyle: string;
+}> = ({iconName, iconStyle, content, contentStyle, containerStyle}) => {
+  return (
+    <div className={containerStyle}>
+      <FontAwesomeV6Icon iconName={iconName} className={iconStyle} />
+      <span className={contentStyle}>{content}</span>
+    </div>
+  );
+};
+
+export default PublishStatus;