diff --git a/frontend/src/locale/en.json b/frontend/src/locale/en.json index c6ae8023..7be4b568 100644 --- a/frontend/src/locale/en.json +++ b/frontend/src/locale/en.json @@ -69,10 +69,28 @@ "noData": "No existing Chatbots" }, "analytics": { - "label": "Analytics" + "label": "Analytics", + "filterByChatbot": "Filter by chatbot", + "selectChatbot": "Select chatbot", + "filterOptions": { + "hour": "Hour", + "last24Hours": "24 Hours", + "last7Days": "7 Days", + "last15Days": "15 Days", + "last30Days": "30 Days" + }, + "messages": "Messages", + "tokenUsage": "Token Usage", + "feedback": "Feedback", + "filterPlaceholder": "Filter", + "none": "None" }, "logs": { - "label": "Logs" + "label": "Logs", + "filterByChatbot": "Filter by chatbot", + "selectChatbot": "Select chatbot", + "none": "None", + "tableHeader": "API generated / chatbot conversations" }, "tools": { "label": "Tools" diff --git a/frontend/src/settings/Analytics.tsx b/frontend/src/settings/Analytics.tsx index 8baad361..8f3c45bb 100644 --- a/frontend/src/settings/Analytics.tsx +++ b/frontend/src/settings/Analytics.tsx @@ -1,4 +1,5 @@ import React, { useState, useEffect } from 'react'; +import { useTranslation } from 'react-i18next'; import { BarElement, CategoryScale, @@ -28,15 +29,29 @@ ChartJS.register( Legend, ); -const filterOptions = [ - { label: 'Hour', value: 'last_hour' }, - { label: '24 Hours', value: 'last_24_hour' }, - { label: '7 Days', value: 'last_7_days' }, - { label: '15 Days', value: 'last_15_days' }, - { label: '30 Days', value: 'last_30_days' }, -]; - export default function Analytics() { + const { t } = useTranslation(); + + const filterOptions = [ + { label: t('settings.analytics.filterOptions.hour'), value: 'last_hour' }, + { + label: t('settings.analytics.filterOptions.last24Hours'), + value: 'last_24_hour', + }, + { + label: t('settings.analytics.filterOptions.last7Days'), + value: 'last_7_days', + }, + { + label: t('settings.analytics.filterOptions.last15Days'), + value: 'last_15_days', + }, + { + label: t('settings.analytics.filterOptions.last30Days'), + value: 'last_30_days', + }, + ]; + const [messagesData, setMessagesData] = useState

- Filter by chatbot + {t('settings.analytics.filterByChatbot')}

{ setSelectedChatbot( chatbots.find((item) => item.id === chatbot.value), @@ -199,12 +214,12 @@ export default function Analytics() {

- Messages + {t('settings.analytics.messages')}

- Token Usage + {t('settings.analytics.tokenUsage')}

- Feedback + {t('settings.analytics.feedback')}

item.positive, ), backgroundColor: '#7D54D1', }, { - label: 'Negative Feedback', + label: t('settings.analytics.negativeFeedback'), data: Object.values(feedbackData || {}).map( (item) => item.negative, ), diff --git a/frontend/src/settings/Logs.tsx b/frontend/src/settings/Logs.tsx index 1e248d46..df406122 100644 --- a/frontend/src/settings/Logs.tsx +++ b/frontend/src/settings/Logs.tsx @@ -1,4 +1,5 @@ import React, { useState, useEffect, useRef, useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; import userService from '../api/services/userService'; import ChevronRight from '../assets/chevron-right.svg'; @@ -8,6 +9,7 @@ import { APIKeyData, LogData } from './types'; import CoppyButton from '../components/CopyButton'; export default function Logs() { + const { t } = useTranslation(); const [chatbots, setChatbots] = useState([]); const [selectedChatbot, setSelectedChatbot] = useState(); const [logs, setLogs] = useState([]); @@ -66,7 +68,7 @@ export default function Logs() {

- Filter by chatbot + {t('settings.logs.filterByChatbot')}

{loadingChatbots ? ( @@ -78,9 +80,9 @@ export default function Logs() { label: chatbot.name, value: chatbot.id, })), - { label: 'None', value: '' }, + { label: t('settings.logs.none'), value: '' }, ]} - placeholder="Select chatbot" + placeholder={t('settings.logs.selectChatbot')} onSelect={(chatbot: { label: string; value: string }) => { setSelectedChatbot( chatbots.find((item) => item.id === chatbot.value), @@ -120,6 +122,7 @@ type LogsTableProps = { }; function LogsTable({ logs, setPage }: LogsTableProps) { + const { t } = useTranslation(); const observerRef = useRef(); const firstObserver = useCallback((node: HTMLDivElement) => { if (observerRef.current) { @@ -134,7 +137,7 @@ function LogsTable({ logs, setPage }: LogsTableProps) {

- API generated / chatbot conversations + {t('settings.logs.tableHeader')}

chevron-right