feat(web): 增加了兼容性聊天框，以支持一些旧版浏览器的使用

src/shared/i18n/langs/en-US/translation.json

@@ -12,6 +12,7 @@
   "k2037f8ad": "UserName must be charactor or numeral between 5-16",
   "k233768f0": "Too Many Request",
   "k243c52e": "No More Log",
+  "k25c0344e": "For older browsers, some modern features may not be available. Switch to compatibility mode to chat with TRPG engine",
   "k27f573b2": "Switch to Old Version UI",
   "k28190dbc": "Delete Success",
   "k2847a777": "Offline Time",
@@ -59,6 +60,7 @@
   "k45639ea9": "Login Log",
   "k45844eb6": "Visible to Assign User",
   "k4603dba7": "Send Group Invite",
+  "k466c477d": "Msg Input Editor Type",
   "k46b41dd4": "Need more language? Contract to Developer",
   "k4909b193": "Unknown Panel Type, Please Check Client Version",
   "k4b7d48f2": "Sign",
@@ -151,6 +153,7 @@
   "kb013273f": "Summary",
   "kb07659b0": "Repeat Password",
   "kb16db122": "This Feature just open for alpha user",
+  "kb19fd1f2": "Language changes need to be restarted and fully effective",
   "kb47a9aa4": "Password is Empty",
   "kb50ad3c1": "Browser Version",
   "kb55c8dba": "Invite Member",
@@ -187,6 +190,7 @@
   "kda3ac7f9": "Bot",
   "kdc29028f": "Moderator",
   "kdc2b5fe0": "Login Time",
+  "kdc8de4ff": "Auto",
   "kdebc1ec9": "Select from Friends",
   "kdf2b27a": "Gender",
   "kdfcd759": "Display Own Input Status",
@@ -214,6 +218,7 @@
   "kf1fd2c49": "Owner",
   "kf3d7ac0e": "Searching...",
   "kf4567a1": "Copy Invite Link",
+  "kf4f96d56": "Compatible",
   "kf5adc6c5": "Lawful good",
   "kf5d66247": "Panel Name",
   "kf644225f": "Actor",

src/shared/i18n/langs/zh-CN/translation.json

@@ -12,6 +12,7 @@
   "k2037f8ad": "用户名必须为5到16位英文或数字",
   "k233768f0": "请求过于频繁",
   "k243c52e": "没有更多记录了",
+  "k25c0344e": "对于旧版浏览器, 可能无法使用一些现代特性。切换到兼容模式以正常使用TRPG Engine进行聊天",
   "k27f573b2": "切换到旧版UI",
   "k28190dbc": "删除成功",
   "k2847a777": "离线时间",
@@ -59,6 +60,7 @@
   "k45639ea9": "登录记录",
   "k45844eb6": "指定用户可见",
   "k4603dba7": "发送邀请",
+  "k466c477d": "聊天框类型",
   "k46b41dd4": "需要更多的语言支持? 请联系开发者",
   "k4909b193": "未知的面板类型, 请检查客户端版本",
   "k4b7d48f2": "简介",
@@ -151,6 +153,7 @@
   "kb013273f": "概况",
   "kb07659b0": "重复密码",
   "kb16db122": "该功能仅对内测用户开放",
+  "kb19fd1f2": "语言变更需要重启后完全生效",
   "kb47a9aa4": "密码不能为空",
   "kb50ad3c1": "浏览器版本",
   "kb55c8dba": "邀请成员",
@@ -187,6 +190,7 @@
   "kda3ac7f9": "机器人",
   "kdc29028f": "主持人",
   "kdc2b5fe0": "登录时间",
+  "kdc8de4ff": "自动",
   "kdebc1ec9": "从好友中选择",
   "kdf2b27a": "性别",
   "kdfcd759": "输入状态显示自己",
@@ -214,6 +218,7 @@
   "kf1fd2c49": "拥有者",
   "kf3d7ac0e": "正在搜索中...",
   "kf4567a1": "复制邀请链接",
+  "kf4f96d56": "兼容",
   "kf5adc6c5": "守序善良",
   "kf5d66247": "面板名",
   "kf644225f": "角色",

src/shared/project.config.ts

@@ -125,6 +125,7 @@ const defaultSettings = {
     notification: true, // 是否通知
     disableSendWritingState: false, // 不发送输入状态
     showSelfInWritingState: false, // 在输入状态中显示自己
+    chatBoxType: 'auto' as 'auto' | 'compatible', // 聊天框类型 有auto, compatible
   },
 };
 

src/web/components/chatBox/useInputMsgEditorMsgSend.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect, useRef } from 'react';
+import { useState, useCallback, useEffect, useRef, useMemo } from 'react';
 import { TRPGEditorNode } from '../editor/types';
 import { buildBlankInputData, getHeadSelection } from '../editor/utils';
 import { isEnterHotkey } from '@web/utils/hot-key';
@@ -14,6 +14,8 @@ import { insertImage } from '../editor/changes/insertImage';
 import _isNil from 'lodash/isNil';
 import _isString from 'lodash/isString';
 import { t } from '@shared/i18n';
+import { useSystemSetting } from '@redux/hooks/settings';
+import { Input } from 'antd';
 
 /**
  * 会话消息发送管理
@@ -28,6 +30,11 @@ export function useInputMsgEditorMsgSend(converseUUID: string) {
     buildBlankInputData()
   );
   const converse = useConverseDetail(converseUUID);
+  const chatBoxType = useSystemSetting('chatBoxType') ?? 'auto';
+  const showRichMsgEditor = useMemo(() => {
+    // 是否使用高级输入框
+    return chatBoxType !== 'compatible';
+  }, [chatBoxType]);
 
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
@@ -50,8 +57,16 @@ export function useInputMsgEditorMsgSend(converseUUID: string) {
           try {
             const file = image.getAsFile();
             const chatimgUrl = await pasteUtils.upload(file!);
-            if (!_isNil(editorRef.current) && _isString(chatimgUrl)) {
-              insertImage(editorRef.current, chatimgUrl);
+            if (_isString(chatimgUrl)) {
+              if (showRichMsgEditor) {
+                // 如果使用的是高级编辑器
+                if (!_isNil(editorRef.current)) {
+                  insertImage(editorRef.current, chatimgUrl);
+                }
+              } else {
+                // 如果使用的是兼容编辑器
+                setMessage(message + `[img]${chatimgUrl}[/img]`);
+              }
             }
           } catch (err) {
             showToasts(err, 'error');
@@ -61,7 +76,7 @@ export function useInputMsgEditorMsgSend(converseUUID: string) {
         }
       }
     },
-    []
+    [showRichMsgEditor, message]
   );
 
   useEffect(() => {
@@ -85,16 +100,28 @@ export function useInputMsgEditorMsgSend(converseUUID: string) {
   const prefix = converse?.type === 'user' ? '@' : '#';
   const placeholder = `给 ${prefix}${converse?.name} 发消息`;
 
-  const editorEl = (
-    <MsgInputEditor
-      placeholder={placeholder}
-      value={messageData}
-      onChange={handleMessageDataChange}
-      onKeyDown={handleKeyDown}
-      onPaste={handlePaste}
-      onEditor={(editor) => (editorRef.current = editor)}
-    />
-  );
+  const editorEl =
+    showRichMsgEditor === true ? (
+      <MsgInputEditor
+        placeholder={placeholder}
+        value={messageData}
+        onChange={handleMessageDataChange}
+        onKeyDown={handleKeyDown}
+        onPaste={handlePaste}
+        onEditor={(editor) => (editorRef.current = editor)}
+      />
+    ) : (
+      <Input
+        ref={inputRef}
+        style={{ paddingTop: 0, paddingBottom: 0 }}
+        bordered={false}
+        placeholder={placeholder}
+        value={message}
+        onChange={(e) => setMessage(e.target.value)}
+        onKeyDown={handleKeyDown}
+        onPaste={handlePaste}
+      />
+    );
 
   return { editorRef, editorEl };
 }

src/web/routes/Main/Navbar/SettingView/SettingSystemConfig.tsx

@@ -11,6 +11,7 @@ import {
 import { setSystemSettings } from '@redux/actions/settings';
 import { useAlphaUser } from '@shared/hooks/useAlphaUser';
 import { useTranslation } from '@shared/i18n';
+import { TipIcon } from '@web/components/TipIcon';
 
 const SelectLanguage: React.FC = TMemo(() => {
   const { language, setLanguage, isChanged } = useLanguage();
@@ -37,7 +38,7 @@ const SelectLanguage: React.FC = TMemo(() => {
       {isChanged && (
         <Alert
           style={{ marginBottom: 10 }}
-          message="语言变更需要重启后完全生效"
+          message={t('语言变更需要重启后完全生效')}
           type="error"
         />
       )}
@@ -92,6 +93,30 @@ export const SettingSystemConfig: React.FC = TMemo((props) => {
       <Space direction="vertical">
         <SelectLanguage />
 
+        <FullModalField
+          title={
+            <Space>
+              <span>{t('聊天框类型')}</span>
+              <TipIcon
+                desc={t(
+                  '对于旧版浏览器, 可能无法使用一些现代特性。切换到兼容模式以正常使用TRPG Engine进行聊天'
+                )}
+              />
+            </Space>
+          }
+          content={
+            <Select
+              style={{ width: 300 }}
+              size="large"
+              value={systemSettings.chatBoxType}
+              onChange={(val) => setSystemSetting('chatBoxType', val)}
+            >
+              <Select.Option value="auto">{t('自动')}</Select.Option>
+              <Select.Option value="compatible">{t('兼容')}</Select.Option>
+            </Select>
+          }
+        />
+
         <FullModalField
           title={t('桌面通知权限')}
           content={