fix(chat): enhance GeneralInfoView with bucket handling and additiona…

…l application properties
epam · Jan 31, 2025 · 33a7c52 · 33a7c52
1 parent 9d871cf
commit 33a7c52
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 19 deletions.
diff --git a/apps/chat/src/components/AppsEditor/GeneralInfoView/GeneralInfoView.tsx b/apps/chat/src/components/AppsEditor/GeneralInfoView/GeneralInfoView.tsx
@@ -1,13 +1,18 @@
 import { FormProvider, useForm } from 'react-hook-form';
 
-import {
-  isApplicationType,
-  safeStringifyApplicationFeatures,
-} from '@/src/utils/app/application';
+import { safeStringifyApplicationFeatures } from '@/src/utils/app/application';
 
 import { ApiDetailedApplicationTypeSchema } from '@/src/types/application-type-schema';
 import { ApiApplicationResponseDefault } from '@/src/types/applications';
 
+import { useAppSelector } from '@/src/store/hooks';
+import { SettingsSelectors } from '@/src/store/settings/settings.reducers';
+
+import {
+  FEATURES_ENDPOINTS,
+  FEATURES_ENDPOINTS_DEFAULT_VALUES,
+  FEATURES_ENDPOINTS_NAMES,
+} from '@/src/constants/applications';
 import { DEFAULT_VERSION } from '@/src/constants/public';
 
 import { GeneralInfoEditor } from './GeneralInfoEditor';
@@ -17,12 +22,17 @@ import { ApplicationGeneralInfoFormData } from './form';
 interface Props {
   applicationData?: ApiApplicationResponseDefault;
   schema: ApiDetailedApplicationTypeSchema | null;
+  bucket: string;
 }
 
 export const GeneralInfoView: React.FC<Props> = ({
   applicationData,
   schema,
+  bucket,
 }) => {
+  const [pythonVersion] = useAppSelector(
+    SettingsSelectors.selectCodeEditorPythonVersions,
+  );
   const methods = useForm<ApplicationGeneralInfoFormData>({
     mode: 'onChange',
     reValidateMode: 'onChange',
@@ -31,10 +41,7 @@ export const GeneralInfoView: React.FC<Props> = ({
       version: applicationData?.display_version ?? DEFAULT_VERSION,
       iconUrl: applicationData?.icon_url ?? '',
       description: applicationData?.description ?? '',
-      topics:
-        applicationData?.description_keywords?.filter(
-          (value) => !isApplicationType(value),
-        ) ?? [],
+      topics: applicationData?.description_keywords ?? [],
       id: applicationData?.name ?? '',
       reference: applicationData?.reference ?? '',
       //schema type application properties
@@ -44,6 +51,44 @@ export const GeneralInfoView: React.FC<Props> = ({
       inputAttachmentTypes: applicationData?.input_attachment_types,
       maxInputAttachments: applicationData?.max_input_attachments,
       features: safeStringifyApplicationFeatures(applicationData?.features),
+      //code app application properties
+      sources:
+        applicationData?.function?.source_folder ?? `files/${bucket}/appdata`,
+      runtime:
+        applicationData?.function?.runtime ?? pythonVersion ?? 'python3.11',
+      endpoints: applicationData?.function?.mapping
+        ? Object.entries(applicationData.function.mapping).map(
+            ([key, value]) => ({
+              label: key,
+              visibleName: FEATURES_ENDPOINTS_NAMES[key],
+              value,
+              editableKey:
+                !FEATURES_ENDPOINTS[key as keyof typeof FEATURES_ENDPOINTS],
+              static: key === FEATURES_ENDPOINTS.chat_completion,
+            }),
+          )
+        : [
+            {
+              label: FEATURES_ENDPOINTS.chat_completion,
+              visibleName:
+                FEATURES_ENDPOINTS_NAMES[FEATURES_ENDPOINTS.chat_completion],
+              value:
+                FEATURES_ENDPOINTS_DEFAULT_VALUES[
+                  FEATURES_ENDPOINTS.chat_completion
+                ] || '',
+              editableKey: false,
+              static: true,
+            },
+          ],
+      env: applicationData?.function?.env
+        ? Object.entries(applicationData.function.env).map(
+            ([label, value]) => ({
+              label,
+              value,
+              editableKey: true,
+            }),
+          )
+        : [],
     },
   });
 

diff --git a/apps/chat/src/components/AppsEditor/GeneralInfoView/form.ts b/apps/chat/src/components/AppsEditor/GeneralInfoView/form.ts
@@ -1,6 +1,5 @@
 import { Path, RegisterOptions } from 'react-hook-form';
 
-import { isApplicationType } from '@/src/utils/app/application';
 import { notAllowedSymbols } from '@/src/utils/app/file';
 
 import { ApiDetailedApplicationTypeSchema } from '@/src/types/application-type-schema';
@@ -10,6 +9,8 @@ import { QuickAppConfig } from '@/src/types/quick-apps';
 
 import { DEFAULT_VERSION } from '@/src/constants/public';
 
+import { DynamicField } from '../../Common/Forms/DynamicFormFields';
+
 export interface ApplicationGeneralInfoFormData {
   name: string;
   version: string;
@@ -23,6 +24,11 @@ export interface ApplicationGeneralInfoFormData {
   inputAttachmentTypes?: string[];
   maxInputAttachments?: number;
   features?: string | null;
+  env?: DynamicField[];
+  sources?: string;
+  sourceFiles?: string[];
+  runtime?: string;
+  endpoints?: DynamicField[];
 }
 
 type Options<T extends Path<ApplicationGeneralInfoFormData>> = Omit<
@@ -73,23 +79,45 @@ export const getApplicationData = (
     type: EntityType.Application,
     isDefault: false,
     folderId: '',
-    topics: isApplicationType(type)
-      ? [...formData.topics, type]
-      : formData.topics,
+    topics: formData.topics,
     description: formData.description.trim(),
     completionUrl: formData.completionUrl,
     version: formData.version || DEFAULT_VERSION,
     iconUrl: formData.iconUrl,
     applicationProperties: formData.applicationProperties ?? undefined,
+    inputAttachmentTypes: formData.inputAttachmentTypes,
+    maxInputAttachments: formData.maxInputAttachments,
   };
   if (type === 'custom-app') {
     preparedData.completionUrl = formData.completionUrl ?? '';
-    preparedData.inputAttachmentTypes = formData.inputAttachmentTypes;
-    preparedData.maxInputAttachments = formData.maxInputAttachments;
     preparedData.features = formData.features
       ? JSON.parse(formData.features)
       : null;
   }
 
+  if (type === 'code-app') {
+    preparedData.function = {
+      runtime: formData.runtime,
+      env: formData.env?.length
+        ? formData.env.reduce(
+            (acc, option) => ({
+              ...acc,
+              [option.label]: option.value,
+            }),
+            {},
+          )
+        : undefined,
+      sourceFolder: formData.sources!,
+      mapping:
+        formData.endpoints?.reduce(
+          (acc, option) => ({
+            ...acc,
+            [option.label]: option.value.trim(),
+          }),
+          {},
+        ) ?? {},
+    };
+  }
+
   return preparedData;
 };
diff --git a/apps/chat/src/pages/apps-editor/[slug]/index.tsx b/apps/chat/src/pages/apps-editor/[slug]/index.tsx
@@ -23,14 +23,23 @@ import { getLayout } from '../../_app';
 interface PageProps {
   applicationData?: ApiApplicationResponseDefault;
   schema: ApiDetailedApplicationTypeSchema | null;
+  bucket: string;
 }
 
-export default function AppsEditor({ applicationData, schema }: PageProps) {
+export default function AppsEditor({
+  applicationData,
+  schema,
+  bucket,
+}: PageProps) {
   return (
     <div className="flex size-full flex-col">
       <AppsEditorHeader />
       <div className="flex size-full">
-        <GeneralInfoView applicationData={applicationData} schema={schema} />
+        <GeneralInfoView
+          applicationData={applicationData}
+          schema={schema}
+          bucket={bucket}
+        />
       </div>
     </div>
   );
@@ -122,6 +131,25 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
     };
   }
 
+  const bucketUrl = `${process.env.DIAL_API_HOST}/v1/bucket`;
+  const bucketResponse = await fetch(bucketUrl, {
+    headers: getApiHeaders({ jwt: token?.access_token as string }),
+  });
+
+  if (!bucketResponse.ok) {
+    const serverErrorMessage = await bucketResponse.text();
+    throw new DialAIError(
+      serverErrorMessage,
+      '',
+      '',
+      bucketResponse.status + '',
+    );
+  }
+
+  const bucketJson = (await bucketResponse.json()) as { bucket: string };
+
+  const bucket = bucketJson.bucket;
+
   const { id } = context.query;
 
   if (id && typeof id === 'string') {
@@ -149,6 +177,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
           ...commonProps.props,
           applicationData,
           schema: applicationTypeDetailedSchema ?? null,
+          bucket,
         },
       };
     } catch (error) {
@@ -162,6 +191,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
       props: {
         ...commonProps.props,
         schema: applicationTypeDetailedSchema,
+        bucket,
       },
     };
   }

diff --git a/apps/chat/src/utils/app/application.ts b/apps/chat/src/utils/app/application.ts
@@ -113,9 +113,7 @@ export const convertApplicationToApi = (
       ...commonData,
       function: {
         runtime: applicationData.function.runtime ?? 'python3.11',
-        source_folder: applicationData.function.sourceFolder
-          ? `${ApiUtils.encodeApiUrl(applicationData.function.sourceFolder)}/`
-          : '',
+        source_folder: `${ApiUtils.encodeApiUrl(applicationData.function.sourceFolder)}/`,
         mapping: applicationData.function.mapping,
         ...(applicationData.function.env && {
           env: applicationData.function.env,