Giters

TabbyML / pochi

Home Page:https://docs.getpochi.com

Repository from Github https://github.comTabbyML/pochiRepository from Github https://github.comTabbyML/pochi

Feat: Internationalize Chat UI Components

Sma1lboy opened this issue · comments

commented

Summary

The chat UI currently has hardcoded strings in several components. This issue tracks the effort to replace these hardcoded values by using the existing i18n implementation.

An i18n system is already in place at packages/vscode-webui/src/i18n, using i18next with support for English, Chinese, Japanese, and Korean.

Affected Components

Several components in the chat interface need to be updated. Here are some examples with links to the code:

Code Examples

Here are some specific examples of hardcoded strings that need to be internationalized.

  1. Task Completed Message in packages/vscode-webui/src/components/tool-invocation/tools/attempt-completion.tsx:

    <span className=\"flex items-center gap-2 font-bold text-emerald-700 text-sm dark:text-emerald-300\">
  <Check className=\"size-4\" />
  Task Completed
</span>

  2. Reading File Message in packages/vscode-webui/src/components/tool-invocation/tools/read-file.tsx:

    const title = (
  <>
    <StatusIcon isExecuting={isExecuting} tool={tool} />
    <span className=\"ml-2\" />
    {\"Reading \"}
    {path && (
      <FileBadge
        className=\"ml-1\"
        path={path}
        startLine={startLine}
        endLine={endLine}
      />
    )}
  </>
);

Suggested Solution

  1. Add Translation Keys: Add the necessary translation keys for the hardcoded strings (e.g., "Task Completed", "Reading ", "Continue", "Cancel", "Accept", "Reject", tool names) to the existing locale files (e.g., packages/vscode-webui/src/i18n/locales/en.json).
  2. Refactor Components: In the affected components, use the useTranslation hook from react-i18next to retrieve and display the translated strings.
  3. Provide Translations: Add the corresponding translations to the other language files (zh.json, jp.json, ko.json).

This will properly internationalize the chat UI and make it more accessible to a global audience.

🤖 Generated with Pochi

commented

Hello, I would like to work on this one. Thanks!

commented

Audit: Non-internalized strings in packages/vscode-webui

  • routes: /routes/sign-in.tsx, /routes/tasks.tsx hard-code UI copy (empty-state text, action labels, ARIA labels, date picker text).
  • core components: /components/attachment-preview-list.tsx, /components/checkpoint-ui.tsx, /components/dev-mode-button.tsx, /components/dev-retry-countdown.tsx, /components/reasoning-part.tsx, /components/welcome-screen.tsx, /components/tool-invocation/file-icon/file-icon.tsx, /components/tool-invocation/status-icon.tsx, /components/tool-invocation/command-execution-panel.tsx, /components/tool-invocation/new-problems.tsx, /components/tool-invocation/user-edits.tsx, /components/tool-invocation/file-badge.tsx all contain literal labels/tooltips.
  • tool renderers: every file under /components/tool-invocation/tools/ except those already using t()—e.g. list-files, read-file, write-to-file, apply-diff, multi-apply-diff, search-files, glob-files, execute-command, start-background-job, read-background-job-output, kill-background-job, todo-write, attempt-completion, web-fetch, new-task, mcp-tool-call—emits English strings for titles, statuses, truncation notices.
  • message rendering: /components/message/code-block.tsx and /components/message/message-list.tsx expose tooltips/fallback labels; /components/message/markdown.tsx renders truncation strings.
  • prompt form: /components/prompt-form/form-editor.tsx, /components/prompt-form/active-selection-badge.tsx, /components/prompt-form/auto-completion/mention-list.tsx, /components/prompt-form/context-mention/mention-list.tsx, /components/prompt-form/workflow-mention/mention-list.tsx contain placeholders and helper text.
  • features: /features/approval/components/retry-approval-button.tsx, /features/approval/components/tool-call-approval-button.tsx, /features/chat/components/subtask.tsx, /features/chat/components/error-message-view.tsx, /features/chat/page.tsx, /features/todo/components/todo-list.tsx still ship English-only UI strings.
  • other notable literals: /components/tool-invocation/tools/new-task/use-live-sub-task.tsx retry/step-limit errors, /components/tool-invocation/tools/new-task/index.tsx default "Subtask" badge.

Recommendation: move these literals into the locale JSON files under src/i18n/locales/* and replace with t() lookups (or translated props) so the VS Code web UI is fully internationalized.