Merge branch 'development' into feat/publish-single-chat-tests

epam · Oct 3, 2024 · d41d695 · d41d695
2 parents 568febb + 7cdee44
commit d41d695
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 36 deletions.
diff --git a/apps/chat/src/components/Chat/ChatInput/PromptVariablesDialog.tsx b/apps/chat/src/components/Chat/ChatInput/PromptVariablesDialog.tsx
@@ -23,7 +23,7 @@ import { onBlur } from '@/src/utils/app/style-helpers';
 import { Prompt } from '@/src/types/prompt';
 import { Translation } from '@/src/types/translation';
 
-import { PROMPT_VARIABLE_REGEX } from '@/src/constants/folders';
+import { PROMPT_VARIABLE_REGEX_GLOBAL } from '@/src/constants/folders';
 
 import EmptyRequiredInputMessage from '../../Common/EmptyRequiredInputMessage';
 import Tooltip from '../../Common/Tooltip';
@@ -83,7 +83,7 @@ export const PromptVariablesDialog: FC<Props> = ({
       const content = prompt.content as string;
 
       const newContent = content.replace(
-        PROMPT_VARIABLE_REGEX,
+        PROMPT_VARIABLE_REGEX_GLOBAL,
         (_, variable) => {
           return updatedVariables.find((v) => v.key === variable)?.value ?? '';
         },

diff --git a/...t/src/components/Chat/ChatMessage/ChatMessageTemplatesModal/ChatMessageTemplatesModal.tsx b/...t/src/components/Chat/ChatMessage/ChatMessageTemplatesModal/ChatMessageTemplatesModal.tsx
@@ -1,4 +1,3 @@
-import { IconChevronDown } from '@tabler/icons-react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { useTranslation } from 'next-i18next';
@@ -17,7 +16,7 @@ import { Translation } from '@/src/types/translation';
 import { ConversationsActions } from '@/src/store/conversations/conversations.reducers';
 import { useAppDispatch } from '@/src/store/hooks';
 
-import { PROMPT_VARIABLE_REGEX } from '@/src/constants/folders';
+import { PROMPT_VARIABLE_REGEX_TEST } from '@/src/constants/folders';
 
 import Modal from '@/src/components/Common/Modal';
 
@@ -126,7 +125,7 @@ export const ChatMessageTemplatesModal = ({
             !content.trim() ||
             !template.trim() ||
             message.content.indexOf(content.trim()) === -1 ||
-            !PROMPT_VARIABLE_REGEX.test(template) ||
+            !PROMPT_VARIABLE_REGEX_TEST.test(template) ||
             !templateMatchContent(content.trim(), template.trim()),
         ),
     [message.content, templates],
@@ -142,9 +141,9 @@ export const ChatMessageTemplatesModal = ({
       dataQa="message-templates-dialog"
       containerClassName="h-fit max-h-full inline-block w-full min-w-[90%] text-center md:min-w-[300px] md:max-w-[880px] flex flex-col"
       heading={t('Message template')}
-      headingClassName="px-6 pt-4"
+      headingClassName="md:px-6 px-3 pt-6 mb-3"
     >
-      <div className="flex gap-4 px-6 pb-4">
+      <div className="flex gap-4 px-3 pb-6 md:px-6">
         <TabButton
           selected={!previewMode}
           onClick={() => setPreviewMode(false)}
@@ -168,7 +167,7 @@ export const ChatMessageTemplatesModal = ({
             previewMode && 'invisible',
           )}
         >
-          <div className="flex w-full flex-col gap-4 px-6 pb-4 text-start">
+          <div className="flex w-full flex-col gap-4 px-3 pb-6 text-start md:px-6">
             <p
               data-qa="description"
               className="whitespace-pre-wrap text-primary"
@@ -203,18 +202,10 @@ export const ChatMessageTemplatesModal = ({
                 {showMore && (
                   <button
                     onClick={() => setCollapsed(!collapsed)}
-                    className="flex leading-5 text-accent-primary"
+                    className="flex text-accent-primary"
                     data-qa={showMore ? 'show-less' : 'show-more'}
                   >
                     {t(!collapsed ? 'Show less' : 'Show more')}
-                    <IconChevronDown
-                      height={18}
-                      width={18}
-                      className={classNames(
-                        'ml-1 shrink-0 transition',
-                        !collapsed && 'rotate-180',
-                      )}
-                    />
                   </button>
                 )}
               </span>
@@ -244,7 +235,7 @@ export const ChatMessageTemplatesModal = ({
         </div>
         <div
           className={classNames(
-            'absolute inset-y-0 size-full overflow-y-auto px-6 pb-4',
+            'absolute inset-y-0 size-full overflow-y-auto px-3 pb-6 md:px-6',
             !previewMode && 'hidden',
           )}
         >
@@ -256,7 +247,7 @@ export const ChatMessageTemplatesModal = ({
           </div>
         </div>
       </div>
-      <div className="flex w-full items-center justify-end gap-3 border-t border-tertiary px-6 py-4">
+      <div className="flex w-full items-center justify-end gap-3 border-t border-tertiary px-3 py-4 md:px-6">
         <button
           className="button button-primary"
           onClick={handleSaveTemplate}

diff --git a/apps/chat/src/components/Chat/ChatMessage/ChatMessageTemplatesModal/TemplateRenderer.tsx b/apps/chat/src/components/Chat/ChatMessage/ChatMessageTemplatesModal/TemplateRenderer.tsx
@@ -1,6 +1,6 @@
 import { Fragment } from 'react';
 
-import { PROMPT_VARIABLE_REGEX } from '@/src/constants/folders';
+import { PROMPT_VARIABLE_REGEX_GLOBAL } from '@/src/constants/folders';
 
 interface Props {
   template?: string;
@@ -13,7 +13,7 @@ export const TemplateRenderer = ({ template }: Props) => {
   const resultNodes = [];
   let match;
   let index = 0;
-  while ((match = PROMPT_VARIABLE_REGEX.exec(template)) !== null) {
+  while ((match = PROMPT_VARIABLE_REGEX_GLOBAL.exec(template)) !== null) {
     if (match.index > index) {
       resultNodes.push(
         <Fragment key={index}>{template.slice(index, match.index)}</Fragment>,

diff --git a/apps/chat/src/components/Chat/ChatMessage/ChatMessageTemplatesModal/TemplateRow.tsx b/apps/chat/src/components/Chat/ChatMessage/ChatMessageTemplatesModal/TemplateRow.tsx
@@ -1,15 +1,23 @@
 import { IconTrashX } from '@tabler/icons-react';
-import { ChangeEvent, FocusEvent, useCallback, useRef, useState } from 'react';
+import {
+  ChangeEvent,
+  FocusEvent,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 
 import { useTranslation } from 'next-i18next';
 
 import classNames from 'classnames';
 
+import { isSmallScreen } from '@/src/utils/app/mobile';
 import { templateMatchContent } from '@/src/utils/app/prompts';
 
 import { Translation } from '@/src/types/translation';
 
-import { PROMPT_VARIABLE_REGEX } from '@/src/constants/folders';
+import { PROMPT_VARIABLE_REGEX_TEST } from '@/src/constants/folders';
 
 import { TemplateInput } from './TemplateInput';
 
@@ -53,8 +61,8 @@ export const TemplateRow = ({
         t('This part was not found in the original message') ?? '';
       if (
         element === contentRef.current &&
-        contentRef.current?.value &&
-        originalMessage.indexOf(contentRef.current.value.trim()) === -1
+        element.value &&
+        originalMessage.indexOf(element.value.trim()) === -1
       ) {
         setMethod(foundError);
         return;
@@ -63,8 +71,8 @@ export const TemplateRow = ({
       }
       if (
         element === templateRef.current &&
-        templateRef.current?.value &&
-        !PROMPT_VARIABLE_REGEX.test(templateRef.current.value)
+        element.value &&
+        !PROMPT_VARIABLE_REGEX_TEST.test(element.value)
       ) {
         setMethod(t('Template must have at least one variable') ?? '');
         return;
@@ -94,6 +102,15 @@ export const TemplateRow = ({
       validationTemplateError,
     ],
   );
+
+  useEffect(() => {
+    if (contentRef.current) validate(contentRef?.current);
+  }, [content, validate]);
+
+  useEffect(() => {
+    if (templateRef.current) validate(templateRef?.current);
+  }, [template, validate]);
+
   const handleChange = useCallback(
     (event: ChangeEvent<HTMLTextAreaElement>) => {
       onChange(
@@ -117,7 +134,7 @@ export const TemplateRow = ({
   );
 
   return (
-    <div className="flex items-start gap-2 px-6 py-3">
+    <div className="flex items-start gap-2 p-3 md:px-6">
       <div className="flex grow flex-col gap-2">
         <TemplateInput
           value={content}
@@ -131,7 +148,13 @@ export const TemplateRow = ({
         <TemplateInput
           value={template}
           dataQA="template-value"
-          placeholder={t('Your template. Use {{}} to denote a variable') ?? ''}
+          placeholder={
+            t(
+              isSmallScreen()
+                ? 'Your template with {{variable}}'
+                : 'Your template. Use {{}} to denote a variable',
+            ) ?? ''
+          }
           ref={templateRef}
           onInput={handleChange}
           onBlur={handleBlur}
@@ -143,7 +166,6 @@ export const TemplateRow = ({
         className={classNames(
           'shrink-0 cursor-pointer self-center text-secondary hover:text-accent-primary',
           lastRow && 'invisible',
-          (validationContentError || validationTemplateError) && 'mb-5',
         )}
         onClick={handleDelete}
       />

diff --git a/apps/chat/src/constants/folders.ts b/apps/chat/src/constants/folders.ts
@@ -9,4 +9,8 @@ export const PUBLISHING_APPROVE_REQUIRED_NAME = translate('Approve required');
 export const FOLDER_ATTACHMENT_CONTENT_TYPE =
   'application/vnd.dial.metadata+json';
 
-export const PROMPT_VARIABLE_REGEX = /{{([^|]+?)(\|.*?)?}}/g;
+export const PROMPT_VARIABLE_REGEX_TEST = /{{([^|]+?)(\|.*?)?}}/;
+export const PROMPT_VARIABLE_REGEX_GLOBAL = new RegExp(
+  PROMPT_VARIABLE_REGEX_TEST,
+  'g',
+);
diff --git a/apps/chat/src/utils/app/prompts.ts b/apps/chat/src/utils/app/prompts.ts
@@ -1,7 +1,7 @@
 import { PartialBy } from '@/src/types/common';
 import { Prompt, PromptInfo, TemplateParameter } from '@/src/types/prompt';
 
-import { PROMPT_VARIABLE_REGEX } from '@/src/constants/folders';
+import { PROMPT_VARIABLE_REGEX_GLOBAL } from '@/src/constants/folders';
 
 import { getPromptApiKey, parsePromptApiKey } from '../server/api';
 import { constructPath } from './file';
@@ -45,7 +45,7 @@ export const parseVariablesFromContent = (
 
   if (!content) return [];
 
-  while ((match = PROMPT_VARIABLE_REGEX.exec(content)) !== null) {
+  while ((match = PROMPT_VARIABLE_REGEX_GLOBAL.exec(content)) !== null) {
     foundVariables.push({
       name: match[1],
       defaultValue: match[2]?.slice(1).trim() ?? '',
@@ -63,7 +63,7 @@ export const templateMatchContent = (
 ): boolean => {
   let regexpString = template.replaceAll(
     // replace all variable values by special combination
-    PROMPT_VARIABLE_REGEX,
+    PROMPT_VARIABLE_REGEX_GLOBAL,
     combinationWithoutSpecialRegexSymbols,
   );
   regexpString = escapeRegExp(regexpString); // encode all specilal symbols
@@ -81,7 +81,7 @@ export const replaceDefaultValuesFromContent = (
 ) => {
   let regexpString = template.replaceAll(
     // replace all variable values by special combination
-    PROMPT_VARIABLE_REGEX,
+    PROMPT_VARIABLE_REGEX_GLOBAL,
     combinationWithoutSpecialRegexSymbols,
   );
   regexpString = escapeRegExp(regexpString); // encode all specilal symbols
@@ -93,7 +93,7 @@ export const replaceDefaultValuesFromContent = (
   const match = regexp.exec(content); // find all variable values
   let ind = 1;
   const newTemplate = template.replace(
-    PROMPT_VARIABLE_REGEX,
+    PROMPT_VARIABLE_REGEX_GLOBAL,
     function (_, variableName) {
       return `{{${variableName}|${match?.[ind++]}}}`; // replace each variable by variable with default value from content
     },