支持ai-translate

dashboard/src/components/template/ParaHandle.tsx

@@ -13,6 +13,7 @@ interface IWidgetParaHandleCtl {
   mode?: string;
   channels?: string[];
   sentences: string[];
+  onTranslate?: Function;
 }
 export const ParaHandleCtl = ({
   book,
@@ -20,6 +21,7 @@ export const ParaHandleCtl = ({
   mode = "read",
   channels,
   sentences,
+  onTranslate,
 }: IWidgetParaHandleCtl) => {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
@@ -38,6 +40,12 @@ export const ParaHandleCtl = ({
         id: "labels.curr.paragraph.open",
       }),
     },
+    {
+      key: "ai-translate",
+      label: intl.formatMessage({
+        id: "buttons.ai.translate",
+      }),
+    },
     {
       type: "divider",
     },
@@ -140,6 +148,11 @@ export const ParaHandleCtl = ({
       case "mode-translate":
         store.dispatch(modeChange({ mode: "edit", id: `${book}-${para}` }));
         break;
+      case "ai-translate":
+        if (typeof onTranslate !== "undefined") {
+          onTranslate();
+        }
+        break;
       case "mode-wbw":
         store.dispatch(modeChange({ mode: "wbw", id: `${book}-${para}` }));
         break;

dashboard/src/components/template/ParaShell.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { useAppSelector } from "../../hooks";
 import { currFocus } from "../../reducers/focus";
 import { ParaHandleCtl } from "./ParaHandle";
+import AiTranslate from "../ai/AiTranslate";
 
 interface IWidgetParaShellCtl {
   book: number;
@@ -21,6 +22,7 @@ const ParaShellCtl = ({
 }: IWidgetParaShellCtl) => {
   const focus = useAppSelector(currFocus);
   const [isFocus, setIsFocus] = useState(false);
+  const [aiTranslateParaId, setAiTranslateParaId] = useState<string>();
   useEffect(() => {
     if (focus) {
       if (focus.focus?.type === "para") {
@@ -71,8 +73,12 @@ const ParaShellCtl = ({
           mode={mode}
           channels={channels}
           sentences={sentences}
+          onTranslate={() => setAiTranslateParaId(`${book}-${para}`)}
         />
       </div>
+      <div>
+        <AiTranslate autoLoad paragraph={aiTranslateParaId} />
+      </div>
       {children}
     </div>
   );