|
|
@ -2,6 +2,7 @@
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
|
|
import { createClient } from "@supabase/supabase-js";
|
|
|
|
import { createClient } from "@supabase/supabase-js";
|
|
|
|
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
|
|
|
|
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
|
|
|
|
|
|
|
|
import { v4 as uuidv4 } from "uuid";
|
|
|
|
|
|
|
|
|
|
|
|
const useCookie = () => {
|
|
|
|
const useCookie = () => {
|
|
|
|
/**
|
|
|
|
/**
|
|
|
@ -110,7 +111,9 @@ const getIpAddress = async () => {
|
|
|
|
|
|
|
|
|
|
|
|
export default function Feedback() {
|
|
|
|
export default function Feedback() {
|
|
|
|
const { setCookie, checkCookie } = useCookie();
|
|
|
|
const { setCookie, checkCookie } = useCookie();
|
|
|
|
|
|
|
|
const [feedbackId, setFeedbackId] = useState(null);
|
|
|
|
const [feedbackSent, setFeedbackSent] = useState(false);
|
|
|
|
const [feedbackSent, setFeedbackSent] = useState(false);
|
|
|
|
|
|
|
|
const [feedbackDetailsSent, setFeedbackDetailsSent] = useState(false);
|
|
|
|
const { siteConfig } = useDocusaurusContext();
|
|
|
|
const { siteConfig } = useDocusaurusContext();
|
|
|
|
const [pathname, setPathname] = useState("");
|
|
|
|
const [pathname, setPathname] = useState("");
|
|
|
|
|
|
|
|
|
|
|
@ -133,32 +136,55 @@ export default function Feedback() {
|
|
|
|
);
|
|
|
|
);
|
|
|
|
try {
|
|
|
|
try {
|
|
|
|
const ipAddress = await getIpAddress();
|
|
|
|
const ipAddress = await getIpAddress();
|
|
|
|
|
|
|
|
const rowId = uuidv4();
|
|
|
|
/**
|
|
|
|
setFeedbackId(rowId);
|
|
|
|
* "id" and "created_at" are automatically generated by Supabase
|
|
|
|
const params = {
|
|
|
|
* @type {Omit<Database["public"]["Tables"]["feedback"]["Row"], "id" | "created_at">}
|
|
|
|
id: rowId,
|
|
|
|
*/
|
|
|
|
|
|
|
|
const data = {
|
|
|
|
|
|
|
|
is_good: feedback === "good",
|
|
|
|
is_good: feedback === "good",
|
|
|
|
url: window.location.pathname,
|
|
|
|
url: window.location.pathname,
|
|
|
|
user_ip: ipAddress,
|
|
|
|
user_ip: ipAddress,
|
|
|
|
project: LANGCHAIN_PROJECT_NAME,
|
|
|
|
project: LANGCHAIN_PROJECT_NAME,
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const { error } = await supabase.from("feedback").insert(data);
|
|
|
|
const { error } = await supabase.from("feedback").insert(params);
|
|
|
|
if (error) {
|
|
|
|
if (error) {
|
|
|
|
throw error;
|
|
|
|
throw error;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} catch (e) {
|
|
|
|
} catch (e) {
|
|
|
|
console.error("Failed to send feedback", {
|
|
|
|
console.error("Failed to send feedback", e);
|
|
|
|
e,
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
return;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// Set a cookie to prevent feedback from being sent multiple times
|
|
|
|
// Set a cookie to prevent feedback from being sent multiple times
|
|
|
|
setCookie(cookieName, window.location.pathname, 1);
|
|
|
|
setCookie(cookieName, window.location.pathname, 1);
|
|
|
|
setFeedbackSent(true);
|
|
|
|
setFeedbackSent(true);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const handleFeedbackDetails = async (e) => {
|
|
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
if (!feedbackId) {
|
|
|
|
|
|
|
|
setFeedbackDetailsSent(true);
|
|
|
|
|
|
|
|
return;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
const details = e.target.elements
|
|
|
|
|
|
|
|
.namedItem("details")
|
|
|
|
|
|
|
|
?.value.slice(0, 1024);
|
|
|
|
|
|
|
|
if (!details) {
|
|
|
|
|
|
|
|
return;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
const supabase = createClient(
|
|
|
|
|
|
|
|
siteConfig.customFields.supabaseUrl,
|
|
|
|
|
|
|
|
siteConfig.customFields.supabasePublicKey
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
const { error } = await supabase.from("feedback_details").insert({
|
|
|
|
|
|
|
|
feedback_id: feedbackId,
|
|
|
|
|
|
|
|
details,
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
if (error) {
|
|
|
|
|
|
|
|
console.error("Failed to add feedback details", error);
|
|
|
|
|
|
|
|
return;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
setFeedbackDetailsSent(true);
|
|
|
|
|
|
|
|
};
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
useEffect(() => {
|
|
|
@ -202,7 +228,31 @@ export default function Feedback() {
|
|
|
|
<div style={{ display: "flex", flexDirection: "column" }}>
|
|
|
|
<div style={{ display: "flex", flexDirection: "column" }}>
|
|
|
|
<hr />
|
|
|
|
<hr />
|
|
|
|
{feedbackSent ? (
|
|
|
|
{feedbackSent ? (
|
|
|
|
<h4>Thanks for your feedback!</h4>
|
|
|
|
<>
|
|
|
|
|
|
|
|
<h4>Thanks for your feedback!</h4>
|
|
|
|
|
|
|
|
{!feedbackDetailsSent && feedbackId && (
|
|
|
|
|
|
|
|
<form
|
|
|
|
|
|
|
|
style={{ display: "flex", flexDirection: "column" }}
|
|
|
|
|
|
|
|
onSubmit={handleFeedbackDetails}
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<h4>Do you have any specific comments?</h4>
|
|
|
|
|
|
|
|
<textarea
|
|
|
|
|
|
|
|
name="details"
|
|
|
|
|
|
|
|
style={{ width: "480px", height: "120px" }}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
|
|
|
style={{
|
|
|
|
|
|
|
|
width: "72px",
|
|
|
|
|
|
|
|
marginLeft: "408px",
|
|
|
|
|
|
|
|
marginTop: "12px",
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
type="submit"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
Submit
|
|
|
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
</>
|
|
|
|
) : (
|
|
|
|
) : (
|
|
|
|
<>
|
|
|
|
<>
|
|
|
|
<h4>Was this page helpful?</h4>
|
|
|
|
<h4>Was this page helpful?</h4>
|
|
|
@ -248,7 +298,7 @@ export default function Feedback() {
|
|
|
|
)}
|
|
|
|
)}
|
|
|
|
<br />
|
|
|
|
<br />
|
|
|
|
<h4>
|
|
|
|
<h4>
|
|
|
|
You can leave detailed feedback{" "}
|
|
|
|
You can also leave detailed feedback{" "}
|
|
|
|
<a target="_blank" href={newGithubIssueURL}>
|
|
|
|
<a target="_blank" href={newGithubIssueURL}>
|
|
|
|
on GitHub
|
|
|
|
on GitHub
|
|
|
|
</a>
|
|
|
|
</a>
|
|
|
|