chat bot protocol ui

[alttp.git] / resources / js / components / chat-bot-logs / ChatBotLog.js

diff --git a/resources/js/components/chat-bot-logs/ChatBotLog.js b/resources/js/components/chat-bot-logs/ChatBotLog.js
new file mode 100644 (file)
index 0000000..45c8027
--- /dev/null
+++ b/resources/js/components/chat-bot-logs/ChatBotLog.js
@@ -0,0 +1,51 @@
+import axios from 'axios';
+import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react';
+import { Button } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+
+import Dialog from './Dialog';
+import Icon from '../common/Icon';
+
+const ChatBotLog = ({ id }) => {
+       const [showDialog, setShowDialog] = useState(false);
+       const [log, setLog] = useState([]);
+
+       const { t } = useTranslation();
+
+       useEffect(() => {
+               if (!showDialog) return;
+               const ctrl = new AbortController();
+               axios
+                       .get(`/api/channels/${id}/chat-bot-log`, { signal: ctrl.signal })
+                       .then(response => {
+                               setLog(response.data);
+                       });
+               return () => {
+                       ctrl.abort();
+               };
+       }, [id, showDialog]);
+
+       return (
+               <>
+                       <Button
+                               onClick={() => setShowDialog(true)}
+                               title={t('button.protocol')}
+                               variant="outline-info"
+                       >
+                               <Icon.PROTOCOL title="" />
+                       </Button>
+                       <Dialog
+                               log={log}
+                               onHide={() => setShowDialog(false)}
+                               show={showDialog}
+                       />
+               </>
+       );
+};
+
+ChatBotLog.propTypes = {
+       id: PropTypes.number,
+};
+
+export default ChatBotLog;