@rimori/react-client 0.1.0

package/dist/rimori-client/src/plugin/StandaloneClient.js

@@ -0,0 +1,115 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { createClient } from '@supabase/supabase-js';
+import { EventBus } from '../fromRimori/EventBus';
+import { DEFAULT_ANON_KEY, DEFAULT_ENDPOINT } from '../utils/endpoint';
+export class StandaloneClient {
+    constructor(config) {
+        this.supabase = createClient(config.url, config.key);
+        this.config = config;
+    }
+    static getInstance() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!StandaloneClient.instance) {
+                const config = yield fetch('https://app.rimori.se/config.json')
+                    .then((res) => res.json())
+                    .catch((err) => {
+                    console.warn('Error fetching config.json, using default values', err);
+                });
+                StandaloneClient.instance = new StandaloneClient({
+                    url: (config === null || config === void 0 ? void 0 : config.SUPABASE_URL) || DEFAULT_ENDPOINT,
+                    key: (config === null || config === void 0 ? void 0 : config.SUPABASE_ANON_KEY) || DEFAULT_ANON_KEY,
+                    backendUrl: (config === null || config === void 0 ? void 0 : config.BACKEND_URL) || 'https://api.rimori.se',
+                });
+            }
+            return StandaloneClient.instance;
+        });
+    }
+    getClient() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.supabase;
+        });
+    }
+    needsLogin() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { error } = yield this.supabase.auth.getUser();
+            return error !== null;
+        });
+    }
+    login(email, password) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { error } = yield this.supabase.auth.signInWithPassword({ email, password });
+            if (error) {
+                console.error('Login failed:', error);
+                return false;
+            }
+            console.log('Successfully logged in');
+            return true;
+        });
+    }
+    static initListeners(pluginId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            console.warn('The plugin seams to not be running inside the Rimori platform. Switching to development standalone mode.');
+            // console.log("event that needs to be handled", event);
+            const { supabase, config } = yield StandaloneClient.getInstance();
+            // EventBus.on("*", async (event) => {
+            EventBus.respond('standalone', 'global.supabase.requestAccess', () => __awaiter(this, void 0, void 0, function* () {
+                var _a;
+                const session = yield supabase.auth.getSession();
+                console.log('session', session);
+                // Call the NestJS backend endpoint instead of the Supabase edge function
+                // get current guild id if any
+                let guildId = null;
+                try {
+                    const { data: { user }, } = yield supabase.auth.getUser();
+                    if (user) {
+                        const { data: profile } = yield supabase
+                            .from('profiles')
+                            .select('current_guild_id')
+                            .eq('user_id', user.id)
+                            .maybeSingle();
+                        guildId = (profile === null || profile === void 0 ? void 0 : profile.current_guild_id) || null;
+                    }
+                }
+                catch (_) {
+                    guildId = null;
+                }
+                const response = yield fetch(`${config.backendUrl}/plugin/token`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        Authorization: `Bearer ${(_a = session.data.session) === null || _a === void 0 ? void 0 : _a.access_token}`,
+                    },
+                    body: JSON.stringify({
+                        pluginId: pluginId,
+                        guildId: guildId,
+                    }),
+                });
+                if (!response.ok) {
+                    const errorText = yield response.text();
+                    throw new Error(`Failed to get plugin token. ${response.status}: ${errorText}`);
+                }
+                const data = yield response.json();
+                return {
+                    token: data.token,
+                    pluginId: pluginId,
+                    url: config.url,
+                    key: config.key,
+                    backendUrl: config.backendUrl,
+                    tablePrefix: pluginId,
+                    expiration: new Date(Date.now() + 1000 * 60 * 60 * 1.5), // 1.5 hours
+                };
+            }));
+            EventBus.on('*', (event) => __awaiter(this, void 0, void 0, function* () {
+                console.log('[standalone] would send event to parent', event);
+            }), ['standalone']);
+        });
+    }
+}

package/dist/rimori-client/src/utils/difficultyConverter.d.ts

@@ -0,0 +1,4 @@
+export type LanguageLevel = 'Pre-A1' | 'A1' | 'A2' | 'B1' | 'B2' | 'C1' | 'C2' | 'Post-C2';
+export declare function getDifficultyLevel(difficulty: LanguageLevel): number;
+export declare function getDifficultyLabel(difficulty: number): LanguageLevel;
+export declare function getNeighborDifficultyLevel(difficulty: LanguageLevel, difficultyAdjustment: number): LanguageLevel;

package/dist/rimori-client/src/utils/difficultyConverter.js

@@ -0,0 +1,10 @@
+const codes = ['Pre-A1', 'A1', 'A2', 'B1', 'B2', 'C1', 'C2', 'Post-C2'];
+export function getDifficultyLevel(difficulty) {
+    return codes.indexOf(difficulty) + 1;
+}
+export function getDifficultyLabel(difficulty) {
+    return codes[difficulty];
+}
+export function getNeighborDifficultyLevel(difficulty, difficultyAdjustment) {
+    return getDifficultyLabel(getDifficultyLevel(difficulty) + difficultyAdjustment - 1);
+}

package/dist/rimori-client/src/utils/endpoint.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_ENDPOINT = "https://pheptqdoqsdnadgoihvr.supabase.co";
+export declare const DEFAULT_ANON_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InBoZXB0cWRvcXNkbmFkZ29paHZyIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MzE2OTY2ODcsImV4cCI6MjA0NzI3MjY4N30.4GPFAXTF8685FaXISdAPNCIM-H3RGLo8GbyhQpu1mP0";

package/dist/rimori-client/src/utils/endpoint.js

@@ -0,0 +1,2 @@
+export const DEFAULT_ENDPOINT = 'https://pheptqdoqsdnadgoihvr.supabase.co';
+export const DEFAULT_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InBoZXB0cWRvcXNkbmFkZ29paHZyIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MzE2OTY2ODcsImV4cCI6MjA0NzI3MjY4N30.4GPFAXTF8685FaXISdAPNCIM-H3RGLo8GbyhQpu1mP0';

package/dist/style.css

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

package/dist/style.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../src/style.scss"],"names":[],"mappings":"AAAA;EACE;;;AAIF;EACE;;;AAGF;EACE;EACA;AACA;;AAEA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAEA;EACE;;AAIJ;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;AAAA;EAEE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE","file":"style.css"}

package/dist/utils/PluginUtils.d.ts

@@ -0,0 +1,2 @@
+export declare function isFullscreen(): boolean;
+export declare function triggerFullscreen(onStateChange: (isFullscreen: boolean) => void, selector?: string): void;

package/dist/utils/PluginUtils.js

@@ -0,0 +1,23 @@
+export function isFullscreen() {
+    return !!document.fullscreenElement;
+}
+export function triggerFullscreen(onStateChange, selector) {
+    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) {
+        console.error('Failed to enter fullscreen', error.message);
+    }
+    onStateChange(isFullscreen());
+}

package/eslint.config.js

@@ -0,0 +1,53 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+import prettier from 'eslint-plugin-prettier';
+import prettierConfig from 'eslint-config-prettier';
+
+export default [
+  { ignores: ['dist', 'node_modules', 'build', '*.js'] },
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  prettierConfig,
+  {
+    files: ['**/*.{ts,tsx,js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.jest,
+      },
+      sourceType: 'module',
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+      prettier: prettier,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+      '@typescript-eslint/no-unused-vars': 'warn',
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/no-floating-promises': 'warn',
+      '@typescript-eslint/no-unsafe-argument': 'warn',
+      '@typescript-eslint/explicit-function-return-type': 'warn',
+      '@typescript-eslint/explicit-module-boundary-types': 'warn',
+      '@typescript-eslint/no-unsafe-assignment': 'warn',
+      '@typescript-eslint/no-unsafe-member-access': 'warn',
+      '@typescript-eslint/no-unsafe-call': 'warn',
+      '@typescript-eslint/no-unsafe-return': 'warn',
+      '@typescript-eslint/no-inferrable-types': 'warn',
+      '@typescript-eslint/no-non-null-assertion': 'warn',
+      '@typescript-eslint/ban-ts-comment': 'warn',
+      'prettier/prettier': 'error',
+    },
+  },
+];

package/index.ts

@@ -0,0 +1,6 @@
+// Re-export everything
+export * from './src/hooks/UseChatHook';
+export * from './src/providers/PluginProvider';
+export * from './src/utils/FullscreenUtils';
+export { FirstMessages } from './src/components/ai/utils';
+export { useTranslation } from './src/hooks/I18nHooks';

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@rimori/react-client",
+  "version": "0.1.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsc && sass src/style.scss:dist/style.css",
+    "dev": "tsc -w  --preserveWatchOutput",
+    "css-dev": "sass --watch src/style.scss:dist/style.css",
+    "lint": "eslint . --fix",
+    "format": "prettier --write ."
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "@rimori/client": "^2.0.0"
+  },
+  "dependencies": {
+    "@tiptap/react": "2.10.3",
+    "@tiptap/starter-kit": "2.10.3",
+    "html2canvas": "1.4.1",
+    "react-icons": "5.4.0",
+    "tiptap-markdown": "0.8.10"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.37.0",
+    "@rimori/client": "^2.0.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react-hooks": "^7.0.0",
+    "eslint-plugin-react-refresh": "^0.4.23",
+    "form-data": "^4.0.2",
+    "globals": "^16.4.0",
+    "node-fetch": "^3.3.2",
+    "prettier": "^3.6.2",
+    "sass": "^1.82.0",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.46.0"
+  }
+}

package/prettier.config.js

@@ -0,0 +1,8 @@
+export default {
+  printWidth: 120,
+  singleQuote: true,
+  trailingComma: "all",
+  semi: true,
+  tabWidth: 2,
+  useTabs: false,
+};

package/src/components/ContextMenu.tsx

@@ -0,0 +1,177 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { EventBus, RimoriClient, MenuEntry } from '@rimori/client';
+
+export interface Position {
+  x: number;
+  y: number;
+  text?: string;
+}
+
+const ContextMenu = ({ client }: { client: RimoriClient }) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [actions, setActions] = useState<MenuEntry[]>([]);
+  const [position, setPosition] = useState<Position>({ x: 0, y: 0 });
+  const [openOnTextSelect, setOpenOnTextSelect] = useState(false);
+  const [menuWidth, setMenuWidth] = useState<number>(0);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const isMobile = window.innerWidth < 768;
+
+  /**
+   * Calculates position for mobile context menu based on selected text bounds.
+   * Centers the menu horizontally over the selected text and positions it 30px below the text's end.
+   * @param selectedText - The currently selected text
+   * @param menuWidth - The width of the menu to center properly
+   * @returns Position object with x and y coordinates
+   */
+  const calculateMobilePosition = (selectedText: string, menuWidth: number = 0): Position => {
+    const selection = window.getSelection();
+    if (!selection || !selectedText) {
+      return { x: 0, y: 0, text: selectedText };
+    }
+
+    const range = selection.getRangeAt(0);
+    const rect = range.getBoundingClientRect();
+
+    // Center horizontally over the selected text, accounting for menu width
+    const centerX = rect.left + rect.width / 2 - menuWidth / 2;
+
+    // Position 12px below where the text ends vertically
+    const textEndY = rect.bottom + 12;
+
+    return { x: centerX, y: textEndY, text: selectedText };
+  };
+
+  useEffect(() => {
+    const actions = client.plugin
+      .getPluginInfo()
+      .installedPlugins.flatMap((p) => p.context_menu_actions)
+      .filter(Boolean);
+    setActions(actions);
+    setOpenOnTextSelect(client.plugin.getUserInfo().context_menu_on_select);
+
+    EventBus.on<{ actions: MenuEntry[] }>('global.contextMenu.createActions', ({ data }) => {
+      setActions([...data.actions, ...actions]);
+    });
+  }, []);
+
+  // Update menu width when menu is rendered
+  useEffect(() => {
+    if (isOpen && menuRef.current) {
+      setMenuWidth(menuRef.current.offsetWidth);
+    }
+  }, [isOpen, actions]);
+
+  useEffect(() => {
+    // Track mouse position globally
+    const handleMouseMove = (e: MouseEvent) => {
+      const selectedText = window.getSelection()?.toString().trim();
+      if (isOpen && selectedText === position.text) return;
+
+      if (isMobile && selectedText) {
+        setPosition(calculateMobilePosition(selectedText, menuWidth));
+      } else {
+        setPosition({ x: e.clientX, y: e.clientY, text: selectedText });
+      }
+    };
+
+    const handleMouseUp = (e: MouseEvent) => {
+      const selectedText = window.getSelection()?.toString().trim();
+      // Check if click is inside the context menu
+      if (menuRef.current && menuRef.current.contains(e.target as Node)) {
+        // Don't close the menu if clicking inside
+        return;
+      }
+
+      // Prevent context menu on textarea or text input selection
+      const target = e.target as HTMLElement;
+      const isTextInput =
+        target &&
+        (target.tagName === 'TEXTAREA' || (target.tagName === 'INPUT' && (target as HTMLInputElement).type === 'text'));
+      if (isTextInput) {
+        setIsOpen(false);
+        return;
+      }
+
+      if (e.button === 0 && isOpen) {
+        setIsOpen(false);
+        window.getSelection()?.removeAllRanges();
+      } else if (selectedText && (openOnTextSelect || e.button === 2)) {
+        if (e.button === 2) {
+          e.preventDefault();
+        }
+
+        if (isMobile) {
+          setPosition(calculateMobilePosition(selectedText, menuWidth));
+        } else {
+          setPosition({ x: e.clientX, y: e.clientY, text: selectedText });
+        }
+        setIsOpen(true);
+      } else {
+        setIsOpen(false);
+      }
+    };
+
+    // Add selectionchange listener to close menu if selection is cleared and update position for mobile
+    const handleSelectionChange = () => {
+      const selectedText = window.getSelection()?.toString().trim();
+      if (!selectedText && isOpen) {
+        setIsOpen(false);
+      } else if (selectedText && isOpen && isMobile) {
+        // Update position in real-time as text selection changes on mobile
+        setPosition(calculateMobilePosition(selectedText, menuWidth));
+      }
+    };
+
+    document.addEventListener('mouseup', handleMouseUp);
+    window.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('contextmenu', handleMouseUp);
+    document.addEventListener('selectionchange', handleSelectionChange);
+
+    return () => {
+      document.removeEventListener('mouseup', handleMouseUp);
+      window.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('contextmenu', handleMouseUp);
+      document.removeEventListener('selectionchange', handleSelectionChange);
+    };
+  }, [openOnTextSelect, isOpen, position.text]);
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div
+      ref={menuRef}
+      className="fixed bg-gray-400 dark:bg-gray-700 shadow-lg border border-gray-400 rounded-md overflow-hidden dark:text-white z-50"
+      style={{ top: position.y, left: position.x }}
+    >
+      {actions.map((action, index) => (
+        <MenuEntryItem
+          key={index}
+          icon={action.icon}
+          text={action.text}
+          onClick={() => {
+            setIsOpen(false);
+            window.getSelection()?.removeAllRanges();
+            client.event.emitSidebarAction(action.plugin_id, action.action_key, position.text);
+          }}
+        />
+      ))}
+    </div>
+  );
+};
+
+function MenuEntryItem(props: { icon: React.ReactNode; text: string; onClick: () => void }) {
+  return (
+    <button
+      onClick={props.onClick}
+      className="px-4 py-2 text-left hover:bg-gray-500 dark:hover:bg-gray-600 w-full flex flex-row"
+    >
+      <span className="flex-grow">{props.icon}</span>
+      <span className="flex-grow">{props.text}</span>
+      {/* <span className="text-sm">Ctrl+Shift+xxxx</span> */}
+    </button>
+  );
+}
+
+export default ContextMenu;