File size: 4,873 Bytes
f8b5d42 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 | import React, { useState } from "react";
import { CheckCircle, CopySimple, X } from "@phosphor-icons/react";
import showToast from "@/utils/toast";
import hljs from "highlight.js";
import "@/utils/chat/themes/github-dark.css";
import "@/utils/chat/themes/github.css";
export default function CodeSnippetModal({ embed, closeModal }) {
return (
<div className="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-50 flex items-center justify-center">
<div className="relative w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border">
<div className="relative p-6 border-b rounded-t border-theme-modal-border">
<div className="w-full flex gap-x-2 items-center">
<h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
Copy your embed code
</h3>
</div>
<button
onClick={closeModal}
type="button"
className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
>
<X size={24} weight="bold" className="text-white" />
</button>
</div>
<div className="px-7 py-6">
<div className="space-y-6 max-h-[60vh] overflow-y-auto pr-2">
<ScriptTag embed={embed} />
</div>
<div className="flex justify-between items-center mt-6 pt-6 border-t border-theme-modal-border">
<button
onClick={closeModal}
type="button"
className="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
>
Close
</button>
<div hidden={true} />
</div>
</div>
</div>
</div>
);
}
function createScriptTagSnippet(embed, scriptHost, serverHost) {
return `<!--
Paste this script at the bottom of your HTML before the </body> tag.
See more style and config options on our docs
https://github.com/Mintplex-Labs/anythingllm-embed/blob/main/README.md
-->
<script
data-embed-id="${embed.uuid}"
data-base-api-url="${serverHost}/api/embed"
src="${scriptHost}/embed/anythingllm-chat-widget.min.js">
</script>
<!-- AnythingLLM (https://anythingllm.com) -->
`;
}
const ScriptTag = ({ embed }) => {
const [copied, setCopied] = useState(false);
const scriptHost = import.meta.env.DEV
? "http://localhost:3000"
: window.location.origin;
const serverHost = import.meta.env.DEV
? "http://localhost:3001"
: window.location.origin;
const snippet = createScriptTagSnippet(embed, scriptHost, serverHost);
const theme =
window.localStorage.getItem("theme") === "light" ? "github" : "github-dark";
const handleClick = () => {
window.navigator.clipboard.writeText(snippet);
setCopied(true);
setTimeout(() => {
setCopied(false);
}, 2500);
showToast("Snippet copied to clipboard!", "success", { clear: true });
};
return (
<div>
<div className="flex flex-col mb-2">
<label className="block text-sm font-medium text-white">
HTML Script Tag Embed Code
</label>
<p className="text-theme-text-secondary text-xs">
Have your workspace chat embed function like a help desk chat bottom
in the corner of your website.
</p>
<a
href="https://github.com/Mintplex-Labs/anythingllm-embed/blob/main/README.md"
target="_blank"
rel="noreferrer"
className="text-blue-300 light:text-blue-500 hover:underline"
>
View all style and configuration options →
</a>
</div>
<button
disabled={copied}
onClick={handleClick}
className={`disabled:border disabled:border-green-300 disabled:light:border-green-600 border border-transparent relative w-full font-mono flex hljs ${theme} light:border light:border-gray-700 text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none p-2.5 m-1`}
>
<div
className="flex w-full text-left flex-col gap-y-1 pr-6 pl-4 whitespace-pre-line"
dangerouslySetInnerHTML={{
__html: hljs.highlight(snippet, {
language: "html",
ignoreIllegals: true,
}).value,
}}
/>
{copied ? (
<CheckCircle
size={14}
className="text-green-300 light:text-green-600 absolute top-2 right-2"
/>
) : (
<CopySimple size={14} className="absolute top-2 right-2" />
)}
</button>
</div>
);
};
|