JSON Output

1import { Tool } from "@/components/commandly/types/flat";
2import { exportToStructuredJSON } from "@/components/commandly/utils/flat";
3import { convertToNestedStructure } from "@/components/commandly/utils/nested";
4import { Badge } from "@/components/ui/badge";
5import { Button } from "@/components/ui/button";
6import { Card, CardAction, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
7import {
8  Command as UICommand,
9  CommandGroup,
10  CommandItem,
11  CommandList,
12} from "@/components/ui/command";
13import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
14import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
15import { Textarea } from "@/components/ui/textarea";
16import { cn } from "@/lib/utils";
17import { CheckIcon, ChevronsUpDownIcon, CopyIcon, Edit2Icon, XIcon } from "lucide-react";
18import { useEffect, useMemo, useState } from "react";
19import { toast } from "sonner";
20 
21const jsonOptions = [
22  { value: "nested", label: "Nested" },
23  { value: "flat", label: "Flat" },
24];
25 
26type DiffLine = { type: "same" | "added" | "removed"; text: string };
27 
28function diffLines(before: string, after: string): DiffLine[] {
29  const a = before.split("\n");
30  const b = after.split("\n");
31  const m = a.length;
32  const n = b.length;
33  const dp = Array.from({ length: m + 1 }, () => new Array<number>(n + 1).fill(0));
34  for (let i = 1; i <= m; i++)
35    for (let j = 1; j <= n; j++)
36      dp[i][j] =
37        a[i - 1] === b[j - 1] ? dp[i - 1][j - 1] + 1 : Math.max(dp[i - 1][j], dp[i][j - 1]);
38  const result: DiffLine[] = [];
39  let i = m,
40    j = n;
41  while (i > 0 || j > 0) {
42    if (i > 0 && j > 0 && a[i - 1] === b[j - 1]) {
43      result.unshift({ type: "same", text: a[i - 1] });
44      i--;
45      j--;
46    } else if (j > 0 && (i === 0 || dp[i][j - 1] >= dp[i - 1][j])) {
47      result.unshift({ type: "added", text: b[j - 1] });
48      j--;
49    } else {
50      result.unshift({ type: "removed", text: a[i - 1] });
51      i--;
52    }
53  }
54  return result;
55}
56 
57interface JsonTypeComponentProps {
58  tool: Tool;
59  originalTool?: Tool;
60  onApply?: (tool: Tool) => void;
61}
62 
63export function JsonOutput({ tool, originalTool, onApply }: JsonTypeComponentProps) {
64  const [open, setOpen] = useState(false);
65  const [jsonString, setJsonString] = useState<string>();
66  const [originalJsonString, setOriginalJsonString] = useState<string>();
67  const [jsonType, setJsonType] = useState<"nested" | "flat">("flat");
68  const [isEditing, setIsEditing] = useState(false);
69// … truncated