@qlover/create-app 0.8.0 → 0.10.0

package/dist/templates/react-app/__tests__/src/uikit/components/chatMessage/ChatRoot.test.tsx

@@ -0,0 +1,274 @@
+import { BootstrapTest } from '@__mocks__/BootstrapTest';
+import { TestApp } from '@__mocks__/components';
+import * as chatI18nKeys from '@config/Identifier/components/component.chatMessage';
+import { ChatMessageRole, ChatMessageStore } from '@qlover/corekit-bridge';
+import { render, screen } from '@testing-library/react';
+import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
+import { logger } from '@/core/globals';
+import { ChatMessageBridge } from '@/uikit/components/chatMessage/ChatMessageBridge';
+import { ChatRoot } from '@/uikit/components/chatMessage/ChatRoot';
+import type { ChatMessageI18nInterface } from '@config/i18n/chatMessageI18n';
+import type { MessageGetwayInterface } from '@qlover/corekit-bridge';
+
+// Mock i18n values matching the actual i18n keys
+const mockI18n: ChatMessageI18nInterface = {
+  send: chatI18nKeys.COMPONENT_CHAT_SEND,
+  stop: chatI18nKeys.COMPONENT_CHAT_STOP,
+  loading: chatI18nKeys.COMPONENT_CHAT_LOADING,
+  inputPlaceholder: chatI18nKeys.COMPONENT_CHAT_INPUT_PLACEHOLDER,
+  empty: chatI18nKeys.COMPONENT_CHAT_EMPTY,
+  start: chatI18nKeys.COMPONENT_CHAT_START,
+  retry: chatI18nKeys.COMPONENT_CHAT_RETRY,
+  duration: chatI18nKeys.COMPONENT_CHAT_DURATION
+};
+
+// Simple mock gateway for testing
+class MockMessageGateway implements MessageGetwayInterface {
+  sendMessage = vi.fn();
+}
+
+describe('ChatRoot Component', () => {
+  let messagesStore: ChatMessageStore<string>;
+  let mockGateway: MockMessageGateway;
+  let bridge: ChatMessageBridge<string>;
+
+  beforeAll(async () => {
+    await BootstrapTest.main({
+      root: globalThis,
+      bootHref: 'http://localhost:3000/en/test'
+    });
+  });
+
+  beforeEach(() => {
+    // Create fresh instances for each test
+    messagesStore = new ChatMessageStore<string>();
+    mockGateway = new MockMessageGateway();
+    bridge = new ChatMessageBridge<string>(messagesStore, {
+      gateway: mockGateway,
+      logger: logger,
+      senderName: 'TestSender',
+      gatewayOptions: {}
+    });
+
+    // Reset mocks
+    vi.clearAllMocks();
+  });
+
+  describe('Component Rendering', () => {
+    it('should render ChatRoot with all required components', () => {
+      render(
+        <TestApp>
+          <ChatRoot bridge={bridge} tt={mockI18n} />
+        </TestApp>
+      );
+
+      // Check main container
+      const chatRoot = screen.getByTestId('ChatRoot');
+      expect(chatRoot).toBeDefined();
+
+      // Check MessagesList component
+      const messagesList = screen.getByTestId('MessagesList');
+      expect(messagesList).toBeDefined();
+
+      // Check FocusBar component
+      const focusBar = screen.getByTestId('FocusBar');
+      expect(focusBar).toBeDefined();
+    });
+
+    it('should display empty state initially', () => {
+      render(
+        <TestApp>
+          <ChatRoot bridge={bridge} tt={mockI18n} />
+        </TestApp>
+      );
+
+      // Empty state text should be visible
+      // Note: The actual text will be the i18n key, not the translated text in tests
+      const emptyText = screen.getByText(/component_chat:empty/i);
+      expect(emptyText).toBeDefined();
+    });
+
+    it('should render textarea for input', () => {
+      render(
+        <TestApp>
+          <ChatRoot bridge={bridge} tt={mockI18n} />
+        </TestApp>
+      );
+
+      const textarea = screen.getByRole('textbox');
+      expect(textarea).toBeDefined();
+    });
+
+    it('should render send button', () => {
+      render(
+        <TestApp>
+          <ChatRoot bridge={bridge} tt={mockI18n} />
+        </TestApp>
+      );
+
+      const sendButton = screen.getByTestId('FocusBar-Button-Send');
+      expect(sendButton).toBeDefined();
+    });
+  });
+
+  describe('Props Integration', () => {
+    it('should accept and use bridge prop', () => {
+      render(
+        <TestApp>
+          <ChatRoot bridge={bridge} tt={mockI18n} />
+        </TestApp>
+      );
+
+      // Verify bridge is connected by checking store state
+      const state = messagesStore.state;
+      expect(state).toBeDefined();
+      expect(state.messages).toEqual([]);
+      expect(state.draftMessages).toEqual([]);
+    });
+
+    it('should accept different bridge instances', () => {
+      const newStore = new ChatMessageStore<string>();
+      const newBridge = new ChatMessageBridge<string>(newStore, {
+        gateway: mockGateway,
+        logger: logger,
+        senderName: 'NewTestSender',
+        gatewayOptions: {}
+      });
+
+      render(
+        <TestApp>
+          <ChatRoot bridge={newBridge} tt={mockI18n} />
+        </TestApp>
+      );
+
+      const chatRoot = screen.getByTestId('ChatRoot');
+      expect(chatRoot).toBeDefined();
+    });
+  });
+
+  describe('Bridge Integration', () => {
+    it('should connect to message store through bridge', () => {
+      render(
+        <TestApp>
+          <ChatRoot bridge={bridge} tt={mockI18n} />
+        </TestApp>
+      );
+
+      // Bridge should have access to store
+      const messageStore = bridge.getMessageStore();
+      expect(messageStore).toBe(messagesStore);
+    });
+
+    it('should update UI when content is changed via bridge', () => {
+      render(
+        <TestApp>
+          <ChatRoot bridge={bridge} tt={mockI18n} />
+        </TestApp>
+      );
+
+      // Initially, send button should be disabled (no content)
+      const sendButton = screen.getByTestId('FocusBar-Button-Send');
+      expect(sendButton).toHaveProperty('disabled', true);
+
+      // Change content via bridge
+      bridge.onChangeContent('Test message');
+
+      // Now send button should be enabled (has content)
+      // Note: This requires the component to re-render based on store updates
+      const state = messagesStore.state;
+      expect(state.draftMessages.length).toBeGreaterThan(0);
+      expect(state.draftMessages[0]?.content).toBe('Test message');
+    });
+  });
+
+  describe('Store State Management', () => {
+    it('should reflect message store state', () => {
+      render(
+        <TestApp>
+          <ChatRoot bridge={bridge} tt={mockI18n} />
+        </TestApp>
+      );
+
+      // Initial state should be empty
+      const initialState = messagesStore.state;
+      expect(initialState.messages).toEqual([]);
+      expect(initialState.draftMessages).toEqual([]);
+      // These properties might be undefined initially, which is fine
+      expect(initialState.disabledSend).toBeFalsy();
+      expect(initialState.streaming).toBeFalsy();
+    });
+
+    it('should update when messages are added to store', () => {
+      render(
+        <TestApp>
+          <ChatRoot bridge={bridge} tt={mockI18n} />
+        </TestApp>
+      );
+
+      // Add a message to the store
+      messagesStore.addMessage({
+        id: 'test-1',
+        role: ChatMessageRole.USER,
+        content: 'Test message',
+        loading: false,
+        startTime: Date.now()
+      });
+
+      // Verify message is in store
+      const state = messagesStore.state;
+      expect(state.messages.length).toBe(1);
+      expect(state.messages[0]?.content).toBe('Test message');
+    });
+  });
+
+  describe('Button States', () => {
+    it('should have disabled send button when no content', () => {
+      render(
+        <TestApp>
+          <ChatRoot bridge={bridge} tt={mockI18n} />
+        </TestApp>
+      );
+
+      const sendButton = screen.getByTestId('FocusBar-Button-Send');
+      expect(sendButton).toHaveProperty('disabled', true);
+    });
+  });
+
+  describe('Component Structure', () => {
+    it('should have correct CSS classes for layout', () => {
+      render(
+        <TestApp>
+          <ChatRoot bridge={bridge} tt={mockI18n} />
+        </TestApp>
+      );
+
+      const chatRoot = screen.getByTestId('ChatRoot');
+      expect(chatRoot.className).toContain('flex');
+      expect(chatRoot.className).toContain('flex-col');
+    });
+
+    it('should render MessagesList with correct data-testid', () => {
+      render(
+        <TestApp>
+          <ChatRoot bridge={bridge} tt={mockI18n} />
+        </TestApp>
+      );
+
+      const messagesList = screen.getByTestId('MessagesList');
+      expect(messagesList).toBeDefined();
+      expect(messagesList.className).toContain('overflow-y-auto');
+    });
+
+    it('should render FocusBar with correct data-testid', () => {
+      render(
+        <TestApp>
+          <ChatRoot bridge={bridge} tt={mockI18n} />
+        </TestApp>
+      );
+
+      const focusBar = screen.getByTestId('FocusBar');
+      expect(focusBar).toBeDefined();
+      expect(focusBar.className).toContain('border-t');
+    });
+  });
+});

package/dist/templates/react-app/config/IOCIdentifier.ts

@@ -6,7 +6,6 @@ import type { ExecutorPageBridgeInterface } from '@/base/port/ExecutorPageBridge
 import type { JSONStoragePageBridgeInterface } from '@/base/port/JSONStoragePageBridgeInterface';
 import type { RequestPageBridgeInterface } from '@/base/port/RequestPageBridgeInterface';
 import type { I18nService } from '@/base/services/I18nService';
-import type { ProcesserExecutor } from '@/base/services/ProcesserExecutor';
 import type { RouteService } from '@/base/services/RouteService';
 import type { UserService } from '@/base/services/UserService';
 import type * as CorekitBridge from '@qlover/corekit-bridge';
@@ -29,8 +28,16 @@ export const IOCIdentifier = Object.freeze({
   AntdStaticApiInterface: 'AntdStaticApiInterface',
   RequestCatcherInterface: 'RequestCatcherInterface',
   I18nServiceInterface: 'I18nServiceInterface',
-  ProcesserExecutorInterface: 'ProcesserExecutorInterface',
   RouteServiceInterface: 'RouteServiceInterface',
+  /**
+   * User service interface
+   *
+   * This interface is implemented by the corekit-bridge UserServiceInterface interface, used to manage user information and authentication.
+   *
+   * @example ```
+   * const userService = useIOC(IOCIdentifier.UserServiceInterface);
+   * ```
+   */
   UserServiceInterface: 'UserServiceInterface',
   I18nKeyErrorPlugin: 'I18nKeyErrorPlugin',
   FeApiCommonPlugin: 'FeApiCommonPlugin',
@@ -71,7 +78,6 @@ export interface IOCIdentifierMap {
   [IOCIdentifier.AntdStaticApiInterface]: DialogHandler;
   [IOCIdentifier.RequestCatcherInterface]: RequestStatusCatcher;
   [IOCIdentifier.I18nServiceInterface]: I18nService;
-  [IOCIdentifier.ProcesserExecutorInterface]: ProcesserExecutor;
   [IOCIdentifier.RouteServiceInterface]: RouteService;
   [IOCIdentifier.UserServiceInterface]: UserService;
   [IOCIdentifier.I18nKeyErrorPlugin]: I18nKeyErrorPlugin;

package/dist/templates/react-app/config/Identifier/components/component.chatMessage.ts

@@ -0,0 +1,56 @@
+/**
+ * @description Chat send button text
+ * @localZh 发送
+ * @localEn Send
+ */
+export const COMPONENT_CHAT_SEND = 'component_chat:send';
+
+/**
+ * @description Chat stop button text
+ * @localZh 停止
+ * @localEn Stop
+ */
+export const COMPONENT_CHAT_STOP = 'component_chat:stop';
+
+/**
+ * @description Chat loading text
+ * @localZh 加载中...
+ * @localEn Loading...
+ */
+export const COMPONENT_CHAT_LOADING = 'component_chat:loading';
+
+/**
+ * @description Chat input placeholder
+ * @localZh 输入消息... (Ctrl+Enter 发送)
+ * @localEn Type a message... (Ctrl+Enter to send)
+ */
+export const COMPONENT_CHAT_INPUT_PLACEHOLDER =
+  'component_chat:input_placeholder';
+
+/**
+ * @description Chat empty messages
+ * @localZh 暂无对话
+ * @localEn No messages yet
+ */
+export const COMPONENT_CHAT_EMPTY = 'component_chat:empty';
+
+/**
+ * @description Chat start conversation
+ * @localZh 开始对话
+ * @localEn Start a conversation
+ */
+export const COMPONENT_CHAT_START = 'component_chat:start';
+
+/**
+ * @description Chat retry button
+ * @localZh 重试
+ * @localEn Retry
+ */
+export const COMPONENT_CHAT_RETRY = 'component_chat:retry';
+
+/**
+ * @description Chat duration label
+ * @localZh 耗时
+ * @localEn Duration
+ */
+export const COMPONENT_CHAT_DURATION = 'component_chat:duration';

package/dist/templates/react-app/config/Identifier/components/component.messageBaseList.ts

@@ -0,0 +1,103 @@
+/**
+ * @description Message gateway test title
+ * @localZh 消息网关测试
+ * @localEn Message Gateway Test
+ */
+export const COMPONENT_MESSAGE_BASE_LIST_TITLE =
+  'component_message_base_list:title';
+
+/**
+ * @description Message gateway test description
+ * @localZh 发送消息并等待网关响应
+ * @localEn Send messages and wait for gateway response
+ */
+export const COMPONENT_MESSAGE_BASE_LIST_DESCRIPTION =
+  'component_message_base_list:description';
+
+/**
+ * @description No messages yet
+ * @localZh 暂无消息
+ * @localEn No messages yet
+ */
+export const COMPONENT_MESSAGE_BASE_LIST_NO_MESSAGES =
+  'component_message_base_list:no_messages';
+
+/**
+ * @description Send your first message to get started
+ * @localZh 发送第一条消息开始使用
+ * @localEn Send your first message to get started
+ */
+export const COMPONENT_MESSAGE_BASE_LIST_GET_STARTED =
+  'component_message_base_list:get_started';
+
+/**
+ * @description User label
+ * @localZh 你
+ * @localEn You
+ */
+export const COMPONENT_MESSAGE_BASE_LIST_USER =
+  'component_message_base_list:user';
+
+/**
+ * @description Gateway label
+ * @localZh 网关
+ * @localEn Gateway
+ */
+export const COMPONENT_MESSAGE_BASE_LIST_GATEWAY =
+  'component_message_base_list:gateway';
+
+/**
+ * @description Processing status
+ * @localZh 处理中...
+ * @localEn Processing...
+ */
+export const COMPONENT_MESSAGE_BASE_LIST_PROCESSING =
+  'component_message_base_list:processing';
+
+/**
+ * @description Gateway failed label
+ * @localZh 网关（失败）
+ * @localEn Gateway (Failed)
+ */
+export const COMPONENT_MESSAGE_BASE_LIST_GATEWAY_FAILED =
+  'component_message_base_list:gateway_failed';
+
+/**
+ * @description Failed to send message
+ * @localZh 发送消息失败
+ * @localEn Failed to send message
+ */
+export const COMPONENT_MESSAGE_BASE_LIST_SEND_FAILED =
+  'component_message_base_list:send_failed';
+
+/**
+ * @description Gateway response label
+ * @localZh 网关响应
+ * @localEn Gateway Response
+ */
+export const COMPONENT_MESSAGE_BASE_LIST_GATEWAY_RESPONSE =
+  'component_message_base_list:gateway_response';
+
+/**
+ * @description Input placeholder
+ * @localZh 在此输入您的消息...
+ * @localEn Type your message here...
+ */
+export const COMPONENT_MESSAGE_BASE_LIST_INPUT_PLACEHOLDER =
+  'component_message_base_list:input_placeholder';
+
+/**
+ * @description Send button
+ * @localZh 发送
+ * @localEn Send
+ */
+export const COMPONENT_MESSAGE_BASE_LIST_SEND_BUTTON =
+  'component_message_base_list:send_button';
+
+/**
+ * @description Error handling tip
+ * @localZh 提示：尝试发送 "error" 或 "Failed" 来测试错误处理
+ * @localEn Tip: Try sending "error" or "Failed" to test error handling
+ */
+export const COMPONENT_MESSAGE_BASE_LIST_ERROR_TIP =
+  'component_message_base_list:error_tip';

package/dist/templates/react-app/config/Identifier/pages/index.ts

@@ -4,5 +4,6 @@ export * from './page.home';
 export * from './page.identifiter';
 export * from './page.jsonStorage';
 export * from './page.login';
+export * from './page.message';
 export * from './page.register';
 export * from './page.request';

package/dist/templates/react-app/config/Identifier/pages/page.message.ts

@@ -0,0 +1,20 @@
+/**
+ * @description Message page title
+ * @localZh 消息测试
+ * @localEn Message Test
+ */
+export const PAGE_MESSAGE_TITLE = 'page_message:title';
+
+/**
+ * @description Message page description
+ * @localZh 消息网关测试页面
+ * @localEn Message gateway test page
+ */
+export const PAGE_MESSAGE_DESCRIPTION = 'page_message:description';
+
+/**
+ * @description Message page keywords
+ * @localZh 消息, 网关, 测试
+ * @localEn Message, Gateway, Test
+ */
+export const PAGE_MESSAGE_KEYWORDS = 'page_message:keywords';

package/dist/templates/react-app/config/app.router.ts

@@ -5,6 +5,7 @@ import { homeI18n } from './i18n/homeI18n';
 import { identifiter18n } from './i18n/identifiter18n';
 import { jsonStorage18n } from './i18n/jsonStorage18n';
 import { login18n } from './i18n/login18n';
+import { messageI18n } from './i18n/messageI18n';
 import { notFound18n, serverError18n } from './i18n/notFoundI18n';
 import { register18n } from './i18n/register18n';
 import { request18n } from './i18n/request18n';
@@ -88,6 +89,17 @@ export const baseRoutes: RouteConfigValue[] = [
           i18nInterface: identifiter18n
         }
       },
+      {
+        path: 'message',
+        element: 'base/MessagePage',
+        meta: {
+          title: identifier.PAGE_MESSAGE_TITLE,
+          description: identifier.PAGE_MESSAGE_DESCRIPTION,
+          icon: 'message',
+          localNamespace: 'common',
+          i18nInterface: messageI18n
+        }
+      },
       {
         path: '*',
         element: 'NoRouteFound',
@@ -249,6 +261,17 @@ export const baseNoLocaleRoutes: RouteConfigValue[] = [
           localNamespace: 'common',
           i18nInterface: identifiter18n
         }
+      },
+      {
+        path: 'message',
+        element: 'base/MessagePage',
+        meta: {
+          title: identifier.PAGE_MESSAGE_TITLE,
+          description: identifier.PAGE_MESSAGE_DESCRIPTION,
+          icon: 'message',
+          localNamespace: 'common',
+          i18nInterface: messageI18n
+        }
       }
     ]
   },

package/dist/templates/react-app/config/common.ts

@@ -35,6 +35,8 @@ export const loggerStyles = {
  *
  * - 需要以 / 开头
  * - 但是不能只有 /
+ *
+ * **TODO: 未来可能需要修改为支持 vercel 环境使用前缀**
  */
 export const routerPrefix = '/router-root';
 
@@ -45,3 +47,39 @@ export const routerPrefix = '/router-root';
  * - false: 不使用本地化路由，直接使用路径 (例如: /home)
  */
 export const useLocaleRoutes = true;
+
+/**
+ * 注入到浏览器全局变量中需要忽略的变量
+ *
+ * 应用 `@/core/globals.ts` 中的变量
+ *
+ * 可能 appConfig 有敏感信息，需要忽略
+ *
+ * - 可以直接忽略整个 appConfig 对象, 例如: 'appConfig'
+ * - 也可以忽略单个属性, 例如: 'appConfig.openAiTokenPrefix', 'appConfig.openAiToken'
+ *
+ * @example 忽略 appConfig 对象
+ * ```typescript
+ * export const omitInjectedGlobals = [
+ *   'appConfig'
+ * ];
+ * ```
+ *
+ * @example 忽略 appConfig 中的 openAiTokenPrefix 和 openAiToken 属性
+ * ```typescript
+ * export const omitInjectedGlobals = [
+ *   'appConfig.openAiTokenPrefix',
+ *   'appConfig.openAiToken'
+ * ];
+ * ```
+ */
+export const omitInjectedGlobals = [
+  'appConfig.openAiTokenPrefix',
+  'appConfig.openAiToken',
+  'appConfig.loginPassword',
+  'appConfig.loginUser',
+  'appConfig.aiApiTokenPrefix',
+  'appConfig.openAiBaseUrl',
+  'appConfig.aiApiBaseUrl',
+  'appConfig.aiApiToken'
+];

package/dist/templates/react-app/config/feapi.mock.json

@@ -3,29 +3,19 @@
     "mock": true,
     "noUrl": true
   },
-  "GET https://feapi.example.com/api/userinfo": {
-    "name": "John Doe",
-    "email": "john.doe@example.com",
-    "picture": "https://randomuser.me/api/portraits/men/1.jpg"
-  },
+
   "GET /api/userinfo": {
     "name": "John Doe",
     "email": "john.doe@example.com",
     "picture": "https://randomuser.me/api/portraits/men/1.jpg"
   },
-  "POST https://feapi.example.com/api/login": {
-    "token": "asdfasdf123123asdfasdf"
-  },
   "POST /api/login": {
     "token": "/api/login-token-adfasdfasdf"
   },
-  "POST https://feapi.example.com/api/register": {
-    "token": "asdfasdf123123asdfasdf"
-  },
   "POST /api/register": {
     "token": "asdfasdf123123asdfasdf"
   },
-  "POST https://api.openai.com/v1/chat/completions": {
+  "POST /chat/completions": {
     "id": "chatcmpl-1234567890",
     "object": "chat.completion",
     "created": 1721702400,
@@ -37,5 +27,8 @@
         }
       }
     ]
+  },
+  "POST /api/logout": {
+    "redirect": "/login"
   }
 }

package/dist/templates/react-app/config/i18n/chatMessageI18n.ts

@@ -0,0 +1,17 @@
+import * as i18nKeys from '../Identifier/components/component.chatMessage';
+
+/**
+ * ChatMessage component i18n interface
+ */
+export type ChatMessageI18nInterface = typeof chatMessageI18n;
+
+export const chatMessageI18n = Object.freeze({
+  send: i18nKeys.COMPONENT_CHAT_SEND,
+  stop: i18nKeys.COMPONENT_CHAT_STOP,
+  loading: i18nKeys.COMPONENT_CHAT_LOADING,
+  inputPlaceholder: i18nKeys.COMPONENT_CHAT_INPUT_PLACEHOLDER,
+  empty: i18nKeys.COMPONENT_CHAT_EMPTY,
+  start: i18nKeys.COMPONENT_CHAT_START,
+  retry: i18nKeys.COMPONENT_CHAT_RETRY,
+  duration: i18nKeys.COMPONENT_CHAT_DURATION
+});

package/dist/templates/react-app/config/i18n/messageBaseListI18n.ts

@@ -0,0 +1,22 @@
+import * as i18nKeys from '../Identifier/components/component.messageBaseList';
+
+/**
+ * MessageBaseList component i18n interface
+ */
+export type MessageBaseListI18nInterface = typeof messageBaseListI18n;
+
+export const messageBaseListI18n = Object.freeze({
+  title: i18nKeys.COMPONENT_MESSAGE_BASE_LIST_TITLE,
+  description: i18nKeys.COMPONENT_MESSAGE_BASE_LIST_DESCRIPTION,
+  noMessages: i18nKeys.COMPONENT_MESSAGE_BASE_LIST_NO_MESSAGES,
+  getStarted: i18nKeys.COMPONENT_MESSAGE_BASE_LIST_GET_STARTED,
+  user: i18nKeys.COMPONENT_MESSAGE_BASE_LIST_USER,
+  gateway: i18nKeys.COMPONENT_MESSAGE_BASE_LIST_GATEWAY,
+  processing: i18nKeys.COMPONENT_MESSAGE_BASE_LIST_PROCESSING,
+  gatewayFailed: i18nKeys.COMPONENT_MESSAGE_BASE_LIST_GATEWAY_FAILED,
+  sendFailed: i18nKeys.COMPONENT_MESSAGE_BASE_LIST_SEND_FAILED,
+  gatewayResponse: i18nKeys.COMPONENT_MESSAGE_BASE_LIST_GATEWAY_RESPONSE,
+  inputPlaceholder: i18nKeys.COMPONENT_MESSAGE_BASE_LIST_INPUT_PLACEHOLDER,
+  sendButton: i18nKeys.COMPONENT_MESSAGE_BASE_LIST_SEND_BUTTON,
+  errorTip: i18nKeys.COMPONENT_MESSAGE_BASE_LIST_ERROR_TIP
+});

package/dist/templates/react-app/config/i18n/messageI18n.ts

@@ -0,0 +1,14 @@
+import * as i18nKeys from '../Identifier/pages/page.message';
+
+/**
+ * Message page i18n interface
+ */
+export type MessageI18nInterface = typeof messageI18n;
+
+export const messageI18n = Object.freeze({
+  // basic meta properties
+  title: i18nKeys.PAGE_MESSAGE_TITLE,
+  description: i18nKeys.PAGE_MESSAGE_DESCRIPTION,
+  content: i18nKeys.PAGE_MESSAGE_DESCRIPTION,
+  keywords: i18nKeys.PAGE_MESSAGE_KEYWORDS
+});