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

package/dist/admin/components/AIChat/components/Dropzone.mjs

@@ -0,0 +1,163 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useCallback, useEffect, createContext, useContext } from 'react';
+import { Flex, Box, Typography } from '@strapi/design-system';
+import { useDropzone } from 'react-dropzone';
+
+const useClipboardPasteImages = ({ onAddFiles, isEnabled = false })=>{
+    const handlePaste = useCallback(async (e)=>{
+        if (!isEnabled) return;
+        // Try to get items from clipboard
+        const items = e.clipboardData?.items;
+        if (!items || items.length === 0) return;
+        const files = [];
+        // Process clipboard items
+        for (const item of items){
+            if (item.kind === 'file') {
+                const file = item.getAsFile();
+                if (file && file.type.startsWith('image/')) {
+                    files.push(file);
+                }
+            }
+        }
+        if (files.length > 0) {
+            onAddFiles(files);
+            e.preventDefault(); // Prevent the default paste behavior
+        }
+    }, [
+        isEnabled,
+        onAddFiles
+    ]);
+    // Set up the paste event listener
+    useEffect(()=>{
+        document.addEventListener('paste', handlePaste);
+        return ()=>{
+            document.removeEventListener('paste', handlePaste);
+        };
+    }, [
+        handlePaste
+    ]);
+};
+const DropzoneContext = /*#__PURE__*/ createContext({});
+const useDropzoneContext = ()=>useContext(DropzoneContext);
+const Root = ({ children, isEnabled = true, onAddFiles = ()=>{}, accept = {
+    'image/*': []
+}, ...props })=>{
+    // Use clipboard paste hook for handling clipboard events
+    useClipboardPasteImages({
+        onAddFiles,
+        isEnabled});
+    // Use dropzone for drag and drop functionality
+    const { getRootProps, isDragActive } = useDropzone({
+        onDrop: onAddFiles,
+        noClick: true,
+        noKeyboard: true,
+        accept
+    });
+    return /*#__PURE__*/ jsx(DropzoneContext.Provider, {
+        value: {
+            isEnabled,
+            isDragActive,
+            onAddFiles
+        },
+        children: /*#__PURE__*/ jsx(Flex, {
+            direction: "column",
+            alignItems: "flex-start",
+            width: "100%",
+            position: "relative",
+            ...getRootProps(),
+            ...props,
+            children: children
+        })
+    });
+};
+const Area = ({ error, title, ...props })=>{
+    const { isEnabled, isDragActive } = useDropzoneContext();
+    // If not dragging, don't render the dropzone area
+    if (!isDragActive) {
+        return null;
+    }
+    const displayTitle = title || 'Drop images here';
+    return /*#__PURE__*/ jsxs(Flex, {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 2,
+        cursor: isEnabled ? 'pointer' : 'not-allowed',
+        width: "100%",
+        height: "100%",
+        borderStyle: "dashed",
+        borderColor: error ? 'danger600' : 'primary500',
+        background: error ? 'danger100' : 'primary100',
+        hasRadius: true,
+        padding: 7,
+        justifyContent: "center",
+        direction: "column",
+        alignItems: "center",
+        gap: 2,
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(Box, {
+                width: "24px",
+                height: "24px",
+                children: /*#__PURE__*/ jsxs("svg", {
+                    width: "24",
+                    height: "24",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    children: [
+                        /*#__PURE__*/ jsx("path", {
+                            d: "M19.5 13.572L12 6.072L4.5 13.572",
+                            stroke: "currentColor",
+                            strokeWidth: "2",
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round"
+                        }),
+                        /*#__PURE__*/ jsx("path", {
+                            d: "M12 6.072V20.072",
+                            stroke: "currentColor",
+                            strokeWidth: "2",
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round"
+                        }),
+                        /*#__PURE__*/ jsx("path", {
+                            d: "M3.9998 20.072H20.0001",
+                            stroke: "currentColor",
+                            strokeWidth: "2",
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round"
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsxs(Flex, {
+                direction: "column",
+                alignItems: "center",
+                gap: 2,
+                children: [
+                    /*#__PURE__*/ jsx(Typography, {
+                        variant: "omega",
+                        textColor: "neutral600",
+                        textAlign: "center",
+                        children: displayTitle
+                    }),
+                    error && /*#__PURE__*/ jsx(Typography, {
+                        variant: "pi",
+                        textColor: "danger600",
+                        children: error
+                    })
+                ]
+            })
+        ]
+    });
+};
+/* -------------------------------------------------------------------------------------------------
+ * Dropzone Compound
+ * -----------------------------------------------------------------------------------------------*/ const Dropzone = {
+    Root,
+    Area};
+
+export { Dropzone, Root, useClipboardPasteImages, useDropzoneContext };
+//# sourceMappingURL=Dropzone.mjs.map

package/dist/admin/components/AIChat/components/Dropzone.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropzone.mjs","sources":["../../../../../admin/src/components/AIChat/components/Dropzone.tsx"],"sourcesContent":["import { createContext, useCallback, useContext, useEffect } from 'react';\r\n\r\nimport { Flex, Box, Typography } from '@strapi/design-system';\r\nimport { useDropzone } from 'react-dropzone';\r\n\r\n/* -------------------------------------------------------------------------------------------------\r\n * Hooks\r\n * -----------------------------------------------------------------------------------------------*/\r\n\r\ninterface UseClipboardPasteProps {\r\n  onAddFiles: (files: File[]) => void;\r\n  isEnabled?: boolean;\r\n  accept?: {\r\n    [key: string]: string[];\r\n  };\r\n}\r\n\r\nexport const useClipboardPasteImages = ({\r\n  onAddFiles,\r\n  isEnabled = false,\r\n}: UseClipboardPasteProps) => {\r\n  const handlePaste = useCallback(\r\n    async (e: ClipboardEvent) => {\r\n      if (!isEnabled) return;\r\n      // Try to get items from clipboard\r\n      const items = e.clipboardData?.items;\r\n\r\n      if (!items || items.length === 0) return;\r\n\r\n      const files: File[] = [];\r\n\r\n      // Process clipboard items\r\n      for (const item of items) {\r\n        if (item.kind === 'file') {\r\n          const file = item.getAsFile();\r\n          if (file && file.type.startsWith('image/')) {\r\n            files.push(file);\r\n          }\r\n        }\r\n      }\r\n\r\n      if (files.length > 0) {\r\n        onAddFiles(files);\r\n        e.preventDefault(); // Prevent the default paste behavior\r\n      }\r\n    },\r\n    [isEnabled, onAddFiles]\r\n  );\r\n\r\n  // Set up the paste event listener\r\n  useEffect(() => {\r\n    document.addEventListener('paste', handlePaste);\r\n    return () => {\r\n      document.removeEventListener('paste', handlePaste);\r\n    };\r\n  }, [handlePaste]);\r\n};\r\n\r\n/* -------------------------------------------------------------------------------------------------\r\n * Dropzone Context\r\n * -----------------------------------------------------------------------------------------------*/\r\n\r\nexport interface DropzoneContextValue {\r\n  isEnabled?: boolean;\r\n  isDragActive?: boolean;\r\n  onAddFiles?: (files: File[]) => void;\r\n}\r\n\r\nconst DropzoneContext = createContext<DropzoneContextValue>({});\r\n\r\nexport const useDropzoneContext = () => useContext(DropzoneContext);\r\n\r\n/* -------------------------------------------------------------------------------------------------\r\n * Dropzone Root\r\n * -----------------------------------------------------------------------------------------------*/\r\n\r\nexport interface DropzoneRootProps extends React.ComponentPropsWithoutRef<typeof Flex> {\r\n  children: React.ReactNode;\r\n  isEnabled?: boolean;\r\n  onAddFiles?: (files: File[]) => void;\r\n  accept?: {\r\n    [key: string]: string[];\r\n  };\r\n}\r\n\r\nexport const Root = ({\r\n  children,\r\n  isEnabled = true,\r\n  onAddFiles = () => {},\r\n  accept = { 'image/*': [] },\r\n  ...props\r\n}: DropzoneRootProps) => {\r\n  // Use clipboard paste hook for handling clipboard events\r\n  useClipboardPasteImages({ onAddFiles, isEnabled, accept });\r\n\r\n  // Use dropzone for drag and drop functionality\r\n  const { getRootProps, isDragActive } = useDropzone({\r\n    onDrop: onAddFiles,\r\n    noClick: true,\r\n    noKeyboard: true,\r\n    accept,\r\n  });\r\n\r\n  return (\r\n    <DropzoneContext.Provider\r\n      value={{\r\n        isEnabled,\r\n        isDragActive,\r\n        onAddFiles,\r\n      }}\r\n    >\r\n      <Flex\r\n        direction=\"column\"\r\n        alignItems=\"flex-start\"\r\n        width=\"100%\"\r\n        position=\"relative\"\r\n        {...getRootProps()}\r\n        {...props}\r\n      >\r\n        {children}\r\n      </Flex>\r\n    </DropzoneContext.Provider>\r\n  );\r\n};\r\n\r\n/* -------------------------------------------------------------------------------------------------\r\n * Dropzone Area\r\n * -----------------------------------------------------------------------------------------------*/\r\n\r\ninterface DropzoneAreaProps extends React.ComponentPropsWithoutRef<typeof Flex> {\r\n  error?: string | null;\r\n  title?: string;\r\n}\r\n\r\nconst Area = ({ error, title, ...props }: DropzoneAreaProps) => {\r\n  const { isEnabled, isDragActive } = useDropzoneContext();\r\n\r\n  // If not dragging, don't render the dropzone area\r\n  if (!isDragActive) {\r\n    return null;\r\n  }\r\n\r\n  const displayTitle = title || 'Drop images here';\r\n\r\n  return (\r\n    <Flex\r\n      position=\"absolute\"\r\n      top={0}\r\n      left={0}\r\n      right={0}\r\n      bottom={0}\r\n      zIndex={2}\r\n      cursor={isEnabled ? 'pointer' : 'not-allowed'}\r\n      width=\"100%\"\r\n      height=\"100%\"\r\n      borderStyle=\"dashed\"\r\n      borderColor={error ? 'danger600' : 'primary500'}\r\n      background={error ? 'danger100' : 'primary100'}\r\n      hasRadius\r\n      padding={7}\r\n      justifyContent=\"center\"\r\n      direction=\"column\"\r\n      alignItems=\"center\"\r\n      gap={2}\r\n      {...props}\r\n    >\r\n      <Box width=\"24px\" height=\"24px\">\r\n        <svg\r\n          width=\"24\"\r\n          height=\"24\"\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n        >\r\n          <path\r\n            d=\"M19.5 13.572L12 6.072L4.5 13.572\"\r\n            stroke=\"currentColor\"\r\n            strokeWidth=\"2\"\r\n            strokeLinecap=\"round\"\r\n            strokeLinejoin=\"round\"\r\n          />\r\n          <path\r\n            d=\"M12 6.072V20.072\"\r\n            stroke=\"currentColor\"\r\n            strokeWidth=\"2\"\r\n            strokeLinecap=\"round\"\r\n            strokeLinejoin=\"round\"\r\n          />\r\n          <path\r\n            d=\"M3.9998 20.072H20.0001\"\r\n            stroke=\"currentColor\"\r\n            strokeWidth=\"2\"\r\n            strokeLinecap=\"round\"\r\n            strokeLinejoin=\"round\"\r\n          />\r\n        </svg>\r\n      </Box>\r\n      <Flex direction=\"column\" alignItems=\"center\" gap={2}>\r\n        <Typography variant=\"omega\" textColor=\"neutral600\" textAlign=\"center\">\r\n          {displayTitle}\r\n        </Typography>\r\n        {error && (\r\n          <Typography variant=\"pi\" textColor=\"danger600\">\r\n            {error}\r\n          </Typography>\r\n        )}\r\n      </Flex>\r\n    </Flex>\r\n  );\r\n};\r\n\r\n/* -------------------------------------------------------------------------------------------------\r\n * Dropzone Compound\r\n * -----------------------------------------------------------------------------------------------*/\r\n\r\nexport const Dropzone = {\r\n  Root,\r\n  Area,\r\n  useDropzoneContext,\r\n};\r\n"],"names":["useClipboardPasteImages","onAddFiles","isEnabled","handlePaste","useCallback","e","items","clipboardData","length","files","item","kind","file","getAsFile","type","startsWith","push","preventDefault","useEffect","document","addEventListener","removeEventListener","DropzoneContext","createContext","useDropzoneContext","useContext","Root","children","accept","props","getRootProps","isDragActive","useDropzone","onDrop","noClick","noKeyboard","_jsx","Provider","value","Flex","direction","alignItems","width","position","Area","error","title","displayTitle","_jsxs","top","left","right","bottom","zIndex","cursor","height","borderStyle","borderColor","background","hasRadius","padding","justifyContent","gap","Box","svg","viewBox","fill","xmlns","path","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","Typography","variant","textColor","textAlign","Dropzone"],"mappings":"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"}

package/dist/admin/components/AIChat/components/FloatingPanel.js

@@ -0,0 +1,166 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var designSystem = require('@strapi/design-system');
+var Icons = require('@strapi/icons');
+var styledComponents = require('styled-components');
+var animations = require('./animations.js');
+
+const PanelContext = /*#__PURE__*/ React.createContext({
+    size: 'md',
+    position: 'bottom-right',
+    isOpen: false,
+    onToggle: ()=>{}
+});
+const PANEL_SIZES = {
+    sm: {
+        width: '350px',
+        height: '500px'
+    },
+    md: {
+        width: '480px',
+        height: '600px'
+    },
+    lg: {
+        width: '600px',
+        height: '700px'
+    }
+};
+const PANEL_POSITIONS = {
+    'bottom-right': {
+        bottom: 4,
+        right: 4
+    },
+    'bottom-left': {
+        bottom: 4,
+        left: 4
+    },
+    'top-right': {
+        top: 4,
+        right: 4
+    },
+    'top-left': {
+        top: 4,
+        left: 4
+    }
+};
+const FixedWrapper = styledComponents.styled(designSystem.Box)`
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  z-index: 11;
+  align-items: ${({ $position })=>$position.includes('right') ? 'flex-end' : 'flex-start'};
+  ${({ $position, theme })=>Object.entries(PANEL_POSITIONS[$position]).reduce((acc, [key, value])=>({
+            ...acc,
+            [key]: theme.spaces[value]
+        }), {})}
+`;
+const PanelContainer = styledComponents.styled(designSystem.Box)`
+  width: ${({ $size })=>PANEL_SIZES[$size].width};
+  max-height: 85vh;
+  max-width: 85vw;
+  display: flex;
+  flex-direction: column;
+  height: ${({ $size })=>PANEL_SIZES[$size].height};
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation-duration: 200ms;
+    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+    &[data-state='open'] {
+      animation-name: ${({ $position })=>$position.startsWith('top') ? animations.ANIMATIONS.slideDownIn : animations.ANIMATIONS.slideUpIn};
+    }
+
+    &[data-state='closed'] {
+      animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+      animation-name: ${({ $position })=>$position.startsWith('top') ? animations.ANIMATIONS.slideDownOut : animations.ANIMATIONS.slideUpOut};
+    }
+  }
+`;
+const Root = ({ children, size = 'md', position = 'bottom-right', isOpen = false, onToggle = ()=>{}, toggleIcon })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(PanelContext.Provider, {
+        value: {
+            size,
+            position,
+            isOpen,
+            onToggle
+        },
+        children: /*#__PURE__*/ jsxRuntime.jsxs(FixedWrapper, {
+            $position: position,
+            children: [
+                isOpen ? /*#__PURE__*/ jsxRuntime.jsx(PanelContainer, {
+                    $size: size,
+                    $position: position,
+                    background: "neutral0",
+                    shadow: "popupShadow",
+                    hasRadius: true,
+                    borderColor: "neutral200",
+                    borderStyle: "solid",
+                    borderWidth: "1px",
+                    "data-state": isOpen ? 'open' : 'closed',
+                    children: children
+                }) : null,
+                toggleIcon && !isOpen && toggleIcon
+            ]
+        })
+    });
+};
+/* -------------------------------------------------------------------------------------------------
+ * Header
+ * -----------------------------------------------------------------------------------------------*/ const Header = ({ children })=>// Adjust padding to fit title and right icons
+    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+        padding: [
+            2,
+            2,
+            2,
+            4
+        ],
+        borderColor: "neutral150",
+        borderStyle: "solid",
+        borderWidth: "0 0 1px 0",
+        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+            justifyContent: "space-between",
+            alignItems: "center",
+            children: children
+        })
+    });
+/* -------------------------------------------------------------------------------------------------
+ * Body
+ * -----------------------------------------------------------------------------------------------*/ const Body = ({ children })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+        padding: 4,
+        flex: "1",
+        overflow: "auto",
+        children: children
+    });
+};
+/* -------------------------------------------------------------------------------------------------
+ * Footer
+ * -----------------------------------------------------------------------------------------------*/ const Footer = ({ children })=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+        padding: 4,
+        children: children
+    });
+/* -------------------------------------------------------------------------------------------------
+ * Close Panel
+ * -----------------------------------------------------------------------------------------------*/ const Close = ({ label })=>{
+    const { onToggle } = usePanel();
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+        onClick: onToggle,
+        variant: "ghost",
+        label: label || 'Close',
+        children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Cross, {})
+    });
+};
+const Panel = {
+    Root,
+    Header,
+    Body,
+    Footer,
+    Close
+};
+const usePanel = ()=>React.useContext(PanelContext);
+
+exports.Panel = Panel;
+exports.usePanel = usePanel;
+//# sourceMappingURL=FloatingPanel.js.map

package/dist/admin/components/AIChat/components/FloatingPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingPanel.js","sources":["../../../../../admin/src/components/AIChat/components/FloatingPanel.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\r\n\r\nimport { Box, Flex, IconButton } from '@strapi/design-system';\r\nimport { Cross } from '@strapi/icons';\r\nimport { styled } from 'styled-components';\r\n\r\nimport { ANIMATIONS } from './animations';\r\n\r\ntype PanelSize = 'sm' | 'md' | 'lg';\r\ntype PanelPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';\r\n\r\ninterface PanelContextValue {\r\n  size: PanelSize;\r\n  position: PanelPosition;\r\n  isOpen: boolean;\r\n  onToggle: () => void;\r\n}\r\n\r\nconst PanelContext = createContext<PanelContextValue>({\r\n  size: 'md',\r\n  position: 'bottom-right',\r\n  isOpen: false,\r\n  onToggle: () => {},\r\n});\r\n\r\nconst PANEL_SIZES: Record<PanelSize, { width: string; height: string }> = {\r\n  sm: { width: '350px', height: '500px' },\r\n  md: { width: '480px', height: '600px' },\r\n  lg: { width: '600px', height: '700px' },\r\n};\r\n\r\nconst PANEL_POSITIONS: Record<PanelPosition, { [key: string]: number }> = {\r\n  'bottom-right': { bottom: 4, right: 4 },\r\n  'bottom-left': { bottom: 4, left: 4 },\r\n  'top-right': { top: 4, right: 4 },\r\n  'top-left': { top: 4, left: 4 },\r\n};\r\n\r\n/* -------------------------------------------------------------------------------------------------\r\n * Panel Root\r\n * -----------------------------------------------------------------------------------------------*/\r\ninterface RootProps {\r\n  children: React.ReactNode;\r\n  size?: PanelSize;\r\n  position?: PanelPosition;\r\n  isOpen?: boolean;\r\n  onToggle?: () => void;\r\n  toggleIcon?: React.ReactNode;\r\n}\r\n\r\nconst FixedWrapper = styled(Box)<{ $position: PanelPosition }>`\r\n  position: fixed;\r\n  display: flex;\r\n  flex-direction: column;\r\n  z-index: 11;\r\n  align-items: ${({ $position }) => ($position.includes('right') ? 'flex-end' : 'flex-start')};\r\n  ${({ $position, theme }) =>\r\n    Object.entries(PANEL_POSITIONS[$position]).reduce(\r\n      (acc, [key, value]) => ({\r\n        ...acc,\r\n        [key]: theme.spaces[value],\r\n      }),\r\n      {}\r\n    )}\r\n`;\r\n\r\nconst PanelContainer = styled(Box)<{ $size: PanelSize; $position: PanelPosition }>`\r\n  width: ${({ $size }) => PANEL_SIZES[$size].width};\r\n  max-height: 85vh;\r\n  max-width: 85vw;\r\n  display: flex;\r\n  flex-direction: column;\r\n  height: ${({ $size }) => PANEL_SIZES[$size].height};\r\n\r\n  @media (prefers-reduced-motion: no-preference) {\r\n    animation-duration: 200ms;\r\n    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\r\n\r\n    &[data-state='open'] {\r\n      animation-name: ${({ $position }) =>\r\n        $position.startsWith('top') ? ANIMATIONS.slideDownIn : ANIMATIONS.slideUpIn};\r\n    }\r\n\r\n    &[data-state='closed'] {\r\n      animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n      animation-name: ${({ $position }) =>\r\n        $position.startsWith('top') ? ANIMATIONS.slideDownOut : ANIMATIONS.slideUpOut};\r\n    }\r\n  }\r\n`;\r\n\r\nconst Root = ({\r\n  children,\r\n  size = 'md',\r\n  position = 'bottom-right',\r\n  isOpen = false,\r\n  onToggle = () => {},\r\n  toggleIcon,\r\n}: RootProps) => {\r\n  return (\r\n    <PanelContext.Provider value={{ size, position, isOpen, onToggle }}>\r\n      <FixedWrapper $position={position}>\r\n        {isOpen ? (\r\n          <PanelContainer\r\n            $size={size}\r\n            $position={position}\r\n            background=\"neutral0\"\r\n            shadow=\"popupShadow\"\r\n            hasRadius\r\n            borderColor=\"neutral200\"\r\n            borderStyle=\"solid\"\r\n            borderWidth=\"1px\"\r\n            data-state={isOpen ? 'open' : 'closed'}\r\n          >\r\n            {children}\r\n          </PanelContainer>\r\n        ) : null}\r\n        {toggleIcon && !isOpen && toggleIcon}\r\n      </FixedWrapper>\r\n    </PanelContext.Provider>\r\n  );\r\n};\r\n\r\n/* -------------------------------------------------------------------------------------------------\r\n * Header\r\n * -----------------------------------------------------------------------------------------------*/\r\nconst Header = ({ children }: { children: React.ReactNode }) => (\r\n  // Adjust padding to fit title and right icons\r\n  <Box padding={[2, 2, 2, 4]} borderColor=\"neutral150\" borderStyle=\"solid\" borderWidth=\"0 0 1px 0\">\r\n    <Flex justifyContent=\"space-between\" alignItems=\"center\">\r\n      {children}\r\n    </Flex>\r\n  </Box>\r\n);\r\n\r\n/* -------------------------------------------------------------------------------------------------\r\n * Body\r\n * -----------------------------------------------------------------------------------------------*/\r\nconst Body = ({ children }: { children: React.ReactNode }) => {\r\n  return (\r\n    <Box padding={4} flex=\"1\" overflow=\"auto\">\r\n      {children}\r\n    </Box>\r\n  );\r\n};\r\n\r\n/* -------------------------------------------------------------------------------------------------\r\n * Footer\r\n * -----------------------------------------------------------------------------------------------*/\r\nconst Footer = ({ children }: { children: React.ReactNode }) => <Box padding={4}>{children}</Box>;\r\n\r\n/* -------------------------------------------------------------------------------------------------\r\n * Close Panel\r\n * -----------------------------------------------------------------------------------------------*/\r\nconst Close = ({ label }: { label?: string }) => {\r\n  const { onToggle } = usePanel();\r\n\r\n  return (\r\n    <IconButton onClick={onToggle} variant=\"ghost\" label={label || 'Close'}>\r\n      <Cross />\r\n    </IconButton>\r\n  );\r\n};\r\n\r\nexport const Panel = {\r\n  Root,\r\n  Header,\r\n  Body,\r\n  Footer,\r\n  Close,\r\n};\r\n\r\nexport const usePanel = () => useContext(PanelContext);\r\n"],"names":["PanelContext","createContext","size","position","isOpen","onToggle","PANEL_SIZES","sm","width","height","md","lg","PANEL_POSITIONS","bottom","right","left","top","FixedWrapper","styled","Box","$position","includes","theme","Object","entries","reduce","acc","key","value","spaces","PanelContainer","$size","startsWith","ANIMATIONS","slideDownIn","slideUpIn","slideDownOut","slideUpOut","Root","children","toggleIcon","_jsx","Provider","_jsxs","background","shadow","hasRadius","borderColor","borderStyle","borderWidth","data-state","Header","padding","Flex","justifyContent","alignItems","Body","flex","overflow","Footer","Close","label","usePanel","IconButton","onClick","variant","Cross","Panel","useContext"],"mappings":"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"}

package/dist/admin/components/AIChat/components/FloatingPanel.mjs

@@ -0,0 +1,163 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createContext, useContext } from 'react';
+import { Box, Flex, IconButton } from '@strapi/design-system';
+import { Cross } from '@strapi/icons';
+import { styled } from 'styled-components';
+import { ANIMATIONS } from './animations.mjs';
+
+const PanelContext = /*#__PURE__*/ createContext({
+    size: 'md',
+    position: 'bottom-right',
+    isOpen: false,
+    onToggle: ()=>{}
+});
+const PANEL_SIZES = {
+    sm: {
+        width: '350px',
+        height: '500px'
+    },
+    md: {
+        width: '480px',
+        height: '600px'
+    },
+    lg: {
+        width: '600px',
+        height: '700px'
+    }
+};
+const PANEL_POSITIONS = {
+    'bottom-right': {
+        bottom: 4,
+        right: 4
+    },
+    'bottom-left': {
+        bottom: 4,
+        left: 4
+    },
+    'top-right': {
+        top: 4,
+        right: 4
+    },
+    'top-left': {
+        top: 4,
+        left: 4
+    }
+};
+const FixedWrapper = styled(Box)`
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  z-index: 11;
+  align-items: ${({ $position })=>$position.includes('right') ? 'flex-end' : 'flex-start'};
+  ${({ $position, theme })=>Object.entries(PANEL_POSITIONS[$position]).reduce((acc, [key, value])=>({
+            ...acc,
+            [key]: theme.spaces[value]
+        }), {})}
+`;
+const PanelContainer = styled(Box)`
+  width: ${({ $size })=>PANEL_SIZES[$size].width};
+  max-height: 85vh;
+  max-width: 85vw;
+  display: flex;
+  flex-direction: column;
+  height: ${({ $size })=>PANEL_SIZES[$size].height};
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation-duration: 200ms;
+    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+    &[data-state='open'] {
+      animation-name: ${({ $position })=>$position.startsWith('top') ? ANIMATIONS.slideDownIn : ANIMATIONS.slideUpIn};
+    }
+
+    &[data-state='closed'] {
+      animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+      animation-name: ${({ $position })=>$position.startsWith('top') ? ANIMATIONS.slideDownOut : ANIMATIONS.slideUpOut};
+    }
+  }
+`;
+const Root = ({ children, size = 'md', position = 'bottom-right', isOpen = false, onToggle = ()=>{}, toggleIcon })=>{
+    return /*#__PURE__*/ jsx(PanelContext.Provider, {
+        value: {
+            size,
+            position,
+            isOpen,
+            onToggle
+        },
+        children: /*#__PURE__*/ jsxs(FixedWrapper, {
+            $position: position,
+            children: [
+                isOpen ? /*#__PURE__*/ jsx(PanelContainer, {
+                    $size: size,
+                    $position: position,
+                    background: "neutral0",
+                    shadow: "popupShadow",
+                    hasRadius: true,
+                    borderColor: "neutral200",
+                    borderStyle: "solid",
+                    borderWidth: "1px",
+                    "data-state": isOpen ? 'open' : 'closed',
+                    children: children
+                }) : null,
+                toggleIcon && !isOpen && toggleIcon
+            ]
+        })
+    });
+};
+/* -------------------------------------------------------------------------------------------------
+ * Header
+ * -----------------------------------------------------------------------------------------------*/ const Header = ({ children })=>// Adjust padding to fit title and right icons
+    /*#__PURE__*/ jsx(Box, {
+        padding: [
+            2,
+            2,
+            2,
+            4
+        ],
+        borderColor: "neutral150",
+        borderStyle: "solid",
+        borderWidth: "0 0 1px 0",
+        children: /*#__PURE__*/ jsx(Flex, {
+            justifyContent: "space-between",
+            alignItems: "center",
+            children: children
+        })
+    });
+/* -------------------------------------------------------------------------------------------------
+ * Body
+ * -----------------------------------------------------------------------------------------------*/ const Body = ({ children })=>{
+    return /*#__PURE__*/ jsx(Box, {
+        padding: 4,
+        flex: "1",
+        overflow: "auto",
+        children: children
+    });
+};
+/* -------------------------------------------------------------------------------------------------
+ * Footer
+ * -----------------------------------------------------------------------------------------------*/ const Footer = ({ children })=>/*#__PURE__*/ jsx(Box, {
+        padding: 4,
+        children: children
+    });
+/* -------------------------------------------------------------------------------------------------
+ * Close Panel
+ * -----------------------------------------------------------------------------------------------*/ const Close = ({ label })=>{
+    const { onToggle } = usePanel();
+    return /*#__PURE__*/ jsx(IconButton, {
+        onClick: onToggle,
+        variant: "ghost",
+        label: label || 'Close',
+        children: /*#__PURE__*/ jsx(Cross, {})
+    });
+};
+const Panel = {
+    Root,
+    Header,
+    Body,
+    Footer,
+    Close
+};
+const usePanel = ()=>useContext(PanelContext);
+
+export { Panel, usePanel };
+//# sourceMappingURL=FloatingPanel.mjs.map

package/dist/admin/components/AIChat/components/FloatingPanel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingPanel.mjs","sources":["../../../../../admin/src/components/AIChat/components/FloatingPanel.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\r\n\r\nimport { Box, Flex, IconButton } from '@strapi/design-system';\r\nimport { Cross } from '@strapi/icons';\r\nimport { styled } from 'styled-components';\r\n\r\nimport { ANIMATIONS } from './animations';\r\n\r\ntype PanelSize = 'sm' | 'md' | 'lg';\r\ntype PanelPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';\r\n\r\ninterface PanelContextValue {\r\n  size: PanelSize;\r\n  position: PanelPosition;\r\n  isOpen: boolean;\r\n  onToggle: () => void;\r\n}\r\n\r\nconst PanelContext = createContext<PanelContextValue>({\r\n  size: 'md',\r\n  position: 'bottom-right',\r\n  isOpen: false,\r\n  onToggle: () => {},\r\n});\r\n\r\nconst PANEL_SIZES: Record<PanelSize, { width: string; height: string }> = {\r\n  sm: { width: '350px', height: '500px' },\r\n  md: { width: '480px', height: '600px' },\r\n  lg: { width: '600px', height: '700px' },\r\n};\r\n\r\nconst PANEL_POSITIONS: Record<PanelPosition, { [key: string]: number }> = {\r\n  'bottom-right': { bottom: 4, right: 4 },\r\n  'bottom-left': { bottom: 4, left: 4 },\r\n  'top-right': { top: 4, right: 4 },\r\n  'top-left': { top: 4, left: 4 },\r\n};\r\n\r\n/* -------------------------------------------------------------------------------------------------\r\n * Panel Root\r\n * -----------------------------------------------------------------------------------------------*/\r\ninterface RootProps {\r\n  children: React.ReactNode;\r\n  size?: PanelSize;\r\n  position?: PanelPosition;\r\n  isOpen?: boolean;\r\n  onToggle?: () => void;\r\n  toggleIcon?: React.ReactNode;\r\n}\r\n\r\nconst FixedWrapper = styled(Box)<{ $position: PanelPosition }>`\r\n  position: fixed;\r\n  display: flex;\r\n  flex-direction: column;\r\n  z-index: 11;\r\n  align-items: ${({ $position }) => ($position.includes('right') ? 'flex-end' : 'flex-start')};\r\n  ${({ $position, theme }) =>\r\n    Object.entries(PANEL_POSITIONS[$position]).reduce(\r\n      (acc, [key, value]) => ({\r\n        ...acc,\r\n        [key]: theme.spaces[value],\r\n      }),\r\n      {}\r\n    )}\r\n`;\r\n\r\nconst PanelContainer = styled(Box)<{ $size: PanelSize; $position: PanelPosition }>`\r\n  width: ${({ $size }) => PANEL_SIZES[$size].width};\r\n  max-height: 85vh;\r\n  max-width: 85vw;\r\n  display: flex;\r\n  flex-direction: column;\r\n  height: ${({ $size }) => PANEL_SIZES[$size].height};\r\n\r\n  @media (prefers-reduced-motion: no-preference) {\r\n    animation-duration: 200ms;\r\n    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\r\n\r\n    &[data-state='open'] {\r\n      animation-name: ${({ $position }) =>\r\n        $position.startsWith('top') ? ANIMATIONS.slideDownIn : ANIMATIONS.slideUpIn};\r\n    }\r\n\r\n    &[data-state='closed'] {\r\n      animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n      animation-name: ${({ $position }) =>\r\n        $position.startsWith('top') ? ANIMATIONS.slideDownOut : ANIMATIONS.slideUpOut};\r\n    }\r\n  }\r\n`;\r\n\r\nconst Root = ({\r\n  children,\r\n  size = 'md',\r\n  position = 'bottom-right',\r\n  isOpen = false,\r\n  onToggle = () => {},\r\n  toggleIcon,\r\n}: RootProps) => {\r\n  return (\r\n    <PanelContext.Provider value={{ size, position, isOpen, onToggle }}>\r\n      <FixedWrapper $position={position}>\r\n        {isOpen ? (\r\n          <PanelContainer\r\n            $size={size}\r\n            $position={position}\r\n            background=\"neutral0\"\r\n            shadow=\"popupShadow\"\r\n            hasRadius\r\n            borderColor=\"neutral200\"\r\n            borderStyle=\"solid\"\r\n            borderWidth=\"1px\"\r\n            data-state={isOpen ? 'open' : 'closed'}\r\n          >\r\n            {children}\r\n          </PanelContainer>\r\n        ) : null}\r\n        {toggleIcon && !isOpen && toggleIcon}\r\n      </FixedWrapper>\r\n    </PanelContext.Provider>\r\n  );\r\n};\r\n\r\n/* -------------------------------------------------------------------------------------------------\r\n * Header\r\n * -----------------------------------------------------------------------------------------------*/\r\nconst Header = ({ children }: { children: React.ReactNode }) => (\r\n  // Adjust padding to fit title and right icons\r\n  <Box padding={[2, 2, 2, 4]} borderColor=\"neutral150\" borderStyle=\"solid\" borderWidth=\"0 0 1px 0\">\r\n    <Flex justifyContent=\"space-between\" alignItems=\"center\">\r\n      {children}\r\n    </Flex>\r\n  </Box>\r\n);\r\n\r\n/* -------------------------------------------------------------------------------------------------\r\n * Body\r\n * -----------------------------------------------------------------------------------------------*/\r\nconst Body = ({ children }: { children: React.ReactNode }) => {\r\n  return (\r\n    <Box padding={4} flex=\"1\" overflow=\"auto\">\r\n      {children}\r\n    </Box>\r\n  );\r\n};\r\n\r\n/* -------------------------------------------------------------------------------------------------\r\n * Footer\r\n * -----------------------------------------------------------------------------------------------*/\r\nconst Footer = ({ children }: { children: React.ReactNode }) => <Box padding={4}>{children}</Box>;\r\n\r\n/* -------------------------------------------------------------------------------------------------\r\n * Close Panel\r\n * -----------------------------------------------------------------------------------------------*/\r\nconst Close = ({ label }: { label?: string }) => {\r\n  const { onToggle } = usePanel();\r\n\r\n  return (\r\n    <IconButton onClick={onToggle} variant=\"ghost\" label={label || 'Close'}>\r\n      <Cross />\r\n    </IconButton>\r\n  );\r\n};\r\n\r\nexport const Panel = {\r\n  Root,\r\n  Header,\r\n  Body,\r\n  Footer,\r\n  Close,\r\n};\r\n\r\nexport const usePanel = () => useContext(PanelContext);\r\n"],"names":["PanelContext","createContext","size","position","isOpen","onToggle","PANEL_SIZES","sm","width","height","md","lg","PANEL_POSITIONS","bottom","right","left","top","FixedWrapper","styled","Box","$position","includes","theme","Object","entries","reduce","acc","key","value","spaces","PanelContainer","$size","startsWith","ANIMATIONS","slideDownIn","slideUpIn","slideDownOut","slideUpOut","Root","children","toggleIcon","_jsx","Provider","_jsxs","background","shadow","hasRadius","borderColor","borderStyle","borderWidth","data-state","Header","padding","Flex","justifyContent","alignItems","Body","flex","overflow","Footer","Close","label","usePanel","IconButton","onClick","variant","Cross","Panel","useContext"],"mappings":"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"}