communication-ui-library/packages/react-composites/src/composites/ChatComposite/styles/Chat.styles.ts at f7ab793873e29d8b08a3e623d7d79851ab3ddc68 · Azure/communication-ui-library · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import { IStyle, memoizeFunction, mergeStyles } from '@fluentui/react';
import { MessageThreadStyles } from '@internal/react-components';

const MESSAGE_THREAD_WIDTH = '41.25rem';

/**
 * @private
 * z-index to ensure that chat container has lower z-index than participant pane
 */
export const CHAT_CONTAINER_ZINDEX = 1;

/**
 * @private
 */
export const chatScreenContainerStyle = mergeStyles({
  height: '100%',
  width: '100%',
  minHeight: '13rem',
  minWidth: '17.5rem'
});

/**
 * @private
 */
export const chatContainer = mergeStyles({
  height: '100%',
  width: '100%',
  overflow: 'hidden',

  '*::-webkit-scrollbar': {
    width: '0.3rem',
    height: '0.3rem'
  },
  '.scroll::-webkit-scrollbar-track': {
    background: 'rgba(150, 150, 150)',
    borderRadius: '0.3rem'
  },
  '*::-webkit-scrollbar-thumb': {
    borderRadius: '10px',
    background: 'rgba(150, 150, 150)'
  }
});

/**
 * @private
 */
export const chatArea = mergeStyles({
  height: '100%',
  width: '100%',
  overflow: 'auto',
  position: 'relative' // Ensure that the absolute children components are positioned relative to the chat area
});

/**
 * @private
 */
export const chatWrapper = mergeStyles({
  height: '100%',
  width: '100%',
  overflow: 'hidden',
  zIndex: CHAT_CONTAINER_ZINDEX
});

/**
 * @private
 */
export const chatHeaderContainerStyle = mergeStyles({
  width: '100%',
  paddingLeft: '1.5rem',
  paddingRight: '1.5rem',
  '@media screen and (max-width: 25rem)': {
    paddingLeft: '5%',
    paddingRight: '5%'
  },
  borderBottom: '0.063rem solid #DDDDDD'
});

/**
 * @private
 */
export const topicNameLabelStyle = mergeStyles({
  fontSize: '1.1rem',
  lineHeight: '2.5rem',
  fontWeight: 600,
  marginRight: '0.125rem',
  textOverflow: 'ellipsis',
  overflowY: 'hidden'
});

/**
 * @private
 */
export const messageThreadChatCompositeStyles = memoizeFunction(
  (background: string): MessageThreadStyles => ({
    root: { maxWidth: MESSAGE_THREAD_WIDTH },
    chatContainer: { background: background }
  })
);

/**
 * @private
 */
export const typingIndicatorContainerStyles: IStyle = {
  padding: '0rem 0.25rem'
};

/**
 * @private
 */
export const sendboxContainerStyles: IStyle = {
  maxWidth: MESSAGE_THREAD_WIDTH,
  width: '100%',
  alignSelf: 'center'
};