@opengeni/react 0.36.1 → 0.40.0

package/src/hooks/use-composer.ts

@@ -1,12 +1,13 @@
-import type {
-  ComposerDraft,
-  EffectiveControlResumeOption,
-  EffectiveSessionControl,
-  OpenGeniApiError,
-  ResourceRef,
-  SaveComposerDraftRequest,
-  SendMessageInput,
-  SessionEvent,
+import {
+  DEFAULT_FILE_RESOURCE_MOUNT_ROOT,
+  type ComposerDraft,
+  type EffectiveControlResumeOption,
+  type EffectiveSessionControl,
+  type OpenGeniApiError,
+  type ResourceRef,
+  type SaveComposerDraftRequest,
+  type SendMessageInput,
+  type SessionEvent,
 } from "@opengeni/sdk";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { useEmbeddedSession, type EmbeddedSessionClientOverride } from "../session-context";
@@ -225,6 +226,8 @@ export type ComposerState = {
   send: (text?: string) => Promise<boolean>;
   /** Supersede current direction with the draft. */
   steer: (text?: string) => Promise<boolean>;
+  /** Optimistic-to-durable projection for a Steer that has not started yet. */
+  steering?: ComposerSteeringState | null | undefined;
   sending: boolean;
   canSend: boolean;
   /** Pause the session without deleting its prompt queue. */
@@ -250,6 +253,59 @@ export type ComposerState = {
   clearError: () => void;
 };
 
+export type ComposerSteeringState = {
+  phase: "submitting" | "accepted";
+  text: string;
+  clientEventId: string | null;
+  triggerEventId: string | null;
+  turnId: string | null;
+};
+
+const STEERING_SETTLEMENT_EVENT_TYPES = new Set([
+  "turn.started",
+  "turn.completed",
+  "turn.failed",
+  "turn.cancelled",
+  "turn.superseded",
+]);
+
+function isSteeringSettlementEvent(event: SessionEvent): boolean {
+  return STEERING_SETTLEMENT_EVENT_TYPES.has(event.type);
+}
+
+function steeringAcceptedEvent(
+  steering: ComposerSteeringState,
+  events: readonly SessionEvent[],
+): SessionEvent | undefined {
+  return events.find(
+    (event) =>
+      event.type === "user.message" &&
+      steering.clientEventId !== null &&
+      event.clientEventId === steering.clientEventId,
+  );
+}
+
+function steeringSettledByEvents(
+  steering: ComposerSteeringState,
+  events: readonly SessionEvent[],
+): boolean {
+  const acceptedEventId =
+    steering.triggerEventId ?? steeringAcceptedEvent(steering, events)?.id ?? null;
+  return events.some((event) => {
+    if (steering.turnId && event.turnId === steering.turnId && isSteeringSettlementEvent(event)) {
+      return true;
+    }
+    if (event.type !== "turn.started" || !acceptedEventId) return false;
+    const payload = event.payload;
+    return (
+      typeof payload === "object" &&
+      payload !== null &&
+      "triggerEventId" in payload &&
+      payload.triggerEventId === acceptedEventId
+    );
+  });
+}
+
 /**
  * Draft + send + Pause/Resume state for the chat composer — the only
  * human-to-agent input surface. The draft survives a failed send (nothing is
@@ -271,6 +327,17 @@ export function useComposer(
   // a parent may switch sessionId without remounting this public hook.
   const [stateTargetKey, setStateTargetKey] = useState(targetKey);
   const [sending, setSending] = useState(false);
+  const [steering, setSteering] = useState<ComposerSteeringState | null>(() =>
+    initialPendingOperation?.delivery === "steer"
+      ? {
+          phase: "submitting",
+          text: initialPendingOperation.input.text,
+          clientEventId: initialPendingOperation.input.clientEventId ?? null,
+          triggerEventId: null,
+          turnId: null,
+        }
+      : null,
+  );
   const [pausing, setPausing] = useState(false);
   const [resuming, setResuming] = useState(false);
   const [error, setError] = useState<Error | null>(null);
@@ -282,6 +349,8 @@ export function useComposer(
     () => initialShadow?.resources ?? [],
   );
   const pendingOperationRef = useRef<PendingComposerOperation | null>(initialPendingOperation);
+  const steeringSettlementEventsRef = useRef<SessionEvent[]>([]);
+  const steeringRef = useRef(steering);
   const pendingClientEventId = useRef<string | null>(
     initialPendingOperation?.input.clientEventId ?? null,
   );
@@ -303,6 +372,9 @@ export function useComposer(
   useLayoutEffect(() => {
     onDraftAppliedRef.current = onDraftApplied;
   }, [onDraftApplied]);
+  useLayoutEffect(() => {
+    steeringRef.current = steering;
+  }, [steering]);
   // Read through a ref so a new extras closure (created every render by
   // callers passing inline functions) does not invalidate `send`.
   const sendExtrasRef = useRef(options.sendExtras);
@@ -320,6 +392,7 @@ export function useComposer(
     targetGeneration.current += 1;
     draftReadGeneration.current += 1;
     pendingOperationRef.current = restorePendingComposerOperation(pendingOperationKey);
+    steeringSettlementEventsRef.current = [];
     pendingClientEventId.current = pendingOperationRef.current?.input.clientEventId ?? null;
     const shadow = pendingOperationRef.current?.newerShadow;
     localEditRevision.current = shadow ? 1 : 0;
@@ -333,6 +406,17 @@ export function useComposer(
     setStateTargetKey(targetKey);
     setValue(shadow?.text ?? "");
     setSending(false);
+    setSteering(
+      pendingOperationRef.current?.delivery === "steer"
+        ? {
+            phase: "submitting",
+            text: pendingOperationRef.current.input.text,
+            clientEventId: pendingOperationRef.current.input.clientEventId ?? null,
+            triggerEventId: null,
+            turnId: null,
+          }
+        : null,
+    );
     setPausing(false);
     setResuming(false);
     setError(null);
@@ -454,13 +538,15 @@ export function useComposer(
             replaceLocal ||
             (!localWasDirtyAtStart && localAtStart === localEditRevision.current)
           ) {
-            // Model/effort ride in sendExtras (outside localEditRevision). If
+            // Model/effort/latency ride in sendExtras (outside
+            // localEditRevision). If
             // the picker changed during this fetch, skip onDraftApplied so a
-            // stale server model/effort cannot undo the operator's pick.
+            // stale server policy cannot undo the operator's pick.
             const extrasNow = resolveSendExtras(sendExtrasRef.current);
             const pickerChangedDuringFetch =
               extrasNow.model !== extrasAtStart.model ||
-              extrasNow.reasoningEffort !== extrasAtStart.reasoningEffort;
+              extrasNow.reasoningEffort !== extrasAtStart.reasoningEffort ||
+              extrasNow.latencyMode !== extrasAtStart.latencyMode;
             valueRef.current = fetched.text;
             restoredResourcesRef.current = fetched.resources;
             lastSavedSignature.current = draftSignature(draftPayload(fetched));
@@ -503,18 +589,76 @@ export function useComposer(
     if (!sessionId || !durableDrafts) return;
     return registerSessionReconciler(sessionId, "composer", async () => await loadDraft(false));
   }, [durableDrafts, loadDraft, registerSessionReconciler, sessionId]);
+  const reconcileSteering = useCallback(async (): Promise<void> => {
+    if (!sessionId || !steeringRef.current) return;
+    const ownedTargetKey = targetKey;
+    let events: SessionEvent[];
+    try {
+      events = await client.listEvents(workspaceId, sessionId, {
+        includeTypes: [
+          "user.message",
+          "turn.started",
+          "turn.completed",
+          "turn.failed",
+          "turn.cancelled",
+          "turn.superseded",
+        ],
+        limit: 250,
+        payloadMode: "full",
+      });
+    } catch {
+      // Best effort: the live stream still settles steering when its event arrives.
+      return;
+    }
+    if (targetKeyRef.current !== ownedTargetKey) return;
+    setSteering((current) => {
+      if (!current) return current;
+      if (steeringSettledByEvents(current, events)) {
+        steeringSettlementEventsRef.current = [];
+        return null;
+      }
+      const accepted = steeringAcceptedEvent(current, events);
+      if (!accepted || current.triggerEventId) return current;
+      return {
+        ...current,
+        phase: "accepted",
+        triggerEventId: accepted.id,
+      };
+    });
+  }, [client, sessionId, targetKey, workspaceId]);
   useSessionEventTrigger(
     client,
     workspaceId,
     sessionId,
-    isComposerDraftEvent,
-    () => void loadDraft(false),
+    (event) => isComposerDraftEvent(event) || isSteeringSettlementEvent(event),
+    (event) => {
+      if (isComposerDraftEvent(event)) void loadDraft(false);
+      if (!isSteeringSettlementEvent(event)) return;
+      steeringSettlementEventsRef.current = [
+        ...steeringSettlementEventsRef.current.slice(-15),
+        event,
+      ];
+      setSteering((current) => {
+        if (!current || !steeringSettledByEvents(current, [event])) return current;
+        steeringSettlementEventsRef.current = [];
+        return null;
+      });
+    },
     {
-      enabled: Boolean(sessionId) && durableDrafts,
+      enabled: Boolean(sessionId) && (durableDrafts || steering !== null),
       ...(options.events !== undefined ? { events: options.events } : {}),
     },
+    reconcileSteering,
   );
 
+  useEffect(() => {
+    if (!steering) return;
+    const observed = [...(options.events ?? []), ...steeringSettlementEventsRef.current];
+    if (!steeringSettledByEvents(steering, observed)) return;
+    steeringSettlementEventsRef.current = [];
+    setSteering(null);
+  }, [options.events, steering]);
+
   const currentDraftPayload = useCallback((): SaveComposerDraftRequest | null => {
     if (!durableDrafts || targetKeyRef.current !== targetKey) return null;
     const base = draftRef.current;
@@ -667,6 +811,8 @@ export function useComposer(
         forgetPendingComposerOperation(operationKey);
       };
 
+      let keepSteering = pending?.delivery === "steer";
+
       const settleAccepted = (operation: PendingComposerOperation): void => {
         clearPending();
         const draftWasUnchanged = valueRef.current === operation.draftAtSend;
@@ -699,30 +845,40 @@ export function useComposer(
         onSent?.(operation.input.text, operation.input);
       };
 
-      const deliver = async (operation: PendingComposerOperation): Promise<void> => {
+      const deliver = async (operation: PendingComposerOperation) => {
         if (operation.delivery === "steer") {
-          await client.steerMessage(workspaceId, sessionId, operation.input);
-        } else {
-          await client.sendMessage(workspaceId, sessionId, operation.input);
+          return await client.steerMessage(workspaceId, sessionId, operation.input);
         }
+        await client.sendMessage(workspaceId, sessionId, operation.input);
+        return null;
       };
 
+      if (delivery === "steer") {
+        setSteering({
+          phase: "submitting",
+          text: rawText,
+          clientEventId: pending?.input.clientEventId ?? pendingClientEventId.current,
+          triggerEventId: null,
+          turnId: null,
+        });
+      }
       setSending(true);
       setError(null);
       try {
         if (pending) {
-          let accepted = false;
+          let acceptedEvent: SessionEvent | null = null;
           try {
             const events = await client.listEvents(workspaceId, sessionId, {
               includeTypes: ["user.message"],
               limit: 100,
               payloadMode: "none",
             });
-            accepted = events.some(
-              (event) =>
-                event.type === "user.message" &&
-                event.clientEventId === pending.input.clientEventId,
-            );
+            acceptedEvent =
+              events.find(
+                (event) =>
+                  event.type === "user.message" &&
+                  event.clientEventId === pending.input.clientEventId,
+              ) ?? null;
           } catch (cause) {
             if (
               targetKeyRef.current === ownedTargetKey &&
@@ -738,7 +894,17 @@ export function useComposer(
           ) {
             return false;
           }
-          if (accepted) {
+          if (acceptedEvent) {
+            if (pending.delivery === "steer") {
+              keepSteering = true;
+              setSteering({
+                phase: "accepted",
+                text: pending.input.text,
+                clientEventId: pending.input.clientEventId ?? null,
+                triggerEventId: acceptedEvent.id,
+                turnId: null,
+              });
+            }
             settleAccepted(pending);
             return true;
           }
@@ -751,8 +917,19 @@ export function useComposer(
             return false;
           }
           try {
-            await deliver(pending);
+            const result = await deliver(pending);
+            if (pending.delivery === "steer" && result) {
+              keepSteering = true;
+              setSteering({
+                phase: "accepted",
+                text: pending.input.text,
+                clientEventId: pending.input.clientEventId ?? null,
+                triggerEventId: result.accepted.id,
+                turnId: result.turn.id,
+              });
+            }
           } catch (cause) {
+            if (pending.delivery === "steer") keepSteering = true;
             if (
               targetKeyRef.current === ownedTargetKey &&
               targetGeneration.current === ownedGeneration
@@ -812,11 +989,32 @@ export function useComposer(
         };
         pendingOperationRef.current = operation;
         rememberPendingComposerOperation(operationKey, operation);
+        if (delivery === "steer") {
+          setSteering({
+            phase: "submitting",
+            text: sendText,
+            clientEventId: input.clientEventId ?? null,
+            triggerEventId: null,
+            turnId: null,
+          });
+        }
         try {
-          await deliver(operation);
+          const result = await deliver(operation);
+          if (delivery === "steer" && result) {
+            keepSteering = true;
+            setSteering({
+              phase: "accepted",
+              text: sendText,
+              clientEventId: input.clientEventId ?? null,
+              triggerEventId: result.accepted.id,
+              turnId: result.turn.id,
+            });
+          }
         } catch (cause) {
           if (!isOutcomeUnknownError(cause)) {
             clearPending();
+          } else if (delivery === "steer") {
+            keepSteering = true;
           }
           if (
             targetKeyRef.current === ownedTargetKey &&
@@ -840,6 +1038,7 @@ export function useComposer(
           targetGeneration.current === ownedGeneration
         ) {
           setSending(false);
+          if (delivery === "steer" && !keepSteering) setSteering(null);
         }
       }
     },
@@ -1095,6 +1294,7 @@ export function useComposer(
     hasDraftContent,
     send,
     steer,
+    steering: identityMatches ? steering : null,
     sending: identityMatches ? sending : false,
     canSend:
       identityMatches &&
@@ -1245,7 +1445,7 @@ function mergeResources(base: ResourceRef[], additions: ResourceRef[]): Resource
     // different duplicate counts after server normalization.
     const key =
       resource.kind === "file"
-        ? `file:${resource.fileId}\u0000${resource.mountPath ?? `files/${resource.fileId}`}`
+        ? `file:${resource.fileId}\u0000${resource.mountPath ?? `${DEFAULT_FILE_RESOURCE_MOUNT_ROOT}/${resource.fileId}`}`
         : JSON.stringify(resource);
     if (seen.has(key)) return false;
     seen.add(key);

package/src/index.ts

@@ -256,6 +256,8 @@ export type {
   HumanInputFormMessages,
   HumanInputFormProps,
 } from "./components/human-input-form";
+export { HumanInputSurface } from "./components/human-input-surface";
+export type { HumanInputSurfaceProps } from "./components/human-input-surface";
 
 // Timeline projection
 export {
@@ -393,6 +395,19 @@ export { defaultChatComposerMessages } from "./components/composer";
 export type { ChatComposerMessages } from "./components/composer";
 export { ModelPicker } from "./components/model-picker";
 export type { ModelPickerProps } from "./components/model-picker";
+export {
+  BillingClassMark,
+  ModelPolicyPicker,
+  ModelPolicyPickerMenu,
+  PickerAnimatedPage,
+  PickerBackHeader,
+  PickerNavRow,
+  defaultModelPolicyPickerMessages,
+} from "./components/model-policy-picker";
+export type {
+  ModelPolicyPickerMessages,
+  ModelPolicyPickerProps,
+} from "./components/model-policy-picker";
 export {
   advancedSourceSummary,
   availabilityReasonLabel,
@@ -404,7 +419,9 @@ export {
   findPickerRow,
   groupPickerRowsByBillingClass,
   labelLatencyMode,
+  labelReasoningEffort,
   payerSummaryForModel,
+  projectClientModelRows,
   projectPickerRows,
   runnableLatencyModesForModel,
   sortPickerRows,
@@ -430,6 +447,8 @@ export { SandboxTerminal } from "./components/sandbox-terminal";
 export type { SandboxTerminalProps, XtermTheme } from "./components/sandbox-terminal";
 export { FileBrowser } from "./components/file-browser";
 export type { FileBrowserProps } from "./components/file-browser";
+export { WorkbenchChanges } from "./components/workbench-changes";
+export type { WorkbenchChangesProps } from "./components/workbench-changes";
 export { DiffView } from "./components/diff-view";
 export type { DiffViewProps, DiffTheme } from "./components/diff-view";
 export { PierreDiff } from "./components/pierre-diff";

package/src/model-policy.ts

@@ -2,7 +2,7 @@ import type { ClientModel, ReasoningEffort, WorkspaceModelCatalogModel } from "@
 
 export type PickerBillingClass = "opengeni_credits" | "codex_subscription" | "byok";
 
-export type PickerModelRow = {
+export type PickerModelRow<TCatalog extends ClientModel = WorkspaceModelCatalogModel> = {
   id: string;
   label: string;
   billingClass: PickerBillingClass;
@@ -11,7 +11,7 @@ export type PickerModelRow = {
   unavailableReason: string | null;
   provider: string;
   providerLabel: string;
-  catalog: WorkspaceModelCatalogModel;
+  catalog: TCatalog;
 };
 
 export type LatencyModeId = "standard" | "priority" | "fast";
@@ -78,7 +78,7 @@ export function effortOptionsForModel(model: ClientModel): ReasoningEffort[] {
   if (!efforts || efforts.length === 0) {
     return ["low"];
   }
-  const order: ReasoningEffort[] = ["none", "minimal", "low", "medium", "high", "xhigh"];
+  const order: ReasoningEffort[] = ["none", "minimal", "low", "medium", "high", "xhigh", "max"];
   return order.filter((effort) => efforts.includes(effort));
 }
 
@@ -117,6 +117,13 @@ export function labelLatencyMode(mode: LatencyModeId): string {
   return "Standard";
 }
 
+export function labelReasoningEffort(effort: ReasoningEffort): string {
+  if (effort === "xhigh") {
+    return "Extra high";
+  }
+  return effort.slice(0, 1).toUpperCase() + effort.slice(1);
+}
+
 export function payerSummaryForModel(model: ClientModel): string {
   const billing = model.billing;
   if (!billing) {
@@ -177,7 +184,27 @@ export function projectPickerRows(models: WorkspaceModelCatalogModel[]): PickerM
     });
 }
 
-export function sortPickerRows(rows: PickerModelRow[]): PickerModelRow[] {
+/** Project the lightweight client-config model list into the same picker contract. */
+export function projectClientModelRows(models: ClientModel[]): PickerModelRow<ClientModel>[] {
+  return models.map((catalog) => {
+    const billingClass = billingClassForModel(catalog);
+    return {
+      id: catalog.id,
+      label: catalog.label,
+      billingClass,
+      billingClassLabel: billingClassLabel(billingClass),
+      selectable: true,
+      unavailableReason: null,
+      provider: catalog.provider,
+      providerLabel: catalog.providerLabel,
+      catalog,
+    };
+  });
+}
+
+export function sortPickerRows<TCatalog extends ClientModel>(
+  rows: PickerModelRow<TCatalog>[],
+): PickerModelRow<TCatalog>[] {
   return [...rows].sort((left, right) => {
     const classDelta =
       BILLING_CLASS_ORDER.indexOf(left.billingClass) -
@@ -192,18 +219,35 @@ export function sortPickerRows(rows: PickerModelRow[]): PickerModelRow[] {
   });
 }
 
-export function findPickerRow(rows: PickerModelRow[], modelId: string): PickerModelRow | null {
+export function findPickerRow<TCatalog extends ClientModel>(
+  rows: PickerModelRow<TCatalog>[],
+  modelId: string,
+): PickerModelRow<TCatalog> | null {
   return rows.find((row) => row.id === modelId) ?? null;
 }
 
 export function groupPickerRowsByBillingClass(
   rows: PickerModelRow[],
-): Array<{ billingClass: PickerBillingClass; label: string; rows: PickerModelRow[] }> {
+): Array<{ billingClass: PickerBillingClass; label: string; rows: PickerModelRow[] }>;
+export function groupPickerRowsByBillingClass<TCatalog extends ClientModel>(
+  rows: PickerModelRow<TCatalog>[],
+): Array<{
+  billingClass: PickerBillingClass;
+  label: string;
+  rows: PickerModelRow<TCatalog>[];
+}>;
+export function groupPickerRowsByBillingClass<TCatalog extends ClientModel>(
+  rows: PickerModelRow<TCatalog>[],
+): Array<{
+  billingClass: PickerBillingClass;
+  label: string;
+  rows: PickerModelRow<TCatalog>[];
+}> {
   const sorted = sortPickerRows(rows);
   const groups: Array<{
     billingClass: PickerBillingClass;
     label: string;
-    rows: PickerModelRow[];
+    rows: PickerModelRow<TCatalog>[];
   }> = [];
   for (const row of sorted) {
     const existing = groups.find((group) => group.billingClass === row.billingClass);

package/src/realtime/dropdown-menu.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import { ChevronRightIcon } from "lucide-react";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import type { ComponentProps } from "react";
+import { cn } from "../lib/cn";
+
+function DropdownMenu(props: ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuTrigger(props: ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          className,
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSub(props: ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & { inset?: boolean }) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+};