@allbluecn/web-app 0.5.0 → 0.5.1

package/src/components/story/relations/format.ts

@@ -0,0 +1,120 @@
+// 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 {
+  BookOpen,
+  File,
+  FileArchive,
+  FileText,
+  Film,
+  FolderArchive,
+  Image as ImageIcon,
+  Music,
+  type LucideIcon,
+} from "lucide-react";
+
+export function formatFileSize(bytes: number): string {
+  if (bytes === 0) return "0 B";
+  const units = ["B", "KB", "MB", "GB"];
+  const i = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+  return `${(bytes / Math.pow(1024, i)).toFixed(i === 0 ? 0 : 1)} ${units[i]}`;
+}
+
+/** mimeType → 文件类型图标（弹窗列表与合并面板卡片共用） */
+export function getFileTypeIcon(mimeType: string, fileName?: string): LucideIcon {
+  const effective = inferMimeType(fileName ?? "", mimeType);
+  if (effective.startsWith("image/")) return ImageIcon;
+  if (effective.startsWith("video/")) return Film;
+  if (effective.startsWith("audio/")) return Music;
+  if (effective === "application/pdf") return FileText;
+  if (isEbookMimeType(effective)) return BookOpen;
+  if (effective.includes("zip") || effective.includes("rar") || effective.includes("7z")) {
+    return FileArchive;
+  }
+  if (effective.includes("tar") || effective.includes("gz")) return FolderArchive;
+  if (effective.startsWith("text/") || effective.includes("json")) return FileText;
+  return File;
+}
+
+/** 判断是否为电子书 MIME 类型 */
+export function isEbookMimeType(mimeType: string): boolean {
+  return (
+    mimeType === "application/epub+zip" ||
+    mimeType === "application/epub" ||
+    mimeType === "application/x-mobipocket-ebook" ||
+    mimeType === "application/vnd.amazon.epub"
+  );
+}
+
+/** mimeType → 文件类型标签（中文，用于附件列表展示） */
+export function getMimeTypeLabel(mimeType: string, fileName?: string): string {
+  const effective = inferMimeType(fileName ?? "", mimeType);
+  if (effective.startsWith("image/")) return "图片";
+  if (effective.startsWith("video/")) return "视频";
+  if (effective.startsWith("audio/")) return "音频";
+  if (effective === "application/pdf") return "PDF";
+  if (isEbookMimeType(effective)) return "电子书";
+  if (effective.includes("zip") || effective.includes("rar") || effective.includes("7z")) return "压缩包";
+  if (effective.includes("tar") || effective.includes("gz")) return "压缩包";
+  if (effective.startsWith("text/") || effective.includes("json")) return "文本";
+  if (effective.includes("word") || effective.includes("document")) return "Word";
+  if (effective.includes("sheet") || effective.includes("excel") || effective.includes("spreadsheet")) return "表格";
+  if (effective.includes("presentation") || effective.includes("powerpoint")) return "演示";
+  return "未识别文件";
+}
+
+/** 扩展名 → MIME 类型映射（补充浏览器无法识别的格式） */
+const EXTENSION_MIME_MAP: Record<string, string> = {
+  ".epub": "application/epub+zip",
+  ".mobi": "application/x-mobipocket-ebook",
+  ".azw3": "application/vnd.amazon.epub",
+};
+
+/** 根据文件名推断 MIME 类型（浏览器缺失时兜底） */
+export function inferMimeType(fileName: string, fileMimeType: string): string {
+  if (fileMimeType && !fileMimeType.startsWith("application/octet-stream")) {
+    return fileMimeType;
+  }
+  const ext = fileName.slice(fileName.toLowerCase().lastIndexOf(".")).toLowerCase();
+  return EXTENSION_MIME_MAP[ext] ?? fileMimeType;
+}
+
+/** 链接 favicon URL（Google 服务，失败时 UI 回退 Link 图标） */
+export function getFaviconUrl(url: string): string | null {
+  try {
+    const host = new URL(url).hostname;
+    return `https://www.google.com/s2/favicons?domain=${encodeURIComponent(host)}&sz=32`;
+  } catch {
+    return null;
+  }
+}
+
+/** 从 URL 自动提取标题（用于用户未填写链接标题时的兜底显示） */
+export function extractLinkTitle(url: string): string {
+  try {
+    const { hostname, pathname } = new URL(url);
+    const cleanHost = hostname.replace(/^www\./, "");
+    if (!pathname || pathname === "/" || pathname === "") return cleanHost;
+    // 取最后一段路径作为标题，去除扩展名
+    const segments = pathname.split("/").filter(Boolean);
+    const last = segments[segments.length - 1] ?? "";
+    const name = last.replace(/\.\w+$/, "").replace(/[-_]/g, " ");
+    return name || cleanHost;
+  } catch {
+    return url;
+  }
+}

package/src/components/story/relations/general-groups.ts

@@ -0,0 +1,32 @@
+// 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 type { TFunction } from "i18next";
+
+const GROUP_I18N_KEYS: Record<string, string> = {
+  legal: "knowledgeDialog.groupLegal",
+  compliance: "knowledgeDialog.groupCompliance",
+  dictionary: "knowledgeDialog.groupDictionary",
+  bookmark: "knowledgeDialog.groupBookmark",
+  summary: "knowledgeDialog.groupSummary",
+};
+
+/** 通用知识库分组 key → i18n 标签（未知 key 原样返回） */
+export function generalGroupLabel(t: TFunction, group: string): string {
+  const key = GROUP_I18N_KEYS[group];
+  return key ? t(key) : group;
+}

package/src/components/story/relations/knowledge-select-dialog.tsx

@@ -0,0 +1,403 @@
+// 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 * as React from "react";
+import { useTranslation } from "react-i18next";
+import { useServerFn } from "@tanstack/react-start";
+import { toast } from "sonner";
+import { BookMarked, BookOpenText, Bookmark, Check, ChevronsUpDown, Scale, ShieldCheck, Sprout } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useDebouncedCallback, SEARCH_DEBOUNCE_MS } from "@/lib/pacer";
+import {
+  listStoryAvailableKbsFn,
+  searchKbDocsFn,
+  linkDocsFn,
+  unlinkDocFn,
+  type SearchDocRow,
+} from "@/server/serverFns/story";
+import { generalGroupLabel } from "./general-groups";
+import type { DocBrief } from "../types";
+
+interface KbBrief {
+  id: string;
+  name: string;
+  icon: string;
+  visibility: string;
+}
+
+type KbFilter = { type: "kb"; id: string } | { type: "general"; group: string } | null;
+
+const GENERAL_GROUP_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
+  legal: Scale,
+  compliance: ShieldCheck,
+  dictionary: BookMarked,
+  bookmark: Bookmark,
+  summary: Sprout,
+};
+
+const GENERAL_GROUP_META = [
+  { key: "legal" },
+  { key: "compliance" },
+  { key: "dictionary" },
+  { key: "bookmark" },
+  { key: "summary" },
+] as const;
+
+export interface KnowledgeSelectDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  storyId: string;
+  linkedDocs: DocBrief[];
+  onUpdate: (docs: DocBrief[]) => void;
+  /** 关联知识库文档产生的活动，供时间线即时追加 */
+  onActivity?: (activity: import("../types").ActivityItem) => void;
+}
+
+export function KnowledgeSelectDialog({
+  open,
+  onOpenChange,
+  storyId,
+  linkedDocs,
+  onUpdate,
+  onActivity,
+}: KnowledgeSelectDialogProps) {
+  const { t } = useTranslation("story");
+  const listKbs = useServerFn(listStoryAvailableKbsFn);
+  const searchDocs = useServerFn(searchKbDocsFn);
+  const linkDocs = useServerFn(linkDocsFn);
+  const unlinkDoc = useServerFn(unlinkDocFn);
+
+  const [kbs, setKbs] = React.useState<KbBrief[]>([]);
+  const [kbFilter, setKbFilter] = React.useState<KbFilter>(null);
+  const [items, setItems] = React.useState<SearchDocRow[]>([]);
+  const [search, setSearch] = React.useState("");
+  const [selected, setSelected] = React.useState<Set<string>>(new Set());
+  const [loading, setLoading] = React.useState(false);
+  const [submitting, setSubmitting] = React.useState(false);
+  const [kbPopoverOpen, setKbPopoverOpen] = React.useState(false);
+
+  const linkedIds = React.useMemo(() => new Set(linkedDocs.map((d) => d.id)), [linkedDocs]);
+
+  const loadDocs = React.useCallback(
+    async (filter: KbFilter, query: string) => {
+      setLoading(true);
+      try {
+        const res = await searchDocs({
+          data: {
+            storyId,
+            kbId: filter?.type === "kb" ? filter.id : undefined,
+            generalGroup: filter?.type === "general" ? (filter.group as never) : undefined,
+            query,
+          },
+        });
+        setItems(res.items as SearchDocRow[]);
+      } catch (err) {
+        toast.error((err as Error)?.message || t("knowledgeDialog.linkFailed"));
+        setItems([]);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [searchDocs, storyId, t],
+  );
+
+  React.useEffect(() => {
+    if (!open) return;
+    setSelected(new Set(linkedIds));
+    setSearch("");
+    setKbFilter(null);
+    void (async () => {
+      try {
+        const list = await listKbs({ data: { storyId } });
+        setKbs(list);
+      } catch {
+        setKbs([]);
+      }
+    })();
+    void loadDocs(null, "");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  const debouncedSearch = useDebouncedCallback(
+    (q: string) => {
+      void loadDocs(kbFilter, q);
+    },
+    { wait: SEARCH_DEBOUNCE_MS },
+  );
+
+  const handleSearch = (q: string) => {
+    setSearch(q);
+    debouncedSearch(q);
+  };
+
+  const handleKbSelect = (filter: KbFilter) => {
+    setKbFilter(filter);
+    setKbPopoverOpen(false);
+    void loadDocs(filter, search);
+  };
+
+  const toggle = (id: string) => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  // 全选/部分选状态（仅针对当前列表内的条目）
+  const listedIds = React.useMemo(() => items.map((d) => d.id), [items]);
+  const selectedListedCount = React.useMemo(
+    () => listedIds.filter((id) => selected.has(id)).length,
+    [listedIds, selected],
+  );
+  const allSelected = listedIds.length > 0 && selectedListedCount === listedIds.length;
+  const someSelected = selectedListedCount > 0 && !allSelected;
+  const toggleSelectAll = () => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (allSelected) {
+        for (const id of listedIds) next.delete(id);
+      } else {
+        for (const id of listedIds) next.add(id);
+      }
+      return next;
+    });
+  };
+
+  const childrenOf = React.useMemo(() => {
+    const map = new Map<string | null, SearchDocRow[]>();
+    for (const row of items) {
+      const key = row.parentId ?? null;
+      const arr = map.get(key) ?? [];
+      arr.push(row);
+      map.set(key, arr);
+    }
+    return map;
+  }, [items]);
+
+  const renderRows = (parentId: string | null, depth: number): React.ReactNode[] => {
+    const rows = childrenOf.get(parentId) ?? [];
+    const out: React.ReactNode[] = [];
+    for (const row of rows) {
+      const isGeneral = row.kbId.startsWith("ext:");
+      out.push(
+        <div
+          key={row.id}
+          role="button"
+          tabIndex={0}
+          aria-pressed={selected.has(row.id)}
+          onClick={() => toggle(row.id)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              toggle(row.id);
+            }
+          }}
+          className="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 hover:bg-muted/50"
+          style={{ paddingLeft: `${8 + depth * 20}px` }}
+        >
+          <Checkbox
+            checked={selected.has(row.id)}
+            onCheckedChange={() => toggle(row.id)}
+            onClick={(e) => e.stopPropagation()}
+            aria-label={row.title}
+            className="shrink-0"
+          />
+          <BookOpenText className="size-3.5 shrink-0 text-muted-foreground" />
+          <span className="min-w-0 flex-1 truncate text-sm">{row.title}</span>
+          {kbFilter === null && (
+            <span className="shrink-0 text-xs text-muted-foreground">
+              {isGeneral ? generalGroupLabel(t, row.kbName) : row.kbName}
+            </span>
+          )}
+          {linkedIds.has(row.id) && (
+            <Badge variant="secondary" className="shrink-0 text-[10px]">
+              {t("knowledgeDialog.linked")}
+            </Badge>
+          )}
+        </div>,
+      );
+      out.push(...renderRows(row.id, depth + 1));
+    }
+    return out;
+  };
+
+  const handleConfirm = async () => {
+    if (submitting) return;
+    setSubmitting(true);
+    try {
+      const toAdd = [...selected].filter((id) => !linkedIds.has(id));
+      const toRemove = [...linkedIds].filter((id) => !selected.has(id));
+
+      let nextDocs = linkedDocs;
+      if (toRemove.length > 0) {
+        for (const docId of toRemove) {
+          await unlinkDoc({ data: { storyId, docId } });
+        }
+        nextDocs = nextDocs.filter((d) => !toRemove.includes(d.id));
+      }
+      if (toAdd.length > 0) {
+        const res = await linkDocs({ data: { storyId, docIds: toAdd } });
+        if (res.failed.length > 0) {
+          toast.warning(t("knowledgeDialog.partialFailed", { count: res.failed.length }));
+        }
+        if (res.activity) onActivity?.(res.activity);
+        const addedIds = new Set(res.linked);
+        nextDocs = [
+          ...nextDocs,
+          ...items.filter((d) => addedIds.has(d.id)).map((d) => ({ id: d.id, title: d.title, kbId: d.kbId, kbName: d.kbName, kbIcon: d.kbIcon, docIcon: d.docIcon, parentId: d.parentId })),
+        ];
+      }      onUpdate(nextDocs);
+      onOpenChange(false);
+    } catch (err) {
+      toast.error((err as Error)?.message || t("knowledgeDialog.linkFailed"));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const activeKb = kbFilter?.type === "kb" ? kbs.find((k) => k.id === kbFilter.id) : undefined;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-260 -mt-50">
+        <DialogHeader>
+          <DialogTitle>{t("knowledgeDialog.title")}</DialogTitle>
+        </DialogHeader>
+
+        <div className="flex items-center gap-2">
+          <Input
+            placeholder={t("knowledgeDialog.searchPlaceholder")}
+            value={search}
+            onChange={(e) => handleSearch(e.target.value)}
+            className="h-8"
+          />
+          <Popover open={kbPopoverOpen} onOpenChange={setKbPopoverOpen}>
+            <PopoverTrigger asChild>
+              <Button variant="outline" size="sm" className="h-8 shrink-0 gap-1">
+                <BookOpenText className="size-3.5" />
+                {activeKb
+                  ? activeKb.name
+                  : kbFilter?.type === "general"
+                    ? generalGroupLabel(t, kbFilter.group)
+                    : t("knowledgeDialog.allKbs")}
+                <ChevronsUpDown className="size-3.5 opacity-50" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent align="end" className="w-60 p-1">
+              <button
+                type="button"
+                className="flex w-full items-center justify-between rounded-sm px-2 py-1.5 mt-1 text-sm hover:bg-muted"
+                onClick={() => handleKbSelect(null)}
+              >
+                {t("knowledgeDialog.allKbs")}
+                {kbFilter === null && <Check className="size-3.5" />}
+              </button>
+              <div className="border-t px-2 pt-3 text-xs font-medium text-muted-foreground">
+                {t("knowledgeDialog.userKbs")}
+              </div>
+              {kbs.map((kb) => (
+                <button
+                  key={kb.id}
+                  type="button"
+                  className="flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-sm hover:bg-muted"
+                  onClick={() => handleKbSelect({ type: "kb", id: kb.id })}
+                >
+                  <span className="truncate">{kb.name}</span>
+                  {kbFilter?.type === "kb" && kbFilter.id === kb.id && <Check className="size-3.5" />}
+                </button>
+              ))}
+              <div className=" border-t px-2 pt-3 text-xs font-medium text-muted-foreground">
+                {t("knowledgeDialog.generalKbs")}
+              </div>
+              {GENERAL_GROUP_META.map((group) => {
+                const Icon = GENERAL_GROUP_ICONS[group.key];
+                return (
+                  <button
+                    key={group.key}
+                    type="button"
+                    className="flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-sm hover:bg-muted"
+                    onClick={() => handleKbSelect({ type: "general", group: group.key })}
+                  >
+                    <span className="flex min-w-0 items-center gap-2">
+                      <Icon className="size-3.5 shrink-0 text-muted-foreground" />
+                      <span className="truncate">{generalGroupLabel(t, group.key)}</span>
+                    </span>
+                    {kbFilter?.type === "general" && kbFilter.group === group.key && <Check className="size-3.5" />}
+                  </button>
+                );
+              })}
+            </PopoverContent>
+          </Popover>
+        </div>
+
+        <div className="h-80 overflow-y-auto rounded-md border p-1">
+          {loading ? (
+            <div className="flex h-full items-center justify-center text-sm text-muted-foreground">…</div>
+          ) : items.length > 0 ? (
+            renderRows(null, 0)
+          ) : (
+            <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
+              {t("knowledgeDialog.empty")}
+            </div>
+          )}
+        </div>
+
+        <DialogFooter className="items-center justify-between gap-2 sm:justify-between">
+          <div className="flex items-center gap-2 ml-3">
+            <Checkbox
+              id="kb-select-all"
+              checked={allSelected ? true : someSelected ? "indeterminate" : false}
+              onCheckedChange={toggleSelectAll}
+              disabled={listedIds.length === 0}
+              aria-label={t("knowledgeDialog.selectAll")}
+            />
+            <label
+              htmlFor="kb-select-all"
+              className="cursor-pointer text-xs text-muted-foreground select-none"
+            >
+              {t("knowledgeDialog.selectAll")}
+            </label>
+            <span className="text-xs text-muted-foreground">
+              {t("knowledgeDialog.selectedCount", { count: selected.size })}
+            </span>
+          </div>
+          <div className="flex gap-2">
+            <Button variant="outline" onClick={() => onOpenChange(false)}>
+              {t("knowledgeDialog.cancel")}
+            </Button>
+            <Button onClick={handleConfirm} disabled={submitting}>
+              {t("knowledgeDialog.confirm")}
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}