Frontend audit: Bug fixes and refinements (#2112)

* (fix:attachements) sep id for redux ops * (fix:ui) popups, toast, share modal * (feat:agentsPreview) stable preview, ui fixes * (fix:ui) light theme icon, sleek scroll * (chore:i18n) missin keys * (chore:i18n) missing keys * (feat:preferrenceSlice) autoclear invalid source from storage * (fix:general) delete all conv close btn * (fix:tts) play one at a time * (fix:tts) gracefully unmount * (feat:tts) audio LRU cache * (feat:tts) pointer on hovered area * (feat:tts) clean text for speach --------- Co-authored-by: GH Action - Upstream Sync <action@github.com>
2025-12-01 17:43:15 +00:00 · 2025-10-29 05:17:26 +05:30
parent 94f70e6de5
commit 6a4cb617f9
40 changed files with 1805 additions and 490 deletions
--- a/frontend/src/components/ActionButtons.tsx
+++ b/frontend/src/components/ActionButtons.tsx
@@ -45,7 +45,7 @@ export default function ActionButtons({
      <div className={`flex items-center gap-2 sm:gap-4 ${className}`}>
        {showNewChat && (
          <button
-            title="Open New Chat"
+            title={t('actionButtons.openNewChat')}
            onClick={newChat}
            className="hover:bg-bright-gray flex items-center gap-1 rounded-full p-2 lg:hidden dark:hover:bg-[#28292E]"
          >
@@ -62,7 +62,7 @@ export default function ActionButtons({
        {showShare && conversationId && (
          <>
            <button
-              title="Share"
+              title={t('actionButtons.share')}
              onClick={() => setShareModalState(true)}
              className="hover:bg-bright-gray rounded-full p-2 dark:hover:bg-[#28292E]"
            >
--- a/frontend/src/components/ConnectorTreeComponent.tsx
+++ b/frontend/src/components/ConnectorTreeComponent.tsx
@@ -38,7 +38,7 @@ interface DirectoryStructure {
  [key: string]: FileNode;
 }

-interface ConnectorTreeComponentProps {
+interface ConnectorTreeProps {
  docId: string;
  sourceName: string;
  onBackToDocuments: () => void;
@@ -50,7 +50,7 @@ interface SearchResult {
  isFile: boolean;
 }

-const ConnectorTreeComponent: React.FC<ConnectorTreeComponentProps> = ({
+const ConnectorTree: React.FC<ConnectorTreeProps> = ({
  docId,
  sourceName,
  onBackToDocuments,
@@ -744,4 +744,4 @@ const ConnectorTreeComponent: React.FC<ConnectorTreeComponentProps> = ({
  );
 };

-export default ConnectorTreeComponent;
+export default ConnectorTree;
--- a/frontend/src/components/FilePicker.tsx
+++ b/frontend/src/components/FilePicker.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import { formatBytes } from '../utils/stringUtils';
 import { formatDate } from '../utils/dateTimeUtils';
 import {
@@ -66,6 +67,7 @@ export const FilePicker: React.FC<CloudFilePickerProps> = ({
    );
  };

+  const { t } = useTranslation();
  const [files, setFiles] = useState<CloudFile[]>([]);
  const [selectedFiles, setSelectedFiles] =
    useState<string[]>(initialSelectedFiles);
@@ -417,7 +419,7 @@ export const FilePicker: React.FC<CloudFilePickerProps> = ({
              <div className="mb-3 max-w-md">
                <Input
                  type="text"
-                  placeholder="Search files and folders..."
+                  placeholder={t('filePicker.searchPlaceholder')}
                  value={searchQuery}
                  onChange={(e) => handleSearchChange(e.target.value)}
                  colorVariant="silver"
@@ -431,7 +433,9 @@ export const FilePicker: React.FC<CloudFilePickerProps> = ({

              {/* Selected Files Message */}
              <div className="pb-3 text-sm text-gray-600 dark:text-gray-400">
-                {selectedFiles.length + selectedFolders.length} selected
+                {t('filePicker.itemsSelected', {
+                  count: selectedFiles.length + selectedFolders.length,
+                })}
              </div>
            </div>

@@ -448,9 +452,15 @@ export const FilePicker: React.FC<CloudFilePickerProps> = ({
                      <TableHead>
                        <TableRow>
                          <TableHeader width="40px"></TableHeader>
-                          <TableHeader width="60%">Name</TableHeader>
-                          <TableHeader width="20%">Last Modified</TableHeader>
-                          <TableHeader width="20%">Size</TableHeader>
+                          <TableHeader width="60%">
+                            {t('filePicker.name')}
+                          </TableHeader>
+                          <TableHeader width="20%">
+                            {t('filePicker.lastModified')}
+                          </TableHeader>
+                          <TableHeader width="20%">
+                            {t('filePicker.size')}
+                          </TableHeader>
                        </TableRow>
                      </TableHead>
                      <TableBody>
--- a/frontend/src/components/FileTreeComponent.tsx
+++ b/frontend/src/components/FileTreeComponent.tsx
@@ -36,7 +36,7 @@ interface DirectoryStructure {
  [key: string]: FileNode;
 }

-interface FileTreeComponentProps {
+interface FileTreeProps {
  docId: string;
  sourceName: string;
  onBackToDocuments: () => void;
@@ -48,7 +48,7 @@ interface SearchResult {
  isFile: boolean;
 }

-const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
+const FileTree: React.FC<FileTreeProps> = ({
  docId,
  sourceName,
  onBackToDocuments,
@@ -871,4 +871,4 @@ const FileTreeComponent: React.FC<FileTreeComponentProps> = ({
  );
 };

-export default FileTreeComponent;
+export default FileTree;
--- a/frontend/src/components/FileUpload.tsx
+++ b/frontend/src/components/FileUpload.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useDropzone } from 'react-dropzone';
 import { twMerge } from 'tailwind-merge';

@@ -44,13 +45,14 @@ export const FileUpload = ({
  activeClassName = 'border-blue-500 bg-blue-50',
  acceptClassName = 'border-green-500 dark:border-green-500 bg-green-50 dark:bg-green-50/10',
  rejectClassName = 'border-red-500 bg-red-50 dark:bg-red-500/10 dark:border-red-500',
-  uploadText = 'Click to upload or drag and drop',
-  dragActiveText = 'Drop the files here',
-  fileTypeText = 'PNG, JPG, JPEG up to',
-  sizeLimitText = 'MB',
+  uploadText,
+  dragActiveText,
+  fileTypeText,
+  sizeLimitText,
  disabled = false,
  validator,
 }: FileUploadProps) => {
+  const { t } = useTranslation();
  const [errors, setErrors] = useState<string[]>([]);
  const [preview, setPreview] = useState<string | null>(null);
  const [currentFile, setCurrentFile] = useState<File | null>(null);
@@ -71,7 +73,9 @@ export const FileUpload = ({
    if (file.size > maxSize) {
      return {
        isValid: false,
-        error: `File exceeds ${maxSize / 1024 / 1024}MB limit`,
+        error: t('components.fileUpload.fileSizeError', {
+          size: maxSize / 1024 / 1024,
+        }),
      };
    }

@@ -178,7 +182,11 @@ export const FileUpload = ({
        </p>
      );
    }
-    return <p className="text-sm font-semibold">{uploadText}</p>;
+    return (
+      <p className="text-sm font-semibold">
+        {uploadText || t('components.fileUpload.clickToUpload')}
+      </p>
+    );
  };

  const defaultContent = (
@@ -196,14 +204,17 @@ export const FileUpload = ({
      <div className="text-center">
        <div className="text-sm font-medium">
          {isDragActive ? (
-            <p className="text-sm font-semibold">{dragActiveText}</p>
+            <p className="text-sm font-semibold">
+              {dragActiveText || t('components.fileUpload.dropFiles')}
+            </p>
          ) : (
            renderUploadText()
          )}
        </div>
        <p className="mt-1 text-xs text-[#A3A3A3]">
-          {fileTypeText} {maxSize / 1024 / 1024}
-          {sizeLimitText}
+          {fileTypeText || t('components.fileUpload.fileTypes')}{' '}
+          {maxSize / 1024 / 1024}
+          {sizeLimitText || t('components.fileUpload.sizeLimitUnit')}
        </p>
      </div>
    </div>
--- a/frontend/src/components/MermaidRenderer.tsx
+++ b/frontend/src/components/MermaidRenderer.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import mermaid from 'mermaid';
 import CopyButton from './CopyButton';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
@@ -15,6 +16,7 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
  code,
  isLoading,
 }) => {
+  const { t } = useTranslation();
  const [isDarkTheme] = useDarkTheme();
  const diagramId = useRef(
    `mermaid-${Date.now()}-${Math.random().toString(36).substring(2)}`,
@@ -273,7 +275,7 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
              <button
                onClick={() => setShowDownloadMenu(!showDownloadMenu)}
                className="flex h-full items-center rounded-sm bg-gray-100 px-2 py-1 text-xs dark:bg-gray-700"
-                title="Download options"
+                title={t('mermaid.downloadOptions')}
              >
                Download <span className="ml-1">▼</span>
              </button>
@@ -307,7 +309,7 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
                  ? 'bg-blue-200 dark:bg-blue-800'
                  : 'bg-gray-100 dark:bg-gray-700'
              }`}
-              title="View Code"
+              title={t('mermaid.viewCode')}
            >
              Code
            </button>
@@ -353,7 +355,7 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
                      setZoomFactor((prev) => Math.max(1, prev - 0.5))
                    }
                    className="rounded px-1 hover:bg-gray-600"
-                    title="Decrease zoom"
+                    title={t('mermaid.decreaseZoom')}
                  >
                    -
                  </button>
@@ -362,7 +364,7 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
                    onClick={() => {
                      setZoomFactor(2);
                    }}
-                    title="Reset zoom"
+                    title={t('mermaid.resetZoom')}
                  >
                    {zoomFactor.toFixed(1)}x
                  </span>
@@ -371,7 +373,7 @@ const MermaidRenderer: React.FC<MermaidRendererProps> = ({
                      setZoomFactor((prev) => Math.min(6, prev + 0.5))
                    }
                    className="rounded px-1 hover:bg-gray-600"
-                    title="Increase zoom"
+                    title={t('mermaid.increaseZoom')}
                  >
                    +
                  </button>
--- a/frontend/src/components/Notification.tsx
+++ b/frontend/src/components/Notification.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next';
 import close from '../assets/cross.svg';
 import rightArrow from '../assets/arrow-full-right.svg';
 import bg from '../assets/notification-bg.jpg';
@@ -13,13 +14,14 @@ export default function Notification({
  notificationLink,
  handleCloseNotification,
 }: NotificationProps) {
+  const { t } = useTranslation();
  return (
    <a
      className="absolute right-2 bottom-6 z-20 flex w-3/4 items-center justify-center gap-2 rounded-lg bg-cover bg-center bg-no-repeat px-2 py-4 sm:right-4 md:w-2/5 lg:w-1/3 xl:w-1/4 2xl:w-1/5"
      style={{ backgroundImage: `url(${bg})` }}
      href={notificationLink}
      target="_blank"
-      aria-label="Notification"
+      aria-label={t('notification.ariaLabel')}
      rel="noreferrer"
    >
      <p className="text-white-3000 text-xs leading-6 font-semibold xl:text-sm xl:leading-7">
@@ -31,7 +33,7 @@ export default function Notification({

      <button
        className="absolute top-2 right-2 z-30 h-4 w-4 hover:opacity-70"
-        aria-label="Close notification"
+        aria-label={t('notification.closeAriaLabel')}
        onClick={(e) => {
          e.stopPropagation();
          e.preventDefault();
--- a/frontend/src/components/SettingsBar.tsx
+++ b/frontend/src/components/SettingsBar.tsx
@@ -24,6 +24,7 @@ interface SettingsBarProps {
 }

 const SettingsBar = ({ setActiveTab, activeTab }: SettingsBarProps) => {
+  const { t } = useTranslation();
  const [hiddenGradient, setHiddenGradient] =
    useState<HiddenGradientType>('left');
  const containerRef = useRef<null | HTMLDivElement>(null);
@@ -60,7 +61,7 @@ const SettingsBar = ({ setActiveTab, activeTab }: SettingsBarProps) => {
        <button
          onClick={() => scrollTabs(-1)}
          className="flex h-6 w-6 items-center justify-center rounded-full transition-all hover:bg-gray-200 dark:hover:bg-gray-700"
-          aria-label="Scroll tabs left"
+          aria-label={t('settings.scrollTabsLeft')}
        >
          <img src={ArrowLeft} alt="left-arrow" className="h-3" />
        </button>
@@ -69,7 +70,7 @@ const SettingsBar = ({ setActiveTab, activeTab }: SettingsBarProps) => {
        ref={containerRef}
        className="no-scrollbar flex snap-x flex-nowrap overflow-x-auto scroll-smooth md:space-x-4"
        role="tablist"
-        aria-label="Settings tabs"
+        aria-label={t('settings.tabsAriaLabel')}
      >
        {tabs.map((tab, index) => (
          <button
@@ -93,7 +94,7 @@ const SettingsBar = ({ setActiveTab, activeTab }: SettingsBarProps) => {
        <button
          onClick={() => scrollTabs(1)}
          className="flex h-6 w-6 items-center justify-center rounded-full hover:bg-gray-200 dark:hover:bg-gray-700"
-          aria-label="Scroll tabs right"
+          aria-label={t('settings.scrollTabsRight')}
        >
          <img src={ArrowRight} alt="right-arrow" className="h-3" />
        </button>
--- a/frontend/src/components/SourcesPopup.tsx
+++ b/frontend/src/components/SourcesPopup.tsx
@@ -172,11 +172,7 @@ export default function SourcesPopup({
                                    : doc.date !== option.date,
                                )
                              : [];
-                          dispatch(
-                            setSelectedDocs(
-                              updatedDocs.length > 0 ? updatedDocs : null,
-                            ),
-                          );
+                          dispatch(setSelectedDocs(updatedDocs));
                          handlePostDocumentSelect(
                            updatedDocs.length > 0 ? updatedDocs : null,
                          );
--- a/frontend/src/components/TextToSpeechButton.tsx
+++ b/frontend/src/components/TextToSpeechButton.tsx
@@ -1,94 +1,202 @@
-import { useState, useRef } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import Speaker from '../assets/speaker.svg?react';
 import Stopspeech from '../assets/stopspeech.svg?react';
 import LoadingIcon from '../assets/Loading.svg?react'; // Add a loading icon SVG here
+
 const apiHost = import.meta.env.VITE_API_HOST || 'https://docsapi.arc53.com';

-export default function SpeakButton({
-  text,
-  colorLight,
-  colorDark,
-}: {
-  text: string;
-  colorLight?: string;
-  colorDark?: string;
-}) {
+let currentlyPlayingAudio: {
+  audio: HTMLAudioElement;
+  stopCallback: () => void;
+} | null = null;
+
+let currentLoadingRequest: {
+  abortController: AbortController;
+  stopLoadingCallback: () => void;
+} | null = null;
+
+// LRU Cache for audio
+const audioCache = new Map<string, string>();
+const MAX_CACHE_SIZE = 10;
+
+function getCachedAudio(text: string): string | undefined {
+  const cached = audioCache.get(text);
+  if (cached) {
+    audioCache.delete(text);
+    audioCache.set(text, cached);
+  }
+  return cached;
+}
+
+function setCachedAudio(text: string, audioBase64: string) {
+  if (audioCache.has(text)) {
+    audioCache.delete(text);
+  }
+  if (audioCache.size >= MAX_CACHE_SIZE) {
+    const firstKey = audioCache.keys().next().value;
+    if (firstKey !== undefined) {
+      audioCache.delete(firstKey);
+    }
+  }
+
+  audioCache.set(text, audioBase64);
+}
+
+export default function SpeakButton({ text }: { text: string }) {
  const [isSpeaking, setIsSpeaking] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
-  const [isSpeakHovered, setIsSpeakHovered] = useState(false);
  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  useEffect(() => {
+    return () => {
+      // Abort any pending fetch request
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+        abortControllerRef.current = null;
+      }
+
+      // Stop any playing audio
+      if (audioRef.current) {
+        audioRef.current.pause();
+        if (currentlyPlayingAudio?.audio === audioRef.current) {
+          currentlyPlayingAudio = null;
+        }
+        audioRef.current = null;
+      }
+
+      // Clear global loading request if it's this component's
+      if (currentLoadingRequest) {
+        currentLoadingRequest = null;
+      }
+    };
+  }, []);

  const handleSpeakClick = async () => {
    if (isSpeaking) {
-      // Stop audio if it's currently playing
      audioRef.current?.pause();
      audioRef.current = null;
+      currentlyPlayingAudio = null;
      setIsSpeaking(false);
      return;
    }

+    // Stop any currently playing audio
+    if (currentlyPlayingAudio) {
+      currentlyPlayingAudio.audio.pause();
+      currentlyPlayingAudio.stopCallback();
+      currentlyPlayingAudio = null;
+    }
+
+    // Abort any pending loading request
+    if (currentLoadingRequest) {
+      currentLoadingRequest.abortController.abort();
+      currentLoadingRequest.stopLoadingCallback();
+      currentLoadingRequest = null;
+    }
+
    try {
-      // Set loading state and initiate TTS request
      setIsLoading(true);
+      const cachedAudio = getCachedAudio(text);
+      let audioBase64: string;

-      const response = await fetch(apiHost + '/api/tts', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ text }),
-      });
-
-      const data = await response.json();
-
-      if (data.success && data.audio_base64) {
-        // Create and play the audio
-        const audio = new Audio(`data:audio/mp3;base64,${data.audio_base64}`);
-        audioRef.current = audio;
-
-        audio.play().then(() => {
-          setIsSpeaking(true);
-          setIsLoading(false);
-
-          // Reset when audio ends
-          audio.onended = () => {
-            setIsSpeaking(false);
-            audioRef.current = null;
-          };
-        });
-      } else {
-        console.error('Failed to retrieve audio.');
+      if (cachedAudio) {
+        audioBase64 = cachedAudio;
        setIsLoading(false);
+      } else {
+        const abortController = new AbortController();
+        abortControllerRef.current = abortController;
+
+        currentLoadingRequest = {
+          abortController,
+          stopLoadingCallback: () => {
+            setIsLoading(false);
+          },
+        };
+
+        const response = await fetch(apiHost + '/api/tts', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ text }),
+          signal: abortController.signal,
+        });
+
+        const data = await response.json();
+        abortControllerRef.current = null;
+        currentLoadingRequest = null;
+
+        if (data.success && data.audio_base64) {
+          audioBase64 = data.audio_base64;
+          // Store in cache
+          setCachedAudio(text, audioBase64);
+          setIsLoading(false);
+        } else {
+          console.error('Failed to retrieve audio.');
+          setIsLoading(false);
+          return;
+        }
+      }
+
+      const audio = new Audio(`data:audio/mp3;base64,${audioBase64}`);
+      audioRef.current = audio;
+
+      currentlyPlayingAudio = {
+        audio,
+        stopCallback: () => {
+          setIsSpeaking(false);
+          audioRef.current = null;
+        },
+      };
+
+      audio.play().then(() => {
+        setIsSpeaking(true);
+        setIsLoading(false);
+
+        audio.onended = () => {
+          setIsSpeaking(false);
+          audioRef.current = null;
+          if (currentlyPlayingAudio?.audio === audio) {
+            currentlyPlayingAudio = null;
+          }
+        };
+      });
+    } catch (error: any) {
+      abortControllerRef.current = null;
+      currentLoadingRequest = null;
+
+      if (error.name === 'AbortError') {
+        return;
      }
-    } catch (error) {
      console.error('Error fetching audio from TTS endpoint', error);
      setIsLoading(false);
    }
  };

  return (
-    <div
-      className={`flex items-center justify-center rounded-full p-2 ${
-        isSpeakHovered
-          ? `dark:bg-purple-taupe bg-[#EEEEEE]`
-          : `bg-[${colorLight ? colorLight : '#FFFFFF'}] dark:bg-[${colorDark ? colorDark : 'transparent'}]`
+    <button
+      type="button"
+      className={`flex cursor-pointer items-center justify-center rounded-full p-2 ${
+        isSpeaking || isLoading
+          ? 'dark:bg-purple-taupe bg-[#EEEEEE]'
+          : 'bg-white-3000 dark:hover:bg-purple-taupe hover:bg-[#EEEEEE] dark:bg-transparent'
      }`}
+      onClick={handleSpeakClick}
+      aria-label={
+        isLoading
+          ? 'Loading audio'
+          : isSpeaking
+            ? 'Stop speaking'
+            : 'Speak text'
+      }
+      disabled={isLoading}
    >
      {isLoading ? (
        <LoadingIcon className="animate-spin" />
      ) : isSpeaking ? (
-        <Stopspeech
-          className="cursor-pointer fill-none"
-          onClick={handleSpeakClick}
-          onMouseEnter={() => setIsSpeakHovered(true)}
-          onMouseLeave={() => setIsSpeakHovered(false)}
-        />
+        <Stopspeech className="fill-none" />
      ) : (
-        <Speaker
-          className="cursor-pointer fill-none"
-          onClick={handleSpeakClick}
-          onMouseEnter={() => setIsSpeakHovered(true)}
-          onMouseLeave={() => setIsSpeakHovered(false)}
-        />
+        <Speaker className="fill-none" />
      )}
-    </div>
+    </button>
  );
 }