fix: merge errors

frontend/src/components/SkeletonLoader.tsx

@@ -99,10 +99,10 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
         >
           <div className="w-full flex items-center gap-2">
             <div className="w-3 h-3 bg-gray-300 dark:bg-gray-600 rounded-lg"></div>
-            <div className="flex flex-row items-center gap-2">
-              <div className="h-3 bg-gray-300 dark:bg-gray-600 rounded-lg w-52"></div>
-              <div className="h-3 bg-gray-300 dark:bg-gray-600 rounded-lg w-28 bg-opacity-80"></div>
-              <div className="h-3 bg-gray-300 dark:bg-gray-600 rounded-lg w-64"></div>
+            <div className="w-full flex flex-row items-center gap-2">
+              <div className="h-3 bg-gray-300 dark:bg-gray-600 rounded-lg w-[30%] lg:w-52"></div>
+              <div className="h-3 bg-gray-300 dark:bg-gray-600 rounded-lg w-[16%] lg:w-28"></div>
+              <div className="h-3 bg-gray-300 dark:bg-gray-600 rounded-lg w-[40%] lg:w-64"></div>
             </div>
           </div>
         </div>

frontend/src/modals/AddActionModal.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import WrapperModal from './WrapperModal';
 import Input from '../components/Input';
 import { ActiveState } from '../models/misc';
+import WrapperModal from './WrapperModal';
 
 type AddActionModalProps = {
   modalState: ActiveState;
@@ -46,27 +46,32 @@ export default function AddActionModal({
         <h2 className="font-semibold text-xl text-jet dark:text-bright-gray px-3">
           New Action
         </h2>
-        <div className="mt-6 px-3">
+        <div className="mt-6 relative px-3">
+          <span className="z-10 absolute left-5 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-[#26272E] dark:text-silver">
+            Action Name
+          </span>
           <Input
             type="text"
             value={actionName}
-            onChange={(e) => setActionName(e.target.value)}
+            onChange={(e) => {
+              const value = e.target.value;
+              setActionName(value);
+              setFunctionNameError(!isValidFunctionName(value));
+            }}
             borderVariant="thin"
-            placeholder="Enter name"
-            label="Action Name"
+            placeholder={'Enter name'}
           />
-          <p className="mt-1 text-gray-500 text-xs">
-            Use only letters, numbers, underscores, and hyphens (e.g.,
-            `get_user_data`, `send-report`).
+          <p
+            className={`mt-2 ml-1 text-xs italic ${
+              functionNameError ? 'text-red-500' : 'text-gray-500'
+            }`}
+          >
+            {functionNameError
+              ? 'Invalid function name format. Use only letters, numbers, underscores, and hyphens.'
+              : 'Use only letters, numbers, underscores, and hyphens (e.g., `get_data`, `send_report`, etc.)'}
           </p>
-          {functionNameError && (
-            <p className="mt-1 text-red-500 text-xs">
-              Invalid function name format. Use only letters, numbers,
-              underscores, and hyphens.
-            </p>
-          )}
         </div>
-        <div className="mt-8 flex flex-row-reverse gap-1 px-3">
+        <div className="mt-3 flex flex-row-reverse gap-1 px-3">
           <button
             onClick={handleAddAction}
             className="rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:bg-[#6F3FD1]"
@@ -83,54 +88,6 @@ export default function AddActionModal({
           >
             {t('modals.configTool.closeButton')}
           </button>
-          <div className="p-6">
-            <h2 className="font-semibold text-xl text-jet dark:text-bright-gray px-3">
-              New Action
-            </h2>
-            <div className="mt-6 relative px-3">
-              <span className="z-10 absolute left-5 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-[#26272E] dark:text-silver">
-                Action Name
-              </span>
-              <Input
-                type="text"
-                value={actionName}
-                onChange={(e) => {
-                  const value = e.target.value;
-                  setActionName(value);
-                  setFunctionNameError(!isValidFunctionName(value));
-                }}
-                borderVariant="thin"
-                placeholder={'Enter name'}
-              />
-              <p
-                className={`mt-2 ml-1 text-xs italic ${
-                  functionNameError ? 'text-red-500' : 'text-gray-500'
-                }`}
-              >
-                {functionNameError
-                  ? 'Invalid function name format. Use only letters, numbers, underscores, and hyphens.'
-                  : 'Use only letters, numbers, underscores, and hyphens (e.g., `get_data`, `send_report`, etc.)'}
-              </p>
-            </div>
-            <div className="mt-3 flex flex-row-reverse gap-1 px-3">
-              <button
-                onClick={handleAddAction}
-                className="rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:bg-[#6F3FD1]"
-              >
-                Add
-              </button>
-              <button
-                onClick={() => {
-                  setFunctionNameError(false);
-                  setModalState('INACTIVE');
-                  setActionName('');
-                }}
-                className="cursor-pointer rounded-3xl px-5 py-2 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:text-light-gray dark:hover:bg-[#767183]/50"
-              >
-                {t('modals.configTool.closeButton')}
-              </button>
-            </div>
-          </div>
         </div>
       </div>
     </WrapperModal>

frontend/src/modals/AddToolModal.tsx

@@ -97,7 +97,7 @@ export default function AddToolModal({
           className="h-[85vh] w-[90vw] md:w-[75vw]"
         >
           <div className="flex flex-col gap-4 h-full">
-            <div className="p-6">
+            <div>
               <h2 className="font-semibold text-xl text-jet dark:text-bright-gray px-3">
                 {t('settings.tools.selectToolSetup')}
               </h2>

frontend/src/settings/Analytics.tsx

@@ -192,7 +192,6 @@ export default function Analytics() {
   return (
     <div className="mt-12">
       <div className="flex flex-col items-start">
-
         <div className="flex flex-col gap-3">
           <p className="font-bold text-jet dark:text-bright-gray">
             {t('settings.analytics.filterByChatbot')}
@@ -223,41 +222,6 @@ export default function Analytics() {
             border="border"
           />
         </div>
-        {loadingChatbots ? (
-          <SkeletonLoader component="dropdown" />
-        ) : (
-          <div className="flex flex-col gap-3">
-            <p className="font-bold text-jet dark:text-bright-gray">
-              {t('settings.analytics.filterByChatbot')}
-            </p>
-            <Dropdown
-              size="w-[55vw] sm:w-[360px]"
-              options={[
-                ...chatbots.map((chatbot) => ({
-                  label: chatbot.name,
-                  value: chatbot.id,
-                })),
-                { label: t('settings.analytics.none'), value: '' },
-              ]}
-              placeholder={t('settings.analytics.selectChatbot')}
-              onSelect={(chatbot: { label: string; value: string }) => {
-                setSelectedChatbot(
-                  chatbots.find((item) => item.id === chatbot.value),
-                );
-              }}
-              selectedValue={
-                (selectedChatbot && {
-                  label: selectedChatbot.name,
-                  value: selectedChatbot.id,
-                }) ||
-                null
-              }
-              rounded="3xl"
-              border="border"
-              borderColor="gray-700"
-            />
-          </div>
-        )}
 
         {/* Messages Analytics */}
         <div className="mt-8 w-full flex flex-col [@media(min-width:1080px)]:flex-row gap-3">