Merge branch 'fix/dropdown_sections' of https://github.com/oaknationa…

…l/oak-ai-lesson-assistant into fix/no_live_openai

.vscode/settings.json

@@ -26,6 +26,7 @@
     "Aila",
     "APIV",
     "authed",
+    "autocapture",
     "autodocs",
     "autoprefixer",
     "autosize",
@@ -77,6 +78,7 @@
     "haroset",
     "Hasura",
     "hconeai",
+    "headlessly",
     "headlessui",
     "healthcheck",
     "Helicone",
@@ -132,6 +134,7 @@
     "portabletext",
     "postcss",
     "posthog",
+    "Postico",
     "postpack",
     "posttest",
     "pptxgen",

apps/nextjs/jest.setup.cjs

@@ -1,4 +1,5 @@
 require("@testing-library/jest-dom");
+require("web-streams-polyfill/polyfill");
 
 process.env.NEXT_PUBLIC_DEBUG = process.env.DEBUG;
 

apps/nextjs/src/app/actions.ts

@@ -3,7 +3,7 @@
 import type { AilaPersistedChat } from "@oakai/aila/src/protocol/schema";
 import { chatSchema } from "@oakai/aila/src/protocol/schema";
 import type { Prisma } from "@oakai/db";
-import { prisma } from "@oakai/db";
+import { prisma } from "@oakai/db/client";
 import * as Sentry from "@sentry/nextjs";
 
 function parseChatAndReportError({

apps/nextjs/src/components/AppComponents/Chat/Chat/hooks/useAilaStreamingStatus.ts

@@ -1,10 +1,42 @@
 import { useMemo, useEffect } from "react";
 
+import type { LessonPlanKeys } from "@oakai/aila/src/protocol/schema";
 import { aiLogger } from "@oakai/logger";
 import type { Message } from "ai";
 
+import { allSectionsInOrder } from "../../../../../lib/lessonPlan/sectionsInOrder";
+
 const log = aiLogger("chat");
 
+function findStreamingSections(message: Message | undefined): {
+  streamingSections: LessonPlanKeys[];
+  streamingSection: LessonPlanKeys | undefined;
+  content: string | undefined;
+} {
+  if (!message?.content) {
+    return {
+      streamingSections: [],
+      streamingSection: undefined,
+      content: undefined,
+    };
+  }
+  const { content } = message;
+  const regex = /"path":"\/([^/"]*)/g;
+  const pathMatches =
+    content
+      .replace(/\\/g, "") // handle escaped backslashes in the input
+      .match(regex)
+      ?.map((match) => match.replace(/"path":"\//, "").replace(/"$/, "")) ?? [];
+
+  const streamingSections: LessonPlanKeys[] = pathMatches.filter(
+    (i): i is string =>
+      typeof i === "string" && allSectionsInOrder.includes(i as LessonPlanKeys),
+  ) as LessonPlanKeys[];
+  const streamingSection: LessonPlanKeys | undefined =
+    streamingSections[streamingSections.length - 1];
+  return { streamingSections, streamingSection, content };
+}
+
 export type AilaStreamingStatus =
   | "Loading"
   | "RequestMade"
@@ -19,38 +51,54 @@ export const useAilaStreamingStatus = ({
 }: {
   isLoading: boolean;
   messages: Message[];
-}): AilaStreamingStatus => {
-  const ailaStreamingStatus = useMemo<AilaStreamingStatus>(() => {
-    const moderationStart = "MODERATION_START";
-    const chatStart = "CHAT_START";
-    if (messages.length === 0) return "Idle";
+}): {
+  status: AilaStreamingStatus;
+  streamingSection: LessonPlanKeys | undefined;
+  streamingSections: LessonPlanKeys[] | undefined;
+} => {
+  const { status, streamingSection, streamingSections } = useMemo(() => {
+    const moderationStart = `MODERATION_START`;
+    const chatStart = `CHAT_START`;
+    if (messages.length === 0)
+      return {
+        status: "Idle" as AilaStreamingStatus,
+        streamingSection: undefined,
+      };
     const lastMessage = messages[messages.length - 1];
 
+    let status: AilaStreamingStatus = "Idle";
+    const { streamingSections, streamingSection, content } =
+      findStreamingSections(lastMessage);
+
     if (isLoading) {
-      if (!lastMessage) return "Loading";
-      const { content } = lastMessage;
-      if (lastMessage.role === "user") {
-        return "RequestMade";
-      } else if (content.includes(moderationStart)) {
-        return "Moderating";
-      } else if (content.includes("experimentalPatch")) {
-        return "StreamingExperimentalPatches";
-      } else if (
-        content.includes('"type":"prompt"') ||
-        content.includes('\\"type\\":\\"prompt\\"')
-      ) {
-        return "StreamingChatResponse";
-      } else if (content.includes(chatStart)) {
-        return "StreamingLessonPlan";
+      if (!lastMessage || !content) {
+        status = "Loading";
+      } else {
+        if (lastMessage.role === "user") {
+          status = "RequestMade";
+        } else if (content.includes(moderationStart)) {
+          status = "Moderating";
+        } else if (content.includes(`"type":"text"`)) {
+          status = "StreamingChatResponse";
+        } else if (content.includes(chatStart)) {
+          status = "StreamingLessonPlan";
+        } else {
+          status = "Loading";
+        }
       }
-      return "Loading";
     }
-    return "Idle";
+
+    return { status, streamingSections, streamingSection };
   }, [isLoading, messages]);
 
   useEffect(() => {
-    log.info("ailaStreamingStatus set:", ailaStreamingStatus);
-  }, [ailaStreamingStatus]);
+    log.info("ailaStreamingStatus set:", status);
+  }, [status]);
 
-  return ailaStreamingStatus;
+  return {
+    status,
+    streamingSection:
+      status === "StreamingLessonPlan" ? streamingSection : undefined,
+    streamingSections,
+  };
 };

apps/nextjs/src/components/AppComponents/Chat/Chat/utils/index.ts

@@ -4,7 +4,11 @@ import type { Message } from "ai/react";
 
 const log = aiLogger("chat");
 
-export function findMessageIdFromContent({ content }: { content: string }) {
+export function findMessageIdFromContent({
+  content,
+}: {
+  content: string;
+}): string | undefined {
   return content
     .split("␞")
     .map((s) => {

apps/nextjs/src/components/AppComponents/Chat/chat-history.stories.tsx

@@ -23,9 +23,13 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  args: {},
+  render: () => <ChatHistory />,
+  args: {
+    userId: "user123",
+  },
 };
 
 export const WithoutUserId: Story = {
+  render: () => <ChatHistory />,
   args: {},
 };

apps/nextjs/src/components/AppComponents/Chat/chat-layout.tsx

@@ -1,8 +1,7 @@
-import { useDemoLocking } from "hooks/useDemoLocking";
-import { useMobileLessonPullOutControl } from "hooks/useMobileLessonPullOutControl";
-
 import { useLessonChat } from "@/components/ContextProviders/ChatProvider";
 import { useDemoUser } from "@/components/ContextProviders/Demo";
+import { useDemoLocking } from "@/hooks/useDemoLocking";
+import { useMobileLessonPullOutControl } from "@/hooks/useMobileLessonPullOutControl";
 import { cn } from "@/lib/utils";
 
 import ChatLeftHandSide from "./chat-left-hand-side";

apps/nextjs/src/components/AppComponents/Chat/chat-lessonPlanDisplay.stories.tsx

@@ -26,13 +26,8 @@ const meta = {
   component: LessonPlanDisplay,
   tags: ["autodocs"],
   decorators: [ChatDecorator],
-  args: {
-    documentContainerRef: { current: null },
-    chatEndRef: undefined,
-    sectionRefs: {},
-    showLessonMobile: false,
-  },
-} satisfies Meta<typeof LessonPlanDisplay>;
+  args: {},
+};
 
 export default meta;