@rimori/client 1.0.0

package/src/plugin/PluginController.ts

@@ -0,0 +1,158 @@
+import { Child } from "ibridge-flex";
+import { createClient, SupabaseClient } from '@supabase/supabase-js'
+import { RimoriClient } from "./RimoriClient";
+
+interface SupabaseInfo {
+    url: string,
+    key: string,
+    token: string,
+    expiration: Date,
+    tablePrefix: string,
+    pluginId: string
+}
+
+export class PluginController {
+    private static instance: PluginController;
+    private static client: RimoriClient;
+    private plugin: Child<null, null>;
+    private onceListeners: Map<string, any[]> = new Map();
+    private listeners: Map<string, any[]> = new Map();
+    private communicationSecret: string | null = null;
+    private initialized = false;
+    private supabase: SupabaseClient | null = null;
+    private supabaseInfo: SupabaseInfo | null = null;
+
+    private constructor() {
+        // localStorage.debug = "*";
+        this.plugin = new Child({
+            triggerChild: ({ topic, data, _id }: any) => {
+                // console.log("trigger child with topic:" + topic + " and data: ", data);
+                this.onceListeners.get(topic)?.forEach((callback: any) => callback(_id, data));
+                this.onceListeners.set(topic, []);
+                this.listeners.get(topic)?.forEach((callback: any) => callback(_id, data));
+            }
+        });
+
+        this.emit = this.emit.bind(this);
+        this.onOnce = this.onOnce.bind(this);
+        this.getClient = this.getClient.bind(this);
+        this.subscribe = this.subscribe.bind(this);
+        this.internalEmit = this.internalEmit.bind(this);
+        this.request = this.request.bind(this);
+    }
+
+    public static async getInstance(): Promise<RimoriClient> {
+        if (!PluginController.instance) {
+            PluginController.instance = new PluginController();
+            await PluginController.instance.init();
+            PluginController.client = await RimoriClient.getInstance(
+                PluginController.instance
+            );
+        }
+        return PluginController.client;
+    }
+
+    async init() {
+        if (this.initialized) return;
+
+        // Wait for the plugin to be ready
+        await this.plugin.handshake().then(() => this.initialized = true).catch((error: any) => {
+            console.error("Failed to initialize the plugin communication:", error);
+        });
+    }
+
+    private getSecret() {
+        if (!this.communicationSecret) {
+            const secret = new URLSearchParams(window.location.search).get("secret");
+            if (!secret) {
+                throw new Error("Communication secret not found in URL as query parameter");
+            }
+            this.communicationSecret = secret;
+        }
+        return this.communicationSecret;
+    }
+
+    public async getClient(): Promise<{ supabase: SupabaseClient, tablePrefix: string, pluginId: string }> {
+        if (
+            this.supabase &&
+            this.supabaseInfo &&
+            this.supabaseInfo.expiration > new Date()
+        ) {
+            return { supabase: this.supabase, tablePrefix: this.supabaseInfo.tablePrefix, pluginId: this.supabaseInfo.pluginId };
+        }
+
+        this.supabaseInfo = await this.request<SupabaseInfo>("getSupabaseAccess");
+
+        this.supabase = createClient(this.supabaseInfo.url, this.supabaseInfo.key, {
+            accessToken: () => Promise.resolve(this.getToken())
+        });
+
+        return { supabase: this.supabase, tablePrefix: this.supabaseInfo.tablePrefix, pluginId: this.supabaseInfo.pluginId };
+    }
+
+    public async getToken() {
+        if (this.supabaseInfo && this.supabaseInfo.expiration && this.supabaseInfo.expiration > new Date()) {
+            return this.supabaseInfo.token;
+        }
+
+        const response = await this.request<{ token: string, expiration: Date }>("getSupabaseAccess");
+
+        if (!this.supabaseInfo) {
+            throw new Error("Supabase info not found");
+        }
+
+        this.supabaseInfo.token = response.token;
+        this.supabaseInfo.expiration = response.expiration;
+
+        return this.supabaseInfo.token;
+    }
+
+    public getSupabaseUrl() {
+        if (!this.supabaseInfo) {
+            throw new Error("Supabase info not found");
+        }
+
+        return this.supabaseInfo.url;
+    }
+
+    public emit(eventName: string, data?: any) {
+        this.internalEmit(eventName, 0, data);
+    }
+
+    // the communication needs to have an id to be able to distinguish between different responses
+    private internalEmit(eventName: string, id: number, data?: any) {
+        this.init().then(() => this.plugin.emitToParent(eventName, { data, _id: id, secret: this.getSecret() }));
+    }
+
+    public subscribe(eventName: string, callback: (_id: number, data: any) => void) {
+        if (!this.listeners.has(eventName)) {
+            this.listeners.set(eventName, []);
+        }
+
+        this.listeners.get(eventName)?.push(callback);
+    }
+
+    public onOnce(eventName: string, callback: (data: any) => void) {
+        if (!this.onceListeners.has(eventName)) {
+            this.onceListeners.set(eventName, []);
+        }
+
+        this.onceListeners.get(eventName)?.push(callback);
+    }
+
+    async request<T>(topic: string, data: any = {}): Promise<T> {
+        return await new Promise((resolve) => {
+            let triggered = false;
+            const id = Math.random();
+
+            this.internalEmit(topic, id, data);
+
+            this.subscribe(topic, (_id: number, data: any) => {
+                if (triggered || (_id !== id && _id !== 0)) return;
+                triggered = true;
+
+                resolve(data)
+            })
+        });
+    }
+}

package/src/plugin/RimoriClient.ts

@@ -0,0 +1,207 @@
+import { PluginController } from "./PluginController";
+import { SupabaseClient } from "@supabase/supabase-js";
+import { SettingsController } from "../controller/SettingsController";
+import { GenericSchema } from "@supabase/supabase-js/dist/module/lib/types";
+import { getSTTResponse, getTTSResponse } from "../controller/VoiceController";
+import { PostgrestQueryBuilder, PostgrestFilterBuilder } from "@supabase/postgrest-js";
+import { SharedContentController, BasicAssignment } from "../controller/SharedContentController";
+import { streamChatGPT, Message, Tool, OnLLMResponse, generateText } from "../controller/AIController";
+import { generateObject as generateObjectFunction, ObjectRequest } from "../controller/ObjectController";
+
+interface RimoriClientOptions {
+    pluginController: PluginController;
+    supabase: SupabaseClient;
+    tablePrefix: string;
+    pluginId: string;
+}
+
+export class RimoriClient {
+    private static instance: RimoriClient;
+    private superbase: SupabaseClient;
+    private plugin: PluginController;
+    public functions: SupabaseClient["functions"];
+    public storage: SupabaseClient["storage"];
+    public pluginId: string;
+    public tablePrefix: string;
+    private settingsController: SettingsController;
+    private sharedContentController: SharedContentController;
+
+    private constructor(options: RimoriClientOptions) {
+        this.superbase = options.supabase;
+        this.pluginId = options.pluginId;
+        this.plugin = options.pluginController;
+        this.tablePrefix = options.tablePrefix;
+        this.storage = this.superbase.storage;
+        this.functions = this.superbase.functions;
+        this.settingsController = new SettingsController(options.supabase, options.pluginId);
+        this.sharedContentController = new SharedContentController(this);
+        this.rpc = this.rpc.bind(this);
+        this.from = this.from.bind(this);
+        this.emit = this.emit.bind(this);
+        this.request = this.request.bind(this);
+        this.subscribe = this.subscribe.bind(this);
+        this.getSettings = this.getSettings.bind(this);
+        this.setSettings = this.setSettings.bind(this);
+        this.getAIResponse = this.getAIResponse.bind(this);
+        this.generateObject = this.generateObject.bind(this);
+        this.getVoiceResponse = this.getVoiceResponse.bind(this);
+        this.getAIResponseStream = this.getAIResponseStream.bind(this);
+        this.getVoiceToTextResponse = this.getVoiceToTextResponse.bind(this);
+    }
+
+    public static async getInstance(pluginController: PluginController): Promise<RimoriClient> {
+        if (!RimoriClient.instance) {
+            const { supabase, tablePrefix, pluginId } = await pluginController.getClient();
+            RimoriClient.instance = new RimoriClient({ pluginController, supabase, tablePrefix, pluginId });
+        }
+        return RimoriClient.instance;
+    }
+
+    public from<
+        TableName extends string & keyof GenericSchema['Tables'],
+        Table extends GenericSchema['Tables'][TableName]
+    >(relation: TableName): PostgrestQueryBuilder<GenericSchema, Table, TableName>
+    public from<
+        ViewName extends string & keyof GenericSchema['Views'],
+        View extends GenericSchema['Views'][ViewName]
+    >(relation: ViewName): PostgrestQueryBuilder<GenericSchema, View, ViewName>
+    public from(relation: string): PostgrestQueryBuilder<GenericSchema, any, any> {
+        return this.superbase.from(this.getTableName(relation));
+    }
+
+    /**
+    * Perform a function call.
+    *
+    * @param functionName - The function name to call
+    * @param args - The arguments to pass to the function call
+    * @param options - Named parameters
+    * @param options.head - When set to `true`, `data` will not be returned.
+    * Useful if you only need the count.
+    * @param options.get - When set to `true`, the function will be called with
+    * read-only access mode.
+    * @param options.count - Count algorithm to use to count rows returned by the
+    * function. Only applicable for [set-returning
+    * functions](https://www.postgresql.org/docs/current/functions-srf.html).
+    *
+    * `"exact"`: Exact but slow count algorithm. Performs a `COUNT(*)` under the
+    * hood.
+    *
+    * `"planned"`: Approximated but fast count algorithm. Uses the Postgres
+    * statistics under the hood.
+    *
+    * `"estimated"`: Uses exact count for low numbers and planned count for high
+    * numbers.
+    */
+    rpc<Fn extends GenericSchema['Functions'][string], FnName extends string & keyof GenericSchema['Functions']>(
+        functionName: FnName,
+        args: Fn['Args'] = {},
+        options: {
+            head?: boolean
+            get?: boolean
+            count?: 'exact' | 'planned' | 'estimated'
+        } = {}
+    ): PostgrestFilterBuilder<
+        GenericSchema,
+        Fn['Returns'] extends any[]
+        ? Fn['Returns'][number] extends Record<string, unknown>
+        ? Fn['Returns'][number]
+        : never
+        : never,
+        Fn['Returns'],
+        string,
+        null
+    > {
+        return this.superbase.rpc(this.getTableName(functionName), args, options)
+    }
+
+    private getTableName(type: string) {
+        return this.tablePrefix + "_" + type;
+    }
+
+    public subscribe(eventName: string, callback: (_id: number, data: any) => void) {
+        this.plugin.subscribe(eventName, callback);
+    }
+
+    public request<T>(eventName: string, data?: any): Promise<T> {
+        return this.plugin.request(eventName, data);
+    }
+
+    public emit(eventName: string, data: any) {
+        this.plugin.emit(eventName, data);
+    }
+
+    /**
+    * Get the settings for the plugin. T can be any type of settings, UserSettings or SystemSettings.
+    * @param defaultSettings The default settings to use if no settings are found.
+    * @param genericSettings The type of settings to get.
+    * @returns The settings for the plugin. 
+    */
+    public async getSettings<T extends object>(defaultSettings: T, genericSettings?: "user" | "system"): Promise<T> {
+        return this.settingsController.getSettings<T>(defaultSettings, genericSettings);
+    }
+
+    public async setSettings(settings: any, genericSettings?: "user" | "system") {
+        await this.settingsController.setSettings(settings, genericSettings);
+    }
+
+    public async getAIResponse(messages: Message[], tools?: Tool[]): Promise<string> {
+        const token = await this.plugin.getToken();
+        return generateText(messages, tools || [], token).then(response => response.messages[0].content[0].text);
+    }
+
+    public async getAIResponseStream(messages: Message[], onMessage: OnLLMResponse, tools?: Tool[]) {
+        const token = await this.plugin.getToken();
+        streamChatGPT(messages, tools || [], onMessage, token);
+    }
+
+    public async getVoiceResponse(text: string, voice = "alloy", speed = 1, language?: string): Promise<Blob> {
+        return getTTSResponse(
+            this.plugin.getSupabaseUrl(),
+            { input: text, voice, speed, language },
+            await this.plugin.getToken()
+        );
+    }
+
+    public getVoiceToTextResponse(file: Blob): Promise<string> {
+        return getSTTResponse(this.superbase, file);
+    }
+
+    public async generateObject(request: ObjectRequest): Promise<any> {
+        const token = await this.plugin.getToken();
+        return generateObjectFunction(request, token);
+    }
+
+    /**
+     * Fetch new shared content.
+     * @param type The type of shared content to fetch. E.g. assignments, exercises, etc.
+     * @param generatorInstructions The instructions for the generator.
+     * @param filter The filter for the shared content.
+     * @returns The new shared content.
+     */
+    public async fetchNewSharedContent<T, R = T & BasicAssignment>(
+        type: string,
+        generatorInstructions: (reservedTopics: string[]) => Promise<ObjectRequest> | ObjectRequest,
+        filter?: { column: string, value: string | number | boolean },
+    ): Promise<R[]> {
+        return this.sharedContentController.fetchNewSharedContent(type, generatorInstructions, filter);
+    }
+
+    /**
+     * Get a shared content item by id.
+     * @param type The type of shared content to get. E.g. assignments, exercises, etc.
+     * @param id The id of the shared content item.
+     * @returns The shared content item.
+     */
+    public async getSharedContent<T extends BasicAssignment>(type: string, id: string): Promise<T> {
+        return this.sharedContentController.getSharedContent(type, id);
+    }
+
+    /**
+     * Complete a shared content item.
+     * @param type The type of shared content to complete. E.g. assignments, exercises, etc.
+     * @param assignmentId The id of the shared content item to complete.
+     */
+    public async completeSharedContent(type: string, assignmentId: string) {
+        return this.sharedContentController.completeSharedContent(type, assignmentId);
+    }
+}

package/src/plugin/ThemeSetter.ts

@@ -0,0 +1,17 @@
+export function setTheme() {
+  const urlParams = new URLSearchParams(window.location.search);
+
+  let theme = urlParams.get('theme');
+  const isSidebar = urlParams.get('applicationMode') === "sidebar";
+
+  if (!theme || theme === 'system') {
+    theme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+
+  document.documentElement.classList.add("dark:text-gray-200", "bg-white");
+
+  if (theme === 'dark') {
+    document.documentElement.classList.add('dark', isSidebar ? "bg-gray-920" : "bg-gray-950");
+    document.documentElement.style.background = isSidebar ? "rgb(6, 12, 30)" : "rgb(3, 7, 18)";
+  }
+}

package/src/providers/EventEmitter.ts

@@ -0,0 +1,48 @@
+type Listener<T = any> = (event: T) => void;
+
+export class EventEmitter {
+  private events: Map<string, Listener[]> = new Map();
+
+  constructor() {
+    this.on = this.on.bind(this);
+    this.once = this.once.bind(this);
+    this.emit = this.emit.bind(this);
+    this.removeListener = this.removeListener.bind(this);
+  }
+
+  // Subscribe to an event
+  on<T = any>(eventName: string, listener: Listener<T>): void {
+    if (!this.events.has(eventName)) {
+      this.events.set(eventName, []);
+    }
+    this.events.get(eventName)!.push(listener);
+  }
+
+  // Subscribe to an event for a single invocation
+  once<T = any>(eventName: string, listener: Listener<T>): void {
+    const onceWrapper: Listener<T> = (event) => {
+      this.removeListener(eventName, onceWrapper);
+      listener(event);
+    };
+    this.on(eventName, onceWrapper);
+  }
+
+  // Remove a specific listener
+  removeListener<T = any>(eventName: string, listener: Listener<T>): void {
+    const listeners = this.events.get(eventName);
+    if (!listeners) return;
+
+    this.events.set(eventName, listeners.filter((l) => l !== listener));
+  }
+
+  // Emit an event
+  emit<T = any>(eventName: string, data?: T): void {
+    const listeners = this.events.get(eventName);
+    console.log("emit", eventName, data, listeners);
+    if (!listeners) return;
+
+    listeners.forEach((listener) => listener(data));
+  }
+}
+const emitter = new EventEmitter();
+export const EmitterSingleton = emitter;

package/src/providers/EventEmitterContext.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import React, { createContext, useContext, useRef } from "react";
+import { EmitterSingleton, EventEmitter } from "./EventEmitter";
+
+// Create the Context
+const EventEmitterContext = createContext<EventEmitter | null>(null);
+
+// Provider Component
+export const EventEmitterProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const eventEmitterRef = useRef(EmitterSingleton);
+
+  return (
+    <EventEmitterContext.Provider value={eventEmitterRef.current}>
+      {children}
+    </EventEmitterContext.Provider>
+  );
+};
+
+// Hook to use the EventEmitter
+export const useEventEmitter = (): EventEmitter => {
+  const context = useContext(EventEmitterContext);
+  if (!context) {
+    throw new Error("useEventEmitter must be used within an EventEmitterProvider");
+  }
+  return context;
+};

package/src/providers/PluginProvider.tsx

@@ -0,0 +1,68 @@
+import React, { createContext, useContext, ReactNode, useEffect, useState } from 'react';
+import { PluginController } from '../plugin/PluginController';
+import { RimoriClient } from '../plugin/RimoriClient';
+interface PluginProviderProps {
+    children: ReactNode;
+}
+
+const PluginContext = createContext<RimoriClient | null>(null);
+
+
+export const PluginProvider: React.FC<PluginProviderProps> = ({ children }) => {
+    const [plugin, setPlugin] = useState<RimoriClient | null>(null);
+    //route change
+    useEffect(() => {
+        let lastHash = window.location.hash;
+
+        setInterval(() => {
+            if (lastHash !== window.location.hash) {
+                lastHash = window.location.hash;
+                console.log('url changed:', lastHash);
+                plugin?.emit('urlChange', window.location.hash);
+            }
+        }, 100);
+        PluginController.getInstance().then(setPlugin);
+    }, []);
+
+    //context menu
+    useEffect(() => {
+        let isOpen = false;
+        const handleContextMenu = (e: MouseEvent) => {
+            const selection = window.getSelection()?.toString().trim();
+            if (selection) {
+                e.preventDefault();
+                // console.log('context menu', selection);
+                plugin?.emit('contextMenu', { text: selection, x: e.clientX, y: e.clientY, open: true });
+                isOpen = true;
+            }
+        };
+
+        // Hide the menu on click outside
+        const handleClick = () => isOpen && plugin?.emit('contextMenu', { text: '', x: 0, y: 0, open: false });
+
+        document.addEventListener("click", handleClick);
+        document.addEventListener('contextmenu', handleContextMenu);
+        return () => {
+            document.removeEventListener("click", handleClick);
+            document.removeEventListener('contextmenu', handleContextMenu);
+        };
+    }, [plugin]);
+
+    if(!plugin){
+        return ""
+    }
+
+    return (
+        <PluginContext.Provider value={plugin}>
+            {children}
+        </PluginContext.Provider>
+    );
+};
+
+export const usePlugin = () => {
+    const context = useContext(PluginContext);
+    if (context === null) {
+        throw new Error('usePlugin must be used within an PluginProvider');
+    }
+    return context;
+};

package/src/style.scss

@@ -0,0 +1,136 @@
+dialog::backdrop {
+  backdrop-filter: blur(2px);
+  // background: rgb(255, 255, 255, 0.5);
+}
+
+.dark * dialog::backdrop {
+  background: transparent;
+}
+
+.tiptap {
+  padding-top: 5px;
+  padding-left: 7px;
+  /* min-height: 300px; */
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply font-bold;
+    margin-bottom: 1rem;
+  }
+
+  h1 {
+    @apply text-4xl;
+  }
+
+  h2 {
+    @apply text-3xl;
+  }
+
+  h3 {
+    @apply text-2xl;
+  }
+
+  h4 {
+    @apply text-xl;
+  }
+
+  h5 {
+    @apply text-lg;
+  }
+
+  h6 {
+    @apply text-base;
+  }
+
+  p {
+    @apply mb-4;
+  }
+
+  a {
+    @apply text-blue-600 hover:text-blue-800;
+    text-decoration: none;
+  }
+
+  a:hover {
+    @apply underline;
+  }
+
+  ul {
+    @apply list-disc pl-8;
+
+    li>p {
+      @apply mb-1;
+    }
+  }
+
+  ol {
+    @apply list-decimal pl-7;
+
+    li>p {
+      @apply mb-1;
+    }
+  }
+
+  blockquote {
+    @apply border-l-4 pl-4 italic text-gray-600 my-4;
+    border-color: #ccc;
+  }
+
+  code {
+    font-family: monospace;
+  }
+
+  pre {
+    @apply bg-gray-800 text-gray-500 p-4 rounded-lg overflow-x-auto;
+    font-family: monospace;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
+
+  img {
+    @apply max-w-full h-auto rounded-lg my-4;
+  }
+
+  table {
+    @apply table-auto w-full border-collapse mb-4;
+  }
+
+  th,
+  td {
+    @apply border px-4 py-2 text-left;
+  }
+
+  th {
+    @apply bg-gray-500 font-semibold;
+  }
+
+  tr:nth-child(even) {
+    @apply bg-gray-400;
+  }
+
+  @media (max-width: 768px) {
+    h1 {
+      @apply text-3xl;
+    }
+
+    h2 {
+      @apply text-2xl;
+    }
+
+    p {
+      @apply text-base;
+    }
+
+    img {
+      @apply max-w-full;
+    }
+  }
+}

package/src/utils/PluginUtils.ts

@@ -0,0 +1,26 @@
+export function isFullscreen() {
+    return !!document.fullscreenElement;
+}
+
+export function triggerFullscreen(onStateChange: (isFullscreen: boolean) => void, selector?: string) {
+    document.addEventListener("fullscreenchange", () => {
+        onStateChange(isFullscreen());
+    });
+    try {
+        const ref = document.querySelector(selector || "#root")!
+        if (!isFullscreen()) {
+            // @ts-ignore
+            ref.requestFullscreen() || ref.webkitRequestFullscreen()
+        } else {
+            // @ts-ignore
+            document.exitFullscreen() || document.webkitExitFullscreen()
+        }
+    } catch (error: any) {
+        console.error("Failed to enter fullscreen", error.message);
+    }
+    onStateChange(isFullscreen());
+}
+
+
+
+