Merge branch 'development' of github.com:epam/ai-dial-chat into feat/…

…integrate-sharing-into-stateful-api
epam · Feb 13, 2024 · 59088a9 · 59088a9
2 parents 7f146c0 + e9a829f
commit 59088a9
Show file tree

Hide file tree

Showing 22 changed files with 650 additions and 267 deletions.
diff --git a/apps/chat/src/components/Chat/Migration/Migration.tsx b/apps/chat/src/components/Chat/Migration/Migration.tsx
@@ -17,11 +17,12 @@ export const Migration = ({ total, uploaded }: Props) => {
   return (
     <div className="flex h-full flex-col items-center justify-center">
       <Spinner className="h-auto" size={60} />
-      <p className="mt-7 text-center text-2xl font-semibold md:text-3xl">
+      <h1 className="mt-7 text-2xl font-semibold md:text-3xl">
+        {t('Migration')}
+      </h1>
+      <p className="mt-7 text-center text-base md:text-xl">
         {uploaded} {t('out of')} {total} <br />
-        <span className="text-base md:text-xl">
-          {t('conversations and prompts are loaded')}
-        </span>
+        {t('conversations and prompts are loaded')}
       </p>
       <div className="my-7 h-[1px] w-[80px] bg-controls-disable"></div>
       <p className="text-base md:text-xl">

diff --git a/apps/chat/src/components/Chat/Migration/MigrationFailedModal.tsx b/apps/chat/src/components/Chat/Migration/MigrationFailedModal.tsx
@@ -46,19 +46,21 @@ const ItemsList = <T extends Conversation | Prompt>({
     setEntitiesToRetryIds(entitiesToRetryIds.filter((id) => id !== entityId));
   };
 
-  return failedMigratedEntities.length ? (
+  if (!failedMigratedEntities.length) return null;
+
+  return (
     <div className={classNames('mt-2', withPt && 'pt-2')}>
       <ul className="flex flex-col gap-0.5">
         {failedMigratedEntities.map((entity) => (
           <li
-            className="relative flex h-[30px] items-center justify-between rounded"
+            className="flex h-[30px] items-center justify-between rounded"
             key={entity.id}
           >
-            <div className="flex">
+            <div className="flex min-w-0">
               {getModelIcon(entity)}
-              <p className="ml-2">{entity.name}</p>
+              <p className="ml-2 truncate">{entity.name}</p>
             </div>
-            <div className="flex w-[100px] items-center justify-around">
+            <div className="flex min-w-[100px] items-center justify-around">
               <div
                 onClick={() => handleSelect(entity.id)}
                 className="relative flex size-[18px] group-hover/file-item:flex"
@@ -94,14 +96,48 @@ const ItemsList = <T extends Conversation | Prompt>({
         ))}
       </ul>
     </div>
-  ) : null;
+  );
 };
 
 interface Props {
   failedMigratedConversations: Conversation[];
   failedMigratedPrompts: Prompt[];
 }
 
+interface AllItemsCheckboxesProps {
+  isChecked: boolean;
+  isCheckIcon: boolean;
+  isMinusIcon: boolean;
+  onSelectHandler: () => void;
+}
+
+const AllItemsCheckboxes = ({
+  isChecked,
+  isCheckIcon,
+  isMinusIcon,
+  onSelectHandler,
+}: AllItemsCheckboxesProps) => {
+  const Icon = isCheckIcon ? IconCheck : isMinusIcon ? IconMinus : null;
+
+  return (
+    <div className="relative flex size-[18px] group-hover/file-item:flex">
+      <input
+        className="checkbox peer size-[18px] bg-transparent"
+        type="checkbox"
+        onClick={onSelectHandler}
+        readOnly
+        checked={isChecked}
+      />
+      {Icon && (
+        <Icon
+          size={18}
+          className="pointer-events-none invisible absolute text-accent-primary peer-checked:visible"
+        />
+      )}
+    </div>
+  );
+};
+
 export const MigrationFailedWindow = ({
   failedMigratedConversations,
   failedMigratedPrompts,
@@ -134,28 +170,14 @@ export const MigrationFailedWindow = ({
     setPromptsToRetryIds(failedMigratedPrompts.map((prompt) => prompt.id));
   }, [failedMigratedPrompts]);
 
-  const onSkipAll = useCallback(() => {
-    dispatch(
-      ConversationsActions.skipFailedMigratedConversations({
-        idsToMarkAsMigrated: failedMigratedConversations.map((conv) => conv.id),
-      }),
-    );
-    dispatch(
-      PromptsActions.skipFailedMigratedPrompts({
-        idsToMarkAsMigrated: failedMigratedPrompts.map((prompt) => prompt.id),
-      }),
-    );
-  }, [dispatch, failedMigratedConversations, failedMigratedPrompts]);
-
-  const onRetry = useCallback(() => {
+  const retryMigration = useCallback(() => {
     const failedMigratedConversationIds = failedMigratedConversations.map(
       (conv) => conv.id,
     );
     const failedMigratedPromptIds = failedMigratedPrompts.map(
       (conv) => conv.id,
     );
 
-    dispatch(ImportExportActions.exportLocalStorageEntities());
     dispatch(
       ConversationsActions.skipFailedMigratedConversations({
         idsToMarkAsMigrated: failedMigratedConversationIds.filter(
@@ -170,8 +192,9 @@ export const MigrationFailedWindow = ({
         ),
       }),
     );
-    dispatch(ConversationsActions.migrateConversations());
-    dispatch(PromptsActions.migratePrompts());
+
+    dispatch(ConversationsActions.migrateConversationsIfRequired());
+    dispatch(PromptsActions.migratePromptsIfRequired());
   }, [
     conversationsToRetryIds,
     dispatch,
@@ -180,6 +203,15 @@ export const MigrationFailedWindow = ({
     promptsToRetryIds,
   ]);
 
+  const onRetryWithoutBackup = useCallback(() => {
+    retryMigration();
+  }, [retryMigration]);
+
+  const onRetryWithBackup = useCallback(() => {
+    dispatch(ImportExportActions.exportLocalStorageEntities());
+    retryMigration();
+  }, [dispatch, retryMigration]);
+
   const onSelectAll = useCallback(() => {
     setConversationsToRetryIds(
       failedMigratedConversations.map((conv) => conv.id),
@@ -192,6 +224,15 @@ export const MigrationFailedWindow = ({
     setPromptsToRetryIds([]);
   };
 
+  const isAllItemsSelected =
+    conversationsToRetryIds.length + promptsToRetryIds.length ===
+    failedMigratedPrompts.length + failedMigratedConversations.length;
+  const isSomeItemsSelected =
+    !!conversationsToRetryIds.length || !!promptsToRetryIds.length;
+  const isNothingSelected =
+    conversationsToRetryIds.length === 0 &&
+    conversationsToRetryIds.length === 0;
+
   return (
     <div className="flex size-full flex-col items-center justify-center">
       <div className="m-2 flex max-w-[523px] flex-col divide-y divide-tertiary rounded bg-layer-2 pb-4 pt-6">
@@ -220,40 +261,19 @@ export const MigrationFailedWindow = ({
               <div className="flex items-center gap-1 py-1 text-xs">
                 {t('All items')}
               </div>
-              <div className="flex w-[100px] justify-around">
-                <div className="relative flex size-[18px] group-hover/file-item:flex">
-                  <input
-                    className="checkbox peer size-[18px] bg-transparent"
-                    type="checkbox"
-                    onClick={onUnselectAll}
-                    readOnly
-                    checked={
-                      conversationsToRetryIds.length !== 0 ||
-                      promptsToRetryIds.length !== 0
-                    }
-                  />
-                  <IconMinus
-                    size={18}
-                    className="pointer-events-none invisible absolute text-accent-primary peer-checked:visible"
-                  />
-                </div>
-                <div className="relative flex size-[18px] group-hover/file-item:flex">
-                  <input
-                    className="checkbox peer size-[18px] bg-transparent"
-                    type="checkbox"
-                    onClick={onSelectAll}
-                    readOnly
-                    checked={
-                      conversationsToRetryIds.length !==
-                        failedMigratedConversations.length ||
-                      promptsToRetryIds.length !== failedMigratedPrompts.length
-                    }
-                  />
-                  <IconMinus
-                    size={18}
-                    className="pointer-events-none invisible absolute text-accent-primary peer-checked:visible"
-                  />
-                </div>
+              <div className="flex w-[100px] items-center justify-around">
+                <AllItemsCheckboxes
+                  isChecked={isAllItemsSelected || isSomeItemsSelected}
+                  isCheckIcon={isAllItemsSelected}
+                  isMinusIcon={isSomeItemsSelected}
+                  onSelectHandler={onSelectAll}
+                />
+                <AllItemsCheckboxes
+                  isChecked={!isAllItemsSelected || isNothingSelected}
+                  isCheckIcon={isNothingSelected}
+                  isMinusIcon={!isAllItemsSelected}
+                  onSelectHandler={onUnselectAll}
+                />
               </div>
             </div>
           </div>
@@ -290,14 +310,14 @@ export const MigrationFailedWindow = ({
           <button
             className="button button-secondary mr-3 flex h-[38px] min-w-[73px] items-center"
             data-qa="skip-migration"
-            onClick={onSkipAll}
+            onClick={onRetryWithoutBackup}
           >
             {t('Continue without backup')}
           </button>
           <button
             className="button button-primary flex h-[38px] items-center"
             data-qa="try-migration-again"
-            onClick={onRetry}
+            onClick={onRetryWithBackup}
           >
             {t('Backup to disk and continue')}
           </button>

diff --git a/apps/chat/src/components/Chatbar/ChatbarSettings.tsx b/apps/chat/src/components/Chatbar/ChatbarSettings.tsx
@@ -14,7 +14,7 @@ import { constructPath } from '@/src/utils/app/file';
 import { ApiKeys } from '@/src/utils/server/api';
 
 import { FeatureType } from '@/src/types/common';
-import { SupportedExportFormats } from '@/src/types/importExport';
+import { SupportedExportFormats } from '@/src/types/import-export';
 import { DisplayMenuItemProps } from '@/src/types/menu';
 import { Translation } from '@/src/types/translation';
 

diff --git a/apps/chat/src/components/Chatbar/ImportExportLoader.tsx b/apps/chat/src/components/Chatbar/ImportExportLoader.tsx
@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 
 import { useTranslation } from 'next-i18next';
 
-import { Operation } from '@/src/types/importExport';
+import { Operation } from '@/src/types/import-export';
 import { Translation } from '@/src/types/translation';
 
 import { useAppDispatch, useAppSelector } from '@/src/store/hooks';

diff --git a/apps/chat/src/components/Promptbar/components/Prompt.tsx b/apps/chat/src/components/Promptbar/components/Prompt.tsx
@@ -198,7 +198,7 @@ export const PromptComponent = ({ item: prompt, level }: Props) => {
 
       dispatch(
         PromptsActions.exportPrompt({
-          promptId: prompt.id,
+          id: prompt.id,
         }),
       );
     },

diff --git a/apps/chat/src/components/Promptbar/components/PromptbarSettings.tsx b/apps/chat/src/components/Promptbar/components/PromptbarSettings.tsx
@@ -12,7 +12,7 @@ import { constructPath } from '@/src/utils/app/file';
 import { ApiKeys } from '@/src/utils/server/api';
 
 import { FeatureType } from '@/src/types/common';
-import { PromptsHistory } from '@/src/types/importExport';
+import { PromptsHistory } from '@/src/types/import-export';
 import { DisplayMenuItemProps } from '@/src/types/menu';
 import { Translation } from '@/src/types/translation';