mirror of
https://github.com/Egonex-AI/Understand-Anything.git
synced 2026-06-22 10:58:03 +08:00
feat(dashboard): upgrade languageNotes to collapsible Language Concepts section
Replace plain blue box with indigo-themed collapsible panel featuring chevron toggle, matching the indigo design language used in LearnPanel. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 4.6
parent
4452fe8e7b
commit
ccdc4b723f
@@ -1,3 +1,4 @@
|
||||
import { useState } from "react";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
import { useDashboardStore } from "../store";
|
||||
|
||||
@@ -24,6 +25,7 @@ export default function NodeInfo() {
|
||||
(s) => s.nodeExplanationLoading,
|
||||
);
|
||||
const explainNode = useDashboardStore((s) => s.explainNode);
|
||||
const [languageExpanded, setLanguageExpanded] = useState(true);
|
||||
|
||||
const node = graph?.nodes.find((n) => n.id === selectedNodeId) ?? null;
|
||||
|
||||
@@ -77,8 +79,28 @@ export default function NodeInfo() {
|
||||
)}
|
||||
|
||||
{node.languageNotes && (
|
||||
<div className="bg-blue-900/50 border border-blue-700 rounded p-3 mb-4 text-sm text-blue-200">
|
||||
{node.languageNotes}
|
||||
<div className="mb-4">
|
||||
<button
|
||||
onClick={() => setLanguageExpanded(!languageExpanded)}
|
||||
className="flex items-center gap-1.5 text-xs font-semibold text-indigo-400 uppercase tracking-wider mb-2 hover:text-indigo-300 transition-colors"
|
||||
>
|
||||
<svg
|
||||
className={`w-3 h-3 transition-transform ${languageExpanded ? "rotate-90" : ""}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
Language Concepts
|
||||
</button>
|
||||
{languageExpanded && (
|
||||
<div className="bg-indigo-900/30 border border-indigo-700/50 rounded-lg p-3">
|
||||
<p className="text-sm text-indigo-200 leading-relaxed">
|
||||
{node.languageNotes}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user