AI Agent Context

1"use client";
2 
3import * as React from "react";
4 
5import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
6import {
7  Braces,
8  Check,
9  ChevronDown,
10  ChevronRight,
11  Database,
12  Hash,
13  List,
14  Pencil,
15  ToggleLeft,
16  Type,
17  X,
18} from "lucide-react";
19 
20import { cn } from "@/lib/utils";
21 
22type ValueType = "string" | "number" | "boolean" | "object" | "array" | "null";
23 
24interface AiAgentContextContextValue {
25  editable: boolean;
26  onChange?: (key: string, value: unknown) => void;
27}
28 
29const AiAgentContextContext =
30  React.createContext<AiAgentContextContextValue | null>(null);
31 
32function useAgentContextContext() {
33  const context = React.useContext(AiAgentContextContext);
34  if (!context) {
35    throw new Error(
36      "AiAgentContext components must be used within <AiAgentContext>",
37    );
38  }
39  return context;
40}
41 
42function getValueType(value: unknown): ValueType {
43  if (value === null) return "null";
44  if (Array.isArray(value)) return "array";
45  return typeof value as ValueType;
46}
47 
48interface AiAgentContextProps {
49  context: Record<string, unknown>;
50  title?: string;
51  editable?: boolean;
52  onChange?: (key: string, value: unknown) => void;
53  children?: React.ReactNode;
54  className?: string;
55}
56 
57function AiAgentContext({
58  context,
59  title,
60  editable = false,
61  onChange,
62  children,
63  className,
64}: AiAgentContextProps) {
65  const contextValue = React.useMemo(
66    () => ({ editable, onChange }),
67    [editable, onChange],
68  );
69 
70  return (
71    <AiAgentContextContext.Provider value={contextValue}>
72      <div
73        data-slot="ai-agent-context"
74        className={cn(
75          "rounded-lg border border-border bg-card text-card-foreground",
76          className,
77        )}
78      >
79        {children || (
80          <>
81            <AiAgentContextHeader>{title}</AiAgentContextHeader>
82            <AiAgentContextContent context={context} />
83          </>
84        )}
85      </div>
86    </AiAgentContextContext.Provider>
87  );
88}
89 
90interface AiAgentContextHeaderProps {
91  children?: React.ReactNode;
92  className?: string;
93}
94 
95function AiAgentContextHeader({
96  children,
97  className,
98}: AiAgentContextHeaderProps) {
99  return (
100    <div
101      data-slot="ai-agent-context-header"
102      className={cn(
103        "flex items-center gap-2 border-b border-border px-4 py-3",
104        className,
105      )}
106    >
107      <div className="flex size-8 shrink-0 items-center justify-center rounded-md bg-muted">
108        <Database className="size-4 text-muted-foreground" />
109      </div>
110// … truncated