@nocobase/portal-template-default 1.0.3 → 1.0.4

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

@@ -1,77 +0,0 @@
-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

@@ -1,252 +0,0 @@
-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

@@ -1,173 +0,0 @@
-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

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