TTP -> MTP, A lot of other stuff #21
2 changed files with 112 additions and 108 deletions
commit
cabe83aa98
|
|
@ -96,7 +96,7 @@ export default function Navbar({ forMobile }: { forMobile: boolean }) {
|
||||||
</Popover>
|
</Popover>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
loading={<Skeleton className="ml-3 w-40 h-5" />}
|
loading={<Skeleton className="w-30 h-5" />}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -21,9 +21,7 @@ import {
|
||||||
Card,
|
Card,
|
||||||
cn,
|
cn,
|
||||||
Separator,
|
Separator,
|
||||||
Tooltip,
|
Skeleton,
|
||||||
TooltipContent,
|
|
||||||
TooltipTrigger,
|
|
||||||
} from "@tensamin/ui";
|
} from "@tensamin/ui";
|
||||||
import MessageContextMenu from "./messageContextMenu";
|
import MessageContextMenu from "./messageContextMenu";
|
||||||
import Media from "./media";
|
import Media from "./media";
|
||||||
|
|
@ -44,13 +42,15 @@ function MessageComponent({
|
||||||
};
|
};
|
||||||
user: User | null;
|
user: User | null;
|
||||||
}) {
|
}) {
|
||||||
const actuallyFailed = message.failed && message.MessageState === "awaiting";
|
const [decryptionFailed, setDecryptionFailed] = useState(false);
|
||||||
|
const actuallyFailed =
|
||||||
|
(message.failed && message.MessageState === "awaiting") || decryptionFailed;
|
||||||
|
|
||||||
// Fade-in
|
// Fade-in
|
||||||
const [hasFadedIn, setHasFadedIn] = useState(false);
|
const [hasFadedIn, setHasFadedIn] = useState(false);
|
||||||
const opacityClass = !hasFadedIn
|
const opacityClass = !hasFadedIn
|
||||||
? "opacity-0"
|
? "opacity-0"
|
||||||
: actuallyFailed || message.MessageState === "awaiting"
|
: message.MessageState === "awaiting"
|
||||||
? "opacity-50"
|
? "opacity-50"
|
||||||
: "opacity-100";
|
: "opacity-100";
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
@ -63,19 +63,6 @@ function MessageComponent({
|
||||||
};
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
// Check if message is a url
|
|
||||||
const [isValidURL, setIsValidURL] = useState(false);
|
|
||||||
useEffect(() => {
|
|
||||||
try {
|
|
||||||
if (message.Content.split(" ").length > 1) throw new Error();
|
|
||||||
|
|
||||||
new URL(message.Content);
|
|
||||||
setIsValidURL(true);
|
|
||||||
} catch {
|
|
||||||
setIsValidURL(false);
|
|
||||||
}
|
|
||||||
}, [message.Content]);
|
|
||||||
|
|
||||||
// Message states
|
// Message states
|
||||||
const { load } = useStorage();
|
const { load } = useStorage();
|
||||||
const { send } = useMTP();
|
const { send } = useMTP();
|
||||||
|
|
@ -141,109 +128,126 @@ function MessageComponent({
|
||||||
(err) => {
|
(err) => {
|
||||||
toast("error", "Failed to decrypt message", String(err));
|
toast("error", "Failed to decrypt message", String(err));
|
||||||
log(1, "chat", "red", err);
|
log(1, "chat", "red", err);
|
||||||
|
setDecryptionFailed(true);
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
}, [chatSecret, message.Content]);
|
}, [chatSecret, message.Content]);
|
||||||
|
|
||||||
|
// Check if message is a url
|
||||||
|
const [isValidURL, setIsValidURL] = useState(false);
|
||||||
|
useEffect(() => {
|
||||||
|
if (!decryptedContent) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (decryptedContent.split(" ").length > 1) throw new Error();
|
||||||
|
|
||||||
|
new URL(decryptedContent);
|
||||||
|
setIsValidURL(true);
|
||||||
|
} catch {
|
||||||
|
setIsValidURL(false);
|
||||||
|
}
|
||||||
|
}, [decryptedContent]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
// pt-3 is to get a gap between messages
|
// pt-3 is to get a gap between messages
|
||||||
className={`${grouped ? "" : "pt-3"} w-full flex justify-start transition-opacity duration-150 ${opacityClass}`}
|
className={`${grouped ? "" : "pt-3"} w-full flex justify-start transition-opacity duration-150 ${opacityClass}`}
|
||||||
>
|
>
|
||||||
{user && decryptedContent ? (
|
{user ? (
|
||||||
<MessageContextMenu
|
<div
|
||||||
content={message.Content}
|
className={cn(
|
||||||
messageId={message.SendTime}
|
"group hover:bg-muted/50 select-text! relative justify-start flex gap-1 items-center w-full px-2 whitespace-pre-wrap break-all",
|
||||||
|
{
|
||||||
|
"bg-(--destructive)/15 text-destructive-foreground":
|
||||||
|
actuallyFailed,
|
||||||
|
},
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
<div
|
<>
|
||||||
className={cn(
|
{grouped ? (
|
||||||
"group hover:bg-muted/50 select-text! relative justify-start flex gap-1 items-center w-full px-2 whitespace-pre-wrap break-all",
|
<p className="w-9 text-xs group-hover:visible invisible text-muted-foreground">
|
||||||
{
|
{new Date(message.SendTime).toLocaleString([], {
|
||||||
"bg-(--destructive)/15 text-destructive-foreground":
|
hour: "2-digit",
|
||||||
actuallyFailed,
|
minute: "2-digit",
|
||||||
},
|
})}
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<Avatar className="mr-1 mb-auto mt-1 w-10">
|
||||||
|
<AvatarImage src={user.Avatar} />
|
||||||
|
<AvatarFallback>
|
||||||
|
{user.Display.slice(0, 2).toUpperCase()}
|
||||||
|
</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
)}
|
)}
|
||||||
>
|
<div className="flex flex-col group">
|
||||||
<>
|
<Card className="absolute right-4 -top-3 opacity-0 group-hover:opacity-100 flex flex-row justify-end gap-0! z-10 p-0! shadow-lg rounded-lg!">
|
||||||
{grouped ? (
|
{[0, 1, 2].map((item) => (
|
||||||
<p className="w-9 text-xs group-hover:visible invisible text-muted-foreground">
|
<Button key={item} variant="ghost" className="h-8 w-8">
|
||||||
{new Date(message.SendTime).toLocaleString([], {
|
{item === 0 && "👍"}
|
||||||
hour: "2-digit",
|
{item === 1 && "🔥"}
|
||||||
minute: "2-digit",
|
{item === 2 && "✅"}
|
||||||
})}
|
|
||||||
</p>
|
|
||||||
) : (
|
|
||||||
<Avatar className="mr-1 mb-auto mt-1 w-10">
|
|
||||||
<AvatarImage src={user.Avatar} />
|
|
||||||
<AvatarFallback>
|
|
||||||
{user.Display.slice(0, 2).toUpperCase()}
|
|
||||||
</AvatarFallback>
|
|
||||||
</Avatar>
|
|
||||||
)}
|
|
||||||
{message.failed && message.MessageState === "awaiting" && (
|
|
||||||
<Tooltip>
|
|
||||||
<TooltipContent>
|
|
||||||
<p>Failed to send message</p>
|
|
||||||
</TooltipContent>
|
|
||||||
<TooltipTrigger render={<AlertTriangle size={17} />} />
|
|
||||||
</Tooltip>
|
|
||||||
)}
|
|
||||||
<div className="flex flex-col group">
|
|
||||||
<Card className="absolute right-4 -top-3 opacity-0 group-hover:opacity-100 flex flex-row justify-end gap-0! z-10 p-0! shadow-lg rounded-lg!">
|
|
||||||
{[0, 1, 2].map((item) => (
|
|
||||||
<Button key={item} variant="ghost" className="h-8 w-8">
|
|
||||||
{item === 0 && "👍"}
|
|
||||||
{item === 1 && "🔥"}
|
|
||||||
{item === 2 && "✅"}
|
|
||||||
</Button>
|
|
||||||
))}
|
|
||||||
<Separator orientation="vertical" className="my-1" />
|
|
||||||
<Button variant="ghost" className="h-8 w-8">
|
|
||||||
<Laugh />
|
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="ghost" className="h-8 w-8">
|
))}
|
||||||
<Reply />
|
<Separator orientation="vertical" className="my-1" />
|
||||||
</Button>
|
<Button variant="ghost" className="h-8 w-8">
|
||||||
<Button variant="ghost" className="h-8 w-8">
|
<Laugh />
|
||||||
<Forward />
|
</Button>
|
||||||
</Button>
|
<Button variant="ghost" className="h-8 w-8">
|
||||||
</Card>
|
<Reply />
|
||||||
{!grouped && (
|
</Button>
|
||||||
<div className="flex items-center gap-1">
|
<Button variant="ghost" className="h-8 w-8">
|
||||||
<p className="font-medium">{user.Display}</p>
|
<Forward />
|
||||||
<p className="text-xs text-muted-foreground">
|
</Button>
|
||||||
{new Date(message.SendTime).toLocaleString([], {
|
</Card>
|
||||||
hour: "2-digit",
|
{!grouped && (
|
||||||
minute: "2-digit",
|
<div className="flex items-center gap-1">
|
||||||
})}
|
<p className="font-medium">{user.Display}</p>
|
||||||
</p>
|
<p className="text-xs text-muted-foreground">
|
||||||
<div>
|
{new Date(message.SendTime).toLocaleString([], {
|
||||||
{message.MessageState === "read" ? (
|
hour: "2-digit",
|
||||||
<Check
|
minute: "2-digit",
|
||||||
size={12}
|
})}
|
||||||
color="var(--primary-foreground-alt)"
|
</p>
|
||||||
/>
|
<div className="flex items-center justify-start gap-1">
|
||||||
) : message.MessageState === "received" ? (
|
{message.MessageState === "read" ? (
|
||||||
<Check size={12} color="var(--muted-foreground)" />
|
<Check size={12} color="var(--primary-foreground-alt)" />
|
||||||
) : message.MessageState === "sent" ? (
|
) : message.MessageState === "received" ? (
|
||||||
<RefreshCw size={12} color="var(--muted-foreground)" />
|
<Check size={12} color="var(--muted-foreground)" />
|
||||||
) : message.MessageState === "sending" ? (
|
) : message.MessageState === "sent" ? (
|
||||||
<Ellipse size={12} color="var(--muted-foreground)" />
|
<RefreshCw size={12} color="var(--muted-foreground)" />
|
||||||
) : null}
|
) : message.MessageState === "sending" ? (
|
||||||
</div>
|
<Ellipse size={12} color="var(--muted-foreground)" />
|
||||||
|
) : null}
|
||||||
|
{actuallyFailed && (
|
||||||
|
<AlertTriangle color="var(--destructive)" size={12} />
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
{isValidURL ? (
|
)}
|
||||||
<Media link={message.Content} />
|
|
||||||
) : (
|
{decryptedContent ? (
|
||||||
<Text value={message.Content} />
|
<MessageContextMenu
|
||||||
)}
|
content={decryptedContent}
|
||||||
</div>
|
messageId={message.SendTime}
|
||||||
</>
|
>
|
||||||
</div>
|
{isValidURL ? (
|
||||||
</MessageContextMenu>
|
<Media link={decryptedContent} />
|
||||||
|
) : (
|
||||||
|
<Text value={decryptedContent} />
|
||||||
|
)}
|
||||||
|
</MessageContextMenu>
|
||||||
|
) : decryptionFailed ? (
|
||||||
|
<Text value="Failed to decrypt message" />
|
||||||
|
) : (
|
||||||
|
<Skeleton
|
||||||
|
className={`w-25 h-5 ${grouped ? "my-1" : "mb-1"} rounded-sm!`}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
</div>
|
||||||
) : (
|
) : (
|
||||||
"Loading"
|
<Skeleton className="h-10 w-30" />
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue