Help features about ai tools (#716)

* Added the content for each features

* Added AI Tools

* Clean query params when changing the main tabs

* Fixed the render of ai-tools in content.tsx

* Updated the pmpm-lock.yaml

* Added icon to code block and fixed pnpm installation

* Changed to Zod, use server side rendering when possible

* Place queryKeys into ui/use-query-keys/help.ts

* Added prefix to the help query-keys in ui

Author: loris-olivier-obi

package.json

@@ -140,12 +140,13 @@
     "react-markdown": "^9.1.0",
     "react-pdf": "^9.2.1",
     "react-plotly.js": "^2.6.0",
-    "react-query": "link:@types/@tanstack/react-query",
     "react-resizable": "^3.0.5",
     "react-select": "^5.7.3",
     "react-syntax-highlighter": "^15.6.1",
     "rehype-katex": "^7.0.1",
     "rehype-raw": "^7.0.0",
+    "rehype-sanitize": "^6.0.0",
+    "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
     "sanity": "^3.93.0",
@@ -159,7 +160,7 @@
     "use-breakpoint": "^4.0.6",
     "wavefront-obj-parser": "^2.0.1",
     "whatwg-fetch": "^3.6.19",
-    "zod": "^3.22.4"
+    "zod": "^3.25.76"
   },
   "devDependencies": {
     "@playwright/test": "^1.51.1",

pnpm-lock.yaml

@@ -6,7 +6,7 @@ import { env } from '@/env';
 
 import { ContentForPricing } from '@/components/LandingPage/content/pricing';
 
-const client = new SanityClient({
+export const client = new SanityClient({
   projectId: 'fgi7eh1v',
   dataset: env.NEXT_PUBLIC_SANITY_DATASET!,
   apiVersion: '2023-03-25',

src/api/sanity/client.ts

@@ -0,0 +1,50 @@
+import { client } from '@/api/sanity/client';
+import { logError } from '@/util/logger';
+import { assertType } from '@/util/type-guards';
+
+export type AboutContentProps = {
+  aboutContent: unknown;
+  aboutTheAppContent: unknown;
+  termsAndConditionContent: unknown;
+};
+
+const queryForAboutContent = `*[_type=="ResourceHelpSection"][0]{
+  aboutContent,
+  aboutTheAppContent,
+  termsAndConditionContent
+}`;
+
+function isContentForAbout(data: unknown): data is AboutContentProps {
+  try {
+    assertType(
+      data,
+      {
+        aboutContent: 'unknown',
+        aboutTheAppContent: 'unknown',
+        termsAndConditionContent: 'unknown',
+      },
+      'ContentForAbout'
+    );
+    return true;
+  } catch (ex) {
+    logError(ex);
+    return false;
+  }
+}
+
+export async function getAboutContent(): Promise<AboutContentProps> {
+  try {
+    const data = await client.fetch<AboutContentProps>({
+      query: queryForAboutContent,
+    });
+    if (isContentForAbout(data)) return data;
+  } catch (err) {
+    logError(err);
+  }
+
+  return {
+    aboutContent: [],
+    aboutTheAppContent: [],
+    termsAndConditionContent: [],
+  };
+}

src/api/sanity/help-about-section/route.ts

@@ -0,0 +1,61 @@
+import { client } from '@/api/sanity/client';
+import { ContentForTutorialItem } from '@/types/help/type';
+import { logError } from '@/util/logger';
+import { assertType, TypeDef } from '@/util/type-guards';
+
+const queryForAboutContent = `*[_type == "documentationSettings"][0] {
+  tutorialOrder[]-> {
+    title, 
+    description,
+    "slug": slug.current,
+    "url": videoUrl,
+    transcript,
+    "imageURL": thumbnail.asset->url,
+    "imageWidth": thumbnail.asset->metadata.dimensions.width,
+    "imageHeight": thumbnail.asset->metadata.dimensions.height,
+    steps
+  }
+}`;
+
+function isContentForTutorials(data: unknown): data is ContentForTutorialItem {
+  const typeStringOrNull: TypeDef = ['|', 'string', 'null'];
+  try {
+    assertType(
+      data,
+      {
+        tutorialOrder: [
+          'array',
+          {
+            title: typeStringOrNull,
+            description: typeStringOrNull,
+            slug: 'string',
+            url: typeStringOrNull,
+            imageURL: 'string',
+            imageWidth: 'number',
+            imageHeight: 'number',
+          },
+        ],
+      },
+      'ContentForTutorial'
+    );
+    return true;
+  } catch (ex) {
+    logError(ex);
+    return false;
+  }
+}
+
+export async function getTutorialContent(): Promise<ContentForTutorialItem> {
+  try {
+    const data = await client.fetch<ContentForTutorialItem>({
+      query: queryForAboutContent,
+    });
+    if (isContentForTutorials(data)) return data;
+  } catch (err) {
+    logError(err);
+  }
+
+  return {
+    tutorialOrder: [],
+  };
+}

src/api/sanity/help-tutorial-section/route.ts

@@ -2,11 +2,17 @@ import { HelpLayout } from '@/ui/layouts/help-layout';
 import { HelpHeader } from '@/ui/segments/help/header';
 import Sections from '@/ui/segments/help/sections';
 
-export default function Page() {
+export const dynamic = 'force-dynamic';
+
+export default function Page({
+  searchParams,
+}: {
+  searchParams?: Record<string, string | string[] | undefined>;
+}) {
   return (
     <HelpLayout>
       <HelpHeader />
-      <Sections />
+      <Sections searchParams={searchParams} />
     </HelpLayout>
   );
 }

src/app/app/v2/[virtualLabId]/[projectId]/help/page.tsx

@@ -0,0 +1,38 @@
+import { useSanity } from '@/services/sanity';
+import { AboutContentProps } from '@/ui/segments/help/about/content';
+import { logError } from '@/util/logger';
+import { assertType } from '@/util/type-guards';
+
+const queryForAboutContent = `*[_type=="ResourceHelpSection"][0] {
+  aboutContent,
+  aboutTheAppContent,
+  termsAndConditionContent
+}`;
+
+export function useSanityContentForAboutContent(): AboutContentProps {
+  return (
+    useSanity(queryForAboutContent, isContentForAbout) ?? {
+      aboutContent: [],
+      aboutTheAppContent: [],
+      termsAndConditionContent: [],
+    }
+  );
+}
+
+function isContentForAbout(data: unknown): data is AboutContentProps {
+  try {
+    assertType(
+      data,
+      {
+        aboutContent: 'unknown',
+        aboutTheAppContent: 'unknown',
+        termsAndConditionContent: 'unknown',
+      },
+      'ContentForAbout'
+    );
+    return true;
+  } catch (ex) {
+    logError(ex);
+    return false;
+  }
+}

src/components/documentation/hooks/use-sanity-content-for-about-section.tsx

@@ -1,9 +1,8 @@
-// import query from '../query/featuresItemHooks.groq';
-import query from '@/components/documentation/query/features-item-hooks.groq';
+import { z } from 'zod';
 
+import query from '@/components/documentation/query/features-item-hooks.groq';
 import { useSanity } from '@/services/sanity';
 import { logError } from '@/util/logger';
-import { assertType, TypeDef } from '@/util/type-guards';
 
 export function useSanityContentForFeatureItems() {
   return useSanity(query, isContentForFeatureItems) ?? [];
@@ -17,23 +16,21 @@ export type ContentForFeatureItem = {
   Status: string;
 };
 
+// Zod schema for ContentForFeatureItem
+const ContentForFeatureItemSchema = z.object({
+  Feature_title: z.string().nullable(),
+  Description: z.string().nullable(),
+  Topic: z.string().nullable(),
+  Scale: z.string().nullable(),
+  Status: z.string().nullable(),
+});
+
+// Zod schema for array of ContentForFeatureItem
+const ContentForFeatureItemsSchema = z.array(ContentForFeatureItemSchema);
+
 function isContentForFeatureItems(data: unknown): data is ContentForFeatureItem[] {
-  const typeStringOrNull: TypeDef = ['|', 'string', 'null'];
   try {
-    assertType(
-      data,
-      [
-        'array',
-        {
-          Feature_title: typeStringOrNull,
-          Description: typeStringOrNull,
-          Topic: typeStringOrNull,
-          Scale: typeStringOrNull,
-          Status: typeStringOrNull,
-        },
-      ],
-      'ContentForGlossary'
-    );
+    ContentForFeatureItemsSchema.parse(data);
     return true;
   } catch (ex) {
     logError(ex);

src/components/documentation/hooks/use-sanity-content-for-features.ts

@@ -5,6 +5,7 @@ import { createClient } from 'next-sanity';
 
 import { logError } from '@/util/logger';
 import { isUndefined } from '@/util/type-guards';
+import { log } from '@/utils/logger';
 
 const client = createClient({
   projectId: 'fgi7eh1v',
@@ -14,12 +15,6 @@ const client = createClient({
   useCdn: process.env.NODE_ENV === 'production',
 });
 
-/**
- * @returns The expected object, or:
- *
- * - `undefined` if the query has not finished yet.
- * - `null` if an error occured.
- */
 export function useSanity<T>(
   query: string,
   typeGuard: (data: unknown) => data is T
@@ -48,25 +43,17 @@ export async function fetchSanity<T>(
     if (typeGuard(data)) return data;
     throw Error('Type guard rejeted this type, but without any explanation!');
   } catch (ex) {
-    console.log('The following Sanity GROQ query returned a data of unexpected type:');
-    console.log(`%c${query}`, 'font-family: monospace; color: #0f0; bakground: #000');
-    console.log(data);
+    log('warn', 'The following Sanity GROQ query returned a data of unexpected type:');
+    log('log', `%c${query}`, 'font-family: monospace; color: #0f0; background: #000');
+    log('log', data);
     const msg = ex instanceof Error ? ex.message : `${ex}`;
-    console.log(`%c${msg}`, 'font-weight: bold; color: #fff; background: #b00');
+    log('log', `%c${msg}`, 'font-weight: bold; color: #fff; background: #b00');
     return null;
   }
 }
 
-// Prevent a query from being fetched twice.
 const cache = new Map<string, unknown>();
 
-/**
- * Query Sanity without checking the returned format.
- * This is an utility function used by more specific ones.
- * Please use `useSanityContentTyped()` instead.
- *
- * @see https://open-brain-institute.sanity.studio
- */
 async function fetchSanityContent(query: string): Promise<unknown> {
   const fromCache = cache.get(query);
   if (fromCache) return fromCache;

src/services/sanity/sanity.ts

@@ -116,6 +116,8 @@
 
   --shadow-strong-image: 0px 22px 22px -16px rgba(0, 0, 0, 0.36);
   --shadow-super-shadow: 0px 24px 60px 0px rgba(0, 0, 0, 0.4);
+  --shadow-skmp-s:
+    -16px -16px 20px 0 rgba(255, 255, 255, 0.82), 8px 12px 24px 0 rgba(0, 0, 0, 0.06);
 
   --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
   --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);