feat: init in-course AI features

apps/web/components/Objects/Activities/DynamicCanva/DynamicCanva.tsx

@@ -1,4 +1,4 @@
-import { useEditor, EditorContent } from "@tiptap/react";
+import { useEditor, EditorContent, BubbleMenu, EditorProvider } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import styled from "styled-components"
 import Youtube from "@tiptap/extension-youtube";
@@ -22,16 +22,24 @@ import ts from 'highlight.js/lib/languages/typescript'
 import html from 'highlight.js/lib/languages/xml'
 import python from 'highlight.js/lib/languages/python'
 import java from 'highlight.js/lib/languages/java'
+import { NoTextInput } from "@components/Objects/Editor/Extensions/NoTextInput/NoTextInput";
+import EditorOptionsProvider from "@components/Contexts/Editor/EditorContext";
+import AICanvaToolkit from "./Elements/AICanvaToolkit";
 
 
 interface Editor {
   content: string;
   activity: any;
-  //course: any;
 }
 
 function Canva(props: Editor) {
-  const isEditable = false;
+  /** 
+  * Important Note : This is a workaround to enable user interaction features to be implemented easily, like text selection, AI features and other planned features, this is set to true but otherwise it should be set to false.
+  * Another workaround is implemented below to disable the editor from being edited by the user by setting the caret-color to transparent and using a custom extension to filter out transactions that add/edit/remove text.
+  * To let the various Custom Extensions know that the editor is not editable, React context (EditorOptionsProvider) will be used instead of props.extension.options.editable. 
+  */
+  const isEditable = true;
+
 
   // Code Block Languages for Lowlight
   lowlight.register('html', html)
@@ -46,6 +54,7 @@ function Canva(props: Editor) {
     editable: isEditable,
     extensions: [
       StarterKit,
+      NoTextInput,
       // Custom Extensions
       InfoCallout.configure({
         editable: isEditable,
@@ -87,21 +96,54 @@ function Canva(props: Editor) {
     content: props.content,
   });
 
+
   return (
-    <CanvaWrapper>
-      <EditorContent editor={editor} />
-    </CanvaWrapper>
+
+    <EditorOptionsProvider options={{ isEditable: false }}>
+      <CanvaWrapper>
+          <AICanvaToolkit activity={props.activity} editor={editor} />
+        <EditorContent editor={editor} />
+      </CanvaWrapper>
+    </EditorOptionsProvider>
+
   );
 }
 
+
+
 const CanvaWrapper = styled.div`
   width: 100%;
   margin: 0 auto;
 
+  .bubble-menu {
+  display: flex;
+  background-color: #0D0D0D;
+  padding: 0.2rem;
+  border-radius: 0.5rem;
+
+  button {
+    border: none;
+    background: none;
+    color: #FFF;
+    font-size: 0.85rem;
+    font-weight: 500;
+    padding: 0 0.2rem;
+    opacity: 0.6;
+
+    &:hover,
+    &.is-active {
+      opacity: 1;
+    }
+  }
+}
+
   // disable chrome outline
 
   .ProseMirror {
 
+    // Workaround to disable editor from being edited by the user.
+    caret-color: transparent;
+
     h1 {
       font-size: 30px;  
       font-weight: 600;

apps/web/components/Objects/Activities/DynamicCanva/Elements/AICanvaToolkit.tsx

@@ -0,0 +1,109 @@
+import React from 'react'
+import { Editor } from '@tiptap/core';
+import learnhouseAI_icon from "public/learnhouse_ai_simple.png";
+import Image from 'next/image';
+import { BookOpen, FormInput, Languages, MoreVertical } from 'lucide-react';
+import { BubbleMenu } from '@tiptap/react';
+import ToolTip from '@components/StyledElements/Tooltip/Tooltip';
+import { AIChatBotStateTypes, useAIChatBot, useAIChatBotDispatch } from '@components/Contexts/AI/AIChatBotContext';
+import { sendActivityAIChatMessage, startActivityAIChatSession } from '@services/ai/ai';
+
+
+
+type AICanvaToolkitProps = {
+    editor: Editor,
+    activity: any
+}
+
+function AICanvaToolkit(props: AICanvaToolkitProps) {
+    return (
+        <BubbleMenu className="w-fit" tippyOptions={{ duration: 100 }} editor={props.editor}>
+            <div style={{ background: 'linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), radial-gradient(105.16% 105.16% at 50% -5.16%, rgba(255, 255, 255, 0.18) 0%, rgba(0, 0, 0, 0) 100%), rgba(2, 1, 25, 0.98)' }}
+                className='py-1 h-10 px-2 w-max text-white rounded-xl shadow-md cursor-pointer flex items-center space-x-2 antialiased'
+            >
+                <div className='flex w-full space-x-1 font-bold text-white/80'><Image width={24} src={learnhouseAI_icon} alt="" /> <div>AI</div> </div>
+                <div>
+                    <MoreVertical className='text-white/50' size={12} />
+                </div>
+                <div className='flex space-x-2'>
+                    <AIActionButton editor={props.editor} activity={props.activity} label='Explain' />
+                    <AIActionButton editor={props.editor} activity={props.activity} label='Summarize' />
+                    <AIActionButton editor={props.editor} activity={props.activity} label='Translate' />
+                    <AIActionButton editor={props.editor} activity={props.activity} label='Examples' />
+                </div>
+            </div>
+        </BubbleMenu>
+    )
+}
+
+function AIActionButton(props: { editor: Editor, label: string, activity: any }) {
+    const dispatchAIChatBot = useAIChatBotDispatch() as any;
+    const aiChatBotState = useAIChatBot() as AIChatBotStateTypes;
+    const [aichat_uuid, setAichat_uuid] = React.useState('');
+
+    async function handleAction(label: string) {
+        const selection = getTipTapEditorSelectedText();
+        const prompt = getPrompt(label, selection);
+        dispatchAIChatBot({ type: 'setIsModalOpen' });
+        await sendMessage(prompt);
+        
+
+    }
+
+    const getTipTapEditorSelectedText = () => {
+        const selection = props.editor.state.selection;
+        const from = selection.from;
+        const to = selection.to;
+        const text = props.editor.state.doc.textBetween(from, to);
+        return text;
+    }
+
+    const getPrompt = (label: string, selection: string) => {
+        if (label === 'Explain') {
+            return `Explain this part of the course "${selection}" keep this course context in mind.`
+        } else if (label === 'Summarize') {
+            return `Summarize this "${selection}" with the course context in mind.`
+        } else if (label === 'Translate') {
+            return `Translate "${selection}" to another language.`
+        } else {
+            return `Give examples to understand "${selection}" better, if possible give context in the course.`
+        }
+    }
+
+    const sendMessage = async (message: string) => {
+        if (aiChatBotState.aichat_uuid) {
+            await dispatchAIChatBot({ type: 'addMessage', payload: { sender: 'user', message: message, type: 'user' } });
+            await dispatchAIChatBot({ type: 'setIsWaitingForResponse' });
+            const response = await sendActivityAIChatMessage(message, aiChatBotState.aichat_uuid, props.activity.activity_uuid)
+            await dispatchAIChatBot({ type: 'setIsNoLongerWaitingForResponse' });
+            await dispatchAIChatBot({ type: 'setChatInputValue', payload: '' });
+            await dispatchAIChatBot({ type: 'addMessage', payload: { sender: 'ai', message: response.message, type: 'ai' } });
+
+        } else {
+            await dispatchAIChatBot({ type: 'addMessage', payload: { sender: 'user', message: message, type: 'user' } });
+            await dispatchAIChatBot({ type: 'setIsWaitingForResponse' });
+            const response = await startActivityAIChatSession(message, props.activity.activity_uuid)
+            await dispatchAIChatBot({ type: 'setAichat_uuid', payload: response.aichat_uuid });
+            await dispatchAIChatBot({ type: 'setIsNoLongerWaitingForResponse' });
+            await dispatchAIChatBot({ type: 'setChatInputValue', payload: '' });
+            await dispatchAIChatBot({ type: 'addMessage', payload: { sender: 'ai', message: response.message, type: 'ai' } });
+        }
+    }
+
+    const tooltipLabel = props.label === 'Explain' ? 'Explain a word or a sentence with AI' : props.label === 'Summarize' ? 'Summarize a long paragraph or text with AI' : props.label === 'Translate' ? 'Translate to different languages with AI' : 'Give examples to understand better with AI'
+    return (
+        <div className='flex space-x-2' >
+            <ToolTip sideOffset={10} slateBlack content={tooltipLabel}>
+                <button onClick={() => handleAction(props.label)} className='flex space-x-1.5 items-center bg-white/10 px-2 py-0.5 rounded-md outline outline-1 outline-neutral-200/20 text-sm font-semibold text-white/70 hover:bg-white/20 hover:outline-neutral-200/40 delay-75 ease-linear transition-all'>
+                    {props.label === 'Explain' && <BookOpen size={16} />}
+                    {props.label === 'Summarize' && <FormInput size={16} />}
+                    {props.label === 'Translate' && <Languages size={16} />}
+                    {props.label === 'Examples' && <div className='text-white/50'>Ex</div>}
+                    <div>{props.label}</div>
+                </button>
+            </ToolTip>
+        </div>
+    )
+}
+
+export default AICanvaToolkit