Hugging Face's logo

Spaces:
holistic-ai
/
AgentGraph
Sleeping

App Files Community
AgentGraph
File size: 2,432 Bytes
c2ea5ed
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
import React from "react";
import { ChevronRight } from "lucide-react";
import { useNavigation, BreadcrumbItem } from "@/context/NavigationContext";
import { useAgentGraph } from "@/context/AgentGraphContext";

interface BreadcrumbProps {
  items?: BreadcrumbItem[];
  className?: string;
}

export function Breadcrumb({ items, className = "" }: BreadcrumbProps) {
  const navigation = useNavigation();
  const { actions } = useAgentGraph();
  const breadcrumbs = items || navigation.state.breadcrumbs;

  if (breadcrumbs.length === 0) {
    return null;
  }

  const handleBreadcrumbClick = (item: BreadcrumbItem) => {
    if (item.path && !item.active) {
      // Navigate based on the path
      switch (item.path) {
        case "welcome":
          actions.setActiveView("welcome");
          break;
        case "traces":
          actions.setActiveView("traces");
          break;
        case "trace-kg":
          actions.setActiveView("trace-kg");
          break;
        case "kg-visualizer":
          actions.setActiveView("kg-visualizer");
          break;
        case "advanced-processing":
          actions.setActiveView("advanced-processing");
          break;
        case "trace-editor":
          actions.setActiveView("trace-editor");
          break;
        case "temporal-visualizer":
          actions.setActiveView("temporal-visualizer");
          break;
        case "connections":
          actions.setActiveView("connections");
          break;
        case "upload":
          actions.setActiveView("upload");
          break;
        default:
          console.log("Navigate to:", item.path);
      }
    }
  };

  return (
    <nav
      className={`flex items-center space-x-1 text-xs text-muted-foreground ${className}`}
    >
      {breadcrumbs.map((item, index) => (
        <div key={index} className="flex items-center">
          {index > 0 && (
            <ChevronRight className="h-3 w-3 mx-1.5 text-muted-foreground/40" />
          )}
          <span
            className={`px-2 py-1 rounded-md transition-colors ${
              item.active || index === breadcrumbs.length - 1
                ? "text-foreground font-medium bg-muted/50"
                : "hover:text-foreground hover:bg-muted/30 cursor-pointer"
            }`}
            onClick={() => handleBreadcrumbClick(item)}
          >
            {item.label}
          </span>
        </div>
      ))}
    </nav>
  );
}