@rimori/react-client 0.4.9 → 0.4.10

package/dist/style.css

@@ -6,105 +6,90 @@ dialog::backdrop {
   background: transparent;
 }
 
+/* Tiptap editor content styles */
 .tiptap {
-  padding-top: 5px;
-  padding-left: 7px;
-  /* min-height: 300px; */
-}
-.tiptap:focus-visible {
-  outline: none;
-}
-.tiptap h1,
-.tiptap h2,
-.tiptap h3,
-.tiptap h4,
-.tiptap h5,
-.tiptap h6 {
-  @apply font-bold;
-  margin-bottom: 1rem;
+  @apply focus:outline-none;
 }
 .tiptap h1 {
-  @apply text-4xl;
+  @apply text-4xl font-bold mt-6 mb-3 first:mt-0;
 }
 .tiptap h2 {
-  @apply text-3xl;
+  @apply text-3xl font-semibold mt-5 mb-2 first:mt-0;
 }
 .tiptap h3 {
-  @apply text-2xl;
+  @apply text-2xl font-semibold mt-4 mb-2 first:mt-0;
 }
-.tiptap h4 {
-  @apply text-xl;
+.tiptap blockquote {
+  @apply border-l-4 border-primary/30 pl-4 py-1 my-3 text-muted-foreground italic;
 }
-.tiptap h5 {
-  @apply text-lg;
+.tiptap pre {
+  @apply bg-muted rounded-lg p-4 my-3 overflow-x-auto text-sm font-mono;
 }
-.tiptap h6 {
-  @apply text-base;
+.tiptap code {
+  @apply bg-muted px-1.5 py-0.5 rounded text-sm font-mono;
 }
-.tiptap p {
-  @apply mb-4;
+.tiptap pre code {
+  @apply bg-transparent p-0;
+}
+.tiptap hr {
+  @apply border-border my-6;
 }
 .tiptap a {
-  @apply text-blue-600 hover:text-blue-800;
-  text-decoration: none;
+  @apply text-primary underline underline-offset-2;
 }
-.tiptap a:hover {
-  @apply underline;
+.tiptap {
+  /* Basic editor styles */
 }
-.tiptap ul {
-  @apply list-disc pl-8;
+.tiptap :first-child {
+  margin-top: 0;
 }
-.tiptap ul li > p {
+.tiptap li {
   @apply mb-1;
 }
-.tiptap ol {
-  @apply list-decimal pl-7;
+.tiptap ul {
+  @apply list-disc list-inside dark:text-white pl-3 [&_p]:inline m-0;
 }
-.tiptap ol li > p {
-  @apply mb-1;
+.tiptap ul p {
+  @apply m-0;
 }
-.tiptap blockquote {
-  @apply border-l-4 pl-4 italic text-gray-600 my-4;
-  border-color: #ccc;
+.tiptap ul li {
+  @apply m-0;
 }
-.tiptap code {
-  font-family: monospace;
+.tiptap ol {
+  @apply list-decimal pl-7 m-0;
 }
-.tiptap pre {
-  @apply bg-gray-800 text-gray-500 p-4 rounded-lg overflow-x-auto;
-  font-family: monospace;
-  white-space: pre-wrap;
-  word-wrap: break-word;
+.tiptap ol p {
+  @apply m-0;
 }
-.tiptap img {
-  @apply max-w-full h-auto rounded-lg my-4;
+.tiptap ol li {
+  @apply m-0;
+}
+.tiptap {
+  /* Table-specific styling */
 }
 .tiptap table {
-  @apply table-auto w-full border-collapse mb-4;
-}
-.tiptap th,
-.tiptap td {
-  @apply border px-4 py-2 text-left;
-}
-.tiptap th {
-  @apply bg-gray-500 font-semibold;
-}
-.tiptap tr:nth-child(even) {
-  @apply bg-gray-400;
-}
-@media (max-width: 768px) {
-  .tiptap h1 {
-    @apply text-3xl;
-  }
-  .tiptap h2 {
-    @apply text-2xl;
-  }
-  .tiptap p {
-    @apply text-base;
-  }
-  .tiptap img {
-    @apply max-w-full;
-  }
+  @apply border-collapse m-0 overflow-hidden w-full mb-1;
+}
+.tiptap table td,
+.tiptap table th {
+  @apply dark:border-gray-700 border;
+  @apply mb-0 align-baseline pl-1.5;
+}
+.tiptap table td p,
+.tiptap table th p {
+  @apply mb-0;
+}
+.tiptap table th {
+  /* @apply bg-gray-500; */
+  @apply font-bold text-left;
+}
+.tiptap .tableWrapper {
+  margin: 1.5rem 0;
+  @apply overflow-x-auto;
+}
+.tiptap.resize-cursor {
+  @apply cursor-ew-resize;
+  cursor: col-resize;
 }
 
 /*# sourceMappingURL=style.css.map */

package/dist/style.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../src/style.scss"],"names":[],"mappings":"AAAA;EACE;;;AAIF;EACE;;;AAGF;EACE;EACA;AACA;;AAEA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAEA;EACE;;AAIJ;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;AAAA;EAEE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE","file":"style.css"}
+{"version":3,"sourceRoot":"","sources":["../src/style.scss"],"names":[],"mappings":"AAAA;EACE;;;AAIF;EACE;;;AAGF;AACA;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AApCJ;AAuCE;;AACA;EACE;;AAGF;EACE;;AAGF;EACE;;AAEA;EACE;;AAGF;EACE;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;;AApEN;AAwEE;;AACA;EACE;;AAEA;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;;AAIJ;AACE;EACA;;AAIJ;EACE;EACA;;AAGF;EACE;EACA","file":"style.css"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimori/react-client",
-  "version": "0.4.9",
+  "version": "0.4.10",
   "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.16",
+    "@rimori/client": "^2.5.18",
     "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.16",
+    "@rimori/client": "^2.5.18",
     "@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/audio/Playbutton.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useLayoutEffect, useRef } from 'react';
 import { FaPlayCircle, FaStopCircle } from 'react-icons/fa';
 import { useRimori } from '../../providers/PluginProvider';
 import { EventBus } from '@rimori/client';
@@ -129,9 +129,14 @@ export const AudioPlayer: React.FC<AudioPlayerProps> = ({
     }
   };
 
+  const togglePlaybackRef = useRef(togglePlayback);
+  useLayoutEffect(() => {
+    togglePlaybackRef.current = togglePlayback;
+  });
+
   useEffect(() => {
     if (!playListenerEvent) return;
-    const handler = () => togglePlayback();
+    const handler = () => togglePlaybackRef.current();
     const listener = EventBus.on(playListenerEvent, handler);
     eventBusListenerRef.current = listener;
 

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();
+}