@akbarsafari00/bonyan-content-type-builder 5.52.1-fa.2

package/dist/admin/components/AIChat/hooks/useFeedback.mjs

@@ -0,0 +1,77 @@
+import { useState } from 'react';
+import { useNotification } from '@strapi/admin/strapi-admin';
+import 'react/jsx-runtime';
+import '../../CTBSession/sessionContext.mjs';
+import { useCTBTracking } from '../../CTBSession/useCTBTracking.mjs';
+import { useStrapiChat } from '../providers/ChatProvider.mjs';
+import { useFetchSendFeedback } from './useAIFetch.mjs';
+import { useTranslations } from './useTranslations.mjs';
+
+const useFeedback = ()=>{
+    const { fetch: sendFeedback, isPending, error } = useFetchSendFeedback();
+    const { id, messages, schemas } = useStrapiChat();
+    const { toggleNotification } = useNotification();
+    const { trackUsage } = useCTBTracking();
+    const { t } = useTranslations();
+    // Keep track of messages that have received feedback
+    const [votedMessages, setVotedMessages] = useState({});
+    const hasVoted = (messageId)=>{
+        return !!votedMessages[messageId];
+    };
+    const upvoteMessage = (messageId)=>{
+        // Prevent spamming upvote
+        if (hasVoted(messageId)) {
+            return Promise.resolve();
+        }
+        trackUsage('didVoteAnswer', {
+            value: 'positive'
+        });
+        toggleNotification({
+            type: 'success',
+            message: t('chat.feedback.submitted', 'Thank you for your feedback! ')
+        });
+        // Record this message as upvoted
+        setVotedMessages((prev)=>({
+                ...prev,
+                [messageId]: 'upvote'
+            }));
+        return sendFeedback({
+            body: {
+                type: 'upvote',
+                chatId: id,
+                messageId,
+                messages,
+                schemas
+            }
+        });
+    };
+    const downvoteMessage = (messageId, feedback, reasons)=>{
+        trackUsage('didVoteAnswer', {
+            value: 'negative'
+        });
+        toggleNotification({
+            type: 'success',
+            message: t('chat.feedback.submitted', 'Thank you for your feedback! ')
+        });
+        return sendFeedback({
+            body: {
+                type: 'downvote',
+                chatId: id,
+                messageId,
+                messages,
+                feedback,
+                reasons,
+                schemas
+            }
+        });
+    };
+    return {
+        upvoteMessage,
+        downvoteMessage,
+        isPending,
+        error
+    };
+};
+
+export { useFeedback };
+//# sourceMappingURL=useFeedback.mjs.map

package/dist/admin/components/AIChat/hooks/useFeedback.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFeedback.mjs","sources":["../../../../../admin/src/components/AIChat/hooks/useFeedback.ts"],"sourcesContent":["import { useState } from 'react';\r\n\r\nimport { useNotification } from '@strapi/admin/strapi-admin';\r\n\r\nimport { useCTBTracking } from '../../CTBSession/ctbSession';\r\nimport { useStrapiChat } from '../providers/ChatProvider';\r\n\r\nimport { FeedbackReasonIds, useFetchSendFeedback } from './useAIFetch';\r\nimport { useTranslations } from './useTranslations';\r\n\r\nexport const useFeedback = () => {\r\n  const { fetch: sendFeedback, isPending, error } = useFetchSendFeedback();\r\n  const { id, messages, schemas } = useStrapiChat();\r\n  const { toggleNotification } = useNotification();\r\n  const { trackUsage } = useCTBTracking();\r\n  const { t } = useTranslations();\r\n\r\n  // Keep track of messages that have received feedback\r\n  const [votedMessages, setVotedMessages] = useState<Record<string, 'upvote' | 'downvote'>>({});\r\n\r\n  const hasVoted = (messageId: string) => {\r\n    return !!votedMessages[messageId];\r\n  };\r\n\r\n  const upvoteMessage = (messageId: string) => {\r\n    // Prevent spamming upvote\r\n    if (hasVoted(messageId)) {\r\n      return Promise.resolve();\r\n    }\r\n\r\n    trackUsage('didVoteAnswer', {\r\n      value: 'positive',\r\n    });\r\n\r\n    toggleNotification({\r\n      type: 'success',\r\n      message: t('chat.feedback.submitted', 'Thank you for your feedback! '),\r\n    });\r\n\r\n    // Record this message as upvoted\r\n    setVotedMessages((prev) => ({ ...prev, [messageId]: 'upvote' }));\r\n\r\n    return sendFeedback({\r\n      body: {\r\n        type: 'upvote',\r\n        chatId: id,\r\n        messageId,\r\n        messages,\r\n        schemas,\r\n      },\r\n    });\r\n  };\r\n\r\n  const downvoteMessage = (messageId: string, feedback: string, reasons: FeedbackReasonIds[]) => {\r\n    trackUsage('didVoteAnswer', {\r\n      value: 'negative',\r\n    });\r\n\r\n    toggleNotification({\r\n      type: 'success',\r\n      message: t('chat.feedback.submitted', 'Thank you for your feedback! '),\r\n    });\r\n\r\n    return sendFeedback({\r\n      body: {\r\n        type: 'downvote',\r\n        chatId: id,\r\n        messageId,\r\n        messages,\r\n        feedback,\r\n        reasons,\r\n        schemas,\r\n      },\r\n    });\r\n  };\r\n\r\n  return { upvoteMessage, downvoteMessage, isPending, error };\r\n};\r\n"],"names":["useFeedback","fetch","sendFeedback","isPending","error","useFetchSendFeedback","id","messages","schemas","useStrapiChat","toggleNotification","useNotification","trackUsage","useCTBTracking","t","useTranslations","votedMessages","setVotedMessages","useState","hasVoted","messageId","upvoteMessage","Promise","resolve","value","type","message","prev","body","chatId","downvoteMessage","feedback","reasons"],"mappings":";;;;;;;;;MAUaA,WAAAA,GAAc,IAAA;IACzB,MAAM,EAAEC,OAAOC,YAAY,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGC,oBAAAA,EAAAA;AAClD,IAAA,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAEC,OAAO,EAAE,GAAGC,aAAAA,EAAAA;IAClC,MAAM,EAAEC,kBAAkB,EAAE,GAAGC,eAAAA,EAAAA;IAC/B,MAAM,EAAEC,UAAU,EAAE,GAAGC,cAAAA,EAAAA;IACvB,MAAM,EAAEC,CAAC,EAAE,GAAGC,eAAAA,EAAAA;;AAGd,IAAA,MAAM,CAACC,aAAAA,EAAeC,gBAAAA,CAAiB,GAAGC,SAAgD,EAAC,CAAA;AAE3F,IAAA,MAAMC,WAAW,CAACC,SAAAA,GAAAA;AAChB,QAAA,OAAO,CAAC,CAACJ,aAAa,CAACI,SAAAA,CAAU;AACnC,IAAA,CAAA;AAEA,IAAA,MAAMC,gBAAgB,CAACD,SAAAA,GAAAA;;AAErB,QAAA,IAAID,SAASC,SAAAA,CAAAA,EAAY;AACvB,YAAA,OAAOE,QAAQC,OAAO,EAAA;AACxB,QAAA;AAEAX,QAAAA,UAAAA,CAAW,eAAA,EAAiB;YAC1BY,KAAAA,EAAO;AACT,SAAA,CAAA;QAEAd,kBAAAA,CAAmB;YACjBe,IAAAA,EAAM,SAAA;AACNC,YAAAA,OAAAA,EAASZ,EAAE,yBAAA,EAA2B,+BAAA;AACxC,SAAA,CAAA;;QAGAG,gBAAAA,CAAiB,CAACU,QAAU;AAAE,gBAAA,GAAGA,IAAI;AAAE,gBAAA,CAACP,YAAY;aAAS,CAAA,CAAA;AAE7D,QAAA,OAAOlB,YAAAA,CAAa;YAClB0B,IAAAA,EAAM;gBACJH,IAAAA,EAAM,QAAA;gBACNI,MAAAA,EAAQvB,EAAAA;AACRc,gBAAAA,SAAAA;AACAb,gBAAAA,QAAAA;AACAC,gBAAAA;AACF;AACF,SAAA,CAAA;AACF,IAAA,CAAA;IAEA,MAAMsB,eAAAA,GAAkB,CAACV,SAAAA,EAAmBW,QAAAA,EAAkBC,OAAAA,GAAAA;AAC5DpB,QAAAA,UAAAA,CAAW,eAAA,EAAiB;YAC1BY,KAAAA,EAAO;AACT,SAAA,CAAA;QAEAd,kBAAAA,CAAmB;YACjBe,IAAAA,EAAM,SAAA;AACNC,YAAAA,OAAAA,EAASZ,EAAE,yBAAA,EAA2B,+BAAA;AACxC,SAAA,CAAA;AAEA,QAAA,OAAOZ,YAAAA,CAAa;YAClB0B,IAAAA,EAAM;gBACJH,IAAAA,EAAM,UAAA;gBACNI,MAAAA,EAAQvB,EAAAA;AACRc,gBAAAA,SAAAA;AACAb,gBAAAA,QAAAA;AACAwB,gBAAAA,QAAAA;AACAC,gBAAAA,OAAAA;AACAxB,gBAAAA;AACF;AACF,SAAA,CAAA;AACF,IAAA,CAAA;IAEA,OAAO;AAAEa,QAAAA,aAAAA;AAAeS,QAAAA,eAAAA;AAAiB3B,QAAAA,SAAAA;AAAWC,QAAAA;AAAM,KAAA;AAC5D;;;;"}

package/dist/admin/components/AIChat/hooks/useFigmaUpload.js

@@ -0,0 +1,206 @@
+'use strict';
+
+var React = require('react');
+
+/**================================================================================
+ * Constants
+ *================================================================================*/ const FIGMA_TOKEN_STORAGE_KEY = 'strapi-ai-figma-token';
+/**================================================================================
+ * Token Storage Utils
+ *================================================================================*/ /**
+ * Get Figma token from localStorage
+ */ const getFigmaToken = ()=>{
+    try {
+        return localStorage.getItem(FIGMA_TOKEN_STORAGE_KEY) || '';
+    } catch (error) {
+        console.error('Error accessing localStorage:', error);
+        return '';
+    }
+};
+/**
+ * Save Figma token to localStorage
+ */ const saveFigmaToken = (token)=>{
+    try {
+        localStorage.setItem(FIGMA_TOKEN_STORAGE_KEY, token);
+    } catch (error) {
+        console.error('Error saving to localStorage:', error);
+    }
+};
+/**
+ * Check if Figma token exists in localStorage
+ */ const hasFigmaToken = ()=>{
+    return !!getFigmaToken();
+};
+/**================================================================================
+ * Utils
+ *================================================================================*/ /**
+ * Extract file key and node ID from Figma URL
+ * @param figmaUrl - Figma URL (e.g., https://www.figma.com/file/KEY/Title)
+ */ const extractNodeFromFigmaUrl = (figmaUrl)=>{
+    const figmaUrlPattern = /figma\.com\/(?:file|design)\/([a-zA-Z0-9]+)\/.*[?&]node-id=([^&]+)/;
+    const match = figmaUrl.match(figmaUrlPattern);
+    if (!match) {
+        throw new Error('Invalid Figma URL');
+    }
+    const fileKey = match[1];
+    const nodeId = decodeURIComponent(match[2]).replace(/-/g, ':');
+    return {
+        fileKey,
+        nodeId
+    };
+};
+/**
+ * Get token and validate it's available
+ * @throws Error if token is not available
+ */ const getValidToken = ()=>{
+    const token = getFigmaToken();
+    if (!token) {
+        throw new Error('Figma API token is required');
+    }
+    return token;
+};
+/**
+ * Fetch Figma file data using the API
+ * @param fileKey - Figma file key
+ * @param nodeId - Figma node ID
+ */ const fetchFigmaNode = async (fileKey, nodeId)=>{
+    const token = getValidToken();
+    try {
+        const apiUrl = `https://api.figma.com/v1/files/${fileKey}/nodes?ids=${nodeId}`;
+        const response = await fetch(apiUrl, {
+            headers: {
+                'X-Figma-Token': token
+            }
+        });
+        if (!response.ok) {
+            throw new Error(`Figma API error: ${response.status} ${response.statusText}`);
+        }
+        const nodes = await response.json();
+        return nodes.nodes[nodeId];
+    } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : 'Failed to fetch Figma data';
+        throw new Error(errorMessage);
+    }
+};
+const findFramesInNode = (node)=>{
+    const frames = [];
+    if (node.type === 'FRAME') {
+        frames.push({
+            id: node.id,
+            name: node.name
+        });
+        return frames;
+    }
+    if (node.children && node.children.length > 0) {
+        for (const child of node.children){
+            // Continue searching in children if the current node is not a FRAME
+            frames.push(...findFramesInNode(child));
+        }
+    }
+    return frames;
+};
+/**
+ * Fetch images for specific nodes from the Figma API
+ * @param fileKey - Figma file key
+ * @param nodeIds - Array of node IDs to render
+ */ const fetchFigmaNodeImages = async (fileKey, nodeIds)=>{
+    const token = getValidToken();
+    if (nodeIds.length === 0) {
+        return {
+            images: {}
+        };
+    }
+    try {
+        // Max 50 node IDs per request according to Figma API docs
+        // We might need to chunk requests if nodeIds is very large
+        const idsQueryParam = nodeIds.slice(0, 50).join(',');
+        const apiUrl = `https://api.figma.com/v1/images/${fileKey}?ids=${idsQueryParam}&format=png&scale=0.4`;
+        const response = await fetch(apiUrl, {
+            headers: {
+                'X-Figma-Token': token
+            }
+        });
+        if (!response.ok) {
+            const errorData = await response.text();
+            throw new Error(`Figma API image error: ${response.status} ${response.statusText} - ${errorData}`);
+        }
+        const result = await response.json();
+        if (result.err) {
+            throw new Error(`Figma API image error: ${result.err}`);
+        }
+        return result;
+    } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : 'Failed to fetch Figma node images';
+        throw new Error(errorMessage);
+    }
+};
+/**================================================================================
+ * Hooks
+ *================================================================================*/ function useFigmaUpload({ onSuccess, onError } = {}) {
+    const [isLoading, setIsLoading] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    /**
+   * Main method to process a Figma URL
+   * @param figmaUrl - Figma URL to process
+   */ const processFigmaUrl = async (figmaUrl)=>{
+        try {
+            // Check if token exists before proceeding
+            if (!hasFigmaToken()) {
+                const errorMessage = 'Figma API token is required';
+                setError(errorMessage);
+                onError?.(errorMessage);
+                throw new Error(errorMessage);
+            }
+            setIsLoading(true);
+            setError(null);
+            // 1. Extract file key from URL
+            const { fileKey, nodeId: selectedNode } = extractNodeFromFigmaUrl(figmaUrl);
+            // 2. Fetch base data from Figma API to get structure
+            const figmaData = await fetchFigmaNode(fileKey, selectedNode);
+            if (!figmaData.document) return;
+            // 3. Find frame nodes with their names
+            const frames = findFramesInNode(figmaData.document);
+            // Create a map of ID to name for later use
+            const frameNameMap = new Map(frames.map((frame)=>[
+                    frame.id,
+                    frame.name
+                ]));
+            // Get just the IDs for the API call
+            const frameIds = frames.map((frame)=>frame.id);
+            // 4. Fetch images for the identified nodes
+            const imageResponse = await fetchFigmaNodeImages(fileKey, frameIds);
+            const images = imageResponse.images;
+            // Use the name from our map instead of just the ID
+            const figmaImages = Object.entries(images).map(([id, url])=>({
+                    id,
+                    type: 'file',
+                    filename: frameNameMap.get(id),
+                    mediaType: 'image/png',
+                    url,
+                    status: 'ready'
+                }));
+            onSuccess?.(figmaImages);
+            return figmaImages;
+        } catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Unknown error processing Figma URL';
+            setError(errorMessage);
+            onError?.(errorMessage);
+            console.error('Error processing Figma URL:', err);
+            throw err;
+        } finally{
+            setIsLoading(false);
+        }
+    };
+    return {
+        processFigmaUrl,
+        isLoading: isLoading,
+        error: error
+    };
+}
+
+exports.FIGMA_TOKEN_STORAGE_KEY = FIGMA_TOKEN_STORAGE_KEY;
+exports.getFigmaToken = getFigmaToken;
+exports.hasFigmaToken = hasFigmaToken;
+exports.saveFigmaToken = saveFigmaToken;
+exports.useFigmaUpload = useFigmaUpload;
+//# sourceMappingURL=useFigmaUpload.js.map

package/dist/admin/components/AIChat/hooks/useFigmaUpload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFigmaUpload.js","sources":["../../../../../admin/src/components/AIChat/hooks/useFigmaUpload.ts"],"sourcesContent":["import { useState } from 'react';\r\n\r\nimport type { Attachment } from '../lib/types/attachments';\r\n\r\n/**================================================================================\r\n * Constants\r\n *================================================================================*/\r\nexport const FIGMA_TOKEN_STORAGE_KEY = 'strapi-ai-figma-token';\r\n\r\n/**================================================================================\r\n * Types\r\n *================================================================================*/\r\nexport interface FigmaNodeData {\r\n  id: string;\r\n  name: string;\r\n  type: string;\r\n  children?: FigmaNodeData[];\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  [key: string]: any; // For other properties that Figma nodes may have\r\n}\r\n\r\nexport interface FigmaFileData {\r\n  document: FigmaNodeData;\r\n  schemaVersion: number;\r\n  name: string;\r\n  lastModified: string;\r\n  thumbnailUrl: string;\r\n  version: string;\r\n  role: string;\r\n}\r\n\r\nexport interface FigmaImage extends Attachment {}\r\n\r\ninterface UseFigmaUploadOptions {\r\n  onSuccess?: (attachments: FigmaImage[]) => void;\r\n  onError?: (error: string) => void;\r\n}\r\n\r\n/**================================================================================\r\n * Token Storage Utils\r\n *================================================================================*/\r\n\r\n/**\r\n * Get Figma token from localStorage\r\n */\r\nexport const getFigmaToken = (): string => {\r\n  try {\r\n    return localStorage.getItem(FIGMA_TOKEN_STORAGE_KEY) || '';\r\n  } catch (error) {\r\n    console.error('Error accessing localStorage:', error);\r\n    return '';\r\n  }\r\n};\r\n\r\n/**\r\n * Save Figma token to localStorage\r\n */\r\nexport const saveFigmaToken = (token: string): void => {\r\n  try {\r\n    localStorage.setItem(FIGMA_TOKEN_STORAGE_KEY, token);\r\n  } catch (error) {\r\n    console.error('Error saving to localStorage:', error);\r\n  }\r\n};\r\n\r\n/**\r\n * Check if Figma token exists in localStorage\r\n */\r\nexport const hasFigmaToken = (): boolean => {\r\n  return !!getFigmaToken();\r\n};\r\n\r\n/**================================================================================\r\n * Utils\r\n *================================================================================*/\r\n\r\n/**\r\n * Extract file key and node ID from Figma URL\r\n * @param figmaUrl - Figma URL (e.g., https://www.figma.com/file/KEY/Title)\r\n */\r\nconst extractNodeFromFigmaUrl = (figmaUrl: string) => {\r\n  const figmaUrlPattern = /figma\\.com\\/(?:file|design)\\/([a-zA-Z0-9]+)\\/.*[?&]node-id=([^&]+)/;\r\n  const match = figmaUrl.match(figmaUrlPattern);\r\n\r\n  if (!match) {\r\n    throw new Error('Invalid Figma URL');\r\n  }\r\n\r\n  const fileKey = match[1];\r\n  const nodeId = decodeURIComponent(match[2]).replace(/-/g, ':');\r\n\r\n  return { fileKey, nodeId };\r\n};\r\n\r\n/**\r\n * Get token and validate it's available\r\n * @throws Error if token is not available\r\n */\r\nconst getValidToken = (): string => {\r\n  const token = getFigmaToken();\r\n  if (!token) {\r\n    throw new Error('Figma API token is required');\r\n  }\r\n  return token;\r\n};\r\n\r\n/**\r\n * Fetch Figma file data using the API\r\n * @param fileKey - Figma file key\r\n * @param nodeId - Figma node ID\r\n */\r\nconst fetchFigmaNode = async (fileKey: string, nodeId: string): Promise<FigmaFileData> => {\r\n  const token = getValidToken();\r\n\r\n  try {\r\n    const apiUrl = `https://api.figma.com/v1/files/${fileKey}/nodes?ids=${nodeId}`;\r\n\r\n    const response = await fetch(apiUrl, {\r\n      headers: {\r\n        'X-Figma-Token': token,\r\n      },\r\n    });\r\n\r\n    if (!response.ok) {\r\n      throw new Error(`Figma API error: ${response.status} ${response.statusText}`);\r\n    }\r\n\r\n    const nodes = await response.json();\r\n\r\n    return nodes.nodes[nodeId];\r\n  } catch (err) {\r\n    const errorMessage = err instanceof Error ? err.message : 'Failed to fetch Figma data';\r\n    throw new Error(errorMessage);\r\n  }\r\n};\r\n\r\n/**\r\n * Recursively searches the node tree for FRAME nodes.\r\n * It stops searching within a branch once a FRAME is found.\r\n * @param node - The current FigmaNodeData to inspect.\r\n */\r\ninterface FrameInfo {\r\n  id: string;\r\n  name: string;\r\n}\r\n\r\nconst findFramesInNode = (node: FigmaNodeData): FrameInfo[] => {\r\n  const frames: FrameInfo[] = [];\r\n  if (node.type === 'FRAME') {\r\n    frames.push({\r\n      id: node.id,\r\n      name: node.name,\r\n    });\r\n    return frames;\r\n  }\r\n\r\n  if (node.children && node.children.length > 0) {\r\n    for (const child of node.children) {\r\n      // Continue searching in children if the current node is not a FRAME\r\n      frames.push(...findFramesInNode(child));\r\n    }\r\n  }\r\n\r\n  return frames;\r\n};\r\n\r\n/**\r\n * Fetch images for specific nodes from the Figma API\r\n * @param fileKey - Figma file key\r\n * @param nodeIds - Array of node IDs to render\r\n */\r\nconst fetchFigmaNodeImages = async (\r\n  fileKey: string,\r\n  nodeIds: string[]\r\n): Promise<{ images: Record<string, string> }> => {\r\n  const token = getValidToken();\r\n\r\n  if (nodeIds.length === 0) {\r\n    return { images: {} };\r\n  }\r\n  try {\r\n    // Max 50 node IDs per request according to Figma API docs\r\n    // We might need to chunk requests if nodeIds is very large\r\n    const idsQueryParam = nodeIds.slice(0, 50).join(',');\r\n    const apiUrl = `https://api.figma.com/v1/images/${fileKey}?ids=${idsQueryParam}&format=png&scale=0.4`;\r\n\r\n    const response = await fetch(apiUrl, {\r\n      headers: { 'X-Figma-Token': token },\r\n    });\r\n\r\n    if (!response.ok) {\r\n      const errorData = await response.text();\r\n      throw new Error(\r\n        `Figma API image error: ${response.status} ${response.statusText} - ${errorData}`\r\n      );\r\n    }\r\n\r\n    const result = await response.json();\r\n    if (result.err) {\r\n      throw new Error(`Figma API image error: ${result.err}`);\r\n    }\r\n\r\n    return result as { images: Record<string, string> };\r\n  } catch (err) {\r\n    const errorMessage = err instanceof Error ? err.message : 'Failed to fetch Figma node images';\r\n    throw new Error(errorMessage);\r\n  }\r\n};\r\n\r\n/**================================================================================\r\n * Hooks\r\n *================================================================================*/\r\nexport function useFigmaUpload({ onSuccess, onError }: UseFigmaUploadOptions = {}) {\r\n  const [isLoading, setIsLoading] = useState(false);\r\n  const [error, setError] = useState<string | null>(null);\r\n\r\n  /**\r\n   * Main method to process a Figma URL\r\n   * @param figmaUrl - Figma URL to process\r\n   */\r\n  const processFigmaUrl = async (figmaUrl: string) => {\r\n    try {\r\n      // Check if token exists before proceeding\r\n      if (!hasFigmaToken()) {\r\n        const errorMessage = 'Figma API token is required';\r\n        setError(errorMessage);\r\n        onError?.(errorMessage);\r\n        throw new Error(errorMessage);\r\n      }\r\n\r\n      setIsLoading(true);\r\n      setError(null);\r\n\r\n      // 1. Extract file key from URL\r\n      const { fileKey, nodeId: selectedNode } = extractNodeFromFigmaUrl(figmaUrl);\r\n\r\n      // 2. Fetch base data from Figma API to get structure\r\n      const figmaData = await fetchFigmaNode(fileKey, selectedNode);\r\n      if (!figmaData.document) return;\r\n\r\n      // 3. Find frame nodes with their names\r\n      const frames = findFramesInNode(figmaData.document);\r\n      // Create a map of ID to name for later use\r\n      const frameNameMap = new Map(frames.map((frame) => [frame.id, frame.name]));\r\n      // Get just the IDs for the API call\r\n      const frameIds = frames.map((frame) => frame.id);\r\n\r\n      // 4. Fetch images for the identified nodes\r\n      const imageResponse = await fetchFigmaNodeImages(fileKey, frameIds);\r\n      const images = imageResponse.images;\r\n\r\n      // Use the name from our map instead of just the ID\r\n      const figmaImages = Object.entries(images).map(\r\n        ([id, url]) =>\r\n          ({\r\n            id,\r\n            type: 'file',\r\n            filename: frameNameMap.get(id),\r\n            mediaType: 'image/png',\r\n            url,\r\n            status: 'ready',\r\n          }) satisfies FigmaImage\r\n      );\r\n\r\n      onSuccess?.(figmaImages);\r\n      return figmaImages;\r\n    } catch (err) {\r\n      const errorMessage =\r\n        err instanceof Error ? err.message : 'Unknown error processing Figma URL';\r\n      setError(errorMessage);\r\n      onError?.(errorMessage);\r\n      console.error('Error processing Figma URL:', err);\r\n      throw err;\r\n    } finally {\r\n      setIsLoading(false);\r\n    }\r\n  };\r\n\r\n  return {\r\n    processFigmaUrl,\r\n    isLoading: isLoading,\r\n    error: error,\r\n  };\r\n}\r\n"],"names":["FIGMA_TOKEN_STORAGE_KEY","getFigmaToken","localStorage","getItem","error","console","saveFigmaToken","token","setItem","hasFigmaToken","extractNodeFromFigmaUrl","figmaUrl","figmaUrlPattern","match","Error","fileKey","nodeId","decodeURIComponent","replace","getValidToken","fetchFigmaNode","apiUrl","response","fetch","headers","ok","status","statusText","nodes","json","err","errorMessage","message","findFramesInNode","node","frames","type","push","id","name","children","length","child","fetchFigmaNodeImages","nodeIds","images","idsQueryParam","slice","join","errorData","text","result","useFigmaUpload","onSuccess","onError","isLoading","setIsLoading","useState","setError","processFigmaUrl","selectedNode","figmaData","document","frameNameMap","Map","map","frame","frameIds","imageResponse","figmaImages","Object","entries","url","filename","get","mediaType"],"mappings":";;;;AAIA;;qFAGO,MAAMA,uBAAAA,GAA0B;AA+BvC;;;;UAOaC,aAAAA,GAAgB,IAAA;IAC3B,IAAI;QACF,OAAOC,YAAAA,CAAaC,OAAO,CAACH,uBAAAA,CAAAA,IAA4B,EAAA;AAC1D,IAAA,CAAA,CAAE,OAAOI,KAAAA,EAAO;QACdC,OAAAA,CAAQD,KAAK,CAAC,+BAAA,EAAiCA,KAAAA,CAAAA;QAC/C,OAAO,EAAA;AACT,IAAA;AACF;AAEA;;IAGO,MAAME,cAAAA,GAAiB,CAACC,KAAAA,GAAAA;IAC7B,IAAI;QACFL,YAAAA,CAAaM,OAAO,CAACR,uBAAAA,EAAyBO,KAAAA,CAAAA;AAChD,IAAA,CAAA,CAAE,OAAOH,KAAAA,EAAO;QACdC,OAAAA,CAAQD,KAAK,CAAC,+BAAA,EAAiCA,KAAAA,CAAAA;AACjD,IAAA;AACF;AAEA;;UAGaK,aAAAA,GAAgB,IAAA;AAC3B,IAAA,OAAO,CAAC,CAACR,aAAAA,EAAAA;AACX;AAEA;;;;;IAQA,MAAMS,0BAA0B,CAACC,QAAAA,GAAAA;AAC/B,IAAA,MAAMC,eAAAA,GAAkB,oEAAA;IACxB,MAAMC,KAAAA,GAAQF,QAAAA,CAASE,KAAK,CAACD,eAAAA,CAAAA;AAE7B,IAAA,IAAI,CAACC,KAAAA,EAAO;AACV,QAAA,MAAM,IAAIC,KAAAA,CAAM,mBAAA,CAAA;AAClB,IAAA;IAEA,MAAMC,OAAAA,GAAUF,KAAK,CAAC,CAAA,CAAE;IACxB,MAAMG,MAAAA,GAASC,mBAAmBJ,KAAK,CAAC,EAAE,CAAA,CAAEK,OAAO,CAAC,IAAA,EAAM,GAAA,CAAA;IAE1D,OAAO;AAAEH,QAAAA,OAAAA;AAASC,QAAAA;AAAO,KAAA;AAC3B,CAAA;AAEA;;;AAGC,IACD,MAAMG,aAAAA,GAAgB,IAAA;AACpB,IAAA,MAAMZ,KAAAA,GAAQN,aAAAA,EAAAA;AACd,IAAA,IAAI,CAACM,KAAAA,EAAO;AACV,QAAA,MAAM,IAAIO,KAAAA,CAAM,6BAAA,CAAA;AAClB,IAAA;IACA,OAAOP,KAAAA;AACT,CAAA;AAEA;;;;IAKA,MAAMa,cAAAA,GAAiB,OAAOL,OAAAA,EAAiBC,MAAAA,GAAAA;AAC7C,IAAA,MAAMT,KAAAA,GAAQY,aAAAA,EAAAA;IAEd,IAAI;AACF,QAAA,MAAME,SAAS,CAAC,+BAA+B,EAAEN,OAAAA,CAAQ,WAAW,EAAEC,MAAAA,CAAAA,CAAQ;QAE9E,MAAMM,QAAAA,GAAW,MAAMC,KAAAA,CAAMF,MAAAA,EAAQ;YACnCG,OAAAA,EAAS;gBACP,eAAA,EAAiBjB;AACnB;AACF,SAAA,CAAA;QAEA,IAAI,CAACe,QAAAA,CAASG,EAAE,EAAE;AAChB,YAAA,MAAM,IAAIX,KAAAA,CAAM,CAAC,iBAAiB,EAAEQ,QAAAA,CAASI,MAAM,CAAC,CAAC,EAAEJ,QAAAA,CAASK,UAAU,CAAA,CAAE,CAAA;AAC9E,QAAA;QAEA,MAAMC,KAAAA,GAAQ,MAAMN,QAAAA,CAASO,IAAI,EAAA;QAEjC,OAAOD,KAAAA,CAAMA,KAAK,CAACZ,MAAAA,CAAO;AAC5B,IAAA,CAAA,CAAE,OAAOc,GAAAA,EAAK;AACZ,QAAA,MAAMC,YAAAA,GAAeD,GAAAA,YAAehB,KAAAA,GAAQgB,GAAAA,CAAIE,OAAO,GAAG,4BAAA;AAC1D,QAAA,MAAM,IAAIlB,KAAAA,CAAMiB,YAAAA,CAAAA;AAClB,IAAA;AACF,CAAA;AAYA,MAAME,mBAAmB,CAACC,IAAAA,GAAAA;AACxB,IAAA,MAAMC,SAAsB,EAAE;IAC9B,IAAID,IAAAA,CAAKE,IAAI,KAAK,OAAA,EAAS;AACzBD,QAAAA,MAAAA,CAAOE,IAAI,CAAC;AACVC,YAAAA,EAAAA,EAAIJ,KAAKI,EAAE;AACXC,YAAAA,IAAAA,EAAML,KAAKK;AACb,SAAA,CAAA;QACA,OAAOJ,MAAAA;AACT,IAAA;IAEA,IAAID,IAAAA,CAAKM,QAAQ,IAAIN,IAAAA,CAAKM,QAAQ,CAACC,MAAM,GAAG,CAAA,EAAG;AAC7C,QAAA,KAAK,MAAMC,KAAAA,IAASR,IAAAA,CAAKM,QAAQ,CAAE;;YAEjCL,MAAAA,CAAOE,IAAI,IAAIJ,gBAAAA,CAAiBS,KAAAA,CAAAA,CAAAA;AAClC,QAAA;AACF,IAAA;IAEA,OAAOP,MAAAA;AACT,CAAA;AAEA;;;;IAKA,MAAMQ,oBAAAA,GAAuB,OAC3B5B,OAAAA,EACA6B,OAAAA,GAAAA;AAEA,IAAA,MAAMrC,KAAAA,GAAQY,aAAAA,EAAAA;IAEd,IAAIyB,OAAAA,CAAQH,MAAM,KAAK,CAAA,EAAG;QACxB,OAAO;AAAEI,YAAAA,MAAAA,EAAQ;AAAG,SAAA;AACtB,IAAA;IACA,IAAI;;;AAGF,QAAA,MAAMC,gBAAgBF,OAAAA,CAAQG,KAAK,CAAC,CAAA,EAAG,EAAA,CAAA,CAAIC,IAAI,CAAC,GAAA,CAAA;QAChD,MAAM3B,MAAAA,GAAS,CAAC,gCAAgC,EAAEN,QAAQ,KAAK,EAAE+B,aAAAA,CAAc,qBAAqB,CAAC;QAErG,MAAMxB,QAAAA,GAAW,MAAMC,KAAAA,CAAMF,MAAAA,EAAQ;YACnCG,OAAAA,EAAS;gBAAE,eAAA,EAAiBjB;AAAM;AACpC,SAAA,CAAA;QAEA,IAAI,CAACe,QAAAA,CAASG,EAAE,EAAE;YAChB,MAAMwB,SAAAA,GAAY,MAAM3B,QAAAA,CAAS4B,IAAI,EAAA;AACrC,YAAA,MAAM,IAAIpC,KAAAA,CACR,CAAC,uBAAuB,EAAEQ,QAAAA,CAASI,MAAM,CAAC,CAAC,EAAEJ,QAAAA,CAASK,UAAU,CAAC,GAAG,EAAEsB,SAAAA,CAAAA,CAAW,CAAA;AAErF,QAAA;QAEA,MAAME,MAAAA,GAAS,MAAM7B,QAAAA,CAASO,IAAI,EAAA;QAClC,IAAIsB,MAAAA,CAAOrB,GAAG,EAAE;AACd,YAAA,MAAM,IAAIhB,KAAAA,CAAM,CAAC,uBAAuB,EAAEqC,MAAAA,CAAOrB,GAAG,CAAA,CAAE,CAAA;AACxD,QAAA;QAEA,OAAOqB,MAAAA;AACT,IAAA,CAAA,CAAE,OAAOrB,GAAAA,EAAK;AACZ,QAAA,MAAMC,YAAAA,GAAeD,GAAAA,YAAehB,KAAAA,GAAQgB,GAAAA,CAAIE,OAAO,GAAG,mCAAA;AAC1D,QAAA,MAAM,IAAIlB,KAAAA,CAAMiB,YAAAA,CAAAA;AAClB,IAAA;AACF,CAAA;AAEA;;qFAGO,SAASqB,cAAAA,CAAe,EAAEC,SAAS,EAAEC,OAAO,EAAyB,GAAG,EAAE,EAAA;AAC/E,IAAA,MAAM,CAACC,SAAAA,EAAWC,YAAAA,CAAa,GAAGC,cAAAA,CAAS,KAAA,CAAA;AAC3C,IAAA,MAAM,CAACrD,KAAAA,EAAOsD,QAAAA,CAAS,GAAGD,cAAAA,CAAwB,IAAA,CAAA;AAElD;;;MAIA,MAAME,kBAAkB,OAAOhD,QAAAA,GAAAA;QAC7B,IAAI;;AAEF,YAAA,IAAI,CAACF,aAAAA,EAAAA,EAAiB;AACpB,gBAAA,MAAMsB,YAAAA,GAAe,6BAAA;gBACrB2B,QAAAA,CAAS3B,YAAAA,CAAAA;gBACTuB,OAAAA,GAAUvB,YAAAA,CAAAA;AACV,gBAAA,MAAM,IAAIjB,KAAAA,CAAMiB,YAAAA,CAAAA;AAClB,YAAA;YAEAyB,YAAAA,CAAa,IAAA,CAAA;YACbE,QAAAA,CAAS,IAAA,CAAA;;AAGT,YAAA,MAAM,EAAE3C,OAAO,EAAEC,QAAQ4C,YAAY,EAAE,GAAGlD,uBAAAA,CAAwBC,QAAAA,CAAAA;;YAGlE,MAAMkD,SAAAA,GAAY,MAAMzC,cAAAA,CAAeL,OAAAA,EAAS6C,YAAAA,CAAAA;YAChD,IAAI,CAACC,SAAAA,CAAUC,QAAQ,EAAE;;YAGzB,MAAM3B,MAAAA,GAASF,gBAAAA,CAAiB4B,SAAAA,CAAUC,QAAQ,CAAA;;AAElD,YAAA,MAAMC,eAAe,IAAIC,GAAAA,CAAI7B,OAAO8B,GAAG,CAAC,CAACC,KAAAA,GAAU;AAACA,oBAAAA,KAAAA,CAAM5B,EAAE;AAAE4B,oBAAAA,KAAAA,CAAM3B;AAAK,iBAAA,CAAA,CAAA;;AAEzE,YAAA,MAAM4B,WAAWhC,MAAAA,CAAO8B,GAAG,CAAC,CAACC,KAAAA,GAAUA,MAAM5B,EAAE,CAAA;;YAG/C,MAAM8B,aAAAA,GAAgB,MAAMzB,oBAAAA,CAAqB5B,OAAAA,EAASoD,QAAAA,CAAAA;YAC1D,MAAMtB,MAAAA,GAASuB,cAAcvB,MAAM;;AAGnC,YAAA,MAAMwB,WAAAA,GAAcC,MAAAA,CAAOC,OAAO,CAAC1B,MAAAA,CAAAA,CAAQoB,GAAG,CAC5C,CAAC,CAAC3B,EAAAA,EAAIkC,GAAAA,CAAI,IACP;AACClC,oBAAAA,EAAAA;oBACAF,IAAAA,EAAM,MAAA;oBACNqC,QAAAA,EAAUV,YAAAA,CAAaW,GAAG,CAACpC,EAAAA,CAAAA;oBAC3BqC,SAAAA,EAAW,WAAA;AACXH,oBAAAA,GAAAA;oBACA9C,MAAAA,EAAQ;iBACV,CAAA,CAAA;YAGJ2B,SAAAA,GAAYgB,WAAAA,CAAAA;YACZ,OAAOA,WAAAA;AACT,QAAA,CAAA,CAAE,OAAOvC,GAAAA,EAAK;AACZ,YAAA,MAAMC,YAAAA,GACJD,GAAAA,YAAehB,KAAAA,GAAQgB,GAAAA,CAAIE,OAAO,GAAG,oCAAA;YACvC0B,QAAAA,CAAS3B,YAAAA,CAAAA;YACTuB,OAAAA,GAAUvB,YAAAA,CAAAA;YACV1B,OAAAA,CAAQD,KAAK,CAAC,6BAAA,EAA+B0B,GAAAA,CAAAA;YAC7C,MAAMA,GAAAA;QACR,CAAA,QAAU;YACR0B,YAAAA,CAAa,KAAA,CAAA;AACf,QAAA;AACF,IAAA,CAAA;IAEA,OAAO;AACLG,QAAAA,eAAAA;QACAJ,SAAAA,EAAWA,SAAAA;QACXnD,KAAAA,EAAOA;AACT,KAAA;AACF;;;;;;;;"}

package/dist/admin/components/AIChat/hooks/useFigmaUpload.mjs

@@ -0,0 +1,200 @@
+import { useState } from 'react';
+
+/**================================================================================
+ * Constants
+ *================================================================================*/ const FIGMA_TOKEN_STORAGE_KEY = 'strapi-ai-figma-token';
+/**================================================================================
+ * Token Storage Utils
+ *================================================================================*/ /**
+ * Get Figma token from localStorage
+ */ const getFigmaToken = ()=>{
+    try {
+        return localStorage.getItem(FIGMA_TOKEN_STORAGE_KEY) || '';
+    } catch (error) {
+        console.error('Error accessing localStorage:', error);
+        return '';
+    }
+};
+/**
+ * Save Figma token to localStorage
+ */ const saveFigmaToken = (token)=>{
+    try {
+        localStorage.setItem(FIGMA_TOKEN_STORAGE_KEY, token);
+    } catch (error) {
+        console.error('Error saving to localStorage:', error);
+    }
+};
+/**
+ * Check if Figma token exists in localStorage
+ */ const hasFigmaToken = ()=>{
+    return !!getFigmaToken();
+};
+/**================================================================================
+ * Utils
+ *================================================================================*/ /**
+ * Extract file key and node ID from Figma URL
+ * @param figmaUrl - Figma URL (e.g., https://www.figma.com/file/KEY/Title)
+ */ const extractNodeFromFigmaUrl = (figmaUrl)=>{
+    const figmaUrlPattern = /figma\.com\/(?:file|design)\/([a-zA-Z0-9]+)\/.*[?&]node-id=([^&]+)/;
+    const match = figmaUrl.match(figmaUrlPattern);
+    if (!match) {
+        throw new Error('Invalid Figma URL');
+    }
+    const fileKey = match[1];
+    const nodeId = decodeURIComponent(match[2]).replace(/-/g, ':');
+    return {
+        fileKey,
+        nodeId
+    };
+};
+/**
+ * Get token and validate it's available
+ * @throws Error if token is not available
+ */ const getValidToken = ()=>{
+    const token = getFigmaToken();
+    if (!token) {
+        throw new Error('Figma API token is required');
+    }
+    return token;
+};
+/**
+ * Fetch Figma file data using the API
+ * @param fileKey - Figma file key
+ * @param nodeId - Figma node ID
+ */ const fetchFigmaNode = async (fileKey, nodeId)=>{
+    const token = getValidToken();
+    try {
+        const apiUrl = `https://api.figma.com/v1/files/${fileKey}/nodes?ids=${nodeId}`;
+        const response = await fetch(apiUrl, {
+            headers: {
+                'X-Figma-Token': token
+            }
+        });
+        if (!response.ok) {
+            throw new Error(`Figma API error: ${response.status} ${response.statusText}`);
+        }
+        const nodes = await response.json();
+        return nodes.nodes[nodeId];
+    } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : 'Failed to fetch Figma data';
+        throw new Error(errorMessage);
+    }
+};
+const findFramesInNode = (node)=>{
+    const frames = [];
+    if (node.type === 'FRAME') {
+        frames.push({
+            id: node.id,
+            name: node.name
+        });
+        return frames;
+    }
+    if (node.children && node.children.length > 0) {
+        for (const child of node.children){
+            // Continue searching in children if the current node is not a FRAME
+            frames.push(...findFramesInNode(child));
+        }
+    }
+    return frames;
+};
+/**
+ * Fetch images for specific nodes from the Figma API
+ * @param fileKey - Figma file key
+ * @param nodeIds - Array of node IDs to render
+ */ const fetchFigmaNodeImages = async (fileKey, nodeIds)=>{
+    const token = getValidToken();
+    if (nodeIds.length === 0) {
+        return {
+            images: {}
+        };
+    }
+    try {
+        // Max 50 node IDs per request according to Figma API docs
+        // We might need to chunk requests if nodeIds is very large
+        const idsQueryParam = nodeIds.slice(0, 50).join(',');
+        const apiUrl = `https://api.figma.com/v1/images/${fileKey}?ids=${idsQueryParam}&format=png&scale=0.4`;
+        const response = await fetch(apiUrl, {
+            headers: {
+                'X-Figma-Token': token
+            }
+        });
+        if (!response.ok) {
+            const errorData = await response.text();
+            throw new Error(`Figma API image error: ${response.status} ${response.statusText} - ${errorData}`);
+        }
+        const result = await response.json();
+        if (result.err) {
+            throw new Error(`Figma API image error: ${result.err}`);
+        }
+        return result;
+    } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : 'Failed to fetch Figma node images';
+        throw new Error(errorMessage);
+    }
+};
+/**================================================================================
+ * Hooks
+ *================================================================================*/ function useFigmaUpload({ onSuccess, onError } = {}) {
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    /**
+   * Main method to process a Figma URL
+   * @param figmaUrl - Figma URL to process
+   */ const processFigmaUrl = async (figmaUrl)=>{
+        try {
+            // Check if token exists before proceeding
+            if (!hasFigmaToken()) {
+                const errorMessage = 'Figma API token is required';
+                setError(errorMessage);
+                onError?.(errorMessage);
+                throw new Error(errorMessage);
+            }
+            setIsLoading(true);
+            setError(null);
+            // 1. Extract file key from URL
+            const { fileKey, nodeId: selectedNode } = extractNodeFromFigmaUrl(figmaUrl);
+            // 2. Fetch base data from Figma API to get structure
+            const figmaData = await fetchFigmaNode(fileKey, selectedNode);
+            if (!figmaData.document) return;
+            // 3. Find frame nodes with their names
+            const frames = findFramesInNode(figmaData.document);
+            // Create a map of ID to name for later use
+            const frameNameMap = new Map(frames.map((frame)=>[
+                    frame.id,
+                    frame.name
+                ]));
+            // Get just the IDs for the API call
+            const frameIds = frames.map((frame)=>frame.id);
+            // 4. Fetch images for the identified nodes
+            const imageResponse = await fetchFigmaNodeImages(fileKey, frameIds);
+            const images = imageResponse.images;
+            // Use the name from our map instead of just the ID
+            const figmaImages = Object.entries(images).map(([id, url])=>({
+                    id,
+                    type: 'file',
+                    filename: frameNameMap.get(id),
+                    mediaType: 'image/png',
+                    url,
+                    status: 'ready'
+                }));
+            onSuccess?.(figmaImages);
+            return figmaImages;
+        } catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Unknown error processing Figma URL';
+            setError(errorMessage);
+            onError?.(errorMessage);
+            console.error('Error processing Figma URL:', err);
+            throw err;
+        } finally{
+            setIsLoading(false);
+        }
+    };
+    return {
+        processFigmaUrl,
+        isLoading: isLoading,
+        error: error
+    };
+}
+
+export { FIGMA_TOKEN_STORAGE_KEY, getFigmaToken, hasFigmaToken, saveFigmaToken, useFigmaUpload };
+//# sourceMappingURL=useFigmaUpload.mjs.map

package/dist/admin/components/AIChat/hooks/useFigmaUpload.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFigmaUpload.mjs","sources":["../../../../../admin/src/components/AIChat/hooks/useFigmaUpload.ts"],"sourcesContent":["import { useState } from 'react';\r\n\r\nimport type { Attachment } from '../lib/types/attachments';\r\n\r\n/**================================================================================\r\n * Constants\r\n *================================================================================*/\r\nexport const FIGMA_TOKEN_STORAGE_KEY = 'strapi-ai-figma-token';\r\n\r\n/**================================================================================\r\n * Types\r\n *================================================================================*/\r\nexport interface FigmaNodeData {\r\n  id: string;\r\n  name: string;\r\n  type: string;\r\n  children?: FigmaNodeData[];\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  [key: string]: any; // For other properties that Figma nodes may have\r\n}\r\n\r\nexport interface FigmaFileData {\r\n  document: FigmaNodeData;\r\n  schemaVersion: number;\r\n  name: string;\r\n  lastModified: string;\r\n  thumbnailUrl: string;\r\n  version: string;\r\n  role: string;\r\n}\r\n\r\nexport interface FigmaImage extends Attachment {}\r\n\r\ninterface UseFigmaUploadOptions {\r\n  onSuccess?: (attachments: FigmaImage[]) => void;\r\n  onError?: (error: string) => void;\r\n}\r\n\r\n/**================================================================================\r\n * Token Storage Utils\r\n *================================================================================*/\r\n\r\n/**\r\n * Get Figma token from localStorage\r\n */\r\nexport const getFigmaToken = (): string => {\r\n  try {\r\n    return localStorage.getItem(FIGMA_TOKEN_STORAGE_KEY) || '';\r\n  } catch (error) {\r\n    console.error('Error accessing localStorage:', error);\r\n    return '';\r\n  }\r\n};\r\n\r\n/**\r\n * Save Figma token to localStorage\r\n */\r\nexport const saveFigmaToken = (token: string): void => {\r\n  try {\r\n    localStorage.setItem(FIGMA_TOKEN_STORAGE_KEY, token);\r\n  } catch (error) {\r\n    console.error('Error saving to localStorage:', error);\r\n  }\r\n};\r\n\r\n/**\r\n * Check if Figma token exists in localStorage\r\n */\r\nexport const hasFigmaToken = (): boolean => {\r\n  return !!getFigmaToken();\r\n};\r\n\r\n/**================================================================================\r\n * Utils\r\n *================================================================================*/\r\n\r\n/**\r\n * Extract file key and node ID from Figma URL\r\n * @param figmaUrl - Figma URL (e.g., https://www.figma.com/file/KEY/Title)\r\n */\r\nconst extractNodeFromFigmaUrl = (figmaUrl: string) => {\r\n  const figmaUrlPattern = /figma\\.com\\/(?:file|design)\\/([a-zA-Z0-9]+)\\/.*[?&]node-id=([^&]+)/;\r\n  const match = figmaUrl.match(figmaUrlPattern);\r\n\r\n  if (!match) {\r\n    throw new Error('Invalid Figma URL');\r\n  }\r\n\r\n  const fileKey = match[1];\r\n  const nodeId = decodeURIComponent(match[2]).replace(/-/g, ':');\r\n\r\n  return { fileKey, nodeId };\r\n};\r\n\r\n/**\r\n * Get token and validate it's available\r\n * @throws Error if token is not available\r\n */\r\nconst getValidToken = (): string => {\r\n  const token = getFigmaToken();\r\n  if (!token) {\r\n    throw new Error('Figma API token is required');\r\n  }\r\n  return token;\r\n};\r\n\r\n/**\r\n * Fetch Figma file data using the API\r\n * @param fileKey - Figma file key\r\n * @param nodeId - Figma node ID\r\n */\r\nconst fetchFigmaNode = async (fileKey: string, nodeId: string): Promise<FigmaFileData> => {\r\n  const token = getValidToken();\r\n\r\n  try {\r\n    const apiUrl = `https://api.figma.com/v1/files/${fileKey}/nodes?ids=${nodeId}`;\r\n\r\n    const response = await fetch(apiUrl, {\r\n      headers: {\r\n        'X-Figma-Token': token,\r\n      },\r\n    });\r\n\r\n    if (!response.ok) {\r\n      throw new Error(`Figma API error: ${response.status} ${response.statusText}`);\r\n    }\r\n\r\n    const nodes = await response.json();\r\n\r\n    return nodes.nodes[nodeId];\r\n  } catch (err) {\r\n    const errorMessage = err instanceof Error ? err.message : 'Failed to fetch Figma data';\r\n    throw new Error(errorMessage);\r\n  }\r\n};\r\n\r\n/**\r\n * Recursively searches the node tree for FRAME nodes.\r\n * It stops searching within a branch once a FRAME is found.\r\n * @param node - The current FigmaNodeData to inspect.\r\n */\r\ninterface FrameInfo {\r\n  id: string;\r\n  name: string;\r\n}\r\n\r\nconst findFramesInNode = (node: FigmaNodeData): FrameInfo[] => {\r\n  const frames: FrameInfo[] = [];\r\n  if (node.type === 'FRAME') {\r\n    frames.push({\r\n      id: node.id,\r\n      name: node.name,\r\n    });\r\n    return frames;\r\n  }\r\n\r\n  if (node.children && node.children.length > 0) {\r\n    for (const child of node.children) {\r\n      // Continue searching in children if the current node is not a FRAME\r\n      frames.push(...findFramesInNode(child));\r\n    }\r\n  }\r\n\r\n  return frames;\r\n};\r\n\r\n/**\r\n * Fetch images for specific nodes from the Figma API\r\n * @param fileKey - Figma file key\r\n * @param nodeIds - Array of node IDs to render\r\n */\r\nconst fetchFigmaNodeImages = async (\r\n  fileKey: string,\r\n  nodeIds: string[]\r\n): Promise<{ images: Record<string, string> }> => {\r\n  const token = getValidToken();\r\n\r\n  if (nodeIds.length === 0) {\r\n    return { images: {} };\r\n  }\r\n  try {\r\n    // Max 50 node IDs per request according to Figma API docs\r\n    // We might need to chunk requests if nodeIds is very large\r\n    const idsQueryParam = nodeIds.slice(0, 50).join(',');\r\n    const apiUrl = `https://api.figma.com/v1/images/${fileKey}?ids=${idsQueryParam}&format=png&scale=0.4`;\r\n\r\n    const response = await fetch(apiUrl, {\r\n      headers: { 'X-Figma-Token': token },\r\n    });\r\n\r\n    if (!response.ok) {\r\n      const errorData = await response.text();\r\n      throw new Error(\r\n        `Figma API image error: ${response.status} ${response.statusText} - ${errorData}`\r\n      );\r\n    }\r\n\r\n    const result = await response.json();\r\n    if (result.err) {\r\n      throw new Error(`Figma API image error: ${result.err}`);\r\n    }\r\n\r\n    return result as { images: Record<string, string> };\r\n  } catch (err) {\r\n    const errorMessage = err instanceof Error ? err.message : 'Failed to fetch Figma node images';\r\n    throw new Error(errorMessage);\r\n  }\r\n};\r\n\r\n/**================================================================================\r\n * Hooks\r\n *================================================================================*/\r\nexport function useFigmaUpload({ onSuccess, onError }: UseFigmaUploadOptions = {}) {\r\n  const [isLoading, setIsLoading] = useState(false);\r\n  const [error, setError] = useState<string | null>(null);\r\n\r\n  /**\r\n   * Main method to process a Figma URL\r\n   * @param figmaUrl - Figma URL to process\r\n   */\r\n  const processFigmaUrl = async (figmaUrl: string) => {\r\n    try {\r\n      // Check if token exists before proceeding\r\n      if (!hasFigmaToken()) {\r\n        const errorMessage = 'Figma API token is required';\r\n        setError(errorMessage);\r\n        onError?.(errorMessage);\r\n        throw new Error(errorMessage);\r\n      }\r\n\r\n      setIsLoading(true);\r\n      setError(null);\r\n\r\n      // 1. Extract file key from URL\r\n      const { fileKey, nodeId: selectedNode } = extractNodeFromFigmaUrl(figmaUrl);\r\n\r\n      // 2. Fetch base data from Figma API to get structure\r\n      const figmaData = await fetchFigmaNode(fileKey, selectedNode);\r\n      if (!figmaData.document) return;\r\n\r\n      // 3. Find frame nodes with their names\r\n      const frames = findFramesInNode(figmaData.document);\r\n      // Create a map of ID to name for later use\r\n      const frameNameMap = new Map(frames.map((frame) => [frame.id, frame.name]));\r\n      // Get just the IDs for the API call\r\n      const frameIds = frames.map((frame) => frame.id);\r\n\r\n      // 4. Fetch images for the identified nodes\r\n      const imageResponse = await fetchFigmaNodeImages(fileKey, frameIds);\r\n      const images = imageResponse.images;\r\n\r\n      // Use the name from our map instead of just the ID\r\n      const figmaImages = Object.entries(images).map(\r\n        ([id, url]) =>\r\n          ({\r\n            id,\r\n            type: 'file',\r\n            filename: frameNameMap.get(id),\r\n            mediaType: 'image/png',\r\n            url,\r\n            status: 'ready',\r\n          }) satisfies FigmaImage\r\n      );\r\n\r\n      onSuccess?.(figmaImages);\r\n      return figmaImages;\r\n    } catch (err) {\r\n      const errorMessage =\r\n        err instanceof Error ? err.message : 'Unknown error processing Figma URL';\r\n      setError(errorMessage);\r\n      onError?.(errorMessage);\r\n      console.error('Error processing Figma URL:', err);\r\n      throw err;\r\n    } finally {\r\n      setIsLoading(false);\r\n    }\r\n  };\r\n\r\n  return {\r\n    processFigmaUrl,\r\n    isLoading: isLoading,\r\n    error: error,\r\n  };\r\n}\r\n"],"names":["FIGMA_TOKEN_STORAGE_KEY","getFigmaToken","localStorage","getItem","error","console","saveFigmaToken","token","setItem","hasFigmaToken","extractNodeFromFigmaUrl","figmaUrl","figmaUrlPattern","match","Error","fileKey","nodeId","decodeURIComponent","replace","getValidToken","fetchFigmaNode","apiUrl","response","fetch","headers","ok","status","statusText","nodes","json","err","errorMessage","message","findFramesInNode","node","frames","type","push","id","name","children","length","child","fetchFigmaNodeImages","nodeIds","images","idsQueryParam","slice","join","errorData","text","result","useFigmaUpload","onSuccess","onError","isLoading","setIsLoading","useState","setError","processFigmaUrl","selectedNode","figmaData","document","frameNameMap","Map","map","frame","frameIds","imageResponse","figmaImages","Object","entries","url","filename","get","mediaType"],"mappings":"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"}