Skip to content

Commit 237bc48

Browse files
safipatelsafipatel
committed
fixed chat config, fixed chat latex render and bubble size
1 parent 9d6e938 commit 237bc48

File tree

8 files changed

+369
-164
lines changed

8 files changed

+369
-164
lines changed

‎app/chatrooms/[chatroomId]/components/message-area.tsx‎

Lines changed: 85 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,9 @@ import { toast } from "sonner";
2424
import Logo from "@/shared/components/Logo";
2525
import { Separator } from "@/shared/components/ui/separator";
2626
import { notFound } from "next/navigation";
27-
import { MathJax, MathJaxContext } from "better-react-mathjax";
27+
import "katex/dist/katex.min.css";
28+
import rehypeKatex from "rehype-katex";
29+
import remarkMath from "remark-math";
2830

2931
interface Message extends Tables<"Messages"> {
3032
user_id: string;
@@ -242,95 +244,93 @@ const MessageArea = ({
242244
}
243245
/>
244246
{/* <div className="mt-10 flex w-11/12 flex-col place-self-center rounded border p-4 text-gray-800 shadow dark:text-white"> */}
245-
<MathJaxContext>
246-
<div className="flex-1 overflow-auto">
247-
<ChatMessageList smooth className="max-[500px]:px-0">
248-
{messages.flatMap((message) => {
249-
const variant =
250-
message.user_id === userAndClassData.userData.id
251-
? "sent"
252-
: "received";
247+
<div className="flex-1 overflow-auto">
248+
<ChatMessageList smooth className="max-[500px]:px-0">
249+
{messages.flatMap((message) => {
250+
const variant =
251+
message.user_id === userAndClassData.userData.id
252+
? "sent"
253+
: "received";
253254

254-
// Format the timestamp
255-
const messageTime = new Date(message.created_at);
256-
const formattedTime = messageTime.toLocaleTimeString("en-US", {
257-
hour: "numeric",
258-
minute: "numeric",
259-
});
260-
const formattedDay = new Date(
261-
message.created_at
262-
).toLocaleDateString("en-US", {
263-
month: "short",
264-
day: "numeric",
265-
year: "numeric",
266-
});
267-
const elements = [];
268-
if (
269-
!previousMessageTime ||
270-
isDifferentDay(messageTime, previousMessageTime)
271-
) {
272-
elements.push(
273-
<div
274-
key={messageTime.getMilliseconds()}
275-
className="flex items-center justify-center gap-4"
276-
>
277-
<Separator className="w-[20%]" />
278-
<span className="text-muted-foreground">
279-
{formattedDay}
280-
</span>
281-
<Separator className="w-[20%]" />
282-
</div>
283-
);
284-
}
285-
previousMessageTime = messageTime;
255+
// Format the timestamp
256+
const messageTime = new Date(message.created_at);
257+
const formattedTime = messageTime.toLocaleTimeString("en-US", {
258+
hour: "numeric",
259+
minute: "numeric",
260+
});
261+
const formattedDay = new Date(
262+
message.created_at
263+
).toLocaleDateString("en-US", {
264+
month: "short",
265+
day: "numeric",
266+
year: "numeric",
267+
});
268+
const elements = [];
269+
if (
270+
!previousMessageTime ||
271+
isDifferentDay(messageTime, previousMessageTime)
272+
) {
286273
elements.push(
287-
<ChatBubble
288-
key={message.id}
289-
variant={variant}
290-
className="max-w-[80%]"
274+
<div
275+
key={messageTime.getMilliseconds()}
276+
className="flex items-center justify-center gap-4"
291277
>
292-
{!message?.member_id ? (
293-
<AIAvatar />
294-
) : (
295-
<ChatBubbleAvatar src={message.avatar_url!} fallback="Me" />
296-
)}
297-
<div className="flex flex-col">
298-
<div className="mb-1 flex items-center gap-2 text-xs font-medium text-muted-foreground">
299-
{message?.member_id
300-
? (message.full_name ?? "Unknown")
301-
: AIFullNameFormatted("AI Assistant")}{" "}
302-
• {formattedTime}
303-
{message.is_ask && (
304-
<span className="inline-flex items-center rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-800 dark:bg-purple-900 dark:text-purple-200">
305-
Ask LLM
306-
</span>
307-
)}
308-
</div>
309-
<ChatBubbleMessage className="p-2" variant={variant}>
310-
<MathJax
311-
dynamic
312-
hideUntilTypeset="every"
313-
className="prose w-fit !whitespace-normal font-medium marker:text-inherit"
314-
>
315-
<ReactMarkdown>
316-
{cleanMessage(message.content)}
317-
</ReactMarkdown>
318-
</MathJax>
319-
</ChatBubbleMessage>
320-
</div>
321-
</ChatBubble>
278+
<Separator className="w-[20%]" />
279+
<span className="text-muted-foreground">{formattedDay}</span>
280+
<Separator className="w-[20%]" />
281+
</div>
322282
);
323-
return elements;
324-
})}
325-
{isLoading && (
326-
<ChatBubble variant="received">
327-
<AIAvatar />
328-
<ChatBubbleMessage isLoading variant="received" />
283+
}
284+
previousMessageTime = messageTime;
285+
elements.push(
286+
<ChatBubble
287+
key={message.id}
288+
variant={variant}
289+
className="max-w-[80%]"
290+
>
291+
{!message?.member_id ? (
292+
<AIAvatar />
293+
) : (
294+
<ChatBubbleAvatar src={message.avatar_url!} fallback="Me" />
295+
)}
296+
<div className="flex flex-col">
297+
<div className="mb-1 flex items-center gap-2 text-xs font-medium text-muted-foreground">
298+
{message?.member_id
299+
? (message.full_name ?? "Unknown")
300+
: AIFullNameFormatted("AI Assistant")}{" "}
301+
• {formattedTime}
302+
{message.is_ask && (
303+
<span className="inline-flex items-center rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-800 dark:bg-purple-900 dark:text-purple-200">
304+
Ask LLM
305+
</span>
306+
)}
307+
</div>
308+
<ChatBubbleMessage
309+
className="prose w-fit max-w-[50vw] !whitespace-normal p-2 font-medium marker:text-inherit"
310+
variant={variant}
311+
>
312+
<ReactMarkdown
313+
remarkPlugins={[
314+
[remarkMath, { singleDollarTextMath: false }],
315+
]}
316+
rehypePlugins={[rehypeKatex]}
317+
>
318+
{cleanMessage(message.content)}
319+
</ReactMarkdown>
320+
</ChatBubbleMessage>
321+
</div>
329322
</ChatBubble>
330-
)}
331-
</ChatMessageList>
332-
</div>
333-
</MathJaxContext>
323+
);
324+
return elements;
325+
})}
326+
{isLoading && (
327+
<ChatBubble variant="received">
328+
<AIAvatar />
329+
<ChatBubbleMessage isLoading variant="received" />
330+
</ChatBubble>
331+
)}
332+
</ChatMessageList>
333+
</div>
334334
<div className="relative mt-4 flex items-center justify-between gap-2 rounded-lg border bg-background p-1">
335335
<ChatInput
336336
value={messageBoxValue}

‎app/classrooms/[classroomId]/chat/MessageBox.tsx‎

Lines changed: 49 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,9 @@ import { toast } from "sonner";
1919
import Logo from "@/shared/components/Logo";
2020
import { SendIcon } from "lucide-react";
2121
import ReactMarkdown from "react-markdown";
22-
import { MathJax, MathJaxContext } from "better-react-mathjax";
22+
import "katex/dist/katex.min.css";
23+
import rehypeKatex from "rehype-katex";
24+
import remarkMath from "remark-math";
2325

2426
interface MessageBoxProps {
2527
chatClient: ChatClientWithSession;
@@ -73,51 +75,50 @@ export default function MessageBox({
7375
"size-[6vmin] h-fit min-w-10 place-self-center fill-foreground stroke-foreground stroke-[10px]"
7476
}
7577
/>
76-
<MathJaxContext>
77-
<div className="flex-1 overflow-auto">
78-
<ChatMessageList smooth className="max-[500px]:px-0">
79-
{messages.map((msg, index) => (
80-
<ChatBubble
81-
key={index}
82-
variant={msg.role === "assistant" ? "received" : "sent"}
83-
className="max-w-[80%]"
84-
>
85-
{msg.role === "assistant" ? (
86-
<AIAvatar />
87-
) : (
88-
<ChatBubbleAvatar fallback="Me" />
89-
)}
90-
<div className="flex flex-col">
91-
<span className="mx-2">
92-
{msg?.created_at &&
93-
getTimeDate(msg.created_at) &&
94-
getTimeDate(msg.created_at)}
95-
</span>
78+
<div className="flex-1 overflow-auto">
79+
<ChatMessageList smooth className="max-[500px]:px-0">
80+
{messages.map((msg, index) => (
81+
<ChatBubble
82+
key={index}
83+
variant={msg.role === "assistant" ? "received" : "sent"}
84+
className="max-w-[80%]"
85+
>
86+
{msg.role === "assistant" ? (
87+
<AIAvatar />
88+
) : (
89+
<ChatBubbleAvatar fallback="Me" />
90+
)}
91+
<div className="flex flex-col">
92+
<span className="mx-2">
93+
{msg?.created_at &&
94+
getTimeDate(msg.created_at) &&
95+
getTimeDate(msg.created_at)}
96+
</span>
9697

97-
<ChatBubbleMessage
98-
variant={msg.role === "assistant" ? "received" : "sent"}
99-
className="p-2"
98+
<ChatBubbleMessage
99+
variant={msg.role === "assistant" ? "received" : "sent"}
100+
className="prose w-fit max-w-[50vw] !whitespace-normal p-2 font-medium marker:text-inherit"
101+
>
102+
<ReactMarkdown
103+
remarkPlugins={[
104+
[remarkMath, { singleDollarTextMath: false }],
105+
]}
106+
rehypePlugins={[rehypeKatex]}
100107
>
101-
<MathJax
102-
dynamic
103-
hideUntilTypeset="every"
104-
className="prose w-fit !whitespace-normal font-medium marker:text-inherit"
105-
>
106-
<ReactMarkdown>{cleanMessage(msg.content)}</ReactMarkdown>
107-
</MathJax>
108-
</ChatBubbleMessage>
109-
</div>
110-
</ChatBubble>
111-
))}
112-
{isLoading && (
113-
<ChatBubble variant="received">
114-
<AIAvatar />
115-
<ChatBubbleMessage isLoading variant="received" />
116-
</ChatBubble>
117-
)}
118-
</ChatMessageList>
119-
</div>
120-
</MathJaxContext>
108+
{cleanMessage(msg.content)}
109+
</ReactMarkdown>
110+
</ChatBubbleMessage>
111+
</div>
112+
</ChatBubble>
113+
))}
114+
{isLoading && (
115+
<ChatBubble variant="received">
116+
<AIAvatar />
117+
<ChatBubbleMessage isLoading variant="received" />
118+
</ChatBubble>
119+
)}
120+
</ChatMessageList>
121+
</div>
121122
<div className="flex w-full items-center justify-between gap-3 rounded-lg border bg-background p-1">
122123
<ChatInput
123124
value={value}
@@ -142,3 +143,7 @@ function getTimeDate(created_at_seconds: number) {
142143
minute: "numeric",
143144
});
144145
}
146+
147+
// function escapeLatex(message: string){
148+
// return message.replace("$","\\$").replace("\\\\(", "$").replace("\\\\)", "$").replace("\\$\\$","$$")
149+
// }

‎app/classrooms/_components/join-dialog.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export default function JoinDialog({
3333

3434
const joinButtonCallback = () => {
3535
if (joinValue.length == 8) {
36-
router.push(`/classrooms/join/${joinValue}`);
36+
router.push(`/classrooms/join/${joinValue.toLowerCase()}`);
3737
setIsDialogOpen(false);
3838
}
3939
};

‎app/classrooms/join/[code]/route.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export async function GET(
1717
const { data: classroom, error: classroomError } = await supabase
1818
.from("Classrooms")
1919
.select("*")
20-
.eq("join_code", code)
20+
.eq("join_code", code.toLowerCase())
2121
.single();
2222

2323
if (classroomError || !classroom) {

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,18 +33,21 @@
3333
"@supabase/ssr": "^0.5.2",
3434
"@supabase/supabase-js": "^2.49.1",
3535
"@tanstack/react-table": "^8.21.2",
36-
"better-react-mathjax": "^2.3.0",
3736
"class-variance-authority": "^0.7.1",
3837
"clsx": "^2.1.1",
3938
"cmdk": "^1.1.1",
4039
"input-otp": "^1.4.2",
40+
"katex": "^0.16.22",
4141
"lucide-react": "^0.483.0",
4242
"motion": "^12.6.3",
4343
"next": "15.1.7",
4444
"next-themes": "^0.4.6",
4545
"react": "^19.0.0",
4646
"react-dom": "^19.0.0",
4747
"react-markdown": "^10.1.0",
48+
"rehype-katex": "^7.0.1",
49+
"rehype-mathjax": "^7.1.0",
50+
"remark-math": "^6.0.0",
4851
"sonner": "^2.0.3",
4952
"tailwind-merge": "^3.0.2",
5053
"tailwindcss-animate": "^1.0.7"

0 commit comments

Comments
 (0)