fix: linting for app components

apps/nextjs/src/components/AppComponents/Chat/Chat/ChatModerationDisplay.stories.tsx

@@ -1,4 +1,4 @@
-import { type PersistedModerationBase } from "@oakai/core/src/utils/ailaModeration/moderationSchema";
+import type { PersistedModerationBase } from "@oakai/core/src/utils/ailaModeration/moderationSchema";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { ChatModerationDisplay } from "./ChatModerationDisplay";

apps/nextjs/src/components/AppComponents/Chat/Chat/ChatModerationDisplay.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { type PersistedModerationBase } from "@oakai/core/src/utils/ailaModeration/moderationSchema";
+import type { PersistedModerationBase } from "@oakai/core/src/utils/ailaModeration/moderationSchema";
 import { Flex } from "@radix-ui/themes";
 
 import ToxicModerationView from "../toxic-moderation-view";

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

@@ -20,8 +20,8 @@ export const useAilaStreamingStatus = ({
   messages: Message[];
 }): AilaStreamingStatus => {
   const ailaStreamingStatus = useMemo<AilaStreamingStatus>(() => {
-    const moderationStart = `MODERATION_START`;
-    const chatStart = `CHAT_START`;
+    const moderationStart = "MODERATION_START";
+    const chatStart = "CHAT_START";
     if (messages.length === 0) return "Idle";
     const lastMessage = messages[messages.length - 1];
 
@@ -33,8 +33,8 @@ export const useAilaStreamingStatus = ({
       } else if (content.includes(moderationStart)) {
         return "Moderating";
       } else if (
-        content.includes(`"type":"prompt"`) ||
-        content.includes(`\\"type\\":\\"prompt\\"`)
+        content.includes('"type":"prompt"') ||
+        content.includes('\\"type\\":\\"prompt\\"')
       ) {
         return "StreamingChatResponse";
       } else if (content.includes(chatStart)) {

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

@@ -1,12 +1,12 @@
-import { type LooseLessonPlan } from "@oakai/aila/src/protocol/schema";
+import type { LooseLessonPlan } from "@oakai/aila/src/protocol/schema";
 import { aiLogger } from "@oakai/logger";
-import { type Message } from "ai/react";
+import type { Message } from "ai/react";
 
 const log = aiLogger("chat");
 
 export function findMessageIdFromContent({ content }: { content: string }) {
   return content
-    .split(`␞`)
+    .split("␞")
     .map((s) => {
       try {
         return JSON.parse(s.trim());
@@ -21,12 +21,12 @@ export function findMessageIdFromContent({ content }: { content: string }) {
 export function findLatestServerSideState(workingMessages: Message[]) {
   log.info("Finding latest server-side state", { workingMessages });
   const lastMessage = workingMessages[workingMessages.length - 1];
-  if (!lastMessage?.content.includes(`"type":"state"`)) {
+  if (!lastMessage?.content.includes('"type":"state"')) {
     log.info("No server state found");
     return;
   }
   const state: LooseLessonPlan = lastMessage.content
-    .split(`␞`)
+    .split("␞")
     .map((s) => {
       try {
         return JSON.parse(s.trim());

apps/nextjs/src/components/AppComponents/Chat/chat-lhs-header.tsx

@@ -40,13 +40,13 @@ const ChatLhsHeader = ({
           New lesson
         </ChatButton>
       </div>
-      <div className={`${isDemoUser && `mt-16`} flex justify-end sm:hidden`}>
+      <div className={`${isDemoUser && "mt-16"} flex justify-end sm:hidden`}>
         <button
           onClick={() => setShowLessonMobile(!showLessonMobile)}
           className="flex items-center gap-5"
         >
           <AiIcon />{" "}
-          <span className={`text-base font-bold `}>View lesson &gt;</span>
+          <span className={"text-base font-bold "}>View lesson &gt;</span>
         </button>
       </div>
     </>

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

@@ -32,7 +32,8 @@ function DemoLimitMessage({ id }: Readonly<{ id: string }>) {
         message={{
           id: "demo-limit",
           role: "assistant",
-          content: `{"type": "error", "message": "**Your lesson is complete**\\nYou can no longer edit this lesson. [Create new lesson.](/aila)"}`,
+          content:
+            '{"type": "error", "message": "**Your lesson is complete**\\nYou can no longer edit this lesson. [Create new lesson.](/aila)"}',
         }}
         persistedModerations={[]}
         separator={<span className="my-10 flex" />}

apps/nextjs/src/components/AppComponents/Chat/chat-right-hand-side-lesson.tsx

@@ -61,7 +61,7 @@ const ChatRightHandSideLesson = ({
   const endOfDocRef = useRef<HTMLDivElement>(null);
   return (
     <div
-      className={`fixed bottom-0 ${showLessonMobile ? `right-0` : `right-[-100%] sm:right-0`} right-0 ${demo.isDemoUser ? `top-8 sm:top-0` : `top-0`} z-30 w-[95%] bg-white shadow-md duration-300 sm:relative sm:z-0  sm:w-[50%] sm:shadow-none lg:w-full`}
+      className={`fixed bottom-0 ${showLessonMobile ? "right-0" : "right-[-100%] sm:right-0"} right-0 ${demo.isDemoUser ? "top-8 sm:top-0" : "top-0"} z-30 w-[95%] bg-white shadow-md duration-300 sm:relative sm:z-0  sm:w-[50%] sm:shadow-none lg:w-full`}
       data-testid="chat-right-hand-side-lesson"
       ref={documentContainerRef}
       onScroll={handleScroll}
@@ -77,7 +77,7 @@ const ChatRightHandSideLesson = ({
           onClick={() => {
             closeMobileLessonPullOut();
           }}
-          className={`${demo.isDemoUser ? `mt-25` : ``} flex items-center justify-center gap-3 `}
+          className={`${demo.isDemoUser ? "mt-25" : ""} flex items-center justify-center gap-3 `}
         >
           <span className="scale-75">
             <OakIcon iconName="cross" />

apps/nextjs/src/components/AppComponents/Chat/chat-share-dialog.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { toast } from "react-hot-toast";
 
 import { aiLogger } from "@oakai/logger";
-import { type DialogProps } from "@radix-ui/react-dialog";
+import type { DialogProps } from "@radix-ui/react-dialog";
 
 import { Button } from "@/components/AppComponents/Chat/ui/button";
 import {

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

@@ -24,7 +24,8 @@ const log = aiLogger("chat");
 const exampleMessages = [
   {
     heading: "History • Key stage 3 • The end of Roman Britain ",
-    message: `Create a lesson plan about The End of Roman Britain for Key Stage 3 History`,
+    message:
+      "Create a lesson plan about The End of Roman Britain for Key Stage 3 History",
   },
 ];
 

apps/nextjs/src/components/AppComponents/Chat/guidance-required.stories.tsx

@@ -1,4 +1,4 @@
-import { type PersistedModerationBase } from "@oakai/core/src/utils/ailaModeration/moderationSchema";
+import type { PersistedModerationBase } from "@oakai/core/src/utils/ailaModeration/moderationSchema";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { GuidanceRequired } from "./guidance-required";

apps/nextjs/src/components/AppComponents/Chat/prompt-form.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef } from "react";
+
 import type { UseChatHelpers } from "ai/react";
 
 import {

apps/nextjs/src/components/AppComponents/Chat/sidebar-list.tsx

@@ -4,7 +4,7 @@ import { ClearHistory } from "@/components/AppComponents/Chat/clear-history";
 import { SidebarItems } from "@/components/AppComponents/Chat/sidebar-items";
 import { trpc } from "@/utils/trpc";
 
-export async function SidebarList() {
+export function SidebarList() {
   const chatsRequest = trpc.chat.appSessions.getSidebarChats.useQuery();
 
   const chats = chatsRequest.data;

apps/nextjs/src/components/AppComponents/Chat/toxic-moderation-view.tsx

@@ -1,6 +1,6 @@
 import Textarea from "react-textarea-autosize";
 
-import { type PersistedModerationBase } from "@oakai/core/src/utils/ailaModeration/moderationSchema";
+import type { PersistedModerationBase } from "@oakai/core/src/utils/ailaModeration/moderationSchema";
 import { useModerationFeedbackSurvey } from "hooks/surveys/useModerationFeedbackSurvey";
 import { useRouter } from "next/navigation";
 

apps/nextjs/src/components/AppComponents/Chat/ui/button.tsx

@@ -6,53 +6,53 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium shadow ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  "inline-flex items-center justify-center rounded-md text-sm font-medium shadow ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
         default:
-          'bg-primary text-primary-foreground shadow-md hover:bg-primary/90',
+          "bg-primary text-primary-foreground shadow-md hover:bg-primary/90",
         destructive:
-          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline:
-          'border border-input hover:bg-accent hover:text-accent-foreground',
+          "border border-input hover:bg-accent hover:text-accent-foreground",
         secondary:
-          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'shadow-none hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 shadow-none hover:underline'
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "shadow-none hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 shadow-none hover:underline",
       },
       size: {
-        default: 'h-18 px-10 py-7',
-        sm: 'h-18 rounded-md px-9',
-        lg: 'h-22 rounded-md px-18',
-        icon: 'h-18 w-18 p-0'
-      }
+        default: "h-18 px-10 py-7",
+        sm: "h-18 rounded-md px-9",
+        lg: "h-22 rounded-md px-18",
+        icon: "h-18 w-18 p-0",
+      },
     },
     defaultVariants: {
-      variant: 'default',
-      size: 'default'
-    }
-  }
-)
+      variant: "default",
+      size: "default",
+    },
+  },
+);
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button'
+    const Comp = asChild ? Slot : "button";
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
       />
-    )
-  }
-)
-Button.displayName = 'Button'
+    );
+  },
+);
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };

apps/nextjs/src/components/AppComponents/Chat/ui/tooltip.tsx

@@ -1,15 +1,16 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import * as React from "react";
 
-import { cn } from '@/lib/utils'
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
-const TooltipProvider = TooltipPrimitive.Provider
+import { cn } from "@/lib/utils";
 
-const Tooltip = TooltipPrimitive.Root
+const TooltipProvider = TooltipPrimitive.Provider;
 
-const TooltipTrigger = TooltipPrimitive.Trigger
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
 
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
@@ -19,12 +20,12 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      'z-50 overflow-hidden rounded-md border bg-popover px-9 py-5.5 text-xs font-medium text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-5 data-[side=left]:slide-in-from-right-5 data-[side=right]:slide-in-from-left-5 data-[side=top]:slide-in-from-bottom-5',
-      className
+      "py-5.5 z-50 overflow-hidden rounded-md border bg-popover px-9 text-xs font-medium text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-5 data-[side=left]:slide-in-from-right-5 data-[side=right]:slide-in-from-left-5 data-[side=top]:slide-in-from-bottom-5",
+      className,
     )}
     {...props}
   />
-))
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

apps/nextjs/src/components/AppComponents/ComparativeJudgement/PreviewContent.tsx

@@ -1,8 +1,5 @@
 import { Box, Flex, Text } from "@radix-ui/themes";
-import type {
-  AnswerAndDistractor,
-  OptionWithPrompt,
-} from "ai-apps/comparative-judgement/state/types";
+import type { OptionWithPrompt } from "ai-apps/comparative-judgement/state/types";
 
 import { sortAlphabetically } from "@/utils/alphabetiseArray";
 
@@ -16,8 +13,7 @@ type PreviewContentProps = {
 
 const PreviewContent = ({ option, question }: PreviewContentProps) => {
   if (!option?.answerAndDistractor) return null;
-  const answersAndDistractors =
-    option?.answerAndDistractor;
+  const answersAndDistractors = option?.answerAndDistractor;
   const { answers, distractors } = answersAndDistractors;
 
   const answerAndDistractorArray = [...answers, ...distractors];
@@ -39,7 +35,7 @@ const PreviewContent = ({ option, question }: PreviewContentProps) => {
 
       <Box>
         <Text className="opacity-80">
-          {option.isOakQuestion ? "Created by a Human" : `Created by Oak AI`}
+          {option.isOakQuestion ? "Created by a Human" : "Created by Oak AI"}
         </Text>
         {!option.isOakQuestion && (
           <PromptTemplate

apps/nextjs/src/components/AppComponents/ComparativeJudgement/index.tsx

@@ -64,7 +64,7 @@ const ComparativeJudgement = ({
         </Flex>
       )}
       {isLoading && (
-        <div className="min-w-18 flex min-h-[500px] w-full items-center justify-center">
+        <div className="flex min-h-[500px] w-full min-w-18 items-center justify-center">
           <Icon
             icon="reload"
             size="md"

apps/nextjs/src/components/AppComponents/Layout/index.tsx

@@ -18,7 +18,7 @@ const Layout = ({
     <div className="flex min-h-screen flex-col ">
       <Header />
       <main
-        className={`flex h-full flex-1 flex-col bg-muted/50 bg-white ${isDemoUser && `pt-28 sm:pt-20`}`}
+        className={`flex h-full flex-1 flex-col bg-muted/50 bg-white ${isDemoUser && "pt-28 sm:pt-20"}`}
       >
         <DialogProvider>{children}</DialogProvider>
       </main>

apps/nextjs/src/components/AppComponents/QuizDesigner/ExportMenu.tsx

@@ -13,7 +13,7 @@ import LoadingWheel from "@/components/LoadingWheel";
 import useAnalytics from "@/lib/analytics/useAnalytics";
 
 import ChatButton from "../Chat/ui/chat-button";
-import ShareButtonGroup from "../common/ShareButttonGroup";
+import ShareButtonGroup from "../common/ShareButtonGroup";
 import DownloadGiftButton from "./DownloadGiftButton";
 
 interface ExportMenuProps {

apps/nextjs/src/components/AppComponents/QuizDesigner/QuizQuestionRow/ControllerRow.tsx

@@ -8,7 +8,7 @@ import { QuizAppActions } from "ai-apps/quiz-designer/state/actions";
 import useAnalytics from "@/lib/analytics/useAnalytics";
 
 import ChatButton from "../../Chat/ui/chat-button";
-import ShareButtonGroup from "../../common/ShareButttonGroup";
+import ShareButtonGroup from "../../common/ShareButtonGroup";
 
 type ControllerProps = {
   hasQuestions: boolean;

apps/nextjs/src/components/AppComponents/common/SingleGeneration/GenerationInputAndText.tsx

@@ -59,7 +59,7 @@ function GenerationInputAndText({
         className={
           userIsEditing
             ? "hidden"
-            : `flex text-lg ${isLoading && `line-through opacity-60	`}`
+            : `flex text-lg ${isLoading && "line-through opacity-60	"}`
         }
       >
         {children}

apps/nextjs/src/components/AppComponents/download/DownloadAllButton.tsx

@@ -21,7 +21,7 @@ import SlidesIcon from "../../SVGParts/SlidesIcon";
 
 const log = aiLogger("chat");
 
-const allexportLinksObject = z.object({
+const allExportLinksObject = z.object({
   lessonSlides: z.string(),
   lessonPlan: z.string(),
   worksheet: z.string(),
@@ -114,7 +114,7 @@ export const DownloadAllButton = ({
       try {
         const lessonTitle = lesson.title;
         if (!lessonTitle) return;
-        const parsedData = allexportLinksObject.parse(data);
+        const parsedData = allExportLinksObject.parse(data);
         mutateAsync({
           lessonTitle,
           slidesLink: parsedData.lessonSlides,
@@ -188,8 +188,8 @@ export const DownloadAllButton = ({
           <div className="flex flex-col gap-6">
             <span className="text-left font-bold">
               Email me
-              {isSuccess && `- email sent`}{" "}
-              {isError && `- There was an error sending the email!`}
+              {isSuccess && "- email sent"}{" "}
+              {isError && "- There was an error sending the email!"}
             </span>
             <span className="text-left opacity-80">
               Google account needed for this option
@@ -202,7 +202,7 @@ export const DownloadAllButton = ({
   return (
     <>
       <button
-        className={`flex items-center justify-between gap-9 rounded-md border-2 border-black px-14 py-10 ${downloadAvailable ? `border-opacity-100` : ` border-opacity-40`}`}
+        className={`flex items-center justify-between gap-9 rounded-md border-2 border-black px-14 py-10 ${downloadAvailable ? "border-opacity-100" : " border-opacity-40"}`}
         onClick={() => onClick()}
         disabled={!downloadAvailable}
         data-testid={dataTestId}