feat(chat): it should be possible to edit application

apps/chat/src/i18n/packs/i18n-lang-en.ts

@@ -252,7 +252,12 @@ export const I18N_PACK_EN = deepmerge(I18N_FORWARDED_EN_PACK, {
     },
   },
   appsCreator: {
-    title: 'Create New App',
+    create: {
+      title: 'Create New App',
+    },
+    edit: {
+      title: 'Edit App',
+    },
     fields: {
       category: {
         label: 'Category',

apps/chat/src/i18n/packs/i18n-lang-pl.ts

@@ -254,7 +254,12 @@ export const I18N_PACK_PL: I18nLangPack = deepmerge(I18N_FORWARDED_PL_PACK, {
     },
   },
   appsCreator: {
-    title: 'Nowa aplikacja',
+    create: {
+      title: 'Nowa aplikacja',
+    },
+    edit: {
+      title: 'Edytuj aplikację',
+    },
     fields: {
       category: {
         label: 'Kategoria',

apps/chat/src/modules/apps-creator/creator/app-create-form-modal.tsx

@@ -0,0 +1,66 @@
+import type { SdkCreateAppInputT, SdkCreateAppOutputT } from '@llm/sdk';
+
+import {
+  CancelButton,
+  CreateButton,
+  FormErrorAlert,
+  Modal,
+  type ModalProps,
+  ModalTitle,
+} from '@llm/ui';
+import { useI18n } from '~/i18n';
+
+import { AppSharedFormFields } from '../shared';
+import { useAppCreateForm } from './use-app-create-form';
+
+export type AppCreateFormModalProps =
+  & Omit<ModalProps, 'children' | 'header' | 'formProps'>
+  & {
+    defaultValue: SdkCreateAppInputT;
+    onAfterSubmit?: (result: SdkCreateAppOutputT) => void;
+  };
+
+export function AppCreateFormModal(
+  {
+    defaultValue,
+    onAfterSubmit,
+    onClose,
+    ...props
+  }: AppCreateFormModalProps,
+) {
+  const t = useI18n().pack.appsCreator;
+  const { handleSubmitEvent, validator, submitState, bind, value } = useAppCreateForm({
+    defaultValue,
+    onAfterSubmit,
+  });
+
+  return (
+    <Modal
+      {...props}
+      isOverflowVisible
+      onClose={onClose}
+      formProps={{
+        onSubmit: handleSubmitEvent,
+      }}
+      header={(
+        <ModalTitle>
+          {t.create.title}
+        </ModalTitle>
+      )}
+      footer={(
+        <>
+          <CancelButton disabled={submitState.loading} onClick={onClose} />
+          <CreateButton loading={submitState.loading} type="submit" />
+        </>
+      )}
+    >
+      <AppSharedFormFields
+        organization={value.organization}
+        errors={validator.errors.all as any}
+        {...bind.merged()}
+      />
+
+      <FormErrorAlert result={submitState.result} />
+    </Modal>
+  );
+}

apps/chat/src/modules/apps-creator/creator/index.ts

@@ -0,0 +1,3 @@
+export * from './app-create-form-modal';
+export * from './use-app-create-form';
+export * from './use-app-create-modal';

apps/chat/src/modules/apps-creator/use-app-create-modal.tsx → apps/chat/src/modules/apps-creator/creator/use-app-create-modal.tsx

@@ -2,7 +2,7 @@ import type { SdkCreateAppInputT, SdkCreateAppOutputT } from '@llm/sdk';
 
 import { useAnimatedModal } from '@llm/commons-front';
 
-import { useWorkspaceOrganizationOrThrow } from '../workspace';
+import { useWorkspaceOrganizationOrThrow } from '../../workspace';
 import { AppCreateFormModal } from './app-create-form-modal';
 
 type AppShowModalProps = {

apps/chat/src/modules/apps-creator/index.ts

@@ -1,3 +1,3 @@
-export * from './app-create-form-modal';
-export * from './use-app-create-form';
-export * from './use-app-create-modal';
+export * from './creator';
+export * from './shared';
+export * from './update';

apps/chat/src/modules/apps-creator/shared/app-shared-form-fields.tsx

@@ -0,0 +1,82 @@
+import { controlled, useFormValidatorMessages, type ValidationErrorsListProps } from '@under-control/forms';
+
+import type { SdkTableRowWithIdT, SdkUpdateAppInputT } from '@llm/sdk';
+
+import { FormField, Input, TextArea } from '@llm/ui';
+import { useI18n } from '~/i18n';
+import { AppsCategoriesSearchSelect } from '~/modules/apps-categories';
+
+type Value = Pick<
+  SdkUpdateAppInputT,
+  'name' | 'chatContext' | 'description' | 'category'
+>;
+
+type Props =
+  & ValidationErrorsListProps<Value>
+  & {
+    organization: SdkTableRowWithIdT;
+  };
+
+export const AppSharedFormFields = controlled<Value, Props>(({ errors, organization, control: { bind } }) => {
+  const t = useI18n().pack.appsCreator;
+  const validation = useFormValidatorMessages({ errors });
+
+  return (
+    <>
+      <FormField
+        className="uk-margin"
+        label={t.fields.category.label}
+        {...validation.extract('category')}
+      >
+        <AppsCategoriesSearchSelect
+          key={organization.id}
+          {...bind.path('category')}
+          filters={{
+            archived: false,
+            organizationIds: [organization.id],
+          }}
+        />
+      </FormField>
+
+      <FormField
+        className="uk-margin"
+        label={t.fields.name.label}
+        {...validation.extract('name')}
+      >
+        <Input
+          name="name"
+          placeholder={t.fields.name.placeholder}
+          required
+          {...bind.path('name')}
+        />
+      </FormField>
+
+      <FormField
+        className="uk-margin"
+        label={t.fields.description.label}
+        {...validation.extract('description')}
+      >
+        <TextArea
+          name="description"
+          placeholder={t.fields.description.placeholder}
+          required
+          {...bind.path('description')}
+        />
+      </FormField>
+
+      <FormField
+        className="uk-margin"
+        label={t.fields.chatContext.label}
+        {...validation.extract('name')}
+      >
+        <TextArea
+          name="chat-context"
+          placeholder={t.fields.chatContext.placeholder}
+          rows={3}
+          required
+          {...bind.path('chatContext')}
+        />
+      </FormField>
+    </>
+  );
+});

apps/chat/src/modules/apps-creator/shared/index.ts

@@ -0,0 +1 @@
+export * from './app-shared-form-fields';

apps/chat/src/modules/apps-creator/update/app-update-form-modal.tsx

@@ -0,0 +1,65 @@
+import type { SdkAppT } from '@llm/sdk';
+
+import {
+  CancelButton,
+  FormErrorAlert,
+  Modal,
+  type ModalProps,
+  ModalTitle,
+  UpdateButton,
+} from '@llm/ui';
+import { useI18n } from '~/i18n';
+
+import { AppSharedFormFields } from '../shared';
+import { useAppUpdateForm } from './use-app-update-form';
+
+export type AppUpdateFormModalProps =
+  & Omit<ModalProps, 'children' | 'header' | 'formProps'>
+  & {
+    app: SdkAppT;
+    onAfterSubmit?: VoidFunction;
+  };
+
+export function AppUpdateFormModal(
+  {
+    app,
+    onAfterSubmit,
+    onClose,
+    ...props
+  }: AppUpdateFormModalProps,
+) {
+  const t = useI18n().pack.appsCreator.edit;
+  const { handleSubmitEvent, validator, submitState, bind } = useAppUpdateForm({
+    defaultValue: app,
+    onAfterSubmit,
+  });
+
+  return (
+    <Modal
+      {...props}
+      onClose={onClose}
+      formProps={{
+        onSubmit: handleSubmitEvent,
+      }}
+      header={(
+        <ModalTitle>
+          {t.title}
+        </ModalTitle>
+      )}
+      footer={(
+        <>
+          <CancelButton disabled={submitState.loading} onClick={onClose} />
+          <UpdateButton loading={submitState.loading} type="submit" />
+        </>
+      )}
+    >
+      <AppSharedFormFields
+        organization={app.organization}
+        errors={validator.errors.all as unknown as any}
+        {...bind.merged()}
+      />
+
+      <FormErrorAlert result={submitState.result} />
+    </Modal>
+  );
+}

apps/chat/src/modules/apps-creator/update/index.ts

@@ -0,0 +1,3 @@
+export * from './app-update-form-modal';
+export * from './use-app-update-form';
+export * from './use-app-update-modal';