@nocobase/portal-template-default 1.0.3 → 1.0.5

package/src/extensions/nocobase-ai/demo/container-showcase.tsx

@@ -1,210 +0,0 @@
-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/src/extensions/nocobase-ai/demo/floating.tsx

@@ -1,134 +0,0 @@
-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/src/extensions/nocobase-ai/demo/index.tsx

@@ -1,346 +0,0 @@
-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>
-  );
-}