@allbluecn/web-app 0.4.22 → 0.5.1

package/src/components/story/detail/story-detail-toolbar/associated-attachments-panel.tsx

@@ -0,0 +1,748 @@
+// 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 { useTheme } from "next-themes";
+import { Link as RouterLink } from "@tanstack/react-router";
+import { useServerFn } from "@tanstack/react-start";
+import { toast } from "sonner";
+import {
+  BookOpenText,
+  ChevronDown,
+  Download,
+  Edit2,
+  ExternalLink,
+  LayoutGrid,
+  Link as LinkIcon,
+  LayoutList,
+  Loader2,
+  Plus,
+  ShieldOff,
+  Trash2,
+  Unlink,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { FilePreview } from "@/components/story/relations/file-preview";
+import { resolveVideoEmbed } from "@/lib/story/video-embed";
+import { removeLinkFn, removeAttachmentFn, unlinkDocFn, checkLinkEmbeddableFn } from "@/server/serverFns/story";
+import { getDocumentFn } from "@/server/serverFns/knowledge";
+import { sanitize } from "@/lib/sanitize";
+import { formatFileSize, getFaviconUrl, getFileTypeIcon, extractLinkTitle, getMimeTypeLabel } from "../../relations/format";
+import { generalGroupLabel } from "../../relations/general-groups";
+import { KnowledgeIconDisplay } from "@/components/knowledge/knowledge-icon";
+import type { AssociatedItem, RelationsData, StoryLinkItem, StoryAttachmentItem } from "../../types";
+
+export type AssociatedDialogKind = "link" | "attachment" | "knowledge";
+
+export interface AssociatedAttachmentsPanelProps {
+  storyId: string;
+  data: RelationsData;
+  onRefresh: (next: (prev: RelationsData) => RelationsData) => void;
+  onOpenDialog: (kind: AssociatedDialogKind, editLink?: StoryLinkItem, editAttachment?: StoryAttachmentItem) => void;
+}
+
+// 记住列表/预览显示方式
+const VIEW_MODE_STORAGE_KEY = "associated-attachments-view-mode";
+
+// 全屏浮窗尺寸与 peek-panel 面板的 full-screen 模式一致（四边 inset-4）
+const FULLSCREEN_CONTENT_CLASS = "inset-4 w-auto h-auto sm:max-w-none";
+
+function useAttachmentFile(attachment: StoryAttachmentItem) {
+  const [file, setFile] = React.useState<File | null>(null);
+  const [error, setError] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    let cancelled = false;
+    fetch(attachment.storageUrl)
+      .then((res) => {
+        if (!res.ok) throw new Error("加载失败");
+        return res.blob();
+      })
+      .then((blob) => {
+        if (cancelled) return;
+        setFile(new File([blob], attachment.fileName, { type: attachment.mimeType }));
+      })
+      .catch((e) => {
+        if (cancelled) return;
+        setError((e as Error).message);
+      });
+    return () => { cancelled = true; };
+  }, [attachment]);
+
+  return { file, error };
+}
+
+function AttachmentFileView({
+  attachment,
+  onFullscreen,
+  onExitFullscreen,
+  fill = false,
+}: {
+  attachment: StoryAttachmentItem;
+  onFullscreen?: () => void;
+  onExitFullscreen?: () => void;
+  /** fill: 填充父容器（全屏弹窗内），否则使用网格 CSS 变量高度 */
+  fill?: boolean;
+}) {
+  const { t } = useTranslation("story");
+  const { file, error } = useAttachmentFile(attachment);
+
+  if (error) {
+    return (
+      <div
+        className={`flex items-center justify-center text-sm text-muted-foreground ${fill ? "h-full w-full" : ""}`}
+        style={fill ? undefined : { height: "var(--attachment-preview-h-sub, 12rem)" }}
+      >
+        预览失败：{error}
+      </div>
+    );
+  }
+  if (!file) {
+    return (
+      <div
+        className={`flex items-center justify-center text-sm text-muted-foreground ${fill ? "h-full w-full" : ""}`}
+        style={fill ? undefined : { height: "var(--attachment-preview-h-sub, 12rem)" }}
+      >
+        加载中…
+      </div>
+    );
+  }
+  return (
+    <FilePreview
+      file={file}
+      fileName={attachment.fileName}
+      showTitleToggle
+      titleToggleLabel={t("attachmentDialog.toggleTitle")}
+      titleToggleHideLabel={t("attachmentDialog.hideTitle")}
+      fullscreenLabel={t("associatedAttachments.fullscreen")}
+      exitFullscreenLabel={t("associatedAttachments.exitFullscreen")}
+      onFullscreen={onFullscreen}
+      onExitFullscreen={onExitFullscreen}
+      height={fill ? "100%" : "var(--attachment-preview-h, 24rem)"}
+      className={fill ? "h-full min-h-0 flex-1" : "rounded-md border"}
+    />
+  );
+}
+
+function LinkPreview({ url }: { url: string }) {
+  const checkEmbeddable = useServerFn(checkLinkEmbeddableFn);
+  const [state, setState] = React.useState<"checking" | "ok" | "blocked">("checking");
+  // 视频链接（平台播放器 / 直链文件）走专用预览，无需服务端嵌入探测
+  const video = resolveVideoEmbed(url);
+
+  React.useEffect(() => {
+    if (video) return;
+    let cancelled = false;
+    setState("checking");
+    checkEmbeddable({ data: { url, origin: window.location.origin } })
+      .then((res: { embeddable: boolean }) => {
+        if (cancelled) return;
+        setState(res.embeddable ? "ok" : "blocked");
+      })
+      .catch(() => {
+        if (cancelled) return;
+        setState("ok");
+      });
+    return () => { cancelled = true; };
+  }, [url, checkEmbeddable, video]);
+
+  if (video) {
+    return (
+      <div className="h-48 w-full overflow-hidden rounded-md border bg-background">
+        {video.kind === "file" ? (
+          <video src={video.src} controls preload="metadata" className="size-full bg-black" />
+        ) : (
+          <iframe
+            src={video.src}
+            className="size-full border-0"
+            title="视频预览"
+            allow="autoplay; encrypted-media; picture-in-picture; fullscreen"
+            allowFullScreen
+            sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-presentation"
+          />
+        )}
+      </div>
+    );
+  }
+  if (state === "checking") {
+    return (
+      <div className="flex h-48 w-full items-center justify-center rounded-md border bg-background text-sm text-muted-foreground">
+        <Loader2 className="mr-2 size-4 animate-spin" />
+        检查嵌入权限…
+      </div>
+    );
+  }
+  if (state === "blocked") {
+    return (
+      <div className="flex h-48 w-full flex-col items-center justify-center gap-2 rounded-md border bg-muted/30 text-sm text-muted-foreground">
+        <ShieldOff className="size-6" />
+        <span>该网站不允许嵌入预览</span>
+        <a href={url} target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">
+          在新标签页打开
+        </a>
+      </div>
+    );
+  }
+  return (
+    <div className="h-48 w-full overflow-hidden rounded-md border bg-background">
+      <iframe
+        src={url}
+        className="size-full border-0"
+        title="链接预览"
+        sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
+      />
+    </div>
+  );
+}
+
+function DocHtmlPreview({ kbId, docId, title }: { kbId: string; docId: string; title: string }) {
+  const getDocument = useServerFn(getDocumentFn);
+  const [html, setHtml] = React.useState<string | null>(null);
+  const [error, setError] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    let cancelled = false;
+    getDocument({ data: { id: docId } })
+      .then((doc: { content?: unknown }) => {
+        if (cancelled) return;
+        const content = doc?.content;
+        const docHtml = content && typeof content === "object" && "html" in content
+          ? (content as { html?: string }).html
+          : null;
+        setHtml(docHtml || "<p></p>");
+      })
+      .catch((e: unknown) => {
+        if (cancelled) return;
+        setError((e as Error)?.message || "加载失败");
+      });
+    return () => { cancelled = true; };
+  }, [docId, getDocument]);
+
+  if (error) {
+    return (
+      <div className="flex h-48 w-full flex-col items-center justify-center gap-2 rounded-md border bg-muted/30 text-sm text-muted-foreground">
+        <span>文档预览加载失败</span>
+        <RouterLink
+          to="/knowledge/$kbId/doc/$docId"
+          params={{ kbId, docId }}
+          target="_blank"
+          className="text-primary hover:underline"
+        >
+          跳转查看「{title}」
+        </RouterLink>
+      </div>
+    );
+  }
+  if (html === null) {
+    return (
+      <div className="flex h-48 w-full items-center justify-center rounded-md border bg-background text-sm text-muted-foreground">
+        <Loader2 className="mr-2 size-4 animate-spin" />
+        加载中…
+      </div>
+    );
+  }
+  return (
+    <div className="prose prose-sm h-48 w-full max-w-none overflow-y-auto rounded-md border bg-background px-3 py-2 dark:prose-invert">
+      {/* eslint-disable-next-line react/no-danger -- 内容已经过 DOMPurify sanitize */}
+      <div dangerouslySetInnerHTML={{ __html: sanitize(html) }} />
+    </div>
+  );
+}
+
+function ExternalDocPreview({ group, title }: { group: string; title: string }) {
+  const { t } = useTranslation("story");
+  return (
+    <div className="flex h-48 w-full flex-col items-center justify-center gap-2 rounded-md border bg-muted/30 text-sm text-muted-foreground">
+      <BookOpenText className="size-6" />
+      <span className="max-w-full truncate px-4 font-medium text-foreground">{title}</span>
+      <span>{generalGroupLabel(t, group)}</span>
+    </div>
+  );
+}
+
+function ItemPreview({ item, onFullscreen }: { item: AssociatedItem; onFullscreen?: () => void }) {
+  if (item.kind === "link") {
+    return <LinkPreview url={item.data.url} />;
+  }
+  if (item.kind === "attachment") {
+    return <AttachmentFileView attachment={item.data} onFullscreen={onFullscreen} />;
+  }
+  if (item.data.kbId.startsWith("ext:")) {
+    const group = item.data.kbId.slice("ext:".length);
+    return <ExternalDocPreview group={group} title={item.data.title} />;
+  }
+  return <DocHtmlPreview kbId={item.data.kbId} docId={item.data.id} title={item.data.title} />;
+}
+
+export function AssociatedAttachmentsPanel({
+  storyId,
+  data,
+  onRefresh,
+  onOpenDialog,
+}: AssociatedAttachmentsPanelProps) {
+  const { t } = useTranslation("story");
+  const removeLink = useServerFn(removeLinkFn);
+  const removeAttachment = useServerFn(removeAttachmentFn);
+  const unlinkDoc = useServerFn(unlinkDocFn);
+  const [mode, setMode] = React.useState<"list" | "preview">("list");
+  const [groupCollapsed, setGroupCollapsed] = React.useState<Record<string, boolean>>({});
+  const [fullscreenAttachment, setFullscreenAttachment] = React.useState<StoryAttachmentItem | null>(null);
+
+  // 下次进入时恢复上次的显示方式（挂载后读取，避免 SSR hydration 不匹配）
+  React.useEffect(() => {
+    try {
+      if (window.localStorage.getItem(VIEW_MODE_STORAGE_KEY) === "preview") setMode("preview");
+    } catch { /* localStorage 不可用时忽略 */ }
+  }, []);
+
+  const switchMode = (next: "list" | "preview") => {
+    setMode(next);
+    try {
+      window.localStorage.setItem(VIEW_MODE_STORAGE_KEY, next);
+    } catch { /* localStorage 不可用时忽略 */ }
+  };
+
+  const items: AssociatedItem[] = React.useMemo(
+    () => [
+      ...data.links.map((l) => ({ kind: "link" as const, data: l })),
+      ...data.attachments.map((a) => ({ kind: "attachment" as const, data: a })),
+      ...data.knowledge.docs.map((d) => ({ kind: "doc" as const, data: d })),
+    ],
+    [data],
+  );
+
+  const groups = React.useMemo(() => {
+    const linkItems = items.filter((i) => i.kind === "link");
+    const attachmentItems = items.filter((i) => i.kind === "attachment");
+    const docItems = items.filter((i) => i.kind === "doc");
+    return [
+      { kind: "link" as const, label: t("associatedAttachments.groupLink"), count: linkItems.length, items: linkItems },
+      { kind: "attachment" as const, label: t("associatedAttachments.groupAttachment"), count: attachmentItems.length, items: attachmentItems },
+      { kind: "doc" as const, label: t("associatedAttachments.groupKb"), count: docItems.length, items: docItems },
+    ].filter((g) => g.count > 0);
+  }, [items, t]);
+
+  const handleRemoveLink = async (id: string) => {
+    try {
+      await removeLink({ data: { linkId: id } });
+      onRefresh((prev) => ({ ...prev, links: prev.links.filter((l) => l.id !== id) }));
+    } catch (err) {
+      toast.error((err as Error)?.message || t("linkDialog.removeFailed"));
+    }
+  };
+
+  const handleRemoveAttachment = async (id: string) => {
+    try {
+      await removeAttachment({ data: { attachmentId: id } });
+      onRefresh((prev) => ({
+        ...prev,
+        attachments: prev.attachments.filter((a) => a.id !== id),
+      }));
+    } catch (err) {
+      toast.error((err as Error)?.message || t("attachmentDialog.removeFailed"));
+    }
+  };
+
+  const handleUnlinkDoc = async (docId: string) => {
+    try {
+      await unlinkDoc({ data: { storyId, docId } });
+      onRefresh((prev) => ({
+        ...prev,
+        knowledge: { ...prev.knowledge, docs: prev.knowledge.docs.filter((d) => d.id !== docId) },
+      }));
+    } catch (err) {
+      toast.error((err as Error)?.message || t("knowledgeDialog.linkFailed"));
+    }
+  };
+
+  const getHost = (url: string) => {
+    try {
+      return new URL(url).hostname;
+    } catch {
+      return url;
+    }
+  };
+
+  if (items.length === 0) return null;
+
+  const renderActionsInline = (item: AssociatedItem, inPreviewCard = false) => {
+    switch (item.kind) {
+      case "link":
+        return (
+          <>
+            <Button variant="ghost" size="icon" className="size-7" asChild>
+              <a href={item.data.url} target="_blank" rel="noopener noreferrer" title={t("associatedAttachments.open")} onClick={(e) => e.stopPropagation()}>
+                <ExternalLink className="size-3.5" />
+              </a>
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-7"
+              title={t("associatedAttachments.edit")}
+              aria-label={t("associatedAttachments.edit")}
+              onClick={() => onOpenDialog("link", item.data)}
+            >
+              <Edit2 className="size-3.5" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-7"
+              aria-label={t("associatedAttachments.remove")}
+              onClick={() => handleRemoveLink(item.data.id)}
+            >
+              <Trash2 className="size-3.5" />
+            </Button>
+          </>
+        );
+      case "attachment":
+        return (
+          <>
+            {inPreviewCard && (
+              <Button variant="ghost" size="icon" className="size-7" asChild>
+                <a
+                  href={item.data.storageUrl}
+                  download={item.data.fileName}
+                  title={t("associatedAttachments.download")}
+                  aria-label={t("associatedAttachments.download")}
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  <Download className="size-3.5" />
+                </a>
+              </Button>
+            )}
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-7"
+              title={t("associatedAttachments.edit")}
+              aria-label={t("associatedAttachments.edit")}
+              onClick={() => onOpenDialog("attachment", undefined, item.data)}
+            >
+              <Edit2 className="size-3.5" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-7"
+              aria-label={t("associatedAttachments.remove")}
+              onClick={() => handleRemoveAttachment(item.data.id)}
+            >
+              <Trash2 className="size-3.5" />
+            </Button>
+          </>
+        );
+      case "doc": {
+        const isExternal = item.data.kbId.startsWith("ext:");
+        const externalGroup = isExternal ? item.data.kbId.slice("ext:".length) : null;
+        return (
+          <>
+            <Button variant="ghost" size="icon" className="size-7" asChild>
+              {isExternal && externalGroup ? (
+                externalGroup === "legal" ? (
+                  <RouterLink to="/knowledge/laws/$id" params={{ id: item.data.id }} title={t("associatedAttachments.goToDoc")} onClick={(e) => e.stopPropagation()}>
+                    <ExternalLink className="size-3.5" />
+                  </RouterLink>
+                ) : externalGroup === "compliance" ? (
+                  <RouterLink to="/knowledge/compliance/$id" params={{ id: item.data.id }} title={t("associatedAttachments.goToDoc")} onClick={(e) => e.stopPropagation()}>
+                    <ExternalLink className="size-3.5" />
+                  </RouterLink>
+                ) : externalGroup === "dictionary" ? (
+                  <RouterLink to="/knowledge/dictionaries/$id" params={{ id: item.data.id }} title={t("associatedAttachments.goToDoc")} onClick={(e) => e.stopPropagation()}>
+                    <ExternalLink className="size-3.5" />
+                  </RouterLink>
+                ) : externalGroup === "bookmark" ? (
+                  <RouterLink to="/knowledge/bookmarks/$id" params={{ id: item.data.id }} title={t("associatedAttachments.goToDoc")} onClick={(e) => e.stopPropagation()}>
+                    <ExternalLink className="size-3.5" />
+                  </RouterLink>
+                ) : (
+                  <span />
+                )
+              ) : (
+                <RouterLink
+                  to="/knowledge/$kbId/doc/$docId"
+                  params={{ kbId: item.data.kbId, docId: item.data.id }}
+                  title={t("associatedAttachments.goToDoc")}
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  <ExternalLink className="size-3.5" />
+                </RouterLink>
+              )}
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-7"
+              title={t("associatedAttachments.removeLink")}
+              aria-label={t("associatedAttachments.removeLink")}
+              onClick={() => handleUnlinkDoc(item.data.id)}
+            >
+              <Unlink className="size-3.5" />
+            </Button>
+          </>
+        );
+      }
+    }
+  };
+
+  const renderListRow = (item: AssociatedItem) => {
+    const key = `${item.kind}-${item.data.id}`;
+    if (item.kind === "link") {
+      const favicon = getFaviconUrl(item.data.url);
+      return (
+        <div key={key} className="flex items-center gap-1.5 border-b border-border/40 px-2 py-2 last:border-b-0">
+          <span className="w-4 shrink-0" aria-hidden />
+          {favicon ? (
+            <img src={favicon} alt="" className="size-4 shrink-0" onError={(e) => { (e.currentTarget as HTMLImageElement).style.display = "none"; }} />
+          ) : (
+            <LinkIcon className="size-4 shrink-0 text-muted-foreground" />
+          )}
+          <span className="min-w-0 flex-1 truncate text-sm text-foreground">
+            {item.data.title || extractLinkTitle(item.data.url)}
+            {item.data.description?.trim() && (
+              <span className="ml-2 text-xs text-muted-foreground" title={item.data.description}>
+                {item.data.description}
+              </span>
+            )}
+          </span>
+          <span className="shrink-0 text-xs text-muted-foreground">{getHost(item.data.url)}</span>
+          <div className="flex items-center gap-0.5 shrink-0">{renderActionsInline(item)}</div>
+        </div>
+      );
+    }
+    if (item.kind === "attachment") {
+      const Icon = getFileTypeIcon(item.data.mimeType, item.data.fileName);
+      return (
+        <div key={key} className="flex items-center gap-1.5 border-b border-border/40 px-2 py-2 last:border-b-0">
+          <span className="w-4 shrink-0" aria-hidden />
+          <Icon className="size-4 shrink-0 text-muted-foreground" />
+          <span className="min-w-0 flex-1 truncate text-sm text-foreground">
+            {item.data.fileName}
+            {item.data.description?.trim() && (
+              <span className="ml-2 text-xs text-muted-foreground" title={item.data.description}>
+                {item.data.description}
+              </span>
+            )}
+          </span>
+          <Badge variant="secondary" className="shrink-0 text-[10px] h-4">
+            {getMimeTypeLabel(item.data.mimeType, item.data.fileName)}
+          </Badge>
+          <span className="shrink-0 text-xs text-muted-foreground">
+            {formatFileSize(item.data.fileSize)}
+          </span>
+          <div className="flex items-center gap-0.5 shrink-0">{renderActionsInline(item)}</div>
+        </div>
+      );
+    }
+    return (
+      <div key={key} className="flex items-center gap-1.5 border-b border-border/40 px-2 py-2 last:border-b-0">
+        <span className="w-4 shrink-0" aria-hidden />
+        <BookOpenText className="size-4 shrink-0 text-muted-foreground" />
+        <span className="min-w-0 flex-1 truncate text-sm text-foreground">{item.data.title}</span>
+        <KnowledgeIconDisplay name={item.data.kbIcon} size={14} className="shrink-0 text-muted-foreground" />
+        <span className="shrink-0 text-xs text-muted-foreground">{item.data.kbId.startsWith("ext:") ? generalGroupLabel(t, item.data.kbName) : item.data.kbName}</span>
+        <div className="flex items-center gap-0.5 shrink-0">{renderActionsInline(item)}</div>
+      </div>
+    );
+  };
+
+  const renderPreviewCard = (item: AssociatedItem) => {
+    const key = `${item.kind}-${item.data.id}`;
+    if (item.kind === "link") {
+      const favicon = getFaviconUrl(item.data.url);
+      return (
+        <div key={key} className="group relative flex flex-col gap-2 rounded-lg border p-3">
+          <div className="flex items-center gap-2">
+            {favicon ? (
+              <img src={favicon} alt="" className="size-5 shrink-0" onError={(e) => { (e.currentTarget as HTMLImageElement).style.display = "none"; }} />
+            ) : (
+              <LinkIcon className="size-5 shrink-0 text-muted-foreground" />
+            )}
+            <span className="min-w-0 truncate text-sm font-medium text-foreground">
+              {item.data.title || extractLinkTitle(item.data.url)}
+            </span>
+          </div>
+          <span className="truncate text-xs text-muted-foreground">{getHost(item.data.url)}</span>
+          <div className="absolute right-2 top-2 hidden gap-0.5 rounded-md border bg-background p-0.5 group-hover:flex">
+            {renderActionsInline(item, true)}
+          </div>
+          <ItemPreview item={item} />
+        </div>
+      );
+    }
+    if (item.kind === "attachment") {
+      const Icon = getFileTypeIcon(item.data.mimeType, item.data.fileName);
+      return (
+        <div key={key} className="group relative flex flex-col gap-2 rounded-lg border p-3">
+          <div className="flex items-center gap-2">
+            <Icon className="size-5 shrink-0 text-muted-foreground" />
+            <span className="min-w-0 truncate text-sm font-medium text-foreground">{item.data.fileName}</span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <Badge variant="secondary" className="shrink-0 text-[10px] h-4">
+              {getMimeTypeLabel(item.data.mimeType, item.data.fileName)}
+            </Badge>
+            <span className="truncate text-xs text-muted-foreground">
+              {formatFileSize(item.data.fileSize)}
+            </span>
+          </div>
+          <div className="absolute right-2 top-2 hidden gap-0.5 rounded-md border bg-background p-0.5 group-hover:flex">
+            {renderActionsInline(item, true)}
+          </div>
+          <ItemPreview item={item} onFullscreen={() => setFullscreenAttachment(item.data)} />
+        </div>
+      );
+    }
+    return (
+      <div key={key} className="group relative flex flex-col gap-2 rounded-lg border p-3">
+        <div className="flex items-center gap-2">
+          <BookOpenText className="size-5 shrink-0 text-muted-foreground" />
+          <span className="min-w-0 truncate text-sm font-medium text-foreground">{item.data.title}</span>
+        </div>
+        <div className="flex items-center gap-1.5">
+          <KnowledgeIconDisplay name={item.data.kbIcon} size={12} className="shrink-0 text-muted-foreground" />
+          <span className="truncate text-xs text-muted-foreground">{item.data.kbId.startsWith("ext:") ? generalGroupLabel(t, item.data.kbName) : item.data.kbName}</span>
+        </div>
+        <div className="absolute right-2 top-2 hidden gap-0.5 rounded-md border bg-background p-0.5 group-hover:flex">
+          {renderActionsInline(item, true)}
+        </div>
+        <ItemPreview item={item} />
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <Collapsible defaultOpen data-testid="associated-panel">
+      <CollapsibleTrigger
+        asChild
+        className="group flex w-full cursor-pointer items-center gap-2 pb-3 pt-4 text-xs font-semibold hover:text-foreground transition-colors"
+      >
+        <div
+          role="button"
+          tabIndex={0}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              (e.currentTarget as HTMLDivElement).click();
+            }
+          }}
+        >
+          <div className="flex items-center gap-1.5">
+            <span>{t("associatedAttachments.title")}</span>
+            <span className="inline-flex min-w-[18px] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-medium text-primary-foreground">
+              {items.length}
+            </span>
+            <ChevronDown className="size-3 text-muted-foreground transition-transform group-data-[state=open]:rotate-0 group-data-[state=closed]:-rotate-90" />
+          </div>
+          <div className="flex items-center gap-1 ml-auto" onClick={(e) => e.stopPropagation()}>
+            <Button
+              variant="ghost"
+              size="sm"
+              className={`size-7 p-0 ${mode === "list" ? "bg-muted" : ""}`}
+              aria-label={t("associatedAttachments.list")}
+              title={t("associatedAttachments.list")}
+              onClick={() => switchMode("list")}
+            >
+              <LayoutList className="size-3.5" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className={`size-7 p-0 ${mode === "preview" ? "bg-muted" : ""}`}
+              aria-label={t("associatedAttachments.preview")}
+              title={t("associatedAttachments.preview")}
+              onClick={() => switchMode("preview")}
+            >
+              <LayoutGrid className="size-3.5" />
+            </Button>
+          </div>
+        </div>
+      </CollapsibleTrigger>
+      <CollapsibleContent className="pb-2">
+        <div
+          data-testid="associated-items"
+          data-mode={mode}
+          className="flex flex-col rounded-lg border overflow-hidden"
+        >
+          {groups.map((group) => {
+            const isCollapsed = groupCollapsed[group.kind] ?? false;
+            return (
+              <Collapsible key={group.kind} open={!isCollapsed} onOpenChange={(open) => setGroupCollapsed((p) => ({ ...p, [group.kind]: !open }))}>
+                <CollapsibleTrigger asChild>
+                  <div className="flex h-9 cursor-pointer items-center gap-1.5 border-b border-border/40 bg-muted/50 px-3 text-sm font-medium hover:text-foreground transition-colors">
+                    <ChevronDown className={`size-3 shrink-0 text-muted-foreground transition-transform ${isCollapsed ? "-rotate-90" : "rotate-0"}`} />
+                    <span>{group.label}</span>
+                    <span className="ml-1 text-xs text-muted-foreground">{group.count}</span>
+                    <div className="ml-auto flex items-center" onClick={(e) => e.stopPropagation()}>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="size-6 p-0"
+                        aria-label={t("associatedAttachments.add")}
+                        title={t("associatedAttachments.add")}
+                        onClick={() => onOpenDialog(group.kind === "doc" ? "knowledge" : group.kind)}
+                      >
+                        <Plus className="size-3.5" />
+                      </Button>
+                    </div>
+                  </div>
+                </CollapsibleTrigger>
+                <CollapsibleContent className={mode === "preview" ? "p-3" : ""}>
+                  {mode === "list" ? (
+                    <div className="flex flex-col">
+                      {group.items.map((item) => renderListRow(item))}
+                    </div>
+                  ) : group.kind === "attachment" ? (
+                      <div className="grid gap-3 attachment-preview-grid">
+                        {group.items.map((item) => renderPreviewCard(item))}
+                      </div>
+                    ) : (
+                      <div className="grid grid-cols-5 gap-3">
+                        {group.items.map((item) => renderPreviewCard(item))}
+                      </div>
+                    )}
+                </CollapsibleContent>
+              </Collapsible>
+            );
+          })}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+      <Dialog open={fullscreenAttachment !== null} onOpenChange={(open) => { if (!open) setFullscreenAttachment(null); }}>
+        <DialogContent
+          showCloseButton={false}
+          className={`flex flex-col overflow-hidden shadow-2xl transition-all duration-300 p-0 gap-0 translate-x-0 translate-y-0 bg-popover ${FULLSCREEN_CONTENT_CLASS}`}
+          onOpenAutoFocus={(e) => e.preventDefault()}
+        >
+          {fullscreenAttachment && (
+            <AttachmentFileView
+              attachment={fullscreenAttachment}
+              fill
+              onExitFullscreen={() => setFullscreenAttachment(null)}
+            />
+          )}
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}