@rimori/react-client 0.1.0

package/dist/react-client/src/components/components/ContextMenu.js

@@ -0,0 +1,135 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import { EventBus } from '@rimori/client';
+const ContextMenu = ({ client }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [actions, setActions] = useState([]);
+    const [position, setPosition] = useState({ x: 0, y: 0 });
+    const [openOnTextSelect, setOpenOnTextSelect] = useState(false);
+    const [menuWidth, setMenuWidth] = useState(0);
+    const menuRef = useRef(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, menuWidth = 0) => {
+        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('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) => {
+            var _a;
+            const selectedText = (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.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) => {
+            var _a, _b;
+            const selectedText = (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.toString().trim();
+            // Check if click is inside the context menu
+            if (menuRef.current && menuRef.current.contains(e.target)) {
+                // Don't close the menu if clicking inside
+                return;
+            }
+            // Prevent context menu on textarea or text input selection
+            const target = e.target;
+            const isTextInput = target &&
+                (target.tagName === 'TEXTAREA' || (target.tagName === 'INPUT' && target.type === 'text'));
+            if (isTextInput) {
+                setIsOpen(false);
+                return;
+            }
+            if (e.button === 0 && isOpen) {
+                setIsOpen(false);
+                (_b = window.getSelection()) === null || _b === void 0 ? void 0 : _b.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 = () => {
+            var _a;
+            const selectedText = (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.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 (_jsx("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 }, children: actions.map((action, index) => (_jsx(MenuEntryItem, { icon: action.icon, text: action.text, onClick: () => {
+                var _a;
+                setIsOpen(false);
+                (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
+                client.event.emitSidebarAction(action.plugin_id, action.action_key, position.text);
+            } }, index))) }));
+};
+function MenuEntryItem(props) {
+    return (_jsxs("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", children: [_jsx("span", { className: "flex-grow", children: props.icon }), _jsx("span", { className: "flex-grow", children: props.text })] }));
+}
+export default ContextMenu;

package/dist/react-client/src/hooks/I18nHooks.d.ts

@@ -0,0 +1,11 @@
+import { TOptions } from '@rimori/client';
+type TranslatorFn = (key: string, options?: TOptions) => string;
+/**
+ * Custom useTranslation hook that provides a translation function and indicates readiness
+ * @returns An object containing the translation function (`t`) and a boolean (`ready`) indicating if the translator is initialized.
+ */
+export declare function useTranslation(): {
+    t: TranslatorFn;
+    ready: boolean;
+};
+export {};

package/dist/react-client/src/hooks/I18nHooks.js

@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react';
+import { useRimori } from '../providers/PluginProvider';
+/**
+ * Custom useTranslation hook that provides a translation function and indicates readiness
+ * @returns An object containing the translation function (`t`) and a boolean (`ready`) indicating if the translator is initialized.
+ */
+export function useTranslation() {
+    const { plugin } = useRimori();
+    const [translatorInstance, setTranslatorInstance] = useState(null);
+    useEffect(() => {
+        void plugin.getTranslator().then(setTranslatorInstance);
+    }, [plugin]);
+    const safeT = (key, options) => {
+        // return zero-width space if translator is not initialized to keep text space occupied
+        if (!translatorInstance)
+            return '\u200B'; // zero-width space
+        const result = translatorInstance.t(key, options);
+        if (!result) {
+            console.error(`Translation key not found: ${key}`);
+            return '\u200B'; // zero-width space
+        }
+        return result;
+    };
+    return { t: safeT, ready: translatorInstance !== null };
+}

package/dist/react-client/src/hooks/UseChatHook.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Tool } from '@rimori/client';
+import { Message } from '@rimori/client';
+export declare function useChat(tools?: Tool[]): {
+    messages: Message[];
+    append: (appendMessages: Message[]) => void;
+    isLoading: boolean;
+    setMessages: React.Dispatch<React.SetStateAction<Message[]>>;
+    lastMessage: Message | undefined;
+};

package/dist/react-client/src/hooks/UseChatHook.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { useRimori } from '../providers/PluginProvider';
+export function useChat(tools) {
+    const [messages, setMessages] = React.useState([]);
+    const [isLoading, setIsLoading] = React.useState(false);
+    const { ai } = useRimori();
+    const append = (appendMessages) => {
+        const allMessages = [...messages, ...appendMessages];
+        setMessages(allMessages);
+        ai.getSteamedText(allMessages, (id, message, finished, toolInvocations) => {
+            const lastMessage = messages[messages.length - 1];
+            setIsLoading(!finished);
+            if ((lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.id) === id) {
+                lastMessage.content = message;
+                setMessages([...messages, lastMessage]);
+            }
+            else {
+                setMessages([...allMessages, { id, role: 'assistant', content: message, toolCalls: toolInvocations }]);
+            }
+        }, tools);
+    };
+    return {
+        messages,
+        append,
+        isLoading,
+        setMessages,
+        lastMessage: messages[messages.length - 1],
+    };
+}

package/dist/react-client/src/plugin/ThemeSetter.d.ts

@@ -0,0 +1,2 @@
+export declare function setTheme(theme?: string | null): void;
+export declare function isDarkTheme(theme?: string | null): boolean;

package/dist/react-client/src/plugin/ThemeSetter.js

@@ -0,0 +1,19 @@
+export function setTheme(theme) {
+    document.documentElement.classList.add('dark:text-gray-200');
+    if (isDarkTheme(theme)) {
+        document.documentElement.setAttribute('data-theme', 'dark');
+        document.documentElement.classList.add('dark', 'dark:bg-gray-950');
+        document.documentElement.style.background = 'hsl(var(--background))';
+    }
+}
+export function isDarkTheme(theme) {
+    // If no theme provided, try to get from URL as fallback (for standalone mode)
+    if (!theme) {
+        const urlParams = new URLSearchParams(window.location.search);
+        theme = urlParams.get('theme');
+    }
+    if (!theme || theme === 'system') {
+        return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    }
+    return theme === 'dark';
+}

package/dist/react-client/src/providers/PluginProvider.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode } from 'react';
+import { RimoriClient } from '@rimori/client';
+interface PluginProviderProps {
+    children: ReactNode;
+    pluginId: string;
+    settings?: {
+        disableContextMenu?: boolean;
+    };
+}
+export declare const PluginProvider: React.FC<PluginProviderProps>;
+export declare const useRimori: () => RimoriClient;
+export {};

package/dist/react-client/src/providers/PluginProvider.js

@@ -0,0 +1,142 @@
+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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState } from 'react';
+import { EventBusHandler, RimoriClient, StandaloneClient } from '@rimori/client';
+import ContextMenu from '../components/ContextMenu';
+const PluginContext = createContext(null);
+export const PluginProvider = ({ children, pluginId, settings }) => {
+    const [plugin, setPlugin] = useState(null);
+    const [standaloneClient, setStandaloneClient] = useState(false);
+    const [applicationMode, setApplicationMode] = useState(null);
+    const [theme, setTheme] = useState(null);
+    const isSidebar = applicationMode === 'sidebar';
+    const isSettings = applicationMode === 'settings';
+    useEffect(() => {
+        initEventBus(pluginId);
+        // Check if we're in an iframe context - if not, we're standalone
+        const standaloneDetected = window === window.parent;
+        if (standaloneDetected && !standaloneClient) {
+            StandaloneClient.getInstance().then((client) => {
+                client.needsLogin().then((needLogin) => setStandaloneClient(needLogin ? client : true));
+            });
+        }
+        if ((!standaloneDetected && !plugin) || (standaloneDetected && standaloneClient === true)) {
+            RimoriClient.getInstance(pluginId).then((client) => {
+                setPlugin(client);
+                // Get applicationMode and theme from MessageChannel query params
+                if (!standaloneDetected) {
+                    const mode = client.getQueryParam('applicationMode');
+                    const themeParam = client.getQueryParam('rm_theme');
+                    setApplicationMode(mode);
+                    setTheme(themeParam);
+                }
+            });
+        }
+    }, [pluginId, standaloneClient]);
+    //route change
+    useEffect(() => {
+        if (!plugin)
+            return;
+        //sidebar pages should not report url changes
+        if (isSidebar)
+            return;
+        let lastHash = window.location.hash;
+        const emitUrlChange = (url) => plugin.event.emit('session.triggerUrlChange', { url });
+        const interval = setInterval(() => {
+            if (lastHash === window.location.hash)
+                return;
+            lastHash = window.location.hash;
+            // console.log('url changed:', lastHash);
+            emitUrlChange(lastHash);
+        }, 1000);
+        emitUrlChange(lastHash);
+        return () => clearInterval(interval);
+    }, [plugin]);
+    if (standaloneClient instanceof StandaloneClient) {
+        return (_jsx(StandaloneAuth, { onLogin: (email, password) => __awaiter(void 0, void 0, void 0, function* () {
+                if (yield standaloneClient.login(email, password))
+                    setStandaloneClient(true);
+            }) }));
+    }
+    if (!plugin) {
+        return '';
+    }
+    return (_jsxs(PluginContext.Provider, { value: plugin, children: [!(settings === null || settings === void 0 ? void 0 : settings.disableContextMenu) && !isSidebar && !isSettings && _jsx(ContextMenu, { client: plugin }), children] }));
+};
+export const useRimori = () => {
+    const context = useContext(PluginContext);
+    if (context === null) {
+        throw new Error('useRimori must be used within an PluginProvider');
+    }
+    return context;
+};
+function getUrlParam(name) {
+    // First try to get from URL hash query params (for compatibility)
+    const hashParts = window.location.hash.split('?');
+    if (hashParts.length > 1) {
+        const hashParams = new URLSearchParams(hashParts[1]);
+        const hashValue = hashParams.get(name);
+        if (hashValue)
+            return hashValue;
+    }
+    // Fallback to regular URL search params
+    const url = new URL(window.location.href);
+    return url.searchParams.get(name);
+}
+function initEventBus(pluginId) {
+    // For now, use URL fallback for EventBus naming - this will be updated once MessageChannel is ready
+    const isSidebar = getUrlParam('applicationMode') === 'sidebar';
+    EventBusHandler.getInstance('Plugin EventBus ' + pluginId + ' ' + (isSidebar ? 'sidebar' : 'main'));
+}
+function StandaloneAuth({ onLogin }) {
+    const [user, setUser] = useState('');
+    const [password, setPassword] = useState('');
+    return (_jsx("div", { style: {
+            position: 'fixed',
+            inset: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        }, children: _jsxs("div", { style: {
+                backgroundColor: '#343534',
+                padding: '1rem',
+                borderRadius: '0.5rem',
+                width: '500px',
+                flexDirection: 'column',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }, children: [_jsx("p", { style: { fontSize: '2rem', fontWeight: 'bold', marginBottom: '1rem', textAlign: 'center' }, children: "Rimori Login" }), _jsx("p", { style: { marginBottom: '1rem', textAlign: 'center' }, children: "Please login with your Rimori developer account for this plugin to be able to access the Rimori platform the same it will operate in the Rimori platform." }), _jsx("input", { style: {
+                        marginBottom: '1rem',
+                        width: '100%',
+                        padding: '0.5rem',
+                        borderRadius: '0.5rem',
+                        border: 'none',
+                        backgroundColor: '#444444',
+                    }, type: "email", placeholder: "Email", onChange: (e) => setUser(e.target.value) }), _jsx("input", { style: {
+                        marginBottom: '1rem',
+                        width: '100%',
+                        padding: '0.5rem',
+                        borderRadius: '0.5rem',
+                        border: 'none',
+                        backgroundColor: '#444444',
+                    }, type: "password", placeholder: "Password", onChange: (e) => setPassword(e.target.value) }), _jsx("button", { style: {
+                        marginBottom: '1rem',
+                        width: '100%',
+                        padding: '0.5rem',
+                        borderRadius: '0.5rem',
+                        border: 'none',
+                        backgroundColor: '#928358',
+                    }, onClick: () => {
+                        onLogin(user, password);
+                    }, children: "Login" })] }) }));
+}

package/dist/react-client/src/utils/FullscreenUtils.d.ts

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

package/dist/react-client/src/utils/FullscreenUtils.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/dist/react-client/src/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/react-client/src/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/dist/rimori-client/src/cli/types/DatabaseTypes.d.ts

@@ -0,0 +1,103 @@
+/**
+ * Supported database column data types for table schema definitions.
+ */
+type DbColumnType = 'decimal' | 'integer' | 'text' | 'boolean' | 'json' | 'timestamp' | 'uuid';
+/**
+ * Foreign key relationship configuration with cascade delete support.
+ * Defines a relationship where the source record is deleted when the destination record is deleted.
+ */
+interface ForeignKeyRelation {
+    /** The target table that this column references */
+    references_table: string;
+    /** The target column in the referenced table (defaults to 'id') */
+    references_column?: string;
+    /** Whether to cascade delete when the referenced record is deleted */
+    on_delete_cascade: boolean;
+}
+/**
+ * Database column definition with support for types, constraints, and relationships.
+ */
+export interface DbColumnDefinition {
+    /** The data type of the column */
+    type: DbColumnType;
+    /** Human-readable description of the column's purpose */
+    description: string;
+    /** Whether the column can contain null values */
+    nullable?: boolean;
+    /** Whether the column has a unique constraint */
+    unique?: boolean;
+    /** Default value for the column. can also use sql functions like now(), auth.uid() or gen_random_uuid() */
+    default_value?: string | number | boolean;
+    /** Array of allowed values for enumerated columns */
+    /** Foreign key relationship configuration */
+    foreign_key?: ForeignKeyRelation;
+    /** The name of the column before it was renamed. */
+    old_name?: string;
+    /** Whether the column is deprecated. The column gets renamed to column_name_old. To fully remove the column, first set deprecated to true and then after a release, remove the column from the table definition. */
+    deprecated?: boolean;
+    /** Whether the column is a primary key */
+    /** Restrictions for the column. If the column is restricted, the permission is further restricted. E.g. if the column is restricted to user, then the user can only read the column if they have the right permission.
+     * Example: Denying users to update the column, but allowing the moderator to update the column.
+     */
+    restrict?: {
+        /** Restrictions for the user */
+        user: Partial<Omit<DbPermissionDefinition, 'delete'>>;
+        /** Restrictions for the moderator */
+        moderator?: Partial<Omit<DbPermissionDefinition, 'delete'>>;
+    };
+}
+/**
+ * Base table structure that all database tables inherit.
+ * Includes standard audit fields for tracking creation and ownership.
+ */
+interface BaseTableStructure {
+    /** Unique identifier for the record */
+    id: DbColumnDefinition;
+    /** Timestamp when the record was created */
+    created_at: DbColumnDefinition;
+    /** ID of the user who created the record */
+    created_by: DbColumnDefinition;
+}
+/**
+ * Complete database table schema definition.
+ * Defines the structure, constraints, and relationships for a database table.
+ */
+export interface DbTableDefinition {
+    /** Name of the database table */
+    table_name: string;
+    /** Description of the table's purpose and usage */
+    description: string;
+    /** Permissions for the table */
+    permissions: {
+        user: DbPermissionDefinition;
+        moderator?: DbPermissionDefinition;
+    };
+    /** Column definitions for the table */
+    columns: {
+        [column_name: string]: DbColumnDefinition;
+    };
+}
+/**
+ * Permission definition for a database table.
+ * NONE means the action is not allowed.
+ * OWN means only do the action on your own records.
+ * ALL means do the action on all records.
+ *
+ * Defines the permissions for a database table.
+ */
+export type DbPermission = 'NONE' | 'OWN' | 'ALL';
+/**
+ * Permission definition for a database table.
+ * Defines the permissions for a database table.
+ */
+export interface DbPermissionDefinition {
+    read: DbPermission;
+    insert: DbPermission;
+    update: DbPermission;
+    delete: DbPermission;
+}
+/**
+ * Full table definition that includes automatically generated fields.
+ */
+export type FullTable<T extends Record<string, DbColumnDefinition>> = T & BaseTableStructure;
+export {};

package/dist/rimori-client/src/cli/types/DatabaseTypes.js

@@ -0,0 +1,2 @@
+// Database table structure definitions
+export {};

package/dist/rimori-client/src/controller/AIController.d.ts

@@ -0,0 +1,15 @@
+import { Tool } from '../fromRimori/PluginTypes';
+export interface ToolInvocation {
+    toolCallId: string;
+    toolName: string;
+    args: Record<string, string>;
+}
+export interface Message {
+    id?: string;
+    role: 'user' | 'assistant' | 'system';
+    content: string;
+    toolCalls?: ToolInvocation[];
+}
+export declare function generateText(backendUrl: string, messages: Message[], tools: Tool[], token: string): Promise<any>;
+export type OnLLMResponse = (id: string, response: string, finished: boolean, toolInvocations?: ToolInvocation[]) => void;
+export declare function streamChatGPT(backendUrl: string, messages: Message[], tools: Tool[], onResponse: OnLLMResponse, token: string): Promise<void>;