Merge branch 'development' of https://github.com/epam/ai-dial-chat in…

…to feat/quick-apps-enhancements
epam · Oct 4, 2024 · 4afa5fa · 4afa5fa
2 parents cf8a1ad + 7363c83
commit 4afa5fa
Show file tree

Hide file tree

Showing 10 changed files with 38 additions and 21 deletions.
diff --git a/...t/src/components/Chat/ChatMessage/ChatMessageTemplatesModal/ChatMessageTemplatesModal.tsx b/...t/src/components/Chat/ChatMessage/ChatMessageTemplatesModal/ChatMessageTemplatesModal.tsx
@@ -141,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="md:px-6 px-3 pt-6 mb-3"
+      headingClassName="md:px-6 px-3 pt-4 md:pt-6 mb-3"
     >
-      <div className="flex gap-4 px-3 pb-6 md:px-6">
+      <div className="flex gap-4 px-3 pb-4 md:px-6">
         <TabButton
           selected={!previewMode}
           onClick={() => setPreviewMode(false)}
@@ -167,7 +167,7 @@ export const ChatMessageTemplatesModal = ({
             previewMode && 'invisible',
           )}
         >
-          <div className="flex w-full flex-col gap-4 px-3 pb-6 text-start md:px-6">
+          <div className="flex w-full flex-col gap-3 px-3 pb-4 text-start md:px-6 md:pb-6">
             <p
               data-qa="description"
               className="whitespace-pre-wrap text-primary"
@@ -178,7 +178,7 @@ export const ChatMessageTemplatesModal = ({
             </p>
             <p
               data-qa="original-message-label"
-              className="whitespace-pre-wrap text-secondary"
+              className="whitespace-pre-wrap pt-1 text-secondary"
             >
               {t('Original message:')}
             </p>

diff --git a/apps/chat/src/components/Chat/ChatMessage/ChatMessageTemplatesModal/TemplateInput.tsx b/apps/chat/src/components/Chat/ChatMessage/ChatMessageTemplatesModal/TemplateInput.tsx
@@ -20,7 +20,7 @@ export const TemplateInput = forwardRef(
         ref={ref}
         className={classNames(
           className,
-          'min-h-11 w-full grow resize-y whitespace-pre-wrap rounded border bg-transparent px-4 py-3 outline-none placeholder:text-secondary focus-visible:outline-none',
+          'min-h-8 w-full grow resize-y whitespace-pre-wrap rounded border bg-transparent px-3 py-2 outline-none placeholder:text-secondary focus-visible:outline-none',
           !validationError
             ? 'border-primary focus-within:border-accent-primary'
             : 'border-error hover:border-error focus:border-error',

diff --git a/apps/chat/src/components/Chat/ChatMessage/ChatMessageTemplatesModal/TemplateRow.tsx b/apps/chat/src/components/Chat/ChatMessage/ChatMessageTemplatesModal/TemplateRow.tsx
@@ -111,6 +111,11 @@ export const TemplateRow = ({
     if (templateRef.current) validate(templateRef?.current);
   }, [template, validate]);
 
+  useEffect(() => {
+    setValidationContentError('');
+    setValidationTemplateError('');
+  }, [lastRow]);
+
   const handleChange = useCallback(
     (event: ChangeEvent<HTMLTextAreaElement>) => {
       onChange(
@@ -134,7 +139,7 @@ export const TemplateRow = ({
   );
 
   return (
-    <div className="flex items-start gap-2 p-3 md:px-6">
+    <div className="flex items-start gap-2 p-3 md:px-6 md:py-4">
       <div className="flex grow flex-col gap-2">
         <TemplateInput
           value={content}

diff --git a/apps/chat/src/components/Chat/ChatMessage/MessageButtons.tsx b/apps/chat/src/components/Chat/ChatMessage/MessageButtons.tsx
@@ -388,7 +388,7 @@ export const MessageMobileButtons = ({
                   height={18}
                   width={18}
                 />
-                <p className="whitespace-nowrap">{t('Set message template')}</p>
+                <p className="whitespace-nowrap">{t('Set template')}</p>
               </div>
             }
           />

diff --git a/apps/chat/src/components/Common/ApplicationDialog.tsx b/apps/chat/src/components/Common/ApplicationDialog.tsx
@@ -230,8 +230,9 @@ const ApplicationDialogView: React.FC<Props> = ({
     (selectedItems: string[]) => {
       setInputAttachmentTypes(selectedItems);
       setValue('inputAttachmentTypes', selectedItems);
+      trigger('inputAttachmentTypes');
     },
-    [setValue],
+    [setValue, trigger],
   );
 
   useEffect(() => {
@@ -704,18 +705,24 @@ const ApplicationDialogView: React.FC<Props> = ({
                 required: t('Completion URL is required.') || '',
                 validate: (value) => {
                   try {
-                    new URL(value);
-                    const isValid =
-                      /^(https?):\/\/([\w.-]+)?(:\d{2,5})?(\/.*)?$/i.test(
-                        value,
+                    if (value.trim() !== value) {
+                      return (
+                        t('Completion URL cannot start or end with spaces.') ||
+                        ''
                       );
-                    if (isValid) {
-                      return true;
                     }
+                    new URL(value);
+                    const bannedEndings = ['.', '//'];
+                    const endsWithBannedEnding = bannedEndings.some((ending) =>
+                      value.endsWith(ending),
+                    );
+                    if (endsWithBannedEnding) {
+                      return t('Completion URL cannot end with . or //') || '';
+                    }
+                    return true;
                   } catch {
                     return t('Completion URL should be a valid URL.') || '';
                   }
-                  return t('Completion URL should be a valid URL.') || '';
                 },
               })}
               type="text"

diff --git a/apps/chat/src/components/Common/DropdownSelector.tsx b/apps/chat/src/components/Common/DropdownSelector.tsx
@@ -60,7 +60,11 @@ export function DropdownSelector({
         ),
       }}
       styles={{
-        indicatorsContainer: (styles) => ({ ...styles, cursor: 'default' }),
+        indicatorsContainer: (styles) => ({
+          ...styles,
+          cursor: 'default',
+          alignSelf: 'start',
+        }),
         input: (styles) => ({
           ...styles,
           height: '21px',
@@ -102,7 +106,7 @@ export function DropdownSelector({
         }),
         multiValue: (styles, state) => ({
           ...styles,
-          margin: '0 4px 0 0',
+          margin: '0 4px 4px 0',
           height: '28px',
           backgroundColor: state.data.backgroundColor,
           borderWidth: '1px',

diff --git a/apps/chat/src/components/Common/MultipleComboBox.tsx b/apps/chat/src/components/Common/MultipleComboBox.tsx
@@ -217,7 +217,6 @@ export function MultipleComboBox<T>({
         case useCombobox.stateChangeTypes.InputChange:
           handleClearError?.();
           setInputValue(newInputValue);
-
           break;
         default:
           break;

diff --git a/apps/chat/src/components/Marketplace/ApplicationDetails/ApplicationHeader.tsx b/apps/chat/src/components/Marketplace/ApplicationDetails/ApplicationHeader.tsx
@@ -52,7 +52,7 @@ export const ApplicationDetailsHeader = ({ entity, isMobileView }: Props) => {
       <div className="mt-4 flex min-w-0 shrink flex-col gap-1 md:gap-3">
         <div className="flex justify-between">
           <div className="flex w-full flex-col gap-2">
-            <div className="flex gap-2 overflow-hidden truncate">
+            <div className="flex flex-wrap gap-2 overflow-hidden truncate">
               {entity.topics?.map((topic) => (
                 <ApplicationTopic key={topic} topic={topic} />
               ))}

diff --git a/apps/chat/src/components/Marketplace/MarketplaceFilterbar.tsx b/apps/chat/src/components/Marketplace/MarketplaceFilterbar.tsx
@@ -43,7 +43,7 @@ const FilterItem = ({
   displayValue,
   onSelect,
 }: FilterItemProps) => {
-  const id = useMemo(() => `${type}-${filterValue}`, [type, filterValue]);
+  const id = useMemo(() => `${type}-${filterValue}`, [filterValue, type]);
   return (
     <div
       className="relative flex size-[18px] shrink-0 items-center"

diff --git a/apps/chat/src/components/Settings/CustomLogoSelect.tsx b/apps/chat/src/components/Settings/CustomLogoSelect.tsx
@@ -77,7 +77,9 @@ export const CustomLogoSelect = ({
           allowedTypes={allowedTypes ?? ['image/*']}
           maximumAttachmentsAmount={maximumAttachmentsAmount}
           onClose={(files: unknown) => {
-            onLogoSelect(files as string[]);
+            if ((files as string[]).length > 0) {
+              onLogoSelect(files as string[]);
+            }
             setIsSelectFilesDialogOpened(false);
           }}
           headerLabel={fileManagerModalTitle || t('Select custom logo')}