@rimori/react-client 0.3.0-next.8 → 0.4.0-next.0

package/dist/components/MarkdownEditor.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    content?: string;
+    editable: boolean;
+    className?: string;
+    onUpdate?: (content: string) => void;
+}
+export declare const MarkdownEditor: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/MarkdownEditor.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Markdown } from 'tiptap-markdown';
+import StarterKit from '@tiptap/starter-kit';
+import { PiCodeBlock } from 'react-icons/pi';
+import { TbBlockquote } from 'react-icons/tb';
+import { GoListOrdered } from 'react-icons/go';
+import { AiOutlineUnorderedList } from 'react-icons/ai';
+import { EditorProvider, useCurrentEditor } from '@tiptap/react';
+import { LuHeading1, LuHeading2, LuHeading3 } from 'react-icons/lu';
+import { FaBold, FaCode, FaItalic, FaParagraph, FaStrikethrough } from 'react-icons/fa';
+const EditorButton = ({ action, isActive, label, disabled }) => {
+    const { editor } = useCurrentEditor();
+    if (!editor) {
+        return null;
+    }
+    if (action.includes('heading')) {
+        const level = parseInt(action[action.length - 1]);
+        return (_jsx("button", { onClick: () => editor.chain().focus().toggleHeading({ level: level }).run(), className: `pl-2 ${isActive ? 'is-active' : ''}`, children: label }));
+    }
+    return (_jsx("button", { onClick: () => editor.chain().focus()[action]().run(), disabled: disabled ? !editor.can().chain().focus()[action]().run() : false, className: `pl-2 ${isActive ? 'is-active' : ''}`, children: label }));
+};
+const MenuBar = () => {
+    const { editor } = useCurrentEditor();
+    if (!editor) {
+        return null;
+    }
+    return (_jsxs("div", { className: "bg-gray-400 dark:bg-gray-800 dark:text-white text-lg flex flex-row flex-wrap items-center p-1", children: [_jsx(EditorButton, { action: "toggleBold", isActive: editor.isActive('bold'), label: _jsx(FaBold, {}), disabled: true }), _jsx(EditorButton, { action: "toggleItalic", isActive: editor.isActive('italic'), label: _jsx(FaItalic, {}), disabled: true }), _jsx(EditorButton, { action: "toggleStrike", isActive: editor.isActive('strike'), label: _jsx(FaStrikethrough, {}), disabled: true }), _jsx(EditorButton, { action: "toggleCode", isActive: editor.isActive('code'), label: _jsx(FaCode, {}), disabled: true }), _jsx(EditorButton, { action: "setParagraph", isActive: editor.isActive('paragraph'), label: _jsx(FaParagraph, {}) }), _jsx(EditorButton, { action: "setHeading1", isActive: editor.isActive('heading', { level: 1 }), label: _jsx(LuHeading1, { size: '24px' }) }), _jsx(EditorButton, { action: "setHeading2", isActive: editor.isActive('heading', { level: 2 }), label: _jsx(LuHeading2, { size: '24px' }) }), _jsx(EditorButton, { action: "setHeading3", isActive: editor.isActive('heading', { level: 3 }), label: _jsx(LuHeading3, { size: '24px' }) }), _jsx(EditorButton, { action: "toggleBulletList", isActive: editor.isActive('bulletList'), label: _jsx(AiOutlineUnorderedList, { size: '24px' }) }), _jsx(EditorButton, { action: "toggleOrderedList", isActive: editor.isActive('orderedList'), label: _jsx(GoListOrdered, { size: '24px' }) }), _jsx(EditorButton, { action: "toggleCodeBlock", isActive: editor.isActive('codeBlock'), label: _jsx(PiCodeBlock, { size: '24px' }) }), _jsx(EditorButton, { action: "toggleBlockquote", isActive: editor.isActive('blockquote'), label: _jsx(TbBlockquote, { size: '24px' }) })] }));
+};
+const extensions = [
+    StarterKit.configure({
+        bulletList: {
+            HTMLAttributes: {
+                class: 'list-disc list-inside dark:text-white p-1 mt-1 [&_li]:mb-1 [&_p]:inline m-0',
+            },
+        },
+        orderedList: {
+            HTMLAttributes: {
+                className: 'list-decimal list-inside dark:text-white p-1 mt-1 [&_li]:mb-1 [&_p]:inline m-0',
+            },
+        },
+    }),
+    Markdown,
+];
+export const MarkdownEditor = (props) => {
+    return (_jsx("div", { className: 'text-md border border-gray-800 overflow-hidden ' + props.className, style: { borderWidth: props.editable ? 1 : 0 }, children: _jsx(EditorProvider, { slotBefore: props.editable ? _jsx(MenuBar, {}) : null, extensions: extensions, content: props.content, editable: props.editable, onUpdate: (e) => {
+                props.onUpdate && props.onUpdate(e.editor.storage.markdown.getMarkdown());
+            } }, (props.editable ? 'editable' : 'readonly') + props.content) }));
+};

package/dist/components/Spinner.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Spinner.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ai/EmbeddedAssistent/VoiceRecoder.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    iconSize?: string;
+    className?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    enablePushToTalk?: boolean;
+    onRecordingStatusChange: (running: boolean) => void;
+    onVoiceRecorded: (message: string) => void;
+}
+export declare const VoiceRecorder: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<unknown>>;
+export {};

package/dist/components/ai/EmbeddedAssistent/VoiceRecoder.js

@@ -0,0 +1,95 @@
+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 } from "react/jsx-runtime";
+import { useRimori } from '../../../providers/PluginProvider';
+import { FaMicrophone, FaSpinner } from 'react-icons/fa6';
+import { AudioController } from '@rimori/client';
+import { useState, useRef, forwardRef, useImperativeHandle, useEffect } from 'react';
+export const VoiceRecorder = forwardRef(({ onVoiceRecorded, iconSize, className, disabled, loading, onRecordingStatusChange, enablePushToTalk = false, }, ref) => {
+    const [isRecording, setIsRecording] = useState(false);
+    const [internalIsProcessing, setInternalIsProcessing] = useState(false);
+    const audioControllerRef = useRef(null);
+    const { ai, plugin } = useRimori();
+    // Ref for latest onVoiceRecorded callback
+    const onVoiceRecordedRef = useRef(onVoiceRecorded);
+    useEffect(() => {
+        onVoiceRecordedRef.current = onVoiceRecorded;
+    }, [onVoiceRecorded]);
+    const startRecording = () => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            if (!audioControllerRef.current) {
+                audioControllerRef.current = new AudioController(plugin.pluginId);
+            }
+            yield audioControllerRef.current.startRecording();
+            setIsRecording(true);
+            onRecordingStatusChange(true);
+        }
+        catch (error) {
+            console.error('Failed to start recording:', error);
+            // Handle permission denied or other errors
+        }
+    });
+    const stopRecording = () => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            if (audioControllerRef.current && isRecording) {
+                const audioResult = yield 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 = yield 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 = (event) => __awaiter(void 0, void 0, void 0, function* () {
+            if (event.code === 'Space' && !spacePressedRef.current) {
+                spacePressedRef.current = true;
+                yield startRecording();
+            }
+        });
+        const handleKeyUp = (event) => {
+            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 (_jsx("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, children: loading || internalIsProcessing ? (_jsx(FaSpinner, { className: "animate-spin" })) : (_jsx(FaMicrophone, { size: iconSize, className: isRecording ? 'text-red-600' : '' })) }));
+});

package/dist/plugin/ThemeSetter.d.ts

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

package/dist/plugin/ThemeSetter.js

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react';
+export function useTheme(theme) {
+    const [isDark, setIsDark] = useState(false);
+    useEffect(() => {
+        const root = document.documentElement;
+        const nextIsDark = isDarkTheme(theme);
+        setIsDark(nextIsDark);
+        root.classList.add('dark:text-gray-200');
+        if (nextIsDark) {
+            root.setAttribute('data-theme', 'dark');
+            root.classList.add('dark', 'dark:bg-gray-950');
+            root.style.background = 'hsl(var(--background))';
+            return;
+        }
+        root.removeAttribute('data-theme');
+        root.classList.remove('dark', 'dark:bg-gray-950');
+        root.style.background = '';
+    }, [theme]);
+    return isDark;
+}
+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/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/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
+            void (ref.requestFullscreen() || ref.webkitRequestFullscreen());
+        }
+        else {
+            // @ts-ignore
+            void (document.exitFullscreen() || document.webkitExitFullscreen());
+        }
+    }
+    catch (error) {
+        console.error('Failed to enter fullscreen', error.message);
+    }
+    onStateChange(isFullscreen());
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimori/react-client",
-  "version": "0.3.0-next.8",
+  "version": "0.4.0-next.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -23,7 +23,7 @@
     "format": "prettier --write ."
   },
   "peerDependencies": {
-    "@rimori/client": "2.3.0-next.3",
+    "@rimori/client": "^2.4.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0"
   },
@@ -34,7 +34,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.37.0",
-    "@rimori/client": "2.3.0-next.3",
+    "@rimori/client": "^2.4.0",
     "@types/react": "^18.3.21",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",