@allbluecn/web-app 0.10.3 → 0.11.1

package/src/components/workspace/kb/workspace-kb-manage-dialog.tsx

@@ -0,0 +1,174 @@
+// 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 { useServerFn } from "@tanstack/react-start";
+import { toast } from "sonner";
+import { Check, Search } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import {
+  Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  listWorkspaceAvailableKbsFn,
+  setWorkspaceKbsFn,
+} from "@/server/serverFns/workspace-kb";
+import type { KbBrief } from "@/server/serverFns/workspace-kb-utils";
+import { m } from "@/paraglide/messages.js";
+
+interface WorkspaceKbManageDialogProps {
+  workspaceId: string;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** 全量同步成功后回传新的关联列表（父组件更新本地 state） */
+  onUpdate: (kbs: KbBrief[]) => void;
+}
+
+export function WorkspaceKbManageDialog({
+  workspaceId, open, onOpenChange, onUpdate,
+}: WorkspaceKbManageDialogProps) {
+  const listKbs = useServerFn(listWorkspaceAvailableKbsFn);
+  const setKbs = useServerFn(setWorkspaceKbsFn);
+
+  const [options, setOptions] = React.useState<
+    Array<KbBrief & { linked: boolean }>
+  >([]);
+  const [selected, setSelected] = React.useState<Set<string>>(new Set());
+  const [search, setSearch] = React.useState("");
+  const [loading, setLoading] = React.useState(false);
+  const [submitting, setSubmitting] = React.useState(false);
+
+  React.useEffect(() => {
+    if (!open) return;
+    setSearch("");
+    setLoading(true);
+    void (async () => {
+      try {
+        const list = await listKbs({ data: { workspaceId } });
+        setOptions(list);
+        setSelected(new Set(list.filter((k) => k.linked).map((k) => k.id)));
+      } catch (err) {
+        toast.error((err as Error)?.message || m.workspace_kb_opFailed());
+        setOptions([]);
+      } finally {
+        setLoading(false);
+      }
+    })();
+  }, [open, workspaceId, listKbs]);
+
+  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 filtered = search
+    ? options.filter((k) => k.name.toLowerCase().includes(search.toLowerCase()))
+    : options;
+
+  const handleConfirm = async () => {
+    if (submitting) return;
+    setSubmitting(true);
+    try {
+      await setKbs({ data: { workspaceId, kbIds: [...selected] } });
+      const newLinked = options.filter((k) => selected.has(k.id));
+      onUpdate(newLinked.map(({ linked: _linked, ...brief }) => brief));
+      onOpenChange(false);
+    } catch (err) {
+      toast.error((err as Error)?.message || m.workspace_kb_opFailed());
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-96 -mt-50">
+        <DialogHeader>
+          <DialogTitle>{m.workspace_kb_manageTitle()}</DialogTitle>
+        </DialogHeader>
+
+        <div className="relative">
+          <Search className="absolute top-2.5 left-2.5 size-4 text-muted-foreground" />
+          <Input
+            placeholder={m.workspace_kb_manageSearchPlaceholder()}
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="h-8 pl-8"
+          />
+        </div>
+
+        <div className="h-72 overflow-y-auto rounded-md border p-1">
+          {loading ? (
+            <div className="flex h-full items-center justify-center text-sm text-muted-foreground">…</div>
+          ) : filtered.length > 0 ? (
+            filtered.map((kb) => (
+              <div
+                key={kb.id}
+                role="button"
+                tabIndex={0}
+                aria-pressed={selected.has(kb.id)}
+                onClick={() => toggle(kb.id)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    toggle(kb.id);
+                  }
+                }}
+                className="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 hover:bg-muted/50"
+              >
+                <Checkbox
+                  checked={selected.has(kb.id)}
+                  onCheckedChange={() => toggle(kb.id)}
+                  onClick={(e) => e.stopPropagation()}
+                  aria-label={kb.name}
+                  className="shrink-0"
+                />
+                <span className="min-w-0 flex-1 truncate text-sm">{kb.name}</span>
+                {kb.linked && (
+                  <Badge variant="secondary" className="shrink-0 text-[10px]">
+                    {m.workspace_kb_linked()}
+                  </Badge>
+                )}
+              </div>
+            ))
+          ) : (
+            <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
+              {m.workspace_kb_manageEmpty()}
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            {m.workspace_kb_cancel()}
+          </Button>
+          <Button onClick={handleConfirm} disabled={submitting}>
+            <Check className="size-4" />
+            {m.workspace_kb_confirm()}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/workspace/kb/workspace-quick-doc-dialog.tsx

@@ -0,0 +1,431 @@
+// 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 { useServerFn } from "@tanstack/react-start";
+import { toast } from "sonner";
+import { BookOpenText, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import {
+  Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle,
+} from "@/components/ui/dialog";
+import { KbFilterPopover, type KbFilter } from "@/components/knowledge/kb-filter-popover";
+import { generalGroupLabel } from "@/components/knowledge/general-groups";
+import { LucideIconByName } from "@/components/shared-kit/icons/lucide-icon-picker/lucide-icon-by-name";
+import { LucideIconPicker } from "@/components/shared-kit/icons/lucide-icon-picker";
+import { useDebouncedCallback, SEARCH_DEBOUNCE_MS } from "@/lib/pacer";
+import {
+  searchQuickDocCandidatesFn,
+  addQuickDocsFn,
+  listWorkspaceAvailableKbsFn,
+  getWorkspaceKbCardFn,
+} from "@/server/serverFns/workspace-kb";
+import {
+  GENERAL_GROUP_DEFAULT_LABEL,
+  LABEL_COLORS,
+  QUICK_DOC_LABELS,
+  type QuickDocItem,
+  type QuickDocLabel,
+} from "@/server/serverFns/workspace-kb-utils";
+import type { QuickDocRow } from "@/server/serverFns/workspace-kb-utils";
+import type { SearchDocRow } from "@/server/serverFns/kb-doc-search";
+import { m } from "@/paraglide/messages.js";
+import { t } from "@/lib/i18n/resolver";
+
+type CandidateRow = SearchDocRow;
+
+interface WorkspaceQuickDocDialogProps {
+  workspaceId: string;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onAdded: () => void;
+}
+
+export function WorkspaceQuickDocDialog({
+  workspaceId, open, onOpenChange, onAdded,
+}: WorkspaceQuickDocDialogProps) {
+  const searchDocs = useServerFn(searchQuickDocCandidatesFn);
+  const addDocs = useServerFn(addQuickDocsFn);
+  const listKbs = useServerFn(listWorkspaceAvailableKbsFn);
+  const getCard = useServerFn(getWorkspaceKbCardFn);
+  const existingRef = React.useRef<Map<string, { displayTitle: string; label: string | null; icon: string | null }>>(new Map());
+
+  const [kbs, setKbs] = React.useState<Array<{ id: string; name: string; icon?: string | null }>>([]);
+  const [filter, setFilter] = React.useState<KbFilter>(null);
+  const [items, setItems] = React.useState<CandidateRow[]>([]);
+  const [search, setSearch] = React.useState("");
+  const [loading, setLoading] = React.useState(false);
+  const [submitting, setSubmitting] = React.useState(false);
+  const [selectedRows, setSelectedRows] = React.useState<Map<string, CandidateRow>>(new Map());
+  const [titles, setTitles] = React.useState<Map<string, string>>(new Map());
+  const [labels, setLabels] = React.useState<Map<string, QuickDocLabel | "">>(new Map());
+  const [icons, setIcons] = React.useState<Map<string, string>>(new Map());
+
+  const loadDocs = React.useCallback(
+    async (f: KbFilter, query: string) => {
+      setLoading(true);
+      try {
+        const res = await searchDocs({
+          data: {
+            workspaceId,
+            kbId: f?.type === "kb" ? f.id : undefined,
+            generalGroup: f?.type === "general" ? (f.group as never) : undefined,
+            query,
+          },
+        });
+        setItems(res.items as CandidateRow[]);
+      } catch (err) {
+        toast.error((err as Error)?.message || m.workspace_kb_opFailed());
+        setItems([]);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [searchDocs, workspaceId],
+  );
+
+  React.useEffect(() => {
+    if (!open) return;
+    setSelectedRows(new Map());
+    setTitles(new Map());
+    setLabels(new Map());
+    setIcons(new Map());
+    setSearch("");
+    setFilter(null);
+    void (async () => {
+      // 先拉回显数据源（当前卡片已有的快捷文档），再加载候选列表，保证勾选回显生效
+      try {
+        const card = await getCard({ data: { workspaceId } });
+        const selected = new Map<string, CandidateRow>();
+        const titles = new Map<string, string>();
+        const labels = new Map<string, QuickDocLabel | "">();
+        const icons = new Map<string, string>();
+        for (const q of card.quickDocs) {
+          const key = q.docId ?? `ext:${q.group}:${q.externalId}`;
+          existingRef.current.set(key, { displayTitle: q.displayTitle, label: q.label, icon: q.icon });
+          // 全量回显：已有文档构造为候选行注入勾选（不受搜索/筛选结果限制）
+          selected.set(key, {
+            id: key,
+            title: q.sourceTitle ?? q.displayTitle,
+            kbId: q.kbId ?? (q.group ? `ext:${q.group}` : ""),
+            kbName: q.kbName ?? (q.group ? generalGroupLabel(q.group) : ""),
+            kbIcon: "",
+            docIcon: q.docIcon,
+            parentId: null,
+          } as unknown as CandidateRow);
+          titles.set(key, q.displayTitle);
+          if (q.label) labels.set(key, q.label as QuickDocLabel);
+          if (q.icon) icons.set(key, q.icon);
+        }
+        setSelectedRows(selected);
+        setTitles(titles);
+        setLabels(labels);
+        setIcons(icons);
+      } catch {
+        existingRef.current = new Map();
+      }
+      try {
+        // 「关联知识库」组：仅本工作空间已关联的知识库
+        const list = await listKbs({ data: { workspaceId } });
+        setKbs(list.filter((k) => k.linked).map((k) => ({ id: k.id, name: k.name, icon: k.icon })));
+      } catch {
+        setKbs([]);
+      }
+      void loadDocs(null, "");
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  const debouncedSearch = useDebouncedCallback(
+    (q: string) => void loadDocs(filter, q),
+    { wait: SEARCH_DEBOUNCE_MS },
+  );
+
+  const toggle = (row: CandidateRow) => {
+    const wasSelected = selectedRows.has(row.id);
+    setSelectedRows((prev) => {
+      const next = new Map(prev);
+      if (next.has(row.id)) next.delete(row.id);
+      else next.set(row.id, row);
+      return next;
+    });
+    // 通用知识库文档勾选时自动填充默认标签（法律法规/行业合规/词典词条/网址）
+    if (!wasSelected && row.id.startsWith("ext:")) {
+      const group = row.id.split(":")[1];
+      const def = GENERAL_GROUP_DEFAULT_LABEL[group];
+      if (def) {
+        setLabels((prev) => {
+          if (prev.has(row.id)) return prev;
+          const next = new Map(prev);
+          next.set(row.id, def);
+          return next;
+        });
+      }
+    }
+  };
+
+  const childrenOf = React.useMemo(() => {
+    const map = new Map<string | null, CandidateRow[]>();
+    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:");
+      const picked = selectedRows.has(row.id);
+      out.push(
+        <div
+          key={row.id}
+          role="button"
+          tabIndex={0}
+          aria-pressed={picked}
+          onClick={() => toggle(row)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              toggle(row);
+            }
+          }}
+          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={picked} onCheckedChange={() => toggle(row)} 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>
+          {filter === null && (
+            <span className="shrink-0 text-xs text-muted-foreground">
+              {isGeneral ? generalGroupLabel(row.kbName) : row.kbName}
+            </span>
+          )}
+        </div>,
+      );
+      out.push(...renderRows(row.id, depth + 1));
+    }
+    return out;
+  };
+
+  const handleConfirm = async () => {
+    if (submitting || selectedRows.size === 0) return;
+    setSubmitting(true);
+    try {
+      const itemsToAdd: QuickDocItem[] = [...selectedRows.values()]
+        .filter((row) => !existingRef.current.has(row.id))
+        .map((row) => {
+          const displayTitle = (titles.get(row.id) ?? "").trim() || row.title;
+          const label = labels.get(row.id) || undefined;
+          const icon = icons.get(row.id) || undefined;
+          if (row.id.startsWith("ext:")) {
+            const rest = row.id.slice("ext:".length);
+            const idx = rest.indexOf(":");
+            return {
+              externalGroup: rest.slice(0, idx) as QuickDocItem["externalGroup"],
+              externalId: rest.slice(idx + 1),
+              displayTitle,
+              label,
+              icon,
+            };
+          }
+          return { docId: row.id, displayTitle, label, icon };
+        });
+      if (itemsToAdd.length === 0) {
+        onOpenChange(false);
+        return;
+      }
+      const res = await addDocs({ data: { workspaceId, items: itemsToAdd } });
+      if (res.failed.length > 0) {
+        toast.warning(m.workspace_kb_partialFailed({ count: res.failed.length }));
+      }
+      onAdded();
+      onOpenChange(false);
+    } catch (err) {
+      toast.error((err as Error)?.message || m.workspace_kb_opFailed());
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-260 -mt-50">
+        <DialogHeader>
+          <DialogTitle>{m.workspace_kb_quickDocTitle()}</DialogTitle>
+        </DialogHeader>
+
+        <KbFilterPopover
+          search={search}
+          onSearchChange={(q) => {
+            setSearch(q);
+            debouncedSearch(q);
+          }}
+          filter={filter}
+          onFilterChange={(f) => {
+            setFilter(f);
+            void loadDocs(f, search);
+          }}
+          userKbs={kbs}
+        />
+
+        <div className="h-60 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">
+              {m.workspace_kb_manageEmpty()}
+            </div>
+          )}
+        </div>
+
+        {selectedRows.size > 0 && (
+          <div className="space-y-1.5">
+            <div className="text-xs font-medium text-muted-foreground">
+              {m.workspace_kb_pickedDocs()}
+            </div>
+            <div className="grid max-h-40 grid-cols-2 gap-x-12 gap-y-1.5 overflow-y-auto">
+              {[...selectedRows.values()].map((row) => {
+                const customIcon = icons.get(row.id);
+                return (
+                  <div key={row.id} className="flex min-w-0 items-center gap-2">
+                    <LucideIconPicker
+                      value={customIcon}
+                      modal
+                      onChange={(name) =>
+                        setIcons((prev) => {
+                          const next = new Map(prev);
+                          next.set(row.id, name);
+                          return next;
+                        })
+                      }
+                    >
+                      <button
+                        type="button"
+                        className="flex size-8 shrink-0 items-center justify-center rounded-md border bg-background text-muted-foreground transition-colors hover:bg-muted"
+                        aria-label={m.workspace_kb_pickIcon()}
+                      >
+                        {customIcon ? (
+                          <LucideIconByName name={customIcon} size={14} />
+                        ) : (
+                          <BookOpenText className="size-3.5" />
+                        )}
+                      </button>
+                    </LucideIconPicker>
+                    <Input
+                      value={titles.get(row.id) ?? ""}
+                      placeholder={row.title}
+                      onChange={(e) =>
+                        setTitles((prev) => {
+                          const next = new Map(prev);
+                          next.set(row.id, e.target.value);
+                          return next;
+                        })
+                      }
+                      className="h-8 min-w-0 flex-1"
+                      aria-label={m.workspace_kb_displayTitlePlaceholder()}
+                    />
+                    <Select
+                      value={labels.get(row.id) ?? ""}
+                      onValueChange={(v) =>
+                        setLabels((prev) => {
+                          const next = new Map(prev);
+                          next.set(row.id, v as QuickDocLabel | "");
+                          return next;
+                        })
+                      }
+                    >
+                      <SelectTrigger className="w-28 shrink-0 text-xs" aria-label={m.workspace_kb_label()}>
+                        <SelectValue placeholder={m.workspace_kb_labelNone()} />
+                      </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="none">{m.workspace_kb_labelNone()}</SelectItem>
+                      {QUICK_DOC_LABELS.map((key) => (
+                        <SelectItem key={key} value={key}>
+                          <span
+                            className="text-xs inline-flex items-center rounded-full border px-2 py-0.5"
+                            style={LABEL_COLORS[key]}
+                          >
+                            {t(`workspace_kb_label_${key}`)}
+                          </span>
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                    </Select>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-7 size-7 p-0"
+                      onClick={() => toggle(row)}
+                      aria-label={m.workspace_kb_cancel()}
+                    >
+                      <X className="size-3.5" />
+                    </Button>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        )}
+
+        <DialogFooter className="flex items-center justify-between sm:justify-between">
+          <label className="flex cursor-pointer items-center gap-2 text-sm">
+            <Checkbox
+              checked={
+                items.length > 0 && selectedRows.size === items.length
+                  ? true
+                  : selectedRows.size > 0
+                    ? "indeterminate"
+                    : false
+              }
+              disabled={items.length === 0}
+              onCheckedChange={() => {
+                setSelectedRows((prev) => {
+                  if (prev.size === items.length) return new Map();
+                  return new Map(items.map((row) => [row.id, row]));
+                });
+              }}
+            />
+            {m.workspace_kb_selectAll()}
+            {selectedRows.size > 0 && (
+              <span className="text-xs text-muted-foreground">
+                {m.workspace_kb_selectedCount({ count: selectedRows.size })}
+              </span>
+            )}
+          </label>
+          <div className="flex items-center gap-2">
+            <Button variant="outline" onClick={() => onOpenChange(false)}>
+              {m.workspace_kb_cancel()}
+            </Button>
+            <Button onClick={handleConfirm} disabled={submitting || selectedRows.size === 0}>
+              {m.workspace_kb_confirm()}
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}