minor updates to study notes ui

Gerosullivan · Oct 9, 2024 · 1a238c5 · 1a238c5
1 parent ddf165c
commit 1a238c5
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 61 deletions.
diff --git a/.gitignore b/.gitignore
@@ -54,3 +54,5 @@ workbox-*.js.map
 /playwright/.cache/
 
 playwright/.auth
+
+*.swp
diff --git a/components/chat/chat-helpers/.index.ts.swp b/components/chat/chat-helpers/.index.ts.swp
diff --git a/components/chat/chat-hooks/use-chat-handler.tsx b/components/chat/chat-hooks/use-chat-handler.tsx
@@ -170,7 +170,8 @@ ${selectedWorkspace?.instructions || ""}
     }
 
     let content
-    if (assistantMessage === "{{topicDescription}}") {
+    const isTopicDescription = assistantMessage === "{{topicDescription}}"
+    if (isTopicDescription) {
       content = topicDescription
     } else {
       content = assistantMessage
@@ -180,7 +181,8 @@ ${selectedWorkspace?.instructions || ""}
       {
         id: uuidv4(),
         content,
-        role: "assistant"
+        role: "assistant",
+        name: isTopicDescription ? "topic_description" : "Mentor"
       }
     ])
   }

diff --git a/components/messages/message.tsx b/components/messages/message.tsx
@@ -22,53 +22,66 @@ export const Message: FC<MessageProps> = ({ message, isLast }) => {
     return window.atob(base64)
   }
 
+  const isTopicDescription = message.name === "topic_description"
+
   return (
     <motion.div initial={{ y: 5, opacity: 0 }} animate={{ y: 0, opacity: 1 }}>
       <div
         className={cn(
           "flex w-full justify-center",
-          message.role === "user" ? "" : "bg-secondary"
+          message.role === "user" ? "" : "bg-secondary",
+          isTopicDescription && "bg-orange-50 p-4 shadow-md dark:bg-gray-800"
         )}
       >
         <div className="relative flex w-full flex-col p-6 sm:w-[550px] sm:px-0 md:w-[650px] lg:w-[650px] xl:w-[700px]">
           <div className="space-y-3">
-            {message.role === "system" ? (
-              <div className="flex items-center space-x-4">
-                <IconPencil
-                  className="border-primary bg-primary text-secondary rounded border-DEFAULT p-1"
-                  size={ICON_SIZE}
-                />
-
-                <div className="text-lg font-semibold">Prompt</div>
-              </div>
-            ) : (
-              <div className="flex items-center space-x-3">
-                {message.role === "assistant" ? (
-                  <IconSparkles size={ICON_SIZE} />
-                ) : profile?.image_url ? (
-                  <Image
-                    unoptimized
-                    className={`size-[32px] rounded`}
-                    src={profile?.image_url}
-                    height={32}
-                    width={32}
-                    alt="user image"
-                  />
+            {!isTopicDescription && (
+              <>
+                {message.role === "system" ? (
+                  <div className="flex items-center space-x-4">
+                    <IconPencil
+                      className="border-primary bg-primary text-secondary rounded border-DEFAULT p-1"
+                      size={ICON_SIZE}
+                    />
+                    <div className="text-lg font-semibold">Prompt</div>
+                  </div>
                 ) : (
-                  <IconMoodSmile
-                    className="bg-primary text-secondary border-primary rounded border-DEFAULT p-1"
-                    size={ICON_SIZE}
-                  />
+                  <div className="flex items-center space-x-3">
+                    {message.role === "assistant" ? (
+                      <IconSparkles size={ICON_SIZE} />
+                    ) : profile?.image_url ? (
+                      <Image
+                        unoptimized
+                        className={`size-[32px] rounded`}
+                        src={profile?.image_url}
+                        height={32}
+                        width={32}
+                        alt="user image"
+                      />
+                    ) : (
+                      <IconMoodSmile
+                        className="bg-primary text-secondary border-primary rounded border-DEFAULT p-1"
+                        size={ICON_SIZE}
+                      />
+                    )}
+                    <div className="font-semibold">
+                      {message.role === "assistant"
+                        ? "Mentor"
+                        : (profile?.display_name ?? profile?.username)}
+                    </div>
+                  </div>
                 )}
-
-                <div className="font-semibold">
-                  {message.role === "assistant"
-                    ? "Mentor"
-                    : (profile?.display_name ?? profile?.username)}
-                </div>
-              </div>
+              </>
             )}
-            <MessageMarkdown content={message.content} />
+            <div
+              className={cn(
+                "prose dark:prose-invert max-w-none",
+                isTopicDescription &&
+                  "font-serif text-orange-950 dark:text-orange-200"
+              )}
+            >
+              <MessageMarkdown content={message.content} />
+            </div>
 
             {message.experimental_attachments &&
               message.experimental_attachments.length > 0 && (

diff --git a/lib/server/recall-show-hints-handler.ts b/lib/server/recall-show-hints-handler.ts
@@ -1,5 +1,6 @@
 import { LanguageModel, streamText, convertToCoreMessages } from "ai"
 import { StudyState } from "@/lib/studyStates"
+
 export async function handleRecallShowHints(
   defaultModel: LanguageModel,
   studySheet: string,
@@ -15,8 +16,6 @@ export async function handleRecallShowHints(
       {
         role: "system",
         content: `You are helpful, friendly study mentor. 
-  ${systemContext}
-  You are a helpful, friendly study mentor.
 ${systemContext}
 
 CRITICAL INSTRUCTION: NEVER PROVIDE ANSWERS TO FORGOTTEN FACTS. ONLY GIVE HINTS AND CLUES.
@@ -27,6 +26,7 @@ Your task is to generate hints for forgotten facts without revealing answers. Fo
 2. NEVER give away the actual answer or any part of it.
 3. Use general terms, analogies, or related concepts to create hints.
 4. If you catch yourself about to reveal an answer, STOP and rephrase as a hint.
+5. Conclude with a directive for the student to attempt answering the hints before moving on.
 
 Examples of good hints:
 - For a historical date: "This event occurred in the same decade as [another well-known event]."
@@ -64,7 +64,7 @@ Hint #1: [Your hint for forgotten fact 1]
 Hint #2: [Your hint for forgotten fact 2]
 ...
 
-Remember: Your goal is to help the student remember on their own, not to provide the information directly.`
+6. After providing all hints, conclude with a paragraph instructing the student to attempt answering the hints before moving on. Do not use encouraging or cheery language in this conclusion.`
       }
     ])
   })

diff --git a/lib/studyStates.ts b/lib/studyStates.ts
@@ -15,7 +15,7 @@ export type StudyState =
   | "recall_first_attempt_result"
   | "recall_final_suboptimal_feedback"
   | "recall_answer_hints"
-  | "recall_hints_quiz_finish"
+  | "recall_first_attempt_feedback"
   | "recall_show_hints"
   | "recall_finished"
   | "reviewing"
@@ -89,7 +89,7 @@ export const studyStates: StudyStateObject[] = [
     hideInput: true,
     quickResponses: [
       {
-        quickText: "Start recall now.",
+        quickText: "💬 Start recall now.",
         newStudyState: "recall_first_attempt"
       },
       {
@@ -104,7 +104,7 @@ export const studyStates: StudyStateObject[] = [
     hideInput: true,
     quickResponses: [
       {
-        quickText: "Start recall now.",
+        quickText: "💬 Start recall now.",
         newStudyState: "recall_first_attempt"
       },
       {
@@ -120,11 +120,11 @@ Please select from the options below.`,
     hideInput: true,
     quickResponses: [
       {
-        quickText: "Start recall now.",
+        quickText: "💬 Start recall now.",
         newStudyState: "recall_first_attempt"
       },
       {
-        quickText: "Show study sheet.",
+        quickText: "📝 Show study sheet.",
         newStudyState: "reviewing"
       }
     ]
@@ -136,39 +136,39 @@ Please select from the options below.`,
     hideInput: true,
     quickResponses: [
       {
-        quickText: "Start recall now.",
+        quickText: "💬 Start recall now.",
         newStudyState: "recall_first_attempt"
       },
       {
-        quickText: "Show study sheet.",
+        quickText: "📝 Show study sheet.",
         newStudyState: "reviewing"
       },
       {
-        quickText: "Start topic 🔥 Quick quiz.",
+        quickText: "🔥 Start topic Quick quiz.",
         newStudyState: "quick_quiz_ready"
       }
     ]
   },
   {
     name: "recall_first_attempt",
     message: "Try to recall as much as you can. Good luck!",
-    nextStudyState: "recall_hints_quiz_finish"
+    nextStudyState: "recall_first_attempt_feedback"
   },
   {
-    name: "recall_hints_quiz_finish",
+    name: "recall_first_attempt_feedback",
     message: "{{LLM}}",
     hideInput: true,
     quickResponses: [
       {
-        quickText: "Show all hints.",
+        quickText: "💡 Show all hints.",
         newStudyState: "recall_show_hints"
       },
       {
-        quickText: "Start topic 🔥 Quick quiz.",
+        quickText: "🔥 Start topic Quick quiz.",
         newStudyState: "quick_quiz_ready"
       },
       {
-        quickText: "Show final feedback.",
+        quickText: "✅ Show final feedback.",
         newStudyState: "recall_final_suboptimal_feedback"
       }
     ]
@@ -180,7 +180,7 @@ Please select from the options below.`,
     nextStudyState: "recall_finished",
     quickResponses: [
       {
-        quickText: "Show study sheet.",
+        quickText: "📝 Show study sheet.",
         newStudyState: "reviewing"
       }
     ]
@@ -207,7 +207,7 @@ Please select from the options below.`,
     hideInput: true,
     quickResponses: [
       {
-        quickText: "Show study sheet.",
+        quickText: "📝 Show study sheet.",
         newStudyState: "reviewing"
       }
     ]
@@ -221,7 +221,7 @@ Please select from the options below.`,
         newStudyState: "topic_describe_upload"
       },
       {
-        quickText: "Start recall now.",
+        quickText: "💬 Start recall now.",
         newStudyState: "recall_first_attempt"
       }
     ]

diff --git a/tests/authenticated/topic-recall.spec.ts b/tests/authenticated/topic-recall.spec.ts
@@ -24,18 +24,18 @@ test("topic recall demo session", async ({ page }) => {
     'Welcome back to the topic "States of matter". Please select from the options below.'
   )
   await expect(
-    page.getByRole("button", { name: "Start recall now." })
+    page.getByRole("button", { name: "💬 Start recall now." })
   ).toBeVisible()
   await expect(
-    page.getByRole("button", { name: "Show study sheet." })
+    page.getByRole("button", { name: "📝 Show study sheet." })
   ).toBeVisible()
 
-  await page.getByRole("button", { name: "Show study sheet." }).click()
+  await page.getByRole("button", { name: "📝 Show study sheet." }).click()
   await expect(page.locator("div:nth-child(4) > .relative")).toBeVisible()
   await expect(page.locator("body")).toContainText(
     "Matter exists in three main states"
   )
-  await page.getByRole("button", { name: "Start recall now." }).click()
+  await page.getByRole("button", { name: "💬 Start recall now." }).click()
   await expect(
     page
       .locator("div")
@@ -63,7 +63,7 @@ test("topic recall demo session", async ({ page }) => {
   // await page.locator(".absolute > .bg-primary").first().click()
 
   // await expect(
-  //   page.getByRole("button", { name: "Show study sheet." })
+  //   page.getByRole("button", { name: "📝 Show study sheet." })
   // ).toBeVisible()
 })
Original file line number	Diff line number	Diff line change
Expand Up		@@ -54,3 +54,5 @@ workbox-*.js.map
		/playwright/.cache/

		playwright/.auth

		*.swp