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: