refactor: chat ui improvements (#11)

AmbossTech · Jul 5, 2024 · dc6fc2c · dc6fc2c
1 parent f8d8c91
commit dc6fc2c
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 7 deletions.
diff --git a/src/views/contacts/MessageBox.tsx b/src/views/contacts/MessageBox.tsx
@@ -60,15 +60,15 @@ export const ContactMessageBox = () => {
 
   if (loading) {
     return (
-      <div className="flex w-full justify-center">
+      <div className="flex h-28 w-full items-center justify-center">
         <Loader2 className="animate-spin" />
       </div>
     );
   }
 
   if (!payment_options.length && !encryption_pubkey) {
     return (
-      <div className="flex w-full justify-center">
+      <div className="flex h-28 w-full items-center justify-center">
         <p className="text-sm text-muted-foreground">
           No action available for this contact.
         </p>

diff --git a/src/views/contacts/Messages.tsx b/src/views/contacts/Messages.tsx
@@ -23,6 +23,8 @@ type Message = {
 };
 
 export const Messages = () => {
+  const scrollDiv = useRef<HTMLDivElement>(null);
+
   const workerRef = useRef<Worker>();
 
   const [decryptedMessage, setDecryptedMessage] = useState<Message[]>([]);
@@ -52,6 +54,12 @@ export const Messages = () => {
     }));
   }, [decryptedMessage, data]);
 
+  useEffect(() => {
+    if (scrollDiv.current) {
+      scrollDiv.current.scrollTop = scrollDiv.current.scrollHeight;
+    }
+  }, [messages]);
+
   useEffect(() => {
     if (!masterKey) return;
     if (!workerLoaded) return;
@@ -104,14 +112,16 @@ export const Messages = () => {
   }, []);
 
   return (
-    <div className="relative flex h-full min-h-[50vh] flex-col rounded-xl bg-muted/50 p-4 lg:col-span-3">
+    <div
+      ref={scrollDiv}
+      className="relative flex h-[calc(100dvh-170px)] flex-col overflow-y-auto rounded-xl bg-muted/50 md:h-[calc(100dvh-86px)] lg:col-span-3"
+    >
       {!!currentContact?.user ? (
         <Badge variant="secondary" className="absolute right-3 top-3">
           {currentContact.user}
         </Badge>
       ) : null}
-      <div className="flex-1" />
-      <div className="my-8 flex flex-col gap-4">
+      <div className="mt-8 flex flex-grow flex-col gap-4 px-4 pt-4">
         {messages.map(m => (
           <div
             key={m.id}
@@ -132,7 +142,9 @@ export const Messages = () => {
           </div>
         ))}
       </div>
-      <ContactMessageBox />
+      <div className="sticky bottom-0 left-0 bg-[#f9f9fa] px-4 pb-4 pt-8 dark:bg-[#101724]">
+        <ContactMessageBox />
+      </div>
     </div>
   );
 };
diff --git a/src/views/contacts/boxes/MessageBox.tsx b/src/views/contacts/boxes/MessageBox.tsx
@@ -101,7 +101,7 @@ export const SendMessageBox: FC<{ iconOptions?: ReactNode }> = ({
   return (
     <form
       onSubmit={handleSubmit}
-      className="relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring"
+      className="rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring"
     >
       <Label htmlFor="message" className="sr-only">
         Message