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

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">