@nocobase/portal-template-default 1.0.1 → 1.0.3

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

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

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

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

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