Improved protocol
This commit is contained in:
@@ -19,112 +19,151 @@ import { UserProfile } from "@/hooks/get-user";
|
||||
import ProfilePicture from "../ProfilePicture";
|
||||
import App from "@/types/app";
|
||||
import { Textarea } from "../ui/textarea";
|
||||
import {
|
||||
ContextMenu,
|
||||
ContextMenuCheckboxItem,
|
||||
ContextMenuContent,
|
||||
ContextMenuItem,
|
||||
ContextMenuLabel,
|
||||
ContextMenuRadioGroup,
|
||||
ContextMenuRadioItem,
|
||||
ContextMenuSeparator,
|
||||
ContextMenuShortcut,
|
||||
ContextMenuSub,
|
||||
ContextMenuSubContent,
|
||||
ContextMenuSubTrigger,
|
||||
ContextMenuTrigger,
|
||||
} from "@/components/ui/context-menu";
|
||||
import { ClientMessage } from "@/types/protocol";
|
||||
|
||||
function MessageContainer({ message, app }: { message: Message; app: App }) {
|
||||
function MessageContainer({
|
||||
message,
|
||||
app,
|
||||
sendRequest,
|
||||
}: {
|
||||
message: Message;
|
||||
app: App;
|
||||
sendRequest: (content: ClientMessage) => void;
|
||||
}) {
|
||||
const [profile, setProfile] = useState<UserProfile | null>();
|
||||
|
||||
app.getUserById(message.from).then(setProfile);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3 rounded-lg p-4 hover:bg-accent">
|
||||
<div className="flex gap-2">
|
||||
{/* <div className="w-8 h-8 rounded-full bg-gray-400" /> */}
|
||||
<ProfilePicture
|
||||
url={profile?.avatar_url}
|
||||
name={profile?.display_name || message.from}
|
||||
/>
|
||||
<div className="flex flex-col flex-1">
|
||||
<span className="font-bold flex gap-1 items-center">
|
||||
{profile?.display_name || message.from}
|
||||
<ContextMenu>
|
||||
<ContextMenuTrigger asChild>
|
||||
<div className="flex flex-col gap-3 rounded-lg p-4 hover:bg-accent">
|
||||
<div className="flex gap-2">
|
||||
{/* <div className="w-8 h-8 rounded-full bg-gray-400" /> */}
|
||||
<ProfilePicture
|
||||
url={profile?.avatar_url}
|
||||
name={profile?.display_name || message.from}
|
||||
/>
|
||||
<div className="flex flex-col flex-1">
|
||||
<span className="font-bold flex gap-1 items-center">
|
||||
{profile?.display_name || message.from}
|
||||
|
||||
<p className="text-neutral-500 text-xs">
|
||||
{isToday(message.timestamp * 1000)
|
||||
? format(message.timestamp * 1000, "p")
|
||||
: isYesterday(message.timestamp * 1000)
|
||||
? "Yesterday, " + format(message.timestamp * 1000, "p")
|
||||
: format(message.timestamp * 1000, "PP, p")}
|
||||
</p>
|
||||
</span>
|
||||
<p className="text-neutral-500 text-xs">
|
||||
{isToday(message.timestamp * 1000)
|
||||
? format(message.timestamp * 1000, "p")
|
||||
: isYesterday(message.timestamp * 1000)
|
||||
? "Yesterday, " + format(message.timestamp * 1000, "p")
|
||||
: format(message.timestamp * 1000, "PP, p")}
|
||||
</p>
|
||||
</span>
|
||||
|
||||
<div className="text-foreground/85 flex flex-col break-words whitespace-pre-wrap">
|
||||
{message.contents.split("\n\n").map((line, index) => (
|
||||
<div key={index} className="h-max break-words">
|
||||
{index > 0 && <br />}
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm]}
|
||||
components={{
|
||||
h1: ({ node, ...props }) => (
|
||||
<h1
|
||||
className="text-3xl font-bold my-2 break-words"
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
h2: ({ node, ...props }) => (
|
||||
<h2
|
||||
className="text-2xl font-bold my-2 break-words"
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
h3: ({ node, ...props }) => (
|
||||
<h3
|
||||
className="text-xl font-bold my-2 break-words"
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
h4: ({ node, ...props }) => (
|
||||
<h4
|
||||
className="text-lg font-bold my-2 break-words"
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
h5: ({ node, ...props }) => (
|
||||
<h5
|
||||
className="text-base font-bold my-2 break-words"
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
ul: ({ node, ...props }) => (
|
||||
<ul
|
||||
className="list-disc list-inside my-2 break-words"
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
ol: ({ node, ...props }) => (
|
||||
<ol
|
||||
className="list-decimal list-inside my-2 break-words"
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
a: ({ node, ...props }) => (
|
||||
<a
|
||||
className="text-accent-foreground underline underline-offset-2 break-all"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
>
|
||||
{line}
|
||||
</ReactMarkdown>
|
||||
<div className="text-foreground/85 flex flex-col break-words whitespace-pre-wrap">
|
||||
{message.contents.split("\n\n").map((line, index) => (
|
||||
<div key={index} className="h-max break-words">
|
||||
{index > 0 && <br />}
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm]}
|
||||
components={{
|
||||
h1: ({ node, ...props }) => (
|
||||
<h1
|
||||
className="text-3xl font-bold my-2 break-words"
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
h2: ({ node, ...props }) => (
|
||||
<h2
|
||||
className="text-2xl font-bold my-2 break-words"
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
h3: ({ node, ...props }) => (
|
||||
<h3
|
||||
className="text-xl font-bold my-2 break-words"
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
h4: ({ node, ...props }) => (
|
||||
<h4
|
||||
className="text-lg font-bold my-2 break-words"
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
h5: ({ node, ...props }) => (
|
||||
<h5
|
||||
className="text-base font-bold my-2 break-words"
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
ul: ({ node, ...props }) => (
|
||||
<ul
|
||||
className="list-disc list-inside my-2 break-words"
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
ol: ({ node, ...props }) => (
|
||||
<ol
|
||||
className="list-decimal list-inside my-2 break-words"
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
a: ({ node, ...props }) => (
|
||||
<a
|
||||
className="text-accent-foreground underline underline-offset-2 break-all"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
>
|
||||
{line}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ContextMenuTrigger>
|
||||
<ContextMenuContent className="w-52">
|
||||
<ContextMenuItem inset>Copy message</ContextMenuItem>
|
||||
<ContextMenuItem
|
||||
inset
|
||||
variant="destructive"
|
||||
onClick={() => {}}
|
||||
disabled={message.from !== app.profile?.id}
|
||||
>
|
||||
Delete
|
||||
</ContextMenuItem>
|
||||
</ContextMenuContent>
|
||||
</ContextMenu>
|
||||
);
|
||||
}
|
||||
|
||||
export default function MessageBox({
|
||||
app,
|
||||
sendMessage,
|
||||
sendRequest,
|
||||
channelName,
|
||||
channelIcon,
|
||||
messages,
|
||||
}: {
|
||||
app: App;
|
||||
sendMessage: (m: string) => void;
|
||||
sendRequest: (req: ClientMessage) => void;
|
||||
channelName?: string;
|
||||
channelIcon?: string;
|
||||
messages: Message[];
|
||||
@@ -132,6 +171,21 @@ export default function MessageBox({
|
||||
const [text, setText] = useState("");
|
||||
const inputRef = useRef<any>(null);
|
||||
|
||||
const sendMessage = () => {
|
||||
if (!app.currentChannel) {
|
||||
return;
|
||||
}
|
||||
|
||||
sendRequest({
|
||||
type: "send_message",
|
||||
params: {
|
||||
channel_id: app.currentChannel?.id,
|
||||
contents: text.trim(),
|
||||
},
|
||||
});
|
||||
setText("");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-svh w-full max-h-svh flex flex-col pb-5 pl-5 gap-5">
|
||||
{channelName && (
|
||||
@@ -156,7 +210,12 @@ export default function MessageBox({
|
||||
)}
|
||||
<div className="mt-auto flex flex-col-reverse overflow-y-scroll">
|
||||
{messages.toReversed().map((msg) => (
|
||||
<MessageContainer key={msg.id} message={msg} app={app} />
|
||||
<MessageContainer
|
||||
key={msg.id}
|
||||
message={msg}
|
||||
app={app}
|
||||
sendRequest={sendRequest}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<footer className="flex gap-3 pr-5 w-full h-max">
|
||||
@@ -183,8 +242,7 @@ export default function MessageBox({
|
||||
if (e.key === "Enter") {
|
||||
if (!e.shiftKey) {
|
||||
e.preventDefault();
|
||||
sendMessage(text);
|
||||
setText("");
|
||||
sendMessage();
|
||||
}
|
||||
}
|
||||
}}
|
||||
@@ -207,8 +265,7 @@ export default function MessageBox({
|
||||
}
|
||||
}, 10);
|
||||
} else {
|
||||
sendMessage(text.trim());
|
||||
setText("");
|
||||
sendMessage();
|
||||
}
|
||||
}
|
||||
}}
|
||||
@@ -237,8 +294,7 @@ export default function MessageBox({
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => {
|
||||
sendMessage(text.trim());
|
||||
setText("");
|
||||
sendMessage();
|
||||
}}
|
||||
>
|
||||
<SendIcon />
|
||||
|
||||
Reference in New Issue
Block a user