Basic UI

1import { ParameterValue, Tool, Command } from "@/components/commandly/types/flat";
2import { generateCommand } from "@/components/commandly/utils/flat";
3import { Button } from "@/components/ui/button";
4import { CardHeader, CardTitle } from "@/components/ui/card";
5import { Label } from "@/components/ui/label";
6import { Switch } from "@/components/ui/switch";
7import { cn } from "@/lib/utils";
8import { TerminalIcon, CopyIcon, SaveIcon } from "lucide-react";
9import {
10  createContext,
11  useCallback,
12  useContext,
13  useEffect,
14  useMemo,
15  useState,
16  type ComponentProps,
17  type ReactNode,
18} from "react";
19import { toast } from "sonner";
20 
21interface GeneratedCommandProps {
22  tool: Tool;
23  selectedCommand?: Command | null;
24  parameterValues: Record<string, ParameterValue>;
25  onSaveCommand?: (command: string) => void;
26  useLongFlag?: boolean;
27  children?: ReactNode;
28}
29 
30interface GeneratedCommandContextValue {
31  generatedCommand: string;
32  useLongFlag: boolean;
33  setUseLongFlag: (value: boolean) => void;
34  supportsFlagPreference: boolean;
35  onCopyCommand: () => void;
36  onSaveCommand?: (command: string) => void;
37}
38 
39const GeneratedCommandContext = createContext<GeneratedCommandContextValue | null>(null);
40 
41function useGeneratedCommandContext() {
42  const context = useContext(GeneratedCommandContext);
43 
44  if (!context) {
45    throw new Error("GeneratedCommand compound components must be used within GeneratedCommand.");
46  }
47 
48  return context;
49}
50 
51function GeneratedCommandRoot({
52  tool,
53  selectedCommand: providedCommand,
54  parameterValues,
55  onSaveCommand,
56  useLongFlag = false,
57  children,
58}: GeneratedCommandProps) {
59  const [prefersLongFlag, setPrefersLongFlag] = useState(useLongFlag);
60  const supportsFlagPreference = useMemo(
61    () =>
62      tool.parameters.some(
63        (parameter) =>
64          parameter.parameterType !== "Argument" &&
65          Boolean(parameter.shortFlag) &&
66          Boolean(parameter.longFlag),
67      ),
68    [tool.parameters],
69  );
70 
71  useEffect(() => {
72    setPrefersLongFlag(useLongFlag);
73  }, [useLongFlag]);
74 
75  const generatedCommand = useMemo(
76    () =>
77      generateCommand(tool, parameterValues, {
78        selectedCommand: providedCommand,
79        useLongFlag: prefersLongFlag,
80      }),
81    [tool, parameterValues, providedCommand, prefersLongFlag],
82  );
83 
84  const copyCommand = useCallback(() => {
85    navigator.clipboard.writeText(generatedCommand);
86    toast("Command copied!");
87  }, [generatedCommand]);
88 
89  const contextValue = useMemo(
90    () => ({
91// … truncated