fix: replay as is stops working (#69)

* fix: forbade to send 'custom content' to the 'model'

* fix: added selected addons to the restriction for the custom_content.state

* fix: clear message state when settings have been changed

* added model selector to select model by id

* fix: created additional check for the model selector

src/components/Chat/Chat.tsx

@@ -2,6 +2,7 @@ import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { useTranslation } from 'next-i18next';
 
+import { clearStateForMessages } from '@/src/utils/app/clear-messages-state';
 import { throttle } from '@/src/utils/data/throttle';
 
 import { OpenAIEntityModel, OpenAIEntityModelID } from '../../types/openai';
@@ -47,16 +48,6 @@ import { PlaybackEmptyInfo } from './PlaybackEmptyInfo';
 
 const scrollThrottlingTimeout = 250;
 
-const clearStateForMessages = (messages: Message[]): Message[] => {
-  return messages.map((message) => ({
-    ...message,
-    custom_content: {
-      ...message.custom_content,
-      state: undefined,
-    },
-  }));
-};
-
 export const Chat = memo(() => {
   const { t } = useTranslation('chat');
 

src/store/conversations/conversations.epics.ts

@@ -33,7 +33,9 @@ import { AnyAction } from '@reduxjs/toolkit';
 import { combineEpics } from 'redux-observable';
 
 import { cleanConversationHistory } from '@/src/utils/app/clean';
+import { clearStateForMessages } from '@/src/utils/app/clear-messages-state';
 import {
+  isSettingsChanged,
   saveConversations,
   saveSelectedConversationIds,
 } from '@/src/utils/app/conversation';
@@ -54,6 +56,7 @@ import {
   ChatBody,
   Conversation,
   Message,
+  MessageSettings,
   Playback,
   RateBody,
 } from '@/src/types/chat';
@@ -572,6 +575,7 @@ const streamMessageEpic: AppEpic = (action$, state$) =>
           selectedAddons,
         };
       }
+
       const chatBody: ChatBody = {
         modelId: payload.conversation.model.id,
         messages: payload.conversation.messages
@@ -931,28 +935,49 @@ const replayConversationEpic: AppEpic = (action$, state$) =>
         );
       }
       const activeMessage = messagesStack[conv.replay.activeReplayIndex];
-      const { prompt, temperature, selectedAddons, assistantModelId } =
-        activeMessage.settings ? activeMessage.settings : conv;
-      const convWithNewSettings: Conversation =
-        !conv.replay.replayAsIs || !activeMessage.model
-          ? conv
-          : {
-              ...conv,
-              replay: {
-                ...conv.replay,
-                isError: false,
-              },
-              model: { ...conv.model, ...activeMessage.model },
-              prompt: prompt,
-              temperature: temperature,
-              selectedAddons: selectedAddons,
-              assistantModelId: assistantModelId,
-            };
+      let updatedConversation: Conversation = conv;
+
+      if (
+        conv.replay.replayAsIs &&
+        activeMessage.model &&
+        activeMessage.model.id
+      ) {
+        const { prompt, temperature, selectedAddons, assistantModelId } =
+          activeMessage.settings ? activeMessage.settings : conv;
+
+        const newConversationSettings: MessageSettings = {
+          prompt,
+          temperature,
+          selectedAddons,
+          assistantModelId,
+        };
+
+        const model =
+          ModelsSelectors.selectModel(state$.value, activeMessage.model.id) ??
+          conv.model;
+
+        const messages =
+          conv.model.id !== model.id ||
+          isSettingsChanged(conv, newConversationSettings)
+            ? clearStateForMessages(conv.messages)
+            : conv.messages;
+
+        updatedConversation = {
+          ...conv,
+          model: model,
+          messages,
+          replay: {
+            ...conv.replay,
+            isError: false,
+          },
+          ...newConversationSettings,
+        };
+      }
 
       return concat(
         of(
           ConversationsActions.sendMessage({
-            conversation: convWithNewSettings,
+            conversation: updatedConversation,
             deleteCount: payload.isRestart
               ? (conversation?.messages.length &&
                   (conversation.messages[conversation.messages.length - 1]
@@ -961,7 +986,7 @@ const replayConversationEpic: AppEpic = (action$, state$) =>
                     : 1)) ||
                 0
               : 0,
-            activeReplayIndex: convWithNewSettings.replay.activeReplayIndex,
+            activeReplayIndex: updatedConversation.replay.activeReplayIndex,
             message: activeMessage,
           }),
         ),

src/store/models/models.reducers.ts

@@ -103,21 +103,34 @@ const rootSelector = (state: RootState): ModelsState => state.models;
 const selectModelsIsLoading = createSelector([rootSelector], (state) => {
   return state.isLoading;
 });
+
 const selectModelsError = createSelector([rootSelector], (state) => {
   return state.error;
 });
+
 const selectModels = createSelector([rootSelector], (state) => {
   return state.models;
 });
+
 const selectModelsMap = createSelector([rootSelector], (state) => {
   return state.modelsMap;
 });
+
+const selectModel = createSelector(
+  [selectModelsMap, (_state, modelId: string) => modelId],
+  (modelsMap, modelId) => {
+    return modelsMap[modelId];
+  },
+);
+
 const selectDefaultModelId = createSelector([rootSelector], (state) => {
   return state.defaultModelId;
 });
+
 const selectRecentModelsIds = createSelector([rootSelector], (state) => {
   return state.recentModelsIds;
 });
+
 const selectRecentModels = createSelector(
   [selectRecentModelsIds, selectModelsMap],
   (recentModelsIds, modelsMap) => {
@@ -133,6 +146,7 @@ export const ModelsSelectors = {
   selectDefaultModelId,
   selectRecentModelsIds,
   selectRecentModels,
+  selectModel,
 };
 
 export const ModelsActions = modelsSlice.actions;

src/utils/app/clear-messages-state.ts

@@ -0,0 +1,11 @@
+import { Message } from '@/src/types/chat';
+
+export const clearStateForMessages = (messages: Message[]): Message[] => {
+  return messages.map((message) => ({
+    ...message,
+    custom_content: {
+      ...message.custom_content,
+      state: undefined,
+    },
+  }));
+};

src/utils/app/conversation.ts

@@ -1,6 +1,6 @@
 import toast from 'react-hot-toast';
 
-import { Conversation } from '@/src/types/chat';
+import { Conversation, MessageSettings } from '@/src/types/chat';
 import {
   OpenAIEntityAddon,
   OpenAIEntityApplicationType,
@@ -72,3 +72,34 @@ export const getSelectedAddons = (
   }
   return null;
 };
+
+export const isSettingsChanged = (
+  conversation: Conversation,
+  newSettings: MessageSettings,
+) => {
+  const isChanged = Object.keys(newSettings).some((key) => {
+    const convSetting = conversation[key as keyof Conversation];
+    const newSetting = newSettings[key as keyof MessageSettings];
+
+    if (Array.isArray(convSetting) && Array.isArray(newSetting)) {
+      if (convSetting.length !== newSetting.length) {
+        return true;
+      }
+
+      const sortedConvSetting = [...convSetting].sort();
+      const sortedNewSetting = [...newSetting].sort();
+
+      const isArraysEqual: boolean = sortedConvSetting.every(
+        (value, index) => value === sortedNewSetting[index],
+      );
+      return !isArraysEqual;
+    }
+
+    return (
+      conversation[key as keyof Conversation] !==
+      newSettings[key as keyof MessageSettings]
+    );
+  });
+
+  return isChanged;
+};