@rimori/client 1.3.1 → 1.4.3

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

@@ -13,102 +13,117 @@ interface Props {
   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();
+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 handleKeyUp = (event: KeyboardEvent) => {
-      if (event.code === 'Space' && spacePressedRef.current) {
-        spacePressedRef.current = false;
-        stopRecording();
+
+    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);
       }
     };
-    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>
-  );
-});
+    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

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

package/src/components/audio/Playbutton.tsx

@@ -1,18 +1,18 @@
 import React, { useState, useEffect } from 'react';
-import { FaPlayCircle, FaStopCircle } from "react-icons/fa";
-import { useRimori } from "../../providers/PluginProvider";
+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;
+  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];
@@ -21,98 +21,106 @@ 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,
+  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();
+  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(() => {
+    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);
+  useEffect(() => {
+    audioUrl && setAudioUrl(null);
+    return () => {
+      audioUrl && URL.revokeObjectURL(audioUrl);
     };
+  }, [text]);
 
-    // 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);
-        });
+  // Function to generate audio from text using API
+  const generateAudio = async () => {
+    setIsLoading(true);
 
-        return () => {
-            audio.pause();
+    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;
         };
-    }, [audioUrl, isPlaying, speed]);
+      })
+      .catch((e) => {
+        console.warn('Error playing audio:', e);
+        setIsPlaying(false);
+      });
 
-    const togglePlayback = () => {
-        if (!isPlaying && !audioUrl) {
-            generateAudio().then(() => setIsPlaying(true));
-        } else {
-            setIsPlaying((prev) => !prev);
-        }
+    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]);
+  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>
-    );
+  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,12 +1,12 @@
-import React, { useState, useEffect, useRef } from "react";
-import { EventBus } from "../../fromRimori/EventBus";
-import { RimoriClient } from "../../plugin/RimoriClient";
-import { MenuEntry } from "../../fromRimori/PluginTypes";
+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
+  x: number;
+  y: number;
+  text?: string;
 }
 
 const ContextMenu = ({ client }: { client: RimoriClient }) => {
@@ -35,7 +35,7 @@ const ContextMenu = ({ client }: { client: RimoriClient }) => {
     const rect = range.getBoundingClientRect();
 
     // Center horizontally over the selected text, accounting for menu width
-    const centerX = rect.left + (rect.width / 2) - (menuWidth / 2);
+    const centerX = rect.left + rect.width / 2 - menuWidth / 2;
 
     // Position 12px below where the text ends vertically
     const textEndY = rect.bottom + 12;
@@ -44,12 +44,14 @@ const ContextMenu = ({ client }: { client: RimoriClient }) => {
   };
 
   useEffect(() => {
-    const actions = client.plugin.getPluginInfo().installedPlugins.flatMap(p => p.context_menu_actions).filter(Boolean);
+    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 }) => {
+    EventBus.on<{ actions: MenuEntry[] }>('global.contextMenu.createActions', ({ data }) => {
       setActions([...data.actions, ...actions]);
     });
   }, []);
@@ -84,10 +86,9 @@ const ContextMenu = ({ client }: { client: RimoriClient }) => {
 
       // 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')
-      );
+      const isTextInput =
+        target &&
+        (target.tagName === 'TEXTAREA' || (target.tagName === 'INPUT' && (target as HTMLInputElement).type === 'text'));
       if (isTextInput) {
         setIsOpen(false);
         return;
@@ -123,16 +124,16 @@ const ContextMenu = ({ client }: { client: RimoriClient }) => {
       }
     };
 
-    document.addEventListener("mouseup", handleMouseUp);
-    window.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("contextmenu", handleMouseUp);
-    document.addEventListener("selectionchange", handleSelectionChange);
+    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);
+      document.removeEventListener('mouseup', handleMouseUp);
+      window.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('contextmenu', handleMouseUp);
+      document.removeEventListener('selectionchange', handleSelectionChange);
     };
   }, [openOnTextSelect, isOpen, position.text]);
 
@@ -144,24 +145,35 @@ const ContextMenu = ({ client }: { client: RimoriClient }) => {
     <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 }}>
+      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);
-        }} />
+        <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>
+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 +1,11 @@
 // 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";
+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';