Function EditWithAI

app/src/components/EditWithAI.tsx:30–266

()

const content = t`With Flowchart Fun's Pro version, you can use natural language comamnds to quickly flesh out your flowchart details, ideal for creating diagrams on the go. For $6/month, get the ease of accessible AI editing to enhance your flowcharting experience.`;

export function EditWithAI() {
  const [message, setMessage] = useState<string | null>(null);
  const [isOpen, setIsOpen] = useState(false);
  const [transcriptionLoading, setTranscriptionLoading] = useState(false);
  const hasProAccess = useHasProAccess();

  const { mutate: edit, isLoading: editIsLoading } = useMutation({
    mutationFn: async (body: { prompt: string; graph: GraphForAI }) => {
      // /api/prompt/edit
      const response = await fetch("/api/prompt/edit", {
        method: "POST",
        body: JSON.stringify(body),
        headers: {
          "Content-Type": "application/json",
        },
      });
      const data = await response.json();

      return data as {
        message: string;
        toolCalls: {
          name: "updateGraph";
          args: GraphForAI;
        }[];
      };
    },
    onSuccess(data) {
      if (data.message) {
        setMessage(data.message);
      }

      for (const { name, args } of data.toolCalls) {
        switch (name) {
          case "updateGraph": {
            const newText = toGraphSelector(args);
            useDoc.setState({ text: newText }, false, "EditWithAI");
            break;
          }
        }
      }
    },
    onSettled() {
      setTranscriptionLoading(false);
    },
  });

  const submitPrompt = useCallback(
    (prompt: string) => {
      if (!hasProAccess) {
        showPaywall({
          title,
          content,
          imgUrl: "/images/ai-edit.png",
          toPricingCode: "EditWithAI",
        });
        return;
      }