From cc367dd95b63bd74aca791052bc174923cd16075 Mon Sep 17 00:00:00 2001
From: jinjianmingming <17610798380@163.com>
Date: Wed, 29 May 2024 15:37:59 +0800
Subject: [PATCH] =?UTF-8?q?berry=E4=B8=BB=E9=A2=98=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E8=81=8A=E5=A4=A9=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/berry/src/menu-items/panel.js  | 14 +++++-
 web/berry/src/routes/MainRoutes.js |  5 +++
 web/berry/src/views/Chat/index.css | 28 ++++++++++++
 web/berry/src/views/Chat/index.js  | 69 ++++++++++++++++++++++++++++++
 4 files changed, 114 insertions(+), 2 deletions(-)
 create mode 100644 web/berry/src/views/Chat/index.css
 create mode 100644 web/berry/src/views/Chat/index.js

diff --git a/web/berry/src/menu-items/panel.js b/web/berry/src/menu-items/panel.js
index 556b157f..6fa66c34 100644
--- a/web/berry/src/menu-items/panel.js
+++ b/web/berry/src/menu-items/panel.js
@@ -8,11 +8,12 @@ import {
   IconKey,
   IconGardenCart,
   IconUser,
-  IconUserScan
+  IconUserScan,
+  IconMessageCircle
 } from '@tabler/icons-react';
 
 // constant
-const icons = { IconDashboard, IconSitemap, IconArticle, IconCoin, IconAdjustments, IconKey, IconGardenCart, IconUser, IconUserScan };
+const icons = { IconDashboard, IconSitemap, IconArticle, IconCoin, IconAdjustments, IconKey, IconGardenCart, IconUser, IconUserScan,IconMessageCircle };
 
 // ==============================|| DASHBOARD MENU ITEMS ||============================== //
 
@@ -29,6 +30,15 @@ const panel = {
       breadcrumbs: false,
       isAdmin: false
     },
+    {
+      id: 'chat',
+      title: '聊天',
+      type: 'item',
+      url: '/panel/chat',
+      icon: icons.IconMessageCircle,
+      breadcrumbs: false,
+      isAdmin: false
+    },
     {
       id: 'channel',
       title: '渠道',
diff --git a/web/berry/src/routes/MainRoutes.js b/web/berry/src/routes/MainRoutes.js
index 74f7e4c2..d326c5ae 100644
--- a/web/berry/src/routes/MainRoutes.js
+++ b/web/berry/src/routes/MainRoutes.js
@@ -3,6 +3,7 @@ import { lazy } from 'react';
 // project imports
 import MainLayout from 'layout/MainLayout';
 import Loadable from 'ui-component/Loadable';
+import Chat from "../views/Chat";
 
 const Channel = Loadable(lazy(() => import('views/Channel')));
 const Log = Loadable(lazy(() => import('views/Log')));
@@ -31,6 +32,10 @@ const MainRoutes = {
       path: 'dashboard',
       element: <Dashboard />
     },
+    {
+      path: 'chat',
+      element: <Chat />
+    },
     {
       path: 'channel',
       element: <Channel />
diff --git a/web/berry/src/views/Chat/index.css b/web/berry/src/views/Chat/index.css
new file mode 100644
index 00000000..a7460fc0
--- /dev/null
+++ b/web/berry/src/views/Chat/index.css
@@ -0,0 +1,28 @@
+.MuiContainer-root {
+    padding-left: 0;
+    padding-right: 0;
+    height: calc(100% - 1px);
+    max-width: unset;
+}
+
+.css-1xnbu7n-MuiContainer-root {
+    /* 如果有特定样式，请在此处添加 */
+}
+
+.css-9d4wr9 {
+    background-color: #eef2f6;
+    width: 100%;
+    min-height: calc(100vh - 88px);
+    flex-grow: 1;
+    padding: 0;
+    margin-top: 83.746px;
+    margin-right: 0;
+    border-radius: 12px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    transition: margin 225ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+
+.chat-container {
+    height: 100%;
+}
diff --git a/web/berry/src/views/Chat/index.js b/web/berry/src/views/Chat/index.js
new file mode 100644
index 00000000..deb26ab3
--- /dev/null
+++ b/web/berry/src/views/Chat/index.js
@@ -0,0 +1,69 @@
+import React, { useEffect, useState } from "react";
+import { API } from "../../utils/api";
+import "./index.css";
+
+const useIsSmallScreen = () => {
+    const [isSmallScreen, setIsSmallScreen] = useState(window.innerWidth <= 768);
+
+    useEffect(() => {
+        const handleResize = () => {
+            setIsSmallScreen(window.innerWidth <= 768);
+        };
+
+        window.addEventListener('resize', handleResize);
+
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+
+    return isSmallScreen;
+};
+
+const Chat = () => {
+    const [chatUrl, setChatUrl] = useState("");
+    const [loading, setLoading] = useState(true);
+    // const isSmallScreen = useIsSmallScreen();
+
+    const loadTokens = async () => {
+        try {
+            const res = await API.get(`/api/token/`);
+            const siteInfo = JSON.parse(localStorage.getItem('siteInfo'));
+            if (!siteInfo) {
+                console.error("siteInfo not found in localStorage");
+                setLoading(false);
+                return;
+            }
+            // const url = `https://like.chatapi.asia/#/?settings={"key":"sk-xxx","url":"https://chat.chatapi.asia"}`;
+            const serverAddress = siteInfo.server_address;
+            const key = res.data.data[0].key;
+            const url = `${siteInfo.chat_link}/#/?settings={"key":"sk-${key}","url":"${serverAddress}"}`;
+
+            setChatUrl(url);
+        } catch (error) {
+            console.error("Error loading tokens:", error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        loadTokens();
+    }, []);
+
+    if (loading) {
+        return <div className="chat-container">Loading...</div>;
+    }
+
+    return (
+        <div className="chat-container">
+            <iframe
+                src={chatUrl}
+                style={{ height: '100%', width: '100%', padding: 0, border: 'none' }}
+                title="Chat"
+            />
+        </div>
+    );
+};
+
+export default Chat;