CLASSROOMIO-T-214: Add comments feature in lesson

2023-10-08 15:34:37 +01:00
parent 0f01e8e574
commit 4f783cbc7c
28 changed files with 411 additions and 398 deletions
@@ -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>
@@ -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>
@@ -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)}>
@@ -2,7 +2,7 @@ export default {
  APPS: {
    QANDA: 'QANDA',
    NOTES: 'NOTES',
-    LIVE_CHAT: 'LIVE_CHAT',
-    POLL: 'POLL',
-  },
+    COMMENTS: 'COMMENTS',
+    POLL: 'POLL'
+  }
 };
@@ -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 initialWidth;
-  let appBarRef;
-  let appContentRef;
+  let isDown = writable(false);
+  let startX: number;
+  let initialWidth: number;
+  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) {
-    if (event.button === 0 && $apps.selectedApp) {
-      event.preventDefault();
-      const isNearLeftBorder = event.clientX - appContentRef.getBoundingClientRect().left < 5;
-      const isNearRightBorder = appContentRef.getBoundingClientRect().right - event.clientX < 5;
+  function startDragging(event: MouseEvent) {
+    console.log('start dragging');
+    $isDown = true;
+    setTimeout(() => {
+      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 (
-        (isNearRightBorder || isNearLeftBorder) &&
-        event.clientX >= 0 &&
-        event.clientX <= window.innerWidth
-      ) {
-        isDragging = true;
-        resize = true;
-        startX = event.clientX;
-        initialWidth = parseInt(getComputedStyle(appBarRef).width, 10);
+        if (
+          (isNearRightBorder || isNearLeftBorder) &&
+          event.clientX >= 0 &&
+          event.clientX <= window.innerWidth
+        ) {
+          console.log('is dragging');
+          isDragging = true;
+          resize = true;
+          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
-      toolTipProps={{ title: 'Live Chat', hotkeys: ['A', '1'] }}
-      value={APPS_CONSTANTS.APPS.LIVE_CHAT}
-      onClick={handleAppClick}
-      selected={APPS_CONSTANTS.APPS.LIVE_CHAT === $apps.selectedApp}
-    >
-      <SendAlt size={24} class="carbon-icon dark:text-white" />
-    </IconButton>
-
-    <IconButton
-      toolTipProps={{ title: 'QandA', hotkeys: ['A', '2'] }}
-      value={APPS_CONSTANTS.APPS.QANDA}
-      onClick={handleAppClick}
-      selected={APPS_CONSTANTS.APPS.QANDA === $apps.selectedApp}
-    >
-      <Forum size={24} class="carbon-icon dark:text-white" />
-    </IconButton>
-
-    <IconButton
-      toolTipProps={{ title: 'Notes', hotkeys: ['A', '3'] }}
-      value={APPS_CONSTANTS.APPS.NOTES}
-      onClick={handleAppClick}
-      selected={APPS_CONSTANTS.APPS.NOTES === $apps.selectedApp}
-    >
-      <AlignBoxTopLeft size={24} class="carbon-icon dark:text-white" />
-    </IconButton>
-
-    <IconButton
-      toolTipProps={{ title: 'Poll', hotkeys: ['A', '4'] }}
-      value={APPS_CONSTANTS.APPS.POLL}
-      onClick={handleAppClick}
-      selected={APPS_CONSTANTS.APPS.POLL === $apps.selectedApp}
-    >
-      <ChartPie size={24} class="carbon-icon dark:text-white" />
-    </IconButton>
+    <div class="mb-2 relative">
+      <IconButton
+        toolTipProps={{ title: 'Comments', hotkeys: ['A', '1'] }}
+        value={APPS_CONSTANTS.APPS.COMMENTS}
+        onClick={handleAppClick}
+        contained={APPS_CONSTANTS.APPS.COMMENTS === $apps.selectedApp}
+        buttonClassName="relative"
+      >
+        <Chip value={$lesson.totalComments} className="absolute -top-2 right-0 bg-primary-500" />
+        <SendAlt size={24} class="carbon-icon dark:text-white" />
+      </IconButton>
+    </div>
+    <div class="mb-2">
+      <IconButton
+        toolTipProps={{ title: 'QandA', hotkeys: ['A', '2'] }}
+        value={APPS_CONSTANTS.APPS.QANDA}
+        onClick={handleAppClick}
+        contained={APPS_CONSTANTS.APPS.QANDA === $apps.selectedApp}
+      >
+        <Forum size={24} class="carbon-icon dark:text-white" />
+      </IconButton>
+    </div>
+    <div class="mb-2">
+      <IconButton
+        toolTipProps={{ title: 'Notes', hotkeys: ['A', '3'] }}
+        value={APPS_CONSTANTS.APPS.NOTES}
+        onClick={handleAppClick}
+        contained={APPS_CONSTANTS.APPS.NOTES === $apps.selectedApp}
+      >
+        <AlignBoxTopLeft size={24} class="carbon-icon dark:text-white" />
+      </IconButton>
+    </div>
+    <div class="mb-2">
+      <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}
-        <LiveChat {handleClose} />
+      {:else if $apps.selectedApp === APPS_CONSTANTS.APPS.COMMENTS}
+        <Comments {handleClose} />
      {:else if $apps.selectedApp === APPS_CONSTANTS.APPS.POLL}
        <Poll {handleClose} />
      {:else if $apps.selectedApp === APPS_CONSTANTS.APPS.NOTES}
@@ -1,8 +0,0 @@
-import { writable } from 'svelte/store';
-
-export const apps = writable({
-  open: false,
-  dropdown: false,
-  selectedApp: null,
-  isStudent: false
-});
@@ -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
+});
@@ -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 contained;
+  export let onClick = () => {};
+  export let contained = false;
  export let color = 'text-primary-700 bg-primary-200 dark:bg-neutral-500';
  export let size = 'small';
 </script>
@@ -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>
@@ -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;

@@ -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"
-        bind:value={$questionnaire.description}
-        placeholder="Start typing your lesson"
-        textAreaHeight="100px"
-        onInputChange={() => ($questionnaire.is_description_dirty = true)}
-      />
+
+      <div class="mt-3">
+        <p class="mb-1">Description</p>
+        <TextEditor
+          value={$questionnaire.description}
+          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">
-        {@html marked($questionnaire.description || 'No description')}
+      <article class="mt-3 preview prose prose-sm sm:prose p-2">
+        {@html $questionnaire.description || 'No description'}
      </article>
    {/if}
  </QuestionContainer>
@@ -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">
-        {@html marked($questionnaire.description || 'No desription')}
+      <article class="mt-3 preview prose prose-sm sm:prose p-2">
+        {@html $questionnaire.description || 'No desription'}
      </article>

      <PrimaryButton
@@ -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 editorWindowRef;
-  let aiButtonRef = {};
+  let errors: {
+    video: string;
+  };
+  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');
-
-      editorWindowRef?.scrollTo(0, tmceBody?.scrollHeight);
+      if (typeof tmceBody?.scrollHeight === 'number') {
+        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;
      })
@@ -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);
 }
@@ -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>
@@ -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';
@@ -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>
@@ -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();
    }
@@ -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>
@@ -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" />
@@ -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;
@@ -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();
@@ -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;
-  comments: Number;
+  totalExercises: 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: [];
@@ -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: [
@@ -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)}
@@ -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>
@@ -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>