WIP

src/components/chat/Message.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import Avatar from 'boring-avatars';
+
+export interface MessageProps {
+  message: string;
+  ack: boolean;
+  isSender: boolean;
+  rxTime: Date;
+}
+
+export const Message = ({
+  message,
+  ack,
+  isSender,
+  rxTime,
+}: MessageProps): JSX.Element => {
+  return (
+    <div
+      className={`flex space-x-2 ${!isSender && 'ml-auto flex-row-reverse'}`}
+    >
+      <div className={`shadow-md rounded-full mt-auto ${!isSender && 'ml-2'}`}>
+        <Avatar
+          size={30}
+          name={'UNK'}
+          variant="beam"
+          colors={['#213435', '#46685B', '#648A64', '#A6B985', '#E1E3AC']}
+        />
+      </div>
+      <div
+        className={`relative max-w-3/4 px-3 py-2 rounded-t-lg mb-2 ${
+          isSender
+            ? 'bg-gray-500 text-gray-50 rounded-br-lg'
+            : 'bg-primary text-blue-50 rounded-bl-lg'
+        } ${ack ? 'animate-none' : 'animate-pulse'}`}
+      >
+        <div className="min-w-4 leading-5">{message}</div>
+      </div>
+      <div className="mt-auto mb-2 text-xs font-medium text-secondary mr-3 dark:text-gray-200">
+        {rxTime.getHours()}:{rxTime.getMinutes()}
+      </div>
+    </div>
+  );
+};

src/components/chat/MessageBar.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+
+import { useTranslation } from 'react-i18next';
+
+import {
+  EmojiHappyIcon,
+  PaperAirplaneIcon,
+  PaperClipIcon,
+} from '@heroicons/react/outline';
+
+import { connection } from '../../connection';
+import { useAppSelector } from '../../hooks/redux';
+import { Button } from '../generic/Button';
+
+export const MessageBar = (): JSX.Element => {
+  const ready = useAppSelector((state) => state.meshtastic.ready);
+  const [currentMessage, setCurrentMessage] = React.useState('');
+  const sendMessage = () => {
+    if (ready) {
+      connection.sendText(currentMessage, undefined, true);
+      setCurrentMessage('');
+    }
+  };
+  const { t } = useTranslation();
+  return (
+    <div className="flex p-4 bg-gray-50 dark:bg-transparent space-x-2 text-gray-500 dark:text-gray-400">
+      <div className="flex">
+        <Button>
+          <EmojiHappyIcon className="w-6 h-6" />
+        </Button>
+
+        <Button>
+          <PaperClipIcon className="w-6 h-6" />
+        </Button>
+      </div>
+      <form
+        className="flex w-full space-x-2"
+        onSubmit={(e) => {
+          e.preventDefault();
+          sendMessage();
+        }}
+      >
+        <input
+          type="text"
+          minLength={2}
+          placeholder={`${t('placeholder.message')}...`}
+          disabled={!ready}
+          value={currentMessage}
+          onChange={(e) => {
+            setCurrentMessage(e.target.value);
+          }}
+          className="focus:outline-none h-10 w-full resize-none rounded-full border border-gray-300 dark:bg-gray-900 px-4"
+        />
+        <Button type="submit">
+          <PaperAirplaneIcon className="w-6 h-6 rotate-90" />
+        </Button>
+      </form>
+    </div>
+  );
+};