@elicecontents/content-ui 1.0.7 → 1.0.8

package/cjs/components/Modal/Modal.js

@@ -47,10 +47,7 @@ var EliceModal = function EliceModal(props) {
           },
           color: "secondary"
         })
-      }), jsxRuntime.jsx(material.Typography, {
-        variant: 'body1',
-        children: children
-      })]
+      }), children]
     })
   });
 };

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

@@ -11,6 +11,8 @@ export interface EliceChatProps {
     onChange: (text: string) => void;
     onSend: (text: string) => void;
     onRecord?: () => void;
+    setAudioFile?: (file: File | null) => void;
+    onTransform?: () => void;
     height?: string;
     onTranscribingChange?: (value: boolean) => void;
     isLoadingMessage?: boolean;
@@ -18,8 +20,8 @@ export interface EliceChatProps {
     CustomAssistantAvatar?: React.ReactNode;
 }
 declare const EliceChat: {
-    ({ placeholder, messages, content, onReset, onSend, onChange, onRecord, onTranscribingChange, isLoadingMessage, CustomAssistantAvatar, isDisabled, height, }: EliceChatProps): import("react/jsx-runtime").JSX.Element;
-    MessageList({ messages, isLoadingMessage, scrollRef, height, CustomAssistantAvatar, }: {
+    ({ placeholder, messages, content, onReset, onSend, onChange, onRecord, onTranscribingChange, setAudioFile, onTransform, isLoadingMessage, CustomAssistantAvatar, isDisabled, height, }: EliceChatProps): import("react/jsx-runtime").JSX.Element;
+    MessageList({ messages, isLoadingMessage, scrollRef, height, isRecord, setIsRecord, CustomAssistantAvatar, }: {
         messages: {
             role: "system" | "user" | "assistant";
             content: string;
@@ -27,9 +29,11 @@ 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, }: {
+    InputArea({ placeHolder, value, isDisabled, onChange, onSend, onReset, onRecord, onTranscribingChange, setAudioFile, onTransform, setIsRecord, isRecord, }: {
         placeHolder: string;
         value: string;
         isDisabled: boolean;
@@ -37,7 +41,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;
         onTranscribingChange?: ((value: boolean) => void) | undefined;
     }): import("react/jsx-runtime").JSX.Element;
 };
+export type AudioStep = "ready" | "waiting" | "recording";
 export default EliceChat;

package/cjs/components/chat/Chat.js

@@ -15,14 +15,16 @@ var IconButton = require('../icon-button/IconButton.js');
 var AssistantAvatar = require('./AssistantAvatar.js');
 var UserAvatar = require('./UserAvatar.js');
 var TypingIndicator = require('./TypingIndicator.js');
+var Recorder = require('../recorder/Recorder.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: "e1i7zt3"
-})("height:fit-content;max-height:100%;height:", function (_ref) {
+  target: "e1i7zt4"
+})("position:relative;height:fit-content;max-height:100%;height:", function (_ref) {
   var height = _ref.height;
   return height;
 }, ";min-width:30rem;max-width:100%;border:2px solid ", function (_ref2) {
@@ -30,7 +32,7 @@ var StyledChatContainer = /*#__PURE__*/_styled__default.default(material.Stack,
   return theme.palette.grey[300];
 }, ";border-radius:1.5rem;padding:1.5rem;gap:1.75rem;");
 var StyledScrollBarStack = /*#__PURE__*/_styled__default.default(material.Stack, {
-  target: "e1i7zt2"
+  target: "e1i7zt3"
 })("flex:1;overflow-y:auto;border-radius:1.125rem;padding-right:1rem;::-webkit-scrollbar{width:0.25rem;}::-webkit-scrollbar-track{background:", function (_ref3) {
   var theme = _ref3.theme;
   return theme.palette.grey[200];
@@ -42,7 +44,7 @@ var StyledScrollBarStack = /*#__PURE__*/_styled__default.default(material.Stack,
   return theme.palette.secondary.main;
 }, ";}");
 var StyledInput = /*#__PURE__*/_styled__default.default(material.Input, {
-  target: "e1i7zt1"
+  target: "e1i7zt2"
 })("width:100%;height:100%;border:none!important;background-color:transparent;font-size:1.375rem;font-weight:700;outline:none;resize:none;color:", function (_ref6) {
   var theme = _ref6.theme;
   return theme.palette.secondary.main;
@@ -60,7 +62,7 @@ var StyledInput = /*#__PURE__*/_styled__default.default(material.Input, {
   return theme.palette.secondary.main;
 }, ";}");
 var StyledMessage = /*#__PURE__*/_styled__default.default(material.Typography, {
-  target: "e1i7zt0"
+  target: "e1i7zt1"
 })("color:", function (_ref11) {
   var isAssistant = _ref11.isAssistant,
     theme = _ref11.theme;
@@ -73,6 +75,16 @@ var StyledMessage = /*#__PURE__*/_styled__default.default(material.Typography, {
     theme = _ref13.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: "e1i7zt0"
+})("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 _EliceChat = function EliceChat(_ref14) {
   var _ref14$placeholder = _ref14.placeholder,
     placeholder = _ref14$placeholder === void 0 ? "AI와 대화를 시작해 보세요" : _ref14$placeholder,
@@ -85,6 +97,8 @@ var _EliceChat = function EliceChat(_ref14) {
     _onChange = _ref14.onChange,
     onRecord = _ref14.onRecord,
     onTranscribingChange = _ref14.onTranscribingChange,
+    setAudioFile = _ref14.setAudioFile,
+    onTransform = _ref14.onTransform,
     isLoadingMessage = _ref14.isLoadingMessage,
     CustomAssistantAvatar = _ref14.CustomAssistantAvatar,
     _ref14$isDisabled = _ref14.isDisabled,
@@ -97,6 +111,16 @@ var _EliceChat = function EliceChat(_ref14) {
     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);
+  };
   React.useEffect(function () {
     if (scrollRef.current) {
       scrollRef.current.scrollIntoView({
@@ -104,6 +128,10 @@ var _EliceChat = function EliceChat(_ref14) {
       });
     }
   }, [messages, isLoadingMessage]);
+  var onClickRecordSubmit = function onClickRecordSubmit() {
+    setIsRecord(false);
+    onTransform === null || onTransform === void 0 ? void 0 : onTransform();
+  };
   var handleSend = function handleSend() {
     if (inputValue.trim()) {
       onSend(inputValue);
@@ -117,6 +145,8 @@ var _EliceChat = function EliceChat(_ref14) {
       messages: messages,
       isLoadingMessage: isLoadingMessage,
       scrollRef: scrollRef,
+      setIsRecord: onClickRecordOverlay,
+      isRecord: isRecord,
       CustomAssistantAvatar: CustomAssistantAvatar
     }), jsxRuntime.jsx(_EliceChat.InputArea, {
       placeHolder: placeholder,
@@ -125,6 +155,10 @@ var _EliceChat = function EliceChat(_ref14) {
         setInputValue(e.target.value);
         _onChange(e.target.value);
       },
+      setIsRecord: onClickRecordButton,
+      isRecord: isRecord,
+      setAudioFile: setAudioFile,
+      onTransform: onClickRecordSubmit,
       onSend: handleSend,
       onReset: onReset,
       onRecord: onRecord,
@@ -140,12 +174,16 @@ _EliceChat.MessageList = function (_ref15) {
     scrollRef = _ref15.scrollRef,
     _ref15$height = _ref15.height,
     height = _ref15$height === void 0 ? "100%" : _ref15$height,
+    isRecord = _ref15.isRecord,
+    setIsRecord = _ref15.setIsRecord,
     CustomAssistantAvatar = _ref15.CustomAssistantAvatar;
   var theme = material.useTheme();
-  return jsxRuntime.jsx(StyledScrollBarStack, {
+  return jsxRuntime.jsxs(StyledScrollBarStack, {
     theme: theme,
     height: height,
-    children: messages.length === 0 ? jsxRuntime.jsx(material.Typography, {
+    children: [isRecord && jsxRuntime.jsx(RecordingOverlay, {
+      onClick: setIsRecord
+    }), messages.length === 0 ? jsxRuntime.jsx(material.Typography, {
       color: theme.palette.text.disabled,
       fontSize: "2rem",
       fontWeight: 700,
@@ -170,7 +208,7 @@ _EliceChat.MessageList = function (_ref15) {
       }), isLoadingMessage && jsxRuntime.jsx(TypingIndicator.default, {}), jsxRuntime.jsx("div", {
         ref: scrollRef
       })]
-    })
+    })]
   });
 };
 _EliceChat.InputArea = function (_ref16) {
@@ -181,40 +219,59 @@ _EliceChat.InputArea = function (_ref16) {
     onSend = _ref16.onSend,
     onReset = _ref16.onReset,
     onRecord = _ref16.onRecord,
-    onTranscribingChange = _ref16.onTranscribingChange;
+    onTranscribingChange = _ref16.onTranscribingChange,
+    setAudioFile = _ref16.setAudioFile,
+    onTransform = _ref16.onTransform,
+    setIsRecord = _ref16.setIsRecord,
+    isRecord = _ref16.isRecord;
+  var _a;
   var theme = material.useTheme();
-  return jsxRuntime.jsxs(material.Stack, {
+  return jsxRuntime.jsx(material.Stack, {
     direction: "row",
     minHeight: "3.875rem",
     bgcolor: theme.palette.grey[50],
     borderRadius: "1.125rem",
+    width: isRecord ? "100%" : "auto",
+    justifyContent: isRecord ? "center" : "none",
+    alignItems: isRecord ? "center" : "none",
     p: "0.5rem 1rem",
     gap: "0.625rem",
-    children: [jsxRuntime.jsx(material.Stack, {
-      flexGrow: 1,
-      maxHeight: "14.625rem",
-      children: jsxRuntime.jsx(StyledInput, {
-        disabled: isDisabled,
-        value: value,
-        onChange: onChange,
-        placeholder: placeHolder,
-        theme: theme,
-        multiline: true
-      })
-    }), onRecord && jsxRuntime.jsx(IconButton.default, {
-      onClick: function onClick() {
-        onRecord();
-        onTranscribingChange === null || onTranscribingChange === void 0 ? void 0 : onTranscribingChange(true);
-      },
-      children: jsxRuntime.jsx(Micro.default, {})
-    }), jsxRuntime.jsx(IconButton.default, {
-      onClick: onReset,
-      children: jsxRuntime.jsx(Reset.default, {})
-    }), jsxRuntime.jsx(IconButton.default, {
-      onClick: onSend,
-      disabled: !value.trim(),
-      children: jsxRuntime.jsx(Send.default, {})
-    })]
+    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"
+    }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(material.Stack, {
+        flexGrow: 1,
+        maxHeight: "14.625rem",
+        children: jsxRuntime.jsx(StyledInput, {
+          disabled: isDisabled,
+          value: value,
+          onChange: onChange,
+          placeholder: placeHolder,
+          theme: theme,
+          multiline: true
+        })
+      }), onRecord && jsxRuntime.jsx(IconButton.default, {
+        onClick: function onClick() {
+          setIsRecord === null || setIsRecord === void 0 ? void 0 : setIsRecord();
+          onRecord();
+          onTranscribingChange === null || onTranscribingChange === void 0 ? void 0 : onTranscribingChange(true);
+        },
+        children: jsxRuntime.jsx(Micro.default, {})
+      }), jsxRuntime.jsx(IconButton.default, {
+        onClick: onReset,
+        children: jsxRuntime.jsx(Reset.default, {})
+      }), jsxRuntime.jsx(IconButton.default, {
+        onClick: onSend,
+        disabled: !value.trim(),
+        children: jsxRuntime.jsx(Send.default, {})
+      })]
+    })
   });
 };
 

package/cjs/components/recorder/Recorder.d.ts

@@ -1,6 +1,8 @@
+type RecorderType = "submit" | "change";
 export interface EliceRecorderProps {
     onAudioReady: (file: File) => void;
     onTransform?: () => void;
+    type?: RecorderType;
 }
-declare const EliceRecorder: ({ onAudioReady, onTransform }: EliceRecorderProps) => import("react/jsx-runtime").JSX.Element;
+declare const EliceRecorder: ({ onAudioReady, onTransform, type }: EliceRecorderProps) => import("react/jsx-runtime").JSX.Element;
 export default EliceRecorder;

package/cjs/components/recorder/Recorder.js

@@ -19,7 +19,9 @@ 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 EliceRecorder = function EliceRecorder(_ref) {
   var onAudioReady = _ref.onAudioReady,
-    onTransform = _ref.onTransform;
+    onTransform = _ref.onTransform,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? "change" : _ref$type;
   var theme = material.useTheme();
   var _useState = React.useState("ready"),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
@@ -117,16 +119,16 @@ var EliceRecorder = function EliceRecorder(_ref) {
       direction: "row",
       children: [jsxRuntime.jsxs(StyledRecorderButton, {
         step: recordingStep,
-        onClick: recordingStep === "ready" ? startRecording : stopRecording,
+        onClick: recordingStep === "ready" || recordingStep === "waiting" ? startRecording : stopRecording,
         children: [recordingStep === "ready" || recordingStep === "waiting" ? jsxRuntime.jsx(ReadyRecord.default, {}) : jsxRuntime.jsx(Recording.default, {}), jsxRuntime.jsx(material.Typography, {
           variant: "buttoninput",
           children: recordingStep === "ready" ? "녹음 시작" : recordingStep === "recording" ? "녹음 중지" : "다시 녹음"
         })]
       }), jsxRuntime.jsx(Button.default, {
         disabled: recordingStep !== "waiting",
-        variant: recordingStep === "waiting" ? "outlined" : "contained",
+        variant: recordingStep === "waiting" ? type === "change" ? "outlined" : "contained" : "contained",
         onClick: onTransform,
-        children: "\uBCC0\uD658"
+        children: type === "change" ? "변환" : "제출"
       })]
     })]
   });

package/es/components/Modal/Modal.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import HighlightOffIcon from '@mui/icons-material/HighlightOff';
-import { Modal, Box, Stack, Typography } from '@mui/material';
+import { Modal, Box, Stack } from '@mui/material';
 
 var EliceModal = function EliceModal(props) {
   var open = props.open,
@@ -39,10 +39,7 @@ var EliceModal = function EliceModal(props) {
           },
           color: "secondary"
         })
-      }), jsx(Typography, {
-        variant: 'body1',
-        children: children
-      })]
+      }), children]
     })
   });
 };

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

@@ -11,6 +11,8 @@ export interface EliceChatProps {
     onChange: (text: string) => void;
     onSend: (text: string) => void;
     onRecord?: () => void;
+    setAudioFile?: (file: File | null) => void;
+    onTransform?: () => void;
     height?: string;
     onTranscribingChange?: (value: boolean) => void;
     isLoadingMessage?: boolean;
@@ -18,8 +20,8 @@ export interface EliceChatProps {
     CustomAssistantAvatar?: React.ReactNode;
 }
 declare const EliceChat: {
-    ({ placeholder, messages, content, onReset, onSend, onChange, onRecord, onTranscribingChange, isLoadingMessage, CustomAssistantAvatar, isDisabled, height, }: EliceChatProps): import("react/jsx-runtime").JSX.Element;
-    MessageList({ messages, isLoadingMessage, scrollRef, height, CustomAssistantAvatar, }: {
+    ({ placeholder, messages, content, onReset, onSend, onChange, onRecord, onTranscribingChange, setAudioFile, onTransform, isLoadingMessage, CustomAssistantAvatar, isDisabled, height, }: EliceChatProps): import("react/jsx-runtime").JSX.Element;
+    MessageList({ messages, isLoadingMessage, scrollRef, height, isRecord, setIsRecord, CustomAssistantAvatar, }: {
         messages: {
             role: "system" | "user" | "assistant";
             content: string;
@@ -27,9 +29,11 @@ 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, }: {
+    InputArea({ placeHolder, value, isDisabled, onChange, onSend, onReset, onRecord, onTranscribingChange, setAudioFile, onTransform, setIsRecord, isRecord, }: {
         placeHolder: string;
         value: string;
         isDisabled: boolean;
@@ -37,7 +41,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;
         onTranscribingChange?: ((value: boolean) => void) | undefined;
     }): import("react/jsx-runtime").JSX.Element;
 };
+export type AudioStep = "ready" | "waiting" | "recording";
 export default EliceChat;

package/es/components/chat/Chat.js

@@ -6,14 +6,16 @@ import { useTheme, Stack, Typography, Input } from '@mui/material';
 import AssistantAvatar from './AssistantAvatar.js';
 import UserAvatar from './UserAvatar.js';
 import TypingIndicator from './TypingIndicator.js';
+import EliceRecorder from '../recorder/Recorder.js';
 import EliceIconButton from '../icon-button/IconButton.js';
 import Micro from '../../icons/Micro.js';
 import Reset from '../../icons/Reset.js';
 import Send from '../../icons/Send.js';
 
+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(Stack, {
-  target: "e1i7zt3"
-})("height:fit-content;max-height:100%;height:", function (_ref) {
+  target: "e1i7zt4"
+})("position:relative;height:fit-content;max-height:100%;height:", function (_ref) {
   var height = _ref.height;
   return height;
 }, ";min-width:30rem;max-width:100%;border:2px solid ", function (_ref2) {
@@ -21,7 +23,7 @@ var StyledChatContainer = /*#__PURE__*/_styled(Stack, {
   return theme.palette.grey[300];
 }, ";border-radius:1.5rem;padding:1.5rem;gap:1.75rem;");
 var StyledScrollBarStack = /*#__PURE__*/_styled(Stack, {
-  target: "e1i7zt2"
+  target: "e1i7zt3"
 })("flex:1;overflow-y:auto;border-radius:1.125rem;padding-right:1rem;::-webkit-scrollbar{width:0.25rem;}::-webkit-scrollbar-track{background:", function (_ref3) {
   var theme = _ref3.theme;
   return theme.palette.grey[200];
@@ -33,7 +35,7 @@ var StyledScrollBarStack = /*#__PURE__*/_styled(Stack, {
   return theme.palette.secondary.main;
 }, ";}");
 var StyledInput = /*#__PURE__*/_styled(Input, {
-  target: "e1i7zt1"
+  target: "e1i7zt2"
 })("width:100%;height:100%;border:none!important;background-color:transparent;font-size:1.375rem;font-weight:700;outline:none;resize:none;color:", function (_ref6) {
   var theme = _ref6.theme;
   return theme.palette.secondary.main;
@@ -51,7 +53,7 @@ var StyledInput = /*#__PURE__*/_styled(Input, {
   return theme.palette.secondary.main;
 }, ";}");
 var StyledMessage = /*#__PURE__*/_styled(Typography, {
-  target: "e1i7zt0"
+  target: "e1i7zt1"
 })("color:", function (_ref11) {
   var isAssistant = _ref11.isAssistant,
     theme = _ref11.theme;
@@ -64,6 +66,16 @@ var StyledMessage = /*#__PURE__*/_styled(Typography, {
     theme = _ref13.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("div", {
+  target: "e1i7zt0"
+})("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 _EliceChat = function EliceChat(_ref14) {
   var _ref14$placeholder = _ref14.placeholder,
     placeholder = _ref14$placeholder === void 0 ? "AI와 대화를 시작해 보세요" : _ref14$placeholder,
@@ -76,6 +88,8 @@ var _EliceChat = function EliceChat(_ref14) {
     _onChange = _ref14.onChange,
     onRecord = _ref14.onRecord,
     onTranscribingChange = _ref14.onTranscribingChange,
+    setAudioFile = _ref14.setAudioFile,
+    onTransform = _ref14.onTransform,
     isLoadingMessage = _ref14.isLoadingMessage,
     CustomAssistantAvatar = _ref14.CustomAssistantAvatar,
     _ref14$isDisabled = _ref14.isDisabled,
@@ -88,6 +102,16 @@ var _EliceChat = function EliceChat(_ref14) {
     inputValue = _useState2[0],
     setInputValue = _useState2[1];
   var scrollRef = useRef(null);
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isRecord = _useState4[0],
+    setIsRecord = _useState4[1];
+  var onClickRecordButton = function onClickRecordButton() {
+    setIsRecord(true);
+  };
+  var onClickRecordOverlay = function onClickRecordOverlay() {
+    setIsRecord(false);
+  };
   useEffect(function () {
     if (scrollRef.current) {
       scrollRef.current.scrollIntoView({
@@ -95,6 +119,10 @@ var _EliceChat = function EliceChat(_ref14) {
       });
     }
   }, [messages, isLoadingMessage]);
+  var onClickRecordSubmit = function onClickRecordSubmit() {
+    setIsRecord(false);
+    onTransform === null || onTransform === void 0 ? void 0 : onTransform();
+  };
   var handleSend = function handleSend() {
     if (inputValue.trim()) {
       onSend(inputValue);
@@ -108,6 +136,8 @@ var _EliceChat = function EliceChat(_ref14) {
       messages: messages,
       isLoadingMessage: isLoadingMessage,
       scrollRef: scrollRef,
+      setIsRecord: onClickRecordOverlay,
+      isRecord: isRecord,
       CustomAssistantAvatar: CustomAssistantAvatar
     }), jsx(_EliceChat.InputArea, {
       placeHolder: placeholder,
@@ -116,6 +146,10 @@ var _EliceChat = function EliceChat(_ref14) {
         setInputValue(e.target.value);
         _onChange(e.target.value);
       },
+      setIsRecord: onClickRecordButton,
+      isRecord: isRecord,
+      setAudioFile: setAudioFile,
+      onTransform: onClickRecordSubmit,
       onSend: handleSend,
       onReset: onReset,
       onRecord: onRecord,
@@ -131,12 +165,16 @@ _EliceChat.MessageList = function (_ref15) {
     scrollRef = _ref15.scrollRef,
     _ref15$height = _ref15.height,
     height = _ref15$height === void 0 ? "100%" : _ref15$height,
+    isRecord = _ref15.isRecord,
+    setIsRecord = _ref15.setIsRecord,
     CustomAssistantAvatar = _ref15.CustomAssistantAvatar;
   var theme = useTheme();
-  return jsx(StyledScrollBarStack, {
+  return jsxs(StyledScrollBarStack, {
     theme: theme,
     height: height,
-    children: messages.length === 0 ? jsx(Typography, {
+    children: [isRecord && jsx(RecordingOverlay, {
+      onClick: setIsRecord
+    }), messages.length === 0 ? jsx(Typography, {
       color: theme.palette.text.disabled,
       fontSize: "2rem",
       fontWeight: 700,
@@ -161,7 +199,7 @@ _EliceChat.MessageList = function (_ref15) {
       }), isLoadingMessage && jsx(TypingIndicator, {}), jsx("div", {
         ref: scrollRef
       })]
-    })
+    })]
   });
 };
 _EliceChat.InputArea = function (_ref16) {
@@ -172,40 +210,59 @@ _EliceChat.InputArea = function (_ref16) {
     onSend = _ref16.onSend,
     onReset = _ref16.onReset,
     onRecord = _ref16.onRecord,
-    onTranscribingChange = _ref16.onTranscribingChange;
+    onTranscribingChange = _ref16.onTranscribingChange,
+    setAudioFile = _ref16.setAudioFile,
+    onTransform = _ref16.onTransform,
+    setIsRecord = _ref16.setIsRecord,
+    isRecord = _ref16.isRecord;
+  var _a;
   var theme = useTheme();
-  return jsxs(Stack, {
+  return jsx(Stack, {
     direction: "row",
     minHeight: "3.875rem",
     bgcolor: theme.palette.grey[50],
     borderRadius: "1.125rem",
+    width: isRecord ? "100%" : "auto",
+    justifyContent: isRecord ? "center" : "none",
+    alignItems: isRecord ? "center" : "none",
     p: "0.5rem 1rem",
     gap: "0.625rem",
-    children: [jsx(Stack, {
-      flexGrow: 1,
-      maxHeight: "14.625rem",
-      children: jsx(StyledInput, {
-        disabled: isDisabled,
-        value: value,
-        onChange: onChange,
-        placeholder: placeHolder,
-        theme: theme,
-        multiline: true
-      })
-    }), onRecord && jsx(EliceIconButton, {
-      onClick: function onClick() {
-        onRecord();
-        onTranscribingChange === null || onTranscribingChange === void 0 ? void 0 : onTranscribingChange(true);
-      },
-      children: jsx(Micro, {})
-    }), jsx(EliceIconButton, {
-      onClick: onReset,
-      children: jsx(Reset, {})
-    }), jsx(EliceIconButton, {
-      onClick: onSend,
-      disabled: !value.trim(),
-      children: jsx(Send, {})
-    })]
+    zIndex: "1000",
+    children: isRecord ? jsx(EliceRecorder
+    // 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"
+    }) : jsxs(Fragment, {
+      children: [jsx(Stack, {
+        flexGrow: 1,
+        maxHeight: "14.625rem",
+        children: jsx(StyledInput, {
+          disabled: isDisabled,
+          value: value,
+          onChange: onChange,
+          placeholder: placeHolder,
+          theme: theme,
+          multiline: true
+        })
+      }), onRecord && jsx(EliceIconButton, {
+        onClick: function onClick() {
+          setIsRecord === null || setIsRecord === void 0 ? void 0 : setIsRecord();
+          onRecord();
+          onTranscribingChange === null || onTranscribingChange === void 0 ? void 0 : onTranscribingChange(true);
+        },
+        children: jsx(Micro, {})
+      }), jsx(EliceIconButton, {
+        onClick: onReset,
+        children: jsx(Reset, {})
+      }), jsx(EliceIconButton, {
+        onClick: onSend,
+        disabled: !value.trim(),
+        children: jsx(Send, {})
+      })]
+    })
   });
 };
 

package/es/components/recorder/Recorder.d.ts

@@ -1,6 +1,8 @@
+type RecorderType = "submit" | "change";
 export interface EliceRecorderProps {
     onAudioReady: (file: File) => void;
     onTransform?: () => void;
+    type?: RecorderType;
 }
-declare const EliceRecorder: ({ onAudioReady, onTransform }: EliceRecorderProps) => import("react/jsx-runtime").JSX.Element;
+declare const EliceRecorder: ({ onAudioReady, onTransform, type }: EliceRecorderProps) => import("react/jsx-runtime").JSX.Element;
 export default EliceRecorder;

package/es/components/recorder/Recorder.js

@@ -10,7 +10,9 @@ import EliceButton from '../button/Button.js';
 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 EliceRecorder = function EliceRecorder(_ref) {
   var onAudioReady = _ref.onAudioReady,
-    onTransform = _ref.onTransform;
+    onTransform = _ref.onTransform,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? "change" : _ref$type;
   var theme = useTheme();
   var _useState = useState("ready"),
     _useState2 = _slicedToArray(_useState, 2),
@@ -108,16 +110,16 @@ var EliceRecorder = function EliceRecorder(_ref) {
       direction: "row",
       children: [jsxs(StyledRecorderButton, {
         step: recordingStep,
-        onClick: recordingStep === "ready" ? startRecording : stopRecording,
+        onClick: recordingStep === "ready" || recordingStep === "waiting" ? startRecording : stopRecording,
         children: [recordingStep === "ready" || recordingStep === "waiting" ? jsx(ReadyRecord, {}) : jsx(Recording, {}), jsx(Typography, {
           variant: "buttoninput",
           children: recordingStep === "ready" ? "녹음 시작" : recordingStep === "recording" ? "녹음 중지" : "다시 녹음"
         })]
       }), jsx(EliceButton, {
         disabled: recordingStep !== "waiting",
-        variant: recordingStep === "waiting" ? "outlined" : "contained",
+        variant: recordingStep === "waiting" ? type === "change" ? "outlined" : "contained" : "contained",
         onClick: onTransform,
-        children: "\uBCC0\uD658"
+        children: type === "change" ? "변환" : "제출"
       })]
     })]
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elicecontents/content-ui",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "A set of UI components for creating content of Elice",
   "author": "Elice <contact@elice.io>",
   "license": "UNLICENSED",