1

src/components/puzzle-agent/PuzzleAgentWorkspace.tsx

@@ -1,4 +1,11 @@
-import { ArrowLeft, ImagePlus, Loader2, Sparkles, Trash2 } from 'lucide-react';
+import {
+  ArrowLeft,
+  History,
+  ImagePlus,
+  Loader2,
+  Sparkles,
+  Trash2,
+} from 'lucide-react';
 import {
   type ChangeEvent,
   type CSSProperties,
@@ -20,6 +27,7 @@ import {
   isPuzzleReferenceImageSquare,
   readPuzzleReferenceImageForUpload,
 } from '../../services/puzzleReferenceImage';
+import PuzzleHistoryAssetPickerDialog from './PuzzleHistoryAssetPickerDialog';
 import {
   normalizePuzzleImageModel,
   PUZZLE_IMAGE_MODEL_GPT_IMAGE_2,
@@ -535,6 +543,7 @@ export function PuzzleAgentWorkspace({
     null,
   );
   const [cropState, setCropState] = useState<PuzzleImageCropState | null>(null);
+  const [isHistoryPickerOpen, setIsHistoryPickerOpen] = useState(false);
   const [isRemoveImageConfirmOpen, setIsRemoveImageConfirmOpen] =
     useState(false);
   const previousSessionIdRef = useRef<string | null>(
@@ -565,6 +574,7 @@ export function PuzzleAgentWorkspace({
     setFormState(resolveInitialFormState(session, initialFormPayload));
     setReferenceImageError(null);
     setCropState(null);
+    setIsHistoryPickerOpen(false);
     setIsRemoveImageConfirmOpen(false);
   }, [initialFormPayload, session]);
 
@@ -865,6 +875,17 @@ export function PuzzleAgentWorkspace({
                     </span>
                   )}
                   <div className="absolute inset-0 z-[1] bg-[linear-gradient(180deg,rgba(255,255,255,0.12)_0%,rgba(255,255,255,0.04)_42%,rgba(255,255,255,0.18)_100%)] pointer-events-none" />
+                  <button
+                    type="button"
+                    disabled={isBusy}
+                    onClick={() => setIsHistoryPickerOpen(true)}
+                    className={`absolute bottom-3 right-3 z-10 inline-flex items-center gap-1.5 rounded-full border border-white/80 bg-white/94 px-3 py-2 text-[11px] font-black text-[var(--platform-text-strong)] shadow-sm backdrop-blur transition hover:text-[#ff4056] ${isBusy ? 'cursor-not-allowed opacity-55' : ''}`}
+                    aria-label="选择历史图片"
+                    title="选择历史图片"
+                  >
+                    <History className="h-3.5 w-3.5" />
+                    <span>历史</span>
+                  </button>
                   {formState.referenceImageSrc ? (
                     <label className="absolute bottom-3 left-3 z-10 inline-flex cursor-pointer items-center gap-2 rounded-full border border-white/80 bg-white/94 px-3 py-2 text-xs font-black text-[var(--platform-text-strong)] shadow-sm backdrop-blur">
                       <span>AI重绘</span>
@@ -910,7 +931,7 @@ export function PuzzleAgentWorkspace({
                   ) : (
                     <label
                       htmlFor="puzzle-image-upload-input"
-                      className={`absolute bottom-3 left-1/2 z-10 inline-flex min-h-10 -translate-x-1/2 items-center justify-center whitespace-nowrap rounded-full border border-white/80 bg-white/94 px-4 text-sm font-black text-[var(--platform-text-strong)] shadow-sm backdrop-blur transition hover:text-[#ff4056] ${isBusy ? 'cursor-not-allowed' : 'cursor-pointer'}`}
+                      className={`absolute bottom-9 left-1/2 z-10 -translate-x-1/2 whitespace-nowrap text-center text-sm font-black text-[var(--platform-text-strong)] drop-shadow-[0_1px_0_rgba(255,255,255,0.82)] transition hover:text-[#ff4056] sm:bottom-10 ${isBusy ? 'cursor-not-allowed opacity-55' : 'cursor-pointer'}`}
                     >
                       点击上传拼图图片
                     </label>
@@ -1003,6 +1024,22 @@ export function PuzzleAgentWorkspace({
           }}
         />
       ) : null}
+      {isHistoryPickerOpen ? (
+        <PuzzleHistoryAssetPickerDialog
+          isBusy={isBusy}
+          onClose={() => setIsHistoryPickerOpen(false)}
+          onSelect={(asset) => {
+            setFormState((current) => ({
+              ...current,
+              referenceImageSrc: asset.imageSrc,
+              referenceImageLabel: `历史素材 · ${asset.ownerLabel || '未记录账号'}`,
+            }));
+            setReferenceImageError(null);
+            setIsHistoryPickerOpen(false);
+            setIsRemoveImageConfirmOpen(false);
+          }}
+        />
+      ) : null}
       {isRemoveImageConfirmOpen ? (
         <div className="platform-modal-backdrop fixed inset-0 z-[80] flex items-center justify-center px-4 py-6">
           <div