Skip to content

Commit

Permalink
docs: upgrade markprompt version (#10159)
Browse files Browse the repository at this point in the history
  • Loading branch information
@yoonhyejin
yoonhyejin authored Mar 29, 2024
1 parent 0de20b6 commit cb9ee89
Show file tree
Hide file tree
Showing 3 changed files with 1,155 additions and 241 deletions.
3 changes: 2 additions & 1 deletion docs-website/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,8 @@
"@docusaurus/plugin-content-docs": "2.4.1",
"@docusaurus/plugin-ideal-image": "^2.4.1",
"@docusaurus/preset-classic": "^2.4.1",
"@markprompt/react": "^0.3.5",
"@markprompt/css": "^0.26.0",
"@markprompt/react": "^0.40.5",
"@octokit/plugin-retry": "^3.0.9",
"@octokit/plugin-throttling": "^3.5.1",
"@octokit/rest": "^18.6.2",
Expand Down
202 changes: 4 additions & 198 deletions docs-website/src/components/MarkpromptHelp/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import React, { useContext, useEffect, useState } from "react";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import { usePluginData } from "@docusaurus/useGlobalData";
import "@markprompt/css"
import { Markprompt } from "@markprompt/react";
import styles from "./markprompthelp.module.scss";
import * as Markprompt from "@markprompt/react";
import { VisuallyHidden } from "@radix-ui/react-visually-hidden";

import { LikeOutlined, DislikeOutlined } from "@ant-design/icons";
Expand All @@ -12,206 +13,11 @@ const MarkpromptHelp = () => {
const { siteConfig = {} } = context;

return (
<Markprompt.Root projectKey={siteConfig.customFields.markpromptProjectKey} model="gpt-4">
<Markprompt.Trigger aria-label="Open Markprompt" className={styles.MarkpromptButton}>
<BotIcon /> Ask our AI
</Markprompt.Trigger>
<Markprompt.Portal>
<Markprompt.Overlay className={styles.MarkpromptOverlay} />
<Markprompt.Content className={styles.MarkpromptContent}>
<Markprompt.Close className={styles.MarkpromptClose}>
<CloseIcon />
</Markprompt.Close>
{/* Markprompt.Title is required for accessibility reasons. It can be hidden using an accessible content hiding technique. */}
<VisuallyHidden asChild>
<Markprompt.Title>Ask me anything about DataHub!</Markprompt.Title>
</VisuallyHidden>
<Markprompt.Form>
<SearchIcon className={styles.MarkpromptSearchIcon} />
<Markprompt.Prompt placeholder="Ask me anything about DataHub!" className={styles.MarkpromptPrompt} />
</Markprompt.Form>
<Markprompt.AutoScroller className={styles.MarkpromptAnswer}>
<Caret />
<Markprompt.Answer />
</Markprompt.AutoScroller>
<References />
<div className={styles.MarkpromptDescription}>
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>
</div>
<Feedback />
</Markprompt.Content>
</Markprompt.Portal>
</Markprompt.Root>
<Markprompt projectKey={siteConfig.customFields.markpromptProjectKey} model="gpt-4">
</Markprompt>
);
};

async function sendFeedback(data = {}) {
const response = await fetch("https://hlmqfkovdugtwoddrtkt.supabase.co/rest/v1/queries", {
method: "POST",
headers: {
"Content-Type": "application/json",
Prefer: "return=minimal",
apikey:
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImhsbXFma292ZHVndHdvZGRydGt0Iiwicm9sZSI6ImFub24iLCJpYXQiOjE2ODI5NzQwMjQsImV4cCI6MTk5ODU1MDAyNH0.wNggN7IK43j6KhJmFlELo8HmkTBIQwWt-Rx8vOYXBI8",
},
redirect: "follow",
referrerPolicy: "no-referrer",
body: JSON.stringify(data),
});
return response;
}

const Feedback = () => {
const { state, prompt } = useContext(Markprompt.Context);
const [feedbackSubmitted, setFeedbackSubmitted] = useState(false);

useEffect(() => {
setFeedbackSubmitted(false);
if (state === "preload") {
sendFeedback({
query: prompt,
}).then((response) => {
console.log(response.ok ? "Logged query" : "Error logging query");
});
}
}, [state]);

const handleClick = (rating) => {
sendFeedback({
query: prompt,
result_rating: rating,
}).then((response) => {
setFeedbackSubmitted(true);
console.log(response.ok ? "Logged feedback" : "Error logging feedback");
});
};

return (
<div className={styles.feedback} data-loading-state={state}>
{feedbackSubmitted ? (
<>Thanks for your feedback!</>
) : (
<>
Was this answer helpful?{" "}
<div className={styles.feedbackButtons}>
<button onClick={() => handleClick("positive")}>
<LikeOutlined />
</button>
<button>
<DislikeOutlined onClick={() => handleClick("negative")} />
</button>
</div>
</>
)}
</div>
);
};

const Caret = () => {
const { answer } = useContext(Markprompt.Context);

if (answer) {
return null;
}

return <span className={styles.caret} />;
};

const getReferenceInfo = (referenceId) => {
const contentDocsData = usePluginData("docusaurus-plugin-content-docs");
const docs = contentDocsData.versions?.[0]?.docs;

const lastDotIndex = referenceId.lastIndexOf(".");
if (lastDotIndex !== -1) {
referenceId = referenceId.substring(0, lastDotIndex);
}
const docItem = docs?.find((doc) => doc.id === referenceId);

const url = docItem?.path;
const title = url?.replace("/docs/generated/", "")?.replace("/docs/", "");

return { url, title };
};

const Reference = ({ referenceId, index }) => {
const { title, url } = getReferenceInfo(referenceId);

if (!url) return null;

return (
<li
key={referenceId}
className={styles.reference}
style={{
animationDelay: `${100 * index}ms`,
}}
>
<a href={url} target="_blank">
{title || url}
</a>
</li>
);
};

const References = () => {
const { state, references } = useContext(Markprompt.Context);

if (state === "indeterminate") return null;

let adjustedState = state;
if (state === "done" && references.length === 0) {
adjustedState = "indeterminate";
}

return (
<div data-loading-state={adjustedState} className={styles.references}>
<div className={styles.progress} />
<p>Fetching relevant pages…</p>
<p>Answer generated from the following sources:</p>
<Markprompt.References RootElement="ul" ReferenceElement={Reference} />
</div>
);
};

const SearchIcon = ({ className }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
className={className}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" x2="16.65" y1="21" y2="16.65"></line>
</svg>
);

const CloseIcon = ({ className }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
className={className}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<line x1="18" x2="6" y1="6" y2="18"></line>
<line x1="6" x2="18" y1="6" y2="18"></line>
</svg>
);

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>
);

export default MarkpromptHelp;
Loading

0 comments on commit cb9ee89

Please sign in to comment.