feat: add NewAgentDialog component and enhance agent selection with creation option in MeetingForm

Author: Lostovayne

src/modules/meetings/ui/components/meeting-form.tsx

@@ -2,6 +2,7 @@ import { Button } from "@/components/ui/button";
 import {
   Form,
   FormControl,
+  FormDescription,
   FormField,
   FormItem,
   FormLabel,
@@ -18,6 +19,7 @@ import type { z } from "zod";
 
 import { CommandSelect } from "@/components/command-select";
 import { GenerateAvatar } from "@/components/generate-avatar";
+import NewAgentDialog from "@/modules/agents/ui/components/new-agent-dialog";
 import { meetingsInsertSchema } from "../../schemas";
 import { MeetingGetOne } from "../../types";
 
@@ -30,7 +32,7 @@ interface MeetingFormProps {
 export const MeetingForm = ({ onSuccess, onCancel, initialValues }: MeetingFormProps) => {
   const trpc = useTRPC();
   const [agentSearch, setAgentSearch] = useState<string>("");
-  const [open, setOpen] = useState<boolean>(false);
+  const [openNewAgentDialog, setOpenNewAgentDialog] = useState<boolean>(false);
 
   const queryClient = useQueryClient();
   const firstInputRef = useRef<HTMLInputElement>(null);
@@ -102,72 +104,85 @@ export const MeetingForm = ({ onSuccess, onCancel, initialValues }: MeetingFormP
   };
 
   return (
-    <Form {...form}>
-      <form className="space-y-4" onSubmit={form.handleSubmit(onSubmit)}>
-        <FormField
-          name="name"
-          control={form.control}
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Name</FormLabel>
-              <FormControl>
-                <Input {...field} placeholder="Enter meeting name" />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          name="agentId"
-          control={form.control}
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Agent</FormLabel>
-              <FormControl>
-                <CommandSelect
-                  options={(agents.data?.items ?? []).map((agent) => ({
-                    id: agent.id,
-                    value: agent.id,
-                    children: (
-                      <div className="flex items-center gap-x-2">
-                        <GenerateAvatar
-                          seed={agent.name}
-                          className="border size-6"
-                          variant="botttsNeutral"
-                        />
-                        <span>{agent.name}</span>
-                      </div>
-                    ),
-                  }))}
-                  onSelect={(value) => field.onChange(value)}
-                  onSearch={setAgentSearch}
-                  value={field.value}
-                  placeholder="Select an agent..."
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <div className="flex justify-between gap-x-2">
-          {onCancel && (
-            <Button
-              onClick={onCancel}
-              disabled={isPending}
-              variant="ghost"
-              className="mr-2"
-              type="button"
-            >
-              Cancel
+    <>
+      <NewAgentDialog open={openNewAgentDialog} onOpenChange={setOpenNewAgentDialog} />
+      <Form {...form}>
+        <form className="space-y-4" onSubmit={form.handleSubmit(onSubmit)}>
+          <FormField
+            name="name"
+            control={form.control}
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Name</FormLabel>
+                <FormControl>
+                  <Input {...field} placeholder="Enter meeting name" />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            name="agentId"
+            control={form.control}
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Agent</FormLabel>
+                <FormControl>
+                  <CommandSelect
+                    options={(agents.data?.items ?? []).map((agent) => ({
+                      id: agent.id,
+                      value: agent.id,
+                      children: (
+                        <div className="flex items-center gap-x-2">
+                          <GenerateAvatar
+                            seed={agent.name}
+                            className="border size-6"
+                            variant="botttsNeutral"
+                          />
+                          <span>{agent.name}</span>
+                        </div>
+                      ),
+                    }))}
+                    onSelect={(value) => field.onChange(value)}
+                    onSearch={setAgentSearch}
+                    value={field.value}
+                    placeholder="Select an agent..."
+                  />
+                </FormControl>
+                <FormDescription>
+                  Not found what you&apos;re looking for?{" "}
+                  <button
+                    type="button"
+                    className="text-primary hover:underline"
+                    onClick={() => setOpenNewAgentDialog(true)}
+                  >
+                    Create a new agent
+                  </button>
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <div className="flex justify-between gap-x-2">
+            {onCancel && (
+              <Button
+                onClick={onCancel}
+                disabled={isPending}
+                variant="ghost"
+                className="mr-2"
+                type="button"
+              >
+                Cancel
+              </Button>
+            )}
+            <Button type="submit" disabled={isPending}>
+              {isEdit ? "Update Meeting" : "Create Meeting"}
             </Button>
-          )}
-          <Button type="submit" disabled={isPending}>
-            {isEdit ? "Update Meeting" : "Create Meeting"}
-          </Button>
-        </div>
-      </form>
-    </Form>
+          </div>
+        </form>
+      </Form>
+    </>
   );
 };