From ed16a650115056ff42d8635679cad1900630d0fc Mon Sep 17 00:00:00 2001
From: Taichiro Suzuki <taichirs@amazon.co.jp>
Date: Tue, 20 Feb 2024 10:29:15 +0900
Subject: [PATCH 1/3] fix

---
 package.json                             |  2 +-
 packages/web/src/components/Switch.tsx   | 28 ++++++++++++
 packages/web/src/hooks/useRagFile.ts     |  4 +-
 packages/web/src/pages/ChatPage.tsx      | 23 ++++------
 packages/web/src/pages/EditorialPage.tsx | 57 ++++++++++++++----------
 packages/web/src/pages/TranslatePage.tsx | 51 +++++++++++++--------
 6 files changed, 106 insertions(+), 59 deletions(-)
 create mode 100644 packages/web/src/components/Switch.tsx

diff --git a/package.json b/package.json
index 14fc2f69..e64fbc10 100644
--- a/package.json
+++ b/package.json
@@ -23,4 +23,4 @@
   "workspaces": [
     "packages/*"
   ]
-}
\ No newline at end of file
+}
diff --git a/packages/web/src/components/Switch.tsx b/packages/web/src/components/Switch.tsx
new file mode 100644
index 00000000..f60efcec
--- /dev/null
+++ b/packages/web/src/components/Switch.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { BaseProps } from '../@types/common';
+
+type Props = BaseProps & {
+  checked: boolean;
+  onChange: () => 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.onChange}
+        />
+        <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;
diff --git a/packages/web/src/hooks/useRagFile.ts b/packages/web/src/hooks/useRagFile.ts
index 4a0b15b8..372d75de 100644
--- a/packages/web/src/hooks/useRagFile.ts
+++ b/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;
     },
diff --git a/packages/web/src/pages/ChatPage.tsx b/packages/web/src/pages/ChatPage.tsx
index 524c4dc3..0e998b61 100644
--- a/packages/web/src/pages/ChatPage.tsx
+++ b/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,13 @@ 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}
+              onChange={() => {
+                setShowSystemContext(!showSystemContext);
+              }}
+              label="システムコンテキストの表示"
+            />
           </div>
         )}
 
diff --git a/packages/web/src/pages/EditorialPage.tsx b/packages/web/src/pages/EditorialPage.tsx
index ddf46b2a..4e60f4a1 100644
--- a/packages/web/src/pages/EditorialPage.tsx
+++ b/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,13 @@ const EditorialPage: React.FC = () => {
                 </option>
               ))}
             </SelectField>
+            <Switch
+              label="自動校正"
+              checked={auto}
+              onChange={() => {
+                setAuto(!auto);
+              }}
+            />
           </div>
           <Texteditor
             placeholder="入力してください"
diff --git a/packages/web/src/pages/TranslatePage.tsx b/packages/web/src/pages/TranslatePage.tsx
index 81a5e9a7..5324fb9f 100644
--- a/packages/web/src/pages/TranslatePage.tsx
+++ b/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,13 @@ const TranslatePage: React.FC = () => {
                 </option>
               ))}
             </SelectField>
+            <Switch
+              label="自動翻訳"
+              checked={auto}
+              onChange={() => {
+                setAuto(!auto);
+              }}
+            />
           </div>
           <div className="flex w-full flex-col lg:flex-row">
             <div className="w-full lg:w-1/2">
@@ -233,21 +244,23 @@ const TranslatePage: React.FC = () => {
               />
             </div>
             <div className="w-full lg:ml-2 lg:w-1/2">
-              <MenuDropdown
-                menu={
-                  <div className="flex items-center py-2">
-                    {language}
-                    <PiCaretDown></PiCaretDown>
-                  </div>
-                }>
-                {languages.map((language) => (
-                  <MenuItem
-                    key={language.label}
-                    onClick={() => setLanguage(language.label)}>
-                    {language.label}
-                  </MenuItem>
-                ))}
-              </MenuDropdown>
+              <div className="flex">
+                <MenuDropdown
+                  menu={
+                    <div className="flex items-center py-2">
+                      {language}
+                      <PiCaretDown></PiCaretDown>
+                    </div>
+                  }>
+                  {languages.map((language) => (
+                    <MenuItem
+                      key={language.label}
+                      onClick={() => setLanguage(language.label)}>
+                      {language.label}
+                    </MenuItem>
+                  ))}
+                </MenuDropdown>
+              </div>
               <div className="rounded border border-black/30 p-1.5">
                 <Markdown>{typingTextOutput}</Markdown>
                 {loading && (

From f738bd265c4faf1be6f40379f061d41850a22203 Mon Sep 17 00:00:00 2001
From: Taichiro Suzuki <taichirs@amazon.co.jp>
Date: Tue, 20 Feb 2024 10:32:18 +0900
Subject: [PATCH 2/3] fix

---
 packages/web/src/pages/TranslatePage.tsx | 32 +++++++++++-------------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/packages/web/src/pages/TranslatePage.tsx b/packages/web/src/pages/TranslatePage.tsx
index 5324fb9f..54fe7ffc 100644
--- a/packages/web/src/pages/TranslatePage.tsx
+++ b/packages/web/src/pages/TranslatePage.tsx
@@ -244,23 +244,21 @@ const TranslatePage: React.FC = () => {
               />
             </div>
             <div className="w-full lg:ml-2 lg:w-1/2">
-              <div className="flex">
-                <MenuDropdown
-                  menu={
-                    <div className="flex items-center py-2">
-                      {language}
-                      <PiCaretDown></PiCaretDown>
-                    </div>
-                  }>
-                  {languages.map((language) => (
-                    <MenuItem
-                      key={language.label}
-                      onClick={() => setLanguage(language.label)}>
-                      {language.label}
-                    </MenuItem>
-                  ))}
-                </MenuDropdown>
-              </div>
+              <MenuDropdown
+                menu={
+                  <div className="flex items-center py-2">
+                    {language}
+                    <PiCaretDown></PiCaretDown>
+                  </div>
+                }>
+                {languages.map((language) => (
+                  <MenuItem
+                    key={language.label}
+                    onClick={() => setLanguage(language.label)}>
+                    {language.label}
+                  </MenuItem>
+                ))}
+              </MenuDropdown>
               <div className="rounded border border-black/30 p-1.5">
                 <Markdown>{typingTextOutput}</Markdown>
                 {loading && (

From 714f180cdf1952c2840ad049baf3cba6b69ef71e Mon Sep 17 00:00:00 2001
From: Taichiro Suzuki <taichirs@amazon.co.jp>
Date: Tue, 20 Feb 2024 15:11:01 +0900
Subject: [PATCH 3/3] fix

---
 packages/web/src/components/Switch.tsx   | 6 ++++--
 packages/web/src/pages/ChatPage.tsx      | 4 +---
 packages/web/src/pages/EditorialPage.tsx | 8 +-------
 packages/web/src/pages/TranslatePage.tsx | 8 +-------
 4 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/packages/web/src/components/Switch.tsx b/packages/web/src/components/Switch.tsx
index f60efcec..3d244b57 100644
--- a/packages/web/src/components/Switch.tsx
+++ b/packages/web/src/components/Switch.tsx
@@ -3,7 +3,7 @@ import { BaseProps } from '../@types/common';
 
 type Props = BaseProps & {
   checked: boolean;
-  onChange: () => void;
+  onSwitch: (newValue: boolean) => void;
   label: string;
 };
 
@@ -16,7 +16,9 @@ const Switch: React.FC<Props> = (props) => {
           value=""
           className="peer sr-only"
           checked={props.checked}
-          onChange={props.onChange}
+          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>
diff --git a/packages/web/src/pages/ChatPage.tsx b/packages/web/src/pages/ChatPage.tsx
index 0e998b61..e9ecdc86 100644
--- a/packages/web/src/pages/ChatPage.tsx
+++ b/packages/web/src/pages/ChatPage.tsx
@@ -234,9 +234,7 @@ const ChatPage: React.FC = () => {
             )}
             <Switch
               checked={showSystemContext}
-              onChange={() => {
-                setShowSystemContext(!showSystemContext);
-              }}
+              onSwitch={setShowSystemContext}
               label="システムコンテキストの表示"
             />
           </div>
diff --git a/packages/web/src/pages/EditorialPage.tsx b/packages/web/src/pages/EditorialPage.tsx
index 4e60f4a1..5a0de7c4 100644
--- a/packages/web/src/pages/EditorialPage.tsx
+++ b/packages/web/src/pages/EditorialPage.tsx
@@ -271,13 +271,7 @@ const EditorialPage: React.FC = () => {
                 </option>
               ))}
             </SelectField>
-            <Switch
-              label="自動校正"
-              checked={auto}
-              onChange={() => {
-                setAuto(!auto);
-              }}
-            />
+            <Switch label="自動校正" checked={auto} onSwitch={setAuto} />
           </div>
           <Texteditor
             placeholder="入力してください"
diff --git a/packages/web/src/pages/TranslatePage.tsx b/packages/web/src/pages/TranslatePage.tsx
index 54fe7ffc..06eb5081 100644
--- a/packages/web/src/pages/TranslatePage.tsx
+++ b/packages/web/src/pages/TranslatePage.tsx
@@ -225,13 +225,7 @@ const TranslatePage: React.FC = () => {
                 </option>
               ))}
             </SelectField>
-            <Switch
-              label="自動翻訳"
-              checked={auto}
-              onChange={() => {
-                setAuto(!auto);
-              }}
-            />
+            <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">