mirror of
https://github.com/datahub-project/datahub.git
synced 2025-11-02 11:49:23 +00:00
docs(): add markprompt help chat (#7837)
This commit is contained in:
Jeff Merrick
GitHub
parent
429c54f3ad
commit
1c03bef7da
@ -18,6 +18,7 @@ module.exports = {
|
||||
noIndex: isSaas,
|
||||
customFields: {
|
||||
isSaas: isSaas,
|
||||
markpromptProjectKey: process.env.DOCUSAURUS_MARKPROMPT_PROJECT_KEY || 'IeF3CUFCUQWuouZ8MP5Np9nES52QAtaA',
|
||||
},
|
||||
themeConfig: {
|
||||
...(!isSaas && {
|
||||
|
||||
@ -34,8 +34,11 @@
|
||||
"docusaurus-graphql-plugin": "0.5.0",
|
||||
"docusaurus-plugin-sass": "^0.2.1",
|
||||
"dotenv": "^16.0.1",
|
||||
"markprompt": "^0.1.7",
|
||||
"react": "^16.12.0",
|
||||
"react-dom": "^16.12.0",
|
||||
"react-modal": "^3.16.1",
|
||||
"react-modal-hook": "^3.0.2",
|
||||
"sass": "^1.43.2"
|
||||
},
|
||||
"browserslist": {
|
||||
|
||||
53
docs-website/src/components/MarkpromptHelp/index.jsx
Normal file
53
docs-website/src/components/MarkpromptHelp/index.jsx
Normal file
@ -0,0 +1,53 @@
|
||||
import React from "react";
|
||||
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
|
||||
import { Markprompt } from "markprompt";
|
||||
import clsx from "clsx";
|
||||
import styles from "./markprompthelp.module.scss";
|
||||
import { ModalProvider, useModal } from "react-modal-hook";
|
||||
import Modal from "react-modal";
|
||||
|
||||
const BotIcon = ({ ...props }) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 79.164" {...props}>
|
||||
<path d="M64.582 8.332h-18.75v-6.25C45.832.93 44.902 0 43.75 0s-2.082.93-2.082 2.082v6.25h-18.75c-5.754.004-10.414 4.664-10.418 10.418v37.5c.004 5.75 4.664 10.41 10.418 10.414H34.3l7.715 11.574a2.089 2.089 0 0 0 3.468 0L53.2 66.664h11.383C70.336 66.66 74.996 62 75 56.25v-37.5c-.004-5.754-4.664-10.414-10.418-10.418Zm6.25 47.918a6.256 6.256 0 0 1-6.25 6.25h-12.5c-.695 0-1.344.348-1.73.926l-6.602 9.902-6.602-9.898v-.004a2.082 2.082 0 0 0-1.73-.926h-12.5a6.256 6.256 0 0 1-6.25-6.25V50h54.168l-.004 6.25Zm0-10.418H16.668V18.75a6.253 6.253 0 0 1 6.25-6.25h41.664a6.253 6.253 0 0 1 6.25 6.25v27.082ZM35.418 31.25a4.165 4.165 0 0 1-2.574 3.848 4.166 4.166 0 1 1-1.594-8.016c1.105 0 2.164.438 2.945 1.219s1.223 1.844 1.223 2.95v-.001Zm25 0a4.165 4.165 0 0 1-2.574 3.848 4.166 4.166 0 1 1-1.594-8.016c1.105 0 2.164.438 2.945 1.219s1.223 1.844 1.223 2.95v-.001Zm-56.25-8.336v16.668a2.082 2.082 0 0 1-2.086 2.082A2.081 2.081 0 0 1 0 39.582V22.914a2.084 2.084 0 0 1 4.168 0Zm83.332 0v16.668a2.081 2.081 0 0 1-2.082 2.082 2.082 2.082 0 0 1-2.086-2.082V22.914a2.085 2.085 0 0 1 4.168 0Z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const MarkpromptModal = () => {
|
||||
const context = useDocusaurusContext();
|
||||
const { siteConfig = {} } = context;
|
||||
|
||||
const [showModal, hideModal] = useModal(() => (
|
||||
<Modal isOpen onRequestClose={hideModal} className={clsx(styles.markpromptModal, "shadow--tl")} ariaHideApp={false}>
|
||||
<>
|
||||
<div className={clsx(styles.markprompt)}>
|
||||
<BotIcon />
|
||||
<Markprompt placeholder="Ask me anything about DataHub!" projectKey={siteConfig.customFields.markpromptProjectKey} />
|
||||
</div>
|
||||
<hr />
|
||||
<p>
|
||||
This is an experimental AI-powered chat bot. We can't be sure what it will say but hope it can be helpful. If it's not, there are always{" "}
|
||||
<a href="https://slack.datahubproject.io/" target="_blank">
|
||||
humans available in our Slack channel
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
</>
|
||||
</Modal>
|
||||
));
|
||||
|
||||
return (
|
||||
<div>
|
||||
<button className={clsx(styles.markpromptButton, "button button--primary shadow--tl")} onClick={showModal}>
|
||||
<BotIcon />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const MarkpromptHelp = () => (
|
||||
<ModalProvider>
|
||||
<MarkpromptModal />
|
||||
</ModalProvider>
|
||||
);
|
||||
|
||||
export default MarkpromptHelp;
|
||||
@ -0,0 +1,141 @@
|
||||
.markpromptButton {
|
||||
position: fixed;
|
||||
bottom: 1rem;
|
||||
right: 1rem;
|
||||
z-index: 1001;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
padding: 0.75rem;
|
||||
svg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.markpromptModal {
|
||||
border-radius: 6px;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
transform: translate(-50%, 0%);
|
||||
background: var(--ifm-background-color);
|
||||
z-index: 1003;
|
||||
margin: 60px auto auto;
|
||||
padding: 0;
|
||||
|
||||
width: 100%;
|
||||
@media (min-width: 768px) {
|
||||
max-width: 560px;
|
||||
}
|
||||
> p {
|
||||
font-size: smaller;
|
||||
padding: 1rem 1rem 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.markprompt {
|
||||
padding: 1rem 1rem 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
svg {
|
||||
width: 4rem;
|
||||
margin: 1rem auto;
|
||||
height: auto;
|
||||
fill: var(--ifm-color-primary);
|
||||
}
|
||||
input {
|
||||
height: var(--docsearch-searchbox-height);
|
||||
margin: 0;
|
||||
padding: 0 var(--docsearch-spacing);
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border: none;
|
||||
background: var(--docsearch-searchbox-focus-background);
|
||||
border-radius: 4px;
|
||||
box-shadow: var(--docsearch-searchbox-shadow);
|
||||
color: var(--docsearch-text-color);
|
||||
font-size: 1.2em;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
:global {
|
||||
.ReactModal__Overlay {
|
||||
z-index: 1002;
|
||||
background: rgba(111, 111, 111, 0.7) !important;
|
||||
|
||||
[data-theme="dark"] & {
|
||||
background: rgba(71, 71, 71, 0.7) !important;
|
||||
}
|
||||
}
|
||||
.caret {
|
||||
& :local {
|
||||
animation: caret 0.75s infinite;
|
||||
}
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 16px;
|
||||
background: var(--ifm-color-primary);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.overflow-y-auto {
|
||||
overflow-y: auto;
|
||||
max-height: calc(100vh - 350px);
|
||||
}
|
||||
.prompt-answer {
|
||||
padding: 0.5rem 0;
|
||||
|
||||
.caret {
|
||||
margin-top: 0;
|
||||
}
|
||||
&.prompt-answer-done {
|
||||
.caret {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.prompt-answer-loading {
|
||||
padding: 0.5rem 0;
|
||||
.caret:not(:last-child),
|
||||
code .caret {
|
||||
display: none !important;
|
||||
}
|
||||
:last-child.caret {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
+ div > div {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
&:not(empty) {
|
||||
border-top: 1px solid var(--ifm-hr-background-color);
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
> div > div {
|
||||
font-weight: normal;
|
||||
display: inline-block;
|
||||
padding: 0.25em 0.5em;
|
||||
margin: 0.5em 0.5em 0 0;
|
||||
border: 1px solid var(--ifm-hr-background-color);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes caret {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@ -44,6 +44,7 @@ html[data-theme="dark"] {
|
||||
--ifm-heading-color: #ffffff;
|
||||
--ifm-hr-border-color: #313131;
|
||||
--ifm-background-surface-color: #0b0b0b;
|
||||
--ifm-hr-background-color: rgba(255, 255, 255, 0.1);
|
||||
|
||||
.button--primary {
|
||||
color: #fff;
|
||||
@ -227,7 +228,7 @@ div[class^="announcementBar"] {
|
||||
.quickstart__codeblock {
|
||||
text-align: left;
|
||||
padding: 0 20vh;
|
||||
}
|
||||
}
|
||||
|
||||
.theme-doc-sidebar-menu ul li.saasOnly a.menu__link {
|
||||
&:after {
|
||||
|
||||
12
docs-website/src/theme/Footer/index.js
Normal file
12
docs-website/src/theme/Footer/index.js
Normal file
@ -0,0 +1,12 @@
|
||||
import React from "react";
|
||||
import Footer from "@theme-original/Footer";
|
||||
import MarkpromptHelp from "../../components/MarkpromptHelp";
|
||||
|
||||
export default function FooterWrapper(props) {
|
||||
return (
|
||||
<>
|
||||
<MarkpromptHelp />
|
||||
<Footer {...props} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user