@allbluecn/web-app 0.3.0

package/src/components/billing/use-resource.ts

@@ -0,0 +1,47 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { useSubscription } from './subscription-provider'
+import { type ResourceKey, type ResourceSnapshot } from '@allbluecn/shared'
+
+export interface UseResourceResult {
+  limit: number | 'unlimited'
+  usage: number
+  unlimited: boolean
+  loading: boolean
+  canConsume: (amount: number) => boolean
+}
+
+const LOADING_SNAPSHOT: ResourceSnapshot = { limit: 0, usage: 0 }
+
+export function useResource(resource: ResourceKey): UseResourceResult {
+  const { resources, loading } = useSubscription()
+  const snapshot = resources?.[resource] ?? LOADING_SNAPSHOT
+  const unlimited = snapshot.limit === 'unlimited'
+
+  return {
+    limit: snapshot.limit,
+    usage: snapshot.usage,
+    unlimited,
+    loading,
+    canConsume: (amount: number) =>
+      !loading &&
+      (unlimited ||
+        (typeof snapshot.limit === 'number' &&
+          snapshot.usage + amount <= snapshot.limit)),
+  }
+}

package/src/components/chat/__tests__/ai-conversation.test.tsx

@@ -0,0 +1,79 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { describe, expect, test, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import AIConversation from "@/components/chat/ai-conversation";
+
+class ResizeObserverMock {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+vi.stubGlobal("ResizeObserver", ResizeObserverMock);
+
+vi.mock("@/components/chat/ai-message", () => ({
+  default: ({ content }: { content: string }) => <div>AI:{content}</div>,
+}));
+vi.mock("@/components/chat/ai-thinking", () => ({
+  default: () => <div>thinking</div>,
+}));
+vi.mock("@/components/chat/ai-citations", () => ({
+  default: () => null,
+}));
+vi.mock("@/hooks/useTranslator", () => ({
+  useTranslator: () => ({ translatedText: "", isTranslating: false }),
+}));
+
+function makeMessages(n: number) {
+  const arr: Array<{ id: string; role: "user" | "assistant"; content: string }> = [];
+  for (let i = 0; i < n; i++) {
+    arr.push({
+      id: `m${i}`,
+      role: i % 2 === 0 ? "user" : "assistant",
+      content: `content-${i}`,
+    });
+  }
+  return arr;
+}
+
+describe("AIConversation 虚拟化", () => {
+  test("超过阈值时历史消息虚拟化，尾部消息固定渲染", () => {
+    const messages = makeMessages(300);
+    render(<AIConversation messages={messages} />);
+    // 尾部最新消息必须渲染（id=299 是 assistant，mock 渲染 AI:content-299）
+    expect(screen.getByText(/content-299/)).toBeTruthy();
+    // 中间的历史消息不应渲染（id=150 是 user，直接渲染 content-150 文本）
+    expect(screen.queryByText("content-150")).toBeFalsy();
+    // 首条消息也不应渲染
+    expect(screen.queryByText("content-0")).toBeFalsy();
+  });
+
+  test("不超过阈值时全量渲染", () => {
+    const messages = makeMessages(10);
+    render(<AIConversation messages={messages} />);
+    // 全量渲染时所有消息都在 DOM 中
+    expect(screen.getByText(/content-9/)).toBeTruthy();
+    expect(screen.getByText(/content-3/)).toBeTruthy();
+    expect(screen.getByText(/content-0/)).toBeTruthy();
+  });
+
+  test("空状态渲染", () => {
+    render(<AIConversation messages={[]} />);
+    expect(screen.getByRole("status")).toBeTruthy();
+  });
+});

package/src/components/chat/ai-chat-history/components/conversation-group.tsx

@@ -0,0 +1,97 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+"use client";
+
+import { Separator } from "@/components/ui/separator";
+import { ConversationItem } from "./conversation-item";
+import type { Conversation } from "../types";
+
+export interface ConversationGroupProps {
+  label: string;
+  conversations: Conversation[];
+  activeConversationId?: string;
+  editingId: string | null;
+  editValue: string;
+  timezone: string;
+  onSelect: (conversationId: string) => void;
+  onRenameStart: (conversation: Conversation) => void;
+  onRenameSubmit: (conversationId: string) => void;
+  onRenameCancel: () => void;
+  onEditValueChange: (value: string) => void;
+  onRename?: (conversationId: string, newTitle: string) => Promise<void>;
+  onDelete?: (conversationId: string) => Promise<void>;
+  onArchive?: (conversationId: string) => Promise<void>;
+  onUnarchive?: (conversationId: string) => Promise<void>;
+  isLoading?: Record<string, boolean>;
+}
+
+export function ConversationGroup({
+  label,
+  conversations,
+  activeConversationId,
+  editingId,
+  editValue,
+  timezone,
+  onSelect,
+  onRenameStart,
+  onRenameSubmit,
+  onRenameCancel,
+  onEditValueChange,
+  onRename,
+  onDelete,
+  onArchive,
+  onUnarchive,
+  isLoading = {},
+}: ConversationGroupProps) {
+  return (
+    <div>
+      <div className="sticky top-0 z-10 bg-card pb-2">
+        <h3 className="font-medium text-muted-foreground text-xs uppercase tracking-wider">
+          {label}
+        </h3>
+      </div>
+      <div className="flex flex-col gap-1" role="list">
+        {conversations.map((conversation) => {
+          const isActive = conversation.id === activeConversationId;
+          const isEditing = editingId === conversation.id;
+
+          return (
+            <ConversationItem
+              conversation={conversation}
+              editValue={editValue}
+              isActive={isActive}
+              isEditing={isEditing}
+              isLoading={isLoading[conversation.id]}
+              key={conversation.id}
+              onArchive={onArchive}
+              onDelete={onDelete}
+              onEditValueChange={onEditValueChange}
+              onRename={onRename}
+              onRenameCancel={onRenameCancel}
+              onRenameStart={() => onRenameStart(conversation)}
+              onRenameSubmit={() => onRenameSubmit(conversation.id)}
+              onSelect={() => onSelect(conversation.id)}
+              onUnarchive={onUnarchive}
+              timezone={timezone}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/components/chat/ai-chat-history/components/conversation-header.tsx

@@ -0,0 +1,59 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+"use client";
+
+import { Plus } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { Button } from "@/components/ui/button";
+import { CardDescription, CardTitle } from "@/components/ui/card";
+
+export interface ConversationHeaderProps {
+  conversationsCount: number;
+  showNewButton: boolean;
+  onNewConversation?: () => void;
+}
+
+export function ConversationHeader({
+  conversationsCount,
+  showNewButton,
+  onNewConversation,
+}: ConversationHeaderProps) {
+  const { t } = useTranslation('chat');
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-wrap items-center justify-between gap-6">
+        <div className="flex min-w-0 flex-1 flex-col gap-2">
+          <CardTitle>{t('history.title')}</CardTitle>
+          <CardDescription>
+            {t('history.conversationCount', { count: conversationsCount })}
+          </CardDescription>
+        </div>
+        {showNewButton && onNewConversation && (
+          <Button
+            className="min-h-[44px] w-full shrink-0 sm:min-h-[24px]"
+            onClick={onNewConversation}
+            type="button"
+          >
+            <Plus className="size-4" />
+            <span className="whitespace-nowrap">{t('newConversation')}</span>
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/chat/ai-chat-history/components/conversation-item.tsx

@@ -0,0 +1,282 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+"use client";
+
+import {
+  Archive,
+  Loader2,
+  MoreVertical,
+  Pencil,
+  Trash2,
+} from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { cn } from "@/lib/utils";
+import { formatChatDate } from "@/lib/datetime";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import type { Conversation } from "../types";
+
+export interface ConversationItemProps {
+  conversation: Conversation;
+  isActive: boolean;
+  isEditing: boolean;
+  editValue: string;
+  timezone: string;
+  onSelect: () => void;
+  onRenameStart: () => void;
+  onRenameSubmit: () => void;
+  onRenameCancel: () => void;
+  onEditValueChange: (value: string) => void;
+  onRename?: (conversationId: string, newTitle: string) => Promise<void>;
+  onDelete?: (conversationId: string) => Promise<void>;
+  onArchive?: (conversationId: string) => Promise<void>;
+  onUnarchive?: (conversationId: string) => Promise<void>;
+  isLoading?: boolean;
+}
+
+export function ConversationItem({
+  conversation,
+  isActive,
+  isEditing,
+  editValue,
+  timezone,
+  onSelect,
+  onRenameStart,
+  onRenameSubmit,
+  onRenameCancel,
+  onEditValueChange,
+  onRename,
+  onDelete,
+  onArchive,
+  onUnarchive,
+  isLoading = false,
+}: ConversationItemProps) {
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const { t } = useTranslation('chat');
+
+  useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditing]);
+
+  const handleDelete = useCallback(async () => {
+    if (!onDelete) return;
+    setIsDeleting(true);
+    try {
+      await onDelete(conversation.id);
+      setShowDeleteDialog(false);
+    } catch (error) {
+      console.error("Failed to delete conversation:", error);
+    } finally {
+      setIsDeleting(false);
+    }
+  }, [conversation.id, onDelete]);
+
+  return (
+    <>
+      <div
+        className={cn(
+          "group relative flex flex-col gap-2 rounded-lg border p-3 transition-colors",
+          "min-h-[60px] touch-manipulation [-webkit-tap-highlight-color:transparent]",
+          isActive
+            ? "border-primary bg-primary/5 shadow-xs"
+            : "border-transparent bg-card focus-within:border-border focus-within:bg-muted/50 hover:border-border hover:bg-muted/50",
+          isLoading && "pointer-events-none opacity-50"
+        )}
+        role="listitem"
+      >
+        <div className="flex items-start gap-3">
+          <button
+            aria-label={t('history.selectConversation', { title: conversation.title })}
+            className="flex min-h-[44px] min-w-0 flex-1 flex-col gap-1 rounded-sm text-left [-webkit-tap-highlight-color:transparent] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:min-h-[24px]"
+            disabled={isLoading}
+            onClick={onSelect}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onSelect();
+              }
+            }}
+            type="button"
+          >
+            {isEditing ? (
+              <input
+                aria-label={t('history.editTitle')}
+                className="min-h-[44px] w-full rounded-md border bg-background px-2 py-1.5 text-base focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 sm:min-h-[24px] sm:text-sm"
+                onBlur={onRenameSubmit}
+                onChange={(e) => onEditValueChange(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    onRenameSubmit();
+                  } else if (e.key === "Escape") {
+                    e.preventDefault();
+                    onRenameCancel();
+                  }
+                }}
+                ref={inputRef}
+                value={editValue}
+              />
+            ) : (
+              <>
+                <div className="flex flex-wrap items-center gap-2">
+                  <h4 className="wrap-break-word min-w-0 font-medium text-sm">
+                    {conversation.title}
+                  </h4>
+                </div>
+                {conversation.lastMessage && (
+                  <p className="wrap-break-word line-clamp-2 min-w-0 text-muted-foreground text-xs">
+                    {conversation.lastMessage}
+                  </p>
+                )}
+                <div className="flex flex-wrap items-center gap-2 text-muted-foreground text-xs">
+                  {conversation.lastMessageAt && (
+                    <span className="whitespace-nowrap tabular-nums">
+                      {formatChatDate(conversation.lastMessageAt, timezone)}
+                    </span>
+                  )}
+                  {conversation.messageCount !== undefined && (
+                    <>
+                      <span aria-hidden="true" className="shrink-0">
+                        •
+                      </span>
+                      <span className="whitespace-nowrap tabular-nums">
+                        {t('history.messageCount', { count: conversation.messageCount })}
+                      </span>
+                    </>
+                  )}
+                </div>
+              </>
+            )}
+          </button>
+          {!isEditing && (
+            <div className="absolute top-2 right-2 z-10">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    aria-label={t('history.moreActions', { title: conversation.title })}
+                    className="min-h-[44px] min-w-[44px] shrink-0 text-muted-foreground transition-opacity [-webkit-tap-highlight-color:transparent] hover:text-foreground group-hover:opacity-100 sm:min-h-[24px] sm:min-w-[24px]"
+                    disabled={isLoading}
+                    size="icon"
+                    type="button"
+                    variant="ghost"
+                  >
+                    <MoreVertical className="size-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  {onRename && (
+                    <DropdownMenuItem
+                      disabled={isLoading}
+                      onClick={onRenameStart}
+                    >
+                      <Pencil className="size-4" />
+                      {t('history.rename')}
+                    </DropdownMenuItem>
+                  )}
+                  <DropdownMenuSeparator />
+                  {conversation.isArchived
+                    ? onUnarchive && (
+                        <DropdownMenuItem
+                          disabled={isLoading}
+                          onClick={() => onUnarchive(conversation.id)}
+                        >
+                          <Archive className="size-4" />
+                          {t('history.unarchive')}
+                        </DropdownMenuItem>
+                      )
+                    : onArchive && (
+                        <DropdownMenuItem
+                          disabled={isLoading}
+                          onClick={() => onArchive(conversation.id)}
+                        >
+                          <Archive className="size-4" />
+                          {t('history.archive')}
+                        </DropdownMenuItem>
+                      )}
+                  {onDelete && (
+                    <>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem
+                        disabled={isLoading}
+                        onClick={() => setShowDeleteDialog(true)}
+                        variant="destructive"
+                      >
+                        <Trash2 className="size-4" />
+                        {t('common:button.delete')}
+                      </DropdownMenuItem>
+                    </>
+                  )}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <AlertDialog onOpenChange={setShowDeleteDialog} open={showDeleteDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t('history.deleteTitle')}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t('history.deleteDescription', { title: conversation.title })}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isDeleting}>{t('common:button.cancel')}</AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40"
+              disabled={isDeleting}
+              onClick={handleDelete}
+            >
+              {isDeleting ? (
+                <>
+                  <Loader2 className="size-4 animate-spin" />
+                  {t('common:status.deleting')}
+                </>
+              ) : (
+                t('common:button.delete')
+              )}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}

package/src/components/chat/ai-chat-history/components/conversation-search.tsx

@@ -0,0 +1,65 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+"use client";
+
+import { Search } from "lucide-react";
+import { useRef } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/components/ui/input-group";
+
+export interface ConversationSearchProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+}
+
+export function ConversationSearch({
+  value,
+  onChange,
+  placeholder,
+}: ConversationSearchProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const { t } = useTranslation('chat');
+  const effectivePlaceholder = placeholder ?? t('history.searchPlaceholder');
+
+  return (
+    <InputGroup>
+      <InputGroupAddon>
+        <Search className="size-4" />
+      </InputGroupAddon>
+      <InputGroupInput
+        aria-label={t('history.searchAriaLabel')}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Escape") {
+            onChange("");
+            inputRef.current?.blur();
+          }
+        }}
+        placeholder={effectivePlaceholder}
+        ref={inputRef}
+        type="search"
+        value={value}
+      />
+    </InputGroup>
+  );
+}