@elicecontents/content-ui 1.0.13 → 1.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/cjs/components/AI-feedback/AIFeedback.d.ts +5 -2
  2. package/cjs/components/AI-feedback/AIFeedback.js +6 -5
  3. package/cjs/components/chat/Chat.d.ts +4 -2
  4. package/cjs/components/chat/Chat.js +49 -39
  5. package/cjs/types/theme-augmentation.d.ts +1 -0
  6. package/es/components/AI-feedback/AIFeedback.d.ts +5 -2
  7. package/es/components/AI-feedback/AIFeedback.js +7 -6
  8. package/es/components/chat/Chat.d.ts +4 -2
  9. package/es/components/chat/Chat.js +49 -39
  10. package/es/types/theme-augmentation.d.ts +1 -0
  11. package/package.json +1 -1
package/cjs/components/AI-feedback/AIFeedback.d.ts CHANGED
@@ -1,4 +1,7 @@
1
+ import React from 'react';
1
2
  import type { EliceTooltipProps } from '../tooltip';
2
- export type EliceAIFeedbackProps = Omit<EliceTooltipProps, 'children'>;
3
- declare const EliceAIFeedback: ({ title, placement, ...rest }: EliceAIFeedbackProps) => import("react/jsx-runtime").JSX.Element;
3
+ export type EliceAIFeedbackProps = Omit<EliceTooltipProps, 'children'> & {
4
+ CustomAvatar?: React.ReactNode;
5
+ };
6
+ declare const EliceAIFeedback: ({ title, placement, CustomAvatar, ...rest }: EliceAIFeedbackProps) => import("react/jsx-runtime").JSX.Element;
4
7
  export default EliceAIFeedback;
package/cjs/components/AI-feedback/AIFeedback.js CHANGED
@@ -12,23 +12,24 @@ var EliceAIFeedback = function EliceAIFeedback(_a) {
12
12
  var title = _a.title,
13
13
  _a$placement = _a.placement,
14
14
  placement = _a$placement === void 0 ? 'left' : _a$placement,
15
- rest = tslib.__rest(_a, ["title", "placement"]);
15
+ CustomAvatar = _a.CustomAvatar,
16
+ rest = tslib.__rest(_a, ["title", "placement", "CustomAvatar"]);
16
17
  return jsxRuntime.jsx(Tooltip.default, Object.assign({
17
18
  title: title,
18
19
  placement: placement
19
20
  }, rest, {
20
21
  isControl: true,
21
22
  triggerAction: "click",
22
- children: jsxRuntime.jsx(material.Stack, {
23
+ children: jsxRuntime.jsxs(material.Stack, {
23
24
  position: "relative",
24
25
  width: "fit-content",
25
26
  height: "fit-content",
26
27
  maxWidth: "100%",
27
28
  maxHeight: "100%",
28
- children: jsxRuntime.jsx("img", {
29
+ children: [CustomAvatar !== null && CustomAvatar !== void 0 ? CustomAvatar : jsxRuntime.jsx("img", {
29
30
  src: AIAvatar.default,
30
- alt: ""
31
- })
31
+ alt: "AI Avatar"
32
+ }), " "]
32
33
  })
33
34
  }));
34
35
  };
package/cjs/components/chat/Chat.d.ts CHANGED
@@ -20,13 +20,14 @@ export interface EliceChatProps {
20
20
  isDisabled?: boolean;
21
21
  backgroundImage?: string;
22
22
  CustomAssistantAvatar?: React.ReactNode;
23
+ CustomUserAvatar?: React.ReactNode;
23
24
  type?: string;
24
25
  recorderType?: RecorderType;
25
26
  isOnlyRecord: boolean;
26
27
  }
27
28
  declare const EliceChat: {
28
29
  (props: React.ComponentProps<typeof EliceChatContainer>): import("react/jsx-runtime").JSX.Element;
29
- MessageList({ messages, isLoadingMessage, scrollRef, height, CustomAssistantAvatar, }: {
30
+ MessageList({ messages, isLoadingMessage, scrollRef, height, CustomAssistantAvatar, CustomUserAvatar, }: {
30
31
  messages: {
31
32
  role: "system" | "user" | "assistant";
32
33
  content: string;
@@ -35,6 +36,7 @@ declare const EliceChat: {
35
36
  scrollRef: React.RefObject<HTMLDivElement>;
36
37
  height?: string | undefined;
37
38
  CustomAssistantAvatar: React.ReactNode;
39
+ CustomUserAvatar: React.ReactNode;
38
40
  }): import("react/jsx-runtime").JSX.Element;
39
41
  InputArea({ placeHolder, value, isDisabled, onChange, onSend, onReset, onRecord, onTranscribingChange, isOnlyRecord, }: {
40
42
  placeHolder: string;
@@ -51,5 +53,5 @@ declare const EliceChat: {
51
53
  isOnlyRecord: boolean;
52
54
  }): import("react/jsx-runtime").JSX.Element;
53
55
  };
54
- 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;
56
+ declare const EliceChatContainer: ({ placeholder, messages, content, onReset, onSend, onChange, onRecord, onTranscribingChange, setAudioFile, onTransform, isLoadingMessage, CustomAssistantAvatar, CustomUserAvatar, isDisabled, backgroundImage, height, recorderType, isOnlyRecord }: EliceChatProps) => import("react/jsx-runtime").JSX.Element;
55
57
  export default EliceChat;
package/cjs/components/chat/Chat.js CHANGED
@@ -6,6 +6,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
6
6
  var _styled = require('@emotion/styled/base');
7
7
  var jsxRuntime = require('react/jsx-runtime');
8
8
  var React = require('react');
9
+ var useAIDTMediaQuery = require('../../hooks/useAIDTMediaQuery.js');
9
10
  var material = require('@mui/material');
10
11
  require('tslib');
11
12
  var Micro = require('../../icons/Micro.js');
@@ -46,6 +47,7 @@ var EliceChatContainer = function EliceChatContainer(_ref) {
46
47
  onTransform = _ref.onTransform,
47
48
  isLoadingMessage = _ref.isLoadingMessage,
48
49
  CustomAssistantAvatar = _ref.CustomAssistantAvatar,
50
+ CustomUserAvatar = _ref.CustomUserAvatar,
49
51
  _ref$isDisabled = _ref.isDisabled,
50
52
  isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
51
53
  backgroundImage = _ref.backgroundImage,
@@ -56,6 +58,8 @@ var EliceChatContainer = function EliceChatContainer(_ref) {
56
58
  _ref$isOnlyRecord = _ref.isOnlyRecord,
57
59
  isOnlyRecord = _ref$isOnlyRecord === void 0 ? false : _ref$isOnlyRecord;
58
60
  var theme = material.useTheme();
61
+ var _useAIDTMediaQuery = useAIDTMediaQuery.default(),
62
+ isTablet = _useAIDTMediaQuery.isTablet;
59
63
  var _useState = React.useState(content),
60
64
  _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
61
65
  inputValue = _useState2[0],
@@ -84,6 +88,7 @@ var EliceChatContainer = function EliceChatContainer(_ref) {
84
88
  }
85
89
  };
86
90
  return jsxRuntime.jsxs(StyledChatContainer, {
91
+ isTablet: isTablet,
87
92
  theme: theme,
88
93
  height: height,
89
94
  backgroundImage: backgroundImage,
@@ -108,7 +113,8 @@ var EliceChatContainer = function EliceChatContainer(_ref) {
108
113
  messages: messages,
109
114
  isLoadingMessage: isLoadingMessage,
110
115
  scrollRef: scrollRef,
111
- CustomAssistantAvatar: CustomAssistantAvatar
116
+ CustomAssistantAvatar: CustomAssistantAvatar,
117
+ CustomUserAvatar: CustomUserAvatar
112
118
  }), jsxRuntime.jsx(EliceChat.InputArea, {
113
119
  placeHolder: placeholder,
114
120
  value: inputValue,
@@ -135,7 +141,8 @@ EliceChat.MessageList = function (_ref2) {
135
141
  scrollRef = _ref2.scrollRef,
136
142
  _ref2$height = _ref2.height,
137
143
  height = _ref2$height === void 0 ? "100%" : _ref2$height,
138
- CustomAssistantAvatar = _ref2.CustomAssistantAvatar;
144
+ CustomAssistantAvatar = _ref2.CustomAssistantAvatar,
145
+ CustomUserAvatar = _ref2.CustomUserAvatar;
139
146
  var theme = material.useTheme();
140
147
  return jsxRuntime.jsx(StyledScrollBarStack, {
141
148
  theme: theme,
@@ -159,7 +166,7 @@ EliceChat.MessageList = function (_ref2) {
159
166
  alignItems: "center",
160
167
  children: [jsxRuntime.jsx(material.Stack, {
161
168
  flexShrink: 0,
162
- children: isAssistant ? CustomAssistantAvatar !== null && CustomAssistantAvatar !== void 0 ? CustomAssistantAvatar : jsxRuntime.jsx(AssistantAvatar.default, {}) : jsxRuntime.jsx(UserAvatar.default, {})
169
+ children: isAssistant ? CustomAssistantAvatar !== null && CustomAssistantAvatar !== void 0 ? CustomAssistantAvatar : jsxRuntime.jsx(AssistantAvatar.default, {}) : CustomUserAvatar !== null && CustomUserAvatar !== void 0 ? CustomUserAvatar : jsxRuntime.jsx(UserAvatar.default, {})
163
170
  }), jsxRuntime.jsx(StyledMessage, {
164
171
  isAssistant: isAssistant,
165
172
  theme: theme,
@@ -245,55 +252,58 @@ var StyledChatContainer = /*#__PURE__*/_styled__default.default(material.Stack,
245
252
  })("position:relative;max-height:100%;height:", function (_ref4) {
246
253
  var height = _ref4.height;
247
254
  return height !== null && height !== void 0 ? height : 'fit-content';
248
- }, ";min-width:30rem;max-width:100%;border:2px solid ", function (_ref5) {
249
- var theme = _ref5.theme;
255
+ }, ";min-width:", function (_ref5) {
256
+ var isTablet = _ref5.isTablet;
257
+ return isTablet ? '0' : '30rem';
258
+ }, ";max-width:100%;border:2px solid ", function (_ref6) {
259
+ var theme = _ref6.theme;
250
260
  return theme.palette.grey[300];
251
- }, ";border-radius:1.5rem;padding:1.5rem;gap:1.75rem;", function (_ref6) {
252
- var backgroundImage = _ref6.backgroundImage;
261
+ }, ";border-radius:1.5rem;padding:1.5rem;gap:1.75rem;", function (_ref7) {
262
+ var backgroundImage = _ref7.backgroundImage;
253
263
  return backgroundImage && "\n background-image: url(".concat(backgroundImage, ");\n background-size: cover;\n background-position: center;\n ");
254
264
  }, ";");
255
265
  var StyledScrollBarStack = /*#__PURE__*/_styled__default.default(material.Stack, {
256
266
  target: "e1i7zt7"
257
- })("flex:1;overflow-y:auto;border-radius:1.125rem;padding-right:1rem;::-webkit-scrollbar{width:0.25rem;}::-webkit-scrollbar-track{background:", function (_ref7) {
258
- var theme = _ref7.theme;
259
- return theme.palette.grey[200];
260
- }, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb{background:", function (_ref8) {
267
+ })("flex:1;overflow-y:auto;border-radius:1.125rem;padding-right:1rem;::-webkit-scrollbar{width:0.25rem;}::-webkit-scrollbar-track{background:", function (_ref8) {
261
268
  var theme = _ref8.theme;
262
- return theme.palette.primary.main;
263
- }, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb:hover{background:", function (_ref9) {
269
+ return theme.palette.grey[200];
270
+ }, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb{background:", function (_ref9) {
264
271
  var theme = _ref9.theme;
272
+ return theme.palette.primary.main;
273
+ }, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb:hover{background:", function (_ref10) {
274
+ var theme = _ref10.theme;
265
275
  return theme.palette.secondary.main;
266
276
  }, ";}");
267
277
  var StyledInput = /*#__PURE__*/_styled__default.default(material.Input, {
268
278
  target: "e1i7zt6"
269
- })("width:100%;height:100%;border:none!important;background-color:transparent;font-size:1.375rem;font-weight:700;outline:none;resize:none;color:", function (_ref10) {
270
- var theme = _ref10.theme;
271
- return theme.palette.secondary.main;
272
- }, ";::placeholder{color:", function (_ref11) {
279
+ })("width:100%;height:100%;border:none!important;background-color:transparent;font-size:1.375rem;font-weight:700;outline:none;resize:none;color:", function (_ref11) {
273
280
  var theme = _ref11.theme;
274
- return theme.palette.grey[300];
275
- }, ";}::before{border:none;}:hover{::before{border:none;}}::after{border-bottom:none!important;}::-webkit-scrollbar{width:0.25rem;}::-webkit-scrollbar-track{background:", function (_ref12) {
281
+ return theme.palette.secondary.main;
282
+ }, ";::placeholder{color:", function (_ref12) {
276
283
  var theme = _ref12.theme;
277
- return theme.palette.grey[200];
278
- }, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb{background:", function (_ref13) {
284
+ return theme.palette.grey[300];
285
+ }, ";}::before{border:none;}:hover{::before{border:none;}}::after{border-bottom:none!important;}::-webkit-scrollbar{width:0.25rem;}::-webkit-scrollbar-track{background:", function (_ref13) {
279
286
  var theme = _ref13.theme;
280
- return theme.palette.primary.main;
281
- }, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb:hover{background:", function (_ref14) {
287
+ return theme.palette.grey[200];
288
+ }, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb{background:", function (_ref14) {
282
289
  var theme = _ref14.theme;
290
+ return theme.palette.primary.main;
291
+ }, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb:hover{background:", function (_ref15) {
292
+ var theme = _ref15.theme;
283
293
  return theme.palette.secondary.main;
284
294
  }, ";}");
285
295
  var StyledMessage = /*#__PURE__*/_styled__default.default(material.Typography, {
286
296
  target: "e1i7zt5"
287
- })("color:", function (_ref15) {
288
- var isAssistant = _ref15.isAssistant,
289
- theme = _ref15.theme;
297
+ })("color:", function (_ref16) {
298
+ var isAssistant = _ref16.isAssistant,
299
+ theme = _ref16.theme;
290
300
  return isAssistant ? theme.palette.text.secondary : theme.palette.secondary.main;
291
- }, ";font-size:1rem;font-weight:", function (_ref16) {
292
- var isAssistant = _ref16.isAssistant;
301
+ }, ";font-size:1rem;font-weight:", function (_ref17) {
302
+ var isAssistant = _ref17.isAssistant;
293
303
  return isAssistant ? 500 : 700;
294
- }, ";background-color:", function (_ref17) {
295
- var isAssistant = _ref17.isAssistant,
296
- theme = _ref17.theme;
304
+ }, ";background-color:", function (_ref18) {
305
+ var isAssistant = _ref18.isAssistant,
306
+ theme = _ref18.theme;
297
307
  return isAssistant ? theme.palette.grey[50] : theme.palette.primary.light;
298
308
  }, ";border-radius:1rem;white-space:pre-wrap;padding:0.75rem;margin-bottom:16px;");
299
309
  var EmptyMessageContainer = /*#__PURE__*/_styled__default.default(material.Stack, {
@@ -338,17 +348,17 @@ var OverlayContent = /*#__PURE__*/_styled__default.default(material.Box, {
338
348
  });
339
349
  var OnlyRecordButton = /*#__PURE__*/_styled__default.default(material.Stack, {
340
350
  target: "e1i7zt0"
341
- })("color:", function (_ref18) {
342
- var theme = _ref18.theme;
343
- return theme.palette.common.white;
344
- }, ";background:", function (_ref19) {
351
+ })("color:", function (_ref19) {
345
352
  var theme = _ref19.theme;
346
- return theme.palette.common.red[900];
347
- }, ";&:hover{background:", function (_ref20) {
353
+ return theme.palette.common.white;
354
+ }, ";background:", function (_ref20) {
348
355
  var theme = _ref20.theme;
349
- return theme.palette.common.red[600];
350
- }, ";color:", function (_ref21) {
356
+ return theme.palette.common.red[900];
357
+ }, ";&:hover{background:", function (_ref21) {
351
358
  var theme = _ref21.theme;
359
+ return theme.palette.common.red[600];
360
+ }, ";color:", function (_ref22) {
361
+ var theme = _ref22.theme;
352
362
  return theme.palette.common.red[900];
353
363
  }, ";}");
354
364
 
package/cjs/types/theme-augmentation.d.ts CHANGED
@@ -54,6 +54,7 @@ declare module '@mui/material/styles' {
54
54
  }
55
55
  declare module '@mui/material/Typography' {
56
56
  interface TypographyPropsVariantOverrides {
57
+ subtitle3: true;
57
58
  pagination: true;
58
59
  buttoninput: true;
59
60
  }
package/es/components/AI-feedback/AIFeedback.d.ts CHANGED
@@ -1,4 +1,7 @@
1
+ import React from 'react';
1
2
  import type { EliceTooltipProps } from '../tooltip';
2
- export type EliceAIFeedbackProps = Omit<EliceTooltipProps, 'children'>;
3
- declare const EliceAIFeedback: ({ title, placement, ...rest }: EliceAIFeedbackProps) => import("react/jsx-runtime").JSX.Element;
3
+ export type EliceAIFeedbackProps = Omit<EliceTooltipProps, 'children'> & {
4
+ CustomAvatar?: React.ReactNode;
5
+ };
6
+ declare const EliceAIFeedback: ({ title, placement, CustomAvatar, ...rest }: EliceAIFeedbackProps) => import("react/jsx-runtime").JSX.Element;
4
7
  export default EliceAIFeedback;
package/es/components/AI-feedback/AIFeedback.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { __rest } from 'tslib';
2
- import { jsx } from 'react/jsx-runtime';
2
+ import { jsx, jsxs } from 'react/jsx-runtime';
3
3
  import { Stack } from '@mui/material';
4
4
  import img from '../../assets/AIAvatar.png.js';
5
5
  import EliceTooltip from '../tooltip/Tooltip.js';
@@ -8,23 +8,24 @@ var EliceAIFeedback = function EliceAIFeedback(_a) {
8
8
  var title = _a.title,
9
9
  _a$placement = _a.placement,
10
10
  placement = _a$placement === void 0 ? 'left' : _a$placement,
11
- rest = __rest(_a, ["title", "placement"]);
11
+ CustomAvatar = _a.CustomAvatar,
12
+ rest = __rest(_a, ["title", "placement", "CustomAvatar"]);
12
13
  return jsx(EliceTooltip, Object.assign({
13
14
  title: title,
14
15
  placement: placement
15
16
  }, rest, {
16
17
  isControl: true,
17
18
  triggerAction: "click",
18
- children: jsx(Stack, {
19
+ children: jsxs(Stack, {
19
20
  position: "relative",
20
21
  width: "fit-content",
21
22
  height: "fit-content",
22
23
  maxWidth: "100%",
23
24
  maxHeight: "100%",
24
- children: jsx("img", {
25
+ children: [CustomAvatar !== null && CustomAvatar !== void 0 ? CustomAvatar : jsx("img", {
25
26
  src: img,
26
- alt: ""
27
- })
27
+ alt: "AI Avatar"
28
+ }), " "]
28
29
  })
29
30
  }));
30
31
  };
package/es/components/chat/Chat.d.ts CHANGED
@@ -20,13 +20,14 @@ export interface EliceChatProps {
20
20
  isDisabled?: boolean;
21
21
  backgroundImage?: string;
22
22
  CustomAssistantAvatar?: React.ReactNode;
23
+ CustomUserAvatar?: React.ReactNode;
23
24
  type?: string;
24
25
  recorderType?: RecorderType;
25
26
  isOnlyRecord: boolean;
26
27
  }
27
28
  declare const EliceChat: {
28
29
  (props: React.ComponentProps<typeof EliceChatContainer>): import("react/jsx-runtime").JSX.Element;
29
- MessageList({ messages, isLoadingMessage, scrollRef, height, CustomAssistantAvatar, }: {
30
+ MessageList({ messages, isLoadingMessage, scrollRef, height, CustomAssistantAvatar, CustomUserAvatar, }: {
30
31
  messages: {
31
32
  role: "system" | "user" | "assistant";
32
33
  content: string;
@@ -35,6 +36,7 @@ declare const EliceChat: {
35
36
  scrollRef: React.RefObject<HTMLDivElement>;
36
37
  height?: string | undefined;
37
38
  CustomAssistantAvatar: React.ReactNode;
39
+ CustomUserAvatar: React.ReactNode;
38
40
  }): import("react/jsx-runtime").JSX.Element;
39
41
  InputArea({ placeHolder, value, isDisabled, onChange, onSend, onReset, onRecord, onTranscribingChange, isOnlyRecord, }: {
40
42
  placeHolder: string;
@@ -51,5 +53,5 @@ declare const EliceChat: {
51
53
  isOnlyRecord: boolean;
52
54
  }): import("react/jsx-runtime").JSX.Element;
53
55
  };
54
- 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;
56
+ declare const EliceChatContainer: ({ placeholder, messages, content, onReset, onSend, onChange, onRecord, onTranscribingChange, setAudioFile, onTransform, isLoadingMessage, CustomAssistantAvatar, CustomUserAvatar, isDisabled, backgroundImage, height, recorderType, isOnlyRecord }: EliceChatProps) => import("react/jsx-runtime").JSX.Element;
55
57
  export default EliceChat;
package/es/components/chat/Chat.js CHANGED
@@ -8,6 +8,7 @@ import img from '../../assets/AIAvatar.png.js';
8
8
  import AssistantAvatar from './AssistantAvatar.js';
9
9
  import UserAvatar from './UserAvatar.js';
10
10
  import TypingIndicator from './TypingIndicator.js';
11
+ import useAIDTMediaQuery from '../../hooks/useAIDTMediaQuery.js';
11
12
  import EliceRecorderStep from '../recorder-step/RecorderStep.js';
12
13
  import ReadyRecord from '../../icons/ReadyRecord.js';
13
14
  import EliceIconButton from '../icon-button/IconButton.js';
@@ -37,6 +38,7 @@ var EliceChatContainer = function EliceChatContainer(_ref) {
37
38
  onTransform = _ref.onTransform,
38
39
  isLoadingMessage = _ref.isLoadingMessage,
39
40
  CustomAssistantAvatar = _ref.CustomAssistantAvatar,
41
+ CustomUserAvatar = _ref.CustomUserAvatar,
40
42
  _ref$isDisabled = _ref.isDisabled,
41
43
  isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
42
44
  backgroundImage = _ref.backgroundImage,
@@ -47,6 +49,8 @@ var EliceChatContainer = function EliceChatContainer(_ref) {
47
49
  _ref$isOnlyRecord = _ref.isOnlyRecord,
48
50
  isOnlyRecord = _ref$isOnlyRecord === void 0 ? false : _ref$isOnlyRecord;
49
51
  var theme = useTheme();
52
+ var _useAIDTMediaQuery = useAIDTMediaQuery(),
53
+ isTablet = _useAIDTMediaQuery.isTablet;
50
54
  var _useState = useState(content),
51
55
  _useState2 = _slicedToArray(_useState, 2),
52
56
  inputValue = _useState2[0],
@@ -75,6 +79,7 @@ var EliceChatContainer = function EliceChatContainer(_ref) {
75
79
  }
76
80
  };
77
81
  return jsxs(StyledChatContainer, {
82
+ isTablet: isTablet,
78
83
  theme: theme,
79
84
  height: height,
80
85
  backgroundImage: backgroundImage,
@@ -99,7 +104,8 @@ var EliceChatContainer = function EliceChatContainer(_ref) {
99
104
  messages: messages,
100
105
  isLoadingMessage: isLoadingMessage,
101
106
  scrollRef: scrollRef,
102
- CustomAssistantAvatar: CustomAssistantAvatar
107
+ CustomAssistantAvatar: CustomAssistantAvatar,
108
+ CustomUserAvatar: CustomUserAvatar
103
109
  }), jsx(EliceChat.InputArea, {
104
110
  placeHolder: placeholder,
105
111
  value: inputValue,
@@ -126,7 +132,8 @@ EliceChat.MessageList = function (_ref2) {
126
132
  scrollRef = _ref2.scrollRef,
127
133
  _ref2$height = _ref2.height,
128
134
  height = _ref2$height === void 0 ? "100%" : _ref2$height,
129
- CustomAssistantAvatar = _ref2.CustomAssistantAvatar;
135
+ CustomAssistantAvatar = _ref2.CustomAssistantAvatar,
136
+ CustomUserAvatar = _ref2.CustomUserAvatar;
130
137
  var theme = useTheme();
131
138
  return jsx(StyledScrollBarStack, {
132
139
  theme: theme,
@@ -150,7 +157,7 @@ EliceChat.MessageList = function (_ref2) {
150
157
  alignItems: "center",
151
158
  children: [jsx(Stack, {
152
159
  flexShrink: 0,
153
- children: isAssistant ? CustomAssistantAvatar !== null && CustomAssistantAvatar !== void 0 ? CustomAssistantAvatar : jsx(AssistantAvatar, {}) : jsx(UserAvatar, {})
160
+ children: isAssistant ? CustomAssistantAvatar !== null && CustomAssistantAvatar !== void 0 ? CustomAssistantAvatar : jsx(AssistantAvatar, {}) : CustomUserAvatar !== null && CustomUserAvatar !== void 0 ? CustomUserAvatar : jsx(UserAvatar, {})
154
161
  }), jsx(StyledMessage, {
155
162
  isAssistant: isAssistant,
156
163
  theme: theme,
@@ -236,55 +243,58 @@ var StyledChatContainer = /*#__PURE__*/_styled(Stack, {
236
243
  })("position:relative;max-height:100%;height:", function (_ref4) {
237
244
  var height = _ref4.height;
238
245
  return height !== null && height !== void 0 ? height : 'fit-content';
239
- }, ";min-width:30rem;max-width:100%;border:2px solid ", function (_ref5) {
240
- var theme = _ref5.theme;
246
+ }, ";min-width:", function (_ref5) {
247
+ var isTablet = _ref5.isTablet;
248
+ return isTablet ? '0' : '30rem';
249
+ }, ";max-width:100%;border:2px solid ", function (_ref6) {
250
+ var theme = _ref6.theme;
241
251
  return theme.palette.grey[300];
242
- }, ";border-radius:1.5rem;padding:1.5rem;gap:1.75rem;", function (_ref6) {
243
- var backgroundImage = _ref6.backgroundImage;
252
+ }, ";border-radius:1.5rem;padding:1.5rem;gap:1.75rem;", function (_ref7) {
253
+ var backgroundImage = _ref7.backgroundImage;
244
254
  return backgroundImage && "\n background-image: url(".concat(backgroundImage, ");\n background-size: cover;\n background-position: center;\n ");
245
255
  }, ";");
246
256
  var StyledScrollBarStack = /*#__PURE__*/_styled(Stack, {
247
257
  target: "e1i7zt7"
248
- })("flex:1;overflow-y:auto;border-radius:1.125rem;padding-right:1rem;::-webkit-scrollbar{width:0.25rem;}::-webkit-scrollbar-track{background:", function (_ref7) {
249
- var theme = _ref7.theme;
250
- return theme.palette.grey[200];
251
- }, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb{background:", function (_ref8) {
258
+ })("flex:1;overflow-y:auto;border-radius:1.125rem;padding-right:1rem;::-webkit-scrollbar{width:0.25rem;}::-webkit-scrollbar-track{background:", function (_ref8) {
252
259
  var theme = _ref8.theme;
253
- return theme.palette.primary.main;
254
- }, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb:hover{background:", function (_ref9) {
260
+ return theme.palette.grey[200];
261
+ }, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb{background:", function (_ref9) {
255
262
  var theme = _ref9.theme;
263
+ return theme.palette.primary.main;
264
+ }, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb:hover{background:", function (_ref10) {
265
+ var theme = _ref10.theme;
256
266
  return theme.palette.secondary.main;
257
267
  }, ";}");
258
268
  var StyledInput = /*#__PURE__*/_styled(Input, {
259
269
  target: "e1i7zt6"
260
- })("width:100%;height:100%;border:none!important;background-color:transparent;font-size:1.375rem;font-weight:700;outline:none;resize:none;color:", function (_ref10) {
261
- var theme = _ref10.theme;
262
- return theme.palette.secondary.main;
263
- }, ";::placeholder{color:", function (_ref11) {
270
+ })("width:100%;height:100%;border:none!important;background-color:transparent;font-size:1.375rem;font-weight:700;outline:none;resize:none;color:", function (_ref11) {
264
271
  var theme = _ref11.theme;
265
- return theme.palette.grey[300];
266
- }, ";}::before{border:none;}:hover{::before{border:none;}}::after{border-bottom:none!important;}::-webkit-scrollbar{width:0.25rem;}::-webkit-scrollbar-track{background:", function (_ref12) {
272
+ return theme.palette.secondary.main;
273
+ }, ";::placeholder{color:", function (_ref12) {
267
274
  var theme = _ref12.theme;
268
- return theme.palette.grey[200];
269
- }, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb{background:", function (_ref13) {
275
+ return theme.palette.grey[300];
276
+ }, ";}::before{border:none;}:hover{::before{border:none;}}::after{border-bottom:none!important;}::-webkit-scrollbar{width:0.25rem;}::-webkit-scrollbar-track{background:", function (_ref13) {
270
277
  var theme = _ref13.theme;
271
- return theme.palette.primary.main;
272
- }, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb:hover{background:", function (_ref14) {
278
+ return theme.palette.grey[200];
279
+ }, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb{background:", function (_ref14) {
273
280
  var theme = _ref14.theme;
281
+ return theme.palette.primary.main;
282
+ }, ";border-radius:0.5rem;}::-webkit-scrollbar-thumb:hover{background:", function (_ref15) {
283
+ var theme = _ref15.theme;
274
284
  return theme.palette.secondary.main;
275
285
  }, ";}");
276
286
  var StyledMessage = /*#__PURE__*/_styled(Typography, {
277
287
  target: "e1i7zt5"
278
- })("color:", function (_ref15) {
279
- var isAssistant = _ref15.isAssistant,
280
- theme = _ref15.theme;
288
+ })("color:", function (_ref16) {
289
+ var isAssistant = _ref16.isAssistant,
290
+ theme = _ref16.theme;
281
291
  return isAssistant ? theme.palette.text.secondary : theme.palette.secondary.main;
282
- }, ";font-size:1rem;font-weight:", function (_ref16) {
283
- var isAssistant = _ref16.isAssistant;
292
+ }, ";font-size:1rem;font-weight:", function (_ref17) {
293
+ var isAssistant = _ref17.isAssistant;
284
294
  return isAssistant ? 500 : 700;
285
- }, ";background-color:", function (_ref17) {
286
- var isAssistant = _ref17.isAssistant,
287
- theme = _ref17.theme;
295
+ }, ";background-color:", function (_ref18) {
296
+ var isAssistant = _ref18.isAssistant,
297
+ theme = _ref18.theme;
288
298
  return isAssistant ? theme.palette.grey[50] : theme.palette.primary.light;
289
299
  }, ";border-radius:1rem;white-space:pre-wrap;padding:0.75rem;margin-bottom:16px;");
290
300
  var EmptyMessageContainer = /*#__PURE__*/_styled(Stack, {
@@ -329,17 +339,17 @@ var OverlayContent = /*#__PURE__*/_styled(Box, {
329
339
  });
330
340
  var OnlyRecordButton = /*#__PURE__*/_styled(Stack, {
331
341
  target: "e1i7zt0"
332
- })("color:", function (_ref18) {
333
- var theme = _ref18.theme;
334
- return theme.palette.common.white;
335
- }, ";background:", function (_ref19) {
342
+ })("color:", function (_ref19) {
336
343
  var theme = _ref19.theme;
337
- return theme.palette.common.red[900];
338
- }, ";&:hover{background:", function (_ref20) {
344
+ return theme.palette.common.white;
345
+ }, ";background:", function (_ref20) {
339
346
  var theme = _ref20.theme;
340
- return theme.palette.common.red[600];
341
- }, ";color:", function (_ref21) {
347
+ return theme.palette.common.red[900];
348
+ }, ";&:hover{background:", function (_ref21) {
342
349
  var theme = _ref21.theme;
350
+ return theme.palette.common.red[600];
351
+ }, ";color:", function (_ref22) {
352
+ var theme = _ref22.theme;
343
353
  return theme.palette.common.red[900];
344
354
  }, ";}");
345
355
 
package/es/types/theme-augmentation.d.ts CHANGED
@@ -54,6 +54,7 @@ declare module '@mui/material/styles' {
54
54
  }
55
55
  declare module '@mui/material/Typography' {
56
56
  interface TypographyPropsVariantOverrides {
57
+ subtitle3: true;
57
58
  pagination: true;
58
59
  buttoninput: true;
59
60
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elicecontents/content-ui",
3
- "version": "1.0.13",
3
+ "version": "1.0.14",
4
4
  "description": "A set of UI components for creating content of Elice",
5
5
  "author": "Elice <contact@elice.io>",
6
6
  "license": "UNLICENSED",