[frontend] solve the problem of abnormal display when clicking to stop the conversation. (#497)

Co-authored-by: wuayee <[email protected]>

Author: RonnyChan96

frontend/src/pages/chatPreview/index.tsx

@@ -61,6 +61,8 @@ import CheckGroup from './components/check-group';
 import Inspiration from './components/inspiration';
 import PreviewPicture from './components/receive-box/preview-picture';
 import './styles/chat-preview.scss';
+import store from '@/store/store';
+import {setIsCurrentAnswer} from "@/store/chatStore/chatStore";
 
 /**
  * 应用聊天对话页面
@@ -92,6 +94,7 @@ const ChatPreview = (props) => {
   const isDebug = useAppSelector((state) => state.commonStore.isDebug);
   const isGuest = useAppSelector((state) => state.appStore.isGuest);
   const currentAnswer = useAppSelector((state) => state.chatCommonStore.currentAnswer);
+  const isCurrentAnswer = useAppSelector((state) => state.chatCommonStore.isCurrentAnswer);
   const { showElsa } = useContext(AippContext);
   const [checkedList, setCheckedList] = useState([]);
   const [loading, setLoading] = useState(false);
@@ -586,6 +589,7 @@ const ChatPreview = (props) => {
       let { content } = currentChatItem;
       str = content + msg;
       item.content = str;
+      store.dispatch(setIsCurrentAnswer(true));
       if (status === 'ARCHIVED') {
         item.finished = true;
       }
@@ -646,8 +650,8 @@ const ChatPreview = (props) => {
   // 终止进行中的对话
   async function chatRunningStop(params) {
     let terminateParams: any = {};
-    terminateParams.content = params.content ? params.content : currentAnswer ? currentAnswer :
-      t('conversationTerminated');
+    terminateParams.content = params.content ? params.content : currentAnswer ?
+    parseCurrentAnswer(currentAnswer) : t('conversationTerminated');
     if (params.logId) {
       terminateParams.logId = params.logId;
     }
@@ -671,6 +675,14 @@ const ChatPreview = (props) => {
     }
   }
 
+  function parseCurrentAnswer(currentAnswer) {
+    if (currentAnswer && currentAnswer.props && currentAnswer.props.dangerouslySetInnerHTML
+      && isCurrentAnswer == true) {
+      store.dispatch(setIsCurrentAnswer(false));
+      return currentAnswer.props.dangerouslySetInnerHTML.__html;
+    }
+  }
+
   // 表单重新对话
   function questionClarConfirm(params, instanceId) {
     queryInstance(params, 'clar', instanceId);

frontend/src/store/chatStore/action-types.ts

@@ -14,3 +14,4 @@ export const SET_READ_ONLY = 'SET_READ_ONLY';
 export const SET_NO_AUTH = 'SET_NO_AUTH';
 export const SET_PLUGIN_LIST = 'SET_PLUGIN_LIST';
 export const SET_CURRENT_ANSWER = 'SET_CURRENT_ANSWER';
+export const SET_IS_CURRENT_ANSWER = 'SET_IS_CURRENT_ANSWER';

frontend/src/store/chatStore/chatStore.ts

@@ -14,7 +14,10 @@ import {
   SET_NO_AUTH,
   SET_USER_ROLE,
   SET_PLUGIN_LIST,
-  SET_CURRENT_ANSWER
+  SET_CURRENT_ANSWER,
+  SET_KNOWLEDGE_CONFIG,
+  SET_SHOW_CHAT_HISTORY,
+  SET_IS_CURRENT_ANSWER
 } from './action-types';
 
 export const setChatId = (item) => {
@@ -65,3 +68,12 @@ export const setPluginList = (item) => {
 export const setCurrentAnswer = (item) => {
   return { type: SET_CURRENT_ANSWER, payload: item }
 }
+export const setIsCurrentAnswer = (item) => {
+  return { type: SET_IS_CURRENT_ANSWER, payload: item }
+}
+export const setKnowledgeConfig = (item) => {
+  return { type: SET_KNOWLEDGE_CONFIG, payload: item }
+}
+export const setShowChatHistory = (item) => {
+  return { type: SET_SHOW_CHAT_HISTORY, payload: item }
+}

frontend/src/store/chatStore/reducer.ts

@@ -14,7 +14,10 @@ import {
   SET_READ_ONLY,
   SET_NO_AUTH,
   SET_PLUGIN_LIST,
-  SET_CURRENT_ANSWER
+  SET_CURRENT_ANSWER,
+  SET_KNOWLEDGE_CONFIG,
+  SET_SHOW_CHAT_HISTORY,
+  SET_IS_CURRENT_ANSWER
 } from './action-types';
 
 const initialState = {
@@ -33,7 +36,10 @@ const initialState = {
   readOnly: false,
   noAuth: false,
   pluginList: [],
-  currentAnswer: ''
+  currentAnswer: '',
+  knowledgeConfig: null,
+  showChatHistory: false,
+  isCurrentAnswer: false
 }
 
 const chatReducers = (state = initialState, action) => {
@@ -70,6 +76,12 @@ const chatReducers = (state = initialState, action) => {
       return { ...state, pluginList: action.payload };
     case SET_CURRENT_ANSWER:
       return { ...state, currentAnswer: action.payload };
+    case SET_IS_CURRENT_ANSWER:
+      return { ...state, isCurrentAnswer: action.payload };
+    case SET_KNOWLEDGE_CONFIG:
+      return { ...state, knowledgeConfig: action.payload };
+    case SET_SHOW_CHAT_HISTORY:
+      return { ...state, showChatHistory: action.payload };
     default:
       return state
   }