@nocobase/portal-template-default 1.0.0 → 1.0.2

package/registry/nocobase-ai/demo/container-showcase.tsx

@@ -0,0 +1,210 @@
+import {
+  AIChatWindow,
+  ChatInline,
+  ChatPage,
+  type AIChatWindowProps,
+} from "../components";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  AppWindow,
+  Columns3,
+  Maximize2,
+  PanelRight,
+  Smartphone,
+} from "lucide-react";
+
+export type ChatContainer =
+  | "embedded"
+  | "page"
+  | "side-panel"
+  | "dialog"
+  | "mobile";
+
+const containerOptions: Array<{
+  value: ChatContainer;
+  title: string;
+  description: string;
+  action: string;
+  icon: typeof AppWindow;
+}> = [
+  {
+    value: "embedded",
+    title: "Embedded block",
+    description:
+      "Place chat inside a dashboard, record page, or workspace region.",
+    action: "Preview block",
+    icon: Columns3,
+  },
+  {
+    value: "page",
+    title: "Dedicated page",
+    description:
+      "Give the conversation a full route and the largest working area.",
+    action: "Preview page",
+    icon: AppWindow,
+  },
+  {
+    value: "side-panel",
+    title: "Push side panel",
+    description: "Keep the page operable while the content narrows for chat.",
+    action: "Open panel",
+    icon: PanelRight,
+  },
+  {
+    value: "dialog",
+    title: "Dialog",
+    description:
+      "Open a focused conversation from an action without changing route.",
+    action: "Open dialog",
+    icon: Maximize2,
+  },
+  {
+    value: "mobile",
+    title: "Mobile container",
+    description: "Use the same component in a narrow, touch-friendly viewport.",
+    action: "Preview mobile",
+    icon: Smartphone,
+  },
+];
+
+export function ContainerShowcase({
+  value,
+  onValueChange,
+  windowProps,
+}: {
+  value: ChatContainer;
+  onValueChange: (value: ChatContainer) => void;
+  windowProps: AIChatWindowProps;
+}) {
+  return (
+    <div className="space-y-5">
+      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-5">
+        {containerOptions.map((option) => {
+          const Icon = option.icon;
+          const active = option.value === value;
+          return (
+            <Card
+              key={option.value}
+              data-active={active}
+              className="gap-0 py-0 transition-colors data-active:border-foreground/35 data-active:bg-muted/20"
+            >
+              <CardHeader className="p-4">
+                <div className="mb-3 flex size-9 items-center justify-center rounded-lg border bg-background">
+                  <Icon className="size-4 text-muted-foreground" />
+                </div>
+                <CardTitle className="text-sm">{option.title}</CardTitle>
+                <p className="min-h-15 text-xs leading-5 text-muted-foreground">
+                  {option.description}
+                </p>
+              </CardHeader>
+              <CardContent className="border-t p-3">
+                <Button
+                  variant={active ? "secondary" : "ghost"}
+                  size="sm"
+                  className="w-full"
+                  onClick={() => onValueChange(option.value)}
+                >
+                  {option.action}
+                </Button>
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+
+      <Card className="gap-0 py-0">
+        <div className="flex min-h-12 items-center justify-between border-b px-4">
+          <div>
+            <div className="text-sm font-medium">Container preview</div>
+            <div className="text-xs text-muted-foreground">
+              {containerOptions.find((option) => option.value === value)?.title}
+            </div>
+          </div>
+          <code className="rounded-md bg-muted px-2 py-1 text-xs text-muted-foreground">
+            {containerComponent(value)}
+          </code>
+        </div>
+        <div className="flex min-h-[650px] justify-center bg-muted/15 p-3 sm:p-5">
+          {value === "embedded" ? (
+            <ChatInline className="h-[610px] w-full max-w-3xl shadow-sm">
+              <AIChatWindow {...windowProps} />
+            </ChatInline>
+          ) : null}
+          {value === "page" ? (
+            <ChatPage className="h-[610px] min-h-0 w-full">
+              <AIChatWindow {...windowProps} />
+            </ChatPage>
+          ) : null}
+          {value === "mobile" ? (
+            <div className="w-full max-w-[390px] rounded-[2rem] border-4 border-foreground/10 bg-background p-1 shadow-xl">
+              <ChatInline className="h-[610px] rounded-[1.55rem] border-0">
+                <AIChatWindow {...windowProps} />
+              </ChatInline>
+            </div>
+          ) : null}
+          {value === "side-panel" || value === "dialog" ? (
+            <ContainerLaunchPlaceholder
+              mode={value}
+              onOpen={() => onValueChange(value)}
+            />
+          ) : null}
+        </div>
+      </Card>
+    </div>
+  );
+}
+
+function ContainerLaunchPlaceholder({
+  mode,
+  onOpen,
+}: {
+  mode: "side-panel" | "dialog";
+  onOpen: () => void;
+}) {
+  return (
+    <div className="grid w-full max-w-4xl grid-cols-[200px_minmax(0,1fr)] overflow-hidden rounded-xl border bg-background shadow-sm">
+      <div className="border-r bg-muted/30 p-4">
+        <div className="h-5 w-24 rounded bg-muted" />
+        <div className="mt-6 space-y-3">
+          <div className="h-8 rounded bg-muted" />
+          <div className="h-8 rounded bg-muted/70" />
+          <div className="h-8 rounded bg-muted/70" />
+        </div>
+      </div>
+      <div className="flex items-center justify-center p-8">
+        <div className="max-w-sm text-center">
+          <div className="mx-auto mb-4 h-24 rounded-xl border bg-muted/20" />
+          <h3 className="text-sm font-medium">
+            {mode === "side-panel"
+              ? "Chat opens beside the current page"
+              : "Chat opens above the current page"}
+          </h3>
+          <p className="mt-2 text-xs leading-5 text-muted-foreground">
+            {mode === "side-panel"
+              ? "The live preview pushes this page narrower instead of blocking interaction."
+              : "The live preview uses a focused dialog while preserving the page underneath."}
+          </p>
+          <Button className="mt-4" size="sm" onClick={onOpen}>
+            {mode === "side-panel" ? "Open side panel" : "Open dialog"}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const containerComponent = (value: ChatContainer) => {
+  switch (value) {
+    case "page":
+      return "<ChatPage />";
+    case "side-panel":
+      return "<ChatSidePanelLayout />";
+    case "dialog":
+      return "<ChatDialog />";
+    case "mobile":
+      return "<ChatInline /> · 390px";
+    default:
+      return "<ChatInline />";
+  }
+};

package/registry/nocobase-ai/demo/floating.tsx

@@ -0,0 +1,134 @@
+import {
+  AIChatFloatingTrigger,
+  AIChatWindow,
+  ChatSidePanelLayout,
+} from "../components";
+import { Badge } from "@/components/ui/badge";
+import { Card } from "@/components/ui/card";
+import {
+  AIChatProvider,
+  useAIChatController,
+  useAIChatControllerState,
+} from "../providers";
+import { PromptCard } from "./prompt-card";
+import { AIConfigurationGate } from "./configuration-gate";
+
+const floatingPrompt = `Add the standard NocoBase AI floating chat entry to the application layout.
+
+Requirements:
+- Render AIChatFloatingTrigger at the lower-right edge of the application.
+- Bind it to the global AI chat controller.
+- Clicking the trigger opens a 450px ChatSidePanelLayout on the right.
+- The side panel must push the desktop page narrower instead of blocking page interaction.
+- Mobile may switch to an overlay presentation.
+- Hide the floating trigger while the side panel is open.
+- Support an unread-count badge.
+- Start a new conversation with the configured default AI employee when opened.
+- Keep the trigger and side-panel surface separate from AIChatWindow.
+- Use shadcn/Base UI components and the existing AIProvider/AIChatProvider runtime.`;
+
+export function FloatingChatPage() {
+  return (
+    <AIConfigurationGate>
+      <FloatingChatPageContent />
+    </AIConfigurationGate>
+  );
+}
+
+function FloatingChatPageContent() {
+  const controller = useAIChatController();
+  const { open } = useAIChatControllerState(controller);
+
+  return (
+    <AIChatProvider id="floating-chat-demo" controller={controller}>
+      <ChatSidePanelLayout
+        open={open}
+        onOpenChange={controller.setOpen}
+        width={450}
+        panel={<AIChatWindow />}
+      >
+        <div className="space-y-12 pb-12">
+          <section className="flex flex-wrap items-start justify-between gap-5 border-b pb-8">
+            <div>
+              <div className="flex items-center gap-2">
+                <Badge variant="secondary">AI Components</Badge>
+                <Badge variant="outline">Global entry</Badge>
+              </div>
+              <h1 className="mt-4 text-3xl font-semibold tracking-[-0.035em]">
+                Floating AI Chat
+              </h1>
+              <p className="mt-3 max-w-3xl text-sm leading-6 text-muted-foreground">
+                A global lower-right entry for the shared AI conversation. It is
+                intentionally coupled to the push side-panel surface rather than
+                treated as a generic chat container.
+              </p>
+            </div>
+          </section>
+
+          <section className="space-y-5">
+            <div>
+              <p className="text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground">
+                Interactive preview
+              </p>
+              <h2 className="mt-2 text-xl font-semibold tracking-tight">
+                Global launcher and push side panel
+              </h2>
+              <p className="mt-1.5 max-w-3xl text-sm leading-6 text-muted-foreground">
+                The trigger is constrained to this simulated application in the
+                demo. In production its default positioning is fixed to the
+                viewport.
+              </p>
+            </div>
+            <Card className="gap-0 overflow-hidden py-0">
+              <div className="flex h-12 items-center justify-between border-b px-4">
+                <span className="text-sm font-medium">Application shell</span>
+                <code className="rounded-md bg-muted px-2 py-1 text-xs text-muted-foreground">
+                  AIChatFloatingTrigger → ChatSidePanelLayout
+                </code>
+              </div>
+              <div className="relative grid min-h-[560px] grid-cols-[190px_minmax(0,1fr)] overflow-hidden bg-background">
+                <div className="border-r bg-muted/25 p-4">
+                  <div className="h-7 w-28 rounded bg-muted" />
+                  <div className="mt-8 space-y-3">
+                    <div className="h-9 rounded-lg bg-muted" />
+                    <div className="h-9 rounded-lg bg-muted/65" />
+                    <div className="h-9 rounded-lg bg-muted/65" />
+                  </div>
+                </div>
+                <div className="p-6">
+                  <div className="grid gap-4 sm:grid-cols-3">
+                    <div className="h-28 rounded-xl border bg-muted/15" />
+                    <div className="h-28 rounded-xl border bg-muted/15" />
+                    <div className="h-28 rounded-xl border bg-muted/15" />
+                  </div>
+                  <div className="mt-5 h-72 rounded-xl border bg-muted/10" />
+                </div>
+                <AIChatFloatingTrigger
+                  controller={controller}
+                  unreadCount={3}
+                  position="absolute"
+                />
+              </div>
+            </Card>
+          </section>
+
+          <section className="space-y-5">
+            <div>
+              <p className="text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground">
+                Floating chat prompt
+              </p>
+              <h2 className="mt-2 text-xl font-semibold tracking-tight">
+                Generate the global launcher separately
+              </h2>
+            </div>
+            <PromptCard
+              title="Add a lower-right AI floating entry"
+              description="This prompt only configures the global trigger and its side panel."
+              prompt={floatingPrompt}
+            />
+          </section>
+        </div>
+      </ChatSidePanelLayout>
+    </AIChatProvider>
+  );
+}

package/registry/nocobase-ai/demo/index.tsx

@@ -0,0 +1,346 @@
+import {
+  AIChatWindow,
+  ChatDialog,
+  ChatSurfaceActions,
+  ChatSidePanelLayout,
+  useAIPageElementPicker,
+  type AIChatComposerAction,
+  type AIChatWindowProps,
+} from "../components";
+import { Badge } from "@/components/ui/badge";
+import { Card } from "@/components/ui/card";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { AIChatProvider, useAIChatBase } from "../providers";
+import { Globe2, MousePointer2 } from "lucide-react";
+import { useMemo, useState } from "react";
+import { ContainerShowcase, type ChatContainer } from "./container-showcase";
+import { InteractionShowcase } from "./interaction-showcase";
+import { AIConfigurationGate } from "./configuration-gate";
+import { PromptGenerator } from "./prompt-generator";
+
+const propRows = [
+  [
+    "className",
+    "string",
+    "undefined",
+    "Adds layout or sizing classes to the root conversation window.",
+  ],
+  [
+    "headerActions",
+    "ReactNode",
+    "undefined",
+    "Adds surface actions such as expand, collapse, or close to the header.",
+  ],
+  [
+    "composerActions",
+    "AIChatComposerAction[]",
+    "[]",
+    "Application-specific buttons rendered in the composer toolbar.",
+  ],
+  [
+    "showConversationToggle",
+    "boolean",
+    "true",
+    "Shows the conversation-list control.",
+  ],
+  [
+    "showNewConversation",
+    "boolean",
+    "true",
+    "Shows the new-conversation action.",
+  ],
+  [
+    "showEmployeeSelector",
+    "boolean",
+    "true",
+    "Shows the AI employee selector in the composer.",
+  ],
+  [
+    "showModelSelector",
+    "boolean",
+    "true",
+    "Shows the model selector in the composer.",
+  ],
+  [
+    "showUserPrompt",
+    "boolean",
+    "true",
+    "Shows the personalized AI employee prompt editor.",
+  ],
+  [
+    "enableAttachments",
+    "boolean",
+    "false",
+    "Enables file picker, drag-and-drop, and pasted-image uploads.",
+  ],
+  [
+    "attachmentActionIndex",
+    "number",
+    "0",
+    "Places the attachment action at a specific position in the composer toolbar.",
+  ],
+  [
+    "onToolCallDecision",
+    "(decision: AIToolCallDecision) => void | Promise<void>",
+    "undefined",
+    "Observes approve, reject, or edit decisions after AIChatProvider has processed them; use it for application side effects or telemetry.",
+  ],
+  [
+    "placeholder",
+    "string",
+    "Message your AI employee…",
+    "Composer placeholder text.",
+  ],
+  [
+    "disclaimer",
+    "ReactNode | false",
+    "Default disclaimer",
+    "Customizes or hides the footer disclaimer.",
+  ],
+];
+
+export function AIChatPage() {
+  return (
+    <AIConfigurationGate>
+      <AIChatProvider id="ai-chat-demo">
+        <AIChatPageContent />
+      </AIChatProvider>
+    </AIConfigurationGate>
+  );
+}
+
+function AIChatPageContent() {
+  const [container, setContainer] = useState<ChatContainer>("embedded");
+  const [sidePanelOpen, setSidePanelOpen] = useState(false);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [webSearch, setWebSearch] = useState(false);
+  const { id: chatId, addWorkContext, focusComposer } = useAIChatBase();
+  const { registeredCount, startPicking } = useAIPageElementPicker();
+
+  const composerActions = useMemo<AIChatComposerAction[]>(
+    () => [
+      {
+        key: "pick-page-element",
+        label: "Pick page element",
+        icon: <MousePointer2 />,
+        disabled: registeredCount === 0,
+        onClick: () => {
+          if (dialogOpen) {
+            setDialogOpen(false);
+            setSidePanelOpen(true);
+            setContainer("side-panel");
+          }
+          startPicking({
+            chatId,
+            onSelect: (item) => {
+              addWorkContext(item);
+              focusComposer();
+            },
+          });
+        },
+      },
+      {
+        key: "web-search",
+        label: "Web search",
+        icon: <Globe2 />,
+        active: webSearch,
+        onClick: () => {
+          setWebSearch((active) => !active);
+        },
+      },
+    ],
+    [
+      addWorkContext,
+      chatId,
+      dialogOpen,
+      focusComposer,
+      registeredCount,
+      startPicking,
+      webSearch,
+    ]
+  );
+
+  const windowProps = useMemo<AIChatWindowProps>(
+    () => ({
+      composerActions,
+      enableAttachments: true,
+      attachmentActionIndex: 1,
+      onToolCallDecision: async () => undefined,
+    }),
+    [composerActions]
+  );
+
+  const closeSurface = () => {
+    setSidePanelOpen(false);
+    setDialogOpen(false);
+  };
+
+  const sidePanelWindowProps: AIChatWindowProps = {
+    ...windowProps,
+    headerActions: (
+      <ChatSurfaceActions
+        expanded={false}
+        onExpandedChange={(expanded) => {
+          if (!expanded) return;
+          setSidePanelOpen(false);
+          setDialogOpen(true);
+        }}
+        onClose={closeSurface}
+      />
+    ),
+  };
+
+  const dialogWindowProps: AIChatWindowProps = {
+    ...windowProps,
+    headerActions: (
+      <ChatSurfaceActions
+        expanded={true}
+        onExpandedChange={(nextExpanded) => {
+          if (nextExpanded) return;
+          setDialogOpen(false);
+          setSidePanelOpen(true);
+          setContainer("side-panel");
+        }}
+        onClose={closeSurface}
+      />
+    ),
+  };
+
+  const selectContainer = (nextContainer: ChatContainer) => {
+    setContainer(nextContainer);
+    setSidePanelOpen(nextContainer === "side-panel");
+    setDialogOpen(nextContainer === "dialog");
+  };
+
+  return (
+    <ChatSidePanelLayout
+      open={sidePanelOpen}
+      onOpenChange={setSidePanelOpen}
+      width={450}
+      panel={<AIChatWindow {...sidePanelWindowProps} />}
+      showCloseHandle={false}
+    >
+      <div className="space-y-14 pb-12">
+        <section className="flex flex-wrap items-start justify-between gap-5 border-b pb-8">
+          <div>
+            <div className="flex items-center gap-2">
+              <Badge variant="secondary">AI Components</Badge>
+              <Badge variant="outline">Preview</Badge>
+            </div>
+            <h1 className="mt-4 text-3xl font-semibold tracking-[-0.035em]">
+              AI Chat Window
+            </h1>
+            <p className="mt-3 max-w-3xl text-sm leading-6 text-muted-foreground">
+              A position-independent NocoBase AI employee conversation
+              component. Explore message interactions independently, place the
+              same chat in different containers, then generate an implementation
+              prompt for a target page.
+            </p>
+          </div>
+        </section>
+
+        <section className="space-y-5">
+          <SectionTitle
+            eyebrow="Container patterns"
+            title="Use the same conversation window wherever the product needs it"
+            description="The provider owns conversation state. Page, embedded block, push side panel, dialog, and mobile containers only decide placement and dimensions."
+          />
+          <ContainerShowcase
+            value={container}
+            onValueChange={selectContainer}
+            windowProps={windowProps}
+          />
+        </section>
+
+        <section className="space-y-5">
+          <SectionTitle
+            eyebrow="Message presentation"
+            title="Choose how much conversation history the page should expose"
+            description="Use the complete transcript for conversational work, or a compact worker surface that opens message history only when the user asks for it."
+          />
+          <InteractionShowcase />
+        </section>
+
+        <section className="space-y-5">
+          <SectionTitle
+            eyebrow="Prompt generator"
+            title="Describe where chat belongs, then copy an implementation prompt"
+            description="This replaces a generic prop configuration panel with a task-oriented generator: choose the target area, placement mode, and required capabilities."
+          />
+          <PromptGenerator />
+        </section>
+
+        <section className="space-y-5">
+          <SectionTitle
+            eyebrow="Component API"
+            title="AIChatWindow props"
+            description="The core window stays reusable while business pages provide placement, composer actions, and tool-approval behavior."
+          />
+          <Card className="gap-0 overflow-hidden py-0">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Prop</TableHead>
+                  <TableHead>Type</TableHead>
+                  <TableHead>Default</TableHead>
+                  <TableHead>Description</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {propRows.map(([name, type, defaultValue, description]) => (
+                  <TableRow key={name}>
+                    <TableCell className="font-mono text-xs font-medium">
+                      {name}
+                    </TableCell>
+                    <TableCell className="font-mono text-xs text-muted-foreground">
+                      {type}
+                    </TableCell>
+                    <TableCell className="font-mono text-xs text-muted-foreground">
+                      {defaultValue}
+                    </TableCell>
+                    <TableCell className="min-w-80 whitespace-normal text-muted-foreground">
+                      {description}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </Card>
+        </section>
+
+        <ChatDialog open={dialogOpen} onOpenChange={setDialogOpen}>
+          <AIChatWindow {...dialogWindowProps} />
+        </ChatDialog>
+      </div>
+    </ChatSidePanelLayout>
+  );
+}
+
+function SectionTitle({
+  eyebrow,
+  title,
+  description,
+}: {
+  eyebrow: string;
+  title: string;
+  description: string;
+}) {
+  return (
+    <div>
+      <p className="text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground">
+        {eyebrow}
+      </p>
+      <h2 className="mt-2 text-xl font-semibold tracking-tight">{title}</h2>
+      <p className="mt-1.5 max-w-3xl text-sm leading-6 text-muted-foreground">
+        {description}
+      </p>
+    </div>
+  );
+}