@nocobase/portal-template-default 1.0.1 → 1.0.3

package/src/extensions/nocobase-ai/components/chat/chat-history-dialog.tsx

@@ -0,0 +1,77 @@
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { History, Menu } from "lucide-react";
+import { useEffect, useState, type ReactNode } from "react";
+import type { AIToolCallDecision } from "../../providers";
+import { ChatMessages } from "./chat-messages";
+import { ConversationList } from "./conversation-list";
+
+export function AIChatHistoryDialog({
+  open: controlledOpen,
+  onOpenChange,
+  trigger,
+  onToolCallDecision,
+}: {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  trigger?: ReactNode;
+  onToolCallDecision?: (decision: AIToolCallDecision) => void | Promise<void>;
+}) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const open = controlledOpen ?? internalOpen;
+  const setOpen = onOpenChange ?? setInternalOpen;
+  const [conversationListVisible, setConversationListVisible] = useState(true);
+
+  useEffect(() => {
+    if (open) setConversationListVisible(true);
+  }, [open]);
+
+  return (
+    <>
+      {trigger === null ? null : (
+        <span onClick={() => setOpen(true)}>
+          {trigger ?? (
+            <Button variant="ghost" size="sm">
+              <History /> Message history
+            </Button>
+          )}
+        </span>
+      )}
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="flex h-[82svh] w-[min(1040px,calc(100vw-2rem))] max-w-[1040px] flex-col gap-0 overflow-hidden p-0 sm:max-w-[1040px]">
+          <div className="flex h-12 shrink-0 items-center gap-2 border-b px-3 pr-12">
+            {!conversationListVisible ? (
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                aria-label="Show conversations"
+                onClick={() => setConversationListVisible(true)}
+              >
+                <Menu />
+              </Button>
+            ) : null}
+            <DialogTitle>Message history</DialogTitle>
+          </div>
+          <DialogDescription className="sr-only">
+            Browse conversations and inspect the full message history.
+          </DialogDescription>
+          <div className="flex min-h-0 flex-1 overflow-hidden">
+            {conversationListVisible ? (
+              <aside className="absolute top-12 bottom-0 left-0 z-20 w-[280px] border-r bg-card sm:relative sm:inset-auto sm:z-auto sm:block sm:w-[300px] sm:shrink-0">
+                <ConversationList
+                  onClose={() => setConversationListVisible(false)}
+                />
+              </aside>
+            ) : null}
+            <ChatMessages onToolCallDecision={onToolCallDecision} />
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

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

@@ -0,0 +1,252 @@
+import { Button } from "@/components/ui/button";
+import {
+  type AIChatMessage as AIChatMessageType,
+  type AIToolCallDecision,
+} from "../../providers";
+import { Check, Copy, Pencil, RefreshCcw } from "lucide-react";
+import { memo, useState } from "react";
+import { MarkdownMessage } from "./markdown-message";
+import { ReasoningPanel } from "./reasoning-panel";
+import {
+  getToolCallName,
+  isToolCallPart,
+  ToolCallCard,
+} from "./tool-call-card";
+import { ChatAttachment } from "./chat-attachment";
+import { useAIToolRenderer } from "../tools/tool-renderer-provider";
+import { SubAgentConversation } from "./sub-agent-conversation";
+import { WorkContextChip } from "./work-context-chip";
+
+type ChatMessageProps = {
+  message: AIChatMessageType;
+  onToolCallDecision?: (decision: AIToolCallDecision) => void | Promise<void>;
+  showActions?: boolean;
+  status?: "submitted" | "streaming" | "ready" | "error";
+  retryMessage?: (message: AIChatMessageType) => Promise<void>;
+  decideToolCall?: (decision: AIToolCallDecision) => Promise<void>;
+  startEditingMessage?: (message: AIChatMessageType) => Promise<void>;
+  focusComposer?: () => void;
+};
+
+function ChatMessageComponent({
+  message,
+  onToolCallDecision,
+  showActions = true,
+  status = "ready",
+  retryMessage,
+  decideToolCall,
+  startEditingMessage,
+  focusComposer,
+}: ChatMessageProps) {
+  const interactionPending = status === "streaming" || status === "submitted";
+  const [copied, setCopied] = useState(false);
+  const isUser = message.role === "user";
+  const text = message.parts
+    .filter((part) => part.type === "text")
+    .map((part) => part.text)
+    .join("\n");
+  const toolCalls = message.parts.filter(isToolCallPart);
+  const singleToolCall = toolCalls.length === 1 ? toolCalls[0] : undefined;
+  const singleToolRenderer = useAIToolRenderer(
+    singleToolCall ? getToolCallName(singleToolCall) : ""
+  );
+  const useInlineToolActions =
+    !text && Boolean(singleToolCall) && !singleToolRenderer;
+  const assistantParts = message.parts.filter(
+    (part) =>
+      part.type === "text" ||
+      part.type === "reasoning" ||
+      part.type === "data-subAgent" ||
+      isToolCallPart(part)
+  );
+  const showGenerating = !assistantParts.length && interactionPending;
+  const attachments = message.metadata?.attachments ?? [];
+  const workContext = message.metadata?.workContext ?? [];
+  if (isUser) {
+    return (
+      <article className="group/message flex flex-col items-end px-4 py-2 sm:px-5">
+        <div className="flex max-w-[80%] flex-col items-end">
+          {workContext.length ? (
+            <div className="mb-1.5 flex max-w-full flex-wrap justify-end gap-1.5">
+              {workContext.map((item, index) => (
+                <WorkContextChip
+                  key={`${item.type}:${item.id ?? item.title ?? index}`}
+                  item={item}
+                  className="bg-background"
+                />
+              ))}
+            </div>
+          ) : null}
+          {attachments.length ? (
+            <div className="mb-1.5 flex max-w-full flex-wrap justify-end gap-1.5">
+              {attachments.map((attachment) => (
+                <ChatAttachment key={attachment.uid} attachment={attachment} />
+              ))}
+            </div>
+          ) : null}
+          {text ? (
+            <div className="rounded-2xl rounded-br-md bg-secondary px-4 py-2.5 text-sm leading-6 text-secondary-foreground">
+              <div className="whitespace-pre-wrap break-words">{text}</div>
+            </div>
+          ) : null}
+        </div>
+        {showActions ? (
+          <div className="pointer-events-none mt-1 flex h-6 items-center gap-1 opacity-0 transition-opacity group-hover/message:pointer-events-auto group-hover/message:opacity-100 focus-within:pointer-events-auto focus-within:opacity-100">
+            <Button
+              variant="ghost"
+              size="icon-xs"
+              aria-label="Edit message"
+              disabled={interactionPending || !startEditingMessage}
+              onClick={() => void startEditingMessage?.(message)}
+            >
+              <Pencil />
+            </Button>
+            {text ? (
+              <Button
+                variant="ghost"
+                size="icon-xs"
+                aria-label="Copy message"
+                onClick={async () => {
+                  await navigator.clipboard.writeText(text);
+                  setCopied(true);
+                  window.setTimeout(() => setCopied(false), 1200);
+                }}
+              >
+                {copied ? <Check /> : <Copy />}
+              </Button>
+            ) : null}
+          </div>
+        ) : null}
+      </article>
+    );
+  }
+
+  const messageActions = (
+    <>
+      {text ? (
+        <Button
+          variant="ghost"
+          size="icon-xs"
+          aria-label="Copy response"
+          onClick={async () => {
+            await navigator.clipboard.writeText(text);
+            setCopied(true);
+            window.setTimeout(() => setCopied(false), 1200);
+          }}
+        >
+          {copied ? <Check /> : <Copy />}
+        </Button>
+      ) : null}
+      <Button
+        variant="ghost"
+        size="icon-xs"
+        aria-label="Retry response"
+        disabled={interactionPending || !retryMessage}
+        onClick={() => void retryMessage?.(message)}
+      >
+        <RefreshCcw />
+      </Button>
+    </>
+  );
+
+  return (
+    <article className="group/message px-4 py-2 sm:px-5">
+      <div className="min-w-0 space-y-4">
+        {assistantParts.map((part, index) => {
+          if (part.type === "reasoning") {
+            return (
+              <ReasoningPanel
+                key={`reasoning-${index}`}
+                streaming={part.state === "streaming"}
+              >
+                {part.text}
+              </ReasoningPanel>
+            );
+          }
+          if (part.type === "text") {
+            return (
+              <div
+                key={`text-${index}`}
+                className="ai-markdown text-sm leading-6 text-foreground"
+              >
+                <MarkdownMessage>{part.text}</MarkdownMessage>
+              </div>
+            );
+          }
+          if (part.type === "data-subAgent") {
+            return (
+              <SubAgentConversation
+                key={part.id ?? part.data.sessionId}
+                conversation={part.data}
+                onToolCallDecision={onToolCallDecision}
+                status={status}
+                decideToolCall={decideToolCall}
+                focusComposer={focusComposer}
+              />
+            );
+          }
+          if (!isToolCallPart(part)) return null;
+          return (
+            <ToolCallCard
+              key={part.toolCallId}
+              part={part}
+              approval={message.metadata?.toolApprovals?.[part.toolCallId]}
+              disabled={interactionPending}
+              onRevise={focusComposer}
+              inlineActions={
+                showActions && useInlineToolActions && part === singleToolCall
+                  ? messageActions
+                  : undefined
+              }
+              onDecision={async (decision, input) => {
+                const toolDecision = {
+                  messageId: message.id,
+                  toolCallId: part.toolCallId,
+                  toolName: getToolCallName(part),
+                  decision,
+                  input,
+                } satisfies AIToolCallDecision;
+                await decideToolCall?.(toolDecision);
+                try {
+                  await onToolCallDecision?.(toolDecision);
+                } catch (error) {
+                  console.error("Tool-call decision callback failed", error);
+                }
+              }}
+            />
+          );
+        })}
+        {showGenerating ? (
+          <div className="min-h-6 text-sm leading-6 text-foreground">
+            <span
+              className="inline-flex gap-1 py-2"
+              aria-label="Generating response"
+            >
+              <span className="size-1.5 animate-pulse rounded-full bg-muted-foreground/70" />
+              <span className="size-1.5 animate-pulse rounded-full bg-muted-foreground/70 [animation-delay:120ms]" />
+              <span className="size-1.5 animate-pulse rounded-full bg-muted-foreground/70 [animation-delay:240ms]" />
+            </span>
+          </div>
+        ) : null}
+      </div>
+      {showActions && (text || (toolCalls.length && !useInlineToolActions)) ? (
+        <div className="pointer-events-none mt-1 flex h-6 items-center gap-1 opacity-0 transition-opacity group-hover/message:pointer-events-auto group-hover/message:opacity-100 focus-within:pointer-events-auto focus-within:opacity-100">
+          {messageActions}
+        </div>
+      ) : null}
+    </article>
+  );
+}
+
+export const ChatMessage = memo(
+  ChatMessageComponent,
+  (previous, next) =>
+    previous.message === next.message &&
+    previous.status === next.status &&
+    previous.showActions === next.showActions &&
+    previous.onToolCallDecision === next.onToolCallDecision &&
+    previous.retryMessage === next.retryMessage &&
+    previous.decideToolCall === next.decideToolCall &&
+    previous.startEditingMessage === next.startEditingMessage &&
+    previous.focusComposer === next.focusComposer
+);

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

@@ -0,0 +1,173 @@
+import { Button } from "@/components/ui/button";
+import { LoadingState } from "@/components/app-shell/loading-state";
+import {
+  useAIChatBase,
+  useAIChatMessages,
+  useAIChatStatus,
+  type AIChatMessage,
+  type AIToolCallDecision,
+} from "../../providers";
+import { cn } from "@/lib/utils";
+import { ArrowDown } from "lucide-react";
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { ChatEmptyState } from "./chat-empty-state";
+import { ChatMessage } from "./chat-message";
+
+export function ChatMessages({
+  onToolCallDecision,
+}: {
+  onToolCallDecision?: (decision: AIToolCallDecision) => void | Promise<void>;
+}) {
+  const { messages } = useAIChatMessages();
+  const { status, error } = useAIChatStatus();
+  const {
+    messagesLoading,
+    historyError,
+    interactionError,
+    retryMessage,
+    decideToolCall,
+    startEditingMessage,
+    focusComposer,
+  } = useAIChatBase();
+
+  return (
+    <AIChatMessageList
+      messages={messages}
+      status={status}
+      loading={messagesLoading}
+      error={error}
+      historyError={historyError}
+      interactionError={interactionError}
+      onToolCallDecision={onToolCallDecision}
+      retryMessage={retryMessage}
+      decideToolCall={decideToolCall}
+      startEditingMessage={startEditingMessage}
+      focusComposer={focusComposer}
+    />
+  );
+}
+
+export type AIChatMessageListProps = {
+  messages: AIChatMessage[];
+  status?: "submitted" | "streaming" | "ready" | "error";
+  loading?: boolean;
+  error?: Error | null;
+  historyError?: Error | null;
+  interactionError?: Error | null;
+  emptyState?: ReactNode;
+  className?: string;
+  onToolCallDecision?: (decision: AIToolCallDecision) => void | Promise<void>;
+  showMessageActions?: boolean;
+  retryMessage?: (message: AIChatMessage) => Promise<void>;
+  decideToolCall?: (decision: AIToolCallDecision) => Promise<void>;
+  startEditingMessage?: (message: AIChatMessage) => Promise<void>;
+  focusComposer?: () => void;
+};
+
+export function AIChatMessageList({
+  messages,
+  status = "ready",
+  loading = false,
+  error,
+  historyError,
+  interactionError,
+  emptyState,
+  className,
+  onToolCallDecision,
+  showMessageActions = true,
+  retryMessage,
+  decideToolCall,
+  startEditingMessage,
+  focusComposer,
+}: AIChatMessageListProps) {
+  const viewportRef = useRef<HTMLDivElement>(null);
+  const [atBottom, setAtBottom] = useState(true);
+
+  const scrollToBottom = (behavior: ScrollBehavior = "smooth") => {
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+    viewport.scrollTo({ top: viewport.scrollHeight, behavior });
+  };
+
+  useEffect(() => {
+    if (atBottom) scrollToBottom(status === "streaming" ? "auto" : "smooth");
+  }, [atBottom, messages, status]);
+
+  return (
+    <div className={cn("relative min-h-0 flex-1 bg-background", className)}>
+      <div
+        ref={viewportRef}
+        role="log"
+        aria-live="polite"
+        className="absolute inset-0 overflow-y-auto overscroll-contain"
+        onScroll={(event) => {
+          const element = event.currentTarget;
+          setAtBottom(
+            element.scrollHeight - element.scrollTop - element.clientHeight < 48
+          );
+        }}
+      >
+        {loading ? (
+          <LoadingState className="h-full" />
+        ) : (
+          <>
+            {messages.length ? (
+              <div className="mx-auto w-full max-w-3xl py-2">
+                {messages.map((message) => (
+                  <ChatMessage
+                    key={message.id}
+                    message={message}
+                    onToolCallDecision={onToolCallDecision}
+                    showActions={showMessageActions}
+                    status={status}
+                    retryMessage={retryMessage}
+                    decideToolCall={decideToolCall}
+                    startEditingMessage={startEditingMessage}
+                    focusComposer={focusComposer}
+                  />
+                ))}
+              </div>
+            ) : (
+              emptyState ?? <ChatEmptyState />
+            )}
+            {error ? (
+              <div
+                role="alert"
+                className="mx-5 my-3 rounded-lg border border-destructive/25 bg-destructive/5 px-3 py-2 text-sm text-destructive"
+              >
+                {error.message}
+              </div>
+            ) : null}
+            {historyError ? (
+              <div
+                role="alert"
+                className="mx-5 my-3 rounded-lg border border-destructive/25 bg-destructive/5 px-3 py-2 text-sm text-destructive"
+              >
+                {historyError.message}
+              </div>
+            ) : null}
+            {interactionError ? (
+              <div
+                role="alert"
+                className="mx-5 my-3 rounded-lg border border-destructive/25 bg-destructive/5 px-3 py-2 text-sm text-destructive"
+              >
+                {interactionError.message}
+              </div>
+            ) : null}
+          </>
+        )}
+      </div>
+      {!atBottom ? (
+        <Button
+          size="icon-sm"
+          variant="outline"
+          className="absolute bottom-3 left-1/2 z-10 -translate-x-1/2 rounded-full bg-background shadow-sm"
+          aria-label="Scroll to bottom"
+          onClick={() => scrollToBottom()}
+        >
+          <ArrowDown />
+        </Button>
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,118 @@
+import { cn } from "@/lib/utils";
+import { useAIChatBase, type AIToolCallDecision } from "../../providers";
+import { useRef, useState, type DragEvent, type ReactNode } from "react";
+import { ChatComposer, type AIChatComposerAction } from "./chat-composer";
+import { ChatHeader } from "./chat-header";
+import { ChatMessages } from "./chat-messages";
+import { ConversationList } from "./conversation-list";
+
+export function AIChatWindow({
+  className,
+  headerActions,
+  composerActions,
+  showConversationToggle = true,
+  showNewConversation = true,
+  showEmployeeSelector = true,
+  showModelSelector = true,
+  showUserPrompt = true,
+  enableAttachments = false,
+  attachmentActionIndex = 0,
+  placeholder,
+  disclaimer,
+  onToolCallDecision,
+}: AIChatWindowProps) {
+  const { conversationListOpen, setConversationListOpen, uploadFiles } =
+    useAIChatBase();
+  const [draggingFiles, setDraggingFiles] = useState(false);
+  const dragDepthRef = useRef(0);
+
+  const hasFiles = (event: DragEvent) =>
+    Array.from(event.dataTransfer.types).includes("Files");
+
+  return (
+    <section
+      className={cn(
+        "ai-chat-window relative flex h-full min-h-0 w-full overflow-hidden bg-background text-foreground",
+        className
+      )}
+      onDragEnter={(event) => {
+        if (!enableAttachments || !hasFiles(event)) return;
+        event.preventDefault();
+        dragDepthRef.current += 1;
+        setDraggingFiles(true);
+      }}
+      onDragOver={(event) => {
+        if (!enableAttachments || !hasFiles(event)) return;
+        event.preventDefault();
+        event.dataTransfer.dropEffect = "copy";
+      }}
+      onDragLeave={(event) => {
+        if (!enableAttachments || !hasFiles(event)) return;
+        event.preventDefault();
+        dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
+        if (dragDepthRef.current === 0) setDraggingFiles(false);
+      }}
+      onDrop={(event) => {
+        if (!enableAttachments || !hasFiles(event)) return;
+        event.preventDefault();
+        dragDepthRef.current = 0;
+        setDraggingFiles(false);
+        const files = Array.from(event.dataTransfer.files);
+        if (files.length) void uploadFiles(files);
+      }}
+    >
+      {draggingFiles ? (
+        <div className="pointer-events-none absolute inset-2 z-50 flex items-center justify-center rounded-xl border-2 border-dashed border-foreground/25 bg-background/90 text-sm font-medium shadow-sm backdrop-blur-sm">
+          Drop files to upload
+        </div>
+      ) : null}
+      {conversationListOpen && showConversationToggle ? (
+        <button
+          type="button"
+          className="ai-chat-conversation-backdrop absolute inset-0 z-20 bg-black/25 backdrop-blur-[1px]"
+          aria-label="Close conversation list"
+          onClick={() => setConversationListOpen(false)}
+        />
+      ) : null}
+      {conversationListOpen && showConversationToggle ? (
+        <aside className="ai-chat-conversation-panel z-30 flex h-full w-[300px] shrink-0 border-r bg-card">
+          <ConversationList />
+        </aside>
+      ) : null}
+      <div className="flex min-w-0 flex-1 flex-col">
+        <ChatHeader
+          actions={headerActions}
+          showConversationToggle={showConversationToggle}
+          showNewConversation={showNewConversation}
+          showUserPrompt={showUserPrompt}
+        />
+        <ChatMessages onToolCallDecision={onToolCallDecision} />
+        <ChatComposer
+          actions={composerActions}
+          showEmployeeSelector={showEmployeeSelector}
+          showModelSelector={showModelSelector}
+          enableAttachments={enableAttachments}
+          attachmentActionIndex={attachmentActionIndex}
+          placeholder={placeholder}
+          disclaimer={disclaimer}
+        />
+      </div>
+    </section>
+  );
+}
+
+export type AIChatWindowProps = {
+  className?: string;
+  headerActions?: ReactNode;
+  composerActions?: AIChatComposerAction[];
+  showConversationToggle?: boolean;
+  showNewConversation?: boolean;
+  showEmployeeSelector?: boolean;
+  showModelSelector?: boolean;
+  showUserPrompt?: boolean;
+  enableAttachments?: boolean;
+  attachmentActionIndex?: number;
+  placeholder?: string;
+  disclaimer?: ReactNode | false;
+  onToolCallDecision?: (decision: AIToolCallDecision) => void | Promise<void>;
+};