> ## Documentation Index
> Fetch the complete documentation index at: https://www.mintlify.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Mintlify 小组件
> 安装并配置 Mintlify 小组件,在任意网站或 Web 应用中嵌入基于你的内容训练的 AI 助手。
export const AssistantWidgetPlayground = ({children, CodeBlockComponent}) => {
const EXAMPLE_WIDGET_ID = "YOUR_WIDGET_ID";
const EMBED_URL = "https://cdn.jsdelivr.net/npm/@mintlify/assistant-widget@0.0/dist/browser/embed.js";
const PREVIEW_READY_MESSAGE = "mintlify-assistant-playground:ready";
const PREVIEW_UPDATE_MESSAGE = "mintlify-assistant-playground:update";
const PREVIEW_STATE_MESSAGE = "mintlify-assistant-playground:state";
const SUPPORT_EMAIL = "hi@mintlify.com";
const STARTER_QUESTIONS = ["How do I get started with Mintlify?", "How do I customize my docs?", "How do I deploy my docs?"];
const VARIANT_OPTIONS = [{
value: "widget",
label: "Widget"
}, {
value: "modal",
label: "Modal"
}, {
value: "panel",
label: "Panel"
}];
const THEME_OPTIONS = [{
value: "system",
label: "System"
}, {
value: "light",
label: "Light"
}, {
value: "dark",
label: "Dark"
}];
const SIDE_OPTIONS = [{
value: "top",
label: "Top"
}, {
value: "bottom",
label: "Bottom"
}, {
value: "left",
label: "Left"
}, {
value: "right",
label: "Right"
}, {
value: "inline-start",
label: "Inline start"
}, {
value: "inline-end",
label: "Inline end"
}];
const ALIGN_OPTIONS = [{
value: "start",
label: "Start"
}, {
value: "center",
label: "Center"
}, {
value: "end",
label: "End"
}];
const INSTALL_OPTIONS = [{
value: "html",
label: "HTML"
}, {
value: "next",
label: "Next.js"
}];
const [installTarget, setInstallTarget] = useState("html");
const [variant, setVariant] = useState("widget");
const [theme, setTheme] = useState("system");
const [accent, setAccent] = useState("#16a34a");
const [radius, setRadius] = useState(18);
const [side, setSide] = useState("bottom");
const [align, setAlign] = useState("end");
const [trackEvents, setTrackEvents] = useState(false);
const [reportErrors, setReportErrors] = useState(false);
const [previewHostReady, setPreviewHostReady] = useState(false);
const [previewUrl, setPreviewUrl] = useState(null);
const [previewStatus, setPreviewStatus] = useState("loading");
const previewRef = useRef(null);
const previewHostRef = useRef(null);
useEffect(() => {
const pageMatch = window.location.pathname.replace(/\/$/, "").match(/^(.*?)(\/[a-z]{2}(?:-[A-Za-z]{2,4})?)?\/assistant\/widget$/);
const basePath = pageMatch?.[1] ?? "";
const locale = pageMatch?.[2] ?? "";
const mode = document.documentElement.classList.contains("dark") ? "dark" : "light";
setPreviewUrl(`${basePath}/_minimal${locale}/assistant/widget-preview?mode=${mode}`);
}, []);
useEffect(() => {
const removeRootWidget = () => {
const rootWidget = document.querySelector("body > mintlify-assistant");
if (!rootWidget) return false;
const destroyPromise = window.MintlifyAssistant?.destroy();
void destroyPromise?.catch(() => {});
rootWidget.remove();
return true;
};
const rootWidgetObserver = new MutationObserver(removeRootWidget);
removeRootWidget();
rootWidgetObserver.observe(document.body, {
childList: true
});
return () => rootWidgetObserver.disconnect();
}, []);
useEffect(() => {
const host = previewHostRef.current;
if (!host) return undefined;
const markReady = height => {
if (height > 0) setPreviewHostReady(true);
};
markReady(host.getBoundingClientRect().height);
if (typeof ResizeObserver === "undefined") {
setPreviewHostReady(true);
return undefined;
}
const observer = new ResizeObserver(entries => {
markReady(entries[0]?.contentRect.height ?? 0);
});
observer.observe(host);
return () => observer.disconnect();
}, []);
const classNames = (...classes) => classes.filter(Boolean).join(" ");
const renderSegmentedControl = ({ariaLabel, onChange, options, threeColumns = false, value}) =>
{options.map(option => )}
;
const renderSelectField = ({label, onChange, options, value}) => ;
const renderToggleRow = ({checked, description, label, onChange}) => ;
const appearance = useMemo(() => ({
variant,
theme,
accent,
radius: `${radius}px`,
side,
align
}), [accent, align, radius, side, theme, variant]);
const updatePreview = useCallback(() => {
const previewWindow = previewRef.current?.contentWindow;
if (!previewWindow) return;
const liveTheme = appearance.theme === "system" ? document.documentElement.classList.contains("dark") ? "dark" : "light" : appearance.theme;
previewWindow.postMessage({
type: PREVIEW_UPDATE_MESSAGE,
trackEvents,
reportErrors,
appearance: {
...appearance,
theme: liveTheme
}
}, window.location.origin);
}, [appearance, reportErrors, trackEvents]);
useEffect(() => {
const handlePreviewMessage = event => {
if (event.source !== previewRef.current?.contentWindow) return;
if (event.data?.type === PREVIEW_READY_MESSAGE) {
updatePreview();
return;
}
if (event.data?.type === PREVIEW_STATE_MESSAGE) {
setPreviewStatus(event.data.state === "error" ? "error" : "ready");
}
};
const themeObserver = new MutationObserver(updatePreview);
window.addEventListener("message", handlePreviewMessage);
themeObserver.observe(document.documentElement, {
attributes: true,
attributeFilter: ["class"]
});
updatePreview();
return () => {
window.removeEventListener("message", handlePreviewMessage);
themeObserver.disconnect();
};
}, [updatePreview]);
useEffect(() => {
if (!previewHostReady || !previewUrl || previewStatus !== "loading") {
return undefined;
}
const timeout = window.setTimeout(() => {
setPreviewStatus(status => status === "loading" ? "error" : status);
}, 20000);
return () => window.clearTimeout(timeout);
}, [previewHostReady, previewStatus, previewUrl]);
const configLines = ["{", ` id: '${EXAMPLE_WIDGET_ID}',`, ` supportEmail: '${SUPPORT_EMAIL}',`, " starterQuestions: [", ...STARTER_QUESTIONS.map(question => ` '${question}',`), " ],", " appearance: {", ` variant: '${variant}',`, ` theme: '${theme}',`, ` accent: '${accent}',`, ` radius: '${radius}px',`, ` side: '${side}',`, ` align: '${align}',`, " },"];
if (trackEvents || reportErrors) {
configLines.push(" hooks: {");
if (trackEvents) {
configLines.push(" event(event) {", " console.log('Assistant event', event);", " },");
}
if (reportErrors) {
configLines.push(" error(error) {", " console.error('Assistant error', error.code, error);", " },");
}
configLines.push(" },");
}
configLines.push("}");
const configCode = configLines.join("\n");
const indentedConfig = configCode.split("\n").join("\n ");
const htmlCode = `
`;
const nextCode = `'use client';
import Script from 'next/script';
const ASSISTANT_CONFIG = ${configCode};
export const AssistantWidget = () => (