refactor: clean up code and improve UI elements in various components

application/llm/openai.py

@@ -85,7 +85,6 @@ class OpenAILLM(BaseLLM):
         **kwargs,
     ):
         messages = self._clean_messages_openai(messages)
-        print(messages)
         if tools:
             response = self.client.chat.completions.create(
                 model=model,

frontend/src/components/SkeletonLoader.tsx

@@ -91,18 +91,18 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
   );
 
   const renderLogs = () => (
-    <div className="animate-pulse space-y-px">
+    <div className="w-full animate-pulse space-y-px">
       {[...Array(8)].map((_, idx) => (
         <div
           key={idx}
-          className="flex items-start p-2 hover:bg-[#F9F9F9] hover:dark:bg-dark-charcoal"
+          className="w-full flex items-start p-2 hover:bg-[#F9F9F9] hover:dark:bg-dark-charcoal"
         >
-          <div className="flex items-center gap-2">
-            <div className="w-3 h-3 bg-gray-300 dark:bg-gray-600 rounded-sm"></div>
+          <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 w-20"></div>
-              <div className="h-3 bg-gray-300 dark:bg-gray-600 rounded w-14 bg-opacity-80"></div>
-              <div className="h-3 bg-gray-300 dark:bg-gray-600 rounded w-40"></div>
+              <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>
           </div>
         </div>

frontend/src/conversation/ConversationBubble.tsx

@@ -634,47 +634,46 @@ function ToolCalls({ toolCalls }: { toolCalls: ToolCallsType[] }) {
                 title={`${toolCall.tool_name}  -  ${toolCall.action_name.substring(0, toolCall.action_name.lastIndexOf('_'))}`}
                 className="w-full rounded-[20px] bg-gray-1000 dark:bg-gun-metal hover:bg-[#F1F1F1] dark:hover:bg-[#2C2E3C]"
                 titleClassName="px-6 py-2 text-sm font-semibold"
-                children={
-                  <div className="flex flex-col gap-1">
-                    <div className="flex flex-col border border-silver dark:border-silver/20 rounded-2xl">
-                      <p className="flex flex-row items-center justify-between px-2 py-1 text-sm font-semibold bg-black/10 dark:bg-[#191919] rounded-t-2xl break-words">
-                        <span style={{ fontFamily: 'IBMPlexMono-Medium' }}>
-                          Arguments
-                        </span>{' '}
-                        <CopyButton
-                          text={JSON.stringify(toolCall.arguments, null, 2)}
-                        />
-                      </p>
-                      <p className="p-2 font-mono text-sm dark:tex dark:bg-[#222327] rounded-b-2xl break-words">
-                        <span
-                          className="text-black dark:text-gray-400 leading-[23px]"
-                          style={{ fontFamily: 'IBMPlexMono-Medium' }}
-                        >
-                          {JSON.stringify(toolCall.arguments, null, 2)}
-                        </span>
-                      </p>
-                    </div>
-                    <div className="flex flex-col border border-silver dark:border-silver/20 rounded-2xl">
-                      <p className="flex flex-row items-center justify-between px-2 py-1 text-sm font-semibold bg-black/10 dark:bg-[#191919] rounded-t-2xl break-words">
-                        <span style={{ fontFamily: 'IBMPlexMono-Medium' }}>
-                          Response
-                        </span>{' '}
-                        <CopyButton
-                          text={JSON.stringify(toolCall.result, null, 2)}
-                        />
-                      </p>
-                      <p className="p-2 font-mono text-sm dark:tex dark:bg-[#222327] rounded-b-2xl break-words">
-                        <span
-                          className="text-black dark:text-gray-400 leading-[23px]"
-                          style={{ fontFamily: 'IBMPlexMono-Medium' }}
-                        >
-                          {JSON.stringify(toolCall.result, null, 2)}
-                        </span>
-                      </p>
-                    </div>
+              >
+                <div className="flex flex-col gap-1">
+                  <div className="flex flex-col border border-silver dark:border-silver/20 rounded-2xl">
+                    <p className="flex flex-row items-center justify-between px-2 py-1 text-sm font-semibold bg-black/10 dark:bg-[#191919] rounded-t-2xl break-words">
+                      <span style={{ fontFamily: 'IBMPlexMono-Medium' }}>
+                        Arguments
+                      </span>{' '}
+                      <CopyButton
+                        text={JSON.stringify(toolCall.arguments, null, 2)}
+                      />
+                    </p>
+                    <p className="p-2 font-mono text-sm dark:tex dark:bg-[#222327] rounded-b-2xl break-words">
+                      <span
+                        className="text-black dark:text-gray-400 leading-[23px]"
+                        style={{ fontFamily: 'IBMPlexMono-Medium' }}
+                      >
+                        {JSON.stringify(toolCall.arguments, null, 2)}
+                      </span>
+                    </p>
                   </div>
-                }
-              />
+                  <div className="flex flex-col border border-silver dark:border-silver/20 rounded-2xl">
+                    <p className="flex flex-row items-center justify-between px-2 py-1 text-sm font-semibold bg-black/10 dark:bg-[#191919] rounded-t-2xl break-words">
+                      <span style={{ fontFamily: 'IBMPlexMono-Medium' }}>
+                        Response
+                      </span>{' '}
+                      <CopyButton
+                        text={JSON.stringify(toolCall.result, null, 2)}
+                      />
+                    </p>
+                    <p className="p-2 font-mono text-sm dark:tex dark:bg-[#222327] rounded-b-2xl break-words">
+                      <span
+                        className="text-black dark:text-gray-400 leading-[23px]"
+                        style={{ fontFamily: 'IBMPlexMono-Medium' }}
+                      >
+                        {JSON.stringify(toolCall.result, null, 2)}
+                      </span>
+                    </p>
+                  </div>
+                </div>
+              </Accordion>
             ))}
           </div>
         </div>

frontend/src/modals/AddActionModal.tsx

@@ -5,17 +5,17 @@ import Exit from '../assets/exit.svg';
 import Input from '../components/Input';
 import { ActiveState } from '../models/misc';
 
+type AddActionModalProps = {
+  modalState: ActiveState;
+  setModalState: (state: ActiveState) => void;
+  handleSubmit: (actionName: string) => void;
+};
+
 const isValidFunctionName = (name: string): boolean => {
   const pattern = /^[a-zA-Z0-9_-]+$/;
   return pattern.test(name);
 };
 
-interface AddActionModalProps {
-  modalState: ActiveState;
-  setModalState: (state: ActiveState) => void;
-  handleSubmit: (actionName: string) => void;
-}
-
 export default function AddActionModal({
   modalState,
   setModalState,
@@ -23,18 +23,18 @@ export default function AddActionModal({
 }: AddActionModalProps) {
   const { t } = useTranslation();
   const [actionName, setActionName] = React.useState('');
-  const [functionNameError, setFunctionNameError] = useState<boolean>(false); // New error state
+  const [functionNameError, setFunctionNameError] = useState<boolean>(false);
 
   const handleAddAction = () => {
     if (!isValidFunctionName(actionName)) {
-      setFunctionNameError(true); // Set error state if invalid
+      setFunctionNameError(true);
       return;
     }
-    setFunctionNameError(false); // Clear error state if valid
+    setFunctionNameError(false);
     handleSubmit(actionName);
+    setActionName('');
     setModalState('INACTIVE');
   };
-
   return (
     <div
       className={`${
@@ -46,7 +46,9 @@ export default function AddActionModal({
           <button
             className="absolute top-3 right-4 m-2 w-3"
             onClick={() => {
+              setFunctionNameError(false);
               setModalState('INACTIVE');
+              setActionName('');
             }}
           >
             <img className="filter dark:invert" src={Exit} />
@@ -62,22 +64,25 @@ export default function AddActionModal({
               <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'}
               />
-              <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]"
@@ -86,7 +91,9 @@ export default function AddActionModal({
               </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"
               >

frontend/src/modals/AddToolModal.tsx

@@ -120,7 +120,7 @@ export default function AddToolModal({
                     role="button"
                     tabIndex={0}
                     key={index}
-                    className="h-52 w-full p-6 border rounded-2xl border-silver dark:border-[#4D4E58] flex flex-col justify-between dark:bg-[#32333B] cursor-pointer"
+                    className="h-52 w-full p-6 border rounded-2xl border-silver dark:border-[#4D4E58] flex flex-col justify-between dark:bg-[#32333B] cursor-pointer hover:border-[#9d9d9d] hover:dark:border-[#717179]"
                     onClick={() => {
                       setSelectedTool(tool);
                       handleAddTool(tool);
@@ -140,7 +140,10 @@ export default function AddToolModal({
                         />
                       </div>
                       <div className="mt-[9px]">
-                        <p className="px-1 text-sm font-semibold text-eerie-black dark:text-white leading-relaxed capitalize">
+                        <p
+                          title={tool.displayName}
+                          className="px-1 text-sm font-semibold text-eerie-black dark:text-white leading-relaxed capitalize truncate"
+                        >
                           {tool.displayName}
                         </p>
                         <p className="mt-1 px-1 h-24 overflow-auto text-sm text-gray-600 dark:text-[#8a8a8c] leading-relaxed">

frontend/src/modals/ConfigToolModal.tsx

@@ -61,7 +61,7 @@ export default function ConfigToolModal({
               <span className="font-semibold">{tool?.name} </span>
             </p>
             <div className="mt-6 relative px-3">
-              <span className="absolute left-5 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-[#26272E] dark:text-silver">
+              <span className="z-10 absolute left-5 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-[#26272E] dark:text-silver">
                 {t('modals.configTool.apiKeyLabel')}
               </span>
               <Input

frontend/src/settings/Analytics.tsx

@@ -216,7 +216,6 @@ export default function Analytics() {
             }
             rounded="3xl"
             border="border"
-            borderColor="gray-700"
           />
         </div>
 

frontend/src/settings/Documents.tsx

@@ -532,11 +532,12 @@ function DocumentChunks({
         </div>
       ) : (
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-          {paginatedChunks.filter((chunk) =>
-            chunk.metadata?.title
+          {paginatedChunks.filter((chunk) => {
+            if (!chunk.metadata?.title) return true;
+            return chunk.metadata.title
               .toLowerCase()
-              .includes(searchTerm.toLowerCase()),
-          ).length === 0 ? (
+              .includes(searchTerm.toLowerCase());
+          }).length === 0 ? (
             <div className="mt-24 col-span-2 lg:col-span-3 text-center text-gray-500 dark:text-gray-400">
               <img
                 src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
@@ -547,11 +548,12 @@ function DocumentChunks({
             </div>
           ) : (
             paginatedChunks
-              .filter((chunk) =>
-                chunk.metadata?.title
+              .filter((chunk) => {
+                if (!chunk.metadata?.title) return true;
+                return chunk.metadata.title
                   .toLowerCase()
-                  .includes(searchTerm.toLowerCase()),
-              )
+                  .includes(searchTerm.toLowerCase());
+              })
               .map((chunk, index) => (
                 <div
                   key={index}
@@ -578,7 +580,7 @@ function DocumentChunks({
                     </div>
                     <div className="mt-[9px]">
                       <p className="h-12 text-sm font-semibold text-eerie-black dark:text-[#EEEEEE] leading-relaxed break-words ellipsis-text">
-                        {chunk.metadata?.title}
+                        {chunk.metadata?.title ?? 'Untitled'}
                       </p>
                       <p className="mt-1 pr-1 h-[110px] overflow-y-auto text-[13px] text-gray-600 dark:text-gray-400 leading-relaxed break-words">
                         {chunk.text}
@@ -591,11 +593,12 @@ function DocumentChunks({
         </div>
       )}
       {!loading &&
-        paginatedChunks.filter((chunk) =>
-          chunk.metadata?.title
+        paginatedChunks.filter((chunk) => {
+          if (!chunk.metadata?.title) return true;
+          return chunk.metadata.title
             .toLowerCase()
-            .includes(searchTerm.toLowerCase()),
-        ).length !== 0 && (
+            .includes(searchTerm.toLowerCase());
+        }).length !== 0 && (
           <div className="mt-10 w-full flex items-center justify-center">
             <Pagination
               currentPage={page}

frontend/src/settings/Logs.tsx

@@ -1,13 +1,13 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import userService from '../api/services/userService';
 import ChevronRight from '../assets/chevron-right.svg';
+import CoppyButton from '../components/CopyButton';
 import Dropdown from '../components/Dropdown';
 import SkeletonLoader from '../components/SkeletonLoader';
-import { APIKeyData, LogData } from './types';
-import CoppyButton from '../components/CopyButton';
 import { useLoaderState } from '../hooks';
+import { APIKeyData, LogData } from './types';
 
 export default function Logs() {
   const { t } = useTranslation();
@@ -67,46 +67,42 @@ export default function Logs() {
   return (
     <div className="mt-12">
       <div className="flex flex-col items-start">
-        {loadingChatbots ? (
-          <SkeletonLoader component="dropdown" />
-        ) : (
-          <div className="flex flex-col gap-3">
-            <label
-              id="chatbot-filter-label"
-              className="font-bold text-jet dark:text-bright-gray"
-            >
-              {t('settings.logs.filterByChatbot')}
-            </label>
-            <Dropdown
-              size="w-[55vw] sm:w-[360px]"
-              options={[
-                ...chatbots.map((chatbot) => ({
-                  label: chatbot.name,
-                  value: chatbot.id,
-                })),
-                { label: t('settings.logs.none'), value: '' },
-              ]}
-              placeholder={t('settings.logs.selectChatbot')}
-              onSelect={(chatbot: { label: string; value: string }) => {
-                setSelectedChatbot(
-                  chatbots.find((item) => item.id === chatbot.value),
-                );
-                setLogs([]);
-                setPage(1);
-                setHasMore(true);
-              }}
-              selectedValue={
-                (selectedChatbot && {
-                  label: selectedChatbot.name,
-                  value: selectedChatbot.id,
-                }) ||
-                null
-              }
-              rounded="3xl"
-              border="border"
-            />
-          </div>
-        )}
+        <div className="flex flex-col gap-3">
+          <label
+            id="chatbot-filter-label"
+            className="font-bold text-jet dark:text-bright-gray"
+          >
+            {t('settings.logs.filterByChatbot')}
+          </label>
+          <Dropdown
+            size="w-[55vw] sm:w-[360px]"
+            options={[
+              ...chatbots.map((chatbot) => ({
+                label: chatbot.name,
+                value: chatbot.id,
+              })),
+              { label: t('settings.logs.none'), value: '' },
+            ]}
+            placeholder={t('settings.logs.selectChatbot')}
+            onSelect={(chatbot: { label: string; value: string }) => {
+              setSelectedChatbot(
+                chatbots.find((item) => item.id === chatbot.value),
+              );
+              setLogs([]);
+              setPage(1);
+              setHasMore(true);
+            }}
+            selectedValue={
+              (selectedChatbot && {
+                label: selectedChatbot.name,
+                value: selectedChatbot.id,
+              }) ||
+              null
+            }
+            rounded="3xl"
+            border="border"
+          />
+        </div>
       </div>
 
       <div className="mt-8">
@@ -148,7 +144,7 @@ function LogsTable({ logs, setPage, loading }: LogsTableProps) {
         {logs?.map((log, index) => {
           if (index === logs.length - 1) {
             return (
-              <div ref={firstObserver} key={index}>
+              <div ref={firstObserver} key={index} className="w-full">
                 <Log log={log} />
               </div>
             );
@@ -170,22 +166,26 @@ function Log({ log }: { log: LogData }) {
   const { id, action, timestamp, ...filteredLog } = log;
   return (
     <details className="group bg-transparent [&_summary::-webkit-details-marker]:hidden w-full hover:bg-[#F9F9F9] hover:dark:bg-dark-charcoal">
-      <summary className="flex flex-row items-center gap-2 text-gray-900 cursor-pointer p-2 group-open:bg-[#F9F9F9] dark:group-open:bg-dark-charcoal">
+      <summary className="flex flex-row items-start gap-2 text-gray-900 cursor-pointer p-2 group-open:bg-[#F9F9F9] dark:group-open:bg-dark-charcoal">
         <img
           src={ChevronRight}
           alt="Expand log entry"
-          className="w-3 h-3 transition duration-300 group-open:rotate-90"
+          className="mt-[3px] w-3 h-3 transition duration-300 group-open:rotate-90"
         />
         <span className="flex flex-row gap-2">
           <h2 className="text-xs text-black/60 dark:text-bright-gray">{`${log.timestamp}`}</h2>
           <h2 className="text-xs text-[#913400] dark:text-[#DF5200]">{`[${log.action}]`}</h2>
           <h2
-            className={`text-xs ${logLevelColor[log.level]}`}
-          >{`${log.question}`}</h2>
+            className={`max-w-72 text-xs ${logLevelColor[log.level]} break-words`}
+          >
+            {`${log.question}`.length > 250
+              ? `${log.question.substring(0, 250)}...`
+              : log.question}
+          </h2>
         </span>
       </summary>
       <div className="px-4 group-open:bg-[#F9F9F9] dark:group-open:bg-dark-charcoal">
-        <p className="px-2 leading-relaxed text-gray-700 dark:text-gray-400 text-xs">
+        <p className="px-2 leading-relaxed text-gray-700 dark:text-gray-400 text-xs break-words">
           {JSON.stringify(filteredLog, null, 2)}
         </p>
         <div className="my-px w-8">