refactor(web): timezone select options display with i18n support by bowenliang123 · Pull Request #2497 · agentscope-ai/CoPaw

bowenliang123 · 2026-03-29T14:56:11Z

Description

[Describe what this PR does and why]

Replace static timezone list with @vvo/tzdb library for accurate offset data, to avoid hardcoded display text for timezones
Add i18n support - timezone names now display in current page language (zh/en/ru/ja)
New display format: Localized Name (+08:00, Asia/Shanghai) instead of Asia/Shanghai (UTC+8)
Before:

After:

Related Issue:* Fixes #(issue_number) or Relates to #(issue_number)

Security Considerations: [If applicable, e.g. channel auth, env/config handling]

Type of Change

Component(s) Affected

Checklist

I ran pre-commit run --all-files locally and it passes
If pre-commit auto-fixed files, I committed those changes and reran checks
I ran tests locally (pytest or as relevant) and they pass
Documentation updated (if needed)
Ready for review

Testing

[How to test these changes]

Local Verification Evidence

pre-commit run --all-files
# paste summary result

pytest
# paste summary result

Additional Notes

[Optional: any other context]

github-actions · 2026-03-29T14:56:24Z

Welcome to CoPaw! 🐾

Hi @bowenliang123, this is your 7th Pull Request.

🙌 Join Developer Community

Thanks so much for your contribution! We'd love to invite you to join the official CoPaw developer group! You can find the Discord and DingTalk group links under the "Developer Community" section on our docs page:
https://copaw.agentscope.io/docs/community

We truly appreciate your enthusiasm—and look forward to your future contributions! 😊

We'll review your PR soon.

gemini-code-assist

Code Review

This pull request replaces the static timezone list with a dynamic, localized implementation using the @vvo/tzdb library and a new useTimezoneOptions hook. This update enables translated timezone labels with UTC offsets in the agent configuration and cron job components. Feedback suggests improving the scalability of the locale mapping and refactoring the timezone mapping logic to avoid redundancy.

console/src/constants/timezone.ts

Copilot

Pull request overview

Refactors the console’s timezone <Select> options to be generated dynamically (with current offsets) and localized via the current i18n language, replacing the prior hardcoded label strings.

Changes:

Replaced static timezone option labels with @vvo/tzdb-backed option generation (getTimezoneOptions) and localized display names via Intl.DateTimeFormat.
Introduced useTimezoneOptions() hook and switched CronJobs + Agent Config selects to use it.
Updated exports/imports to remove TIMEZONE_OPTIONS re-exports from CronJobs components.

Reviewed changes

Copilot reviewed 7 out of 8 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
console/src/pages/Control/CronJobs/components/index.ts	Stops re-exporting `TIMEZONE_OPTIONS` from CronJobs components.
console/src/pages/Control/CronJobs/components/constants.ts	Removes passthrough export of timezone options; keeps form defaults only.
console/src/pages/Control/CronJobs/components/JobDrawer.tsx	Switches timezone `<Select>` options to `useTimezoneOptions()`.
console/src/pages/Agent/Config/components/ReactAgentCard.tsx	Switches timezone `<Select>` options to `useTimezoneOptions()`.
console/src/hooks/useTimezoneOptions.ts	Adds hook to memoize timezone options by current `i18n.language`.
console/src/constants/timezone.ts	Implements tzdb-backed, localized timezone option generation.
console/package.json	Adds `@vvo/tzdb` dependency.
console/package-lock.json	Locks `@vvo/tzdb` dependency.

Files not reviewed (1)

console/package-lock.json: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

console/src/constants/timezone.ts

xieyxclack · 2026-03-29T15:30:48Z

Thank you for your contribution!
Please format the code via cd console && npm run format.

Or refer to https://github.com/agentscope-ai/CoPaw/blob/main/CONTRIBUTING.md#4-code-and-quality

bowenliang123 · 2026-03-29T16:26:14Z

Fixed the lint issues. Sorry to forgot to reformat the code again.

Copilot

Pull request overview

Copilot reviewed 7 out of 8 changed files in this pull request and generated 4 comments.

Files not reviewed (1)

console/package-lock.json: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-29T16:29:56Z

console/src/pages/Control/CronJobs/components/JobDrawer.tsx

                .toLowerCase()
                .includes(input.toLowerCase())
            }
-            options={TIMEZONE_OPTIONS}
+            options={useTimezoneOptions()}
          />


useTimezoneOptions() is a React hook; calling it directly inside JSX props (in the options={...} expression) will trip react-hooks/rules-of-hooks and can break hook ordering if this render path ever becomes conditional. Call the hook once at the top of the component (e.g., assign to a timezoneOptions const) and pass that variable to Select instead.

Copilot · 2026-03-29T16:29:56Z

console/src/pages/Agent/Config/components/ReactAgentCard.tsx

                .toLowerCase()
                .includes(input.toLowerCase())
            }
-            options={TIMEZONE_OPTIONS}
+            options={useTimezoneOptions()}
            onChange={onTimezoneChange}


useTimezoneOptions() is a React hook; calling it inline in options={useTimezoneOptions()} violates react-hooks/rules-of-hooks (this repo enables the recommended react-hooks rules) and may fail linting. Invoke the hook once near the top of ReactAgentCard and pass the resulting array to the Select.

Copilot · 2026-03-29T16:29:56Z

console/src/hooks/useTimezoneOptions.ts

+
+export function useTimezoneOptions(): TimezoneOption[] {
+  const { i18n } = useTranslation();
+  return useMemo(() => getTimezoneOptions(i18n.language), [i18n.language]);


i18n.language can include region subtags (e.g. en-US). In this repo App.tsx normalizes language via lng.split("-")[0] when deriving locale. Consider normalizing here too (and/or using i18n.resolvedLanguage) before passing into getTimezoneOptions, otherwise the locale map in getLocalizedName will fall back to English unexpectedly.

Suggested change

return useMemo(() => getTimezoneOptions(i18n.language), [i18n.language]);

const language = i18n.resolvedLanguage ?? i18n.language;

return useMemo(

() => {

const locale = (language ?? "en").split("-")[0];

return getTimezoneOptions(locale);

},

[language],

);

Copilot · 2026-03-29T16:29:56Z

console/src/constants/timezone.ts

+    .sort((a, b) => a.currentTimeOffsetInMinutes - b.currentTimeOffsetInMinutes)
+    .map((tz) => {
+      const value = tz.name === "Etc/UTC" ? "UTC" : tz.name;
+      return {
+        value,
+        label: `${getLocalizedName(tz.name, lang)} (${
+          tz.currentTimeFormat.split(" ")[0]
+        }, ${value})`,


The offset portion of the label is derived from tz.currentTimeFormat.split(" ")[0], which is brittle and depends on the library’s string format (and may include a UTC prefix, differing from the intended +08:00 display). Prefer formatting tz.currentTimeOffsetInMinutes into a ±HH:MM string directly so the UI output is stable and matches the desired format.

refactor: timezone select options display with i18n support

8b9caf6

Copilot AI review requested due to automatic review settings March 29, 2026 14:56

Copilot started reviewing on behalf of bowenliang123 March 29, 2026 14:56 View session

style

10b2bfd

gemini-code-assist bot reviewed Mar 29, 2026

View reviewed changes

console/src/constants/timezone.ts Show resolved Hide resolved

console/src/constants/timezone.ts Outdated Show resolved Hide resolved

Copilot AI reviewed Mar 29, 2026

View reviewed changes

console/src/constants/timezone.ts Outdated Show resolved Hide resolved

refactor: replace TIMEZONE_IDS array with set for improved performance

586c59d

style

d1ca051

Copilot AI review requested due to automatic review settings March 29, 2026 16:25

Copilot started reviewing on behalf of bowenliang123 March 29, 2026 16:26 View session

Copilot AI reviewed Mar 29, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(web): timezone select options display with i18n support#2497

refactor(web): timezone select options display with i18n support#2497
bowenliang123 wants to merge 4 commits intoagentscope-ai:mainfrom
bowenliang123:timezone-i18n

bowenliang123 commented Mar 29, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 29, 2026

Welcome to CoPaw! 🐾

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

xieyxclack commented Mar 29, 2026

Uh oh!

bowenliang123 commented Mar 29, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 29, 2026

Uh oh!

Copilot AI Mar 29, 2026

Uh oh!

Copilot AI Mar 29, 2026

Uh oh!

Copilot AI Mar 29, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

-  return useMemo(() => getTimezoneOptions(i18n.language), [i18n.language]);
+  const language = i18n.resolvedLanguage ?? i18n.language;
+  return useMemo(
+    () => {
+      const locale = (language ?? "en").split("-")[0];
+      return getTimezoneOptions(locale);
+    },
+    [language],
+  );

Conversation

bowenliang123 commented Mar 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of Change

Component(s) Affected

Checklist

Testing

Local Verification Evidence

Additional Notes

Uh oh!

github-actions bot commented Mar 29, 2026

Welcome to CoPaw! 🐾

🙌 Join Developer Community

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

xieyxclack commented Mar 29, 2026

Uh oh!

bowenliang123 commented Mar 29, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Mar 29, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 29, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 29, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 29, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

bowenliang123 commented Mar 29, 2026 •

edited

Loading