Repository: Stirling-Tools/Stirling-PDF
File: frontend/src/components/tools/shared/FileStatusIndicator.tsx (TypeScript)

Code before:
import React from "react";
import { Text, Anchor } from "@mantine/core";
import { useTranslation } from "react-i18next";
import FolderIcon from '@mui/icons-material/Folder';
import { useFilesModalContext } from "../../../contexts/FilesModalContext";
import { useAllFiles } from "../../../contexts/FileContext";

export interface FileStatusIndicatorProps {
  selectedFiles?: File[];
  placeholder?: string;
}

const FileStatusIndicator = ({
  selectedFiles = [],
  placeholder,
}: FileStatusIndicatorProps) => {
  const { t } = useTranslation();
  const { openFilesModal } = useFilesModalContext();
  const { files: workbenchFiles } = useAllFiles();

  // Check if there are no files in the workbench
  if (workbenchFiles.length === 0) {
    return (
      <Text size="sm" c="dimmed">
        {t("files.noFiles", "No files uploaded. ")}{" "}
        <Anchor
          size="sm"
          onClick={openFilesModal}
          style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '4px' }}
        >
          <FolderIcon style={{ fontSize: '14px' }} />
          {t("files.addFiles", "Add files")}
        </Anchor>
      </Text>
    );
  }

  // Show selection status when there are files in workbench
  if (selectedFiles.length === 0) {
    return (
      <Text size="sm" c="dimmed">
        {t("files.selectFromWorkbench", "Select files from the workbench or ")}{" "}
        <Anchor
          size="sm"
          onClick={openFilesModal}
          style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '4px' }}
        >
          <FolderIcon style={{ fontSize: '14px' }} />
          {t("files.addFiles", "Add files")}
        </Anchor>

Review comment (suggestion):
```suggestion
        {t("files.noFiles", "No files uploaded.") + " "}
```

This isn't in the translation file as far as I can tell

Code after:
import React from "react";
import { Text, Anchor } from "@mantine/core";
import { useTranslation } from "react-i18next";
import FolderIcon from '@mui/icons-material/Folder';
import { useFilesModalContext } from "../../../contexts/FilesModalContext";
import { useAllFiles } from "../../../contexts/FileContext";

export interface FileStatusIndicatorProps {
  selectedFiles?: File[];
  placeholder?: string;
}

const FileStatusIndicator = ({
  selectedFiles = [],
  placeholder,
}: FileStatusIndicatorProps) => {
  const { t } = useTranslation();
  const { openFilesModal } = useFilesModalContext();
  const { files: workbenchFiles } = useAllFiles();

  // Check if there are no files in the workbench
  if (workbenchFiles.length === 0) {
    return (
      <Text size="sm" c="dimmed">
        {t("files.noFiles", "No files uploaded. ")}{" "}
        <Anchor
          size="sm"
          onClick={openFilesModal}
          style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '4px' }}
        >
          <FolderIcon style={{ fontSize: '14px' }} />
          {t("files.addFiles", "Add files")}
        </Anchor>
      </Text>
    );
  }

  // Show selection status when there are files in workbench
  if (selectedFiles.length === 0) {
    return (
      <Text size="sm" c="dimmed">
        {t("files.selectFromWorkbench", "Select files from the workbench or ") + " "}
        <Anchor
          size="sm"
          onClick={openFilesModal}
          style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '4px' }}
        >
          <FolderIcon style={{ fontSize: '14px' }} />
          {t("files.addFiles", "Add files")}
        </Anchor>