@rimori/client 1.4.10 → 2.1.0

package/src/components/ai/EmbeddedAssistent/VoiceRecoder.tsx

@@ -1,129 +0,0 @@
-import { useRimori } from '../../../components';
-import { FaMicrophone, FaSpinner } from 'react-icons/fa6';
-import { AudioController } from '../../../plugin/AudioController';
-import { useState, useRef, forwardRef, useImperativeHandle, useEffect } from 'react';
-
-interface Props {
-  iconSize?: string;
-  className?: string;
-  disabled?: boolean;
-  loading?: boolean;
-  enablePushToTalk?: boolean;
-  onRecordingStatusChange: (running: boolean) => void;
-  onVoiceRecorded: (message: string) => void;
-}
-
-export const VoiceRecorder = forwardRef(
-  (
-    {
-      onVoiceRecorded,
-      iconSize,
-      className,
-      disabled,
-      loading,
-      onRecordingStatusChange,
-      enablePushToTalk = false,
-    }: Props,
-    ref,
-  ) => {
-    const [isRecording, setIsRecording] = useState(false);
-    const [internalIsProcessing, setInternalIsProcessing] = useState(false);
-    const audioControllerRef = useRef<AudioController | null>(null);
-    const { ai, plugin } = useRimori();
-
-    // Ref for latest onVoiceRecorded callback
-    const onVoiceRecordedRef = useRef(onVoiceRecorded);
-    useEffect(() => {
-      onVoiceRecordedRef.current = onVoiceRecorded;
-    }, [onVoiceRecorded]);
-
-    const startRecording = async () => {
-      try {
-        if (!audioControllerRef.current) {
-          audioControllerRef.current = new AudioController(plugin.pluginId);
-        }
-
-        await audioControllerRef.current.startRecording();
-        setIsRecording(true);
-        onRecordingStatusChange(true);
-      } catch (error) {
-        console.error('Failed to start recording:', error);
-        // Handle permission denied or other errors
-      }
-    };
-
-    const stopRecording = async () => {
-      try {
-        if (audioControllerRef.current && isRecording) {
-          const audioResult = await audioControllerRef.current.stopRecording();
-          // console.log("audioResult: ", audioResult);
-
-          setInternalIsProcessing(true);
-
-          // Play the recorded audio from the Blob
-          // const blobUrl = URL.createObjectURL(audioResult.recording);
-          // const audioRef = new Audio(blobUrl);
-          // audioRef.onended = () => URL.revokeObjectURL(blobUrl);
-          // audioRef.play().catch((e) => console.error('Playback error:', e));
-
-          // console.log("audioBlob: ", audioResult.recording);
-          const text = await ai.getTextFromVoice(audioResult.recording);
-          // console.log("stt result", text);
-          // throw new Error("test");
-          setInternalIsProcessing(false);
-          onVoiceRecordedRef.current(text);
-        }
-      } catch (error) {
-        console.error('Failed to stop recording:', error);
-      } finally {
-        setIsRecording(false);
-        onRecordingStatusChange(false);
-      }
-    };
-
-    useImperativeHandle(ref, () => ({
-      startRecording,
-      stopRecording,
-    }));
-
-    // push to talk feature
-    const spacePressedRef = useRef(false);
-
-    useEffect(() => {
-      if (!enablePushToTalk) return;
-
-      const handleKeyDown = async (event: KeyboardEvent) => {
-        if (event.code === 'Space' && !spacePressedRef.current) {
-          spacePressedRef.current = true;
-          await startRecording();
-        }
-      };
-      const handleKeyUp = (event: KeyboardEvent) => {
-        if (event.code === 'Space' && spacePressedRef.current) {
-          spacePressedRef.current = false;
-          stopRecording();
-        }
-      };
-      window.addEventListener('keydown', handleKeyDown);
-      window.addEventListener('keyup', handleKeyUp);
-      return () => {
-        window.removeEventListener('keydown', handleKeyDown);
-        window.removeEventListener('keyup', handleKeyUp);
-      };
-    }, [enablePushToTalk]);
-
-    return (
-      <button
-        className={'flex flex-row justify-center items-center rounded-full mx-auto disabled:opacity-50 ' + className}
-        onClick={isRecording ? stopRecording : startRecording}
-        disabled={disabled || loading || internalIsProcessing}
-      >
-        {loading || internalIsProcessing ? (
-          <FaSpinner className="animate-spin" />
-        ) : (
-          <FaMicrophone size={iconSize} className={isRecording ? 'text-red-600' : ''} />
-        )}
-      </button>
-    );
-  },
-);

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';
-}