Gen AI lab: styling pass

apps/src/aichat/views/AichatView.tsx

@@ -25,22 +25,6 @@ import {AichatLevelProperties, ViewMode} from '@cdo/apps/aichat/types';
 import {isProjectTemplateLevel} from '@cdo/apps/lab2/lab2Redux';
 import ProjectTemplateWorkspaceIcon from '@cdo/apps/templates/ProjectTemplateWorkspaceIcon';
 
-const renderChatWorkspaceHeaderRight = (onClear: () => void) => {
-  return (
-    <div>
-      <Button
-        onClick={onClear}
-        text="Clear"
-        iconLeft={{iconName: 'paintbrush'}}
-        size="xs"
-        color="white"
-        type="secondary"
-      />
-      <CopyButton />
-    </div>
-  );
-};
-
 const AichatView: React.FunctionComponent = () => {
   const [viewMode, setViewMode] = useState<string>(ViewMode.EDIT);
   const dispatch = useAppDispatch();
@@ -92,7 +76,7 @@ const AichatView: React.FunctionComponent = () => {
         },
       },
     ],
-    size: 'm',
+    size: 's',
     selectedButtonValue: viewMode,
     onChange: setViewMode,
   };
@@ -162,4 +146,21 @@ const AichatView: React.FunctionComponent = () => {
   );
 };
 
+const renderChatWorkspaceHeaderRight = (onClear: () => void) => {
+  return (
+    <div className={moduleStyles.chatHeaderRight}>
+      <Button
+        onClick={onClear}
+        text="Clear"
+        iconLeft={{iconName: 'paintbrush'}}
+        size="xs"
+        color="white"
+        type="secondary"
+        className={moduleStyles.clearButton}
+      />
+      <CopyButton />
+    </div>
+  );
+};
+
 export default AichatView;

apps/src/aichat/views/CopyButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {useSelector} from 'react-redux';
 
-import Button from '@cdo/apps/templates/Button';
+import Button from '@cdo/apps/componentLibrary/button/Button';
 import copyToClipboard from '@cdo/apps/util/copyToClipboard';
 import {AichatState} from '@cdo/apps/aichat/redux/aichatRedux';
 
@@ -30,12 +30,12 @@ const CopyButton: React.FunctionComponent = () => {
 
   return (
     <Button
-      color={Button.ButtonColor.white}
-      icon={'clipboard'}
-      key="copy"
-      onClick={() => handleCopy()}
-      size={Button.ButtonSize.small}
-      text="Copy Conversation History"
+      onClick={handleCopy}
+      text="Copy Chat"
+      iconLeft={{iconName: 'clipboard'}}
+      size="xs"
+      color="white"
+      type="secondary"
     />
   );
 };

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

@@ -42,3 +42,7 @@
   flex: 1;
   gap: 2px;
 }
+
+.clearButton {
+  margin-right: 5px;
+}

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

@@ -13,13 +13,19 @@
 
   textarea {
     @extend %full-width;
-    height: 100px;
+    height: 120px;
+    min-height: 50px;
     resize: vertical;
     margin: 0;
+    border-radius: 4px;
+    border-color: $cyan;
   }
 
   input {
     @extend %full-width;
+    height: 30px;
+    border-radius: 4px;
+    border-color: $lighter_gray;
   }
 
   .inputContainer {
@@ -55,8 +61,14 @@
 
 .selectedModelDropdown {
   @extend %full-width;
+  padding-bottom: 10px;
 }
 
 .updateButton {
   width: 100%;
 }
+
+.compareModelsButton {
+  padding: 5px 16px;
+  margin: 10px 0;
+}

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

@@ -54,6 +54,7 @@ const PublishNotes: React.FunctionComponent = () => {
                 {property !== 'exampleTopics' && (
                   <InputTag
                     id={property}
+                    type="text"
                     disabled={isDisabled(visibility)}
                     value={modelCardInfo[property]}
                     onChange={event =>

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

@@ -81,9 +81,13 @@ const RetrievalCustomization: React.FunctionComponent = () => {
             disabled={!newRetrievalContext || isDisabled(visibility)}
           />
         </div>
+        <div className={styles.addedItemsHeaderContainer}>
+          <StrongText>Added</StrongText>
+        </div>
         {retrievalContexts.map((message, index) => {
           return (
             <div key={index} className={styles.itemContainer}>
+              <span>{message}</span>
               <button
                 type="button"
                 onClick={() => onRemove(index)}
@@ -95,7 +99,6 @@ const RetrievalCustomization: React.FunctionComponent = () => {
                   className={styles.removeItemIcon}
                 />
               </button>
-              <span className={styles.itemText}>{message}</span>
             </div>
           );
         })}

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

@@ -63,7 +63,10 @@ const SetupCustomization: React.FunctionComponent = () => {
           text="Compare Models"
           onClick={() => setIsShowingModelDialog(true)}
           type="secondary"
-          className={styles.updateButton}
+          className={classNames(
+            styles.updateButton,
+            styles.compareModelsButton
+          )}
         />
         {isShowingModelDialog && (
           <CompareModelsDialog onClose={() => setIsShowingModelDialog(false)} />

apps/src/aichat/views/modelCustomization/constants.ts

@@ -6,7 +6,7 @@ import {
 } from '../../types';
 
 export const MIN_TEMPERATURE = 0;
-export const MAX_TEMPERATURE = 2;
+export const MAX_TEMPERATURE = 1;
 export const SET_TEMPERATURE_STEP = 0.1;
 export const MAX_RETRIEVAL_CONTEXTS = 20;
 export const MAX_ASK_ABOUT_TOPICS = 10;

apps/src/aichat/views/modelCustomization/retrieval-customization.module.scss

@@ -3,18 +3,22 @@
 
 .itemContainer {
   display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 5px;
+  padding: 4px 12px;
+  border-radius: 4px;
+  border-color: $light_gray_500;
+  border: 1px solid;
+  color: $light_gray_500;
 }
 
 .removeItemIcon {
   color: $light_gray_500;
-}
 
-.itemText {
-  background-color: $light_gray_50;
-  flex: 1;
-  margin: 5px;
-  padding: 5px;
-  border-radius: 4px;
+  &:hover {
+    color: $light_negative_500;
+  }
 }
 
 .removeItemButton {
@@ -25,3 +29,9 @@
   display: flex;
   flex-direction: row-reverse;
 }
+
+.addedItemsHeaderContainer {
+  border-bottom: 1px solid $light_gray_200;
+  font-size: 14px;
+  margin: 16px 0 8px 0;
+}