97 lines
4.3 KiB
TypeScript
97 lines
4.3 KiB
TypeScript
'use client'
|
|
|
|
/**
|
|
* Agent Help Modal
|
|
* Rich contextual help guide for the Agents page.
|
|
* Collapsible sections with Markdown content inside each.
|
|
*/
|
|
|
|
import { X, LifeBuoy } from 'lucide-react'
|
|
import Markdown from 'react-markdown'
|
|
import remarkGfm from 'remark-gfm'
|
|
import { useLanguage } from '@/lib/i18n'
|
|
|
|
interface AgentHelpProps {
|
|
onClose: () => void
|
|
}
|
|
|
|
const SECTIONS = [
|
|
{ key: 'whatIsAgent', defaultOpen: true },
|
|
{ key: 'howToUse', defaultOpen: false },
|
|
{ key: 'types', defaultOpen: false },
|
|
{ key: 'advanced', defaultOpen: false },
|
|
{ key: 'tools', defaultOpen: false },
|
|
{ key: 'frequency', defaultOpen: false },
|
|
{ key: 'targetNotebook', defaultOpen: false },
|
|
{ key: 'templates', defaultOpen: false },
|
|
{ key: 'tips', defaultOpen: false },
|
|
] as const
|
|
|
|
export function AgentHelp({ onClose }: AgentHelpProps) {
|
|
const { t } = useLanguage()
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
|
|
<div className="bg-white dark:bg-slate-900 rounded-2xl shadow-2xl w-full max-w-3xl max-h-[85vh] flex flex-col mx-4">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between px-6 py-4 border-b border-slate-200 dark:border-slate-700 shrink-0">
|
|
<div className="flex items-center gap-2.5">
|
|
<LifeBuoy className="w-5 h-5 text-primary" />
|
|
<h2 className="text-lg font-semibold">{t('agents.help.title')}</h2>
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
className="p-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition-colors"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Content — collapsible sections */}
|
|
<div className="flex-1 overflow-y-auto px-6 py-2">
|
|
{SECTIONS.map(section => (
|
|
<details
|
|
key={section.key}
|
|
open={section.defaultOpen}
|
|
className="group border-b border-slate-100 dark:border-slate-800 last:border-b-0"
|
|
>
|
|
<summary className="flex items-center gap-2 cursor-pointer py-3 font-medium text-slate-800 dark:text-slate-200 select-none hover:text-primary transition-colors text-sm">
|
|
<span className="text-primary text-xs transition-transform group-open:rotate-90">▸</span>
|
|
{t(`agents.help.${section.key}`)}
|
|
</summary>
|
|
<div className="pb-4 pl-5 prose prose-slate dark:prose-invert prose-sm max-w-none
|
|
prose-headings:font-semibold prose-headings:text-slate-800 dark:prose-headings:text-slate-200
|
|
prose-h3:text-sm prose-h3:mt-3 prose-h3:mb-1
|
|
prose-p:leading-relaxed prose-p:text-slate-600 dark:prose-p:text-slate-400 prose-p:my-1.5
|
|
prose-li:text-slate-600 dark:prose-li:text-slate-400 prose-li:my-0.5
|
|
prose-strong:text-slate-700 dark:prose-strong:text-slate-300
|
|
prose-code:text-primary prose-code:bg-primary/5 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-xs prose-code:before:content-none prose-code:after:content-none
|
|
prose-ul:my-2 prose-ol:my-2
|
|
prose-hr:border-slate-200 dark:prose-hr:border-slate-700
|
|
prose-table:text-xs
|
|
prose-th:text-left prose-th:font-medium prose-th:text-slate-700 dark:prose-th:text-slate-300 prose-th:py-1 prose-th:pr-3
|
|
prose-td:text-slate-600 dark:prose-td:text-slate-400 prose-td:py-1 prose-td:pr-3
|
|
prose-blockquote:border-primary/30 prose-blockquote:text-slate-500 dark:prose-blockquote:text-slate-400
|
|
">
|
|
<Markdown remarkPlugins={[remarkGfm]}>
|
|
{t(`agents.help.${section.key}Content`)}
|
|
</Markdown>
|
|
</div>
|
|
</details>
|
|
))}
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="px-6 py-4 border-t border-slate-200 dark:border-slate-700 shrink-0">
|
|
<button
|
|
onClick={onClose}
|
|
className="w-full px-4 py-2.5 text-sm font-medium text-white bg-primary rounded-lg hover:bg-primary/90 transition-colors"
|
|
>
|
|
{t('agents.help.close')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|