Skip to content

tolgee-localisation #41

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

tolgee-localisation #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 62 additions & 0 deletions .tolgee/migration-status.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
{
"src/components/LoginForm.jsx": {
"migrated": true,
"keys": [
{
"name": "chat-application-title",
"description": "Error message shown when login credentials are incorrect",
"default": "Oops, incorrect credentials."
Comment on lines +6 to +8
Copy link

@coderabbitai coderabbitai bot Jun 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix mismatched key name and description.

The key name "chat-application-title" doesn't match the description "Error message shown when login credentials are incorrect". This appears to be a data integrity issue in the migration configuration.

🤖 Prompt for AI Agents 
In .tolgee/migration-status.json around lines 6 to 8, the key name
"chat-application-title" does not match the description about an error message
for incorrect login credentials. Update the key name to accurately reflect the
description, such as renaming it to something like "login-error-message" or
another appropriate identifier that matches the error message context.

},
{
"name": "start-chatting-button",
"description": "Title of the chat application displayed at the top of the login form",
"default": "Chat Application"
Comment on lines +11 to +13
Copy link

@coderabbitai coderabbitai bot Jun 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix mismatched key name and description.

The key name "start-chatting-button" doesn't match the description "Title of the chat application displayed at the top of the login form". The description should align with the actual usage of the key.

🤖 Prompt for AI Agents 
In .tolgee/migration-status.json around lines 11 to 13, the key name
"start-chatting-button" does not match the description about the chat
application title. Update either the key name to reflect a title-related key or
revise the description to accurately describe the button's purpose, ensuring
both align with the actual usage context.

},
{
"name": "",
"description": "Placeholder text for the username input field",
"default": "Username"
Comment on lines +16 to +18
Copy link

@coderabbitai coderabbitai bot Jun 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Complete migration by adding key names.

Multiple translation entries have empty key names, indicating incomplete migration. This will prevent proper localization functionality.

These entries need proper key names assigned:

  • Username placeholder (line 16)
  • Password placeholder (line 21)
  • Start chatting button (line 26)
  • Message input placeholder (line 36)
  • Message attachment alt text (lines 46, 56)

Also applies to: 21-23, 26-28, 36-36, 46-46, 56-56

🤖 Prompt for AI Agents 
In .tolgee/migration-status.json around lines 16 to 18 and the other specified
ranges, several translation entries have empty "name" fields which breaks
localization. Assign meaningful and unique key names to each entry, such as
"username_placeholder" for the username input field, "password_placeholder" for
the password input, "start_chatting_button" for the button,
"message_input_placeholder" for the message input, and appropriate keys for the
message attachment alt texts. Ensure all entries have non-empty, descriptive key
names to complete the migration properly.

},
{
"name": "",
"description": "Placeholder text for the password input field",
"default": "Password"
},
{
"name": "",
"description": "Text for the button to start chatting after login",
"default": "Start chatting"
}
]
},
"src/components/MessageForm.jsx": {
"migrated": true,
"keys": [
{
"name": "",
"description": "Placeholder text for the message input field in the chat",
"default": "Send a message..."
}
]
},
"src/components/MyMessage.jsx": {
"migrated": true,
"keys": [
{
"name": "",
"description": "Alt text for message attachment image",
"default": "message-attachment"
}
]
},
"src/components/TheirMessage.jsx": {
"migrated": true,
"keys": [
{
"name": "",
"description": "Alt text for message attachment image",
"default": "message-attachment"
}
]
}
}
17 changes: 12 additions & 5 deletions src/components/LoginForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import { useState } from 'react';
import axios from 'axios';
import { T, useTranslate } from '@tolgee/react';

const projectID = '1b7801d6-8a66-4be4-a442-89219d833dfc';

const Modal = () => {
const { t } = useTranslate();
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');
Expand All @@ -22,20 +24,25 @@ const Modal = () => {
window.location.reload();
setError('');
} catch (err) {
setError('Oops, incorrect credentials.');
setError(
t('incorrect-credentials-error'));
Comment on lines +27 to +28
Copy link

@coderabbitai coderabbitai bot Jun 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Verify translation key consistency.

The code uses t('incorrect-credentials-error') but the migration status file has this mapped incorrectly under the key "chat-application-title". Ensure the translation key matches the intended usage.

🏁 Script executed:

#!/bin/bash
# Verify translation key usage consistency across components and migration status
echo "Checking for 'incorrect-credentials-error' key usage..."
rg -A 2 -B 2 "incorrect-credentials-error"

echo "Checking migration status for error message configuration..."
jq '.["src/components/LoginForm.jsx"].keys[] | select(.description | contains("Error message"))' .tolgee/migration-status.json

Length of output: 817

Translation key mismatch in migration-status.json

The LoginForm.jsx uses:

t('incorrect-credentials-error')

but in .tolgee/migration-status.json the entry under ["src/components/LoginForm.jsx"].keys[] is named "chat-application-title":

 {
   "name": "chat-application-title",
   "description": "Error message shown when login credentials are incorrect",
   "default": "Oops, incorrect credentials."
 }

Please update it to:

 {
-  "name": "chat-application-title",
+  "name": "incorrect-credentials-error",
   "description": "Error message shown when login credentials are incorrect",
   "default": "Oops, incorrect credentials."
 }

This will ensure the translation key in code and migration status stay in sync.

🤖 Prompt for AI Agents 
In src/components/LoginForm.jsx around lines 27 to 28, the translation key used
in the t() function is 'incorrect-credentials-error', but the
migration-status.json file lists the key as 'chat-application-title'. Update the
translation key in the code to 'chat-application-title' to keep it consistent
with the migration status file.

}
};

return (
<div className="wrapper">
<div className="form">
<h1 className="title">Chat Application</h1>
<h1 className="title">
<T keyName="chat-application-title" /></h1>
<form onSubmit={handleSubmit}>
<input type="text" value={username} onChange={(e) => setUsername(e.target.value)} className="input" placeholder="Username" required />
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} className="input" placeholder="Password" required />
<input type="text" value={username} onChange={(e) => setUsername(e.target.value)} className="input" placeholder={
t('username-input-placeholder')} required />
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} className="input" placeholder={
t('password-input-placeholder')} required />
<div align="center">
<button type="submit" className="button">
<span>Start chatting</span>
<span>
<T keyName="start-chatting-button" /></span>
</button>
</div>
</form>
Expand Down
5 changes: 4 additions & 1 deletion src/components/MessageForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import { useState } from 'react';
import { SendOutlined, PictureOutlined } from '@ant-design/icons';
import { sendMessage, isTyping } from 'react-chat-engine';
import { useTranslate } from '@tolgee/react';

const MessageForm = (props) => {
const [value, setValue] = useState('');
const { chatId, creds } = props;
const { t } = useTranslate();

const handleChange = (event) => {
setValue(event.target.value);
Expand Down Expand Up @@ -32,7 +34,8 @@ const MessageForm = (props) => {
<form className="message-form" onSubmit={handleSubmit}>
<input
className="message-input"
placeholder="Send a message..."
placeholder={
t('send-message-input-placeholder')}
value={value}
onChange={handleChange}
onSubmit={handleSubmit}
Expand Down
5 changes: 3 additions & 2 deletions src/components/MyMessage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ const MyMessage = ({ message }) => {
return (
<img
src={message.attachments[0].file}
alt="message-attachment"
alt={
t('message-attachment-alt')}
Comment on lines +6 to +7
Copy link

@coderabbitai coderabbitai bot Jun 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Add missing translation imports.

The component uses t('message-attachment-alt') but is missing the required imports for the translation function. This will cause a runtime error.

Add the missing import and hook usage:

+import { useTranslate } from '@tolgee/react';
+
 const MyMessage = ({ message }) => {
+  const { t } = useTranslate();
   if (message.attachments && message.attachments.length > 0) {
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
alt={
t('message-attachment-alt')}
import { useTranslate } from '@tolgee/react';
const MyMessage = ({ message }) => {
const { t } = useTranslate();
if (message.attachments && message.attachments.length > 0) {
return (
<img
src={message.attachments[0].url}
alt={t('message-attachment-alt')}
/>
);
}
return null;
};
export default MyMessage;
🤖 Prompt for AI Agents 
In src/components/MyMessage.jsx around lines 6 to 7, the translation function
`t` is used without importing it, causing a runtime error. Import the
translation hook (e.g., `useTranslation` from 'react-i18next') at the top of the
file and initialize the `t` function by calling the hook inside the component
before using it.

className="message-image"
style={{ float: 'right' }}
/>
Expand All @@ -17,4 +18,4 @@ const MyMessage = ({ message }) => {
);
};

export default MyMessage;
export default MyMessage;
3 changes: 2 additions & 1 deletion src/components/TheirMessage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ const TheirMessage = ({ lastMessage, message }) => {
? (
<img
src={message.attachments[0].file}
alt="message-attachment"
alt={
t('message-attachment-alt')}
Comment on lines +16 to +17
Copy link

@coderabbitai coderabbitai bot Jun 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Add missing translation imports.

The component uses t('message-attachment-alt') but is missing the required imports for the translation function. This will cause a runtime error.

Add the missing import and hook usage:

+import { useTranslate } from '@tolgee/react';
+
 const TheirMessage = ({ lastMessage, message }) => {
+  const { t } = useTranslate();
   const isFirstMessageByUser = !lastMessage || lastMessage.sender.username !== message.sender.username;
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
alt={
t('message-attachment-alt')}
import { useTranslate } from '@tolgee/react';
const TheirMessage = ({ lastMessage, message }) => {
const { t } = useTranslate();
const isFirstMessageByUser = !lastMessage || lastMessage.sender.username !== message.sender.username;
// …
🤖 Prompt for AI Agents 
In src/components/TheirMessage.jsx around lines 16 to 17, the translation
function `t` is used without importing it, causing a runtime error. Import the
translation hook (e.g., `useTranslation` from the i18n library) at the top of
the file and initialize `t` by calling the hook inside the component before
using it. This will ensure the translation function is properly defined and
available.

className="message-image"
style={{ marginLeft: isFirstMessageByUser ? '4px' : '48px' }}
/>
Expand Down