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

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';
@@ -160,15 +157,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 +173,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>();
@@ -279,6 +267,7 @@ export const CodeEditor = ({
     (confirmed: boolean) => {
       if (confirmed && deletingFileId) {
         dispatch(FilesActions.deleteFilesList({ fileIds: [deletingFileId] }));
+        setSelectedFile(undefined);
       }
 
       setDeletingFileId(undefined);
@@ -317,8 +306,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">
@@ -462,36 +451,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,54 @@
+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) => {
+        if (version === value) return null;
+        return (
+          <MenuItem
+            onClick={() => onChange?.(version)}
+            className="flex !max-w-full hover:bg-accent-primary-alpha"
+            key={version}
+            item={version}
+          />
+        );
+      })}
+    </Menu>
+  );
+};