@allbluecn/web-app 0.4.22 → 0.5.1

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>
+  );
+}

package/src/components/story/relations/link-manage-dialog.tsx

@@ -0,0 +1,191 @@
+// 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 { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { addLinkFn, updateLinkFn } from "@/server/serverFns/story";
+import type { StoryLinkItem } from "../types";
+
+export interface LinkManageDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  storyId: string;
+  data: StoryLinkItem[];
+  onUpdate: (links: StoryLinkItem[]) => void;
+  /** 添加链接产生的活动，供时间线即时追加 */
+  onActivity?: (activity: import("../types").ActivityItem) => void;
+  /** 非空时进入编辑态（由合并面板「编辑」触发） */
+  initialEdit?: StoryLinkItem | null;
+}
+
+export function LinkManageDialog({
+  open,
+  onOpenChange,
+  storyId,
+  data,
+  onUpdate,
+  onActivity,
+  initialEdit = null,
+}: LinkManageDialogProps) {
+  const { t } = useTranslation("story");
+  const addLink = useServerFn(addLinkFn);
+  const updateLink = useServerFn(updateLinkFn);
+  const [editing, setEditing] = React.useState<StoryLinkItem | null>(null);
+  const [form, setForm] = React.useState({ url: "", title: "", description: "" });
+  const [submitting, setSubmitting] = React.useState(false);
+
+  React.useEffect(() => {
+    if (open) {
+      setEditing(initialEdit);
+      setForm(
+        initialEdit
+          ? { url: initialEdit.url, title: initialEdit.title ?? "", description: initialEdit.description ?? "" }
+          : { url: "", title: "", description: "" },
+      );
+    }
+  }, [open, initialEdit]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (submitting) return;
+    setSubmitting(true);
+    try {
+      if (editing) {
+        await updateLink({
+          data: {
+            linkId: editing.id,
+            url: form.url,
+            title: form.title || undefined,
+            description: form.description || undefined,
+          },
+        });
+        toast.success(t("linkDialog.updated"));
+        onUpdate(
+          data.map((l) =>
+            l.id === editing.id
+              ? { ...l, url: form.url, title: form.title || null, description: form.description || null }
+              : l,
+          ),
+        );
+      } else {
+        const created = await addLink({
+          data: {
+            storyId,
+            url: form.url,
+            title: form.title || undefined,
+            description: form.description || undefined,
+          },
+        });
+        toast.success(t("linkDialog.added"));
+        if (created.activity) onActivity?.(created.activity);
+        onUpdate([
+          ...data,
+          {
+            id: created.id,
+            url: created.url,
+            title: created.title,
+            description: created.description,
+          },
+        ]);
+        setForm({ url: "", title: "", description: "" });
+      }
+      setEditing(null);
+      onOpenChange(false);
+    } catch (err) {
+      toast.error((err as Error)?.message || t("linkDialog.saveFailed"));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-130">
+        <DialogHeader>
+          <DialogTitle className="text-xl">
+            {t(editing ? "linkDialog.editTitle" : "linkDialog.title")}
+          </DialogTitle>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="flex h-96 flex-col gap-4 overflow-y-auto px-1 pb-1">
+          <div className="space-y-1.5">
+            <label htmlFor="link-url" className="text-xs font-medium text-muted-foreground">
+              URL
+            </label>
+            <Input
+              id="link-url"
+              type="url"
+              required
+              placeholder={t("linkDialog.urlPlaceholder")}
+              value={form.url}
+              onChange={(e) => setForm({ ...form, url: e.target.value })}
+              className="h-10 text-base"
+            />
+          </div>
+          <div className="space-y-1.5">
+            <label htmlFor="link-title" className="text-xs font-medium text-muted-foreground">
+              {t("linkDialog.titleOptional")}
+            </label>
+            <Input
+              id="link-title"
+              placeholder={t("linkDialog.titlePlaceholder")}
+              value={form.title}
+              onChange={(e) => setForm({ ...form, title: e.target.value })}
+              className="h-10"
+            />
+          </div>
+          <div className="flex min-h-0 flex-1 flex-col gap-1.5">
+            <label htmlFor="link-desc" className="text-xs font-medium text-muted-foreground">
+              {t("linkDialog.descOptional")}
+            </label>
+            <Textarea
+              id="link-desc"
+              placeholder={t("linkDialog.descPlaceholder")}
+              value={form.description}
+              onChange={(e) => setForm({ ...form, description: e.target.value })}
+              className="min-h-20 flex-1 resize-none"
+            />
+          </div>
+          <div className="flex shrink-0 justify-end gap-2 pt-1">
+            {editing && (
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => onOpenChange(false)}
+              >
+                {t("linkDialog.cancel")}
+              </Button>
+            )}
+            <Button type="submit" disabled={submitting}>
+              {t(editing ? "linkDialog.save" : "linkDialog.add")}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}