@rimori/react-client 0.4.9-next.2 → 0.4.9-next.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimori/react-client",
-  "version": "0.4.9-next.2",
+  "version": "0.4.9-next.4",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -13,7 +13,8 @@
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
-    }
+    },
+    "./dist/style.css": "./dist/style.css"
   },
   "scripts": {
     "build": "tsc && sass src/style.scss:dist/style.css",
@@ -23,18 +24,29 @@
     "format": "prettier --write ."
   },
   "peerDependencies": {
-    "@rimori/client": "2.5.17-next.1",
+    "@rimori/client": "2.5.17-next.2",
     "react": "^18.1.0",
     "react-dom": "^18.1.0"
   },
   "dependencies": {
+    "@tiptap/core": "^2.26.1",
+    "@tiptap/extension-image": "^2.26.1",
+    "@tiptap/extension-link": "^2.26.1",
+    "@tiptap/extension-table": "^2.26.1",
+    "@tiptap/extension-table-cell": "^2.26.1",
+    "@tiptap/extension-table-header": "^2.26.1",
+    "@tiptap/extension-table-row": "^2.26.1",
+    "@tiptap/extension-youtube": "^2.26.1",
+    "@tiptap/pm": "^2.26.1",
+    "@tiptap/react": "^2.26.1",
+    "@tiptap/starter-kit": "^2.26.1",
     "html2canvas": "1.4.1",
     "react-icons": "5.4.0",
-    "react-markdown": "^10.1.0"
+    "tiptap-markdown": "^0.8.10"
   },
   "devDependencies": {
     "@eslint/js": "^9.37.0",
-    "@rimori/client": "2.5.17-next.1",
+    "@rimori/client": "2.5.17-next.2",
     "@types/react": "^18.3.21",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",

package/src/components/ai/Assistant.tsx

@@ -2,10 +2,10 @@ import React, { useEffect, useMemo } from 'react';
 import { CircleAudioAvatar } from './EmbeddedAssistent/CircleAudioAvatar';
 import { AudioInputField } from './EmbeddedAssistent/AudioInputField';
 import { MessageSender } from '@rimori/client';
-import Markdown from 'react-markdown';
 import { useChat } from '../../hooks/UseChatHook';
 import { useRimori } from '../../providers/PluginProvider';
 import { FirstMessages, getFirstMessages } from './utils';
+import { MarkdownEditor } from '../editor/MarkdownEditor';
 
 interface Props {
   voiceId: any;
@@ -84,7 +84,7 @@ export function AssistantChat({ avatarImageUrl, voiceId, onComplete, autoStartCo
       <div className="w-full">
         {lastAssistantMessage && (
           <div className="px-5 pt-5 overflow-y-auto remirror-theme" style={{ height: '4k78px' }}>
-            <Markdown>{lastAssistantMessage}</Markdown>
+            <MarkdownEditor editable={false} content={lastAssistantMessage} />
           </div>
         )}
       </div>

package/src/components/editor/ImageUploadExtension.ts

@@ -0,0 +1,88 @@
+import Image from '@tiptap/extension-image';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import type { Editor } from '@tiptap/core';
+import { convertToPng } from './imageUtils';
+
+const pluginKey = new PluginKey('imageUpload');
+
+/**
+ * Tiptap extension that adds image upload via:
+ *   - Drag-and-drop of image files onto the editor
+ *   - Paste of image data from the clipboard
+ *   - A dedicated toolbar button (triggers a hidden <input type="file">)
+ *
+ * Provide the `uploadImage` callback to handle uploading to your backend.
+ * If no callback is provided the extension is still registered but upload is disabled.
+ */
+export const ImageUploadExtension = (uploadImage?: (pngBlob: Blob) => Promise<string | null>) =>
+  Image.extend({
+    addProseMirrorPlugins() {
+      const editor: Editor = this.editor;
+
+      return [
+        new Plugin({
+          key: pluginKey,
+          props: {
+            handleDrop(view, event) {
+              if (!uploadImage) return false;
+              const files = Array.from(event.dataTransfer?.files ?? []);
+              const imageFile = files.find((f) => f.type.startsWith('image/'));
+              if (!imageFile) return false;
+
+              event.preventDefault();
+
+              // Insert a placeholder position then replace with real URL
+              void handleImageFile(imageFile, uploadImage, editor);
+              return true;
+            },
+
+            handlePaste(view, event) {
+              if (!uploadImage) return false;
+              const items = Array.from(event.clipboardData?.items ?? []);
+              const imageItem = items.find((i) => i.type.startsWith('image/'));
+              if (!imageItem) return false;
+
+              const file = imageItem.getAsFile();
+              if (!file) return false;
+
+              event.preventDefault();
+              void handleImageFile(file, uploadImage, editor);
+              return true;
+            },
+          },
+        }),
+      ];
+    },
+  }).configure({
+    HTMLAttributes: {
+      class: 'max-w-full h-auto rounded-lg my-4',
+    },
+  });
+
+async function handleImageFile(
+  file: File | Blob,
+  uploadImage: (pngBlob: Blob) => Promise<string | null>,
+  editor: Editor,
+): Promise<void> {
+  try {
+    const pngBlob = await convertToPng(file);
+    const url = await uploadImage(pngBlob);
+    if (url) {
+      editor.chain().focus().setImage({ src: url }).run();
+    }
+  } catch {
+    // Upload failed – silently ignore (caller is responsible for showing errors)
+  }
+}
+
+/** Trigger an image file picker and upload the selected file. */
+export function triggerImageUpload(uploadImage: (pngBlob: Blob) => Promise<string | null>, editor: Editor): void {
+  const input = document.createElement('input');
+  input.type = 'file';
+  input.accept = 'image/*';
+  input.onchange = async () => {
+    const file = input.files?.[0];
+    if (file) await handleImageFile(file, uploadImage, editor);
+  };
+  input.click();
+}