@rimori/client 1.4.9 → 2.0.0

package/src/components/ai/utils.ts

@@ -1,21 +0,0 @@
-export interface FirstMessages {
-  instructions?: string;
-  userMessage?: string;
-  assistantMessage?: string;
-}
-
-export function getFirstMessages(instructions: FirstMessages): any[] {
-  const messages = [];
-
-  if (instructions.instructions) {
-    messages.push({ id: '1', role: 'system', content: instructions.instructions });
-  }
-  if (instructions.userMessage) {
-    messages.push({ id: '2', role: 'user', content: instructions.userMessage });
-  }
-  if (instructions.assistantMessage) {
-    messages.push({ id: '3', role: 'assistant', content: instructions.assistantMessage });
-  }
-
-  return messages;
-}

package/src/components/audio/Playbutton.tsx

@@ -1,126 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { FaPlayCircle, FaStopCircle } from 'react-icons/fa';
-import { useRimori } from '../../providers/PluginProvider';
-import { Spinner } from '../Spinner';
-import { EventBus } from '../../fromRimori/EventBus';
-
-type AudioPlayerProps = {
-  text: string;
-  voice?: string;
-  language?: string;
-  hide?: boolean;
-  playOnMount?: boolean;
-  initialSpeed?: number;
-  enableSpeedAdjustment?: boolean;
-  playListenerEvent?: string;
-};
-
-export const AudioPlayOptions = [0.8, 0.9, 1.0, 1.1, 1.2, 1.5];
-export type AudioPlayOptionType = 0.8 | 0.9 | 1.0 | 1.1 | 1.2 | 1.5;
-
-let isFetchingAudio = false;
-
-export const AudioPlayer: React.FC<AudioPlayerProps> = ({
-  text,
-  voice,
-  language,
-  hide,
-  playListenerEvent,
-  initialSpeed = 1.0,
-  playOnMount = false,
-  enableSpeedAdjustment = false,
-}) => {
-  const [audioUrl, setAudioUrl] = useState<string | null>(null);
-  const [speed, setSpeed] = useState(initialSpeed);
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const { ai } = useRimori();
-
-  useEffect(() => {
-    if (!playListenerEvent) return;
-    EventBus.on(playListenerEvent, () => togglePlayback());
-  }, [playListenerEvent]);
-
-  useEffect(() => {
-    audioUrl && setAudioUrl(null);
-    return () => {
-      audioUrl && URL.revokeObjectURL(audioUrl);
-    };
-  }, [text]);
-
-  // Function to generate audio from text using API
-  const generateAudio = async () => {
-    setIsLoading(true);
-
-    const blob = await ai.getVoice(text, voice || (language ? 'aws_default' : 'openai_alloy'), 1, language);
-    setAudioUrl(URL.createObjectURL(blob));
-    setIsLoading(false);
-  };
-
-  // Effect to play audio when audioUrl changes and play state is true
-  useEffect(() => {
-    if (!audioUrl || !isPlaying) return;
-    const audio = new Audio(audioUrl);
-    audio.playbackRate = speed;
-    audio
-      .play()
-      .then(() => {
-        audio.onended = () => {
-          setIsPlaying(false);
-          isFetchingAudio = false;
-        };
-      })
-      .catch((e) => {
-        console.warn('Error playing audio:', e);
-        setIsPlaying(false);
-      });
-
-    return () => {
-      audio.pause();
-    };
-  }, [audioUrl, isPlaying, speed]);
-
-  const togglePlayback = () => {
-    if (!isPlaying && !audioUrl) {
-      generateAudio().then(() => setIsPlaying(true));
-    } else {
-      setIsPlaying((prev) => !prev);
-    }
-  };
-
-  useEffect(() => {
-    if (!playOnMount || isFetchingAudio) return;
-    isFetchingAudio = true;
-    // console.log("playOnMount", playOnMount);
-    togglePlayback();
-  }, [playOnMount]);
-
-  return (
-    <div className="group relative">
-      <div className="flex flex-row items-end">
-        {!hide && (
-          <button className="text-gray-500" onClick={togglePlayback} disabled={isLoading}>
-            {isLoading ? <Spinner /> : isPlaying ? <FaStopCircle size={'25px'} /> : <FaPlayCircle size={'25px'} />}
-          </button>
-        )}
-        {enableSpeedAdjustment && (
-          <div className="ml-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-row text-sm text-gray-500">
-            <span className="pr-1">Speed: </span>
-            <select
-              value={speed}
-              className="appearance-none cursor-pointer pr-0 p-0 rounded shadow leading-tight focus:outline-none focus:bg-gray-800 focus:ring bg-transparent border-0"
-              onChange={(e) => setSpeed(parseFloat(e.target.value))}
-              disabled={isLoading}
-            >
-              {AudioPlayOptions.map((s) => (
-                <option key={s} value={s}>
-                  {s}
-                </option>
-              ))}
-            </select>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};

package/src/components/components/ContextMenu.tsx

@@ -1,179 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { EventBus } from '../../fromRimori/EventBus';
-import { RimoriClient } from '../../plugin/RimoriClient';
-import { MenuEntry } from '../../fromRimori/PluginTypes';
-
-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;

package/src/components.ts

@@ -1,11 +0,0 @@
-// React components and hooks exports
-export * from './components/ai/Assistant';
-export * from './components/ai/Avatar';
-export * from './components/ai/EmbeddedAssistent/VoiceRecoder';
-export * from './components/audio/Playbutton';
-export * from './components/CRUDModal';
-export * from './components/MarkdownEditor';
-export * from './components/Spinner';
-export * from './hooks/UseChatHook';
-export * from './plugin/ThemeSetter';
-export * from './providers/PluginProvider';

package/src/core/core.ts

@@ -1,15 +0,0 @@
-// Core functionality exports
-export * from '../fromRimori/PluginTypes';
-export * from '../plugin/PluginController';
-export * from '../plugin/RimoriClient';
-export * from '../utils/difficultyConverter';
-export * from '../utils/PluginUtils';
-export * from '../worker/WorkerSetup';
-export { EventBusMessage } from '../fromRimori/EventBus';
-export { Buddy, UserInfo, Language } from './controller/SettingsController';
-export { SharedContent } from './controller/SharedContentController';
-export { Exercise, TriggerAction } from './controller/ExerciseController';
-export { Message, OnLLMResponse, ToolInvocation } from './controller/AIController';
-export { MacroAccomplishmentPayload, MicroAccomplishmentPayload } from '../plugin/AccomplishmentHandler';
-export { Tool } from '../fromRimori/PluginTypes';
-export { SharedContentObjectRequest } from './controller/SharedContentController';

package/src/hooks/I18nHooks.ts

@@ -1,33 +0,0 @@
-import { TOptions } from 'i18next';
-import { useEffect, useState } from 'react';
-import { Translator } from '../plugin/TranslationController';
-import { useRimori } from '../providers/PluginProvider';
-
-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 function useTranslation(): { t: TranslatorFn; ready: boolean } {
-  const { plugin } = useRimori();
-  const [translatorInstance, setTranslatorInstance] = useState<Translator | null>(null);
-
-  useEffect(() => {
-    void plugin.getTranslator().then(setTranslatorInstance);
-  }, [plugin]);
-
-  const safeT = (key: string, options?: TOptions): string => {
-    // 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/src/hooks/UseChatHook.ts

@@ -1,38 +0,0 @@
-import React from 'react';
-import { Tool } from '../fromRimori/PluginTypes';
-import { useRimori } from '../providers/PluginProvider';
-import { Message, ToolInvocation } from '../core/controller/AIController';
-
-export function useChat(tools?: Tool[]) {
-  const [messages, setMessages] = React.useState<Message[]>([]);
-  const [isLoading, setIsLoading] = React.useState(false);
-  const { ai } = useRimori();
-
-  const append = (appendMessages: Message[]) => {
-    const allMessages = [...messages, ...appendMessages];
-    setMessages(allMessages);
-    ai.getSteamedText(
-      allMessages,
-      (id, message, finished: boolean, toolInvocations?: ToolInvocation[]) => {
-        const lastMessage = messages[messages.length - 1];
-        setIsLoading(!finished);
-
-        if (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] as Message | undefined,
-  };
-}

package/src/plugin/ThemeSetter.ts

@@ -1,23 +0,0 @@
-export function setTheme(theme?: string | null) {
-  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?: string | null): boolean {
-  // 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/src/providers/PluginProvider.tsx

@@ -1,209 +0,0 @@
-import React, { createContext, useContext, ReactNode, useEffect, useState } from 'react';
-import { PluginController } from '../plugin/PluginController';
-import { RimoriClient } from '../plugin/RimoriClient';
-import { EventBusHandler } from '../fromRimori/EventBus';
-import ContextMenu from '../components/components/ContextMenu';
-import { StandaloneClient } from '../plugin/StandaloneClient';
-
-interface PluginProviderProps {
-  children: ReactNode;
-  pluginId: string;
-  settings?: {
-    disableContextMenu?: boolean;
-  };
-}
-
-const PluginContext = createContext<RimoriClient | null>(null);
-
-export const PluginProvider: React.FC<PluginProviderProps> = ({ children, pluginId, settings }) => {
-  const [plugin, setPlugin] = useState<RimoriClient | null>(null);
-  const [standaloneClient, setStandaloneClient] = useState<StandaloneClient | boolean>(false);
-  const [applicationMode, setApplicationMode] = useState<string | null>(null);
-  const [theme, setTheme] = useState<string | null>(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)) {
-      PluginController.getInstance(pluginId, standaloneDetected).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: string) => 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]);
-
-  //detect page height change
-  useEffect(() => {
-    const body = document.body;
-    const handleResize = () => plugin?.event.emit('session.triggerHeightChange', body.clientHeight);
-    body.addEventListener('resize', handleResize);
-    handleResize();
-    return () => body.removeEventListener('resize', handleResize);
-  }, [plugin]);
-
-  if (standaloneClient instanceof StandaloneClient) {
-    return (
-      <StandaloneAuth
-        onLogin={async (email, password) => {
-          if (await standaloneClient.login(email, password)) setStandaloneClient(true);
-        }}
-      />
-    );
-  }
-
-  if (!plugin) {
-    return '';
-  }
-
-  return (
-    <PluginContext.Provider value={plugin}>
-      {!settings?.disableContextMenu && !isSidebar && !isSettings && <ContextMenu client={plugin} />}
-      {children}
-    </PluginContext.Provider>
-  );
-};
-
-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: string) {
-  // 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: string) {
-  // 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 }: { onLogin: (user: string, password: string) => void }) {
-  const [user, setUser] = useState('');
-  const [password, setPassword] = useState('');
-  return (
-    <div
-      style={{
-        position: 'fixed',
-        inset: 0,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: 'rgba(0, 0, 0, 0.5)',
-      }}
-    >
-      <div
-        style={{
-          backgroundColor: '#343534',
-          padding: '1rem',
-          borderRadius: '0.5rem',
-          width: '500px',
-          flexDirection: 'column',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <p style={{ fontSize: '2rem', fontWeight: 'bold', marginBottom: '1rem', textAlign: 'center' }}>Rimori Login</p>
-        <p style={{ marginBottom: '1rem', textAlign: 'center' }}>
-          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.
-        </p>
-        {/* email and password input */}
-        <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)}
-        />
-        <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)}
-        />
-        <button
-          style={{
-            marginBottom: '1rem',
-            width: '100%',
-            padding: '0.5rem',
-            borderRadius: '0.5rem',
-            border: 'none',
-            backgroundColor: '#928358',
-          }}
-          onClick={() => {
-            onLogin(user, password);
-          }}
-        >
-          Login
-        </button>
-      </div>
-    </div>
-  );
-}