@nocobase/portal-template-default 1.0.2 → 1.0.3

package/src/extensions/nocobase-ai/components/chat/chat-compact.tsx

@@ -0,0 +1,90 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { History, LoaderCircle } from "lucide-react";
+import { useState, type ReactNode } from "react";
+import {
+  useAIChatBase,
+  useAIChatStatus,
+  type AIToolCallDecision,
+} from "../../providers";
+import { ChatComposer, type AIChatComposerAction } from "./chat-composer";
+import { AIChatHistoryDialog } from "./chat-history-dialog";
+import { ChatHeader } from "./chat-header";
+
+export type AIChatCompactProps = {
+  className?: string;
+  headerActions?: ReactNode;
+  composerActions?: AIChatComposerAction[];
+  showEmployeeSelector?: boolean;
+  showModelSelector?: boolean;
+  showUserPrompt?: boolean;
+  enableAttachments?: boolean;
+  placeholder?: string;
+  disclaimer?: ReactNode | false;
+  onToolCallDecision?: (decision: AIToolCallDecision) => void | Promise<void>;
+};
+
+export function AIChatCompact({
+  className,
+  headerActions,
+  composerActions,
+  showEmployeeSelector = true,
+  showModelSelector = true,
+  showUserPrompt = true,
+  enableAttachments = false,
+  placeholder,
+  disclaimer,
+  onToolCallDecision,
+}: AIChatCompactProps) {
+  const { currentEmployee } = useAIChatBase();
+  const { status } = useAIChatStatus();
+  const [historyOpen, setHistoryOpen] = useState(false);
+  const busy = status === "submitted" || status === "streaming";
+
+  return (
+    <section
+      className={cn(
+        "flex min-h-0 w-full flex-col overflow-hidden rounded-xl border bg-card",
+        className
+      )}
+    >
+      <ChatHeader
+        showConversationToggle={false}
+        showUserPrompt={showUserPrompt}
+        actions={
+          <>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              aria-label="Open message history"
+              onClick={() => setHistoryOpen(true)}
+            >
+              <History />
+            </Button>
+            {headerActions}
+          </>
+        }
+      />
+      {busy ? (
+        <div className="flex items-center gap-2 border-b bg-muted/25 px-4 py-2 text-xs text-muted-foreground">
+          <LoaderCircle className="size-3.5 animate-spin" />
+          {currentEmployee.nickname} is working…
+        </div>
+      ) : null}
+      <ChatComposer
+        actions={composerActions}
+        showEmployeeSelector={showEmployeeSelector}
+        showModelSelector={showModelSelector}
+        enableAttachments={enableAttachments}
+        placeholder={placeholder}
+        disclaimer={disclaimer}
+      />
+      <AIChatHistoryDialog
+        open={historyOpen}
+        onOpenChange={setHistoryOpen}
+        trigger={null}
+        onToolCallDecision={onToolCallDecision}
+      />
+    </section>
+  );
+}

package/src/extensions/nocobase-ai/components/chat/chat-composer.tsx

@@ -0,0 +1,429 @@
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupTextarea,
+} from "@/components/ui/input-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card";
+import {
+  getAIModelKey,
+  useAIChatBase,
+  useAIChatStatus,
+  type AIEmployee,
+} from "../../providers";
+import { cn } from "@/lib/utils";
+import { ArrowUp, Paperclip, Pencil, Square, X } from "lucide-react";
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { AIEmployeeAvatar } from "./ai-employee-avatar";
+import { WorkContextChip } from "./work-context-chip";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { AIModelSelectOptions } from "./model-select-options";
+import { ChatAttachment } from "./chat-attachment";
+
+export type AIChatComposerAction = {
+  key: string;
+  label: string;
+  icon?: ReactNode;
+  active?: boolean;
+  disabled?: boolean;
+  showLabel?: boolean;
+  onClick?: () => void;
+};
+
+export function ChatComposer({
+  actions = [],
+  showEmployeeSelector = true,
+  showModelSelector = true,
+  enableAttachments = false,
+  attachmentActionIndex = 0,
+  placeholder = "Message your AI employee…",
+  disclaimer = "AI can make mistakes. Review important changes before publishing.",
+}: {
+  actions?: AIChatComposerAction[];
+  showEmployeeSelector?: boolean;
+  showModelSelector?: boolean;
+  enableAttachments?: boolean;
+  attachmentActionIndex?: number;
+  placeholder?: string;
+  disclaimer?: ReactNode | false;
+}) {
+  const {
+    draft,
+    setDraft,
+    send,
+    stop,
+    models,
+    employees,
+    currentEmployee,
+    currentModel,
+    selectModel,
+    selectEmployee,
+    composerFocusRequest,
+    attachments,
+    uploadingAttachments,
+    uploadFiles,
+    removeAttachment,
+    workContext,
+    removeWorkContext,
+    editingMessageId,
+    cancelEditingMessage,
+  } = useAIChatBase();
+  const { status } = useAIChatStatus();
+  const busy = status === "submitted" || status === "streaming";
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [employeeSelectOpen, setEmployeeSelectOpen] = useState(false);
+  const [previewedEmployee, setPreviewedEmployee] = useState<string>();
+  const visibleEmployees = employees.filter(
+    (employee) =>
+      (employee.category === undefined || employee.category === "business") &&
+      employee.deprecated !== true
+  );
+  const normalizedAttachmentActionIndex = Math.max(
+    0,
+    Math.min(attachmentActionIndex, actions.length)
+  );
+  const renderAction = (action: AIChatComposerAction) => (
+    <Tooltip key={action.key}>
+      <TooltipTrigger
+        render={
+          <InputGroupButton
+            size={action.showLabel ? "xs" : "icon-sm"}
+            variant={action.active ? "secondary" : "ghost"}
+            className={cn(
+              "h-7 shrink-0",
+              action.showLabel ? "px-2" : "w-7 p-0"
+            )}
+            disabled={action.disabled}
+            aria-label={action.label}
+            aria-pressed={action.active}
+            onClick={action.onClick}
+          />
+        }
+      >
+        {action.icon}
+        {action.showLabel ? action.label : null}
+      </TooltipTrigger>
+      <TooltipContent>{action.label}</TooltipContent>
+    </Tooltip>
+  );
+
+  useEffect(() => {
+    if (composerFocusRequest === 0) return;
+    const frame = requestAnimationFrame(() => {
+      const textarea = textareaRef.current;
+      if (!textarea) return;
+      textarea.focus();
+      const end = textarea.value.length;
+      textarea.setSelectionRange(end, end);
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [composerFocusRequest]);
+
+  return (
+    <footer className="shrink-0 bg-card">
+      <div className="mx-4 mt-2">
+        <InputGroup className="rounded-xl bg-background shadow-[0_6px_24px_rgba(0,0,0,0.06)] has-disabled:bg-background has-disabled:opacity-100 focus-within:shadow-[0_8px_28px_rgba(0,0,0,0.08)] dark:has-disabled:bg-background">
+          {editingMessageId ? (
+            <InputGroupAddon
+              align="block-start"
+              className="justify-between border-b px-3 py-2 text-xs"
+            >
+              <span className="flex items-center gap-2 text-foreground">
+                <Pencil className="size-3.5" /> Editing message
+              </span>
+              <InputGroupButton
+                size="icon-xs"
+                aria-label="Cancel editing"
+                onClick={cancelEditingMessage}
+              >
+                <X />
+              </InputGroupButton>
+            </InputGroupAddon>
+          ) : null}
+          {workContext.length ? (
+            <InputGroupAddon
+              align="block-start"
+              className="flex-wrap justify-start gap-1.5 px-3 pt-2"
+            >
+              {workContext.map((item, index) => (
+                <WorkContextChip
+                  key={`${item.type}:${item.id ?? item.title ?? index}`}
+                  item={item}
+                  onRemove={() => removeWorkContext(item)}
+                />
+              ))}
+            </InputGroupAddon>
+          ) : null}
+          {enableAttachments && attachments.length ? (
+            <InputGroupAddon
+              align="block-start"
+              className="flex-wrap justify-start gap-1.5 px-3 pt-2"
+            >
+              {attachments.map((attachment) => (
+                <ChatAttachment
+                  key={attachment.uid}
+                  attachment={attachment}
+                  removable
+                  onRemove={() => removeAttachment(attachment.uid)}
+                />
+              ))}
+            </InputGroupAddon>
+          ) : null}
+          <InputGroupTextarea
+            ref={textareaRef}
+            value={draft}
+            rows={2}
+            placeholder={placeholder}
+            className="max-h-44 min-h-16 px-3 pt-3 text-sm"
+            onChange={(event) => setDraft(event.target.value)}
+            onPaste={(event) => {
+              if (!enableAttachments) return;
+              const files = Array.from(event.clipboardData.items)
+                .filter((item) => item.kind === "file")
+                .map((item) => item.getAsFile())
+                .filter((file): file is File => file !== null);
+              if (!files.length) return;
+              event.preventDefault();
+              void uploadFiles(files);
+            }}
+            onKeyDown={(event) => {
+              if (event.nativeEvent.isComposing) return;
+              if (event.key === "Enter" && !event.shiftKey) {
+                event.preventDefault();
+                void send();
+              }
+            }}
+          />
+          <InputGroupAddon
+            align="block-end"
+            className="justify-between px-2.5 pb-2"
+          >
+            <div className="flex min-w-0 items-center gap-2 overflow-x-auto [scrollbar-width:none]">
+              {actions
+                .slice(0, normalizedAttachmentActionIndex)
+                .map(renderAction)}
+              {enableAttachments ? (
+                <Tooltip>
+                  <TooltipTrigger
+                    render={
+                      <InputGroupButton
+                        size="icon-sm"
+                        variant="ghost"
+                        className="h-7 w-7 shrink-0 p-0"
+                        aria-label="Upload files"
+                        onClick={() => fileInputRef.current?.click()}
+                      />
+                    }
+                  >
+                    <Paperclip />
+                  </TooltipTrigger>
+                  <TooltipContent>Upload files</TooltipContent>
+                </Tooltip>
+              ) : null}
+              {actions.slice(normalizedAttachmentActionIndex).map(renderAction)}
+              {showEmployeeSelector ? (
+                <Select
+                  open={employeeSelectOpen}
+                  value={currentEmployee.username}
+                  onOpenChange={(open) => {
+                    setEmployeeSelectOpen(open);
+                    if (!open) setPreviewedEmployee(undefined);
+                  }}
+                  onValueChange={(value) => {
+                    setPreviewedEmployee(undefined);
+                    if (value) selectEmployee(value);
+                  }}
+                >
+                  <SelectTrigger
+                    size="sm"
+                    className="max-w-36 shrink-0 border-0 bg-muted/60 px-1.5 shadow-none"
+                  >
+                    <SelectValue>
+                      <span className="flex min-w-0 items-center gap-1.5">
+                        <AIEmployeeAvatar
+                          employee={currentEmployee}
+                          className="size-5"
+                        />
+                        <span className="truncate">
+                          {currentEmployee.nickname}
+                        </span>
+                      </span>
+                    </SelectValue>
+                  </SelectTrigger>
+                  <SelectContent side="top" className="max-h-[400px] min-w-72">
+                    {visibleEmployees.map((employee) => (
+                      <SelectItem
+                        key={employee.username}
+                        value={employee.username}
+                        className="py-1.5"
+                      >
+                        <HoverCard
+                          open={
+                            employeeSelectOpen &&
+                            previewedEmployee === employee.username
+                          }
+                          onOpenChange={(open) => {
+                            if (!employeeSelectOpen) return;
+                            setPreviewedEmployee(
+                              open ? employee.username : undefined
+                            );
+                          }}
+                        >
+                          <HoverCardTrigger
+                            delay={250}
+                            closeDelay={100}
+                            render={
+                              <span className="flex min-w-0 flex-1 items-center gap-2" />
+                            }
+                          >
+                            <AIEmployeeAvatar
+                              employee={employee}
+                              className="size-9"
+                            />
+                            <span className="min-w-0">
+                              <span className="block font-medium">
+                                {employee.nickname}
+                              </span>
+                              {employee.position ? (
+                                <span className="block truncate text-xs text-muted-foreground">
+                                  {employee.position}
+                                </span>
+                              ) : null}
+                            </span>
+                          </HoverCardTrigger>
+                          <HoverCardContent
+                            side="left"
+                            align="start"
+                            sideOffset={8}
+                            className="w-65 p-3 data-closed:hidden"
+                          >
+                            <AIEmployeeProfile employee={employee} />
+                          </HoverCardContent>
+                        </HoverCard>
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              ) : null}
+              {showModelSelector ? (
+                <Select
+                  value={getAIModelKey(currentModel)}
+                  onValueChange={(value) => value && selectModel(value)}
+                >
+                  <SelectTrigger
+                    size="sm"
+                    title={currentModel.label}
+                    className="w-28 max-w-28 shrink-0 border-0 bg-muted/60 px-1.5 shadow-none"
+                  >
+                    <SelectValue className="min-w-0 overflow-hidden">
+                      <span className="block min-w-0 truncate">
+                        {currentModel.label}
+                      </span>
+                    </SelectValue>
+                  </SelectTrigger>
+                  <SelectContent side="top" className="max-h-[400px] min-w-56">
+                    <AIModelSelectOptions models={models} />
+                  </SelectContent>
+                </Select>
+              ) : null}
+            </div>
+            {busy ? (
+              <InputGroupButton
+                size="icon-sm"
+                variant="default"
+                className="rounded-lg"
+                aria-label="Stop generating"
+                onClick={() => void stop()}
+              >
+                <Square className="size-3 fill-current" />
+              </InputGroupButton>
+            ) : (
+              <InputGroupButton
+                size="icon-sm"
+                variant="default"
+                className="rounded-lg"
+                aria-label="Send message"
+                disabled={
+                  uploadingAttachments ||
+                  (!draft.trim() &&
+                    !attachments.some(
+                      (attachment) => attachment.status === "done"
+                    ) &&
+                    !workContext.length)
+                }
+                onClick={() => void send()}
+              >
+                <ArrowUp />
+              </InputGroupButton>
+            )}
+          </InputGroupAddon>
+        </InputGroup>
+        {enableAttachments ? (
+          <input
+            ref={fileInputRef}
+            type="file"
+            multiple
+            className="hidden"
+            tabIndex={-1}
+            aria-hidden="true"
+            onChange={(event) => {
+              const files = Array.from(event.target.files ?? []);
+              if (files.length) void uploadFiles(files);
+              event.target.value = "";
+            }}
+          />
+        ) : null}
+      </div>
+      {disclaimer !== false ? (
+        <p className="my-2.5 px-4 text-center text-[11px] text-muted-foreground">
+          {disclaimer}
+        </p>
+      ) : (
+        <div className="h-2" />
+      )}
+    </footer>
+  );
+}
+
+function AIEmployeeProfile({ employee }: { employee: AIEmployee }) {
+  const description = employee.bio ?? employee.description;
+
+  return (
+    <div>
+      <div className="flex items-center gap-3">
+        <AIEmployeeAvatar employee={employee} className="size-10" />
+        <div className="min-w-0">
+          <div className="truncate text-sm font-medium">
+            {employee.nickname}
+          </div>
+          {employee.position ? (
+            <div className="truncate text-xs text-muted-foreground">
+              {employee.position}
+            </div>
+          ) : null}
+        </div>
+      </div>
+      {description ? (
+        <p className="mt-3 border-t pt-3 text-xs leading-5 text-muted-foreground">
+          {description}
+        </p>
+      ) : null}
+    </div>
+  );
+}

package/src/extensions/nocobase-ai/components/chat/chat-empty-state.tsx

@@ -0,0 +1,51 @@
+import { Button } from "@/components/ui/button";
+import { useAIChatBase } from "../../providers";
+import { ArrowUpRight, Send, TextCursorInput } from "lucide-react";
+import { AIEmployeeAvatar } from "./ai-employee-avatar";
+
+export function ChatEmptyState() {
+  const { currentEmployee, availableTasks, runTask } = useAIChatBase();
+
+  return (
+    <div className="flex min-h-full items-center justify-center px-6 py-12">
+      <div className="w-full max-w-sm text-center">
+        <AIEmployeeAvatar
+          employee={currentEmployee}
+          className="mx-auto size-12"
+        />
+        <p className="mx-auto mt-4 max-w-xs text-sm leading-6 text-muted-foreground">
+          {currentEmployee.greeting ??
+            `Hi, I’m ${currentEmployee.nickname}. How can I help?`}
+        </p>
+        {availableTasks.length ? (
+          <div className="mt-6 grid gap-2 text-left">
+            {availableTasks.map((task, index) => {
+              const Icon = task.autoSend ? Send : TextCursorInput;
+              return (
+                <Button
+                  key={`${task.title ?? "task"}-${index}`}
+                  variant="outline"
+                  className="h-auto justify-start gap-3 whitespace-normal px-3 py-3 text-left font-normal"
+                  onClick={() => runTask(task)}
+                >
+                  <Icon className="size-4 text-muted-foreground" />
+                  <span className="min-w-0 flex-1">
+                    <span className="block">
+                      {task.title ?? task.message?.user ?? `Task ${index + 1}`}
+                    </span>
+                    <span className="mt-0.5 block text-[11px] text-muted-foreground">
+                      {task.autoSend
+                        ? "Send automatically"
+                        : "Fill the composer before sending"}
+                    </span>
+                  </span>
+                  <ArrowUpRight className="size-3.5 text-muted-foreground" />
+                </Button>
+              );
+            })}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/extensions/nocobase-ai/components/chat/chat-header.tsx

@@ -0,0 +1,88 @@
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { useAIChatBase } from "../../providers";
+import { Menu, PanelLeftClose, PlusCircle } from "lucide-react";
+import type { ReactNode } from "react";
+import { UserPromptEditor } from "./user-prompt-editor";
+
+export function ChatHeader({
+  actions,
+  showConversationToggle = true,
+  showNewConversation = true,
+  showUserPrompt = true,
+}: {
+  actions?: ReactNode;
+  showConversationToggle?: boolean;
+  showNewConversation?: boolean;
+  showUserPrompt?: boolean;
+}) {
+  const {
+    activeConversation,
+    conversations,
+    conversationListOpen,
+    setConversationListOpen,
+    startNewConversation,
+  } = useAIChatBase();
+  const unreadCount = conversations.filter(
+    (conversation) => conversation.unread
+  ).length;
+
+  return (
+    <header className="grid h-12 shrink-0 grid-cols-[auto_minmax(0,1fr)_auto] items-center border-b bg-card px-2.5">
+      <div className="flex min-w-8 items-center">
+        {showConversationToggle ? (
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  aria-label="Conversation list"
+                  onClick={() => setConversationListOpen(!conversationListOpen)}
+                />
+              }
+            >
+              <span className="relative">
+                {conversationListOpen ? <PanelLeftClose /> : <Menu />}
+                {!conversationListOpen && unreadCount > 0 ? (
+                  <span className="absolute -right-1 -top-1 size-2 rounded-full bg-destructive ring-2 ring-card" />
+                ) : null}
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>Conversation list</TooltipContent>
+          </Tooltip>
+        ) : null}
+      </div>
+
+      <div className="pointer-events-none min-w-0 truncate px-2 text-center text-sm font-medium">
+        {activeConversation?.title ?? "New conversation"}
+      </div>
+
+      <div className="flex shrink-0 items-center gap-0.5">
+        {showUserPrompt ? <UserPromptEditor /> : null}
+        {showNewConversation ? (
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  aria-label="New conversation"
+                  onClick={startNewConversation}
+                />
+              }
+            >
+              <PlusCircle />
+            </TooltipTrigger>
+            <TooltipContent>New conversation</TooltipContent>
+          </Tooltip>
+        ) : null}
+        {actions}
+      </div>
+    </header>
+  );
+}