issue-sticker 0.10.0 → 0.12.0

package/dist/issue-sticker-headless-react.js

@@ -1,8 +1,8 @@
-import { c as createLucideIcon, u as ungzip_1, R as REPLAY_EVENT_TYPE, C as CANVAS_INTERACTION_TAG, a as cn, b as Replayer, M as MousePointer2 } from "./three-_bdgDAmI.js";
-import { r } from "./three-_bdgDAmI.js";
+import { c as createLucideIcon, u as ungzip_1, R as REPLAY_EVENT_TYPE, C as CANVAS_INTERACTION_TAG, a as cn, b as Replayer, M as MousePointer2 } from "./three-B228j4M6.js";
+import { r } from "./three-B228j4M6.js";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { memo, useRef, useEffect, useState, useCallback, useMemo } from "react";
-import { T as TooltipProvider, a as Tooltip, b as TooltipTrigger, c as TooltipContent } from "./tooltip-UijEbdDX.js";
+import { T as TooltipProvider, a as Tooltip, b as TooltipTrigger, c as TooltipContent } from "./tooltip-CT7e9xbU.js";
 /**
  * @license lucide-react v0.468.0 - ISC
  *

package/dist/issue-sticker-headless.js

@@ -1,5 +1,5 @@
-import { u as uploadScreenshotDataUrls, a as uploadSignedMediaWithApi, d as directUploadToSignedUrl, p as pristineFetch, g as getElementPosition, c as captureWithModernScreenshot, b as buildJiraCreateFields, e as buildNotionCreateFields, f as buildGuestOwnerQuery, h as composeIssueFilterGroups, i as buildIssueIntegrationsPayload, j as devLogger, W as WebSocketCollector, C as ConsoleCollector, N as NetworkCollector, s as selectNetworkLogsForSubmit, k as filterExcludeServiceRelatedLogs, l as filterExcludeServiceRelatedConsoleLogs, m as compactNetworkLogsForTransport, n as CONSOLE_LOG_SUBMIT_LIMIT, o as buildExternalUserPayload, q as shrinkNetworkLogsToFit, r as measureJsonBytes, t as sanitizeString, v as serializeSocketTranscript, w as uploadSocketTranscript, x as getCurrentPageUrl, S as ScreenRecordingController, y as SessionReplayCaptureController, z as preloadModernScreenshot, I as ISSUE_STICKER_INTERNAL_LOG_PREFIX } from "./externalUserPayload-DNGAp9bP.js";
-import { r } from "./three-_bdgDAmI.js";
+import { u as uploadScreenshotDataUrls, a as uploadSignedMediaWithApi, d as directUploadToSignedUrl, p as pristineFetch, g as getElementPosition, c as captureViewportWithElementCrop, b as captureWithModernScreenshot, e as buildJiraCreateFields, f as buildNotionCreateFields, h as buildGuestOwnerQuery, i as composeIssueFilterGroups, j as buildIssueIntegrationsPayload, k as devLogger, W as WebSocketCollector, C as ConsoleCollector, N as NetworkCollector, s as selectNetworkLogsForSubmit, l as filterExcludeServiceRelatedLogs, m as filterExcludeServiceRelatedConsoleLogs, n as compactNetworkLogsForTransport, o as CONSOLE_LOG_SUBMIT_LIMIT, q as buildExternalUserPayload, r as shrinkNetworkLogsToFit, t as measureJsonBytes, v as sanitizeString, w as collectAttachmentUploads, x as hasReplayUpload, y as getCurrentPageUrl, z as createIssueUploadQueues, S as ScreenRecordingController, A as SessionReplayCaptureController, B as preloadModernScreenshot, D as enqueueIssueUploads, E as normalizeUploadMimeType, I as ISSUE_STICKER_INTERNAL_LOG_PREFIX, F as toSessionReplayMeta, G as loadTusClient, H as createIndexedDbPendingUploadStore, J as ATTACHMENT_UPLOAD_DB_NAME, V as VIDEO_UPLOAD_DB_NAME, K as createMediaUploadApi } from "./externalUserPayload-DWcXyz2U.js";
+import { r } from "./three-B228j4M6.js";
 import "react/jsx-runtime";
 import "react";
 const WINDOW_MS = 6e4;
@@ -30,10 +30,11 @@ class AutoIssueRateLimit {
   }
 }
 class IssueStickerHeadlessError extends Error {
-  constructor(code, message, cause) {
+  constructor(code, message, cause, status) {
     super(message);
     this.code = code;
     this.cause = cause;
+    this.status = status;
     this.name = "IssueStickerHeadlessError";
   }
 }
@@ -117,7 +118,8 @@ class HeadlessTransport {
       throw new IssueStickerHeadlessError(
         response.status === 401 ? "MEMBER_AUTH_REQUIRED" : "NETWORK_ERROR",
         extractErrorMessage(json == null ? void 0 : json.error, (json == null ? void 0 : json.message) || `요청 실패: ${response.status}`),
-        json
+        json,
+        response.status
       );
     }
     return json;
@@ -476,21 +478,14 @@ async function captureHeadlessScreenshots({
   excludeSelectors
 }) {
   const targetIsDocumentRoot = target === document.body || target === document.documentElement;
-  const screenshots = await Promise.all([
-    captureWithModernScreenshot({
-      element: document.documentElement,
-      excludeSelectors,
-      width: window.innerWidth,
-      height: window.innerHeight
-    }).catch(() => void 0),
-    ...targetIsDocumentRoot ? [] : [
-      captureWithModernScreenshot({
-        element: target,
-        excludeSelectors
-      }).catch(() => void 0)
-    ]
-  ]);
-  return screenshots.filter(
+  const { fullDataUrl, elementDataUrl } = await captureViewportWithElementCrop({
+    element: target,
+    excludeSelectors
+  });
+  const elementShot = targetIsDocumentRoot || elementDataUrl ? elementDataUrl : await captureWithModernScreenshot({ element: target, excludeSelectors }).catch(
+    () => void 0
+  );
+  return [fullDataUrl, elementShot].filter(
     (dataUrl) => typeof dataUrl === "string" && dataUrl.length > 0
   );
 }
@@ -954,20 +949,6 @@ class HeadlessPendingMedia {
     this.file = null;
   }
 }
-function createReplayFile(snapshot) {
-  return new File([snapshot.payload], "session-replay.gz", {
-    type: "application/gzip"
-  });
-}
-function createSessionReplayMeta(snapshot) {
-  return {
-    window_seconds: snapshot.windowSeconds,
-    event_count: snapshot.eventCount,
-    size_bytes: snapshot.sizeBytes,
-    rrweb_version: snapshot.rrwebVersion,
-    privacy_config_version: snapshot.privacyConfigVersion
-  };
-}
 function createInitialHeadlessSnapshot() {
   return {
     phase: "idle",
@@ -993,6 +974,8 @@ function createInitialHeadlessSnapshot() {
       enabled: true,
       error: null
     },
+    videoUploads: [],
+    attachmentUploads: [],
     formSchema: null,
     filterSchema: null,
     error: null
@@ -1117,12 +1100,8 @@ function buildIssueCreatePayload({
     ...intent ? { intent } : {},
     position: draft.position,
     ...uploads.screenshotUploadIds.length > 0 ? { screenshot_upload_ids: uploads.screenshotUploadIds } : {},
-    ...uploads.videoUpload ? { video_upload_id: uploads.videoUpload.id } : {},
-    ...uploads.replayUpload ? {
-      session_replay_upload_id: uploads.replayUpload.uploadId,
-      session_replay_meta: uploads.replayUpload.meta
-    } : {},
-    ...uploads.socketUpload ? { socket_log_upload_id: uploads.socketUpload.uploadId } : {},
+    ...uploads.videoPending ? { video_pending: true } : {},
+    ...uploads.replayPending ? { session_replay_pending: true } : {},
     console_logs: logs.consoleLogs.length > 0 ? logs.consoleLogs : void 0,
     user_agent: userAgent,
     tenant_id: auth.tenantId,
@@ -1154,27 +1133,25 @@ async function submitHeadlessIssueDraft({
   logs,
   currentUrl,
   userAgent,
-  uploadSessionReplaySnapshot,
+  takeSessionReplaySnapshot,
   getSocketConnections
 }) {
   const screenshotUploads = draft.mediaMode === "screenshot" ? await transport.uploadScreenshotPreviews(draft.screenshotPreviewUrls) : [];
   const screenshotUploadIds = screenshotUploads.map((upload) => upload.id);
-  const videoUpload = draft.mediaMode === "video" && pendingVideoFile ? await transport.uploadSignedMedia(pendingVideoFile, "video") : null;
-  const replayUpload = draft.sessionReplayEnabled ? await uploadSessionReplaySnapshot() : null;
-  const socketSnapshot = await serializeSocketTranscript(getSocketConnections());
-  const socketUpload = socketSnapshot ? await uploadSocketTranscript(
-    {
-      post: (endpoint, body) => transport.request(endpoint, { method: "POST", body }),
-      directUpload: directUploadToSignedUrl
-    },
-    socketSnapshot
-  ) : null;
+  const attachments = await collectAttachmentUploads({
+    takeReplay: draft.sessionReplayEnabled ? takeSessionReplaySnapshot : void 0,
+    getConnections: getSocketConnections
+  });
   const { payload: issueData, stillOverBudget } = buildIssueCreatePayload({
     draft,
     auth,
     config,
     projectId,
-    uploads: { screenshotUploadIds, videoUpload, replayUpload, socketUpload },
+    uploads: {
+      screenshotUploadIds,
+      videoPending: draft.mediaMode === "video" && Boolean(pendingVideoFile),
+      replayPending: hasReplayUpload(attachments)
+    },
     logs,
     currentUrl,
     userAgent
@@ -1186,9 +1163,9 @@ async function submitHeadlessIssueDraft({
     );
   }
   const integrations = await issueRepository.buildIntegrationsPayload(draft, formSchema);
-  const createdIssue = await issueRepository.createIssue({ ...issueData, integrations });
-  await issueRepository.syncDynamicFields(createdIssue, draft, formSchema);
-  return createdIssue;
+  const issue = await issueRepository.createIssue({ ...issueData, integrations });
+  await issueRepository.syncDynamicFields(issue, draft, formSchema);
+  return { issue, attachments };
 }
 const HEADLESS_CAPTURE_STYLE_ID = "issue-sticker-headless-capture-style";
 const HEADLESS_CAPTURE_STYLE = `
@@ -1280,6 +1257,21 @@ const DEFAULT_EXCLUDE_SELECTORS = [
   "#issue-sticker-host",
   '[data-issue-sticker-headless-auth="true"]'
 ];
+function toHeadlessVideoUpload(state) {
+  return {
+    issueId: state.issueId,
+    status: state.status,
+    progress: state.bytesTotal > 0 ? state.bytesSent / state.bytesTotal : 0
+  };
+}
+function toHeadlessAttachmentUpload(state) {
+  return {
+    issueId: state.issueId,
+    kind: state.mediaType === "socket" ? "socket" : "replay",
+    status: state.status,
+    progress: state.bytesTotal > 0 ? state.bytesSent / state.bytesTotal : 0
+  };
+}
 class HeadlessClientImpl {
   constructor(config) {
     var _a;
@@ -1291,6 +1283,7 @@ class HeadlessClientImpl {
     this.captureCleanup = null;
     this.captureSession = null;
     this.suppressNextVideoStopSelection = false;
+    this.destroyed = false;
     if (!((_a = config.apiKey) == null ? void 0 : _a.trim())) {
       throw new IssueStickerHeadlessError("VALIDATION_ERROR", "apiKey가 필요합니다.");
     }
@@ -1314,6 +1307,22 @@ class HeadlessClientImpl {
       },
       getCurrentUrl: () => getCurrentPageUrl() || void 0
     });
+    this.uploadQueues = createIssueUploadQueues({
+      api: createMediaUploadApi({
+        post: (endpoint, body) => this.transport.request(endpoint, { method: "POST", body })
+      }),
+      clientInfo: "issue-sticker-sdk",
+      videoStore: createIndexedDbPendingUploadStore(VIDEO_UPLOAD_DB_NAME),
+      attachmentStore: createIndexedDbPendingUploadStore(ATTACHMENT_UPLOAD_DB_NAME),
+      loadTus: loadTusClient,
+      onEvent: (event) => event.mediaType === "video" ? void this.handleVideoUploadEvent(event) : this.handleAttachmentUploadEvent(event)
+    });
+    this.uploadQueues.video.subscribe((states) => {
+      this.state.setSnapshot({ videoUploads: states.map(toHeadlessVideoUpload) });
+    });
+    this.uploadQueues.attachments.subscribe((states) => {
+      this.state.setSnapshot({ attachmentUploads: states.map(toHeadlessAttachmentUpload) });
+    });
     this.logCollectors = new HeadlessLogCollectors(this.config, getApiBaseUrl);
     this.screenRecordingController = new ScreenRecordingController({
       onStopped: (file) => {
@@ -1366,7 +1375,7 @@ class HeadlessClientImpl {
     this.state.setSnapshot({ phase: "loadingIssues", error: null });
     try {
       const issues = await this.issueRepository.fetchAllIssueStickers(filters);
-      this.state.setSnapshot({ issues, phase: "idle" });
+      this.state.setSnapshot({ issues: this.keepKnownVideos(issues), phase: "idle" });
     } catch (error) {
       const nextError = this.toHeadlessError(error);
       this.state.setSnapshot({ phase: "idle", error: nextError });
@@ -1512,7 +1521,8 @@ class HeadlessClientImpl {
         intent: input.intent,
         dynamicFields: input.dynamicFields ?? {}
       };
-      const createdIssue = await submitHeadlessIssueDraft({
+      const videoFile = submission.mediaMode === "video" ? this.pendingMedia.videoFile : null;
+      const { issue: createdIssue, attachments } = await submitHeadlessIssueDraft({
         draft: submission,
         pendingVideoFile: this.pendingMedia.videoFile,
         transport: this.transport,
@@ -1524,9 +1534,17 @@ class HeadlessClientImpl {
         logs: this.logCollectors.collect(),
         currentUrl: getCurrentPageUrl(),
         userAgent: typeof navigator !== "undefined" ? navigator.userAgent : void 0,
-        uploadSessionReplaySnapshot: () => this.uploadSessionReplaySnapshot(),
+        takeSessionReplaySnapshot: () => this.takeSessionReplaySnapshot(),
         getSocketConnections: () => this.logCollectors.getSocketConnections()
       });
+      await enqueueIssueUploads({
+        videoQueue: this.uploadQueues.video,
+        attachmentQueue: this.uploadQueues.attachments,
+        issueId: createdIssue.id,
+        projectKey: this.state.requireProjectId(),
+        video: videoFile ? { blob: videoFile, mimeType: normalizeUploadMimeType(videoFile.type, "video") } : null,
+        attachments
+      });
       this.clearCaptureListeners();
       this.clearPendingMedia();
       this.captureSession = null;
@@ -1543,6 +1561,9 @@ class HeadlessClientImpl {
       throw nextError;
     }
   }
+  retryVideoUpload(issueId) {
+    this.uploadQueues.retry(issueId);
+  }
   async createIssue(input) {
     var _a, _b;
     try {
@@ -1569,7 +1590,7 @@ class HeadlessClientImpl {
         () => captureHeadlessScreenshots({ target, excludeSelectors: this.getExcludeSelectors() })
       );
       const formSchema = this.snapshot.auth.mode === "member" && Object.keys(input.dynamicFields ?? {}).length > 0 ? await this.loadFormSchema({}) : null;
-      const createdIssue = await submitHeadlessIssueDraft({
+      const { issue: createdIssue, attachments } = await submitHeadlessIssueDraft({
         draft: {
           ...draft,
           screenshotPreviewUrls,
@@ -1587,9 +1608,17 @@ class HeadlessClientImpl {
         logs,
         currentUrl: getCurrentPageUrl(),
         userAgent: typeof navigator !== "undefined" ? navigator.userAgent : void 0,
-        uploadSessionReplaySnapshot: () => this.uploadSessionReplaySnapshot(),
+        takeSessionReplaySnapshot: () => this.takeSessionReplaySnapshot(),
         getSocketConnections: () => this.logCollectors.getSocketConnections()
       });
+      await enqueueIssueUploads({
+        videoQueue: this.uploadQueues.video,
+        attachmentQueue: this.uploadQueues.attachments,
+        issueId: createdIssue.id,
+        projectKey: this.state.requireProjectId(),
+        video: null,
+        attachments
+      });
       this.state.setSnapshot({
         issues: [createdIssue, ...this.snapshot.issues]
       });
@@ -1642,6 +1671,8 @@ class HeadlessClientImpl {
     void this.sessionReplayController.refresh();
   }
   destroy() {
+    this.destroyed = true;
+    this.uploadQueues.stop();
     this.clearCaptureListeners();
     this.suppressNextVideoStopSelection = true;
     this.captureSession = null;
@@ -1675,6 +1706,11 @@ class HeadlessClientImpl {
         filterSchema: { groups: [], unavailableReason: "public-mode" }
       });
       this.logCollectors.start();
+      const { video, attachments } = this.uploadQueues;
+      void this.uploadQueues.resume([result.projectId]).then(() => {
+        void video.pruneExpired();
+        void attachments.pruneExpired();
+      });
       this.authBridge.mountHiddenBridgeFrame();
       void this.sessionReplayController.initialize();
     } catch (error) {
@@ -1688,27 +1724,53 @@ class HeadlessClientImpl {
     if (!sessionReplay.enabled || !sessionReplay.canAttach) return null;
     try {
       const snapshot = await this.sessionReplayController.takeSnapshot();
-      return snapshot ? createSessionReplayMeta(snapshot) : null;
+      return snapshot ? toSessionReplayMeta(snapshot) : null;
     } catch {
       return null;
     }
   }
-  async uploadSessionReplaySnapshot() {
+  async takeSessionReplaySnapshot() {
     const sessionReplay = this.sessionReplayController.getSnapshot();
     if (!sessionReplay.enabled || !sessionReplay.canAttach) return null;
-    try {
-      const snapshot = await this.sessionReplayController.takeSnapshot();
-      if (!snapshot) return null;
-      if (snapshot.eventCount <= 0) return null;
-      const upload = await this.transport.uploadSignedMedia(createReplayFile(snapshot), "replay");
-      return {
-        uploadId: upload.id,
-        url: upload.url,
-        meta: createSessionReplayMeta(snapshot)
-      };
-    } catch {
-      return null;
-    }
+    return this.sessionReplayController.takeSnapshot().catch(() => null);
+  }
+  /** 스티커 목록에는 영상 URL 이 없다. 업로드 완료 때 받아 둔 URL 을 같은 이슈에 남긴다. */
+  keepKnownVideos(issues) {
+    const known = new Map(
+      this.snapshot.issues.flatMap((issue) => issue.video ? [[issue.id, issue.video]] : [])
+    );
+    return issues.map(
+      (issue) => !issue.video && known.has(issue.id) ? { ...issue, video: known.get(issue.id) } : issue
+    );
+  }
+  /**
+   * 업로드가 끝나면 목록·상세의 같은 이슈에 영상 상태를 반영한다. 완료는 재조회해 영상 URL 까지
+   * 채우고, 재조회가 안 되면(config.user 없는 게스트 등) 상태만 고친다.
+   */
+  async handleVideoUploadEvent(event) {
+    if (event.type === "failed" || this.destroyed) return;
+    const refreshed = event.type === "completed" ? await this.issueRepository.openIssue(event.issueId).catch(() => null) : null;
+    if (this.destroyed) return;
+    const videoStatus = event.type === "completed" ? "ready" : "failed";
+    const { issues, activeIssue } = this.snapshot;
+    this.state.setSnapshot({
+      issues: issues.map(
+        (issue) => issue.id === event.issueId ? { ...issue, video: (refreshed == null ? void 0 : refreshed.video) ?? issue.video, video_status: videoStatus } : issue
+      ),
+      activeIssue: (activeIssue == null ? void 0 : activeIssue.id) === event.issueId ? refreshed ?? { ...activeIssue, video_status: videoStatus } : activeIssue
+    });
+  }
+  /** 리플레이가 연결되거나 포기되면 목록·상세의 같은 이슈에 상태를 반영한다. 소켓 전사는 상태가 없다. */
+  handleAttachmentUploadEvent(event) {
+    if (event.mediaType !== "replay" || event.type === "failed" || this.destroyed) return;
+    const replayStatus = event.type === "completed" ? "ready" : "failed";
+    const { issues, activeIssue } = this.snapshot;
+    this.state.setSnapshot({
+      issues: issues.map(
+        (issue) => issue.id === event.issueId ? { ...issue, replay_status: replayStatus } : issue
+      ),
+      activeIssue: (activeIssue == null ? void 0 : activeIssue.id) === event.issueId ? { ...activeIssue, replay_status: replayStatus } : activeIssue
+    });
   }
   async handleRecordedVideoStopped(file) {
     if (this.suppressNextVideoStopSelection) {