Merge branch 'development' into feat/3052-from-edit-to-move-endpoint

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

@@ -250,6 +250,7 @@ export enum MenuOptions {
   attachLink = 'Attach link',
   select = 'Select',
   view = 'View',
+  use = 'Use',
 }
 
 export enum FilterMenuOptions {

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

@@ -301,6 +301,7 @@ dialTest(
     expect
       .soft(menuOptions, ExpectedMessages.contextMenuOptionsValid)
       .toEqual([
+        MenuOptions.use,
         MenuOptions.select,
         MenuOptions.edit,
         MenuOptions.duplicate,

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

@@ -17,6 +17,8 @@ import { clearStateForMessages } from '@/src/utils/app/clear-messages-state';
 import {
   excludeSystemMessages,
   getConversationModelParams,
+  isReplayAsIsConversation,
+  isReplayConversation,
 } from '@/src/utils/app/conversation';
 import { isConversationWithFormSchema } from '@/src/utils/app/form-schema';
 import { isSmallScreen } from '@/src/utils/app/mobile';
@@ -170,11 +172,10 @@ export const ChatView = memo(() => {
       (models.length === 0 ||
         selectedConversations.some((conv) => {
           if (
-            conv.replay &&
-            conv.replay.isReplay &&
-            conv.replay.replayAsIs &&
-            conv.replay.replayUserMessagesStack &&
-            conv.replay.replayUserMessagesStack[0].model
+            isReplayConversation(conv) &&
+            isReplayAsIsConversation(conv) &&
+            conv.replay?.replayUserMessagesStack &&
+            conv.replay?.replayUserMessagesStack[0].model
           ) {
             return conv.replay.replayUserMessagesStack.some(
               (message) =>

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

@@ -2,7 +2,7 @@ import { useTranslation } from '@/src/hooks/useTranslation';
 
 import { Translation } from '@/src/types/translation';
 
-import Rotate from '../../../public/images/icons/rotate.svg';
+import Rotate from '@/public/images/icons/rotate.svg';
 
 export const ChatCompareRotate = () => {
   const { t } = useTranslation(Translation.Chat);

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

@@ -16,6 +16,7 @@ import { isEntityNameOrPathInvalid } from '@/src/utils/app/common';
 import {
   getSelectedAddons,
   getValidEntitiesFromIds,
+  isReplayAsIsConversation,
 } from '@/src/utils/app/conversation';
 import {
   doesModelAllowAddons,
@@ -180,7 +181,7 @@ export const ChatHeader = Inversify.register(
 
     const disallowChangeAgent = isChangeAgentDisallowed || isExternal;
     const disallowChangeSettings =
-      conversation.replay?.replayAsIs || isPlayback || isExternal;
+      isReplayAsIsConversation(conversation) || isPlayback || isExternal;
 
     return (
       <>

apps/chat/src/components/Chat/ChatInput/ChatControls.tsx

@@ -17,7 +17,7 @@ import { SettingsSelectors } from '@/src/store/settings/settings.reducers';
 import { SendMessageButton } from '@/src/components/Chat/ChatInput/SendMessageButton';
 import Tooltip from '@/src/components/Common/Tooltip';
 
-import RefreshCW from '../../../../public/images/icons/refresh-cw.svg';
+import RefreshCW from '@/public/images/icons/refresh-cw.svg';
 
 interface Props {
   showReplayControls: boolean;

apps/chat/src/components/Chat/ChatInput/ChatInputFooter.tsx

@@ -1,9 +1,17 @@
+import { ScreenState } from '@/src/types/common';
+
 import { FooterMessage } from '../../Common/FooterMessage';
+import { withRenderForScreen } from '../../Common/ScreenRender';
 
-export const ChatInputFooter = () => {
+function ChatInputFooterView() {
   return (
     <div className="p-5 max-md:hidden">
       <FooterMessage />
     </div>
   );
-};
+}
+
+export const ChatInputFooter = withRenderForScreen([
+  ScreenState.TABLET,
+  ScreenState.DESKTOP,
+])(ChatInputFooterView);

apps/chat/src/components/Chat/ChatInput/ChatInputMessage.tsx

@@ -138,21 +138,15 @@ export const ChatInputMessage = Inversify.register(
       ConversationsSelectors.selectSelectedConversationsModels,
     );
 
-    const isConversationBlocksInput = useAppSelector(
+    const isChatInputDisabled = useAppSelector(
       ConversationsSelectors.selectIsSelectedConversationBlocksInput,
     );
-    const isConfigurationBlocksInput = useAppSelector(
-      ChatSelectors.selectIsConfigurationBlocksInput,
-    );
     const configurationSchema = useAppSelector(
       ChatSelectors.selectConfigurationSchema,
     );
 
     const isChatEmpty = !selectedConversations[0]?.messages?.length;
 
-    const isChatInputDisabled =
-      isConversationBlocksInput || (isConfigurationBlocksInput && isChatEmpty);
-
     const modelTokenizer =
       selectedModels?.length === 1 ? selectedModels[0]?.tokenizer : undefined;
     const maxTokensLength =

apps/chat/src/components/Chat/ChatInput/PromptVariablesForApplyDialog.tsx

@@ -0,0 +1,42 @@
+import { useCallback } from 'react';
+
+import { ChatActions } from '@/src/store/chat/chat.reducer';
+import { useAppDispatch, useAppSelector } from '@/src/store/hooks';
+import {
+  PromptsActions,
+  PromptsSelectors,
+} from '@/src/store/prompts/prompts.reducers';
+
+import { withRenderWhen } from '../../Common/RenderWhen';
+import { PromptVariablesDialog } from './PromptVariablesDialog';
+
+function PromptVariablesForApplyDialogView() {
+  const dispatch = useAppDispatch();
+
+  const prompt = useAppSelector(
+    PromptsSelectors.selectPromptWithVariablesForApply,
+  );
+
+  const handleClose = useCallback(() => {
+    dispatch(PromptsActions.setPromptWithVariablesForApply());
+  }, [dispatch]);
+
+  const handleSubmit = useCallback(
+    (updatedContent: string) => {
+      dispatch(ChatActions.appendInputContent(updatedContent));
+      handleClose();
+    },
+    [dispatch, handleClose],
+  );
+  return (
+    <PromptVariablesDialog
+      prompt={prompt!}
+      onClose={handleClose}
+      onSubmit={handleSubmit}
+    />
+  );
+}
+
+export const PromptVariablesForApplyDialog = withRenderWhen(
+  PromptsSelectors.selectPromptWithVariablesForApply,
+)(PromptVariablesForApplyDialogView);

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

@@ -5,6 +5,7 @@ import classNames from 'classnames';
 import { useTranslation } from '@/src/hooks/useTranslation';
 
 import { isEntityNameOrPathInvalid } from '@/src/utils/app/common';
+import { isPlaybackConversation } from '@/src/utils/app/conversation';
 
 import { Conversation } from '@/src/types/chat';
 import { Translation } from '@/src/types/translation';
@@ -83,7 +84,7 @@ export const AssistantMessage = memo(function AssistantMessage({
           )}
         {!(
           conversation.isMessageStreaming &&
-          conversation.playback?.isPlayback &&
+          isPlaybackConversation(conversation) &&
           isLastMessage
         ) && (
           <MessageAttachments

apps/chat/src/components/Chat/MainModalManager.jsx → apps/chat/src/components/Chat/ChatModalsManager.jsx

@@ -1,15 +1,19 @@
 import { ReplaceConfirmationModal } from '../Common/ReplaceConfirmationModal/ReplaceConfirmationModal';
 import { UnshareDialog } from '../Common/UnshareDialog';
+import { UserMobile } from '../Header/User/UserMobile';
+import { PromptVariablesForApplyDialog } from './ChatInput/PromptVariablesForApplyDialog';
 import { RenameConversationModal } from './RenameConversationModal';
 import { ShareModal } from './ShareModal';
 
-export const MainModalManager = () => {
+export function ChatModalsManager() {
   return (
     <>
+      <UserMobile />
       <ShareModal />
       <UnshareDialog />
       <ReplaceConfirmationModal />
       <RenameConversationModal />
+      <PromptVariablesForApplyDialog />
     </>
   );
-};
+}

apps/chat/src/components/Chat/ChatSettings/ChatSettingsModal.tsx

@@ -17,6 +17,7 @@ import { ModelsSelectors } from '@/src/store/models/models.reducers';
 import { PromptsSelectors } from '@/src/store/prompts/prompts.reducers';
 
 import { FALLBACK_ASSISTANT_SUBMODEL_ID } from '@/src/constants/default-ui-settings';
+import { MOUSE_OUTSIDE_PRESS_EVENT } from '@/src/constants/modal';
 
 import { Modal } from '@/src/components/Common/Modal';
 
@@ -165,7 +166,7 @@ export const ChatSettings = ({
         isCompareMode ? 'md:max-w-[1000px]' : 'md:max-w-[500px]',
         isSomethingConfigurable ? 'py-3 md:py-4' : 'pt-3 md:pt-4',
       )}
-      dismissProps={{ outsidePressEvent: 'mousedown' }}
+      dismissProps={MOUSE_OUTSIDE_PRESS_EVENT}
     >
       <div className="mb-3 !border-t-0 px-3 text-base font-semibold md:px-6">
         {t('Conversation settings')}

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

@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 
 import { useTranslation } from '@/src/hooks/useTranslation';
 
+import { isPlaybackConversation } from '@/src/utils/app/conversation';
 import { DefaultsService } from '@/src/utils/app/data/defaults-service';
 import {
   doesModelAllowAddons,
@@ -97,7 +98,7 @@ export const ConversationSettings = Inversify.register(
     const modelsMap = useAppSelector(ModelsSelectors.selectModelsMap);
 
     const model = modelsMap[conversation.model.id];
-    const isPlayback = !!conversation.playback?.isPlayback;
+    const isPlayback = isPlaybackConversation(conversation);
 
     if (!model) {
       return (

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

@@ -11,6 +11,10 @@ import { useScreenState } from '@/src/hooks/useScreenState';
 import { useTranslation } from '@/src/hooks/useTranslation';
 
 import { isEntityNameOnSameLevelUnique } from '@/src/utils/app/common';
+import {
+  isPlaybackConversation,
+  isReplayConversation,
+} from '@/src/utils/app/conversation';
 import { constructPath } from '@/src/utils/app/file';
 import { getNextDefaultName } from '@/src/utils/app/folders';
 import {
@@ -133,8 +137,8 @@ export const ConversationContextMenu = ({
     }
   }, [conversation.id, conversation.status, dispatch, isOpen]);
 
-  const isReplay = (conversation as Conversation).replay?.isReplay;
-  const isPlayback = (conversation as Conversation).playback?.isPlayback;
+  const isReplay = isReplayConversation(conversation);
+  const isPlayback = isPlaybackConversation(conversation);
   const isEmptyConversation = !(
     (conversation as Conversation).messages?.length > 0
   );

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

@@ -9,6 +9,8 @@ import { getModelDescription } from '@/src/utils/app/application';
 import {
   getOpenAIEntityFullName,
   isOldConversationReplay,
+  isPlaybackConversation,
+  isReplayAsIsConversation,
 } from '@/src/utils/app/conversation';
 import { isEntityIdExternal } from '@/src/utils/app/id';
 
@@ -42,11 +44,11 @@ const getModelName = (
   conversation: Conversation,
   model: DialAIEntityModel | undefined,
 ) => {
-  if (conversation.playback?.isPlayback) {
+  if (isPlaybackConversation(conversation)) {
     return 'Playback';
   }
 
-  if (conversation.replay?.replayAsIs) {
+  if (isReplayAsIsConversation(conversation)) {
     return 'Replay as is';
   }
 
@@ -119,8 +121,8 @@ const EmptyChatDescriptionView = ({
     );
   }
 
-  const isReplayAsIs = conversation.replay?.replayAsIs;
-  const isPlayback = conversation.playback?.isPlayback;
+  const isReplayAsIs = isReplayAsIsConversation(conversation);
+  const isPlayback = isPlaybackConversation(conversation);
   const isEmptyChatChangeAgentHidden = enabledFeatures.has(
     Feature.HideEmptyChatChangeAgent,
   );

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

@@ -28,12 +28,12 @@ import { FOLDER_ATTACHMENT_CONTENT_TYPE } from '@/src/constants/folders';
 import { Spinner } from '@/src/components/Common/Spinner';
 import { PlotlyComponent } from '@/src/components/Plotly/Plotly';
 
-import LinkIcon from '../../../public/images/icons/arrow-up-right-from-square.svg';
-import ChevronDown from '../../../public/images/icons/chevron-down.svg';
 import Tooltip from '../Common/Tooltip';
 import ChatMDComponent from '../Markdown/ChatMDComponent';
 import { VisualizerRenderer } from '../VisualalizerRenderer/VisualizerRenderer';
 
+import LinkIcon from '@/public/images/icons/arrow-up-right-from-square.svg';
+import ChevronDown from '@/public/images/icons/chevron-down.svg';
 import { Attachment, MIMEType } from '@epam/ai-dial-shared';
 import { sanitize } from 'isomorphic-dompurify';
 

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

@@ -6,9 +6,9 @@ import { useTranslation } from '@/src/hooks/useTranslation';
 
 import { Translation } from '@/src/types/translation';
 
-import ChevronDown from '../../../public/images/icons/chevron-down.svg';
 import { MessageAttachment } from './MessageAttachment';
 
+import ChevronDown from '@/public/images/icons/chevron-down.svg';
 import { Attachment } from '@epam/ai-dial-shared';
 
 interface Props {

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

@@ -10,12 +10,12 @@ import { useAppSelector } from '@/src/store/hooks';
 
 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';
 import { Spinner } from '../Common/Spinner';
 import ChatMDComponent from '../Markdown/ChatMDComponent';
 import { MessageAttachments } from './MessageAttachments';
 
+import ChevronDown from '@/public/images/icons/chevron-down.svg';
+import CircleCheck from '@/public/images/icons/circle-check.svg';
 import { Stage } from '@epam/ai-dial-shared';
 
 interface StageTitleProps {

apps/chat/src/components/Chat/Migration/MigrationFailedModal.tsx

@@ -451,15 +451,15 @@ export const MigrationFailedWindow = ({
           {t('contact us.')}
         </button>
       </p>
-      {enabledFeatures.has(Feature.ReportAnIssue) && (
-        <ReportIssueDialog
-          isOpen={isReportIssueDialogOpen}
-          onClose={() => {
-            setIsReportIssueDialogOpen(false);
-            router.replace(router.basePath);
-          }}
-        />
-      )}
+      {enabledFeatures.has(Feature.ReportAnIssue) &&
+        isReportIssueDialogOpen && (
+          <ReportIssueDialog
+            onClose={() => {
+              setIsReportIssueDialogOpen(false);
+              router.replace(router.basePath);
+            }}
+          />
+        )}
     </div>
   );
 };

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

@@ -29,17 +29,9 @@ import { UIActions } from '@/src/store/ui/ui.reducers';
 import { DISALLOW_INTERACTIONS } from '@/src/constants/modal';
 
 import { Modal } from '../Common/Modal';
+import { withRenderWhen } from '../Common/RenderWhen';
 
-export const RenameConversationModal = () => {
-  const renamingConversation = useAppSelector(
-    ConversationsSelectors.selectRenamingConversation,
-  );
-  if (renamingConversation) {
-    return <RenameConversationView />;
-  }
-};
-
-const RenameConversationView = () => {
+function RenameConversationView() {
   const { t } = useTranslation(Translation.Chat);
 
   const dispatch = useAppDispatch();
@@ -185,4 +177,8 @@ const RenameConversationView = () => {
       </div>
     </Modal>
   );
-};
+}
+
+export const RenameConversationModal = withRenderWhen(
+  ConversationsSelectors.selectRenamingConversation,
+)(RenameConversationView);