@agent-native/dispatch 0.21.0 → 0.22.1

package/src/components/layout/Layout.tsx

@@ -118,7 +118,6 @@ import { Skeleton } from "../ui/skeleton";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import { Header } from "./Header";
 import { HeaderActionsProvider } from "./HeaderActions";
-import { WorkspaceAppsRail } from "./workspace-apps-rail";
 
 export type DispatchNavSection = "primary" | "operations";
 
@@ -521,14 +520,20 @@ function DispatchChatsSection({
   prelude,
   chatFirstMode = false,
   chatFirstEmbedded = false,
+  chatFirstNavigation,
 }: {
   onNavigate?: () => void;
   showNewChat?: boolean;
   prelude?: ReactNode;
   chatFirstMode?: boolean;
   chatFirstEmbedded?: boolean;
+  chatFirstNavigation?: {
+    onOpenIntegrations: () => void;
+    onOpenScheduled: () => void;
+  };
 }) {
   const t = useT();
+  const chatFirstCopy = useMemo(() => createDispatchChatFirstCopy(t), [t]);
   const navigate = useNavigate();
   const location = useLocation();
   const [includeExternal, setIncludeExternal] = useState(false);
@@ -662,54 +667,57 @@ function DispatchChatsSection({
         showNewChat && "dispatch-chat-first-chats",
       )}
     >
-      {showNewChat ? (
-        <button
-          type="button"
-          className="flex h-7 w-[calc(100%-0.5rem)] items-center gap-2 rounded-md px-2 text-sm text-sidebar-foreground/80 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
-          onClick={() => void handleNewChat()}
-        >
-          <IconPlus size={16} className="shrink-0" aria-hidden="true" />
-          <span>New chat</span>
-        </button>
+      {showNewChat && chatFirstNavigation ? (
+        <nav className="space-y-0.5 px-2 py-2">
+          <ChatFirstPrimaryNavigation
+            copy={chatFirstCopy}
+            onNewChat={() => void handleNewChat()}
+            onOpenIntegrations={chatFirstNavigation.onOpenIntegrations}
+            onOpenScheduled={chatFirstNavigation.onOpenScheduled}
+            onSearch={openCommandMenu}
+          />
+        </nav>
       ) : null}
       {prelude}
-      <div className="flex justify-end px-2 pt-0.5">
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <button
-              type="button"
-              data-dispatch-chat-source-toggle
-              aria-pressed={includeExternal}
-              aria-label={
-                includeExternal
-                  ? t("dispatch.sidebar.showLocalChats", {
-                      defaultValue: "Show local chats",
-                    })
-                  : t("dispatch.sidebar.showAllChats", {
-                      defaultValue: "Show all chats",
-                    })
-              }
-              onClick={() => setIncludeExternal((current) => !current)}
-              className="flex size-6 items-center justify-center rounded-md text-sidebar-foreground/55 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
-            >
-              {includeExternal ? (
-                <IconWorld size={14} aria-hidden="true" />
-              ) : (
-                <IconDeviceDesktop size={14} aria-hidden="true" />
-              )}
-            </button>
-          </TooltipTrigger>
-          <TooltipContent side="right">
-            {includeExternal
-              ? t("dispatch.sidebar.showLocalChats", {
-                  defaultValue: "Show local chats",
-                })
-              : t("dispatch.sidebar.showAllChats", {
-                  defaultValue: "Show all chats",
-                })}
-          </TooltipContent>
-        </Tooltip>
-      </div>
+      {!chatFirstMode ? (
+        <div className="flex justify-end px-2 pt-0.5">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                data-dispatch-chat-source-toggle
+                aria-pressed={includeExternal}
+                aria-label={
+                  includeExternal
+                    ? t("dispatch.sidebar.showLocalChats", {
+                        defaultValue: "Show local chats",
+                      })
+                    : t("dispatch.sidebar.showAllChats", {
+                        defaultValue: "Show all chats",
+                      })
+                }
+                onClick={() => setIncludeExternal((current) => !current)}
+                className="flex size-6 items-center justify-center rounded-md text-sidebar-foreground/55 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+              >
+                {includeExternal ? (
+                  <IconWorld size={14} aria-hidden="true" />
+                ) : (
+                  <IconDeviceDesktop size={14} aria-hidden="true" />
+                )}
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="right">
+              {includeExternal
+                ? t("dispatch.sidebar.showLocalChats", {
+                    defaultValue: "Show local chats",
+                  })
+                : t("dispatch.sidebar.showAllChats", {
+                    defaultValue: "Show all chats",
+                  })}
+            </TooltipContent>
+          </Tooltip>
+        </div>
+      ) : null}
       {!chatFirstMode &&
         chatsLoading &&
         visibleThreads.length === 0 &&
@@ -983,20 +991,6 @@ export function NavContent({
     />
   );
 
-  const chatFirstPrimaryNavigation = (
-    <ChatFirstPrimaryNavigation
-      copy={chatFirstCopy}
-      onOpenIntegrations={() => {
-        navigate(dispatchNavLinkTarget("/admin/integrations"));
-        onNavigate?.();
-      }}
-      onOpenScheduled={() => {
-        navigate(dispatchNavLinkTarget("/admin/automations"));
-        onNavigate?.();
-      }}
-    />
-  );
-
   const chatFirstAppsRail = (
     <ChatFirstAppsRail
       apps={chatFirstApps}
@@ -1011,6 +1005,10 @@ export function NavContent({
         onChatFirstAppOpen?.(app);
         onNavigate?.();
       }}
+      onOpenAllApps={() => {
+        navigate(dispatchNavLinkTarget("/apps"));
+        onNavigate?.();
+      }}
       createAppTrigger={chatFirstCreateAppTrigger}
       renderIcon={(app) => (
         <AppIcon
@@ -1055,6 +1053,7 @@ export function NavContent({
                   onNavigate?.();
                 }}
                 aria-label={label}
+                aria-current={itemMatchesLocalPath ? "page" : undefined}
                 className={cn(
                   "flex size-9 items-center justify-center rounded-md text-sm",
                   itemMatchesLocalPath
@@ -1093,6 +1092,7 @@ export function NavContent({
               }
               onNavigate?.();
             }}
+            aria-current={itemMatchesLocalPath ? "page" : undefined}
             className={cn(
               "flex h-8 w-full items-center gap-2 rounded-md px-2 text-sm",
               itemMatchesLocalPath
@@ -1119,6 +1119,33 @@ export function NavContent({
     );
   };
 
+  const bottomNavigation = (
+    <nav className={cn("py-1", collapsed ? "px-1.5" : "px-2")}>
+      <ul
+        className={cn(
+          collapsed ? "flex flex-col items-center gap-1" : "space-y-0.5",
+        )}
+      >
+        {BOTTOM_NAV_ITEMS.map(renderNavItem)}
+      </ul>
+    </nav>
+  );
+  const organizationPicker = (
+    <div
+      className={cn("py-2", collapsed ? "flex justify-center px-1" : "px-3")}
+    >
+      <OrgSwitcher compact={collapsed} reserveSpace />
+    </div>
+  );
+  const sidebarFooterActions = (
+    <SidebarFooterActions
+      collapsed={collapsed}
+      feedback={feedbackButton}
+      search={searchButton}
+      collapse={collapseButton}
+    />
+  );
+
   return (
     <>
       <div
@@ -1175,14 +1202,18 @@ export function NavContent({
               onNavigate={onNavigate}
               showNewChat
               chatFirstMode
-              prelude={
-                <>
-                  <nav className="space-y-0.5 px-2 py-2">
-                    {chatFirstPrimaryNavigation}
-                  </nav>
-                  {chatFirstAppsRail}
-                </>
-              }
+              chatFirstEmbedded={chatFirstEmbedded}
+              chatFirstNavigation={{
+                onOpenIntegrations: () => {
+                  navigate(dispatchNavLinkTarget("/admin/integrations"));
+                  onNavigate?.();
+                },
+                onOpenScheduled: () => {
+                  navigate(dispatchNavLinkTarget("/admin/automations"));
+                  onNavigate?.();
+                },
+              }}
+              prelude={chatFirstAppsRail}
             />
           ) : (
             chatFirstAppsRail
@@ -1203,44 +1234,19 @@ export function NavContent({
           >
             {primaryNavItems.map(renderNavItem)}
           </ul>
-
-          <WorkspaceAppsRail collapsed={collapsed} onNavigate={onNavigate} />
         </nav>
 
         <div className="mt-auto shrink-0">
-          <nav className={cn("py-1", collapsed ? "px-1.5" : "px-2")}>
-            <ul
-              className={cn(
-                collapsed ? "flex flex-col items-center gap-1" : "space-y-0.5",
-              )}
-            >
-              {BOTTOM_NAV_ITEMS.map(renderNavItem)}
-            </ul>
-          </nav>
-          <div
-            className={cn(
-              "py-2",
-              collapsed ? "flex justify-center px-1" : "px-3",
-            )}
-          >
-            <OrgSwitcher compact={collapsed} reserveSpace />
-          </div>
+          {bottomNavigation}
+          {organizationPicker}
         </div>
-        <SidebarFooterActions
-          collapsed={collapsed}
-          feedback={feedbackButton}
-          search={searchButton}
-          collapse={collapseButton}
-        />
+        {sidebarFooterActions}
       </div>
-      {chatFirstMode && collapsed ? (
+      {chatFirstMode ? (
         <div className="mt-auto shrink-0">
-          <SidebarFooterActions
-            collapsed
-            feedback={feedbackButton}
-            search={searchButton}
-            collapse={collapseButton}
-          />
+          {bottomNavigation}
+          {organizationPicker}
+          {collapsed ? sidebarFooterActions : null}
         </div>
       ) : null}
     </>

package/src/components/ui/dialog.tsx

@@ -1,120 +1 @@
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { IconX } from "@tabler/icons-react";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const Dialog = DialogPrimitive.Root;
-
-const DialogTrigger = DialogPrimitive.Trigger;
-
-const DialogPortal = DialogPrimitive.Portal;
-
-const DialogClose = DialogPrimitive.Close;
-
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className,
-    )}
-    {...props}
-  />
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <IconX className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-
-const DialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className,
-    )}
-    {...props}
-  />
-);
-DialogHeader.displayName = "DialogHeader";
-
-const DialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className,
-    )}
-    {...props}
-  />
-);
-DialogFooter.displayName = "DialogFooter";
-
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className,
-    )}
-    {...props}
-  />
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
-
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
-
-export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogClose,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-};
+export * from "@agent-native/toolkit/ui/dialog";

package/src/components/ui/dropdown-menu.tsx

@@ -1,198 +1 @@
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { IconCheck, IconChevronRight, IconCircle } from "@tabler/icons-react";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const DropdownMenu = DropdownMenuPrimitive.Root;
-
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-
-const DropdownMenuGroup = DropdownMenuPrimitive.Group;
-
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-
-const DropdownMenuSub = DropdownMenuPrimitive.Sub;
-
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-
-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <IconChevronRight className="ml-auto h-4 w-4" />
-  </DropdownMenuPrimitive.SubTrigger>
-));
-DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName;
-
-const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className,
-    )}
-    {...props}
-  />
-));
-DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName;
-
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className,
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-));
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  />
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-
-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className,
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <IconCheck className="h-4 w-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.CheckboxItem>
-));
-DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName;
-
-const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <IconCircle className="h-2 w-2 fill-current" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  />
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-
-const DropdownMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
-      {...props}
-    />
-  );
-};
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
-
-export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
-};
+export * from "@agent-native/toolkit/ui/dropdown-menu";

package/src/components/ui/popover.tsx

@@ -5,6 +5,8 @@ import { cn } from "../../lib/utils";
 
 const Popover = PopoverPrimitive.Root;
 
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
 const PopoverTrigger = PopoverPrimitive.Trigger;
 
 const PopoverContent = React.forwardRef<
@@ -26,4 +28,4 @@ const PopoverContent = React.forwardRef<
 ));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent };
+export { Popover, PopoverAnchor, PopoverTrigger, PopoverContent };