fix: assistant list UX improvements

src/containers/Assistants/AssistantDetail/ConfigEditor.tsx

@@ -16,7 +16,7 @@ import { GET_ASSISTANT, GET_ASSISTANT_VERSIONS } from 'graphql/queries/Assistant
 
 import ExpandIcon from 'assets/images/icons/ExpandContent.svg?react';
 
-import { AssistantOptions } from '../AssistantOptions/AssistantOptions';
+import { KnowledgeBaseOptions } from '../AssistantOptions/KnowledgeBaseOptions';
 import type { AssistantVersion } from '../VersionPanel/VersionPanel';
 
 import styles from './ConfigEditor.module.css';
@@ -249,7 +249,7 @@ export const ConfigEditor = ({
       disabled: newVersionInProgress,
     },
     {
-      component: AssistantOptions,
+      component: KnowledgeBaseOptions,
       name: 'assistantOptions',
       formikValues: formik.values,
       setFieldValue: formik.setFieldValue,
@@ -342,7 +342,7 @@ export const ConfigEditor = ({
                     data-testid="saveVersionButton"
                     onClick={formik.submitForm}
                     loading={savingChanges || creating}
-                    disabled={newVersionInProgress || savingChanges || creating}
+                    disabled={newVersionInProgress || savingChanges || creating || !hasUnsavedChanges}
                   >
                     {t('Save')}
                   </Button>
@@ -363,11 +363,6 @@ export const ConfigEditor = ({
                 <Field key={field.name} {...field} />
               </div>
             ))}
-            {!createMode && (
-              <span className={styles.NoEvals} data-testid="noEvalsLink">
-                {t('No evals run. Start New Eval >')}
-              </span>
-            )}
           </div>
         </form>
 

src/containers/Assistants/AssistantList/AssistantList.module.css

@@ -26,11 +26,27 @@
   color: #1f2937;
 }
 
+.DisplayIdRow {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
 .DisplayId {
   font-size: 0.75rem;
   color: #6b7280;
 }
 
+.CopyButton {
+  padding: 2px !important;
+  color: #6b7280;
+
+  svg {
+    width: 12px;
+    height: 12px;
+  }
+}
+
 .VersionBadge {
   color: #374151;
 }

src/containers/Assistants/AssistantList/AssistantList.tsx

@@ -5,9 +5,12 @@ import { useApolloClient, useMutation, useQuery } from '@apollo/client';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 
+import { IconButton, Tooltip } from '@mui/material';
+
 import EditIcon from 'assets/images/icons/Edit.svg?react';
 import CopyIcon from 'assets/images/icons/Settings/Copy.svg?react';
 
+import { copyToClipboard } from 'common/utils';
 import { FILTER_ASSISTANTS, GET_ASSISTANT, GET_ASSISTANTS_COUNT } from 'graphql/queries/Assistant';
 import { CLONE_ASSISTANT, DELETE_ASSISTANT } from 'graphql/mutations/Assistant';
 import { List } from 'containers/List/List';
@@ -22,7 +25,22 @@ dayjs.extend(relativeTime);
 const getAssistantName = (name: string, assistantDisplayId: string) => (
   <div className={styles.NameCell}>
     <span className={styles.Name}>{name}</span>
-    <span className={styles.DisplayId}>{assistantDisplayId}</span>
+    <span className={styles.DisplayIdRow}>
+      <Tooltip title="Copy assistant ID" placement="top">
+        <IconButton
+          size="small"
+          className={styles.CopyButton}
+          onClick={(e) => {
+            e.stopPropagation();
+            copyToClipboard(assistantDisplayId);
+          }}
+          data-testid="copyAssistantId"
+        >
+          <CopyIcon />
+        </IconButton>
+      </Tooltip>
+      <span className={styles.DisplayId}>{assistantDisplayId}</span>
+    </span>
   </div>
 );
 
@@ -127,9 +145,9 @@ export const AssistantList = () => {
   });
 
   const columnNames = [
-    { name: 'name', label: t('Assistant Name') },
+    { label: t('Assistant Name') },
     { label: t('Live Version') },
-    { label: t('Last Updated') },
+    { name: 'updated_at', label: t('Last Updated'), sort: true, order: 'desc' },
     { label: t('Actions') },
   ];
 
@@ -165,14 +183,16 @@ export const AssistantList = () => {
         dialogMessage={t("You won't be able to use this assistant.")}
         {...queries}
         {...columnAttributes}
-        searchParameter={['name']}
+        searchParameter={['name_or_assistant_id']}
         additionalAction={additionalAction}
         button={{
           show: true,
           label: t('Create New Assistant'),
           action: () => navigate('/assistants/add'),
         }}
         editSupport={false}
+        deleteModifier={{ variables: (id: string) => ({ deleteAssistantId: id }) }}
+        sortConfig={{ sortBy: 'updated_at', sortOrder: 'desc' }}
       />
 
       {cloneDialogOpen && selectedAssistant && (

src/containers/Assistants/AssistantOptions/AssistantOptions.module.css

@@ -82,129 +82,26 @@
   column-gap: 0.5rem;
 }
 
-:global .kb-dialog-content {
-  padding: 4px 32px 16px 32px !important;
-  padding-top: 4px !important;
-}
-
-:global(.MuiDialog-paper):has(.kb-dialog-content) {
-  width: 663px !important;
-  max-width: 663px !important;
-  min-width: 663px !important;
-  min-height: 510px;
-  border-radius: 16px !important;
-  border: 1px solid #cccccc;
-  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08) !important;
-  margin: 0 !important;
-}
-
-:global(.MuiDialog-scrollPaper):has(.kb-dialog-content),
-:global(.MuiDialog-container):has(.kb-dialog-content) {
-  align-items: center !important;
-}
-
-:global(.MuiDialog-paper):has(.kb-dialog-content) :global(.MuiDialogTitle-root) {
-  font-weight: 600 !important;
-  font-size: 24px !important;
-  color: #191c1a !important;
-  text-align: left !important;
-  padding: 20px 32px 0px 32px !important;
-}
-
-:global(.MuiDialog-paper):has(.kb-dialog-content) :global(.MuiDialogActions-root) {
-  padding: 16px 32px 28px 32px !important;
-  gap: 12px;
-}
-
-:global(.MuiDialog-paper):has(.kb-dialog-content) :global(.MuiDialogActions-root button) {
-  border-radius: 100px !important;
-  height: 40px;
-  min-width: 91px;
-  font-weight: 600;
-  font-size: 14px;
-  text-transform: none !important;
-}
-
 .DialogContent {
+  text-align: center;
+  max-height: 40vh;
   display: flex;
   flex-direction: column;
 }
 
-.DialogSubtitle {
-  font-size: 12px;
-  color: #555555;
-  margin: 2px 0 12px 0;
-  line-height: 20px;
-}
-
-.DialogBody {
-  display: flex;
-  gap: 24px;
-  min-height: 300px;
-}
-
-.FileSection {
-  flex: 1;
+.UploadInfo {
+  font-size: 0.8rem;
+  line-height: 0;
+  color: #555;
   display: flex;
+  gap: 1.2rem;
   flex-direction: column;
-  min-width: 0;
-}
-
-.FileSectionHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 12px;
-}
-
-.FileSectionTitle {
-  font-size: 14px;
-  font-weight: 600;
-  color: #2f2f2f;
-}
-
-.AddFilesButton {
-  border-radius: 100px !important;
-  font-size: 14px !important;
-  font-weight: 500 !important;
-  height: 32px;
-  padding: 0 16px 0 12px !important;
-  border: 2px solid #119656 !important;
-  border-color: #119656 !important;
-  color: #119656 !important;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  text-transform: none !important;
+  margin-top: 1rem;
 }
 
-.InfoSection {
-  width: 168px;
-  min-width: 168px;
-  font-size: 12px;
-  color: #555555;
-  opacity: 0.7;
-  padding-top: 4px;
-}
-
-.InfoText {
-  line-height: 18px;
-  margin: 0 0 16px 0;
-}
-
-.InfoLink {
+.DialogContent span a {
   color: #119656;
   font-weight: 600;
-  text-decoration: underline;
-  opacity: 1;
-}
-
-.FileLimitText {
-  margin: 0;
-  font-size: 12px;
-  font-weight: 700;
-  color: #555555;
-  line-height: 18px;
 }
 
 .UploadContainer {
@@ -240,19 +137,18 @@
   display: flex;
   flex-direction: column;
   row-gap: 0.5rem;
+  margin: 1rem 0;
   height: 100%;
-  overflow-y: auto;
-  max-height: 240px;
+  overflow-y: scroll;
 }
 
 .File {
   display: flex;
   align-items: center;
   column-gap: 0.5rem;
-  font-size: 0.85rem;
-  background-color: #f0f4f2;
-  padding: 0.6rem 0.75rem;
-  border-radius: 8px;
+  font-size: 0.8rem;
+  background-color: #ebf8ee;
+  padding: 0.5rem 0.5rem;
 }
 
 .FileLeadingIcon {
@@ -308,14 +204,6 @@
   padding: 4px;
 }
 
-.DeleteButton {
-  padding: 4px;
-}
-
-.DeleteIcon {
-  color: #e53935 !important;
-}
-
 .RetryIcon {
   color: #76848f;
 }

src/containers/Assistants/AssistantOptions/AssistantOptions.test.tsx

@@ -490,7 +490,7 @@ describe('AssistantOptions upload queue behavior', () => {
       );
     });
 
-    fireEvent.click(screen.getByRole('button', { name: 'Proceed' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }));
 
     await waitFor(() => {
       expect(setNotificationSpy).toHaveBeenCalledWith(