fix(chat): fix message template replacement (Issue #2271) (#3160)

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

@@ -5,6 +5,7 @@ import { useTranslation } from '@/src/hooks/useTranslation';
 import {
   getEntitiesFromTemplateMapping,
   replaceDefaultValuesFromContent,
+  replaceTemplates,
 } from '@/src/utils/app/prompts';
 
 import { Prompt } from '@/src/types/prompt';
@@ -94,10 +95,8 @@ const ReplayVariablesDialog = () => {
   )
     return null;
 
-  const template = getEntitiesFromTemplateMapping(
-    activeMessage.templateMapping,
-  ).reduce(
-    (acc, [key, value]) => acc.replaceAll(key, value),
+  const template = replaceTemplates(
+    getEntitiesFromTemplateMapping(activeMessage.templateMapping),
     activeMessage.content,
   );
   const prompt: Prompt = {

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

@@ -6,6 +6,7 @@ import { useTranslation } from '@/src/hooks/useTranslation';
 
 import {
   getEntitiesFromTemplateMapping,
+  replaceTemplates,
   templateMatchContent,
 } from '@/src/utils/app/prompts';
 
@@ -108,12 +109,8 @@ export const ChatMessageTemplatesModal = ({
   ]);
 
   const templateResult = useMemo(() => {
-    return templates
-      .slice(0, templates.length - 1)
-      .reduce(
-        (acc, [key, value]) => acc.replaceAll(key.trim(), value.trim()),
-        message.content,
-      );
+    const items = templates.slice(0, templates.length - 1);
+    return replaceTemplates(items, message.content);
   }, [message.content, templates]);
 
   const isInvalid = useMemo(

apps/chat/src/utils/app/prompts.ts

@@ -111,3 +111,15 @@ export const getEntitiesFromTemplateMapping = (
     ? templateMapping
     : Object.entries(templateMapping);
 };
+
+export const replaceTemplates = (
+  templates: TemplateMapping[],
+  text: string,
+): string => {
+  if (!templates.length) return text;
+  const [[key, value], ...rest] = templates;
+  return text
+    .split(key.trim())
+    .map((part) => replaceTemplates(rest, part))
+    .join(value.trim());
+};