react-docs-ui 0.6.13 → 0.6.15

package/README.md

@@ -32,6 +32,19 @@ npm run dev
 - PWA support
 - AI integration (requires API key)
 
+### AI Agent Skills
+
+We provide AI Agent Skills to help you work more efficiently with react-docs-ui:
+
+- [React Docs UI Skills](https://github.com/shenjianZ/react-docs-skills)
+
+These skills can help you:
+- 📝 Write configuration files
+- 📚 Write documentation
+- 🚀 Create new projects
+
+Visit the [Skills repository](https://github.com/shenjianZ/react-docs-skills) to learn more.
+
 ### Exports
 
 - Layout: `DocsLayout`

package/dist/AIChatDialog-W60DtiEW.js

@@ -0,0 +1,418 @@
+import { h as e } from "./shiki-highlighter-BmQSSJpS.js";
+import { t } from "./utils-Ct96Mtjw.js";
+import { n } from "./AIProvider-C1_b1iKH.js";
+import r, { useCallback as i, useEffect as a, useRef as o, useState as s } from "react";
+import { AlertCircle as c, AlertTriangle as l, Bot as u, Check as d, CheckCheck as f, CheckCircle as p, Copy as m, GripVertical as h, Loader2 as g, Pencil as _, RefreshCw as v, Send as y, Settings as b, Square as x, Trash2 as S, User as C, X as w } from "lucide-react";
+import { Fragment as T, jsx as E, jsxs as D } from "react/jsx-runtime";
+import O from "remark-gfm";
+import k from "react-markdown";
+//#region src/components/ai/AIChatMessage.tsx
+function A({ message: e, onRegenerate: n, onEdit: a, onDelete: o }) {
+	let [l, h] = s(!1), [y, b] = s(null), [x, A] = s(!1), [j, M] = s(e.content), N = e.role === "user", P = e.isStreaming, F = !!e.error, I = i(async (e) => {
+		if (navigator.clipboard && window.isSecureContext) await navigator.clipboard.writeText(e);
+		else {
+			let t = document.createElement("textarea");
+			t.value = e, t.style.position = "fixed", t.style.left = "-9999px", t.style.top = "-9999px", document.body.appendChild(t), t.focus(), t.select();
+			try {
+				document.execCommand("copy");
+			} finally {
+				document.body.removeChild(t);
+			}
+		}
+	}, []), L = i(async () => {
+		try {
+			await I(e.content), h(!0), setTimeout(() => h(!1), 2e3);
+		} catch {
+			console.error("Failed to copy message");
+		}
+	}, [e.content, I]), R = i(async (e, t) => {
+		t.stopPropagation();
+		try {
+			await I(e), b(e), setTimeout(() => b(null), 2e3);
+		} catch {
+			console.error("Failed to copy code");
+		}
+	}, [I]), z = i(() => {
+		j.trim() && j !== e.content && a?.(j.trim()), A(!1);
+	}, [
+		j,
+		e.content,
+		a
+	]), B = i(() => {
+		M(e.content), A(!1);
+	}, [e.content]);
+	return /* @__PURE__ */ D("div", {
+		className: t("flex gap-3 p-4 group", N ? "flex-row-reverse" : "flex-row"),
+		children: [/* @__PURE__ */ E("div", {
+			className: t("flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center", N ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"),
+			children: E(N ? C : u, { className: "w-4 h-4" })
+		}), /* @__PURE__ */ E("div", {
+			className: t("flex-1 min-w-0", N ? "text-right" : "text-left"),
+			children: x ? /* @__PURE__ */ D("div", {
+				className: "inline-block max-w-full",
+				children: [/* @__PURE__ */ E("textarea", {
+					value: j,
+					onChange: (e) => M(e.target.value),
+					className: t("w-full min-w-[200px] max-w-[400px] p-3 rounded-lg border", "bg-background text-sm resize-none", "focus:outline-none focus:ring-2 focus:ring-ring"),
+					rows: Math.min(10, j.split("\n").length + 1),
+					autoFocus: !0
+				}), /* @__PURE__ */ D("div", {
+					className: "flex justify-end gap-2 mt-2",
+					children: [/* @__PURE__ */ E("button", {
+						onClick: B,
+						className: "p-1.5 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
+						title: "取消",
+						children: /* @__PURE__ */ E(w, { className: "w-4 h-4" })
+					}), /* @__PURE__ */ E("button", {
+						onClick: z,
+						className: "p-1.5 rounded text-primary hover:bg-primary/10 transition-colors",
+						title: "保存",
+						children: /* @__PURE__ */ E(f, { className: "w-4 h-4" })
+					})]
+				})]
+			}) : /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ D("div", {
+				className: t("inline-block max-w-full rounded-lg px-4 py-2", N ? "bg-primary text-primary-foreground" : "bg-muted text-foreground", F && "border border-destructive"),
+				children: [e.content ? /* @__PURE__ */ E(k, {
+					remarkPlugins: [O],
+					components: {
+						pre: ({ children: e }) => {
+							let t = (e) => {
+								if (typeof e == "string") return e;
+								if (Array.isArray(e)) return e.map(t).join("");
+								if (r.isValidElement(e)) {
+									let n = e.props;
+									if (n.children) return t(n.children);
+								}
+								return "";
+							}, n = r.Children.toArray(e).find((e) => r.isValidElement(e) && e.type === "code"), i = n && r.isValidElement(n) ? t(n.props.children).replace(/\n$/, "") : "";
+							return /* @__PURE__ */ D("div", {
+								className: "relative my-3 rounded-lg overflow-hidden border dark:border-zinc-700 border-zinc-200 dark:bg-[#141414] bg-[#fafafa]",
+								children: [/* @__PURE__ */ D("div", {
+									className: "flex items-center justify-between px-4 py-2 border-b dark:border-zinc-700 border-zinc-200 dark:bg-[#1a1a1a] bg-zinc-100",
+									children: [/* @__PURE__ */ E("span", {
+										className: "text-xs dark:text-zinc-400 text-zinc-500",
+										children: "代码"
+									}), i && /* @__PURE__ */ E("button", {
+										type: "button",
+										onClick: (e) => R(i, e),
+										className: "flex items-center gap-1 px-2 py-1 text-xs rounded dark:bg-zinc-700 dark:hover:bg-zinc-600 dark:text-zinc-300 bg-zinc-200 hover:bg-zinc-300 text-zinc-600 transition-colors",
+										children: y === i ? /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E(p, { className: "w-3.5 h-3.5 text-green-500" }), "已复制"] }) : /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E(m, { className: "w-3.5 h-3.5" }), "复制"] })
+									})]
+								}), /* @__PURE__ */ E("pre", {
+									className: "!m-0 p-4 overflow-x-auto text-sm hljs",
+									children: e
+								})]
+							});
+						},
+						code: ({ className: e, children: n, ...r }) => /language-(\w+)/.exec(e || "") || e?.includes("hljs") ? /* @__PURE__ */ E("code", {
+							className: t(e, "block"),
+							...r,
+							children: n
+						}) : !e && String(n).includes("\n") ? /* @__PURE__ */ E("code", {
+							className: "block",
+							...r,
+							children: n
+						}) : /* @__PURE__ */ E("code", {
+							className: "px-1.5 py-0.5 rounded dark:bg-zinc-700 bg-zinc-200 text-sm",
+							...r,
+							children: n
+						})
+					},
+					children: e.content
+				}) : P ? /* @__PURE__ */ D("div", {
+					className: "flex items-center gap-2 text-muted-foreground",
+					children: [/* @__PURE__ */ E(g, { className: "w-4 h-4 animate-spin" }), /* @__PURE__ */ E("span", { children: "正在思考..." })]
+				}) : null, F && /* @__PURE__ */ D("div", {
+					className: "flex items-center gap-2 text-destructive mt-2",
+					children: [/* @__PURE__ */ E(c, { className: "w-4 h-4" }), /* @__PURE__ */ E("span", {
+						className: "text-sm",
+						children: e.error
+					})]
+				})]
+			}), !P && /* @__PURE__ */ D("div", {
+				className: t("flex items-center gap-2 mt-2 opacity-0 group-hover:opacity-100 transition-opacity", N ? "justify-end" : "justify-start"),
+				children: [
+					!N && e.content && /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E("button", {
+						onClick: L,
+						className: "p-1.5 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
+						title: "复制",
+						children: l ? /* @__PURE__ */ E(d, { className: "w-3.5 h-3.5 text-green-500" }) : /* @__PURE__ */ E(m, { className: "w-3.5 h-3.5" })
+					}), n && /* @__PURE__ */ E("button", {
+						onClick: n,
+						className: "p-1.5 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
+						title: "重新生成",
+						children: /* @__PURE__ */ E(v, { className: "w-3.5 h-3.5" })
+					})] }),
+					N && a && /* @__PURE__ */ E("button", {
+						onClick: () => A(!0),
+						className: "p-1.5 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
+						title: "编辑",
+						children: /* @__PURE__ */ E(_, { className: "w-3.5 h-3.5" })
+					}),
+					o && /* @__PURE__ */ E("button", {
+						onClick: o,
+						className: "p-1.5 rounded text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors",
+						title: "删除",
+						children: /* @__PURE__ */ E(S, { className: "w-3.5 h-3.5" })
+					})
+				]
+			})] })
+		})]
+	});
+}
+//#endregion
+//#region src/components/ai/AIChatInput.tsx
+function j({ onSend: e, onStop: n, isLoading: r = !1, disabled: i = !1, placeholder: c = "输入消息..." }) {
+	let [l, u] = s(""), d = o(null);
+	a(() => {
+		let e = d.current;
+		e && (e.style.height = "auto", e.style.height = `${Math.min(e.scrollHeight, 150)}px`);
+	}, [l]);
+	let f = () => {
+		let t = l.trim();
+		!t || r || i || (e(t), u(""), d.current && (d.current.style.height = "auto"));
+	};
+	return /* @__PURE__ */ D("div", {
+		className: "flex items-end gap-2 p-4 border-t bg-background",
+		children: [/* @__PURE__ */ E("div", {
+			className: "flex-1 relative",
+			children: /* @__PURE__ */ E("textarea", {
+				ref: d,
+				value: l,
+				onChange: (e) => u(e.target.value),
+				onKeyDown: (e) => {
+					e.key === "Enter" && !e.shiftKey && (e.preventDefault(), f());
+				},
+				placeholder: c,
+				disabled: i,
+				rows: 1,
+				className: t("w-full resize-none rounded-lg border bg-background px-4 py-2.5", "text-sm placeholder:text-muted-foreground", "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", "disabled:cursor-not-allowed disabled:opacity-50", "min-h-[40px] max-h-[150px]"),
+				style: { height: "40px" }
+			})
+		}), r ? /* @__PURE__ */ E("button", {
+			onClick: n,
+			className: t("flex-shrink-0 w-10 h-10 rounded-lg", "flex items-center justify-center", "bg-destructive text-destructive-foreground", "hover:bg-destructive/90 transition-colors"),
+			title: "停止生成",
+			children: /* @__PURE__ */ E(x, { className: "w-4 h-4" })
+		}) : /* @__PURE__ */ E("button", {
+			onClick: f,
+			disabled: !l.trim() || i,
+			className: t("flex-shrink-0 w-10 h-10 rounded-lg", "flex items-center justify-center", "bg-primary text-primary-foreground", "hover:bg-primary/90 transition-colors", "disabled:opacity-50 disabled:cursor-not-allowed"),
+			title: "发送消息",
+			children: /* @__PURE__ */ E(y, { className: "w-4 h-4" })
+		})]
+	});
+}
+//#endregion
+//#region src/components/ai/AIChatDialog.tsx
+var M = /* @__PURE__ */ e({ AIChatDialog: () => I }), N = 300, P = 700, F = 500;
+function I() {
+	let { isDialogOpen: e, closeDialog: r, openSettings: c, messages: d, isLoading: f, error: p, isConfigured: m, selectedText: g, sendMessage: _, regenerateLast: v, clearHistory: y, stopGeneration: x, editMessage: C, deleteMessage: T } = n(), O = o(null), k = o(null), M = o(null), I = o(null), L = o(!0), [R, z] = s(F), [B, V] = s(!1), [H, U] = s({
+		x: 0,
+		y: 0
+	}), [W, G] = s(!1), K = o({
+		x: 0,
+		y: 0,
+		posX: 0,
+		posY: 0
+	}), q = i((e = "smooth") => {
+		O.current && O.current.scrollIntoView({ behavior: e });
+	}, []), J = i(() => {
+		let e = k.current;
+		if (!e) return;
+		let { scrollTop: t, scrollHeight: n, clientHeight: r } = e;
+		L.current = n - t - r < 100;
+	}, []);
+	a(() => {
+		if (L.current && O.current) {
+			let e = d[d.length - 1]?.isStreaming;
+			q(e ? "auto" : "smooth");
+		}
+	}, [d, q]), a(() => {
+		let t = (t) => {
+			t.key === "Escape" && e && r();
+		};
+		return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
+	}, [e, r]);
+	let Y = i((e) => {
+		e.preventDefault(), V(!0);
+		let t = e.clientY, n = R, r = (e) => {
+			let r = t - e.clientY;
+			z(Math.min(P, Math.max(N, n + r)));
+		}, i = () => {
+			V(!1), document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", i);
+		};
+		document.addEventListener("mousemove", r), document.addEventListener("mouseup", i);
+	}, [R]), X = i((e) => {
+		if (e.target.closest("button")) return;
+		e.preventDefault(), G(!0), K.current = {
+			x: e.clientX,
+			y: e.clientY,
+			posX: H.x,
+			posY: H.y
+		};
+		let t = (e) => {
+			let t = e.clientX - K.current.x, n = e.clientY - K.current.y;
+			U({
+				x: K.current.posX + t,
+				y: K.current.posY + n
+			});
+		}, n = () => {
+			G(!1), document.removeEventListener("mousemove", t), document.removeEventListener("mouseup", n);
+		};
+		document.addEventListener("mousemove", t), document.addEventListener("mouseup", n);
+	}, [H]), Z = i(() => {
+		U({
+			x: 0,
+			y: 0
+		});
+	}, []);
+	return !m && e ? /* @__PURE__ */ E("div", {
+		className: "fixed inset-x-4 bottom-4 z-50 mx-auto max-w-2xl",
+		children: /* @__PURE__ */ D("div", {
+			className: t("bg-background border rounded-xl shadow-2xl", "animate-in slide-in-from-bottom-4 duration-300"),
+			children: [/* @__PURE__ */ D("div", {
+				className: "flex items-center justify-between p-4 border-b",
+				children: [/* @__PURE__ */ D("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ E(u, { className: "w-5 h-5 text-primary" }), /* @__PURE__ */ E("h3", {
+						className: "font-semibold",
+						children: "AI 助手"
+					})]
+				}), /* @__PURE__ */ E("button", {
+					onClick: r,
+					className: "p-1.5 rounded hover:bg-muted transition-colors",
+					children: /* @__PURE__ */ E(w, { className: "w-4 h-4" })
+				})]
+			}), /* @__PURE__ */ D("div", {
+				className: "p-6 text-center",
+				children: [
+					/* @__PURE__ */ E(l, { className: "w-12 h-12 mx-auto text-muted-foreground mb-4" }),
+					/* @__PURE__ */ E("h4", {
+						className: "text-lg font-medium mb-2",
+						children: "需要配置 AI"
+					}),
+					/* @__PURE__ */ E("p", {
+						className: "text-muted-foreground mb-4",
+						children: "请先配置 AI 提供商和 API 密钥才能使用此功能"
+					}),
+					/* @__PURE__ */ E("button", {
+						onClick: () => {
+							r(), c();
+						},
+						className: "px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors",
+						children: "前往设置"
+					})
+				]
+			})]
+		})
+	}) : e ? /* @__PURE__ */ E("div", {
+		className: "fixed inset-x-4 bottom-4 z-50 mx-auto max-w-2xl",
+		style: { transform: `translate(${H.x}px, ${H.y}px)` },
+		children: /* @__PURE__ */ D("div", {
+			ref: M,
+			className: t("bg-background border rounded-xl shadow-2xl overflow-hidden", "animate-in slide-in-from-bottom-4 duration-300", "flex flex-col", W && "cursor-grabbing", B && "cursor-ns-resize"),
+			style: {
+				height: `${R}px`,
+				maxHeight: "70vh"
+			},
+			children: [
+				/* @__PURE__ */ D("div", {
+					className: "flex items-center justify-between p-4 border-b shrink-0 cursor-grab active:cursor-grabbing",
+					onMouseDown: X,
+					children: [/* @__PURE__ */ D("div", {
+						className: "flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ E(h, { className: "w-4 h-4 text-muted-foreground" }),
+							/* @__PURE__ */ E(u, { className: "w-5 h-5 text-primary" }),
+							/* @__PURE__ */ E("h3", {
+								className: "font-semibold",
+								children: "AI 助手"
+							})
+						]
+					}), /* @__PURE__ */ D("div", {
+						className: "flex items-center gap-1",
+						children: [
+							H.x !== 0 || H.y !== 0 ? /* @__PURE__ */ E("button", {
+								onClick: Z,
+								className: "p-1.5 rounded hover:bg-muted transition-colors text-muted-foreground hover:text-foreground",
+								title: "重置位置",
+								children: /* @__PURE__ */ E(w, { className: "w-3 h-3" })
+							}) : null,
+							d.length > 0 && /* @__PURE__ */ E("button", {
+								onClick: y,
+								className: "p-1.5 rounded hover:bg-muted transition-colors text-muted-foreground hover:text-foreground",
+								title: "清除对话",
+								children: /* @__PURE__ */ E(S, { className: "w-4 h-4" })
+							}),
+							/* @__PURE__ */ E("button", {
+								onClick: c,
+								className: "p-1.5 rounded hover:bg-muted transition-colors text-muted-foreground hover:text-foreground",
+								title: "设置",
+								children: /* @__PURE__ */ E(b, { className: "w-4 h-4" })
+							}),
+							/* @__PURE__ */ E("button", {
+								onClick: r,
+								className: "p-1.5 rounded hover:bg-muted transition-colors text-muted-foreground hover:text-foreground",
+								title: "关闭",
+								children: /* @__PURE__ */ E(w, { className: "w-4 h-4" })
+							})
+						]
+					})]
+				}),
+				g && /* @__PURE__ */ D("div", {
+					className: "px-4 py-2 bg-muted/50 border-b shrink-0",
+					children: [/* @__PURE__ */ E("div", {
+						className: "text-xs text-muted-foreground mb-1",
+						children: "选中的内容："
+					}), /* @__PURE__ */ E("div", {
+						className: "text-sm line-clamp-2",
+						children: g
+					})]
+				}),
+				/* @__PURE__ */ E("div", {
+					ref: k,
+					className: "flex-1 overflow-y-auto",
+					onScroll: J,
+					children: d.length === 0 ? /* @__PURE__ */ D("div", {
+						className: "flex flex-col items-center justify-center h-full text-muted-foreground p-4",
+						children: [/* @__PURE__ */ E(u, { className: "w-12 h-12 mb-4 opacity-50" }), /* @__PURE__ */ D("p", {
+							className: "text-center",
+							children: [
+								"你好！我是 AI 助手。",
+								/* @__PURE__ */ E("br", {}),
+								"有什么我可以帮助你的吗？"
+							]
+						})]
+					}) : /* @__PURE__ */ D("div", {
+						className: "divide-y",
+						children: [d.map((e, t) => /* @__PURE__ */ E(A, {
+							message: e,
+							onRegenerate: e.role === "assistant" && t === d.length - 1 && !f ? v : void 0,
+							onEdit: e.role === "user" ? (t) => C(e.id, t) : void 0,
+							onDelete: f ? void 0 : () => T(e.id)
+						}, e.id)), /* @__PURE__ */ E("div", { ref: O })]
+					})
+				}),
+				p && /* @__PURE__ */ E("div", {
+					className: "px-4 py-2 bg-destructive/10 text-destructive text-sm border-t",
+					children: p
+				}),
+				/* @__PURE__ */ E(j, {
+					onSend: _,
+					onStop: x,
+					isLoading: f,
+					placeholder: g ? "询问关于选中内容的问题..." : "输入消息..."
+				}),
+				/* @__PURE__ */ E("div", {
+					ref: I,
+					className: "absolute top-0 left-1/2 -translate-x-1/2 w-20 h-2 cursor-ns-resize flex items-center justify-center",
+					onMouseDown: Y,
+					children: /* @__PURE__ */ E("div", { className: "w-8 h-1 rounded-full bg-muted-foreground/30" })
+				})
+			]
+		})
+	}) : null;
+}
+//#endregion
+export { A as i, M as n, j as r, I as t };