Skip to content

Commit 1db19c4

Browse files
chenxin-yansafipatel
chenxin-yan
and
safipatel
authored
Improve prompt for personal and collaborative chat (#67)
Co-authored-by: Safi Patel <[email protected]>
1 parent a0945ac commit 1db19c4

File tree

12 files changed

+313
-186
lines changed

12 files changed

+313
-186
lines changed

‎.vscode/settings.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
"cSpell.words": [
33
"bitnami",
44
"Chatrooms",
5+
"katex",
6+
"mathjax",
57
"pipelinerun",
68
"Ragflow",
79
"Sonner",

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

Lines changed: 86 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ 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";
2728

2829
interface Message extends Tables<"Messages"> {
2930
user_id: string;
@@ -234,95 +235,102 @@ const MessageArea = ({
234235
}
235236
let previousMessageTime: Date | undefined = undefined;
236237
return (
237-
<div className="mt-5 flex min-h-[400px] w-11/12 flex-1 flex-col place-self-center rounded border p-4 text-gray-800 shadow dark:text-white max-[500px]:w-full">
238+
<div className="mt-5 flex min-h-[400px] w-11/12 flex-1 flex-col place-self-center rounded border bg-background/95 p-4 text-gray-800 shadow dark:text-white max-[500px]:w-full">
238239
<Logo
239240
className={
240241
"size-[6vmin] h-fit min-w-10 place-self-center fill-foreground stroke-foreground stroke-[10px]"
241242
}
242243
/>
243244
{/* <div className="mt-10 flex w-11/12 flex-col place-self-center rounded border p-4 text-gray-800 shadow dark:text-white"> */}
244-
<div className="flex-1 overflow-auto">
245-
<ChatMessageList smooth className="max-[500px]:px-0">
246-
{messages.flatMap((message) => {
247-
const variant =
248-
message.user_id === userAndClassData.userData.id
249-
? "sent"
250-
: "received";
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";
251253

252-
// Format the timestamp
253-
const messageTime = new Date(message.created_at);
254-
const formattedTime = messageTime.toLocaleTimeString("en-US", {
255-
hour: "numeric",
256-
minute: "numeric",
257-
});
258-
const formattedDay = new Date(
259-
message.created_at
260-
).toLocaleDateString("en-US", {
261-
month: "short",
262-
day: "numeric",
263-
year: "numeric",
264-
});
265-
const elements = [];
266-
if (
267-
!previousMessageTime ||
268-
isDifferentDay(messageTime, previousMessageTime)
269-
) {
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;
270286
elements.push(
271-
<div
272-
key={messageTime.getMilliseconds()}
273-
className="flex items-center justify-center gap-4"
287+
<ChatBubble
288+
key={message.id}
289+
variant={variant}
290+
className="max-w-[80%]"
274291
>
275-
<Separator className="w-[20%]" />
276-
<span className="text-muted-foreground">{formattedDay}</span>
277-
<Separator className="w-[20%]" />
278-
</div>
279-
);
280-
}
281-
previousMessageTime = messageTime;
282-
elements.push(
283-
<ChatBubble
284-
key={message.id}
285-
variant={variant}
286-
className="max-w-[80%]"
287-
>
288-
{!message?.member_id ? (
289-
<AIAvatar />
290-
) : (
291-
<ChatBubbleAvatar src={message.avatar_url!} fallback="Me" />
292-
)}
293-
<div className="flex flex-col">
294-
<div className="mb-1 flex items-center gap-2 text-xs font-medium text-muted-foreground">
295-
{message?.member_id
296-
? (message.full_name ?? "Unknown")
297-
: AIFullNameFormatted("AI Assistant")}{" "}
298-
• {formattedTime}
299-
{message.is_ask && (
300-
<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">
301-
Ask LLM
302-
</span>
303-
)}
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>
304320
</div>
305-
<ChatBubbleMessage
306-
className="prose w-fit !whitespace-normal p-2 font-medium marker:text-inherit"
307-
variant={variant}
308-
>
309-
<ReactMarkdown>
310-
{cleanMessage(message.content)}
311-
</ReactMarkdown>
312-
</ChatBubbleMessage>
313-
</div>
321+
</ChatBubble>
322+
);
323+
return elements;
324+
})}
325+
{isLoading && (
326+
<ChatBubble variant="received">
327+
<AIAvatar />
328+
<ChatBubbleMessage isLoading variant="received" />
314329
</ChatBubble>
315-
);
316-
return elements;
317-
})}
318-
{isLoading && (
319-
<ChatBubble variant="received">
320-
<AIAvatar />
321-
<ChatBubbleMessage isLoading variant="received" />
322-
</ChatBubble>
323-
)}
324-
</ChatMessageList>
325-
</div>
330+
)}
331+
</ChatMessageList>
332+
</div>
333+
</MathJaxContext>
326334
<div className="relative mt-4 flex items-center justify-between gap-2 rounded-lg border bg-background p-1">
327335
<ChatInput
328336
value={messageBoxValue}

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

Lines changed: 48 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ 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";
2223

2324
interface MessageBoxProps {
2425
chatClient: ChatClientWithSession;
@@ -64,52 +65,60 @@ export default function MessageBox({
6465
};
6566
setMessages((prev) => [...prev, assistantMessage]);
6667
}
67-
console.log(messages);
68+
// console.log(messages);
6869
return (
69-
<div className="mt-3 flex min-h-[400px] w-11/12 flex-1 flex-col place-self-center rounded border p-4 text-gray-800 shadow dark:text-white max-[500px]:w-full">
70+
<div className="mt-3 flex min-h-[400px] w-11/12 flex-1 flex-col place-self-center rounded border bg-background/95 p-4 text-gray-800 shadow dark:text-white max-[500px]:w-full">
7071
<Logo
7172
className={
7273
"size-[6vmin] h-fit min-w-10 place-self-center fill-foreground stroke-foreground stroke-[10px]"
7374
}
7475
/>
75-
<div className="flex-1 overflow-auto">
76-
<ChatMessageList smooth className="max-[500px]:px-0">
77-
{messages.map((msg, index) => (
78-
<ChatBubble
79-
key={index}
80-
variant={msg.role === "assistant" ? "received" : "sent"}
81-
className="max-w-[80%]"
82-
>
83-
{msg.role === "assistant" ? (
84-
<AIAvatar />
85-
) : (
86-
<ChatBubbleAvatar fallback="Me" />
87-
)}
88-
<div className="flex flex-col">
89-
<span className="mx-2">
90-
{msg?.created_at &&
91-
getTimeDate(msg.created_at) &&
92-
getTimeDate(msg.created_at)}
93-
</span>
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>
9496

95-
<ChatBubbleMessage
96-
variant={msg.role === "assistant" ? "received" : "sent"}
97-
className="prose w-fit !whitespace-normal p-2 font-medium marker:text-inherit"
98-
>
99-
<ReactMarkdown>{cleanMessage(msg.content)}</ReactMarkdown>
100-
</ChatBubbleMessage>
101-
</div>
102-
</ChatBubble>
103-
))}
104-
{isLoading && (
105-
<ChatBubble variant="received">
106-
<AIAvatar />
107-
<ChatBubbleMessage isLoading variant="received" />
108-
</ChatBubble>
109-
)}
110-
</ChatMessageList>
111-
</div>
112-
<div className="flex w-full items-center justify-between gap-2 rounded-lg border bg-background p-1">
97+
<ChatBubbleMessage
98+
variant={msg.role === "assistant" ? "received" : "sent"}
99+
className="p-2"
100+
>
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>
121+
<div className="flex w-full items-center justify-between gap-3 rounded-lg border bg-background p-1">
113122
<ChatInput
114123
value={value}
115124
onChange={(e) => setValue(e.target.value)}

‎app/classrooms/page.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@ import {
3333
MessagesSquareIcon,
3434
UserPlus,
3535
Users,
36-
FileText,
3736
} from "lucide-react";
3837
import { Button } from "@shared/components/ui/button";
3938
import SaveClassroomDialog from "./_components/saveClassroomDialog";
@@ -288,7 +287,7 @@ function ClassroomList({ userContext }: { userContext: UserContextType }) {
288287
/>
289288
)}
290289

291-
<TooltipUtil
290+
{/* <TooltipUtil
292291
trigger={
293292
<Button type="button" variant={"ghost"} size={"iconLg"} asChild>
294293
<Link href={`/classrooms/${classroom.id}/augment`} passHref>
@@ -297,7 +296,7 @@ function ClassroomList({ userContext }: { userContext: UserContextType }) {
297296
</Button>
298297
}
299298
content={"Augment Notes"}
300-
/>
299+
/> */}
301300
</div>
302301
{isAdmin ? (
303302
<TooltipUtil
@@ -363,8 +362,8 @@ function ClassroomList({ userContext }: { userContext: UserContextType }) {
363362
<ul className="my-2 space-y-2">
364363
{archClassrooms.map((cm) => (
365364
<li
366-
key={cm.name}
367-
className="flex w-full justify-between rounded-md border p-3 text-xl"
365+
key={`${cm.name}_${cm.id}`}
366+
className="flex w-full justify-between rounded-md border bg-background p-3 text-xl"
368367
>
369368
<div>
370369
{cm.name}
@@ -463,7 +462,7 @@ function ClassroomList({ userContext }: { userContext: UserContextType }) {
463462
.filter((x) => !x.archived)
464463
.map((classroom) => (
465464
<ClassroomCard
466-
key={classroom.id}
465+
key={`${classroom.name}_${classroom.id}`}
467466
classroom={classroom}
468467
isAdmin={true}
469468
/>
@@ -482,7 +481,7 @@ function ClassroomList({ userContext }: { userContext: UserContextType }) {
482481
.filter((x) => !x.archived)
483482
.map((classroom) => (
484483
<ClassroomCard
485-
key={classroom.id}
484+
key={`${classroom.name}_${classroom.id}`}
486485
classroom={classroom}
487486
isAdmin={false}
488487
/>

0 commit comments

Comments
 (0)