feat(next/web): check reply language

next/web/package.json

@@ -46,6 +46,7 @@
     "recoil": "^0.7.6",
     "remark-gfm": "^3.0.1",
     "throat": "^6.0.1",
+    "tinyld": "^1.3.4",
     "use-query-params": "^2.1.2"
   },
   "devDependencies": {

next/web/script/generateEnv.js

@@ -8,6 +8,7 @@ const OPTIONAL_ENV_KEYS = [
   'ENABLE_LEANCLOUD_INTEGRATION',
   'ALGOLIA_API_KEY',
   'ENABLE_USER_CONFIRMATION',
+  'ENABLE_REPLY_LANGUAGE_CHECK',
 ];
 
 const CUSTOM_ENVS = {

next/web/src/App/Admin/Tickets/Ticket/TicketDetail.tsx

@@ -163,6 +163,7 @@ export function TicketDetail() {
               }
               onOperate={handleOperate}
               operating={operating}
+              ticketLanguage={ticket.language}
             />
           </Col>
           <Col className="p-4" span={24} md={6}>

next/web/src/App/Admin/Tickets/Ticket/components/ReplyEditor.tsx

@@ -1,37 +1,53 @@
 import { ClipboardEvent, Dispatch, SetStateAction, useMemo, useRef, useState } from 'react';
 import { useDebounce } from 'react-use';
-import { Button, Empty, Input, Radio, Select, Tabs } from 'antd';
+import { Button, Empty, Input, Modal, Radio, Select, Tabs } from 'antd';
 import { AiOutlineFile } from 'react-icons/ai';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { uniq } from 'lodash-es';
 
+import { TicketLanguages } from '@/i18n/locales';
 import { useQuickReplies } from '@/api/quick-reply';
 import { storage, useCurrentUser } from '@/leancloud';
 import { LoadingCover } from '@/components/common';
 import { useHoverMenu } from '@/App/Admin/components/HoverMenu';
 import { Uploader, UploaderRef } from '@/App/Admin/components/Uploader';
 import { useModal } from './useModal';
 
-interface ReplyInfo {
+interface ReplyData {
   internal: boolean;
   content: string;
   fileIds: string[];
 }
 
 interface ReplyEditorProps {
-  onSubmit: (replyInfo: ReplyInfo) => Promise<void>;
+  onSubmit: (replyData: ReplyData) => Promise<void>;
   onOperate: (action: string) => void;
   operating?: boolean;
+  ticketLanguage?: string;
 }
 
-export function ReplyEditor({ onSubmit, onOperate, operating }: ReplyEditorProps) {
+export function ReplyEditor({ onSubmit, onOperate, operating, ticketLanguage }: ReplyEditorProps) {
   const [mode, setType] = useState('public');
   const [content, setContent] = useState('');
 
   const uploaderRef = useRef<UploaderRef>(null!);
 
   const [submitting, setSubmitting] = useState(false);
+  const doSubmit = async (content: string, fileIds: string[]) => {
+    try {
+      setSubmitting(true);
+      await onSubmit({
+        internal: mode === 'internal',
+        content,
+        fileIds,
+      });
+      setContent('');
+      uploaderRef.current.reset();
+    } finally {
+      setSubmitting(false);
+    }
+  };
   const handleSubmit = async () => {
     if (submitting) {
       return;
@@ -50,18 +66,22 @@ export function ReplyEditor({ onSubmit, onOperate, operating }: ReplyEditorProps
       return alert('回复内容不能为空');
     }
 
-    try {
-      setSubmitting(true);
-      await onSubmit({
-        internal: mode === 'internal',
-        content: trimedContent,
-        fileIds,
-      });
-      setContent('');
-      uploaderRef.current.reset();
-    } finally {
-      setSubmitting(false);
+    if (import.meta.env.VITE_ENABLE_REPLY_LANGUAGE_CHECK && trimedContent && ticketLanguage) {
+      const { detect } = await import('tinyld/light');
+      const language = detect(trimedContent);
+      if (!ticketLanguage.startsWith(language)) {
+        Modal.confirm({
+          title: '回复语言和工单语言不匹配',
+          content: `工单语言：${TicketLanguages[ticketLanguage]}，回复语言：${TicketLanguages[language]}`,
+          okText: '继续回复',
+          cancelText: '返回',
+          onOk: () => doSubmit(trimedContent, fileIds),
+        });
+        return;
+      }
     }
+
+    doSubmit(trimedContent, fileIds);
   };
 
   const [quickReplyModal, toggleQuickReplyModal] = useModal({

next/web/src/global.d.ts

@@ -9,6 +9,7 @@ interface ImportMetaEnv {
   VITE_ALGOLIA_API_KEY?: string;
   VITE_ENABLE_TAP_SUPPORT?: string;
   VITE_ENABLE_USER_CONFIRMATION?: string;
+  VITE_ENABLE_REPLY_LANGUAGE_CHECK?: string;
 }
 
 declare function docsearch(...args: any[]);