Updated a lot of stuff, trying out radix ui

packages/chat/src/components/input.tsx

@@ -56,6 +56,7 @@ export default function InputComponent() {
       timestamp: time,
       content: currentValue,
       sent_by_self: true,
+      message_state: "awaiting",
     });
 
     const encryptedContext = await encrypt(currentSharedSecret, currentValue);
@@ -89,16 +90,16 @@ export default function InputComponent() {
           onSubmit={handleSubmit}
           invertEnterBehavior={invertEnterBehavior}
         />
-        <div className="w-full flex justify-between gap-2 p-2 pt-0">
-          <div className="flex gap-2">
+        <div className="w-full flex justify-between gap-1 p-1 pt-0">
+          <div className="flex gap-1">
             <Button className="w-9 h-9 p-0" variant="ghost">
               <Plus size={20} />
             </Button>
-            <div className="w-auto flex">
+            <div className="w-auto flex text-red-500">
               <p>Files list</p>
             </div>
           </div>
-          <div className="flex gap-2">
+          <div className="flex gap-1">
             <Button className="w-9 h-9 p-0" variant="ghost">
               <Laugh size={20} />
             </Button>

packages/chat/src/components/message.tsx

@@ -4,7 +4,7 @@ import { useChat } from "../context";
 import type { RawMessage } from "../values";
 import { log } from "@tensamin/shared/log";
 import Text from "@tensamin/markdown/text";
-import { AlertTriangle } from "lucide-react";
+import { AlertTriangle, Clock } from "lucide-react";
 
 import {
   Tooltip,
@@ -77,7 +77,7 @@ export default function Message(props: {
 
   return (
     <div
-      className={`w-full flex justify-start ${props.message.failed && "opacity-50"}`}
+      className={`w-full flex justify-start ${(props.message.failed || props.message.message_state === "awaiting") && "opacity-50"}`}
     >
       <div
         className={`flex gap-1 items-center justify-center animate-in fade-in duration-200 max-w-[80%] rounded-lg px-2 py-px whitespace-pre-wrap wrap-break-word ${
@@ -91,9 +91,13 @@ export default function Message(props: {
             <TooltipContent>
               <p>Failed to send message</p>
             </TooltipContent>
-            <TooltipTrigger render={<AlertTriangle size={17} />} />
+            <TooltipTrigger asChild>
+              <AlertTriangle size={17} />
+            </TooltipTrigger>
           </Tooltip>
         )}
+        {props.message.message_state === "awaiting" &&
+          !props.message.failed && <Clock size={17} />}
         {isReady ? <Text value={decodedContent} /> : null}
       </div>
     </div>