@elicecontents/content-ui 1.0.14 → 1.0.16-rc.0

package/cjs/components/AdaptiveImage/AdaptiveImage.d.ts

@@ -1,4 +1,5 @@
-interface EliceImageProps {
+import React from 'react';
+interface AdaptiveImageProps {
     src: string;
     alt: string;
     fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
@@ -6,6 +7,8 @@ interface EliceImageProps {
     height?: number;
     loading?: boolean;
     sx?: object;
+    icon?: React.ReactNode;
+    responsiveBreakpoint?: number;
 }
-declare const EliceImage: ({ src, alt, fit, width, height, loading, sx, }: EliceImageProps) => import("react/jsx-runtime").JSX.Element;
-export default EliceImage;
+declare const AdaptiveImage: ({ src, alt, fit, width, height, loading, sx, icon, responsiveBreakpoint, }: AdaptiveImageProps) => import("react/jsx-runtime").JSX.Element;
+export default AdaptiveImage;

package/cjs/components/AdaptiveImage/AdaptiveImage.js

@@ -6,12 +6,15 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var material = require('@mui/material');
+var ZoomInIcon = require('@mui/icons-material/ZoomIn');
+var useAIDTMediaQuery = require('../../hooks/useAIDTMediaQuery.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var ZoomInIcon__default = /*#__PURE__*/_interopDefaultCompat(ZoomInIcon);
 
-var EliceImage = function EliceImage(_ref) {
+var AdaptiveImage = function AdaptiveImage(_ref) {
   var src = _ref.src,
     alt = _ref.alt,
     _ref$fit = _ref.fit,
@@ -22,43 +25,112 @@ var EliceImage = function EliceImage(_ref) {
     height = _ref$height === void 0 ? 300 : _ref$height,
     _ref$loading = _ref.loading,
     loading = _ref$loading === void 0 ? false : _ref$loading,
-    sx = _ref.sx;
+    sx = _ref.sx,
+    _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? jsxRuntime.jsx(ZoomInIcon__default.default, {
+      fontSize: "large"
+    }) : _ref$icon,
+    _ref$responsiveBreakp = _ref.responsiveBreakpoint,
+    responsiveBreakpoint = _ref$responsiveBreakp === void 0 ? 600 : _ref$responsiveBreakp;
   var _React$useState = React__default.default.useState(false),
     _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
     imageLoaded = _React$useState2[0],
-    setImageLoaded = _React$useState2[1]; // 이미지 로드 상태 관리
+    setImageLoaded = _React$useState2[1];
+  var _React$useState3 = React__default.default.useState(false),
+    _React$useState4 = _rollupPluginBabelHelpers.slicedToArray(_React$useState3, 2),
+    open = _React$useState4[0],
+    setOpen = _React$useState4[1];
   var handleImageLoad = function handleImageLoad() {
     return setImageLoaded(true);
-  }; // 이미지 로드 완료 시 로드 상태 변경
-  return jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: jsxRuntime.jsxs(material.Box, {
-      sx: Object.assign({
-        position: 'relative',
-        width: '100%',
-        maxWidth: width,
-        minWidth: '50%',
-        height: height
-      }, sx),
-      children: [jsxRuntime.jsx("img", {
-        src: src,
-        alt: alt,
-        style: {
-          objectFit: fit,
+  };
+  var _useAIDTMediaQuery = useAIDTMediaQuery.default(),
+    isTablet = _useAIDTMediaQuery.isTablet;
+  var isSmall = material.useMediaQuery("(max-width:".concat(responsiveBreakpoint, "px)")) || material.useMediaQuery("(max-height:".concat(responsiveBreakpoint, "px)")) || isTablet;
+  var handleOpen = function handleOpen() {
+    return setOpen(true);
+  };
+  var handleClose = function handleClose() {
+    return setOpen(false);
+  };
+  if (isSmall) {
+    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(material.Box, {
+        sx: Object.assign({
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
           width: '100%',
-          height: '100%'
-        },
-        onLoad: handleImageLoad
-      }), loading && !imageLoaded && jsxRuntime.jsx(material.CircularProgress, {
-        size: 24,
-        sx: {
-          position: 'absolute',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)'
-        }
+          height: 'auto',
+          minHeight: 48
+        }, sx),
+        children: jsxRuntime.jsx(material.IconButton, {
+          onClick: handleOpen,
+          children: icon
+        })
+      }), jsxRuntime.jsx(material.Dialog, {
+        open: open,
+        onClose: handleClose,
+        maxWidth: "md",
+        fullWidth: true,
+        children: jsxRuntime.jsxs(material.DialogContent, {
+          sx: {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            p: 2,
+            position: 'relative',
+            minHeight: 200
+          },
+          children: [!imageLoaded && jsxRuntime.jsx(material.CircularProgress, {
+            size: 24,
+            sx: {
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              transform: 'translate(-50%, -50%)'
+            }
+          }), jsxRuntime.jsx("img", {
+            src: src,
+            alt: alt,
+            style: {
+              maxWidth: '100%',
+              maxHeight: '80vh',
+              objectFit: fit,
+              display: imageLoaded ? 'block' : 'none'
+            },
+            onLoad: handleImageLoad
+          })]
+        })
       })]
-    })
+    });
+  }
+  return jsxRuntime.jsxs(material.Box, {
+    sx: Object.assign({
+      position: 'relative',
+      width: '100%',
+      maxWidth: width,
+      minWidth: '50%',
+      height: height
+    }, sx),
+    children: [jsxRuntime.jsx("img", {
+      src: src,
+      alt: alt,
+      style: {
+        objectFit: fit,
+        width: '100%',
+        height: '100%'
+      },
+      onLoad: handleImageLoad
+    }), loading && !imageLoaded && jsxRuntime.jsx(material.CircularProgress, {
+      size: 24,
+      sx: {
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)'
+      }
+    })]
   });
 };
 
-exports.default = EliceImage;
+exports.default = AdaptiveImage;

package/cjs/components/chat/Chat.js

@@ -6,13 +6,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var useAIDTMediaQuery = require('../../hooks/useAIDTMediaQuery.js');
 var material = require('@mui/material');
-require('tslib');
-var Micro = require('../../icons/Micro.js');
-var Reset = require('../../icons/Reset.js');
-var ReadyRecord = require('../../icons/ReadyRecord.js');
-var SendArrow = require('../../icons/SendArrow.js');
 var IconButton = require('../icon-button/IconButton.js');
 var RecorderContext = require('../recorder-step/RecorderContext.js');
 var AIAvatar = require('../../assets/AIAvatar.png.js');
@@ -20,6 +14,11 @@ var AssistantAvatar = require('./AssistantAvatar.js');
 var UserAvatar = require('./UserAvatar.js');
 var TypingIndicator = require('./TypingIndicator.js');
 var RecorderStep = require('../recorder-step/RecorderStep.js');
+var useAIDTMediaQuery = require('../../hooks/useAIDTMediaQuery.js');
+var ReadyRecord = require('../../icons/ReadyRecord.js');
+var Micro = require('../../icons/Micro.js');
+var Reset = require('../../icons/Reset.js');
+var SendArrow = require('../../icons/SendArrow.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -58,8 +57,6 @@ var EliceChatContainer = function EliceChatContainer(_ref) {
     _ref$isOnlyRecord = _ref.isOnlyRecord,
     isOnlyRecord = _ref$isOnlyRecord === void 0 ? false : _ref$isOnlyRecord;
   var theme = material.useTheme();
-  var _useAIDTMediaQuery = useAIDTMediaQuery.default(),
-    isTablet = _useAIDTMediaQuery.isTablet;
   var _useState = React.useState(content),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     inputValue = _useState2[0],
@@ -88,7 +85,6 @@ var EliceChatContainer = function EliceChatContainer(_ref) {
     }
   };
   return jsxRuntime.jsxs(StyledChatContainer, {
-    isTablet: isTablet,
     theme: theme,
     height: height,
     backgroundImage: backgroundImage,
@@ -193,9 +189,11 @@ EliceChat.InputArea = function (_ref3) {
   var _useRecorder2 = RecorderContext.useRecorder(),
     recorderState = _useRecorder2.state,
     setIsRecording = _useRecorder2.setIsRecording;
+  var _useAIDTMediaQuery = useAIDTMediaQuery.default(),
+    isTablet = _useAIDTMediaQuery.isTablet,
+    isMiniTablet = _useAIDTMediaQuery.isMiniTablet;
   return jsxRuntime.jsx(material.Stack, {
-    direction: "row",
-    minHeight: "3.875rem",
+    direction: isMiniTablet ? "column" : "row",
     display: recorderState.isRecording ? "none" : "",
     bgcolor: theme.palette.grey[50],
     borderRadius: "1.125rem",
@@ -207,6 +205,11 @@ EliceChat.InputArea = function (_ref3) {
     zIndex: "1000",
     children: isOnlyRecord ? jsxRuntime.jsxs(OnlyRecordButton, {
       theme: theme,
+      onClick: function onClick() {
+        onRecord === null || onRecord === void 0 ? void 0 : onRecord();
+        setIsRecording(true);
+        onTranscribingChange === null || onTranscribingChange === void 0 ? void 0 : onTranscribingChange(true);
+      },
       children: [jsxRuntime.jsx(ReadyRecord.default, {}), jsxRuntime.jsx(material.Typography, {
         variant: "h1",
         children: "\uB179\uC74C \uC2DC\uC791"
@@ -216,6 +219,7 @@ EliceChat.InputArea = function (_ref3) {
         flexGrow: 1,
         maxHeight: "14.625rem",
         children: jsxRuntime.jsx(StyledInput, {
+          isTablet: isTablet,
           disabled: isDisabled,
           value: value,
           onChange: onChange,
@@ -223,26 +227,39 @@ EliceChat.InputArea = function (_ref3) {
           theme: theme,
           multiline: true
         })
-      }), onRecord && jsxRuntime.jsx(IconButton.default, {
-        onClick: function onClick() {
-          onRecord();
-          setIsRecording(true);
-          onTranscribingChange === null || onTranscribingChange === void 0 ? void 0 : onTranscribingChange(true);
-        },
-        children: jsxRuntime.jsx(Micro.default, {
-          color: theme.palette.secondary.main
-        })
-      }), jsxRuntime.jsx(IconButton.default, {
-        onClick: onReset,
-        children: jsxRuntime.jsx(Reset.default, {
-          color: theme.palette.secondary.main
-        })
-      }), jsxRuntime.jsx(IconButton.default, {
-        onClick: onSend,
-        disabled: !value.trim(),
-        children: jsxRuntime.jsx(SendArrow.default, {
-          color: theme.palette.secondary.main
-        })
+      }), jsxRuntime.jsxs(material.Stack, {
+        direction: "row",
+        display: "flex",
+        justifyContent: isMiniTablet ? 'flex-end' : 'center',
+        gap: '0.625rem',
+        height: isTablet ? '3rem' : '3.5rem',
+        children: [onRecord && jsxRuntime.jsx(IconButton.default, {
+          width: isTablet ? '3rem' : '3.5rem',
+          height: isTablet ? '3rem' : '3.5rem',
+          onClick: function onClick() {
+            onRecord();
+            setIsRecording(true);
+            onTranscribingChange === null || onTranscribingChange === void 0 ? void 0 : onTranscribingChange(true);
+          },
+          children: jsxRuntime.jsx(Micro.default, {
+            color: theme.palette.secondary.main
+          })
+        }), jsxRuntime.jsx(IconButton.default, {
+          onClick: onReset,
+          width: isTablet ? '3rem' : '3.5rem',
+          height: isTablet ? '3rem' : '3.5rem',
+          children: jsxRuntime.jsx(Reset.default, {
+            color: theme.palette.secondary.main
+          })
+        }), jsxRuntime.jsx(IconButton.default, {
+          onClick: onSend,
+          width: isTablet ? '3rem' : '3.5rem',
+          height: isTablet ? '3rem' : '3.5rem',
+          disabled: !value.trim(),
+          children: jsxRuntime.jsx(SendArrow.default, {
+            color: theme.palette.secondary.main
+          })
+        })]
       })]
     })
   });
@@ -252,58 +269,64 @@ var StyledChatContainer = /*#__PURE__*/_styled__default.default(material.Stack,
 })("position:relative;max-height:100%;height:", function (_ref4) {
   var height = _ref4.height;
   return height !== null && height !== void 0 ? height : 'fit-content';
-}, ";min-width:", function (_ref5) {
-  var isTablet = _ref5.isTablet;
-  return isTablet ? '0' : '30rem';
-}, ";max-width:100%;border:2px solid ", function (_ref6) {
-  var theme = _ref6.theme;
+}, ";max-width:100%;border:2px solid ", function (_ref5) {
+  var theme = _ref5.theme;
   return theme.palette.grey[300];
-}, ";border-radius:1.5rem;padding:1.5rem;gap:1.75rem;", function (_ref7) {
-  var backgroundImage = _ref7.backgroundImage;
+}, ";border-radius:1.5rem;padding:1.5rem;gap:1.75rem;", function (_ref6) {
+  var backgroundImage = _ref6.backgroundImage;
   return backgroundImage && "\n    background-image: url(".concat(backgroundImage, ");\n    background-size: cover;\n    background-position: center;\n  ");
 }, ";");
 var StyledScrollBarStack = /*#__PURE__*/_styled__default.default(material.Stack, {
   target: "e1i7zt7"
-})("flex:1;overflow-y:auto;border-radius:1.125rem;padding-right:1rem;::-webkit-scrollbar{width:0.25rem;}::-webkit-scrollbar-track{background:", function (_ref8) {
-  var theme = _ref8.theme;
+})("flex:1;overflow-y:auto;border-radius:1.125rem;padding-right:1rem;::-webkit-scrollbar{width:0.25rem;}::-webkit-scrollbar-track{background:", function (_ref7) {
+  var theme = _ref7.theme;
   return theme.palette.grey[200];
-}, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb{background:", function (_ref9) {
-  var theme = _ref9.theme;
+}, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb{background:", function (_ref8) {
+  var theme = _ref8.theme;
   return theme.palette.primary.main;
-}, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb:hover{background:", function (_ref10) {
-  var theme = _ref10.theme;
+}, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb:hover{background:", function (_ref9) {
+  var theme = _ref9.theme;
   return theme.palette.secondary.main;
 }, ";}");
 var StyledInput = /*#__PURE__*/_styled__default.default(material.Input, {
   target: "e1i7zt6"
-})("width:100%;height:100%;border:none!important;background-color:transparent;font-size:1.375rem;font-weight:700;outline:none;resize:none;color:", function (_ref11) {
-  var theme = _ref11.theme;
-  return theme.palette.secondary.main;
-}, ";::placeholder{color:", function (_ref12) {
+})("width:100%;height:100%;border:none!important;background-color:transparent;font-size:", function (_ref10) {
+  var isTablet = _ref10.isTablet;
+  return isTablet ? '0.5rem' : '1.2rem';
+}, ";font-weight:", function (_ref11) {
+  var isTablet = _ref11.isTablet;
+  return isTablet ? 500 : 700;
+}, ";outline:none;resize:none;max-height:67px;color:", function (_ref12) {
   var theme = _ref12.theme;
-  return theme.palette.grey[300];
-}, ";}::before{border:none;}:hover{::before{border:none;}}::after{border-bottom:none!important;}::-webkit-scrollbar{width:0.25rem;}::-webkit-scrollbar-track{background:", function (_ref13) {
+  return theme.palette.secondary.main;
+}, ";::placeholder{color:", function (_ref13) {
   var theme = _ref13.theme;
-  return theme.palette.grey[200];
-}, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb{background:", function (_ref14) {
+  return theme.palette.grey[300];
+}, ";}::before{border:none;}:hover{::before{border:none;}}::after{border-bottom:none!important;}::-webkit-scrollbar{width:0.25rem;}::-webkit-scrollbar-track{background:", function (_ref14) {
   var theme = _ref14.theme;
-  return theme.palette.primary.main;
-}, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb:hover{background:", function (_ref15) {
+  return theme.palette.grey[200];
+}, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb{background:", function (_ref15) {
   var theme = _ref15.theme;
+  return theme.palette.primary.main;
+}, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb:hover{background:", function (_ref16) {
+  var theme = _ref16.theme;
   return theme.palette.secondary.main;
 }, ";}");
 var StyledMessage = /*#__PURE__*/_styled__default.default(material.Typography, {
   target: "e1i7zt5"
-})("color:", function (_ref16) {
-  var isAssistant = _ref16.isAssistant,
-    theme = _ref16.theme;
+})("color:", function (_ref17) {
+  var isAssistant = _ref17.isAssistant,
+    theme = _ref17.theme;
   return isAssistant ? theme.palette.text.secondary : theme.palette.secondary.main;
-}, ";font-size:1rem;font-weight:", function (_ref17) {
-  var isAssistant = _ref17.isAssistant;
+}, ";font-size:", function (_ref18) {
+  var theme = _ref18.theme;
+  return theme.typography.body1.fontSize;
+}, ";font-weight:", function (_ref19) {
+  var isAssistant = _ref19.isAssistant;
   return isAssistant ? 500 : 700;
-}, ";background-color:", function (_ref18) {
-  var isAssistant = _ref18.isAssistant,
-    theme = _ref18.theme;
+}, ";background-color:", function (_ref20) {
+  var isAssistant = _ref20.isAssistant,
+    theme = _ref20.theme;
   return isAssistant ? theme.palette.grey[50] : theme.palette.primary.light;
 }, ";border-radius:1rem;white-space:pre-wrap;padding:0.75rem;margin-bottom:16px;");
 var EmptyMessageContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
@@ -319,11 +342,11 @@ var EmptyMessageContainer = /*#__PURE__*/_styled__default.default(material.Stack
 var AIAvatarImage = /*#__PURE__*/_styled__default.default("img", {
   target: "e1i7zt3"
 })("production" === "production" ? {
-  name: "1l4h0oe",
-  styles: "width:120px;height:120px;flex-shrink:0"
+  name: "95o42w",
+  styles: "width:10rem;height:10rem;aspect-ratio:1/1;flex-shrink:0"
 } : {
-  name: "1l4h0oe",
-  styles: "width:120px;height:120px;flex-shrink:0",
+  name: "95o42w",
+  styles: "width:10rem;height:10rem;aspect-ratio:1/1;flex-shrink:0",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 var RecordingOverlay = /*#__PURE__*/_styled__default.default(material.Box, {
@@ -348,17 +371,17 @@ var OverlayContent = /*#__PURE__*/_styled__default.default(material.Box, {
 });
 var OnlyRecordButton = /*#__PURE__*/_styled__default.default(material.Stack, {
   target: "e1i7zt0"
-})("color:", function (_ref19) {
-  var theme = _ref19.theme;
+})("color:", function (_ref21) {
+  var theme = _ref21.theme;
   return theme.palette.common.white;
-}, ";background:", function (_ref20) {
-  var theme = _ref20.theme;
+}, ";background:", function (_ref22) {
+  var theme = _ref22.theme;
   return theme.palette.common.red[900];
-}, ";&:hover{background:", function (_ref21) {
-  var theme = _ref21.theme;
+}, ";width:100%;flex-direction:row;display:flex;justify-content:center;align-items:center;border-radius:16px;height:55px;gap:8px;&:hover{background:", function (_ref23) {
+  var theme = _ref23.theme;
   return theme.palette.common.red[600];
-}, ";color:", function (_ref22) {
-  var theme = _ref22.theme;
+}, ";color:", function (_ref24) {
+  var theme = _ref24.theme;
   return theme.palette.common.red[900];
 }, ";}");
 

package/cjs/components/dotted-pagination/DottedPagination.js

@@ -4,10 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var material = require('@mui/material');
+var tokenColorTemporary = require('../tokenColorTemporary.js');
 var ArrowLeft = require('../../icons/ArrowLeft.js');
 var ArrowRight = require('../../icons/ArrowRight.js');
-require('tslib');
-var tokenColorTemporary = require('../tokenColorTemporary.js');
 
 var EliceDottedPagination = function EliceDottedPagination(props) {
   var _props$currentPage = props.currentPage,

package/cjs/components/icon-button/IconButton.d.ts

@@ -3,8 +3,8 @@ import type { ReactNode } from 'react';
 export interface EliceIconButtonProps extends IconButtonProps {
     children: ReactNode;
     backgroundColor?: string;
-    width?: number;
-    height?: number;
+    width?: number | string;
+    height?: number | string;
     borderRadius?: number;
 }
 declare const EliceIconButton: ({ children, disabled, backgroundColor, width, height, borderRadius, ...rest }: EliceIconButtonProps) => import("react/jsx-runtime").JSX.Element;

package/cjs/components/layout/Header/LayoutHeaderSubTitle.js

@@ -8,10 +8,9 @@ var React = require('react');
 var menu = require('@base-ui-components/react/menu');
 var material = require('@mui/material');
 var IconButton = require('../../icon-button/IconButton.js');
-require('tslib');
+var useAIDTMediaQuery = require('../../../hooks/useAIDTMediaQuery.js');
 var MoreColumn = require('../../../icons/MoreColumn.js');
 var bluepurple = require('../../../tokens/colors/bluepurple.js');
-var useAIDTMediaQuery = require('../../../hooks/useAIDTMediaQuery.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/cjs/components/layout/Layout.d.ts

@@ -9,10 +9,11 @@ export interface EliceLayoutProps {
     allowPrev?: boolean;
     allowNext?: boolean;
     onlyPage?: boolean;
+    enableScrollTracking?: boolean;
     sx?: SxProps<Theme>;
 }
 type Alignment = "left" | "center" | "right";
-declare const EliceLayout: (({ children, onPrev, onNext, allowPrev, allowNext, backgroundImage, backgroundColor, onlyPage, sx }: EliceLayoutProps) => import("react/jsx-runtime").JSX.Element) & {
+declare const EliceLayout: (({ children, onPrev, onNext, allowPrev, allowNext, backgroundImage, backgroundColor, onlyPage, enableScrollTracking, sx }: EliceLayoutProps) => import("react/jsx-runtime").JSX.Element) & {
     HeaderContainer: ({ children, sx }: {
         children: React.ReactNode;
         sx?: SxProps<Theme> | undefined;