@agent-native/creative-context 0.3.0 → 0.5.0

package/src/client/CreativeContextChip.tsx

@@ -6,6 +6,9 @@ import {
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "@agent-native/toolkit/ui";
 import {
@@ -16,28 +19,58 @@ import {
 } from "@tabler/icons-react";
 
 import type { ContextPackSummary } from "../types.js";
-import { useCreativeContextPacks } from "./actions.js";
+import {
+  parseCreativeContexts,
+  useCreativeContexts,
+  useCreativeContextPacks,
+  type CreativeContextSummary,
+} from "./actions.js";
 import { useCreativeContextState } from "./application-state.js";
 import type { CreativeContextApplicationState } from "./application-state.js";
 
 export interface CreativeContextChipProps {
   state: CreativeContextApplicationState;
   packs?: ContextPackSummary[];
+  contexts?: CreativeContextSummary[];
   className?: string;
 }
 
+export type CreativeContextChipSelection =
+  | "off"
+  | "pinned-pack"
+  | "selected-context"
+  | "automatic";
+
+export function resolveCreativeContextChipSelection(
+  state: CreativeContextApplicationState,
+): CreativeContextChipSelection {
+  if (state.contextMode === "off") return "off";
+  if (state.pinnedPackId) return "pinned-pack";
+  if (state.selectedContextId) return "selected-context";
+  return "automatic";
+}
+
 export function CreativeContextChip({
   state,
   packs = [],
+  contexts = [],
   className,
 }: CreativeContextChipProps) {
   const t = useT();
   const packId = state.pinnedPackId ?? state.currentPackId;
   const pack = packs.find((candidate) => candidate.id === packId);
+  const context = contexts.find(
+    (candidate) => candidate.id === state.selectedContextId,
+  );
+  const selection = resolveCreativeContextChipSelection(state);
   const label =
-    state.contextMode === "off"
+    selection === "off"
       ? t("creativeContext.off")
-      : pack?.name || (packId ? packId : t("creativeContext.automatic"));
+      : selection === "pinned-pack"
+        ? pack?.name || packId
+        : selection === "selected-context"
+          ? context?.name || state.selectedContextId
+          : t("creativeContext.automatic");
 
   return (
     <Badge
@@ -65,12 +98,15 @@ export function CreativeContextComposerChip({
   const t = useT();
   const contextState = useCreativeContextState();
   const packsQuery = useCreativeContextPacks();
+  const contextsQuery = useCreativeContexts();
   const packs = packsQuery.data?.packs ?? [];
+  const contexts = parseCreativeContexts(contextsQuery.data);
 
   async function selectAutomatic() {
     await contextState.setState({
       ...contextState.state,
       contextMode: "auto",
+      selectedContextId: null,
       pinnedPackId: null,
     });
   }
@@ -78,6 +114,7 @@ export function CreativeContextComposerChip({
   async function selectOff() {
     await contextState.setState({
       contextMode: "off",
+      selectedContextId: null,
       currentPackId: null,
       pinnedPackId: null,
     });
@@ -87,10 +124,20 @@ export function CreativeContextComposerChip({
     await contextState.setState({
       ...contextState.state,
       contextMode: "auto",
+      selectedContextId: null,
       pinnedPackId: packId,
     });
   }
 
+  async function selectContext(contextId: string) {
+    await contextState.setState({
+      ...contextState.state,
+      contextMode: "auto",
+      selectedContextId: contextId,
+      pinnedPackId: null,
+    });
+  }
+
   return (
     <div className={className ?? "px-3 pb-1"}>
       <DropdownMenu>
@@ -102,6 +149,7 @@ export function CreativeContextComposerChip({
             <CreativeContextChip
               state={contextState.state}
               packs={packs}
+              contexts={contexts}
               className="max-w-full cursor-pointer bg-background/80"
             />
           </button>
@@ -112,7 +160,8 @@ export function CreativeContextComposerChip({
           </DropdownMenuLabel>
           <DropdownMenuItem onSelect={() => void selectAutomatic()}>
             {contextState.state.contextMode === "auto" &&
-            !contextState.state.pinnedPackId ? (
+            !contextState.state.pinnedPackId &&
+            !contextState.state.selectedContextId ? (
               <IconCheck />
             ) : (
               <IconBrain />
@@ -127,27 +176,47 @@ export function CreativeContextComposerChip({
             )}
             {t("creativeContext.off")}
           </DropdownMenuItem>
-          {packs.length ? (
+          {contexts.length ? (
             <>
               <DropdownMenuSeparator />
-              <DropdownMenuLabel>
-                {t("creativeContext.packsTitle")}
-              </DropdownMenuLabel>
-              {packs.slice(0, 8).map((pack) => (
+              <DropdownMenuLabel>Contexts</DropdownMenuLabel>
+              {contexts.slice(0, 8).map((context) => (
                 <DropdownMenuItem
-                  key={pack.id}
-                  onSelect={() => void selectPack(pack.id)}
+                  key={context.id}
+                  onSelect={() => void selectContext(context.id)}
                 >
-                  {contextState.state.pinnedPackId === pack.id ? (
+                  {contextState.state.selectedContextId === context.id ? (
                     <IconCheck />
                   ) : (
-                    <IconPin />
+                    <IconBrain />
                   )}
-                  <span className="truncate">{pack.name}</span>
+                  <span className="truncate">{context.name}</span>
                 </DropdownMenuItem>
               ))}
             </>
           ) : null}
+          {packs.length ? (
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger>
+                Advanced: pin an exact pack
+              </DropdownMenuSubTrigger>
+              <DropdownMenuSubContent className="w-64">
+                {packs.slice(0, 8).map((pack) => (
+                  <DropdownMenuItem
+                    key={pack.id}
+                    onSelect={() => void selectPack(pack.id)}
+                  >
+                    {contextState.state.pinnedPackId === pack.id ? (
+                      <IconCheck />
+                    ) : (
+                      <IconPin />
+                    )}
+                    <span className="truncate">{pack.name}</span>
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
+          ) : null}
           <DropdownMenuSeparator />
           <DropdownMenuItem asChild>
             <a href={href}>