@elicecontents/content-ui 1.0.10 → 1.0.11-rc.0

package/cjs/components/chat/Chat.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import type { RecorderType } from "../recorder-step/RecorderStep";
 export type EliceMessageItem = {
     role: "system" | "user" | "assistant";
     content: string;
@@ -19,10 +20,13 @@ export interface EliceChatProps {
     isDisabled?: boolean;
     backgroundImage?: string;
     CustomAssistantAvatar?: React.ReactNode;
+    type?: string;
+    recorderType?: RecorderType;
+    isOnlyRecord: boolean;
 }
 declare const EliceChat: {
-    ({ placeholder, messages, content, onReset, onSend, onChange, onRecord, onTranscribingChange, setAudioFile, onTransform, isLoadingMessage, CustomAssistantAvatar, isDisabled, backgroundImage, height, }: EliceChatProps): import("react/jsx-runtime").JSX.Element;
-    MessageList({ messages, isLoadingMessage, scrollRef, height, isRecord, setIsRecord, CustomAssistantAvatar, }: {
+    (props: React.ComponentProps<typeof EliceChatContainer>): import("react/jsx-runtime").JSX.Element;
+    MessageList({ messages, isLoadingMessage, scrollRef, height, CustomAssistantAvatar, }: {
         messages: {
             role: "system" | "user" | "assistant";
             content: string;
@@ -30,11 +34,9 @@ declare const EliceChat: {
         isLoadingMessage?: boolean | undefined;
         scrollRef: React.RefObject<HTMLDivElement>;
         height?: string | undefined;
-        isRecord: boolean;
-        setIsRecord?: (() => void) | undefined;
         CustomAssistantAvatar: React.ReactNode;
     }): import("react/jsx-runtime").JSX.Element;
-    InputArea({ placeHolder, value, isDisabled, onChange, onSend, onReset, onRecord, onTranscribingChange, setAudioFile, onTransform, setIsRecord, isRecord, }: {
+    InputArea({ placeHolder, value, isDisabled, onChange, onSend, onReset, onRecord, onTranscribingChange, isOnlyRecord, }: {
         placeHolder: string;
         value: string;
         isDisabled: boolean;
@@ -42,12 +44,12 @@ declare const EliceChat: {
         onSend: () => void;
         onReset: () => void;
         onRecord?: (() => void) | undefined;
-        isRecord: boolean;
-        setIsRecord?: (() => void) | undefined;
         onTransform?: (() => void) | undefined;
-        setAudioFile?: ((file: File | null) => void) | undefined;
+        setAudioFile?: ((file: File) => void) | undefined;
         onTranscribingChange?: ((value: boolean) => void) | undefined;
+        type: RecorderType;
+        isOnlyRecord: boolean;
     }): import("react/jsx-runtime").JSX.Element;
 };
-export type AudioStep = "ready" | "waiting" | "recording";
+declare const EliceChatContainer: ({ placeholder, messages, content, onReset, onSend, onChange, onRecord, onTranscribingChange, setAudioFile, onTransform, isLoadingMessage, CustomAssistantAvatar, isDisabled, backgroundImage, height, recorderType, isOnlyRecord }: EliceChatProps) => import("react/jsx-runtime").JSX.Element;
 export default EliceChat;

package/cjs/components/chat/Chat.js

@@ -10,142 +10,60 @@ 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');
 var AssistantAvatar = require('./AssistantAvatar.js');
 var UserAvatar = require('./UserAvatar.js');
 var TypingIndicator = require('./TypingIndicator.js');
-var Recorder = require('../recorder/Recorder.js');
+var RecorderStep = require('../recorder-step/RecorderStep.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-var StyledChatContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
-  target: "e1i7zt6"
-})("position:relative;max-height:100%;height:", function (_ref) {
-  var height = _ref.height;
-  return height !== null && height !== void 0 ? height : 'fit-content';
-}, ";min-width:30rem;max-width:100%;border:2px solid ", function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.palette.grey[300];
-}, ";border-radius:1.5rem;padding:1.5rem;gap:1.75rem;", function (_ref3) {
-  var backgroundImage = _ref3.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: "e1i7zt5"
-})("flex:1;overflow-y:auto;border-radius:1.125rem;padding-right:1rem;::-webkit-scrollbar{width:0.25rem;}::-webkit-scrollbar-track{background:", function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.palette.grey[200];
-}, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb{background:", function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.palette.primary.main;
-}, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb:hover{background:", function (_ref6) {
-  var theme = _ref6.theme;
-  return theme.palette.secondary.main;
-}, ";}");
-var StyledInput = /*#__PURE__*/_styled__default.default(material.Input, {
-  target: "e1i7zt4"
-})("width:100%;height:100%;border:none!important;background-color:transparent;font-size:1.375rem;font-weight:700;outline:none;resize:none;color:", function (_ref7) {
-  var theme = _ref7.theme;
-  return theme.palette.secondary.main;
-}, ";::placeholder{color:", function (_ref8) {
-  var theme = _ref8.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 (_ref9) {
-  var theme = _ref9.theme;
-  return theme.palette.grey[200];
-}, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb{background:", function (_ref10) {
-  var theme = _ref10.theme;
-  return theme.palette.primary.main;
-}, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb:hover{background:", function (_ref11) {
-  var theme = _ref11.theme;
-  return theme.palette.secondary.main;
-}, ";}");
-var StyledMessage = /*#__PURE__*/_styled__default.default(material.Typography, {
-  target: "e1i7zt3"
-})("color:", function (_ref12) {
-  var isAssistant = _ref12.isAssistant,
-    theme = _ref12.theme;
-  return isAssistant ? theme.palette.text.secondary : theme.palette.secondary.main;
-}, ";font-size:1rem;font-weight:", function (_ref13) {
-  var isAssistant = _ref13.isAssistant;
-  return isAssistant ? 500 : 700;
-}, ";background-color:", function (_ref14) {
-  var isAssistant = _ref14.isAssistant,
-    theme = _ref14.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 RecordingOverlay = /*#__PURE__*/_styled__default.default("div", {
-  target: "e1i7zt2"
-})("production" === "production" ? {
-  name: "1805g3a",
-  styles: "position:absolute;top:0;left:24px;width:calc(100% - 48px);height:calc(100% - 24px);background-color:rgba(0, 0, 0, 0.4);z-index:999;backdrop-filter:blur(1px);border-radius:0 0 1.125rem 1.125rem"
-} : {
-  name: "1805g3a",
-  styles: "position:absolute;top:0;left:24px;width:calc(100% - 48px);height:calc(100% - 24px);background-color:rgba(0, 0, 0, 0.4);z-index:999;backdrop-filter:blur(1px);border-radius:0 0 1.125rem 1.125rem",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var EmptyMessageContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
-  target: "e1i7zt1"
-})("production" === "production" ? {
-  name: "1bdo6l4",
-  styles: "display:flex;justify-content:center;align-items:center;height:100%;gap:1rem"
-} : {
-  name: "1bdo6l4",
-  styles: "display:flex;justify-content:center;align-items:center;height:100%;gap:1rem",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var AIAvatarImage = /*#__PURE__*/_styled__default.default("img", {
-  target: "e1i7zt0"
-})("production" === "production" ? {
-  name: "1l4h0oe",
-  styles: "width:120px;height:120px;flex-shrink:0"
-} : {
-  name: "1l4h0oe",
-  styles: "width:120px;height:120px;flex-shrink:0",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var _EliceChat = function EliceChat(_ref15) {
-  var _ref15$placeholder = _ref15.placeholder,
-    placeholder = _ref15$placeholder === void 0 ? "AI와 대화를 시작해 보세요" : _ref15$placeholder,
-    _ref15$messages = _ref15.messages,
-    messages = _ref15$messages === void 0 ? [] : _ref15$messages,
-    _ref15$content = _ref15.content,
-    content = _ref15$content === void 0 ? "" : _ref15$content,
-    onReset = _ref15.onReset,
-    onSend = _ref15.onSend,
-    _onChange = _ref15.onChange,
-    onRecord = _ref15.onRecord,
-    onTranscribingChange = _ref15.onTranscribingChange,
-    setAudioFile = _ref15.setAudioFile,
-    onTransform = _ref15.onTransform,
-    isLoadingMessage = _ref15.isLoadingMessage,
-    CustomAssistantAvatar = _ref15.CustomAssistantAvatar,
-    _ref15$isDisabled = _ref15.isDisabled,
-    isDisabled = _ref15$isDisabled === void 0 ? false : _ref15$isDisabled,
-    backgroundImage = _ref15.backgroundImage,
-    _ref15$height = _ref15.height,
-    height = _ref15$height === void 0 ? "100%" : _ref15$height;
+var EliceChat = function EliceChat(props) {
+  return jsxRuntime.jsx(RecorderContext.RecorderProvider, {
+    children: jsxRuntime.jsx(EliceChatContainer, Object.assign({}, props))
+  });
+};
+var EliceChatContainer = function EliceChatContainer(_ref) {
+  var _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? "AI와 대화를 시작해 보세요" : _ref$placeholder,
+    _ref$messages = _ref.messages,
+    messages = _ref$messages === void 0 ? [] : _ref$messages,
+    _ref$content = _ref.content,
+    content = _ref$content === void 0 ? "" : _ref$content,
+    onReset = _ref.onReset,
+    onSend = _ref.onSend,
+    _onChange = _ref.onChange,
+    onRecord = _ref.onRecord,
+    onTranscribingChange = _ref.onTranscribingChange,
+    setAudioFile = _ref.setAudioFile,
+    onTransform = _ref.onTransform,
+    isLoadingMessage = _ref.isLoadingMessage,
+    CustomAssistantAvatar = _ref.CustomAssistantAvatar,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    backgroundImage = _ref.backgroundImage,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "100%" : _ref$height,
+    _ref$recorderType = _ref.recorderType,
+    recorderType = _ref$recorderType === void 0 ? 'notNeed' : _ref$recorderType,
+    _ref$isOnlyRecord = _ref.isOnlyRecord,
+    isOnlyRecord = _ref$isOnlyRecord === void 0 ? false : _ref$isOnlyRecord;
   var theme = material.useTheme();
   var _useState = React.useState(content),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     inputValue = _useState2[0],
     setInputValue = _useState2[1];
   var scrollRef = React.useRef(null);
-  var _useState3 = React.useState(false),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    isRecord = _useState4[0],
-    setIsRecord = _useState4[1];
-  var onClickRecordButton = function onClickRecordButton() {
-    setIsRecord(true);
-  };
-  var onClickRecordOverlay = function onClickRecordOverlay() {
-    setIsRecord(false);
-  };
+  var _useRecorder = RecorderContext.useRecorder(),
+    recorderState = _useRecorder.state,
+    setIsRecording = _useRecorder.setIsRecording;
   React.useEffect(function () {
     if (scrollRef.current) {
       scrollRef.current.scrollIntoView({
@@ -154,9 +72,11 @@ var _EliceChat = function EliceChat(_ref15) {
     }
   }, [messages, isLoadingMessage]);
   var onClickRecordSubmit = function onClickRecordSubmit() {
-    setIsRecord(false);
     onTransform === null || onTransform === void 0 ? void 0 : onTransform();
   };
+  var onClickCloseIsRecording = function onClickCloseIsRecording() {
+    setIsRecording(false);
+  };
   var handleSend = function handleSend() {
     if (inputValue.trim()) {
       onSend(inputValue);
@@ -167,49 +87,60 @@ var _EliceChat = function EliceChat(_ref15) {
     theme: theme,
     height: height,
     backgroundImage: backgroundImage,
-    children: [jsxRuntime.jsx(_EliceChat.MessageList, {
+    children: [recorderState.isRecording && setAudioFile && jsxRuntime.jsx(RecordingOverlay, {
+      onClick: onClickCloseIsRecording,
+      children: jsxRuntime.jsx(OverlayContent, {
+        onClick: function onClick(e) {
+          return e.stopPropagation();
+        },
+        children: jsxRuntime.jsx(RecorderStep.default, {
+          closeRecorder: onClickCloseIsRecording,
+          onAudioReady: setAudioFile,
+          onRecord: onRecord,
+          onTransform: onTransform,
+          type: recorderType,
+          visualType: "bar",
+          onTranscribingChange: onTranscribingChange,
+          isLoadingMessage: isLoadingMessage
+        })
+      })
+    }), jsxRuntime.jsx(EliceChat.MessageList, {
       messages: messages,
       isLoadingMessage: isLoadingMessage,
       scrollRef: scrollRef,
-      setIsRecord: onClickRecordOverlay,
-      isRecord: isRecord,
       CustomAssistantAvatar: CustomAssistantAvatar
-    }), jsxRuntime.jsx(_EliceChat.InputArea, {
+    }), jsxRuntime.jsx(EliceChat.InputArea, {
       placeHolder: placeholder,
       value: inputValue,
       onChange: function onChange(e) {
         setInputValue(e.target.value);
         _onChange(e.target.value);
       },
-      setIsRecord: onClickRecordButton,
-      isRecord: isRecord,
+      isOnlyRecord: isOnlyRecord,
       setAudioFile: setAudioFile,
       onTransform: onClickRecordSubmit,
       onSend: handleSend,
       onReset: onReset,
       onRecord: onRecord,
       onTranscribingChange: onTranscribingChange,
-      isDisabled: isDisabled
+      isDisabled: isDisabled,
+      type: recorderType
     })]
   });
 };
 // ✅ 메시지 리스트 컴포넌트
-_EliceChat.MessageList = function (_ref16) {
-  var messages = _ref16.messages,
-    isLoadingMessage = _ref16.isLoadingMessage,
-    scrollRef = _ref16.scrollRef,
-    _ref16$height = _ref16.height,
-    height = _ref16$height === void 0 ? "100%" : _ref16$height,
-    isRecord = _ref16.isRecord,
-    setIsRecord = _ref16.setIsRecord,
-    CustomAssistantAvatar = _ref16.CustomAssistantAvatar;
+EliceChat.MessageList = function (_ref2) {
+  var messages = _ref2.messages,
+    isLoadingMessage = _ref2.isLoadingMessage,
+    scrollRef = _ref2.scrollRef,
+    _ref2$height = _ref2.height,
+    height = _ref2$height === void 0 ? "100%" : _ref2$height,
+    CustomAssistantAvatar = _ref2.CustomAssistantAvatar;
   var theme = material.useTheme();
-  return jsxRuntime.jsxs(StyledScrollBarStack, {
+  return jsxRuntime.jsx(StyledScrollBarStack, {
     theme: theme,
     height: height,
-    children: [isRecord && jsxRuntime.jsx(RecordingOverlay, {
-      onClick: setIsRecord
-    }), messages.length === 0 ? jsxRuntime.jsxs(EmptyMessageContainer, {
+    children: messages.length === 0 ? jsxRuntime.jsxs(EmptyMessageContainer, {
       children: [jsxRuntime.jsx(AIAvatarImage, {
         src: AIAvatar.default,
         alt: "Ai-avatar"
@@ -238,42 +169,41 @@ _EliceChat.MessageList = function (_ref16) {
       }), isLoadingMessage && jsxRuntime.jsx(TypingIndicator.default, {}), jsxRuntime.jsx("div", {
         ref: scrollRef
       })]
-    })]
+    })
   });
 };
-_EliceChat.InputArea = function (_ref17) {
-  var placeHolder = _ref17.placeHolder,
-    value = _ref17.value,
-    isDisabled = _ref17.isDisabled,
-    onChange = _ref17.onChange,
-    onSend = _ref17.onSend,
-    onReset = _ref17.onReset,
-    onRecord = _ref17.onRecord,
-    onTranscribingChange = _ref17.onTranscribingChange,
-    setAudioFile = _ref17.setAudioFile,
-    onTransform = _ref17.onTransform,
-    setIsRecord = _ref17.setIsRecord,
-    isRecord = _ref17.isRecord;
-  var _a;
+EliceChat.InputArea = function (_ref3) {
+  var placeHolder = _ref3.placeHolder,
+    value = _ref3.value,
+    isDisabled = _ref3.isDisabled,
+    onChange = _ref3.onChange,
+    onSend = _ref3.onSend,
+    onReset = _ref3.onReset,
+    onRecord = _ref3.onRecord,
+    onTranscribingChange = _ref3.onTranscribingChange,
+    isOnlyRecord = _ref3.isOnlyRecord;
   var theme = material.useTheme();
+  var _useRecorder2 = RecorderContext.useRecorder(),
+    recorderState = _useRecorder2.state,
+    setIsRecording = _useRecorder2.setIsRecording;
   return jsxRuntime.jsx(material.Stack, {
     direction: "row",
     minHeight: "3.875rem",
+    display: recorderState.isRecording ? "none" : "",
     bgcolor: theme.palette.grey[50],
     borderRadius: "1.125rem",
-    width: isRecord ? "100%" : "auto",
-    justifyContent: isRecord ? "center" : "none",
-    alignItems: isRecord ? "center" : "none",
+    width: recorderState.isRecording ? "100%" : "auto",
+    justifyContent: recorderState.isRecording ? "center" : "none",
+    alignItems: recorderState.isRecording ? "center" : "none",
     p: "0.5rem 1rem",
     gap: "0.625rem",
     zIndex: "1000",
-    children: isRecord ? jsxRuntime.jsx(Recorder.default
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    , {
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      onAudioReady: (_a = setAudioFile !== null && setAudioFile !== void 0 ? setAudioFile : setAudioFile) !== null && _a !== void 0 ? _a : function () {},
-      onTransform: onTransform,
-      type: "submit"
+    children: isOnlyRecord ? jsxRuntime.jsxs(OnlyRecordButton, {
+      theme: theme,
+      children: [jsxRuntime.jsx(ReadyRecord.default, {}), jsxRuntime.jsx(material.Typography, {
+        variant: "h1",
+        children: "\uB179\uC74C \uC2DC\uC791"
+      })]
     }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [jsxRuntime.jsx(material.Stack, {
         flexGrow: 1,
@@ -288,8 +218,8 @@ _EliceChat.InputArea = function (_ref17) {
         })
       }), onRecord && jsxRuntime.jsx(IconButton.default, {
         onClick: function onClick() {
-          setIsRecord === null || setIsRecord === void 0 ? void 0 : setIsRecord();
           onRecord();
+          setIsRecording(true);
           onTranscribingChange === null || onTranscribingChange === void 0 ? void 0 : onTranscribingChange(true);
         },
         children: jsxRuntime.jsx(Micro.default, {
@@ -310,5 +240,116 @@ _EliceChat.InputArea = function (_ref17) {
     })
   });
 };
+var StyledChatContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
+  target: "e1i7zt8"
+})("position:relative;max-height:100%;height:", function (_ref4) {
+  var height = _ref4.height;
+  return height !== null && height !== void 0 ? height : 'fit-content';
+}, ";min-width:30rem;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 (_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 (_ref7) {
+  var theme = _ref7.theme;
+  return theme.palette.grey[200];
+}, ";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 (_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 (_ref10) {
+  var theme = _ref10.theme;
+  return theme.palette.secondary.main;
+}, ";::placeholder{color:", function (_ref11) {
+  var theme = _ref11.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 (_ref12) {
+  var theme = _ref12.theme;
+  return theme.palette.grey[200];
+}, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb{background:", function (_ref13) {
+  var theme = _ref13.theme;
+  return theme.palette.primary.main;
+}, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb:hover{background:", function (_ref14) {
+  var theme = _ref14.theme;
+  return theme.palette.secondary.main;
+}, ";}");
+var StyledMessage = /*#__PURE__*/_styled__default.default(material.Typography, {
+  target: "e1i7zt5"
+})("color:", function (_ref15) {
+  var isAssistant = _ref15.isAssistant,
+    theme = _ref15.theme;
+  return isAssistant ? theme.palette.text.secondary : theme.palette.secondary.main;
+}, ";font-size:1rem;font-weight:", function (_ref16) {
+  var isAssistant = _ref16.isAssistant;
+  return isAssistant ? 500 : 700;
+}, ";background-color:", function (_ref17) {
+  var isAssistant = _ref17.isAssistant,
+    theme = _ref17.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, {
+  target: "e1i7zt4"
+})("production" === "production" ? {
+  name: "1bdo6l4",
+  styles: "display:flex;justify-content:center;align-items:center;height:100%;gap:1rem"
+} : {
+  name: "1bdo6l4",
+  styles: "display:flex;justify-content:center;align-items:center;height:100%;gap:1rem",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var AIAvatarImage = /*#__PURE__*/_styled__default.default("img", {
+  target: "e1i7zt3"
+})("production" === "production" ? {
+  name: "1l4h0oe",
+  styles: "width:120px;height:120px;flex-shrink:0"
+} : {
+  name: "1l4h0oe",
+  styles: "width:120px;height:120px;flex-shrink:0",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var RecordingOverlay = /*#__PURE__*/_styled__default.default(material.Box, {
+  target: "e1i7zt2"
+})("production" === "production" ? {
+  name: "yb7goz",
+  styles: "position:absolute;width:100%;height:100%;top:0;left:0;right:0;bottom:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;border-radius:1.5rem;background-color:rgba(0, 0, 0, 0.3);display:flex"
+} : {
+  name: "yb7goz",
+  styles: "position:absolute;width:100%;height:100%;top:0;left:0;right:0;bottom:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;border-radius:1.5rem;background-color:rgba(0, 0, 0, 0.3);display:flex",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var OverlayContent = /*#__PURE__*/_styled__default.default(material.Box, {
+  target: "e1i7zt1"
+})("production" === "production" ? {
+  name: "1893fwq",
+  styles: "width:100%;height:212px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end"
+} : {
+  name: "1893fwq",
+  styles: "width:100%;height:212px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var OnlyRecordButton = /*#__PURE__*/_styled__default.default(material.Stack, {
+  target: "e1i7zt0"
+})("color:", function (_ref18) {
+  var theme = _ref18.theme;
+  return theme.palette.common.white;
+}, ";background:", function (_ref19) {
+  var theme = _ref19.theme;
+  return theme.palette.common.red[900];
+}, ";&:hover{background:", function (_ref20) {
+  var theme = _ref20.theme;
+  return theme.palette.common.red[600];
+}, ";color:", function (_ref21) {
+  var theme = _ref21.theme;
+  return theme.palette.common.red[900];
+}, ";}");
 
-exports.default = _EliceChat;
+exports.default = EliceChat;

package/cjs/components/index.d.ts

@@ -23,3 +23,5 @@ export * from './recorder-chat';
 export * from './video';
 export * from './recorder';
 export * from './audio';
+export * from './sound-visualizer';
+export * from './recorder-step';

package/cjs/components/index.js

@@ -23,6 +23,9 @@ var RecorderChat = require('./recorder-chat/RecorderChat.js');
 var VideoPlayer = require('./video/VideoPlayer.js');
 var Recorder = require('./recorder/Recorder.js');
 var Audio = require('./audio/Audio.js');
+var SoundVisualizer = require('./sound-visualizer/SoundVisualizer.js');
+var RecorderContext = require('./recorder-step/RecorderContext.js');
+var RecorderStep = require('./recorder-step/RecorderStep.js');
 
 
 
@@ -49,3 +52,6 @@ exports.EliceRecorderChat = RecorderChat.default;
 exports.EliceVideoPlayer = VideoPlayer.default;
 exports.EliceRecorder = Recorder.default;
 exports.EliceAudioPlayer = Audio.default;
+exports.SoundVisualizer = SoundVisualizer.SoundVisualizer;
+exports.RecorderProvider = RecorderContext.RecorderProvider;
+exports.EliceRecorderStep = RecorderStep.default;

package/cjs/components/layout/Layout.js

@@ -24,7 +24,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 var EliceLayoutContext = React__default.default.createContext(undefined);
 var MainContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
   target: "efnp08i6"
-})("width:100%;height:100vh;display:flex;flex-direction:column;padding:", function (_ref) {
+})("width:100%;height:100vh;max-width:1280px;display:flex;flex-direction:column;padding:", function (_ref) {
   var isMiniTablet = _ref.isMiniTablet;
   return isMiniTablet ? "0 20px" : "0 40px";
 }, ";box-sizing:border-box;position:relative;background-image:", function (_ref2) {
@@ -77,7 +77,7 @@ var SubtitleContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
 }, ";");
 var _ContentContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
   target: "efnp08i2"
-})("flex:1;width:100%;max-height:calc(100vh - 74px - 92px);overflow-y:auto;min-height:0;position:relative;&::-webkit-scrollbar{width:8px;}&::-webkit-scrollbar-thumb{background-color:", function (_ref10) {
+})("flex:1;width:100%;max-height:calc(100vh - 74px - 92px);max-width:1200px;overflow-y:auto;min-height:0;position:relative;&::-webkit-scrollbar{width:8px;}&::-webkit-scrollbar-thumb{background-color:", function (_ref10) {
   var theme = _ref10.theme;
   return theme.palette.primary.main;
 }, ";border-radius:4px;}&::-webkit-scrollbar-track{background-color:", function (_ref11) {

package/cjs/components/recorder/Recorder.js

@@ -120,6 +120,7 @@ var EliceRecorder = function EliceRecorder(_ref) {
       children: [jsxRuntime.jsxs(StyledRecorderButton, {
         step: recordingStep,
         onClick: recordingStep === "ready" || recordingStep === "waiting" ? startRecording : stopRecording,
+        theme: theme,
         children: [recordingStep === "ready" || recordingStep === "waiting" ? jsxRuntime.jsx(ReadyRecord.default, {}) : jsxRuntime.jsx(Recording.default, {}), jsxRuntime.jsx(material.Typography, {
           variant: "buttoninput",
           children: recordingStep === "ready" ? "녹음 시작" : recordingStep === "recording" ? "녹음 중지" : "다시 녹음"
@@ -200,12 +201,17 @@ var WaveBar = /*#__PURE__*/_styled__default.default(material.Box, {
 var StyledRecorderButton = /*#__PURE__*/_styled__default.default(material.Button, {
   target: "el6xa1g1"
 })("display:flex;width:160px;border:none;height:55px;padding:12px 20px 12px 17px;justify-content:center;align-items:center;gap:8px;cursor:pointer;flex-shrink:0;border-radius:16px;color:", function (_ref6) {
-  var step = _ref6.step;
-  return step === "ready" || step === "waiting" ? "#fff" : "#FF5D58";
+  var step = _ref6.step,
+    theme = _ref6.theme;
+  return step === "ready" || step === "waiting" ? theme.palette.common.white : theme.palette.common.red[900];
 }, ";background:", function (_ref7) {
-  var step = _ref7.step;
-  return step === "ready" || step === "waiting" ? "#FF5D58" : "#FBE0E0";
-}, ";");
+  var step = _ref7.step,
+    theme = _ref7.theme;
+  return step === "ready" || step === "waiting" ? theme.palette.common.red[900] : theme.palette.common.red[200];
+}, ";&:hover{background:", function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.palette.common.red[600];
+}, ";}");
 var StyledRecorderContent = /*#__PURE__*/_styled__default.default(material.Stack, {
   target: "el6xa1g0"
 })("production" === "production" ? {

package/cjs/components/recorder-step/RecorderContext.d.ts

@@ -0,0 +1,40 @@
+import React, { Dispatch } from 'react';
+export type AudioStep = 'ready' | 'recording' | 'pause' | 'waiting';
+export type StepFlowType = 'basic' | 'pauseable' | 'oneClick' | 'recordOnly' | 'instantRecord';
+interface RecorderState {
+    step: AudioStep;
+    analyser: AnalyserNode | null;
+    isRecording: boolean;
+    file: File | null;
+    audioUrl: string;
+}
+type RecorderContextType = {
+    state: RecorderState;
+    dispatch: Dispatch<RecorderAction>;
+    startRecording: (onComplete?: (file: File) => void) => Promise<void>;
+    stopRecording: (isSubmit: boolean) => void;
+    pauseRecording: () => void;
+    resumeRecording: () => void;
+    setIsRecording: (isRecording: boolean) => void;
+};
+type RecorderAction = {
+    type: 'SET_STEP';
+    payload: AudioStep;
+} | {
+    type: 'SET_ANALYSER';
+    payload: AnalyserNode | null;
+} | {
+    type: 'SET_IS_RECORDING';
+    payload: boolean;
+} | {
+    type: 'SET_FILE';
+    payload: File;
+} | {
+    type: 'SET_URL';
+    payload: string;
+};
+export declare const RecorderProvider: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useRecorder: () => RecorderContextType;
+export {};