@nocobase/portal-template-default 1.0.3 → 1.0.5

package/src/extensions/nocobase-ai/components/chat/conversation-list.tsx

@@ -1,343 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { LoadingState } from "@/components/app-shell/loading-state";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { cn } from "@/lib/utils";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { useAIChatBase } from "../../providers";
-import {
-  MoreHorizontal,
-  PanelLeftClose,
-  Pencil,
-  Plus,
-  Search,
-  Trash2,
-  X,
-  LoaderCircle,
-} from "lucide-react";
-import { useEffect, useState, type FormEvent } from "react";
-
-export function ConversationList({
-  onClose,
-  showCloseButton = true,
-}: {
-  onClose?: () => void;
-  showCloseButton?: boolean;
-} = {}) {
-  const {
-    conversations,
-    activeConversationId,
-    selectConversation,
-    renameConversation,
-    removeConversation,
-    startNewConversation,
-    setConversationListOpen,
-    conversationsLoading,
-    conversationSearch,
-    searchConversations,
-    historyError,
-  } = useAIChatBase();
-  const [searchValue, setSearchValue] = useState(conversationSearch);
-  const [renameTarget, setRenameTarget] = useState<{
-    id: string;
-    title: string;
-  }>();
-  const [renameTitle, setRenameTitle] = useState("");
-  const [renaming, setRenaming] = useState(false);
-  const [renameError, setRenameError] = useState<string>();
-  const [deleteTarget, setDeleteTarget] = useState<{
-    id: string;
-    title: string;
-  }>();
-  const [deleting, setDeleting] = useState(false);
-  const [deleteError, setDeleteError] = useState<string>();
-
-  useEffect(() => {
-    setRenameTitle(renameTarget?.title ?? "");
-    setRenameError(undefined);
-  }, [renameTarget]);
-
-  useEffect(() => {
-    setSearchValue(conversationSearch);
-  }, [conversationSearch]);
-
-  const submitRename = async (event: FormEvent) => {
-    event.preventDefault();
-    if (!renameTarget || !renameTitle.trim()) return;
-    setRenaming(true);
-    setRenameError(undefined);
-    try {
-      await renameConversation(renameTarget.id, renameTitle);
-      setRenameTarget(undefined);
-    } catch (error) {
-      setRenameError(
-        error instanceof Error ? error.message : "Unable to rename conversation"
-      );
-    } finally {
-      setRenaming(false);
-    }
-  };
-
-  const confirmDelete = async () => {
-    if (!deleteTarget) return;
-    setDeleting(true);
-    setDeleteError(undefined);
-    try {
-      await removeConversation(deleteTarget.id);
-      setDeleteTarget(undefined);
-    } catch (error) {
-      setDeleteError(
-        error instanceof Error ? error.message : "Unable to delete conversation"
-      );
-    } finally {
-      setDeleting(false);
-    }
-  };
-
-  return (
-    <div className="flex h-full min-w-0 flex-1 flex-col overflow-hidden overscroll-contain bg-card">
-      <div className="flex h-12 shrink-0 items-center justify-between border-b px-3">
-        <div className="flex min-w-0 items-center gap-1.5">
-          {showCloseButton ? (
-            <Button
-              variant="ghost"
-              size="icon-sm"
-              aria-label="Close conversation list"
-              onClick={() =>
-                onClose ? onClose() : setConversationListOpen(false)
-              }
-            >
-              <PanelLeftClose />
-            </Button>
-          ) : null}
-          <span className="truncate text-sm font-semibold">Conversations</span>
-        </div>
-        <Button
-          variant="ghost"
-          size="icon-sm"
-          aria-label="New conversation"
-          onClick={startNewConversation}
-        >
-          <Plus />
-        </Button>
-      </div>
-      <form
-        className="shrink-0 border-b p-2.5"
-        onSubmit={(event) => {
-          event.preventDefault();
-          void searchConversations(searchValue).catch(() => undefined);
-        }}
-      >
-        <div className="relative">
-          <Search className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-          <Input
-            value={searchValue}
-            className="h-8 pl-8 pr-8 text-sm"
-            placeholder="Search conversations"
-            aria-label="Search conversations"
-            onChange={(event) => setSearchValue(event.target.value)}
-          />
-          {conversationsLoading && conversationSearch ? (
-            <LoaderCircle className="absolute right-2.5 top-1/2 size-4 -translate-y-1/2 animate-spin text-muted-foreground" />
-          ) : searchValue ? (
-            <Button
-              type="button"
-              variant="ghost"
-              size="icon-xs"
-              className="absolute right-1.5 top-1/2 -translate-y-1/2"
-              aria-label="Clear conversation search"
-              onClick={() => {
-                setSearchValue("");
-                void searchConversations("").catch(() => undefined);
-              }}
-            >
-              <X />
-            </Button>
-          ) : null}
-        </div>
-      </form>
-      <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain p-2">
-        {conversationsLoading ? (
-          <LoadingState className="py-8" />
-        ) : conversations.length ? (
-          <div className="space-y-1">
-            {conversations.map((conversation) => {
-              const active = conversation.id === activeConversationId;
-              return (
-                <div
-                  key={conversation.id}
-                  className={cn(
-                    "group/conversation flex items-start rounded-lg pr-1 transition-colors",
-                    active ? "bg-accent" : "hover:bg-muted/70"
-                  )}
-                >
-                  <button
-                    type="button"
-                    className="flex min-w-0 flex-1 items-center gap-2 px-2.5 py-2.5 text-left"
-                    onClick={() => selectConversation(conversation.id)}
-                  >
-                    {conversation.unread && !active ? (
-                      <span
-                        className="size-2 shrink-0 rounded-full bg-destructive"
-                        aria-label="Unread conversation"
-                      />
-                    ) : null}
-                    <span className="block min-w-0 flex-1 truncate text-sm font-medium">
-                      {conversation.title}
-                    </span>
-                  </button>
-                  <DropdownMenu>
-                    <DropdownMenuTrigger
-                      render={
-                        <Button
-                          variant="ghost"
-                          size="icon-xs"
-                          className="mt-1.5 opacity-0 group-hover/conversation:opacity-100 data-popup-open:opacity-100"
-                          aria-label="Conversation actions"
-                        />
-                      }
-                    >
-                      <MoreHorizontal />
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end" className="w-36">
-                      <DropdownMenuItem
-                        onClick={() =>
-                          setRenameTarget({
-                            id: conversation.id,
-                            title: conversation.title,
-                          })
-                        }
-                      >
-                        <Pencil />
-                        Rename
-                      </DropdownMenuItem>
-                      <DropdownMenuItem
-                        variant="destructive"
-                        onClick={() => {
-                          setDeleteError(undefined);
-                          setDeleteTarget({
-                            id: conversation.id,
-                            title: conversation.title,
-                          });
-                        }}
-                      >
-                        <Trash2 />
-                        Delete
-                      </DropdownMenuItem>
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                </div>
-              );
-            })}
-          </div>
-        ) : (
-          <div className="px-3 py-8 text-center text-sm text-muted-foreground">
-            {conversationSearch
-              ? "No matching conversations."
-              : "No conversations yet."}
-          </div>
-        )}
-        {historyError ? (
-          <div className="mx-2 mt-2 rounded-lg border border-destructive/25 bg-destructive/5 px-3 py-2 text-xs text-destructive">
-            {historyError.message}
-          </div>
-        ) : null}
-      </div>
-      <Dialog
-        open={!!renameTarget}
-        onOpenChange={(open) => {
-          if (!open && !renaming) setRenameTarget(undefined);
-        }}
-      >
-        <DialogContent>
-          <form onSubmit={submitRename}>
-            <DialogHeader>
-              <DialogTitle>Rename conversation</DialogTitle>
-              <DialogDescription>
-                Choose a title that makes this conversation easy to find.
-              </DialogDescription>
-            </DialogHeader>
-            <div className="mt-5 space-y-2">
-              <Label htmlFor="conversation-title">Title</Label>
-              <Input
-                id="conversation-title"
-                value={renameTitle}
-                onChange={(event) => setRenameTitle(event.target.value)}
-                autoFocus
-                maxLength={120}
-              />
-              {renameError ? (
-                <p className="text-xs text-destructive">{renameError}</p>
-              ) : null}
-            </div>
-            <DialogFooter className="mt-5">
-              <Button
-                type="button"
-                variant="outline"
-                disabled={renaming}
-                onClick={() => setRenameTarget(undefined)}
-              >
-                Cancel
-              </Button>
-              <Button type="submit" disabled={renaming || !renameTitle.trim()}>
-                {renaming ? <LoaderCircle className="animate-spin" /> : null}
-                Save
-              </Button>
-            </DialogFooter>
-          </form>
-        </DialogContent>
-      </Dialog>
-      <Dialog
-        open={!!deleteTarget}
-        onOpenChange={(open) => {
-          if (!open && !deleting) setDeleteTarget(undefined);
-        }}
-      >
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Delete conversation?</DialogTitle>
-            <DialogDescription>
-              “{deleteTarget?.title}” and its messages will be permanently
-              deleted.
-            </DialogDescription>
-          </DialogHeader>
-          {deleteError ? (
-            <p className="mt-3 text-sm text-destructive">{deleteError}</p>
-          ) : null}
-          <DialogFooter className="mt-5">
-            <Button
-              type="button"
-              variant="outline"
-              disabled={deleting}
-              onClick={() => setDeleteTarget(undefined)}
-            >
-              Cancel
-            </Button>
-            <Button
-              type="button"
-              variant="destructive"
-              disabled={deleting}
-              onClick={() => void confirmDelete()}
-            >
-              {deleting ? <LoaderCircle className="animate-spin" /> : null}
-              Delete
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </div>
-  );
-}

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

@@ -1,165 +0,0 @@
-import ReactMarkdown from "react-markdown";
-import type { Components } from "react-markdown";
-import remarkGfm from "remark-gfm";
-
-import { cn } from "@/lib/utils";
-
-type MarkdownMessageProps = {
-  children: string;
-  variant?: "chat" | "document";
-};
-
-function createMarkdownComponents(variant: MarkdownMessageProps["variant"]): Components {
-  const document = variant === "document";
-
-  return {
-    h1: ({ className, ...props }) => (
-      <h1
-        {...props}
-        className={cn(
-          "mb-4 mt-7 scroll-m-20 font-bold tracking-tight first:mt-0",
-          document ? "text-3xl" : "text-xl",
-          className
-        )}
-      />
-    ),
-    h2: ({ className, ...props }) => (
-      <h2
-        {...props}
-        className={cn(
-          "mb-3 mt-7 scroll-m-20 border-b pb-2 font-semibold tracking-tight first:mt-0",
-          document ? "text-2xl" : "text-lg",
-          className
-        )}
-      />
-    ),
-    h3: ({ className, ...props }) => (
-      <h3
-        {...props}
-        className={cn(
-          "mb-2 mt-6 scroll-m-20 font-semibold tracking-tight first:mt-0",
-          document ? "text-xl" : "text-base",
-          className
-        )}
-      />
-    ),
-    h4: ({ className, ...props }) => (
-      <h4
-        {...props}
-        className={cn(
-          "mb-2 mt-5 scroll-m-20 font-semibold first:mt-0",
-          document ? "text-lg" : "text-sm",
-          className
-        )}
-      />
-    ),
-    p: ({ className, ...props }) => (
-      <p {...props} className={cn("my-3 leading-7", className)} />
-    ),
-    ul: ({ className, ...props }) => (
-      <ul
-        {...props}
-        className={cn("my-3 ml-6 list-disc space-y-1", className)}
-      />
-    ),
-    ol: ({ className, ...props }) => (
-      <ol
-        {...props}
-        className={cn("my-3 ml-6 list-decimal space-y-1", className)}
-      />
-    ),
-    li: ({ className, ...props }) => (
-      <li {...props} className={cn("pl-1", className)} />
-    ),
-    blockquote: ({ className, ...props }) => (
-      <blockquote
-        {...props}
-        className={cn(
-          "my-4 border-l-4 border-border pl-4 italic text-muted-foreground",
-          className
-        )}
-      />
-    ),
-    hr: ({ className, ...props }) => (
-      <hr {...props} className={cn("my-6 border-border", className)} />
-    ),
-    table: ({ className, ...props }) => (
-      <div className="my-4 w-full overflow-x-auto rounded-md border">
-        <table
-          {...props}
-          className={cn("w-full border-collapse text-sm", className)}
-        />
-      </div>
-    ),
-    th: ({ className, ...props }) => (
-      <th
-        {...props}
-        className={cn(
-          "border-b border-r bg-muted/60 px-3 py-2 text-left font-semibold last:border-r-0",
-          className
-        )}
-      />
-    ),
-    td: ({ className, ...props }) => (
-      <td
-        {...props}
-        className={cn(
-          "border-b border-r px-3 py-2 align-top last:border-r-0",
-          className
-        )}
-      />
-    ),
-    tr: ({ className, ...props }) => (
-      <tr
-        {...props}
-        className={cn("last:[&>td]:border-b-0", className)}
-      />
-    ),
-    strong: ({ className, ...props }) => (
-      <strong {...props} className={cn("font-semibold", className)} />
-    ),
-    a: ({ className, ...props }) => (
-      <a
-        {...props}
-        className={cn("underline underline-offset-4", className)}
-        target="_blank"
-        rel="noreferrer"
-      />
-    ),
-    pre: ({ className, ...props }) => (
-      <pre
-        {...props}
-        className={cn(
-          "my-4 overflow-x-auto rounded-lg bg-muted p-4 text-sm",
-          className
-        )}
-      />
-    ),
-    code: ({ className, ...props }) => (
-      <code
-        {...props}
-        className={cn(
-          "rounded bg-muted px-1.5 py-0.5 font-mono text-[0.875em]",
-          className
-        )}
-      />
-    ),
-  };
-}
-
-const chatComponents = createMarkdownComponents("chat");
-const documentComponents = createMarkdownComponents("document");
-
-export function MarkdownMessage({
-  children,
-  variant = "chat",
-}: MarkdownMessageProps) {
-  return (
-    <ReactMarkdown
-      remarkPlugins={[remarkGfm]}
-      components={variant === "document" ? documentComponents : chatComponents}
-    >
-      {children}
-    </ReactMarkdown>
-  );
-}

package/src/extensions/nocobase-ai/components/chat/model-select-options.tsx

@@ -1,30 +0,0 @@
-import {
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectSeparator,
-} from "@/components/ui/select";
-import { getAIModelKey, groupAIModels, type AIModel } from "../../providers";
-import { Fragment } from "react";
-
-export function AIModelSelectOptions({ models }: { models: AIModel[] }) {
-  const groups = groupAIModels(models);
-
-  return groups.map((group, index) => (
-    <Fragment key={group.key}>
-      {index > 0 ? <SelectSeparator /> : null}
-      <SelectGroup className="py-1">
-        <SelectLabel className="px-2 py-1.5 font-medium">
-          {group.label}
-        </SelectLabel>
-        {group.models.map((model) => (
-          <SelectItem key={getAIModelKey(model)} value={getAIModelKey(model)}>
-            <span className="block max-w-64 truncate" title={model.label}>
-              {model.label}
-            </span>
-          </SelectItem>
-        ))}
-      </SelectGroup>
-    </Fragment>
-  ));
-}

package/src/extensions/nocobase-ai/components/chat/reasoning-panel.tsx

@@ -1,29 +0,0 @@
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/components/ui/collapsible";
-import { Brain, ChevronDown } from "lucide-react";
-
-export function ReasoningPanel({
-  children,
-  streaming,
-}: {
-  children: string;
-  streaming?: boolean;
-}) {
-  if (!children) return null;
-
-  return (
-    <Collapsible className="overflow-hidden rounded-lg border border-border/70 bg-muted/30">
-      <CollapsibleTrigger className="group/reasoning flex w-full items-center gap-2 px-3 py-2 text-xs font-medium text-muted-foreground outline-none hover:bg-muted/40 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset">
-        <Brain className="size-3.5" />
-        <span>{streaming ? "Thinking…" : "Reasoning"}</span>
-        <ChevronDown className="ml-auto size-3.5 transition-transform group-data-panel-open/reasoning:rotate-180" />
-      </CollapsibleTrigger>
-      <CollapsibleContent className="border-t px-3 py-2.5 text-xs leading-5 text-muted-foreground">
-        {children}
-      </CollapsibleContent>
-    </Collapsible>
-  );
-}