@alauda/doom
Version:
Doctor Doom making docs.
17 lines (16 loc) • 1.52 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { clsx } from 'clsx';
import { useCallback, useMemo, useState } from 'react';
import { X } from "../../../../../runtime/components/_X.js";
import AngleDownIcon from '@alauda/doom/assets/angle-down.svg?react';
import { useTranslation } from '@alauda/doom/runtime';
import classes from '@alauda/doom/styles/chat-ref-docs.module.scss';
export const ChatRefDocs = ({ refDocs }) => {
const t = useTranslation();
const [expand, setExpand] = useState(false);
const toggleExpand = useCallback(() => {
setExpand((prev) => !prev);
}, []);
const displayedDocs = useMemo(() => (expand ? refDocs : refDocs.slice(0, 3)), [expand, refDocs]);
return (_jsxs("div", { className: clsx('chat-ref-docs', classes.container), children: [_jsxs("div", { className: classes.header, children: [_jsx("span", { className: classes.title, children: t('referenced_doc_links') + t('colon') }), refDocs.length > 3 && (_jsxs("span", { className: classes.action, onClick: toggleExpand, children: [t(expand ? 'view_less_related_docs' : 'view_more_related_docs'), " (", refDocs.length, ")", _jsx(AngleDownIcon, { className: clsx(classes.icon, expand && classes.expanded) })] }))] }), _jsx("ul", { className: classes.docs, children: displayedDocs.map((doc) => (_jsx("li", { className: classes.doc, children: _jsx(X.a, { href: doc.path, title: doc.content, target: "_blank", rel: "noopener noreferrer", children: doc.content }) }, doc.id))) })] }));
};