feat(chat): add export and import with content(issue 568) (epam#630)

Co-authored-by: Irina_Kartun <[email protected]>
Co-authored-by: Mikita Butsko <[email protected]>

.ort.yml

@@ -11,6 +11,8 @@ license_choices:
   repository_license_choices:
     - given: 'GPL-2.0-only OR MIT'
       choice: 'MIT'
+    - given: 'GPL-3.0-or-later OR MIT'
+      choice: 'MIT'
 resolutions:
   rule_violations:
     - message: "No license information is available for dependency \

apps/chat-e2e/src/testData/conversationHistory/importConversation.ts

@@ -1,5 +1,5 @@
 import { Conversation } from '@/chat/types/chat';
-import { LatestExportFormat } from '@/chat/types/export';
+import { LatestExportFormat } from '@/chat/types/importExport';
 import { FolderConversation } from '@/src/testData';
 import { UploadDownloadData } from '@/src/ui/pages';
 import { FileUtil } from '@/src/utils/fileUtil';

apps/chat-e2e/src/testData/expectedConstants.ts

@@ -66,6 +66,8 @@ export enum MenuOptions {
   replay = 'Replay',
   playback = 'Playback',
   export = 'Export',
+  withAttachments = 'With attachments',
+  withoutAttachments = 'Without attachments',
   moveTo = 'Move to',
   share = 'Share',
   publish = 'Publish',
@@ -111,8 +113,8 @@ export const Import = {
   oldVersionAppFolderName: 'Version 1.x',
   oldVersionAppFolderChatName: '3-5 GPT math',
   v14AppBisonChatName: 'bison chat king',
-  v14AppImportedFilename: 'chatbot_ui_history_1-4_version.json',
-  v19AppImportedFilename: 'chatbot_ui_history_1-9_version.json',
+  v14AppImportedFilename: 'ai_dial_chat_history_1-4_version.json',
+  v19AppImportedFilename: 'ai_dial_chat_history_1-9_version.json',
   v14AppFolderPromptName: 'Version 1.4 A*B',
   oldVersionAppGpt35Message: '11 * 12 =',
 };

apps/chat-e2e/src/tests/chatExportImport.test.ts

@@ -80,8 +80,11 @@ test(
         conversationInFolder.folders.name,
         conversationInFolder.conversations[0].name,
       );
+      await conversationDropdownMenu.selectMenuOption(MenuOptions.export);
       exportedData = await dialHomePage.downloadData(() =>
-        conversationDropdownMenu.selectMenuOption(MenuOptions.export),
+        conversationDropdownMenu.selectMenuOption(
+          MenuOptions.withoutAttachments,
+        ),
       );
     });
 
@@ -526,8 +529,11 @@ test(
         nestedFolders[levelsCount].name,
         nestedConversations[levelsCount].name,
       );
+      await conversationDropdownMenu.selectMenuOption(MenuOptions.export);
       exportedData = await dialHomePage.downloadData(() =>
-        conversationDropdownMenu.selectMenuOption(MenuOptions.export),
+        conversationDropdownMenu.selectMenuOption(
+          MenuOptions.withoutAttachments,
+        ),
       );
     });
 
@@ -644,8 +650,12 @@ test('Import a chat in nested folder', async ({
         nestedFolders[i].name,
         nestedConversations[i].name,
       );
+      await conversationDropdownMenu.selectMenuOption(MenuOptions.export);
       const exportedData = await dialHomePage.downloadData(
-        () => conversationDropdownMenu.selectMenuOption(MenuOptions.export),
+        () =>
+          conversationDropdownMenu.selectMenuOption(
+            MenuOptions.withoutAttachments,
+          ),
         `${i}.json`,
       );
       exportedConversations.push(exportedData);
@@ -750,8 +760,9 @@ test('Import a chat from nested folder which was moved to another place', async
       nestedFolders[levelsCount].name,
       thirdLevelFolderConversation.name,
     );
+    await conversationDropdownMenu.selectMenuOption(MenuOptions.export);
     exportedData = await dialHomePage.downloadData(() =>
-      conversationDropdownMenu.selectMenuOption(MenuOptions.export),
+      conversationDropdownMenu.selectMenuOption(MenuOptions.withoutAttachments),
     );
   });
 

apps/chat/src/components/Chat/Addons.tsx

@@ -11,7 +11,7 @@ import { Translation } from '@/src/types/translation';
 import { AddonsSelectors } from '@/src/store/addons/addons.reducers';
 import { useAppSelector } from '@/src/store/hooks';
 
-import { ModelIcon } from '../Chatbar/components/ModelIcon';
+import { ModelIcon } from '../Chatbar/ModelIcon';
 
 import { EntityMarkdownDescription } from '../Common/MarkdownDescription';
 import Tooltip from '../Common/Tooltip';

apps/chat/src/components/Chat/AddonsDialog.tsx

@@ -19,8 +19,7 @@ import { Translation } from '@/src/types/translation';
 import { AddonsSelectors } from '@/src/store/addons/addons.reducers';
 import { useAppSelector } from '@/src/store/hooks';
 
-import { ModelIcon } from '../Chatbar/components/ModelIcon';
-
+import { ModelIcon } from '../Chatbar/ModelIcon';
 import { EntityMarkdownDescription } from '../Common/MarkdownDescription';
 import { NoResultsFound } from '../Common/NoResultsFound';
 

apps/chat/src/components/Chat/ChatCompareSelect.tsx

@@ -12,8 +12,7 @@ import { useAppSelector } from '@/src/store/hooks';
 import { ModelsSelectors } from '@/src/store/models/models.reducers';
 import { SettingsSelectors } from '@/src/store/settings/settings.reducers';
 
-import { ModelIcon } from '../Chatbar/components/ModelIcon';
-
+import { ModelIcon } from '../Chatbar/ModelIcon';
 import { Combobox } from '../Common/Combobox';
 import ShareIcon from '../Common/ShareIcon';
 

apps/chat/src/components/Chat/ChatHeader.tsx

@@ -24,9 +24,9 @@ import { useAppDispatch, useAppSelector } from '@/src/store/hooks';
 import { ModelsSelectors } from '@/src/store/models/models.reducers';
 import { UISelectors } from '@/src/store/ui/ui.reducers';
 
-import { ModelIcon } from '../Chatbar/components/ModelIcon';
 import { ConfirmDialog } from '@/src/components/Common/ConfirmDialog';
 
+import { ModelIcon } from '../Chatbar/ModelIcon';
 import Tooltip from '../Common/Tooltip';
 import { ChatInfoTooltip } from './ChatInfoTooltip';
 

apps/chat/src/components/Chat/ChatInfoTooltip.tsx

@@ -9,7 +9,7 @@ import { EntityType } from '@/src/types/common';
 import { OpenAIEntityAddon, OpenAIEntityModel } from '@/src/types/openai';
 import { Translation } from '@/src/types/translation';
 
-import { ModelIcon } from '../Chatbar/components/ModelIcon';
+import { ModelIcon } from '../Chatbar/ModelIcon';
 
 interface Props {
   model: OpenAIEntityModel | ConversationEntityModel;

apps/chat/src/components/Chat/ChatLoader.tsx

@@ -0,0 +1,29 @@
+import classNames from 'classnames';
+
+import { Spinner } from '../Common/Spinner';
+
+interface Props {
+  size?: number;
+  slow?: boolean;
+  containerClassName?: string;
+  loaderClassName?: string;
+  dataQa?: string;
+}
+
+export default function ChatLoader({
+  size = 45,
+  containerClassName,
+  loaderClassName,
+  dataQa = 'chat-loader',
+}: Props) {
+  return (
+    <div
+      className={classNames(
+        'flex w-full items-center justify-center',
+        containerClassName || 'h-full',
+      )}
+    >
+      <Spinner size={size} className={loaderClassName} dataQa={dataQa} />
+    </div>
+  );
+}

apps/chat/src/components/Chat/ChatMessage.tsx

@@ -39,9 +39,9 @@ import { ModelsSelectors } from '@/src/store/models/models.reducers';
 import { SettingsSelectors } from '@/src/store/settings/settings.reducers';
 import { UISelectors } from '@/src/store/ui/ui.reducers';
 
-import { ModelIcon } from '../Chatbar/components/ModelIcon';
 import Tooltip from '@/src/components/Common/Tooltip';
 
+import { ModelIcon } from '../Chatbar/ModelIcon';
 import { ConfirmDialog } from '../Common/ConfirmDialog';
 import { ErrorMessage } from '../Common/ErrorMessage';
 import { AttachButton } from '../Files/AttachButton';

apps/chat/src/components/Chat/ConversationSettings.tsx

@@ -14,8 +14,7 @@ import { ModelsSelectors } from '@/src/store/models/models.reducers';
 
 import { DEFAULT_ASSISTANT_SUBMODEL } from '@/src/constants/default-settings';
 
-import { ModelIcon } from '../Chatbar/components/ModelIcon';
-
+import { ModelIcon } from '../Chatbar/ModelIcon';
 import { Addons } from './Addons';
 import { AssistantSubModelSelector } from './AssistantSubModelSelector';
 import { ConversationSettingsModel } from './ConversationSettingsModels';

apps/chat/src/components/Chat/ConversationSettingsModels.tsx

@@ -14,8 +14,7 @@ import { Translation } from '@/src/types/translation';
 import { useAppSelector } from '@/src/store/hooks';
 import { ModelsSelectors } from '@/src/store/models/models.reducers';
 
-import { ModelIcon } from '../Chatbar/components/ModelIcon';
-
+import { ModelIcon } from '../Chatbar/ModelIcon';
 import { EntityMarkdownDescription } from '../Common/MarkdownDescription';
 import { ModelsDialog } from './ModelsDialog';
 import { ReplayAsIsButton } from './ReplayAsIsButton';

apps/chat/src/components/Chat/MessageStage.tsx

@@ -9,7 +9,7 @@ import { OpenAIEntityAddon } from '@/src/types/openai';
 import { AddonsSelectors } from '@/src/store/addons/addons.reducers';
 import { useAppSelector } from '@/src/store/hooks';
 
-import { ModelIcon } from '@/src/components/Chatbar/components/ModelIcon';
+import { ModelIcon } from '@/src/components/Chatbar/ModelIcon';
 
 import ChevronDown from '../../../public/images/icons/chevron-down.svg';
 import CircleCheck from '../../../public/images/icons/circle-check.svg';

apps/chat/src/components/Chat/ModelDescription.tsx

@@ -3,8 +3,7 @@ import { useTranslation } from 'next-i18next';
 import { OpenAIEntityModel } from '@/src/types/openai';
 import { Translation } from '@/src/types/translation';
 
-import { ModelIcon } from '../Chatbar/components/ModelIcon';
-
+import { ModelIcon } from '../Chatbar/ModelIcon';
 import { EntityMarkdownDescription } from '../Common/MarkdownDescription';
 
 interface Props {

apps/chat/src/components/Chat/ModelsDialog.tsx

@@ -23,8 +23,7 @@ import {
   ModelsSelectors,
 } from '@/src/store/models/models.reducers';
 
-import { ModelIcon } from '../Chatbar/components/ModelIcon';
-
+import { ModelIcon } from '../Chatbar/ModelIcon';
 import { EntityMarkdownDescription } from '../Common/MarkdownDescription';
 import { NoResultsFound } from '../Common/NoResultsFound';
 

apps/chat/src/components/Chatbar/components/ChatFolders.tsx → apps/chat/src/components/Chatbar/ChatFolders.tsx

@@ -30,8 +30,8 @@ import {
 
 import Folder from '@/src/components/Folder/Folder';
 
-import CollapsableSection from '../../Common/CollapsableSection';
-import { BetweenFoldersLine } from '../../Sidebar/BetweenFoldersLine';
+import CollapsableSection from '../Common/CollapsableSection';
+import { BetweenFoldersLine } from '../Sidebar/BetweenFoldersLine';
 import { ConversationComponent } from './Conversation';
 
 interface ChatFolderProps {

apps/chat/src/components/Chatbar/Chatbar.tsx

@@ -18,12 +18,11 @@ import { UISelectors } from '@/src/store/ui/ui.reducers';
 
 import { DEFAULT_CONVERSATION_NAME } from '@/src/constants/default-settings';
 
-import { ChatFolders } from './components/ChatFolders';
-import { ChatbarSettings } from './components/ChatbarSettings';
-import { Conversations } from './components/Conversations';
-
 import PlusIcon from '../../../public/images/icons/plus-large.svg';
 import Sidebar from '../Sidebar';
+import { ChatFolders } from './ChatFolders';
+import { ChatbarSettings } from './ChatbarSettings';
+import { Conversations } from './Conversations';
 
 const ChatActionsBlock = () => {
   const { t } = useTranslation(Translation.SideBar);

apps/chat/src/components/Chatbar/components/ChatbarSettings.tsx → apps/chat/src/components/Chatbar/ChatbarSettings.tsx

@@ -10,7 +10,7 @@ import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'next-i18next';
 
 import { FeatureType } from '@/src/types/common';
-import { SupportedExportFormats } from '@/src/types/export';
+import { SupportedExportFormats } from '@/src/types/importExport';
 import { DisplayMenuItemProps } from '@/src/types/menu';
 import { Translation } from '@/src/types/translation';
 
@@ -19,6 +19,7 @@ import {
   ConversationsSelectors,
 } from '@/src/store/conversations/conversations.reducers';
 import { useAppDispatch, useAppSelector } from '@/src/store/hooks';
+import { ImportExportActions } from '@/src/store/import-export/importExport.reducers';
 import { SettingsSelectors } from '@/src/store/settings/settings.reducers';
 
 import { DEFAULT_CONVERSATION_NAME } from '@/src/constants/default-settings';
@@ -57,6 +58,24 @@ export const ChatbarSettings = () => {
     );
   }, [dispatch]);
 
+  const jsonImportHandler = useCallback(
+    (jsonContent: SupportedExportFormats) => {
+      dispatch(
+        ImportExportActions.importConversations({
+          data: jsonContent as SupportedExportFormats,
+        }),
+      );
+    },
+    [dispatch],
+  );
+
+  const zipImportHandler = useCallback(
+    (zipFile: File) => {
+      dispatch(ImportExportActions.importZipConversations({ zipFile }));
+    },
+    [dispatch],
+  );
+
   const menuItems: DisplayMenuItemProps[] = useMemo(
     () => [
       {
@@ -69,23 +88,27 @@ export const ChatbarSettings = () => {
       },
       {
         name: t('Import conversations'),
-        onClick: (importJSON: unknown) => {
-          dispatch(
-            ConversationsActions.importConversations({
-              data: importJSON as SupportedExportFormats,
-            }),
-          );
+        onClick: (importArgs: unknown) => {
+          const typedArgs = importArgs as { content: unknown; zip?: boolean };
+
+          if (!typedArgs.zip) {
+            jsonImportHandler(typedArgs.content as SupportedExportFormats);
+          }
+          if (typedArgs.zip) {
+            zipImportHandler(typedArgs.content as File);
+          }
         },
         Icon: IconFileArrowLeft,
         dataQa: 'import',
         CustomTriggerRenderer: Import,
       },
       {
-        name: t('Export conversations'),
+        name: t('Export conversations without attachments'),
         dataQa: 'export',
+        className: 'max-w-[158px]',
         Icon: IconFileArrowRight,
         onClick: () => {
-          dispatch(ConversationsActions.exportConversations());
+          dispatch(ImportExportActions.exportConversations());
         },
       },
       {
@@ -116,7 +139,15 @@ export const ChatbarSettings = () => {
         },
       },
     ],
-    [dispatch, enabledFeatures, handleToggleCompare, isStreaming, t],
+    [
+      dispatch,
+      enabledFeatures,
+      handleToggleCompare,
+      isStreaming,
+      t,
+      jsonImportHandler,
+      zipImportHandler,
+    ],
   );
 
   return (