Use popover in add parameter experience (#1377)

skyvern-frontend/src/components/WorkflowBlockInputTextarea.tsx

@@ -1,22 +1,45 @@
 import { PlusIcon } from "@radix-ui/react-icons";
 import { cn } from "@/util/utils";
 import { AutoResizingTextarea } from "./AutoResizingTextarea/AutoResizingTextarea";
+import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
+import { WorkflowBlockParameterSelect } from "@/routes/workflows/editor/nodes/WorkflowBlockParameterSelect";
 
-type Props = React.ComponentProps<typeof AutoResizingTextarea> & {
-  onIconClick: () => void;
+type Props = Omit<
+  React.ComponentProps<typeof AutoResizingTextarea>,
+  "onChange"
+> & {
+  onChange: (value: string) => void;
+  nodeId: string;
 };
 
 function WorkflowBlockInputTextarea(props: Props) {
+  const { nodeId, onChange, ...textAreaProps } = props;
+
   return (
     <div className="relative">
       <AutoResizingTextarea
-        {...props}
+        {...textAreaProps}
+        onChange={(event) => {
+          onChange(event.target.value);
+        }}
         className={cn("pr-9", props.className)}
       />
       <div className="absolute right-0 top-0 flex size-9 cursor-pointer items-center justify-center">
-        <div className="rounded p-1 hover:bg-muted" onClick={props.onIconClick}>
-          <PlusIcon className="size-4" />
-        </div>
+        <Popover>
+          <PopoverTrigger asChild>
+            <div className="rounded p-1 hover:bg-muted">
+              <PlusIcon className="size-4" />
+            </div>
+          </PopoverTrigger>
+          <PopoverContent>
+            <WorkflowBlockParameterSelect
+              nodeId={nodeId}
+              onAdd={(parameterKey) => {
+                onChange(`${props.value ?? ""}{{${parameterKey}}}`);
+              }}
+            />
+          </PopoverContent>
+        </Popover>
       </div>
     </div>
   );