feat: docs add ai chat

Author: kkkky123

docs_roll/package.json

@@ -14,20 +14,23 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
+    "@ant-design/icons": "^6.0.0",
     "@docusaurus/core": "2.4.1",
     "@docusaurus/preset-classic": "2.4.1",
     "@mdx-js/react": "^1.6.22",
+    "antd": "^5.26.7",
+    "axios": "^1.11.0",
     "clsx": "^1.2.1",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "2.4.1",
-    "@jridgewell/trace-mapping": "0.3.25",
+    "@jridgewell/gen-mapping": "0.3.8",
     "@jridgewell/source-map": "0.3.6",
     "@jridgewell/sourcemap-codec": "1.5.0",
-    "@jridgewell/gen-mapping": "0.3.8"
+    "@jridgewell/trace-mapping": "0.3.25"
   },
   "browserslist": {
     "production": [

docs_roll/src/components/AIChat/index.js

@@ -0,0 +1,46 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import ChatFloatButton from '../ChatFloatButton';
+
+export default function AIChat() {
+  const [url, setUrl] = useState('');
+
+  const getUrl = async () => {
+    try {
+      const res = await axios.get('https://roll-dor-iframe-xfxnuxvngr.cn-shanghai.fcapp.run/get_signin_url');
+
+      if (res?.data?.result) {
+        setUrl(res.data.result);
+      }
+    } catch (error) {
+      console.log("error", error);
+    }
+  }
+
+  useEffect(() => {
+    getUrl();
+  }, []);
+
+  if (!url) {
+    return null;
+  }
+
+  return (
+    <ChatFloatButton
+      title="智能文档助手"
+      content={
+        <div style={{ width: '500px', height: '75vh' }}>
+          <iframe src={url} frameborder="0" width="100%" height="100%"></iframe>
+        </div>
+      }
+      floatButtonProps={{
+        style: {
+          insetInlineEnd: 24,
+          bottom: 90,
+          width: 48,
+          height: 48,
+        },
+      }}
+    />
+  );
+}

docs_roll/src/components/ChatFloatButton/index.js

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import { Popover, FloatButton } from 'antd';
+import { CloseOutlined, CommentOutlined } from '@ant-design/icons';
+import style from './styles.module.css';
+
+export default ({ title, content, floatButtonProps = {} }) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Popover
+      placement="topRight"
+      title={
+        <div className={style.header}>
+          <div>{title}</div>
+          <CloseOutlined onClick={() => { setOpen(false); }} style={{ padding: '2px' }} />
+        </div>
+      }
+      content={content}
+      overlayClassName={style.floatButtonOverlay}
+      open={open}
+    >
+      <FloatButton
+        shape="circle"
+        type="primary"
+        className={style.floatButton}
+        style={{ insetInlineEnd: 94 }}
+        icon={<CommentOutlined style={{ fontSize: '24px' }} />}
+        onClick={() => {
+          setOpen(!open);
+        }}
+        tooltip="点击使用智能文档助手"
+        {...floatButtonProps}
+      />
+    </Popover>
+  );
+};

docs_roll/src/components/ChatFloatButton/styles.module.css

@@ -0,0 +1,36 @@
+.header{
+    display: flex;
+    justify-content: space-between;
+  }
+  .floatButtonOverlay{
+    z-index: 999;
+    :global{
+      .ant-popover-inner{
+        flex-direction: column;
+        width: 400px;
+        overflow: hidden;
+        height: calc(100vh - 200px);
+        display: flex;
+        .ant-popover-inner-content{
+          flex: 1;
+          overflow: hidden;
+        }
+      }
+      .ant-popover-arrow {
+        display: none;
+      }
+    }
+  }
+  
+  .floatButton{
+    :global{
+      .ant-float-btn-body {
+        background-color: #4554e5;
+        &:hover{
+          background-color: #4554e5;
+        }
+      }
+    }
+  }
+  
+  

docs_roll/src/css/custom.css

@@ -15,6 +15,10 @@
   --ifm-color-primary-lightest: #3cad6e;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+  .ant-float-btn-icon {
+    width: 24px !important;
+    height: 24px !important; 
+  }
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */

docs_roll/src/theme/Layout/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import Layout from '@theme-original/Layout';
+import AIChat from '@site/src/components/AIChat';
+
+export default function CustomLayout(props) {
+  return (
+    <>
+      <Layout {...props} />
+      <AIChat />
+    </>
+  );
+}