Function EditUserMessageModal

components/approval/editModals.tsx:392–557

(props: {
  open: boolean;
  close: () => void;
  userMessage: UIMessageData | undefined;
  answer: UIAnswerType;
  variables: ApprovalVariable[];
  setUserMessage: (message: Record<string, any>) => void;
})

}

export function EditUserMessageModal(props: {
  open: boolean;
  close: () => void;
  userMessage: UIMessageData | undefined;
  answer: UIAnswerType;
  variables: ApprovalVariable[];
  setUserMessage: (message: Record<string, any>) => void;
}) {
  const supabase = useSupabaseClient<Database>();
  const [localVariables, setLocalVariables] = useState<Record<string, any>>({});
  const [isValid, setIsValid] = useState<boolean[]>([]);
  useEffect(() => {
    try {
      const parsedVariables = JSON.parse(props.userMessage?.raw_text ?? "{}");
      setLocalVariables(
        Object.entries(parsedVariables).reduce((acc, [k, v]) => {
          if (Array.isArray(v) || typeof v === "object") {
            acc[k] = JSON.stringify(v);
          } else {
            acc[k] = v;
          }
          return acc;
        }, {} as Record<string, any>),
      );
      setIsValid(Object.keys(parsedVariables).map(() => true));
    } catch (e) {
      console.error(e);
    }
  }, [props.userMessage]);
  return (
    <Modal
      open={Boolean(props.open)}
      setOpen={() => props.close()}
      classNames={"max-w-3xl overflow-visible"}
    >
      <div className="w-full flex-col mb-4">
        <h1 className="text-xl text-gray-300">Edit Parameters Values</h1>
      </div>
      {Object.keys(localVariables).length > 0 ? (
        <div className="flex flex-col">
          {Object.entries(localVariables).map(([key, val], idx) => {
            const relevantVariable = props.variables.find(
              (v) => v.name === key,
            );
            if (!relevantVariable) return null;
            return (
              <div
                key={idx}
                className="relative grid grid-cols-6 gap-x-2 border-t first:border-t-0 border-t-gray-600 py-1.5"
              >
                <div className="col-span-2 flex place-items-center h-full">
                  <p className={"text-lg text-gray-300 align-text-bottom"}>
                    {key}
                  </p>
                  <div className="relative">
                    <QuestionMarkCircleIcon
                      className={
                        "ml-3 h-6 w-6 peer text-gray-400 hover:bg-gray-700 transition p-0.5 rounded-full"