自動翻訳、自動校正の設定が可能に (自動で実行されるのを止めることが可能に)

package.json

@@ -23,4 +23,4 @@
   "workspaces": [
     "packages/*"
   ]
-}
+}

packages/web/src/components/Switch.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { BaseProps } from '../@types/common';
+
+type Props = BaseProps & {
+  checked: boolean;
+  onSwitch: (newValue: boolean) => void;
+  label: string;
+};
+
+const Switch: React.FC<Props> = (props) => {
+  return (
+    <div>
+      <label className="relative inline-flex cursor-pointer items-center hover:underline">
+        <input
+          type="checkbox"
+          value=""
+          className="peer sr-only"
+          checked={props.checked}
+          onChange={() => {
+            props.onSwitch(!props.checked);
+          }}
+        />
+        <div className="peer-checked:bg-aws-smile peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:start-[2px] after:top-[2px] after:size-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white rtl:peer-checked:after:-translate-x-full"></div>
+        <span className="ml-1 text-xs font-medium">{props.label}</span>
+      </label>
+    </div>
+  );
+};
+
+export default Switch;

packages/web/src/hooks/useRagFile.ts

@@ -7,7 +7,9 @@ const useRagFile = () => {
 
   return {
     isS3Url: (url: string) => {
-      return /^https:\/\/(|[\w\\-]+\.)s3(|(\.|-)[\w\\-]+).amazonaws.com\//.test(url)
+      return /^https:\/\/(|[\w\\-]+\.)s3(|(\.|-)[\w\\-]+).amazonaws.com\//.test(
+        url
+      )
         ? true
         : false;
     },

packages/web/src/pages/ChatPage.tsx

@@ -10,6 +10,7 @@ import Button from '../components/Button';
 import ButtonCopy from '../components/ButtonCopy';
 import ModalDialog from '../components/ModalDialog';
 import ExpandableField from '../components/ExpandableField';
+import Switch from '../components/Switch';
 import useScroll from '../hooks/useScroll';
 import { PiArrowClockwiseBold, PiShareFatFill } from 'react-icons/pi';
 import { create } from 'zustand';
@@ -231,21 +232,11 @@ const ChatPage: React.FC = () => {
                 </button>
               </div>
             )}
-            <label className="relative inline-flex cursor-pointer items-center hover:underline">
-              <input
-                type="checkbox"
-                value=""
-                className="peer sr-only"
-                checked={showSystemContext}
-                onChange={() => {
-                  setShowSystemContext(!showSystemContext);
-                }}
-              />
-              <div className="peer-checked:bg-aws-smile peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:start-[2px] after:top-[2px] after:size-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white rtl:peer-checked:after:-translate-x-full"></div>
-              <span className="ml-1 text-xs font-medium">
-                システムコンテキストの表示
-              </span>
-            </label>
+            <Switch
+              checked={showSystemContext}
+              onSwitch={setShowSystemContext}
+              label="システムコンテキストの表示"
+            />
           </div>
         )}
 

packages/web/src/pages/EditorialPage.tsx

@@ -1,9 +1,10 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Location, useLocation } from 'react-router-dom';
 import Card from '../components/Card';
 import Button from '../components/Button';
 import Textarea from '../components/Textarea';
 import ExpandableField from '../components/ExpandableField';
+import Switch from '../components/Switch';
 import useChat from '../hooks/useChat';
 import { create } from 'zustand';
 import Texteditor from '../components/TextEditor';
@@ -92,6 +93,7 @@ const EditorialPage: React.FC = () => {
   const { pathname } = useLocation();
   const { loading, messages, postChat, clear: clearChat } = useChat(pathname);
   const { modelIds: availableModels, textModels } = MODELS;
+  const [auto, setAuto] = useState(true);
 
   // Memo 変数
   const filterComment = (
@@ -127,29 +129,31 @@ const EditorialPage: React.FC = () => {
 
   // 文章の更新時にコメントを更新
   useEffect(() => {
-    // Claude だと全角を半角に変換して出力するため入力を先に正規化
-    if (sentence !== '') {
-      setSentence(
-        sentence
-          .replace(REGEX_ZENKAKU, (s) => {
-            return String.fromCharCode(s.charCodeAt(0) - 0xfee0);
-          })
-          .replace(/[‐－―]/g, '-') // ハイフンなど
-          .replace(/[～〜]/g, '~') // チルダ
-          // eslint-disable-next-line no-irregular-whitespace
-          .replace(/　/g, ' ') // スペース
+    if (auto) {
+      // Claude だと全角を半角に変換して出力するため入力を先に正規化
+      if (sentence !== '') {
+        setSentence(
+          sentence
+            .replace(REGEX_ZENKAKU, (s) => {
+              return String.fromCharCode(s.charCodeAt(0) - 0xfee0);
+            })
+            .replace(/[‐－―]/g, '-') // ハイフンなど
+            .replace(/[～〜]/g, '~') // チルダ
+            // eslint-disable-next-line no-irregular-whitespace
+            .replace(/　/g, ' ') // スペース
+        );
+      }
+
+      // debounce した後コメント更新
+      onSentenceChange(
+        modelId,
+        sentence,
+        additionalContext,
+        comments,
+        commentState,
+        loading
       );
     }
-
-    // debounce した後コメント更新
-    onSentenceChange(
-      modelId,
-      sentence,
-      additionalContext,
-      comments,
-      commentState,
-      loading
-    );
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [modelId, sentence]);
 
@@ -255,7 +259,7 @@ const EditorialPage: React.FC = () => {
       </div>
       <div className="col-span-12 col-start-1 mx-2 lg:col-span-10 lg:col-start-2 xl:col-span-10 xl:col-start-2">
         <Card label="校正したい文章">
-          <div className="mb-4 flex w-full">
+          <div className="mb-4 flex w-full items-center justify-between">
             <SelectField
               label="モデル"
               labelHidden
@@ -267,6 +271,7 @@ const EditorialPage: React.FC = () => {
                 </option>
               ))}
             </SelectField>
+            <Switch label="自動校正" checked={auto} onSwitch={setAuto} />
           </div>
           <Texteditor
             placeholder="入力してください"

packages/web/src/pages/TranslatePage.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Location, useLocation } from 'react-router-dom';
 import Card from '../components/Card';
 import Button from '../components/Button';
@@ -8,6 +8,7 @@ import MenuDropdown from '../components/MenuDropdown';
 import MenuItem from '../components/MenuItem';
 import Markdown from '../components/Markdown';
 import ButtonCopy from '../components/ButtonCopy';
+import Switch from '../components/Switch';
 import useChat from '../hooks/useChat';
 import useTyping from '../hooks/useTyping';
 import { create } from 'zustand';
@@ -103,6 +104,7 @@ const TranslatePage: React.FC = () => {
   const { loading, messages, postChat, clear: clearChat } = useChat(pathname);
   const { setTypingTextInput, typingTextOutput } = useTyping(loading);
   const { modelIds: availableModels, textModels } = MODELS;
+  const [auto, setAuto] = useState(true);
 
   // Memo 変数
   const disabledExec = useMemo(() => {
@@ -129,8 +131,10 @@ const TranslatePage: React.FC = () => {
 
   // 文章の更新時にコメントを更新
   useEffect(() => {
-    // debounce した後翻訳
-    onSentenceChange(modelId, sentence, additionalContext, language, loading);
+    if (auto) {
+      // debounce した後翻訳
+      onSentenceChange(modelId, sentence, additionalContext, language, loading);
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [modelId, sentence, language]);
 
@@ -209,7 +213,7 @@ const TranslatePage: React.FC = () => {
       </div>
       <div className="col-span-12 col-start-1 mx-2 lg:col-span-10 lg:col-start-2 xl:col-span-10 xl:col-start-2">
         <Card label="翻訳したい文章">
-          <div className="mb-4 flex w-full">
+          <div className="mb-4 flex w-full items-center justify-between">
             <SelectField
               label="モデル"
               labelHidden
@@ -221,6 +225,7 @@ const TranslatePage: React.FC = () => {
                 </option>
               ))}
             </SelectField>
+            <Switch label="自動翻訳" checked={auto} onSwitch={setAuto} />
           </div>
           <div className="flex w-full flex-col lg:flex-row">
             <div className="w-full lg:w-1/2">