|
|
|
|
@@ -356,22 +356,19 @@ const openFile = ({ file }: any) => {
|
|
|
|
|
window.open(file.url, '_blank')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Theme configuration for dark mode
|
|
|
|
|
const chatTheme = 'dark'
|
|
|
|
|
|
|
|
|
|
// Styles to match TradingView dark theme
|
|
|
|
|
const chatStyles = computed(() => JSON.stringify({
|
|
|
|
|
const chatStyles = {
|
|
|
|
|
general: {
|
|
|
|
|
color: '#D3D4DC',
|
|
|
|
|
colorButtonClear: '#D3D4DC',
|
|
|
|
|
colorButton: '#131722',
|
|
|
|
|
backgroundColorButton: '#26A69A',
|
|
|
|
|
backgroundInput: '#131722',
|
|
|
|
|
colorPlaceholder: '#787B86',
|
|
|
|
|
colorCaret: '#D3D4DC',
|
|
|
|
|
colorSpinner: '#26A69A',
|
|
|
|
|
borderStyle: '1px solid #2A2E39',
|
|
|
|
|
backgroundScrollIcon: '#2A2E39'
|
|
|
|
|
color: '#dbdbdb',
|
|
|
|
|
colorButtonClear: '#dbdbdb',
|
|
|
|
|
colorButton: '#0f0f0f',
|
|
|
|
|
backgroundColorButton: '#089981',
|
|
|
|
|
backgroundInput: '#0f0f0f',
|
|
|
|
|
colorPlaceholder: '#8a8a8a',
|
|
|
|
|
colorCaret: '#dbdbdb',
|
|
|
|
|
colorSpinner: '#089981',
|
|
|
|
|
borderStyle: '1px solid #2e2e2e',
|
|
|
|
|
backgroundScrollIcon: '#1c1c1c'
|
|
|
|
|
},
|
|
|
|
|
container: {
|
|
|
|
|
border: 'none',
|
|
|
|
|
@@ -379,122 +376,122 @@ const chatStyles = computed(() => JSON.stringify({
|
|
|
|
|
boxShadow: 'none'
|
|
|
|
|
},
|
|
|
|
|
header: {
|
|
|
|
|
background: '#2A2E39',
|
|
|
|
|
colorRoomName: '#D3D4DC',
|
|
|
|
|
colorRoomInfo: '#787B86',
|
|
|
|
|
background: '#1c1c1c',
|
|
|
|
|
colorRoomName: '#dbdbdb',
|
|
|
|
|
colorRoomInfo: '#8a8a8a',
|
|
|
|
|
position: 'absolute',
|
|
|
|
|
width: '100%'
|
|
|
|
|
},
|
|
|
|
|
footer: {
|
|
|
|
|
background: '#2A2E39',
|
|
|
|
|
borderStyleInput: '1px solid #2A2E39',
|
|
|
|
|
borderInputSelected: '#26A69A',
|
|
|
|
|
backgroundReply: '#2A2E39',
|
|
|
|
|
backgroundTagActive: '#2A2E39',
|
|
|
|
|
backgroundTag: '#1E222D'
|
|
|
|
|
background: '#1c1c1c',
|
|
|
|
|
borderStyleInput: '1px solid #2e2e2e',
|
|
|
|
|
borderInputSelected: '#089981',
|
|
|
|
|
backgroundReply: '#1c1c1c',
|
|
|
|
|
backgroundTagActive: '#2e2e2e',
|
|
|
|
|
backgroundTag: '#141414'
|
|
|
|
|
},
|
|
|
|
|
content: {
|
|
|
|
|
background: '#131722'
|
|
|
|
|
background: '#0f0f0f'
|
|
|
|
|
},
|
|
|
|
|
sidemenu: {
|
|
|
|
|
background: '#131722',
|
|
|
|
|
backgroundHover: '#1E222D',
|
|
|
|
|
backgroundActive: '#2A2E39',
|
|
|
|
|
colorActive: '#D3D4DC',
|
|
|
|
|
borderColorSearch: '#2A2E39'
|
|
|
|
|
background: '#0f0f0f',
|
|
|
|
|
backgroundHover: '#141414',
|
|
|
|
|
backgroundActive: '#1c1c1c',
|
|
|
|
|
colorActive: '#dbdbdb',
|
|
|
|
|
borderColorSearch: '#2e2e2e'
|
|
|
|
|
},
|
|
|
|
|
dropdown: {
|
|
|
|
|
background: '#2A2E39',
|
|
|
|
|
backgroundHover: '#363B4A'
|
|
|
|
|
background: '#1c1c1c',
|
|
|
|
|
backgroundHover: '#2e2e2e'
|
|
|
|
|
},
|
|
|
|
|
message: {
|
|
|
|
|
background: '#1E222D',
|
|
|
|
|
backgroundMe: '#26A69A',
|
|
|
|
|
color: '#D3D4DC',
|
|
|
|
|
colorStarted: '#787B86',
|
|
|
|
|
backgroundDeleted: '#131722',
|
|
|
|
|
backgroundSelected: '#2A2E39',
|
|
|
|
|
colorDeleted: '#787B86',
|
|
|
|
|
colorUsername: '#787B86',
|
|
|
|
|
colorTimestamp: '#787B86',
|
|
|
|
|
backgroundDate: 'rgba(0, 0, 0, 0.3)',
|
|
|
|
|
colorDate: '#787B86',
|
|
|
|
|
backgroundSystem: 'rgba(0, 0, 0, 0.3)',
|
|
|
|
|
colorSystem: '#787B86',
|
|
|
|
|
backgroundMedia: 'rgba(0, 0, 0, 0.18)',
|
|
|
|
|
backgroundReply: 'rgba(0, 0, 0, 0.18)',
|
|
|
|
|
colorReplyUsername: '#D3D4DC',
|
|
|
|
|
colorReply: '#B2B5BE',
|
|
|
|
|
colorTag: '#26A69A',
|
|
|
|
|
backgroundImage: '#2A2E39',
|
|
|
|
|
colorNewMessages: '#26A69A',
|
|
|
|
|
backgroundScrollCounter: '#26A69A',
|
|
|
|
|
colorScrollCounter: '#131722',
|
|
|
|
|
background: '#141414',
|
|
|
|
|
backgroundMe: '#089981',
|
|
|
|
|
color: '#dbdbdb',
|
|
|
|
|
colorStarted: '#8a8a8a',
|
|
|
|
|
backgroundDeleted: '#0f0f0f',
|
|
|
|
|
backgroundSelected: '#2e2e2e',
|
|
|
|
|
colorDeleted: '#8a8a8a',
|
|
|
|
|
colorUsername: '#8a8a8a',
|
|
|
|
|
colorTimestamp: '#8a8a8a',
|
|
|
|
|
backgroundDate: 'rgba(0, 0, 0, 0.4)',
|
|
|
|
|
colorDate: '#8a8a8a',
|
|
|
|
|
backgroundSystem: 'rgba(0, 0, 0, 0.4)',
|
|
|
|
|
colorSystem: '#8a8a8a',
|
|
|
|
|
backgroundMedia: 'rgba(0, 0, 0, 0.2)',
|
|
|
|
|
backgroundReply: 'rgba(0, 0, 0, 0.2)',
|
|
|
|
|
colorReplyUsername: '#dbdbdb',
|
|
|
|
|
colorReply: '#b8b8b8',
|
|
|
|
|
colorTag: '#089981',
|
|
|
|
|
backgroundImage: '#1c1c1c',
|
|
|
|
|
colorNewMessages: '#089981',
|
|
|
|
|
backgroundScrollCounter: '#089981',
|
|
|
|
|
colorScrollCounter: '#0f0f0f',
|
|
|
|
|
backgroundReaction: 'none',
|
|
|
|
|
borderStyleReaction: 'none',
|
|
|
|
|
backgroundReactionHover: '#2A2E39',
|
|
|
|
|
backgroundReactionHover: '#2e2e2e',
|
|
|
|
|
borderStyleReactionHover: 'none',
|
|
|
|
|
colorReactionCounter: '#D3D4DC',
|
|
|
|
|
backgroundReactionMe: '#26A69A',
|
|
|
|
|
colorReactionCounter: '#dbdbdb',
|
|
|
|
|
backgroundReactionMe: '#089981',
|
|
|
|
|
borderStyleReactionMe: 'none',
|
|
|
|
|
backgroundReactionHoverMe: '#26A69A',
|
|
|
|
|
backgroundReactionHoverMe: '#089981',
|
|
|
|
|
borderStyleReactionHoverMe: 'none',
|
|
|
|
|
colorReactionCounterMe: '#131722',
|
|
|
|
|
backgroundAudioRecord: '#EF5350',
|
|
|
|
|
colorReactionCounterMe: '#0f0f0f',
|
|
|
|
|
backgroundAudioRecord: '#f23645',
|
|
|
|
|
backgroundAudioLine: 'rgba(255, 255, 255, 0.15)',
|
|
|
|
|
backgroundAudioProgress: '#26A69A',
|
|
|
|
|
backgroundAudioProgressSelector: '#26A69A',
|
|
|
|
|
colorFileExtension: '#787B86'
|
|
|
|
|
backgroundAudioProgress: '#089981',
|
|
|
|
|
backgroundAudioProgressSelector: '#089981',
|
|
|
|
|
colorFileExtension: '#8a8a8a'
|
|
|
|
|
},
|
|
|
|
|
markdown: {
|
|
|
|
|
background: 'rgba(42, 46, 57, 0.8)',
|
|
|
|
|
border: 'rgba(55, 60, 74, 0.9)',
|
|
|
|
|
color: '#26A69A',
|
|
|
|
|
colorMulti: '#D3D4DC'
|
|
|
|
|
background: 'rgba(28, 28, 28, 0.9)',
|
|
|
|
|
border: 'rgba(46, 46, 46, 0.9)',
|
|
|
|
|
color: '#089981',
|
|
|
|
|
colorMulti: '#dbdbdb'
|
|
|
|
|
},
|
|
|
|
|
room: {
|
|
|
|
|
colorUsername: '#D3D4DC',
|
|
|
|
|
colorMessage: '#787B86',
|
|
|
|
|
colorTimestamp: '#787B86',
|
|
|
|
|
colorStateOnline: '#26A69A',
|
|
|
|
|
colorStateOffline: '#787B86',
|
|
|
|
|
backgroundCounterBadge: '#26A69A',
|
|
|
|
|
colorCounterBadge: '#131722'
|
|
|
|
|
colorUsername: '#dbdbdb',
|
|
|
|
|
colorMessage: '#8a8a8a',
|
|
|
|
|
colorTimestamp: '#8a8a8a',
|
|
|
|
|
colorStateOnline: '#089981',
|
|
|
|
|
colorStateOffline: '#8a8a8a',
|
|
|
|
|
backgroundCounterBadge: '#089981',
|
|
|
|
|
colorCounterBadge: '#0f0f0f'
|
|
|
|
|
},
|
|
|
|
|
emoji: {
|
|
|
|
|
background: '#2A2E39'
|
|
|
|
|
background: '#1c1c1c'
|
|
|
|
|
},
|
|
|
|
|
icons: {
|
|
|
|
|
search: '#787B86',
|
|
|
|
|
add: '#D3D4DC',
|
|
|
|
|
toggle: '#D3D4DC',
|
|
|
|
|
menu: '#D3D4DC',
|
|
|
|
|
close: '#787B86',
|
|
|
|
|
closeImage: '#D3D4DC',
|
|
|
|
|
file: '#26A69A',
|
|
|
|
|
paperclip: '#787B86',
|
|
|
|
|
closeOutline: '#D3D4DC',
|
|
|
|
|
closePreview: '#D3D4DC',
|
|
|
|
|
send: '#26A69A',
|
|
|
|
|
sendDisabled: '#787B86',
|
|
|
|
|
emoji: '#787B86',
|
|
|
|
|
emojiReaction: '#787B86',
|
|
|
|
|
document: '#26A69A',
|
|
|
|
|
pencil: '#787B86',
|
|
|
|
|
checkmark: '#787B86',
|
|
|
|
|
checkmarkSeen: '#26A69A',
|
|
|
|
|
eye: '#D3D4DC',
|
|
|
|
|
dropdownMessage: '#D3D4DC',
|
|
|
|
|
dropdownMessageBackground: 'rgba(0, 0, 0, 0.3)',
|
|
|
|
|
dropdownRoom: '#D3D4DC',
|
|
|
|
|
dropdownScroll: '#2A2E39',
|
|
|
|
|
microphone: '#787B86',
|
|
|
|
|
audioPlay: '#26A69A',
|
|
|
|
|
audioPause: '#26A69A',
|
|
|
|
|
audioCancel: '#EF5350',
|
|
|
|
|
audioConfirm: '#26A69A'
|
|
|
|
|
search: '#8a8a8a',
|
|
|
|
|
add: '#dbdbdb',
|
|
|
|
|
toggle: '#dbdbdb',
|
|
|
|
|
menu: '#dbdbdb',
|
|
|
|
|
close: '#8a8a8a',
|
|
|
|
|
closeImage: '#dbdbdb',
|
|
|
|
|
file: '#089981',
|
|
|
|
|
paperclip: '#8a8a8a',
|
|
|
|
|
closeOutline: '#dbdbdb',
|
|
|
|
|
closePreview: '#dbdbdb',
|
|
|
|
|
send: '#089981',
|
|
|
|
|
sendDisabled: '#8a8a8a',
|
|
|
|
|
emoji: '#8a8a8a',
|
|
|
|
|
emojiReaction: '#8a8a8a',
|
|
|
|
|
document: '#089981',
|
|
|
|
|
pencil: '#8a8a8a',
|
|
|
|
|
checkmark: '#8a8a8a',
|
|
|
|
|
checkmarkSeen: '#089981',
|
|
|
|
|
eye: '#dbdbdb',
|
|
|
|
|
dropdownMessage: '#dbdbdb',
|
|
|
|
|
dropdownMessageBackground: 'rgba(0, 0, 0, 0.4)',
|
|
|
|
|
dropdownRoom: '#dbdbdb',
|
|
|
|
|
dropdownScroll: '#1c1c1c',
|
|
|
|
|
microphone: '#8a8a8a',
|
|
|
|
|
audioPlay: '#089981',
|
|
|
|
|
audioPause: '#089981',
|
|
|
|
|
audioCancel: '#f23645',
|
|
|
|
|
audioConfirm: '#089981'
|
|
|
|
|
}
|
|
|
|
|
}))
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
wsManager.addHandler(handleMessage)
|
|
|
|
|
@@ -539,8 +536,7 @@ onUnmounted(() => {
|
|
|
|
|
:messages="JSON.stringify(messages)"
|
|
|
|
|
:messages-loaded="messagesLoaded"
|
|
|
|
|
:room-id="SESSION_ID"
|
|
|
|
|
:theme="chatTheme"
|
|
|
|
|
:styles="chatStyles"
|
|
|
|
|
:styles="JSON.stringify(chatStyles)"
|
|
|
|
|
:single-room="true"
|
|
|
|
|
:rooms-list-opened="false"
|
|
|
|
|
:show-add-room="false"
|
|
|
|
|
|
