show thinking and error

nishio · Feb 5, 2021 · 39818ac · 39818ac
1 parent 01b5b29
commit 39818ac
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 15 deletions.
diff --git a/src/BOT_IS_SLEEPING.tsx b/src/BOT_IS_SLEEPING.tsx
diff --git a/src/NewTalk.tsx b/src/NewTalk.tsx
@@ -5,15 +5,21 @@ import { ChatLine } from "./ChatContents";
 import { PRESET_LOGS } from "./PRESET_LOGS";
 import { USE_PRESET, INITIAL_LOGS, APIROOT } from "./App";
 import { scrollToBottom } from "./scrollToBottom";
-import { BOT_IS_SLEEPING } from "./BOT_IS_SLEEPING";
+import {
+  BOT_IS_SLEEPING,
+  ERROR_ON_SERVER,
+  BOT_IS_THINKING,
+} from "./PRESET_MESSAGES";
 
 export let TalkID: string = "";
 export const NewTalk = () => {
   const [logs, setLogs] = useState(USE_PRESET ? PRESET_LOGS : INITIAL_LOGS);
   const [lastKeywords, setLastKeywords] = useState([] as string[]);
   const [otherKeywords, setOtherKeywords] = useState([] as string[]);
 
-  useEffect(getNewTalkID, []);
+  useEffect(() => {
+    getNewTalkID(setLogs);
+  }, []);
 
   // when log changed, scroll to bottom after the component rendered
   useEffect(scrollToBottom, [logs]);
@@ -116,22 +122,28 @@ function sendToServer(
 ) {
   if (TalkID !== "") {
     const data = { user: "nobody", talk: TalkID, text: text };
+    setLogs([...newLogs, BOT_IS_THINKING]);
+
     fetch(APIROOT + "web/", {
       mode: "cors",
       method: "POST",
       body: JSON.stringify(data),
       headers: {
         "Content-Type": "application/json",
       },
-    }).then((response) => {
-      response.json().then((data) => {
-        if (data.text !== "") {
-          setLogs([...newLogs, { text: data.text, user: false }]);
-          setLastKeywords(data.last_kw);
-          setOtherKeywords(data.other_kw);
-        }
+    })
+      .then((response) => {
+        response.json().then((data) => {
+          if (data.text !== "") {
+            setLogs([...newLogs, { text: data.text, user: false }]);
+            setLastKeywords(data.last_kw);
+            setOtherKeywords(data.other_kw);
+          }
+        });
+      })
+      .catch(() => {
+        setLogs([...newLogs, ERROR_ON_SERVER]);
       });
-    });
   } else {
     // bot is sleeping
     setLogs([...newLogs, BOT_IS_SLEEPING]);
@@ -142,7 +154,7 @@ function sendToServer(
   }
 }
 
-const getNewTalkID = () => {
+const getNewTalkID = (setLogs: any) => {
   fetch(APIROOT + "web/create", {
     mode: "cors",
     method: "GET",
@@ -152,5 +164,8 @@ const getNewTalkID = () => {
     })
     .then((text) => {
       TalkID = text;
+    })
+    .catch(() => {
+      setLogs([ERROR_ON_SERVER]);
     });
 };
diff --git a/src/PRESET_MESSAGES.tsx b/src/PRESET_MESSAGES.tsx
@@ -0,0 +1,14 @@
+export const BOT_IS_SLEEPING = {
+  text: "(Botを起こしています。数秒お待ちください...)",
+  user: false,
+};
+
+export const ERROR_ON_SERVER = {
+  text: "問題が発生したため会話を継続できません。",
+  user: false,
+};
+
+export const BOT_IS_THINKING = {
+  text: "(考え中...)",
+  user: false,
+};