Big chat improvements, adjusted mobile ui.

packages/chat/src/components/input.tsx

@@ -10,8 +10,13 @@ import { useTTP } from "@tensamin/ttp/context";
 import { useCrypto } from "@tensamin/crypto/context";
 import { log, toast } from "@tensamin/shared/log";
 
-export default function InputComponent() {
-  const [value, setValue] = React.useState("");
+export default function InputComponent({
+  value,
+  setValue,
+}: {
+  value: string;
+  setValue: (value: string) => void;
+}) {
   const [invertEnterBehavior, setInvertEnterBehavior] = React.useState(false);
 
   const { encrypt } = useCrypto();
@@ -35,15 +40,13 @@ export default function InputComponent() {
 
     const time = Date.now();
     const currentValue = value;
-    const currentUserId = userId();
-    const currentSharedSecret = sharedSecret();
 
-    if (!Number.isSafeInteger(currentUserId) || currentUserId <= 0) {
+    if (!Number.isSafeInteger(userId) || userId <= 0) {
       toast("error", "No conversation selected");
       return;
     }
 
-    if (!currentSharedSecret) {
+    if (!sharedSecret) {
       toast("error", "Still getting shared secret...");
       return;
     }
@@ -59,18 +62,18 @@ export default function InputComponent() {
       message_state: "awaiting",
     });
 
-    const encryptedContext = await encrypt(currentSharedSecret, currentValue);
+    const encryptedContext = await encrypt(sharedSecret, currentValue);
 
     send("message_send", {
       height,
       content: encryptedContext,
-      receiver_id: currentUserId,
+      receiver_id: userId,
       timestamp: time,
     }).catch((e) => {
       log(0, "Chat", "red", "Failed to send message", e, {
         content: currentValue,
         encryptedContext,
-        receiver_id: currentUserId,
+        receiver_id: userId,
         timestamp: time,
       });
       reference.setFailed(true);
@@ -81,7 +84,7 @@ export default function InputComponent() {
   }
 
   return (
-    <Card className="rounded-none rounded-t-xl border-b-0 pt-0">
+    <Card className="rounded-none rounded-t-xl border-b-0 pt-0 pb-[env(safe-area-inset-bottom)]">
       <CardHeader className="p-0 flex flex-col">
         <Input
           placeholder="Send a message..."

packages/chat/src/components/message.tsx

@@ -25,7 +25,6 @@ export default function Message(props: {
 }) {
   const { sharedSecret } = useChat();
   const { decrypt } = useCrypto();
-  const sharedSecretValue = sharedSecret();
 
   const [decodedContent, setDecodedContent] = React.useState("");
   const [isReady, setIsReady] = React.useState(false);
@@ -38,7 +37,7 @@ export default function Message(props: {
     }
 
     const content = props.message.content;
-    const secret = sharedSecretValue;
+    const secret = sharedSecret;
     let active = true;
 
     if (!secret) {
@@ -72,7 +71,7 @@ export default function Message(props: {
     return () => {
       active = false;
     };
-  }, [decrypt, props.message.content, props.notEncrypted, sharedSecretValue]);
+  }, [decrypt, props.message.content, props.notEncrypted, sharedSecret]);
 
   return (
     <div
@@ -83,9 +82,9 @@ export default function Message(props: {
           props.message.sent_by_self
             ? "bg-primary text-primary-foreground"
             : "bg-muted"
-        }`}
+        } ${!isReady && "animate-pulse"}`}
       >
-        {props.message.failed && (
+        {props.message.failed && props.message.message_state === "awaiting" && (
           <Tooltip>
             <TooltipContent>
               <p>Failed to send message</p>
@@ -93,9 +92,18 @@ export default function Message(props: {
             <TooltipTrigger render={<AlertTriangle size={17} />} />
           </Tooltip>
         )}
-        {props.message.message_state === "awaiting" &&
-          !props.message.failed && <Clock size={17} />}
-        {isReady ? <Text value={decodedContent} /> : null}
+        {!props.message.failed &&
+          props.message.message_state === "awaiting" && <Clock size={17} />}
+        {isReady ? (
+          <Text value={decodedContent} />
+        ) : (
+          <div
+            className="h-8"
+            style={{
+              width: Math.random() * 100 + 50 + "px",
+            }}
+          />
+        )}
       </div>
     </div>
   );