@tablestore/tablestore-agent-cli 0.2.1 → 0.2.4

package/dist/dashboard-runtime/dashboard/src/components/documents/doc-chunks-dialog.tsx

@@ -21,6 +21,7 @@ import {
 import { listChunks, updateChunks } from "@/services/chunks";
 import { queryKeys } from "@/lib/query-keys";
 import { extractFileName } from "@/lib/utils";
+import { IMAGE_FALLBACK_DATA_PREFIX } from "@/lib/constants";
 import { useRuntimeContext } from "@/providers/runtime-context-provider";
 import type { Chunk, ChunkStatus } from "@/types/knowledge-base";
 
@@ -66,6 +67,7 @@ function ChunkCard({
   const [editContent, setEditContent] = useState(chunk.content);
   const [saving, setSaving] = useState(false);
   const [toggling, setToggling] = useState(false);
+  const [zoomedImage, setZoomedImage] = useState<string | null>(null);
 
   const style = STATUS_STYLES[chunk.status] ?? STATUS_STYLES.inactive;
   const isActive = chunk.status === "active";
@@ -180,24 +182,38 @@ function ChunkCard({
             </TooltipProvider>
           )}
           {/* 编辑按钮 */}
-          {!editing && (
-            <TooltipProvider delayDuration={200}>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-7 w-7"
-                    onClick={() => setEditing(true)}
-                    aria-label="编辑切片"
-                  >
-                    <Pencil className="h-3.5 w-3.5" />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent side="top">编辑切片</TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
-          )}
+          {!editing && (() => {
+            const isImageChunk = chunk.chunkType.toUpperCase() === "IMAGE";
+            return (
+              <TooltipProvider delayDuration={200}>
+                <Tooltip>
+                  {/* disabled button 不会触发 hover 事件，需要 span 包裹来承接 Tooltip 的 pointer 事件 */}
+                  <TooltipTrigger asChild>
+                    <span className={isImageChunk ? "inline-flex cursor-not-allowed" : "inline-flex"}>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className={`h-7 w-7 ${isImageChunk ? "pointer-events-none opacity-50" : ""}`}
+                        onClick={() => {
+                          if (isImageChunk) return;
+                          setEditing(true);
+                        }}
+                        disabled={isImageChunk}
+                        aria-disabled={isImageChunk}
+                        tabIndex={isImageChunk ? -1 : 0}
+                        aria-label="编辑切片"
+                      >
+                        <Pencil className="h-3.5 w-3.5" />
+                      </Button>
+                    </span>
+                  </TooltipTrigger>
+                  <TooltipContent side="top">
+                    {isImageChunk ? "图片类型 chunk 不支持修改" : "编辑切片"}
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            );
+          })()}
         </div>
       </div>
 
@@ -243,6 +259,22 @@ function ChunkCard({
           {chunk.title && (
             <p className="text-sm font-semibold">{chunk.title}</p>
           )}
+          {/* 图片缩略图（仅 IMAGE 类型） */}
+          {chunk.chunkType.toUpperCase() === "IMAGE" && chunk.imageBase64 && (() => {
+            const imgSrc = chunk.imageBase64.startsWith("data:")
+              ? chunk.imageBase64
+              : `${IMAGE_FALLBACK_DATA_PREFIX}${chunk.imageBase64}`;
+            return (
+              <div className="mt-2">
+                <img
+                  src={imgSrc}
+                  alt={chunk.caption || `Image chunk #${chunk.chunkId}`}
+                  className="max-w-[200px] max-h-[200px] object-contain rounded border border-border cursor-pointer hover:opacity-80 transition-opacity"
+                  onClick={() => setZoomedImage(imgSrc)}
+                />
+              </div>
+            );
+          })()}
           {/* 内容 — 可折叠 */}
           <p
             className={`text-sm text-gray-600 whitespace-pre-wrap ${
@@ -263,6 +295,12 @@ function ChunkCard({
               )}
             </button>
           )}
+          {/* Caption — 所有类型，存在时展示 */}
+          {chunk.caption && (
+            <p className="text-xs text-muted-foreground italic mt-1">
+              {chunk.caption}
+            </p>
+          )}
         </>
       )}
 
@@ -271,6 +309,20 @@ function ChunkCard({
         <span>创建: {formatTime(chunk.createdAt)}</span>
         {chunk.updatedAt && <span>更新: {formatTime(chunk.updatedAt)}</span>}
       </div>
+
+      {/* 图片放大预览 */}
+      <Dialog open={!!zoomedImage} onOpenChange={() => setZoomedImage(null)}>
+        <DialogContent className="max-w-[90vw] max-h-[90vh] p-2 flex items-center justify-center border-none bg-black/90 data-[state=open]:animate-none data-[state=closed]:animate-none duration-0">
+          <DialogTitle className="sr-only">图片放大预览</DialogTitle>
+          {zoomedImage && (
+            <img
+              src={zoomedImage}
+              alt="放大预览"
+              className="max-w-full max-h-[85vh] object-contain"
+            />
+          )}
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }
@@ -308,7 +360,7 @@ export function DocChunksDialog({
         subspace,
       }),
     initialPageParam: undefined as string | undefined,
-    getNextPageParam: (lastPage) => lastPage.nextToken,
+    getNextPageParam: (lastPage) => lastPage.nextToken || undefined,
     enabled: ready && open && !!docId,
   });
 
@@ -339,7 +391,7 @@ export function DocChunksDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-3xl max-h-[80vh] flex flex-col">
+      <DialogContent className="sm:max-w-3xl max-h-[80vh] flex flex-col data-[state=open]:animate-none data-[state=closed]:animate-none duration-0">
         <DialogHeader>
           <DialogTitle>{displayName} - 切片列表</DialogTitle>
           <DialogDescription>