97 lines
3.9 KiB
TypeScript
97 lines
3.9 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-card rounded-2xl shadow-2xl w-full max-w-3xl max-h-[85vh] flex flex-col mx-4 border border-border">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between px-6 py-4 border-b border-border shrink-0">
|
|
<div className="flex items-center gap-2.5">
|
|
<LifeBuoy className="w-5 h-5 text-primary" />
|
|
<h2 className="text-lg font-semibold text-foreground">{t('agents.help.title')}</h2>
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
className="p-1.5 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground 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-border/60 last:border-b-0"
|
|
>
|
|
<summary className="flex items-center gap-2 cursor-pointer py-3 font-medium text-foreground 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-sm max-w-none dark:prose-invert
|
|
prose-headings:font-semibold prose-headings:text-foreground
|
|
prose-h3:text-sm prose-h3:mt-3 prose-h3:mb-1
|
|
prose-p:leading-relaxed prose-p:text-muted-foreground prose-p:my-1.5
|
|
prose-li:text-muted-foreground prose-li:my-0.5
|
|
prose-strong:text-foreground
|
|
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-border
|
|
prose-table:text-xs
|
|
prose-th:text-left prose-th:font-medium prose-th:text-foreground prose-th:py-1 prose-th:pr-3
|
|
prose-td:text-muted-foreground prose-td:py-1 prose-td:pr-3
|
|
prose-blockquote:border-primary/30 prose-blockquote:text-muted-foreground
|
|
">
|
|
<Markdown remarkPlugins={[remarkGfm]}>
|
|
{t(`agents.help.${section.key}Content`)}
|
|
</Markdown>
|
|
</div>
|
|
</details>
|
|
))}
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="px-6 py-4 border-t border-border shrink-0">
|
|
<button
|
|
onClick={onClose}
|
|
className="w-full px-4 py-2.5 text-sm font-medium text-primary-foreground bg-primary rounded-lg hover:bg-primary/90 transition-colors"
|
|
>
|
|
{t('agents.help.close')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|