feat: copyable i18n key for debug mode (#2595)

### TL;DR

Introduce a debug mode in development environment and add functionality to make i18n keys copyable. This feature woks in React parts only.

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/XqC2uNFuj0wg8I60sMUh/19c46a94-546d-4954-920a-55e83ee6d9d8.png)

### What changed?

1. Added `Typography` from `antd` and `GlobeIcon` from `lucide-react`.
2. Introduced a debug mode which can be toggled via URL parameter `debug`. You can add `?debug=true` in any page. It works only in development environment.
3. Added a post-processor to `i18n` configuration to make i18n keys copyable in debug mode.

### How to test?

1. Run the application in development mode.
2. Add `?debug=true` to the URL parameters. (or add `debug=true` in genera section of `config.toml`
3. Check if i18n keys(Glob Icon) are copyable.

### Why make this change?

To enhance debugging capabilities and allow developers to easily copy i18n keys for translation or reference.

### Ref
- [Teams thread](https://teams.microsoft.com/l/message/19:[email protected]/1722403051072?tenantId=13c6a44d-9b52-4b9e-aa34-0513ee7131f2&groupId=74ae2c4d-ec4d-4fdf-b2c2-f5041d1e8631&parentMessageId=1722403051072&teamName=devops&channelName=Backend.AI%20Talks&createdTime=1722403051072)
- https://www.i18next.com/misc/creating-own-plugins

react/src/components/AgentList.tsx

@@ -167,7 +167,7 @@ const AgentList: React.FC<AgentListProps> = ({
       rowScope: 'row',
     },
     {
-      title: `ID / ${t('agent.Endpoint')}`,
+      title: <>ID / {t('agent.Endpoint')}</>,
       key: 'id',
       dataIndex: 'id',
       fixed: 'left',

react/src/components/DefaultProviders.tsx

@@ -8,7 +8,7 @@ import { ThemeModeProvider, useThemeMode } from '../hooks/useThemeMode';
 import indexCss from '../index.css?raw';
 import { StyleProvider, createCache } from '@ant-design/cssinjs';
 import { useUpdateEffect } from 'ahooks';
-import { App, AppProps, ConfigProvider, theme } from 'antd';
+import { App, AppProps, ConfigProvider, theme, Typography } from 'antd';
 import en_US from 'antd/locale/en_US';
 import ko_KR from 'antd/locale/ko_KR';
 import dayjs from 'dayjs';
@@ -23,6 +23,7 @@ import weekday from 'dayjs/plugin/weekday';
 import i18n from 'i18next';
 import Backend from 'i18next-http-backend';
 import { createStore, Provider as JotaiProvider } from 'jotai';
+import { GlobeIcon } from 'lucide-react';
 import React, {
   Suspense,
   useEffect,
@@ -84,13 +85,43 @@ export interface DefaultProvidersProps extends ReactWebComponentProps {
   children?: React.ReactNode;
 }
 
+let isDebugModeByParam = false;
+if (process.env.NODE_ENV === 'development') {
+  const urlParams = new URLSearchParams(window.location.search);
+  isDebugModeByParam = urlParams.get('debug') === 'true';
+}
+
 i18n
   .use(initReactI18next) // passes i18n down to react-i18next
   .use(Backend)
+  .use({
+    type: 'postProcessor',
+    name: 'copyableI18nKey',
+    process: function (value: any, key: any, options: any, translator: any) {
+      // @ts-ignore
+      if (globalThis?.backendaiwebui?.debug || isDebugModeByParam) {
+        return (
+          <Typography.Text
+            copyable={{
+              text: key,
+              tooltips: key,
+              icon: <GlobeIcon />,
+            }}
+          >
+            {value}
+          </Typography.Text>
+        );
+      } else {
+        return value;
+      }
+    },
+  })
   .init({
     backend: {
       loadPath: '/resources/i18n/{{lng}}.json',
     },
+    postProcess:
+      process.env.NODE_ENV === 'development' ? ['copyableI18nKey'] : [],
     lng:
       //@ts-ignore
       globalThis?.backendaioptions?.get('language', 'default', 'general') ||