diff --git a/app/client/web/src/conversation/Conversation.module.css b/app/client/web/src/conversation/Conversation.module.css index 5a004f88..5bf73e53 100644 --- a/app/client/web/src/conversation/Conversation.module.css +++ b/app/client/web/src/conversation/Conversation.module.css @@ -55,8 +55,8 @@ .add { display: flex; + flex-direction: column; flex-shrink: 0; - height: 128px; border-top: 1px solid var(--mantine-color-text-7); width: calc(100% - 32px); margin-left: 16px; @@ -112,4 +112,32 @@ text-overflow: ellipsis; overflow: hidden; } + + .message { + width: calc(100% - 16px); + margin: 8px; + } + + .controls { + display: flex; + flex-direction: row; + gap: 12px; + width: 100%; + padding-left: 8px; + padding-right: 8px; + padding-bottom: 12px; + } + + .attach { + padding: 4px; + width: 32px; + height: 32px; + } + + .send { + flex-grow: 1; + display: flex; + flex-direction: row; + justify-content: flex-end; + } } diff --git a/app/client/web/src/conversation/Conversation.tsx b/app/client/web/src/conversation/Conversation.tsx index 4497ad14..fbf70edd 100644 --- a/app/client/web/src/conversation/Conversation.tsx +++ b/app/client/web/src/conversation/Conversation.tsx @@ -1,10 +1,11 @@ -import React, {useEffect, useRef, useCallback} from 'react' +import React, {useState, useEffect, useRef, useCallback} from 'react' import { Focus } from 'databag-client-sdk' import classes from './Conversation.module.css' import { useConversation } from './useConversation.hook'; -import { IconX, IconSettings, IconHome, IconServer, IconShield, IconLock, IconExclamationCircle } from '@tabler/icons-react' -import { Divider, Text, ActionIcon, Loader } from '@mantine/core' +import { IconSend, IconTextSize, IconTextColor, IconVideo, IconFile, IconDisc, IconCamera, IconX, IconSettings, IconHome, IconServer, IconShield, IconLock, IconExclamationCircle } from '@tabler/icons-react' +import { Divider, Text, Textarea, ActionIcon, Loader } from '@mantine/core' import { Message } from '../message/Message'; +import { modals } from '@mantine/modals' const PAD_HEIGHT = (1024 - 64); const LOAD_DEBOUNCE = 1000; @@ -21,6 +22,7 @@ export function Conversation() { const thread = useRef(null as HTMLDivElement | null); const scrollPos = useRef(0); const debounce = useRef(false); + const [sending, setSending] = useState(false); const { state, actions } = useConversation(); const attachImage = useRef({ click: ()=>{} } as HTMLInputElement); @@ -28,6 +30,33 @@ export function Conversation() { actions.add(e.target.files[0]); }; + const sendMessage = async () => { + if (!sending) { + setSending(true); + try { + await actions.send(); + } catch (err) { + console.log(err); + showError(); + } + setSending(false); + } + } + + const showError = () => { + modals.openConfirmModal({ + title: state.strings.operationFailed, + withCloseButton: true, + overlayProps: { + backgroundOpacity: 0.55, + blur: 3, + }, + children: {state.strings.tryAgain}, + cancelProps: { display: 'none' }, + confirmProps: { display: 'none' }, + }) + } + const onScroll = () => { if (thread.current) { const { scrollHeight, clientHeight, scrollTop } = thread.current; @@ -87,7 +116,7 @@ export function Conversation() { )} -
attachImage.current.click()}> +
{ state.detailSet && state.subject && ( { state.subject } )} @@ -125,6 +154,33 @@ export function Conversation() {
onSelectImage(e)} style={{display: 'none'}}/> +