@nocobase/portal-template-default 1.0.1 → 1.0.3

package/src/extensions/nocobase-ai/global-ai-chat.tsx

@@ -0,0 +1,213 @@
+import {
+  useEffect,
+  useMemo,
+  useState,
+  type CSSProperties,
+  type Dispatch,
+  type PropsWithChildren,
+  type SetStateAction,
+} from "react";
+import {
+  AIChatFloatingTrigger,
+  NocoBaseAIRootProvider,
+  useAIPageElementPicker,
+  type AIChatComposerAction,
+} from "./components";
+import { AIChatWindow } from "./components/chat/chat-window";
+import { ChatDialog } from "./components/surfaces/chat-dialog";
+import { ChatSidePanel } from "./components/surfaces/chat-side-panel";
+import { ChatSurfaceActions } from "./components/surfaces/chat-surface-actions";
+import {
+  AIChatProvider,
+  type AIToolInvokerMap,
+  useAI,
+  useAIChatBase,
+  useAIChatControllerState,
+  useGlobalAIChatController,
+} from "./providers";
+import { nocobaseAIService } from "./services";
+import { Globe2, MousePointer2 } from "lucide-react";
+
+const DEFAULT_SIDE_PANEL_WIDTH = 450;
+export function NocoBaseAIExtensionProvider({
+  children,
+  toolInvokers,
+}: PropsWithChildren<{ toolInvokers?: AIToolInvokerMap }>) {
+  return (
+    <NocoBaseAIRootProvider
+      service={nocobaseAIService}
+      toolInvokers={toolInvokers}
+    >
+      <NocoBaseAIGlobalEntry>{children}</NocoBaseAIGlobalEntry>
+    </NocoBaseAIRootProvider>
+  );
+}
+
+function NocoBaseAIGlobalEntry({ children }: PropsWithChildren) {
+  const ai = useAI();
+  const controller = useGlobalAIChatController();
+  const { open } = useAIChatControllerState(controller);
+  const [webSearch, setWebSearch] = useState(false);
+  const [expanded, setExpanded] = useState(false);
+  const ready =
+    ai.configurationStatus === "ready" &&
+    ai.employees.length > 0 &&
+    ai.hasEnabledModels;
+
+  return (
+    <div
+      data-open={ready && open && !expanded}
+      data-side="right"
+      className="chat-side-panel-layout @container min-h-svh min-w-0"
+      style={
+        {
+          "--chat-side-panel-width": `${DEFAULT_SIDE_PANEL_WIDTH}px`,
+        } as CSSProperties
+      }
+    >
+      <div className="min-w-0">{children}</div>
+      {ready ? (
+        <AIChatProvider
+          id="starter-global-ai"
+          controller={controller}
+          webSearch={webSearch}
+        >
+          <StarterGlobalAIChat
+            open={open}
+            onOpenChange={controller.setOpen}
+            webSearch={webSearch}
+            setWebSearch={setWebSearch}
+            expanded={expanded}
+            setExpanded={setExpanded}
+          />
+        </AIChatProvider>
+      ) : null}
+    </div>
+  );
+}
+
+function StarterGlobalAIChat({
+  open,
+  onOpenChange,
+  webSearch,
+  setWebSearch,
+  expanded,
+  setExpanded,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  webSearch: boolean;
+  setWebSearch: Dispatch<SetStateAction<boolean>>;
+  expanded: boolean;
+  setExpanded: Dispatch<SetStateAction<boolean>>;
+}) {
+  const {
+    id: chatId,
+    conversations,
+    currentModel,
+    addWorkContext,
+    focusComposer,
+  } = useAIChatBase();
+  const { registeredCount, startPicking } = useAIPageElementPicker();
+  const supportsWebSearch = currentModel.supportWebSearch === true;
+  const unreadCount = conversations.filter(
+    (conversation) => conversation.unread
+  ).length;
+
+  useEffect(() => {
+    if (!supportsWebSearch && webSearch) setWebSearch(false);
+  }, [setWebSearch, supportsWebSearch, webSearch]);
+
+  const composerActions = useMemo<AIChatComposerAction[]>(
+    () => [
+      {
+        key: "pick-page-element",
+        label: "Pick page element",
+        icon: <MousePointer2 />,
+        disabled: registeredCount === 0,
+        onClick: () => {
+          if (expanded) setExpanded(false);
+          startPicking({
+            chatId,
+            onSelect: (item) => {
+              addWorkContext(item);
+              focusComposer();
+            },
+          });
+        },
+      },
+      {
+        key: "web-search",
+        label: supportsWebSearch
+          ? webSearch
+            ? "Disable web search"
+            : "Enable web search"
+          : "Web search is not supported by this model",
+        icon: <Globe2 />,
+        active: webSearch,
+        disabled: !supportsWebSearch,
+        onClick: () => setWebSearch((active) => !active),
+      },
+    ],
+    [
+      addWorkContext,
+      chatId,
+      expanded,
+      focusComposer,
+      registeredCount,
+      setExpanded,
+      setWebSearch,
+      startPicking,
+      supportsWebSearch,
+      webSearch,
+    ]
+  );
+  const closeChat = () => {
+    setExpanded(false);
+    onOpenChange(false);
+  };
+
+  return (
+    <>
+      <ChatSidePanel
+        open={open && !expanded}
+        onOpenChange={onOpenChange}
+        width={DEFAULT_SIDE_PANEL_WIDTH}
+        showCloseHandle={false}
+      >
+        <AIChatWindow
+          headerActions={
+            <ChatSurfaceActions
+              expanded={false}
+              onExpandedChange={setExpanded}
+              onClose={closeChat}
+            />
+          }
+          composerActions={composerActions}
+          enableAttachments
+          attachmentActionIndex={1}
+        />
+      </ChatSidePanel>
+      <ChatDialog
+        open={open && expanded}
+        onOpenChange={(nextOpen) => {
+          if (!nextOpen) closeChat();
+        }}
+      >
+        <AIChatWindow
+          headerActions={
+            <ChatSurfaceActions
+              expanded
+              onExpandedChange={setExpanded}
+              onClose={closeChat}
+            />
+          }
+          composerActions={composerActions}
+          enableAttachments
+          attachmentActionIndex={1}
+        />
+      </ChatDialog>
+      <AIChatFloatingTrigger unreadCount={unreadCount} />
+    </>
+  );
+}

package/src/extensions/nocobase-ai/index.ts

@@ -0,0 +1,3 @@
+export * from "./components";
+export * from "./providers";
+export * from "./services";

package/src/extensions/nocobase-ai/providers/ai-provider.tsx

@@ -0,0 +1,323 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type PropsWithChildren,
+} from "react";
+import { nocobaseAIService, type AIService } from "../services";
+import { NocoBaseChatTransport } from "./chat-transport";
+import { useAIChatController, type AIChatController } from "./chat-controller";
+import {
+  AIFormRegistryProvider,
+  createFormFillerInvoker,
+  useAIFormRegistry,
+} from "./form-registry";
+import {
+  AIFrontendToolRegistryProvider,
+  createFrontendToolInvokers,
+  useAIFrontendToolRegistry,
+} from "./frontend-tool-registry";
+import type {
+  AIConfigurationStatus,
+  AIConversation,
+  AIEmployee,
+  AIModel,
+  AIToolCallInvocationContext,
+  AIToolInvokerMap,
+  AITransportFactory,
+} from "./types";
+
+const UNCONFIGURED_MODEL: AIModel = {
+  value: "__unconfigured__",
+  label: "No enabled model",
+  configured: false,
+};
+
+const RESERVED_TOOL_INVOKER_NAMES = [
+  "formFiller",
+  "loadFrontendTool",
+  "executeFrontendTool",
+] as const;
+
+type AIProviderValue = {
+  configurationStatus: AIConfigurationStatus;
+  configurationError?: Error;
+  modelConfigurationError?: Error;
+  hasEnabledModels: boolean;
+  employees: AIEmployee[];
+  models: AIModel[];
+  globalController: AIChatController;
+  createTransport: AITransportFactory;
+  uploadFile: AIService["uploadFile"];
+  updateEmployeeUserPrompt: (username: string, prompt: string) => Promise<void>;
+  listConversations: (keyword?: string) => Promise<AIConversation[]>;
+  getConversationMessages: AIService["getConversationMessages"];
+  getConversationActiveState: AIService["getConversationActiveState"];
+  updateConversationTitle: (sessionId: string, title: string) => Promise<void>;
+  destroyConversation: (sessionId: string) => Promise<void>;
+  updateToolCallDecision: AIService["updateToolCallDecision"];
+  invokeToolCall: (
+    toolName: string,
+    input: unknown,
+    context: AIToolCallInvocationContext
+  ) => Promise<{ handled: boolean; result?: unknown }>;
+  canAutoApproveToolCall: (
+    toolName: string,
+    input: unknown,
+    context: AIToolCallInvocationContext
+  ) => boolean;
+};
+
+const AIContext = createContext<AIProviderValue | null>(null);
+
+export type AIProviderProps = PropsWithChildren<{
+  employees?: AIEmployee[];
+  models?: AIModel[];
+  service?: AIService;
+  toolInvokers?: AIToolInvokerMap;
+  globalController?: AIChatController;
+}>;
+
+export function AIProvider(props: AIProviderProps) {
+  return (
+    <AIFormRegistryProvider>
+      <AIFrontendToolRegistryProvider>
+        <AIProviderRuntime {...props} />
+      </AIFrontendToolRegistryProvider>
+    </AIFormRegistryProvider>
+  );
+}
+
+function AIProviderRuntime({
+  children,
+  employees: providedEmployees,
+  models: providedModels,
+  service = nocobaseAIService,
+  toolInvokers,
+  globalController: providedGlobalController,
+}: AIProviderProps) {
+  const formRegistry = useAIFormRegistry();
+  const frontendToolRegistry = useAIFrontendToolRegistry();
+  const resolvedToolInvokers = useMemo<AIToolInvokerMap>(
+    () => {
+      const reservedToolCollision = RESERVED_TOOL_INVOKER_NAMES.find(
+        (name) => toolInvokers?.[name]
+      );
+      if (reservedToolCollision) {
+        throw new Error(
+          `Tool invoker "${reservedToolCollision}" is built into AIProvider and cannot be overridden`
+        );
+      }
+      return {
+        ...toolInvokers,
+        ...createFrontendToolInvokers(frontendToolRegistry),
+        formFiller: createFormFillerInvoker(formRegistry),
+      };
+    },
+    [formRegistry, frontendToolRegistry, toolInvokers]
+  );
+  const [liveConfiguration, setLiveConfiguration] = useState<{
+    employees: AIEmployee[];
+    models: AIModel[];
+    status: AIConfigurationStatus;
+    error?: Error;
+    modelError?: Error;
+  }>({ employees: [], models: [], status: "loading" });
+  const internalGlobalController = useAIChatController();
+  const globalController = providedGlobalController ?? internalGlobalController;
+
+  useEffect(() => {
+    if (providedEmployees && providedModels) {
+      setLiveConfiguration({
+        employees: providedEmployees,
+        models: providedModels.length ? providedModels : [UNCONFIGURED_MODEL],
+        status: "ready",
+        modelError: providedModels.length
+          ? undefined
+          : new Error("No enabled AI models were provided."),
+      });
+      return;
+    }
+
+    let active = true;
+    setLiveConfiguration((current) => ({
+      ...current,
+      status: "loading",
+      error: undefined,
+    }));
+
+    void Promise.allSettled([
+      providedEmployees ?? service.listEmployees(),
+      providedModels ?? service.listModels(),
+    ]).then(([employeesResult, modelsResult]) => {
+      if (!active) return;
+      if (employeesResult.status === "rejected") {
+        setLiveConfiguration({
+          employees: [],
+          models: [],
+          status: "error",
+          error:
+            employeesResult.reason instanceof Error
+              ? employeesResult.reason
+              : new Error("Unable to load NocoBase AI configuration."),
+        });
+        return;
+      }
+
+      const employees = employeesResult.value;
+      if (!employees.length) {
+        setLiveConfiguration({
+          employees: [],
+          models: [],
+          status: "error",
+          error: new Error(
+            "No AI employees are available for the current NocoBase user."
+          ),
+        });
+        return;
+      }
+
+      const models =
+        modelsResult.status === "fulfilled" ? modelsResult.value : [];
+      const modelError =
+        modelsResult.status === "rejected"
+          ? modelsResult.reason instanceof Error
+            ? modelsResult.reason
+            : new Error("Unable to load enabled AI models from NocoBase.")
+          : models.length
+          ? undefined
+          : new Error("No enabled AI models were returned by NocoBase.");
+      setLiveConfiguration({
+        employees,
+        models: models.length ? models : [UNCONFIGURED_MODEL],
+        status: "ready",
+        modelError,
+      });
+    });
+
+    return () => {
+      active = false;
+    };
+  }, [providedEmployees, providedModels, service]);
+
+  const employees = liveConfiguration.employees;
+  const models = liveConfiguration.models;
+  const configurationStatus = liveConfiguration.status;
+  const configurationError = liveConfiguration.error;
+  const modelConfigurationError = liveConfiguration.modelError;
+  const hasEnabledModels = models.some((model) => model.configured !== false);
+
+  const updateEmployeeUserPrompt = useCallback(
+    async (username: string, prompt: string) => {
+      await service.updateEmployeeUserPrompt(username, prompt);
+      setLiveConfiguration((current) => ({
+        ...current,
+        employees: current.employees.map((employee) =>
+          employee.username === username
+            ? {
+                ...employee,
+                userConfig: { ...employee.userConfig, prompt },
+              }
+            : employee
+        ),
+      }));
+    },
+    [service]
+  );
+
+  const invokeToolCall = useCallback(
+    async (
+      toolName: string,
+      input: unknown,
+      context: AIToolCallInvocationContext
+    ) => {
+      const invoke = resolvedToolInvokers[toolName];
+      if (!invoke) return { handled: false };
+      return { handled: true, result: await invoke(input, context) };
+    },
+    [resolvedToolInvokers]
+  );
+
+  const canAutoApproveToolCall = useCallback(
+    (
+      toolName: string,
+      input: unknown,
+      context: AIToolCallInvocationContext
+    ) => {
+      if (toolName === "formFiller") return false;
+      if (
+        toolName !== "loadFrontendTool" &&
+        toolName !== "executeFrontendTool"
+      ) {
+        return true;
+      }
+      const toolId =
+        input && typeof input === "object" && !Array.isArray(input)
+          ? (input as { toolId?: unknown }).toolId
+          : undefined;
+      if (
+        typeof toolId !== "string" ||
+        context.allowedFrontendToolIds?.includes(toolId) !== true
+      ) {
+        return false;
+      }
+      const manifest = frontendToolRegistry.getManifest(toolId);
+      if (!manifest) return false;
+      return toolName === "loadFrontendTool" || manifest.permission === "ALLOW";
+    },
+    [frontendToolRegistry]
+  );
+
+  const value = useMemo<AIProviderValue>(
+    () => ({
+      configurationStatus,
+      configurationError,
+      modelConfigurationError,
+      hasEnabledModels,
+      employees,
+      models,
+      globalController,
+      uploadFile: service.uploadFile.bind(service),
+      updateEmployeeUserPrompt,
+      listConversations: service.listConversations.bind(service),
+      getConversationMessages: service.getConversationMessages.bind(service),
+      getConversationActiveState:
+        service.getConversationActiveState.bind(service),
+      updateConversationTitle: service.updateConversationTitle.bind(service),
+      destroyConversation: service.destroyConversation.bind(service),
+      updateToolCallDecision: service.updateToolCallDecision.bind(service),
+      invokeToolCall,
+      canAutoApproveToolCall,
+      createTransport: (options) =>
+        new NocoBaseChatTransport({ service, ...options }),
+    }),
+    [
+      configurationError,
+      canAutoApproveToolCall,
+      configurationStatus,
+      employees,
+      globalController,
+      hasEnabledModels,
+      invokeToolCall,
+      modelConfigurationError,
+      models,
+      service,
+      updateEmployeeUserPrompt,
+    ]
+  );
+
+  return <AIContext.Provider value={value}>{children}</AIContext.Provider>;
+}
+
+export function useAI() {
+  const value = useContext(AIContext);
+  if (!value) throw new Error("useAI must be used inside AIProvider");
+  return value;
+}
+
+export function useGlobalAIChatController() {
+  return useAI().globalController;
+}