CLASSROOMIO-T-214: Add comments feature in lesson

package.json

@@ -24,7 +24,6 @@
     "@sveltejs/adapter-netlify": "^2.0.8",
     "@tailwindcss/forms": "^0.5.4",
     "@tinymce/tinymce-svelte": "^1.0.1",
-    "@types/marked": "^5.0.1",
     "@types/paystack": "^2.0.1",
     "@types/pluralize": "0.0.30",
     "ai": "^2.1.31",
@@ -37,7 +36,6 @@
     "hotkeys-js": "^3.11.2",
     "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
-    "marked": "^6.0.0",
     "netlify": "^13.1.10",
     "nodemailer": "^6.9.5",
     "openai-edge": "^1.2.2",

src/lib/components/Apps/components/Comments/index.svelte

@@ -0,0 +1,205 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import PageNav from '$lib/components/PageNav/index.svelte';
+  import CloseButton from '$lib/components/Buttons/Close/index.svelte';
+  import TextField from '$lib/components/Form/TextField.svelte';
+  import { getSupabase } from '$lib/utils/functions/supabase';
+  import type {
+    RealtimeChannel,
+    RealtimePostgresChangesPayload,
+    PostgrestSingleResponse
+  } from '@supabase/supabase-js';
+  import type { LessonCommentInsertPayload, GroupPerson, LessonComment } from '$lib/utils/types';
+  import { lesson } from '$lib/components/Course/components/Lesson/store/lessons';
+  import { group } from '$lib/components/Course/store';
+  import { profile } from '$lib/utils/store/user';
+  import { calDateDiff } from '$lib/utils/functions/date';
+
+  export let handleClose = () => {};
+
+  const supabase = getSupabase();
+
+  let comment = '';
+  let bodyRef: HTMLDivElement;
+  let lessonCommentChannel: RealtimeChannel;
+  let comments: LessonComment[] = [];
+  let groupmember: GroupPerson | undefined;
+
+  interface FetchComments {
+    comment: string;
+    created_at: string;
+    groupmember: {
+      id: string;
+      profile: {
+        avatar_url: string;
+        fullname: string;
+      };
+    };
+  }
+
+  async function handleSend() {
+    console.log('groupmember', groupmember);
+    if (!comment || !groupmember) {
+      return;
+    }
+
+    await supabase.from('lesson_comment').insert({
+      lesson_id: $lesson.id,
+      groupmember_id: groupmember.id,
+      comment
+    });
+
+    comment = '';
+    setTimeout(() => {
+      bodyRef.scrollTo({
+        top: bodyRef.scrollHeight
+      });
+    }, 100);
+  }
+
+  function handleKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Enter') {
+      handleSend();
+    }
+  }
+
+  async function handleInsert(payload: RealtimePostgresChangesPayload<LessonCommentInsertPayload>) {
+    const insertedComment = payload.new as LessonCommentInsertPayload;
+
+    const {
+      data,
+      error
+    }: PostgrestSingleResponse<{
+      id: string;
+      profile: {
+        fullname: string;
+        avatar_url: string;
+      };
+    }> = await supabase
+      .from('groupmember')
+      .select('id, profile:profile_id(fullname, avatar_url)')
+      .eq('id', insertedComment.groupmember_id)
+      .single();
+
+    console.log('data', data);
+    console.log('error', error);
+
+    if (error || !data) {
+      return;
+    }
+
+    comments = [
+      ...comments,
+      {
+        comment: insertedComment.comment,
+        name: data.id === insertedComment.groupmember_id ? 'You' : data.profile.fullname || '',
+        avatar: data.profile.avatar_url,
+        commentAt: insertedComment.created_at
+      }
+    ];
+    $lesson.totalComments = comments.length;
+  }
+
+  async function fetchComments(people: GroupPerson[], lessonId?: string | null) {
+    groupmember = people.find((person) => person.profile_id === $profile.id);
+
+    if (!groupmember || !lessonId) return;
+
+    const { data, error } = await supabase
+      .from('lesson_comment')
+      .select(
+        `
+          groupmember_id,
+          created_at,
+          comment,
+          groupmember:groupmember_id(
+            id,
+            profile:profile_id(fullname, avatar_url)
+          )
+        `
+      )
+      .match({
+        lesson_id: lessonId,
+        groupmember_id: groupmember.id
+      })
+      .returns<FetchComments[]>();
+
+    if (error || !data) {
+      console.error('error');
+      return;
+    }
+
+    comments = data.map((lessonComment) => {
+      return {
+        comment: lessonComment.comment,
+        avatar: lessonComment.groupmember.profile.avatar_url,
+        commentAt: lessonComment.created_at,
+        name:
+          lessonComment.groupmember.id === groupmember?.id
+            ? 'You'
+            : lessonComment.groupmember.profile.fullname
+      };
+    });
+    // $lesson.totalComments = comments.length;
+  }
+
+  onMount(async () => {
+    lessonCommentChannel = supabase
+      .channel('any')
+      .on(
+        'postgres_changes',
+        { event: '*', schema: 'public', table: 'lesson_comment' },
+        handleInsert
+      )
+      .subscribe();
+  });
+
+  onDestroy(() => {
+    supabase.removeChannel(lessonCommentChannel);
+  });
+
+  $: fetchComments($group.people, $lesson.id);
+</script>
+
+<PageNav title="Comments" overidableStyle="padding: 0 10px">
+  <div slot="widget">
+    <CloseButton onClick={handleClose} />
+  </div>
+</PageNav>
+
+<div bind:this={bodyRef} class="overflow-auto h-[90%] px-2 min-w-[300px]">
+  {#each comments as comment}
+    <div class="pb-2 mt-2">
+      <div class="flex items-start">
+        <img
+          alt="Placeholder"
+          class="block rounded-full"
+          width="24"
+          height="20"
+          src={comment.avatar}
+        />
+        <div class="ml-2">
+          <p class="dark:text-white text-sm font-bold">{comment.name}</p>
+          <p class="dark:text-white text-xs font-normal text-gray-800">
+            {calDateDiff(comment.commentAt)}
+          </p>
+        </div>
+      </div>
+      <article class="prose prose-sm sm:prose ml-8">
+        {comment.comment}
+      </article>
+    </div>
+  {/each}
+</div>
+
+<div class="footer">
+  <TextField placeholder="Say something" bind:value={comment} onKeyDown={handleKeyDown} />
+</div>
+
+<style>
+  .footer {
+    position: absolute;
+    bottom: 0px;
+    width: 100%;
+  }
+</style>

src/lib/components/Apps/components/LiveChat/index.svelte

@@ -1,106 +0,0 @@
-<script>
-  import PageNav from '$lib/components/PageNav/index.svelte';
-  import CloseButton from '$lib/components/Buttons/Close/index.svelte';
-  import TextField from '$lib/components/Form/TextField.svelte';
-  // import SendButton from "$lib/components/Buttons/Send/index.svelte";
-
-  export let handleClose;
-
-  let message = '';
-  let bodyRef;
-  let chats = [
-    {
-      avatar: 'https://picsum.photos/32/32/?random',
-      name: 'Evgeniy',
-      message: "I'am looking at this and it looks great"
-    },
-    {
-      avatar: 'https://picsum.photos/32/32/?random',
-      name: 'Sergey Semko',
-      message: 'Thanks for the feedback, what do you think about my website. https://rotimibest.com'
-    },
-    {
-      avatar: 'https://picsum.photos/32/32/?random',
-      name: 'Vitalii Marushko',
-      message: 'Всем привет'
-    },
-    {
-      avatar: 'https://picsum.photos/32/32/?random',
-      name: 'Natasha',
-      message: 'Привет Виталий'
-    }
-  ];
-
-  function handleSend() {
-    if (!message) {
-      return;
-    }
-
-    chats = [
-      ...chats,
-      {
-        avatar: 'https://picsum.photos/32/32/?random',
-        name: 'You',
-        message
-      }
-    ];
-
-    message = null;
-
-    setTimeout(() => {
-      bodyRef.scrollTo({
-        top: bodyRef.scrollHeight
-      });
-    }, 100);
-  }
-
-  function handleKeyDown(e) {
-    if (e.key === 'Enter') {
-      handleSend();
-    }
-  }
-</script>
-
-<PageNav title="LiveChat" overidableStyle="padding: 0 10px">
-  <div slot="widget">
-    <CloseButton onClick={handleClose} />
-  </div>
-</PageNav>
-
-<div bind:this={bodyRef} class="overflow-auto body">
-  {#each chats as chat}
-    <div class="pl-2 pb-4">
-      <div class="flex items-center no-underline hover:underline text-black">
-        <img
-          alt="Placeholder"
-          class="block rounded-full"
-          width="24"
-          height="20"
-          src={chat.avatar}
-        />
-        <p class="dark:text-white ml-2 text-sm font-bold">{chat.name}</p>
-      </div>
-      <article class="prose prose-sm sm:prose pt-2 pl-8">
-        {@html chat.message}
-      </article>
-    </div>
-  {/each}
-</div>
-
-<div class="footer">
-  <!-- <div class="flex items-center justify-between leading-none pl-2"> -->
-  <TextField placeholder="Say something" bind:value={message} onKeyDown={handleKeyDown} />
-  <!-- <SendButton onClick={handleSend} /> -->
-  <!-- </div> -->
-</div>
-
-<style>
-  .body {
-    height: 90%;
-  }
-  .footer {
-    position: absolute;
-    bottom: 0px;
-    width: 100%;
-  }
-</style>

src/lib/components/Apps/components/QandA/index.svelte

@@ -1,5 +1,4 @@
 <script>
-  import { marked } from 'marked';
   import CheckmarkOutline from 'carbon-icons-svelte/lib/CheckmarkOutline.svelte';
   import PageNav from '$lib/components/PageNav/index.svelte';
   import CloseButton from '$lib/components/Buttons/Close/index.svelte';
@@ -101,7 +100,7 @@
       <div class="ml-2 flex-grow">
         <p class="dark:text-white text-sm font-bold">{question.name}</p>
         <article class="prose prose-sm sm:prose">
-          {@html marked(question.question)}
+          {question.question}
         </article>
       </div>
       <button class={`${question.answered && 'active'}`} on:click={handleMarkAnswered(question.id)}>

src/lib/components/Apps/constants.js

@@ -2,7 +2,7 @@ export default {
   APPS: {
     QANDA: 'QANDA',
     NOTES: 'NOTES',
-    LIVE_CHAT: 'LIVE_CHAT',
+    COMMENTS: 'COMMENTS',
-    POLL: 'POLL',
+    POLL: 'POLL'
-  },
+  }
 };

src/lib/components/Apps/index.svelte

@@ -1,5 +1,6 @@
-<script>
+<script lang="ts">
   import { onDestroy, onMount } from 'svelte';
+  import { writable } from 'svelte/store';
   import hotkeys from 'hotkeys-js';
   import Forum from 'carbon-icons-svelte/lib/Forum.svelte';
   import AlignBoxTopLeft from 'carbon-icons-svelte/lib/AlignBoxTopLeft.svelte';
@@ -9,19 +10,22 @@
   import Settings from 'carbon-icons-svelte/lib/Settings.svelte';
   import { apps } from './store';
 
+  import Chip from '$lib/components/Chip/index.svelte';
   import QandA from './components/QandA/index.svelte';
-  import LiveChat from './components/LiveChat/index.svelte';
+  import Comments from './components/Comments/index.svelte';
   import Notes from './components/Notes/index.svelte';
   import Poll from './components/Poll/index.svelte';
   import APPS_CONSTANTS from './constants';
   import { browser } from '$app/environment';
+  import { lesson } from '$lib/components/Course/components/Lesson/store/lessons';
 
   let resize = false;
   let isDragging = false;
-  let startX;
+  let isDown = writable(false);
-  let initialWidth;
+  let startX: number;
-  let appBarRef;
+  let initialWidth: number;
-  let appContentRef;
+  let appBarRef: HTMLDivElement;
+  let appContentRef: HTMLDivElement;
 
   let topPadding = $apps.isStudent ? '48px' : '109px';
 
@@ -32,7 +36,7 @@
   };
 
   function handleClose() {
-    $apps.selectedApp = null;
+    $apps.selectedApp = undefined;
     if (getResizableSidebar()) {
       appBarRef.style.width = '60px';
     } else if (!getResizableSidebar() && $apps.isStudent) {
@@ -40,7 +44,7 @@
     }
   }
 
-  function handleAppClick(appName) {
+  function handleAppClick(appName?: string) {
     if (!$apps.selectedApp && getResizableSidebar()) {
       if (window.innerWidth <= 1024) {
         appBarRef.style.width = '300px';
@@ -56,7 +60,7 @@
     $apps.dropdown = false;
   }
 
-  function handleCursor(event) {
+  function handleCursor(event: MouseEvent) {
     if (!getResizableSidebar()) return;
     if (!resize && $apps.selectedApp) {
       const isNearLeftBorder = event.clientX - appContentRef.getBoundingClientRect().left < 8;
@@ -70,31 +74,39 @@
     }
   }
 
-  function startDragging(event) {
+  function startDragging(event: MouseEvent) {
-    if (event.button === 0 && $apps.selectedApp) {
+    console.log('start dragging');
-      event.preventDefault();
+    $isDown = true;
-      const isNearLeftBorder = event.clientX - appContentRef.getBoundingClientRect().left < 5;
+    setTimeout(() => {
-      const isNearRightBorder = appContentRef.getBoundingClientRect().right - event.clientX < 5;
+      console.log('is down', $isDown);
+      if (event.button === 0 && $apps.selectedApp && $isDown) {
+        console.log('start dragging if');
+        event.preventDefault();
+        const isNearLeftBorder = event.clientX - appContentRef.getBoundingClientRect().left < 5;
+        const isNearRightBorder = appContentRef.getBoundingClientRect().right - event.clientX < 5;
 
-      if (
+        if (
-        (isNearRightBorder || isNearLeftBorder) &&
+          (isNearRightBorder || isNearLeftBorder) &&
-        event.clientX >= 0 &&
+          event.clientX >= 0 &&
-        event.clientX <= window.innerWidth
+          event.clientX <= window.innerWidth
-      ) {
+        ) {
-        isDragging = true;
+          console.log('is dragging');
-        resize = true;
+          isDragging = true;
-        startX = event.clientX;
+          resize = true;
-        initialWidth = parseInt(getComputedStyle(appBarRef).width, 10);
+          startX = event.clientX;
+          initialWidth = parseInt(getComputedStyle(appBarRef).width, 10) + 5;
+        }
       }
-    }
+    }, 100);
   }
 
   function stopDragging() {
     isDragging = false;
     resize = false;
+    $isDown = false;
   }
 
-  function dragSidebar(event) {
+  function dragSidebar(event: MouseEvent) {
     if (!getResizableSidebar()) return;
     if (!isDragging || !$apps.selectedApp) return;
     const deltaX = startX - event.clientX + 60;
@@ -108,7 +120,7 @@
     }
   }
 
-  function updateTopPadding(isStudent) {
+  function updateTopPadding(isStudent: boolean) {
     topPadding = isStudent ? '48px' : '109px';
   }
 
@@ -124,7 +136,7 @@
       event.preventDefault();
       switch (handler.key) {
         case 'A+1':
-          handleAppClick(APPS_CONSTANTS.APPS.LIVE_CHAT);
+          handleAppClick(APPS_CONSTANTS.APPS.COMMENTS);
           break;
         case 'A+2':
           handleAppClick(APPS_CONSTANTS.APPS.QANDA);
@@ -153,11 +165,11 @@
 
 <div
   style={`--top-padding:${topPadding}`}
-  class={`${$apps.open ? 'open dark:bg-black' : 'close dark:bg-black'} root`}
+  class={`${$apps.open ? 'open ' : 'close'} root bg-white dark:bg-black`}
   bind:this={appBarRef}
 >
   <div class="apps">
-    <div class="lg:hidden">
+    <div class="lg:hidden mb-2">
       <IconButton
         buttonClassName="lg:hidden"
         toolTipProps={{ title: 'Settings', hotkeys: ['A', '0'] }}
@@ -170,41 +182,48 @@
       </IconButton>
     </div>
 
-    <IconButton
+    <div class="mb-2 relative">
-      toolTipProps={{ title: 'Live Chat', hotkeys: ['A', '1'] }}
+      <IconButton
-      value={APPS_CONSTANTS.APPS.LIVE_CHAT}
+        toolTipProps={{ title: 'Comments', hotkeys: ['A', '1'] }}
-      onClick={handleAppClick}
+        value={APPS_CONSTANTS.APPS.COMMENTS}
-      selected={APPS_CONSTANTS.APPS.LIVE_CHAT === $apps.selectedApp}
+        onClick={handleAppClick}
-    >
+        contained={APPS_CONSTANTS.APPS.COMMENTS === $apps.selectedApp}
-      <SendAlt size={24} class="carbon-icon dark:text-white" />
+        buttonClassName="relative"
-    </IconButton>
+      >
-
+        <Chip value={$lesson.totalComments} className="absolute -top-2 right-0 bg-primary-500" />
-    <IconButton
+        <SendAlt size={24} class="carbon-icon dark:text-white" />
-      toolTipProps={{ title: 'QandA', hotkeys: ['A', '2'] }}
+      </IconButton>
-      value={APPS_CONSTANTS.APPS.QANDA}
+    </div>
-      onClick={handleAppClick}
+    <div class="mb-2">
-      selected={APPS_CONSTANTS.APPS.QANDA === $apps.selectedApp}
+      <IconButton
-    >
+        toolTipProps={{ title: 'QandA', hotkeys: ['A', '2'] }}
-      <Forum size={24} class="carbon-icon dark:text-white" />
+        value={APPS_CONSTANTS.APPS.QANDA}
-    </IconButton>
+        onClick={handleAppClick}
-
+        contained={APPS_CONSTANTS.APPS.QANDA === $apps.selectedApp}
-    <IconButton
+      >
-      toolTipProps={{ title: 'Notes', hotkeys: ['A', '3'] }}
+        <Forum size={24} class="carbon-icon dark:text-white" />
-      value={APPS_CONSTANTS.APPS.NOTES}
+      </IconButton>
-      onClick={handleAppClick}
+    </div>
-      selected={APPS_CONSTANTS.APPS.NOTES === $apps.selectedApp}
+    <div class="mb-2">
-    >
+      <IconButton
-      <AlignBoxTopLeft size={24} class="carbon-icon dark:text-white" />
+        toolTipProps={{ title: 'Notes', hotkeys: ['A', '3'] }}
-    </IconButton>
+        value={APPS_CONSTANTS.APPS.NOTES}
-
+        onClick={handleAppClick}
-    <IconButton
+        contained={APPS_CONSTANTS.APPS.NOTES === $apps.selectedApp}
-      toolTipProps={{ title: 'Poll', hotkeys: ['A', '4'] }}
+      >
-      value={APPS_CONSTANTS.APPS.POLL}
+        <AlignBoxTopLeft size={24} class="carbon-icon dark:text-white" />
-      onClick={handleAppClick}
+      </IconButton>
-      selected={APPS_CONSTANTS.APPS.POLL === $apps.selectedApp}
+    </div>
-    >
+    <div class="mb-2">
-      <ChartPie size={24} class="carbon-icon dark:text-white" />
+      <IconButton
-    </IconButton>
+        toolTipProps={{ title: 'Poll', hotkeys: ['A', '4'] }}
+        value={APPS_CONSTANTS.APPS.POLL}
+        onClick={handleAppClick}
+        contained={APPS_CONSTANTS.APPS.POLL === $apps.selectedApp}
+      >
+        <ChartPie size={24} class="carbon-icon dark:text-white" />
+      </IconButton>
+    </div>
   </div>
 
   {#if !!$apps.selectedApp}
@@ -216,8 +235,8 @@
     >
       {#if $apps.selectedApp === APPS_CONSTANTS.APPS.QANDA}
         <QandA {handleClose} />
-      {:else if $apps.selectedApp === APPS_CONSTANTS.APPS.LIVE_CHAT}
+      {:else if $apps.selectedApp === APPS_CONSTANTS.APPS.COMMENTS}
-        <LiveChat {handleClose} />
+        <Comments {handleClose} />
       {:else if $apps.selectedApp === APPS_CONSTANTS.APPS.POLL}
         <Poll {handleClose} />
       {:else if $apps.selectedApp === APPS_CONSTANTS.APPS.NOTES}

src/lib/components/Apps/store.js

@@ -1,8 +0,0 @@
-import { writable } from 'svelte/store';
-
-export const apps = writable({
-  open: false,
-  dropdown: false,
-  selectedApp: null,
-  isStudent: false
-});

src/lib/components/Apps/store.ts

@@ -0,0 +1,13 @@
+import { writable } from 'svelte/store';
+
+export const apps = writable<{
+  open: boolean;
+  dropdown: boolean;
+  selectedApp: string | undefined;
+  isStudent: boolean;
+}>({
+  open: false,
+  dropdown: false,
+  selectedApp: undefined,
+  isStudent: false
+});

src/lib/components/Buttons/Close/index.svelte

@@ -2,8 +2,8 @@
   import CloseIcon from 'carbon-icons-svelte/lib/Close.svelte';
   import IconButton from '$lib/components/IconButton/index.svelte';
 
-  export let onClick;
+  export let onClick = () => {};
-  export let contained;
+  export let contained = false;
   export let color = 'text-primary-700 bg-primary-200 dark:bg-neutral-500';
   export let size = 'small';
 </script>

src/lib/components/CodeSnippet/index.svelte

@@ -1,9 +1,7 @@
 <script>
-  import { marked } from 'marked';
-
   export let code = '';
 </script>
 
 <div class="bg-gray-200 dark:bg-gray-500 p-5 rounded-md mb-3">
-  {@html marked('```js\n' + code + '\n```')}
+  {@html code}
 </div>

src/lib/components/Course/components/Lesson/Exercise/EditMode.svelte

@@ -34,9 +34,6 @@
   import { deleteExercise } from '$lib/utils/services/courses';
   import { lesson } from '../store/lessons';
 
-  // import EditContent from "$lib/components/EditContent/index.svelte";
-
-  // let value = readme;
   const extraActions = ['Code Snippets', 'Upload image'];
   const initialQuestionsLength = $questionnaire.questions.length;
 

src/lib/components/Course/components/Lesson/Exercise/UpdateDescription.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
   import QuestionContainer from '$lib/components/QuestionContainer/index.svelte';
-  import EditContent from '$lib/components/EditContent/index.svelte';
   import DateTime from '$lib/components/Form/DateTime.svelte';
   import TextField from '$lib/components/Form/TextField.svelte';
   import { questionnaire } from '../store/exercise';
-  import { marked } from 'marked';
+  import TextEditor from '$lib/components/TextEditor/index.svelte';
 
   export let preview: boolean;
 
@@ -34,13 +33,19 @@
           $questionnaire.is_due_by_dirty = true;
         }}
       />
-      <EditContent
+
-        writeLabel="Description"
+      <div class="mt-3">
-        bind:value={$questionnaire.description}
+        <p class="mb-1">Description</p>
-        placeholder="Start typing your lesson"
+        <TextEditor
-        textAreaHeight="100px"
+          value={$questionnaire.description}
-        onInputChange={() => ($questionnaire.is_description_dirty = true)}
+          onChange={(html) => {
-      />
+            $questionnaire.is_description_dirty = true;
+            $questionnaire.description = html;
+          }}
+          placeholder="Describe the exercise to your student"
+          maxHeight={300}
+        />
+      </div>
     {:else if preview}
       <h2 class="my-1">{$questionnaire.title}</h2>
       <div class="flex items-center">
@@ -62,8 +67,8 @@
         {/if}
       </div>
 
-      <article class="preview prose prose-sm sm:prose p-2">
+      <article class="mt-3 preview prose prose-sm sm:prose p-2">
-        {@html marked($questionnaire.description || 'No description')}
+        {@html $questionnaire.description || 'No description'}
       </article>
     {/if}
   </QuestionContainer>

src/lib/components/Course/components/Lesson/Exercise/ViewMode.svelte

@@ -1,5 +1,4 @@
 <script>
-  import { marked } from 'marked';
   import { fly } from 'svelte/transition';
   import { group, course } from '$lib/components/Course/store';
   import { questionnaire } from '../store/exercise';
@@ -20,7 +19,6 @@
   import { submitExercise } from '$lib/utils/services/courses';
   import { fetchSubmission } from '$lib/utils/services/submissions';
   import { profile } from '$lib/utils/store/user';
-  import MODES from '$lib/utils/constants/mode.js';
   import { exerciseMode } from './store';
 
   export let preview;
@@ -205,8 +203,8 @@
         {/if}
       </div>
 
-      <article class="preview prose prose-sm sm:prose p-2">
+      <article class="mt-3 preview prose prose-sm sm:prose p-2">
-        {@html marked($questionnaire.description || 'No desription')}
+        {@html $questionnaire.description || 'No desription'}
       </article>
 
       <PrimaryButton

src/lib/components/Course/components/Lesson/Materials/index.svelte

@@ -34,6 +34,7 @@
   import ComponentSlide from './components/ComponentSlide.svelte';
   import ComponentVideo from './components/ComponentVideo.svelte';
   import HtmlRender from '$lib/components/HTMLRender/HTMLRender.svelte';
+  import type { LessonPage } from '$lib/utils/types';
 
   export let mode = MODES.view;
   export let prevMode = '';
@@ -46,11 +47,13 @@
   let timeoutId: NodeJS.Timeout;
   let tabs = CONSTANTS.tabs;
   let currentTab = tabs[0].value;
-  let errors = {};
+  let errors: {
-  let editorWindowRef;
+    video: string;
-  let aiButtonRef = {};
+  };
+  let editorWindowRef: Window;
+  let aiButtonRef: HTMLDivElement;
   let openPopover = false;
-  let player = null;
+  let player: HTMLVideoElement;
   let componentsToRender = getComponentOrder(tabs);
   let aiButtonClass =
     'flex items-center px-5 py-2 border border-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md w-full mb-2';
@@ -60,11 +63,11 @@
     () =>
       (currentTab = tab);
 
-  const getValue = (label) => {
+  const getValue = (label: string) => {
     const tabValue = tabs.find((tab) => tab.label === label)?.value;
     return tabValue;
   };
-  async function saveLesson(materials = undefined) {
+  async function saveLesson(materials?: LessonPage['materials']) {
     const _lesson = !!materials
       ? {
           ...$lesson,
@@ -74,7 +77,7 @@
     handleUpdateLessonMaterials(_lesson, lessonId);
   }
 
-  function isNoteEmpty(note) {
+  function isNoteEmpty(note: string) {
     if (!note || typeof note !== 'string') return true;
 
     if (!document) return false;
@@ -87,7 +90,7 @@
     return rawText === '';
   }
 
-  function isMaterialsEmpty(materials) {
+  function isMaterialsEmpty(materials: LessonPage['materials']) {
     const { slide_url, videos, note } = materials;
 
     return isNoteEmpty(note) && !slide_url && isEmpty(videos);
@@ -99,7 +102,7 @@
     }
   }
 
-  function addBadgeValueToTab(materials) {
+  function addBadgeValueToTab(materials: LessonPage['materials']) {
     const { slide_url, videos, note } = materials;
 
     tabs = tabs.map((tab) => {
@@ -132,24 +135,25 @@
 
     if (editorWindowRef) {
       const tmceBody = editorWindowRef?.document?.querySelector('body');
-
+      if (typeof tmceBody?.scrollHeight === 'number') {
-      editorWindowRef?.scrollTo(0, tmceBody?.scrollHeight);
+        editorWindowRef?.scrollTo(0, tmceBody.scrollHeight);
+      }
     }
   }
 
   function callAI(type = '') {
     const _lesson = $lessons.find((les) => les.id === $lesson.id);
-    $input = {
+    $input = JSON.stringify({
       type,
       lessonTitle: _lesson?.title || '',
       courseTitle: $course.title
-    };
+    });
     setTimeout(() => {
       handleSubmit({ preventDefault: () => {} });
     }, 500);
   }
 
-  function initPlyr(_player: any, _video: string | undefined) {
+  function initPlyr(_player: any, _video: LessonPage['materials']['videos']) {
     if (!_player) return;
 
     const players = Array.from(document.querySelectorAll('.plyr-video-trigger')).map((p) => {
@@ -161,9 +165,13 @@
     window.players = players;
   }
 
-  function autoSave(updatedMaterials, _isLoading?: boolean, lessonId?: string) {
+  function autoSave(
+    updatedMaterials: LessonPage['materials'],
+    _isLoading?: boolean,
+    lessonId?: string
+  ) {
     if (timeoutId) clearTimeout(timeoutId);
-
+    console.log('autosaving');
     if (!initAutoSave) {
       initAutoSave = true;
       return;
@@ -193,7 +201,7 @@
     $uploadCourseVideoStore.isModalOpen = false;
   };
 
-  function getComponentOrder(tabs) {
+  function getComponentOrder(tabs = CONSTANTS.tabs) {
     const componentMap = {
       Video: ComponentVideo,
       Slide: ComponentSlide,
@@ -202,6 +210,7 @@
 
     const componentNames = tabs
       .map((tab) => {
+        // @ts-ignore
         const component = componentMap[tab.label];
         return component || null;
       })

src/lib/components/Course/components/Lesson/store/lessons.ts

@@ -1,7 +1,7 @@
 import { writable } from 'svelte/store';
 import type { Writable, Updater } from 'svelte/store';
 import { createLesson, updateLesson, deleteLesson } from '$lib/utils/services/courses';
-import type { Lesson, Course, LessonPage } from '$lib/utils/types';
+import type { Lesson, Course, LessonPage, LessonComment } from '$lib/utils/types';
 
 export const uploadCourseVideoStore = writable({
   isModalOpen: false
@@ -12,7 +12,7 @@ export const lessons: Writable<Lesson[]> = writable([]);
 export const lesson = writable<LessonPage>({
   id: null,
   totalExercises: 0,
-  comments: 0,
+  totalComments: 0,
   isSaving: false,
   materials: {
     note: '',
@@ -23,6 +23,8 @@ export const lesson = writable<LessonPage>({
   lesson_completion: []
 });
 
+export let lessonComments = writable<LessonComment[]>([]);
+
 export const isLessonDirty = writable(false);
 
 export function handleAddLesson() {
@@ -87,7 +89,6 @@ export async function handleUpdateLessonMaterials(lesson: any, lessonId: Lesson[
   };
   delete materials.lesson_completion;
   delete materials.profile;
-  delete materials.totalExercises;
 
   return await updateLesson(materials, lessonId);
 }

src/lib/components/EditContent/index.svelte

@@ -1,117 +0,0 @@
-<script>
-  import { marked } from 'marked';
-
-  let isWriteMode = true;
-  export let writeLabel = 'Write';
-  export let value;
-  export let placeholder = ``;
-  export let onInputChange = () => {};
-  export let textAreaHeight = '';
-  export let textareaRef;
-  export let buttonRef;
-  const activeClassName = 'border-b-2 border-primary-700';
-
-  const handleTabClick = (tab) => () => {
-    isWriteMode = tab === 1;
-  };
-</script>
-
-<div class="root">
-  <div class="flex">
-    <button
-      on:click={handleTabClick(1)}
-      class="focus:outline-none p-2 {isWriteMode && `${activeClassName}`}"
-    >
-      {writeLabel}
-    </button>
-    <button
-      on:click={handleTabClick(2)}
-      class="focus:outline-none p-2 {!isWriteMode && `${activeClassName}`}"
-    >
-      Preview
-    </button>
-
-    {#if $$slots.buttons}
-      <div class="grow" />
-      <div bind:this={buttonRef}>
-        <slot name="buttons" />
-      </div>
-    {/if}
-  </div>
-  <div class="m-2 mb-0 p-0">
-    {#if isWriteMode}
-      <textarea
-        bind:value
-        bind:this={textareaRef}
-        {placeholder}
-        style="height: {textAreaHeight}"
-        class="border border-gray rounded-md p-2 dark:bg-neutral-800 dark:text-white"
-        on:change={onInputChange}
-      />
-    {:else}
-      <article class="preview prose prose-sm sm:prose p-2">
-        {@html marked(value || 'Nothing to preview')}
-      </article>
-    {/if}
-  </div>
-  {#if !isWriteMode}
-    <hr />
-  {/if}
-  <div class="flex justify-between items-center px-2 pb-1">
-    <div class="flex items-center text-sm">
-      <svg
-        class="octicon mr-2"
-        height="16"
-        viewBox="0 0 16 16"
-        version="1.1"
-        width="16"
-        aria-hidden="true"
-      >
-        <path
-          fill-rule="evenodd"
-          d="M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7V8L5.5 9.92 4 8v3H2V5h2l1.5 2L7 5h2v6zm2.99.5L9.5 8H11V5h2v3h1.5l-2.51 3.5z"
-        />
-      </svg>
-      <p class="dark:text-white">
-        Styling with Markdown is supported.
-        <a
-          target="_blank"
-          class="text-primary-500 underline"
-          href="https://guides.github.com/features/mastering-markdown"
-        >
-          Learn more
-        </a>
-      </p>
-    </div>
-  </div>
-</div>
-
-<!-- {@html marked(readme, {
-  breaks: true,
-  gfm: true,
-})} -->
-<style>
-  .root {
-    width: 100%;
-  }
-
-  .form-item {
-    display: flex;
-    align-items: flex-end;
-  }
-
-  textarea {
-    width: 100%;
-    height: 500px;
-  }
-
-  .preview {
-    min-height: 150px;
-  }
-
-  .octicon {
-    display: inline-block;
-    vertical-align: text-top;
-    fill: currentColor;
-  }
-</style>

src/lib/components/Form/TextField.svelte

@@ -7,7 +7,7 @@
   export let placeholder = '';
   export let value: string | number | null;
   export let name = '';
-  export let onKeyDown = () => {};
+  export let onKeyDown = (e) => {};
   export let className = '';
   export let inputClassName = '';
   export let labelClassName = 'font-light';

src/lib/components/HTMLRender/HTMLRender.svelte

@@ -1,6 +1,4 @@
 <script>
-  import { marked } from 'marked';
-
   export let content = '';
   export let className = '';
 </script>
@@ -9,6 +7,6 @@
   {#if $$slots.content}
     <slot name="content" />
   {:else}
-    {@html marked(content, { breaks: true, gfm: true })}
+    {@html content}
   {/if}
 </article>

src/lib/components/IconButton/index.svelte

@@ -1,22 +1,26 @@
-<script>
+<script lang="ts">
   import ToolTip from '../ToolTip/index.svelte';
-  export let onClick = () => {};
+  export let onClick = (v: string) => {};
   export let stopPropagation = false;
   export let disabled = false;
   export let selected = false;
   export let buttonClassName = '';
   export let contained = false;
   export let value = '';
-  export let type = 'button';
+  export let type: 'button' | 'submit' | 'reset' | null | undefined = 'button';
   export let size = 'large';
   export let color = '';
-  export let toolTipProps = {
+  export let toolTipProps: {
+    title: string;
+    hotkeys: string[];
+    direction?: string;
+  } = {
     title: '',
     hotkeys: [],
     direction: ''
   };
 
-  function handleClick(e) {
+  function handleClick(e: Event) {
     if (stopPropagation) {
       e.stopPropagation();
     }

src/lib/components/MarkdownRender/index.svelte

@@ -1,22 +0,0 @@
-<script>
-  import { marked } from 'marked';
-
-  export let content = '';
-  export let disableMaxWidth = false;
-</script>
-
-<article
-  class="m-auto prose prose-sm sm:prose p-2 {disableMaxWidth &&
-    'disable-max-width'}"
->
-  {#if !!content}
-    {@html marked(content, { breaks: true, gfm: true })}
-  {/if}
-</article>
-
-<style>
-  .disable-max-width {
-    max-width: none !important;
-    width: 100%;
-  }
-</style>

src/lib/components/Question/TextareaQuestion/index.svelte

@@ -1,6 +1,5 @@
 <script>
   import CodeSnippet from '$lib/components/CodeSnippet/index.svelte';
-  import { marked } from 'marked';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
   import TextArea from '$lib/components/Form/TextArea.svelte';
@@ -62,7 +61,7 @@
   <div class="ml-4">
     {#if disabled}
       <div class="bg-gray-200 dark:bg-gray-500 p-5 rounded-md mb-3">
-        {@html marked(defaultValue)}
+        {defaultValue}
       </div>
     {:else}
       <TextArea bind:value={defaultValue} rows="5" placeholder="Write your answer here" />

src/lib/components/TextEditor/index.svelte

@@ -7,7 +7,8 @@
   export let onChange = (html: string) => {};
   export let height = 300;
   export let placeholder = '';
-  export let editorWindowRef = null;
+  export let editorWindowRef: Window;
+  export let maxHeight: number | undefined = undefined;
 
   const apiKey = PUBLIC_TINYMCE_API_KEY;
 
@@ -24,6 +25,7 @@
     ],
     lists_indent_on_tab: false,
     min_height: height,
+    max_height: maxHeight,
     placeholder: placeholder,
     init_instance_callback: function (editor: any) {
       editorWindowRef = editor.iframeElement?.contentWindow;

src/lib/utils/services/courses/index.ts

@@ -48,7 +48,7 @@ export async function fetchCourse(courseId?: Course['id'], slug?: Course['slug']
       certificate_theme,
       lessons:lesson(
         id, title,public, lesson_at, call_url, is_unlocked, order, created_at,
-        note, videos, slide_url, call_url, totalExercises:exercise(count),
+        note, videos, slide_url, call_url, totalExercises:exercise(count), totalComments:lesson_comment(count),
         profile:teacher_id(id, avatar_url, fullname),
         lesson_completion(id, profile_id, is_complete)
       ),
@@ -154,7 +154,7 @@ export function fetchLesson(lessonId: Lesson['id']) {
   return supabase
     .from('lesson')
     .select(
-      `id, note, videos, slide_url, call_url, totalExercises:exercise(count), lesson_completion(id, profile_id, is_complete)`
+      `id, note, videos, slide_url, call_url, totalExercises:exercise(count), totalComments:lesson_comment(count), lesson_completion(id, profile_id, is_complete)`
     )
     .eq('id', lessonId)
     .single();

src/lib/utils/types/index.ts

@@ -62,6 +62,21 @@ interface CourseMetadata {
   lessonDownload?: boolean;
 }
 
+export interface LessonCommentInsertPayload {
+  id: number;
+  created_at: string;
+  updated_at: string;
+  lesson_id: string;
+  groupmember_id: string;
+  comment: string;
+}
+export interface LessonComment {
+  name: string;
+  avatar: string;
+  comment: string;
+  commentAt: string;
+}
+
 // Generated from https://supabase-schema.vercel.app/
 export interface Organization {
   id: string /* primary key */;
@@ -195,8 +210,8 @@ export enum VideoType {
 
 export interface LessonPage {
   id?: string | null;
-  totalExercises: Number;
+  totalExercises: number;
-  comments: Number;
+  totalComments: number;
   isSaving: Boolean;
   materials: {
     note: string;
@@ -204,7 +219,9 @@ export interface LessonPage {
     videos: Array<{
       type: string;
       link: string;
-      metadata?: {};
+      metadata?: {
+        svid?: string;
+      };
     }>;
   };
   exercises: [];

src/routes/api/completion/+server.js

@@ -21,7 +21,7 @@ const instruction = {
 
 export async function POST({ request }) {
   const { prompt } = await request.json();
-  const { courseTitle, lessonTitle, type } = prompt;
+  const { courseTitle, lessonTitle, type } = JSON.parse(prompt);
   const response = await openai.createChatCompletion({
     model: 'gpt-3.5-turbo',
     messages: [

src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte

@@ -73,7 +73,8 @@
     prevLessonId = lessonId;
 
     const totalExercises = lessonData?.totalExercises?.[0] && lessonData.totalExercises[0].count;
-    setLesson(lessonData, totalExercises || 0);
+    const totalComments = lessonData?.totalComments?.[0] && lessonData.totalComments[0].count;
+    setLesson(lessonData, totalExercises || 0, totalComments || 0);
     isFetching = false;
   }
 
@@ -171,7 +172,7 @@
     isLoading = false;
   };
 
-  function setLesson(lessonData, totalExercises: number) {
+  function setLesson(lessonData, totalExercises: number, totalComments: number) {
     if (!lessonData) return;
 
     let lesson_completion: LessonCompletion[] = [];
@@ -184,7 +185,12 @@
       ...l,
       id: data.lessonId,
       totalExercises,
-      materials: lessonData,
+      totalComments: totalComments,
+      materials: {
+        videos: lessonData.videos,
+        note: lessonData.note,
+        slide_url: lessonData.slide_url
+      },
       lesson_completion
     }));
   }
@@ -317,10 +323,10 @@
       {/if}
       <button
         class="px-2 my-2 pr-4 border-t-0 border-b-0 border-l-0 border border-gray-300 flex items-center"
-        on:click={() => handleAppClick(APPS_CONSTANTS.APPS.LIVE_CHAT)}
+        on:click={() => handleAppClick(APPS_CONSTANTS.APPS.COMMENTS)}
       >
         <SendAlt size={24} class="carbon-icon" />
-        <span class="ml-1">{$lesson.comments}</span>
+        <span class="ml-1">{$lesson.totalComments}</span>
       </button>
       <button class="px-2 my-2" on:click={markLessonComplete} disabled={isMarkingComplete}>
         {#if getIsLessonComplete($lesson.lesson_completion, $profile.id)}

src/routes/lms/community/[slug]/+page.svelte

@@ -1,5 +1,4 @@
 <script>
-  import { marked } from 'marked';
   import { goto } from '$app/navigation';
   import pluralize from 'pluralize';
   import TrashCanIcon from 'carbon-icons-svelte/lib/TrashCan.svelte';
@@ -334,7 +333,7 @@
           </div>
         {:else}
           <section class="prose prose-sm sm:prose p-2">
-            {@html marked(question.body)}
+            {@html question.body}
           </section>
         {/if}
       </div>
@@ -377,7 +376,7 @@
               {/if}
             </header>
             <article class="prose prose-sm sm:prose p-2">
-              {@html marked(comment.comment)}
+              {@html comment.comment}
             </article>
           </div>
         </div>

src/routes/org/[slug]/community/[slug]/+page.svelte

@@ -1,5 +1,4 @@
 <script>
-  import { marked } from 'marked';
   import pluralize from 'pluralize';
   import TrashCanIcon from 'carbon-icons-svelte/lib/TrashCan.svelte';
   import { SkeletonPlaceholder, SkeletonText } from 'carbon-components-svelte';
@@ -336,7 +335,7 @@
           </div>
         {:else}
           <section class="prose prose-sm sm:prose p-2">
-            {@html marked(question.body)}
+            {@html question.body}
           </section>
         {/if}
       </div>
@@ -379,7 +378,7 @@
               {/if}
             </header>
             <article class="prose prose-sm sm:prose p-2">
-              {@html marked(comment.comment)}
+              {@html comment.comment}
             </article>
           </div>
         </div>