,
- ) {
- const file = event.target.files?.[0];
- event.target.value = "";
- if (!file || disabled || isUploading) {
- if (editor && shouldRestoreFocusRef.current) {
- requestAnimationFrame(() => {
- editor.commands.focus();
- });
- }
- return;
- }
- shouldRestoreFocusRef.current = editor?.isFocused ?? true;
- setLocalUploading(true);
- try {
- await onSendAttachmentRef.current(file);
- } finally {
- setLocalUploading(false);
- requestAnimationFrame(() => {
- if (editor && !disabled && shouldRestoreFocusRef.current) {
- editor.commands.focus();
- }
- });
- }
- }
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Enter 发送
-
-
-
-
-
<\/p>/g, "")
- .replace(/
<\/p>/g, "")
- .replace(/\s+/g, "");
- if (//i.test(normalized)) {
- return true;
- }
- const plainText = normalized.replace(/<[^>]+>/g, "").trim();
- return plainText !== "";
-}
-
-function getClipboardImageFile(clipboardData: DataTransfer | null) {
- if (!clipboardData) {
- return null;
- }
- for (const item of Array.from(clipboardData.items)) {
- if (item.kind === "file" && item.type.startsWith("image/")) {
- return item.getAsFile();
- }
- }
- return null;
-}
-
-function removeImageByTitle(editor: NonNullable>, title: string) {
- const { state } = editor;
- let targetPos: number | null = null;
- state.doc.descendants((node, pos) => {
- if (node.type.name === "image" && node.attrs.title === title) {
- targetPos = pos;
- return false;
- }
- return true;
- });
- if (targetPos === null) {
- return;
- }
- editor.chain().focus().deleteRange({ from: targetPos, to: targetPos + 1 }).run();
-}
-
-function replaceImageSourceByTitle(
- editor: NonNullable>,
- title: string,
- uploaded: UploadedImage,
-) {
- const { state, view } = editor;
- let targetPos: number | null = null;
- state.doc.descendants((node, pos) => {
- if (node.type.name === "image" && node.attrs.title === title) {
- targetPos = pos;
- return false;
- }
- return true;
- });
- if (targetPos === null) {
- return;
- }
- const transaction = view.state.tr.setNodeMarkup(targetPos, undefined, {
- ...view.state.doc.nodeAt(targetPos)?.attrs,
- src: uploaded.url,
- alt: uploaded.filename || "image",
- dataAssetId: uploaded.assetId,
- dataProvider: uploaded.provider,
- dataStorageKey: uploaded.storageKey,
- title: "",
- });
- view.dispatch(transaction);
-}
diff --git a/widget/components/im/message-html.tsx b/widget/components/im/message-html.tsx
deleted file mode 100644
index e753855..0000000
--- a/widget/components/im/message-html.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-"use client";
-
-import { memo, useEffect, useRef } from "react";
-
-type MessageHTMLProps = {
- html: string;
- className?: string;
- onImageSettled?: () => void;
- onImageClick?: (src: string, alt?: string) => void;
-};
-
-function MessageHTMLComponent({
- html,
- className = "",
- onImageSettled,
- onImageClick,
-}: MessageHTMLProps) {
- const containerRef = useRef(null);
- const onImageSettledRef = useRef(onImageSettled);
- const onImageClickRef = useRef(onImageClick);
-
- useEffect(() => {
- onImageSettledRef.current = onImageSettled;
- }, [onImageSettled]);
-
- useEffect(() => {
- onImageClickRef.current = onImageClick;
- }, [onImageClick]);
-
- useEffect(() => {
- const container = containerRef.current;
- if (!container) {
- return;
- }
- const images = Array.from(container.querySelectorAll("img"));
- if (images.length === 0) {
- return;
- }
- const cleanups = images.map((image) => {
- const handleSettled = () => onImageSettledRef.current?.();
- const handleClick = () => {
- const src = image.getAttribute("src");
- if (src) {
- const alt = image.getAttribute("alt") ?? undefined;
- onImageClickRef.current?.(src, alt);
- }
- };
- image.addEventListener("load", handleSettled);
- image.addEventListener("error", handleSettled);
- image.addEventListener("click", handleClick);
- if (image.complete) {
- onImageSettledRef.current?.();
- }
- image.classList.add("cursor-zoom-in");
- return () => {
- image.removeEventListener("load", handleSettled);
- image.removeEventListener("error", handleSettled);
- image.removeEventListener("click", handleClick);
- };
- });
- return () => {
- cleanups.forEach((cleanup) => cleanup());
- };
- }, [html, onImageSettled, onImageClick]);
-
- return (
-
- );
-}
-
-export const MessageHTML = memo(
- MessageHTMLComponent,
- (prevProps, nextProps) =>
- prevProps.html === nextProps.html &&
- prevProps.className === nextProps.className &&
- prevProps.onImageSettled === nextProps.onImageSettled &&
- prevProps.onImageClick === nextProps.onImageClick,
-);
diff --git a/widget/components/im/message-input.tsx b/widget/components/im/message-input.tsx
deleted file mode 100644
index 6a8613f..0000000
--- a/widget/components/im/message-input.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-"use client";
-
-import { useLayoutEffect, useRef, useState } from "react";
-import { ImageIcon, SendHorizonalIcon } from "lucide-react";
-
-type MessageInputProps = {
- disabled?: boolean;
- uploadingImage?: boolean;
- onSend: (content: string) => Promise;
- onSendImage: (file: File) => Promise;
-};
-
-export function MessageInput({
- disabled,
- uploadingImage = false,
- onSend,
- onSendImage,
-}: MessageInputProps) {
- const [value, setValue] = useState("");
- const [submitting, setSubmitting] = useState(false);
- const textareaRef = useRef(null);
- const imageInputRef = useRef(null);
-
- useLayoutEffect(() => {
- const textarea = textareaRef.current;
- if (!textarea) {
- return;
- }
- const lineHeight = 20;
- const maxHeight = lineHeight * 8;
- textarea.style.height = "0px";
- textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`;
- textarea.style.overflowY =
- textarea.scrollHeight > maxHeight ? "auto" : "hidden";
- }, [value]);
-
- async function handleSubmit() {
- const content = value.trim();
- if (!content || disabled || submitting) {
- return;
- }
- setSubmitting(true);
- try {
- await onSend(content);
- setValue("");
- } finally {
- setSubmitting(false);
- requestAnimationFrame(() => {
- textareaRef.current?.focus();
- });
- }
- }
-
- async function handleSelectImage(event: React.ChangeEvent) {
- const file = event.target.files?.[0];
- event.target.value = "";
- if (!file || disabled || uploadingImage || submitting) {
- return;
- }
- if (!file.type.startsWith("image/")) {
- return;
- }
- try {
- await onSendImage(file);
- } finally {
- requestAnimationFrame(() => {
- textareaRef.current?.focus();
- });
- }
- }
-
- return (
-