X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Fchat-bot-logs%2FChatBotLog.js;fp=resources%2Fjs%2Fcomponents%2Fchat-bot-logs%2FChatBotLog.js;h=45c8027eb3f86b4d943c184bab484f53aff46ba0;hb=147c5f43c5d41fa18e82edb6651fe5a37c789353;hp=0000000000000000000000000000000000000000;hpb=ebdf8e5f6761de2abd85b01096a67dee62d7d4aa;p=alttp.git

diff --git a/resources/js/components/chat-bot-logs/ChatBotLog.js b/resources/js/components/chat-bot-logs/ChatBotLog.js
new file mode 100644
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;