fix(chat): move runtime selector to separate field (Issues #2478, #2515)

apps/chat/src/components/Chat/Publish/PublicVersionSelector.tsx

@@ -99,13 +99,10 @@ export function PublicVersionSelector({
       }
     >
       {allVersions.map(({ version, id }) => {
-        if (currentVersionGroup.selectedVersion.version === version) {
-          return null;
-        }
-
         if (onChangeSelectedVersion && !readonly) {
           return (
             <MenuItem
+              disabled={currentVersionGroup.selectedVersion.version === version}
               onClick={(e) => {
                 stopBubbling(e);
                 setIsVersionSelectOpen(false);
@@ -116,7 +113,11 @@ export function PublicVersionSelector({
                   currentVersionGroup.selectedVersion,
                 );
               }}
-              className="hover:bg-accent-primary-alpha"
+              className={classNames(
+                'hover:bg-accent-primary-alpha',
+                currentVersionGroup.selectedVersion.version === version &&
+                  'bg-accent-primary-alpha',
+              )}
               item={<span>{version}</span>}
               key={id}
             />
@@ -125,7 +126,11 @@ export function PublicVersionSelector({
 
         return (
           <li
-            className="cursor-default list-none px-3 py-[6.5px] hover:bg-accent-primary-alpha"
+            className={classNames(
+              'cursor-default list-none px-3 py-[6.5px] hover:bg-accent-primary-alpha',
+              currentVersionGroup.selectedVersion.version === version &&
+                'bg-accent-primary-alpha',
+            )}
             key={id}
           >
             {version}

apps/chat/src/components/Common/ApplicationWizard/CodeAppView/CodeAppView.tsx

@@ -50,6 +50,7 @@ import { CustomLogoSelect } from '@/src/components/Settings/CustomLogoSelect';
 
 import { ViewProps } from '../view-props';
 import { CodeEditor } from './CodeEditor';
+import { RuntimeVersionSelector } from './RuntimeVersionSelector';
 
 const features = [
   {
@@ -79,6 +80,7 @@ const MappingsForm = withLabel(
   DynamicFormFields<FormData, 'endpoints' | 'env'>,
 );
 const ComboBoxField = withErrorMessage(withLabel(MultipleComboBox));
+const RuntimeSelector = withController(withLabel(RuntimeVersionSelector));
 
 export const CodeAppView: React.FC<ViewProps> = ({
   onClose,
@@ -277,13 +279,15 @@ export const CodeAppView: React.FC<ViewProps> = ({
         />
 
         {sources && (
-          <CodeEditor
-            sourcesFolderId={sources}
-            setValue={setValue}
-            selectedRuntime={watch('runtime')}
-          />
+          <CodeEditor sourcesFolderId={sources} setValue={setValue} />
         )}
 
+        <RuntimeSelector
+          control={control}
+          name="runtime"
+          label={t('Runtime version')}
+        />
+
         <MappingsForm
           label={t('Endpoints')}
           addLabel={t('Add endpoint') ?? ''}

apps/chat/src/components/Common/ApplicationWizard/CodeAppView/CodeEditor.tsx

@@ -3,7 +3,6 @@ import {
   IconArrowsMaximize,
   IconArrowsMinimize,
   IconCheck,
-  IconChevronDown,
   IconFile,
   IconFilePlus,
   IconUpload,
@@ -29,7 +28,6 @@ import { Translation } from '@/src/types/translation';
 
 import { FilesActions, FilesSelectors } from '@/src/store/files/files.reducers';
 import { useAppDispatch, useAppSelector } from '@/src/store/hooks';
-import { SettingsSelectors } from '@/src/store/settings/settings.reducers';
 import { UISelectors } from '@/src/store/ui/ui.reducers';
 
 import { CODEAPPS_REQUIRED_FILES } from '@/src/constants/applications';
@@ -39,7 +37,6 @@ import { FileItem } from '../../../Files/FileItem';
 import { PreUploadDialog } from '../../../Files/PreUploadModal';
 import Folder from '../../../Folder/Folder';
 import { ConfirmDialog } from '../../ConfirmDialog';
-import { Menu, MenuItem } from '../../DropdownMenu';
 import Loader from '../../Loader';
 import Tooltip from '../../Tooltip';
 import { FormData } from '../form';
@@ -105,17 +102,13 @@ const CodeEditorView = ({
   const [fileContent, setFileContent] = useState<string>();
 
   useEffect(() => {
-    setFileContent(uploadedContent);
+    setFileContent(uploadedContent ?? '');
   }, [uploadedContent]);
 
   if (isUploadingContent) {
     return <Loader />;
   }
 
-  if (!fileContent) {
-    return null;
-  }
-
   return (
     <Editor
       options={{
@@ -160,15 +153,10 @@ const CodeEditorView = ({
 
 interface Props {
   sourcesFolderId: string | undefined;
-  selectedRuntime: string;
   setValue: UseFormSetValue<FormData>;
 }
 
-export const CodeEditor = ({
-  sourcesFolderId,
-  selectedRuntime,
-  setValue,
-}: Props) => {
+export const CodeEditor = ({ sourcesFolderId, setValue }: Props) => {
   const { t } = useTranslation(Translation.Chat);
 
   const dispatch = useAppDispatch();
@@ -181,13 +169,9 @@ export const CodeEditor = ({
   );
   const files = useAppSelector(FilesSelectors.selectFiles);
   const folders = useAppSelector(FilesSelectors.selectFolders);
-  const pythonVersions = useAppSelector(
-    SettingsSelectors.selectCodeEditorPythonVersions,
-  );
 
   const [openedFoldersIds, setOpenedFoldersIds] = useState<string[]>([]);
   const [selectedFile, setSelectedFile] = useState<DialFile>();
-  const [isVersionSelectorOpen, setIsVersionSelectorOpen] = useState(false);
   const [newFileFolder, setNewFileFolder] = useState<string>();
   const [newFileName, setNewFileName] = useState('');
   const [uploadFolderId, setUploadFolderId] = useState<string>();
@@ -213,24 +197,29 @@ export const CodeEditor = ({
     () => rootFiles.map((f) => f.name),
     [rootFiles],
   );
+  const folderFiles = useMemo(
+    () => files.filter((file) => file.id.startsWith(`${sourcesFolderId}/`)),
+    [files, sourcesFolderId],
+  );
 
   useEffect(() => {
     dispatch(FilesActions.resetFileTextContent());
     setSelectedFile(undefined);
   }, [dispatch, sourcesFolderId]);
 
   useEffect(() => {
-    if (rootFiles.length && !selectedFile) {
-      const appFile = rootFiles.find(
+    if (folderFiles.length && !selectedFile) {
+      const appFile = folderFiles.find(
         (file) => file.name === CODEAPPS_REQUIRED_FILES.APP,
       );
+
       if (appFile) {
         setSelectedFile(appFile);
       } else {
-        setSelectedFile(rootFiles[0]);
+        setSelectedFile(folderFiles[0]);
       }
     }
-  }, [rootFiles, selectedFile]);
+  }, [folderFiles, selectedFile]);
 
   useEffect(() => {
     if (selectedFile) {
@@ -278,7 +267,9 @@ export const CodeEditor = ({
   const handleDeleteFile = useCallback(
     (confirmed: boolean) => {
       if (confirmed && deletingFileId) {
+        dispatch(FilesActions.resetFileTextContent());
         dispatch(FilesActions.deleteFilesList({ fileIds: [deletingFileId] }));
+        setSelectedFile(undefined);
       }
 
       setDeletingFileId(undefined);
@@ -317,8 +308,8 @@ export const CodeEditor = ({
       <CodeAppExamples fileNames={rootFileNames} folderId={sourcesFolderId} />
       <div
         className={classNames(
-          `flex min-h-[400px] w-full max-w-full`,
-          isFullScreen ? 'fixed inset-0' : `h-[400px]`,
+          'flex min-h-[400px] w-full max-w-full',
+          isFullScreen ? 'fixed inset-0' : 'h-[400px]',
         )}
       >
         <div className="flex max-h-full min-w-0 shrink flex-col gap-0.5 divide-y divide-tertiary rounded border border-tertiary bg-layer-3">
@@ -394,7 +385,11 @@ export const CodeEditor = ({
                   value={newFileName}
                   name="edit-input"
                   onChange={(e) => setNewFileName(e.target.value)}
-                  onKeyDown={handleUploadEmptyFile}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') {
+                      handleUploadEmptyFile();
+                    }
+                  }}
                   autoFocus
                 />
                 <div className="absolute right-1 z-10 flex" data-qa="actions">
@@ -462,36 +457,7 @@ export const CodeEditor = ({
           </div>
         </div>
         <div className="flex max-h-full min-w-0 shrink grow flex-col divide-y divide-tertiary rounded border border-tertiary bg-layer-3">
-          <div className="flex w-full justify-end gap-3 divide-x divide-tertiary">
-            <Menu
-              onOpenChange={setIsVersionSelectorOpen}
-              disabled={false}
-              className="relative flex w-[112px] cursor-pointer justify-center py-2"
-              trigger={
-                <div className="flex items-center justify-center gap-1">
-                  {selectedRuntime}
-                  <IconChevronDown
-                    className={classNames(
-                      'absolute right-0.5 top-1/2 shrink-0 -translate-y-1/2 transition-all',
-                      isVersionSelectorOpen && 'rotate-180',
-                    )}
-                    size={18}
-                  />
-                </div>
-              }
-            >
-              {pythonVersions.map((version) => {
-                if (version === selectedRuntime) return null;
-                return (
-                  <MenuItem
-                    onClick={() => setValue('runtime', version)}
-                    className="flex justify-center hover:bg-accent-primary-alpha"
-                    key={version}
-                    item={version}
-                  />
-                );
-              })}
-            </Menu>
+          <div className="flex w-full justify-end gap-3 divide-x divide-tertiary py-2">
             <Tooltip tooltip={t(isFullScreen ? 'Minimize' : 'Full screen')}>
               <button
                 type="button"

apps/chat/src/components/Common/ApplicationWizard/CodeAppView/RuntimeVersionSelector.tsx

@@ -0,0 +1,57 @@
+import { IconChevronDown } from '@tabler/icons-react';
+import { useState } from 'react';
+
+import classNames from 'classnames';
+
+import { useAppSelector } from '@/src/store/hooks';
+import { SettingsSelectors } from '@/src/store/settings/settings.reducers';
+
+import { Menu, MenuItem } from '../../DropdownMenu';
+
+interface Props {
+  value?: string;
+  onChange?: (value: string) => void;
+}
+
+export const RuntimeVersionSelector = ({ value, onChange }: Props) => {
+  const pythonVersions = useAppSelector(
+    SettingsSelectors.selectCodeEditorPythonVersions,
+  );
+  const [isVersionSelectorOpen, setIsVersionSelectorOpen] = useState(false);
+
+  return (
+    <Menu
+      onOpenChange={setIsVersionSelectorOpen}
+      disabled={false}
+      className="input-form relative cursor-pointer px-3"
+      listClassName="w-full"
+      trigger={
+        <div className="flex gap-1">
+          {value}
+          <IconChevronDown
+            className={classNames(
+              'absolute right-3 top-1/2 shrink-0 -translate-y-1/2 transition-all',
+              isVersionSelectorOpen && 'rotate-180',
+            )}
+            size={18}
+          />
+        </div>
+      }
+    >
+      {pythonVersions.map((version) => {
+        return (
+          <MenuItem
+            onClick={() => onChange?.(version)}
+            disabled={version === value}
+            className={classNames(
+              'flex !max-w-full hover:bg-accent-primary-alpha',
+              version === value && 'bg-accent-primary-alpha',
+            )}
+            key={version}
+            item={version}
+          />
+        );
+      })}
+    </Menu>
+  );
+};