Spaces:
Runtime error
Runtime error
File size: 3,472 Bytes
4782147 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 | "use client";
import type { UIMessage } from "ai";
import { Button } from "./ui/button";
import {
type Dispatch,
type SetStateAction,
useState,
useMemo,
useEffect,
} from "react";
import { Textarea } from "./ui/textarea";
import { deleteMessagesByChatIdAfterTimestampAction } from "@/app/api/chat/actions";
import type { UseChatHelpers } from "@ai-sdk/react";
import { useTranslations } from "next-intl";
import { Loader } from "lucide-react";
export type MessageEditorProps = {
message: UIMessage;
setMode: Dispatch<SetStateAction<"view" | "edit">>;
setMessages: UseChatHelpers<UIMessage>["setMessages"];
sendMessage: UseChatHelpers<UIMessage>["sendMessage"];
};
export function MessageEditor({
message,
setMode,
setMessages,
sendMessage,
}: MessageEditorProps) {
const t = useTranslations();
const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
const canEdit = useMemo(
() =>
message.parts &&
message.parts.length > 0 &&
message.parts[message.parts.length - 1]?.type === "text",
[message.parts],
);
const [draftText, setDraftText] = useState<string>(() => {
if (canEdit) {
const lastPart = message.parts[message.parts.length - 1] as any;
return lastPart.text || "";
}
return "";
});
const handleTextChange = (value: string) => {
setDraftText(value);
};
const handleSubmit = async () => {
setIsSubmitting(true);
await deleteMessagesByChatIdAfterTimestampAction(message.id);
setMessages((messages) => {
const index = messages.findIndex((m) => m.id === message.id);
if (index !== -1) {
const updatedParts = [...message.parts];
const lastPartIndex = updatedParts.length - 1;
const lastPart = updatedParts[lastPartIndex];
if (lastPart && lastPart.type === "text") {
updatedParts[lastPartIndex] = {
...lastPart,
text: draftText,
};
}
const updatedMessage: UIMessage = {
...message,
parts: updatedParts,
};
return [...messages.slice(0, index), updatedMessage];
}
return messages;
});
setMode("view");
sendMessage();
};
useEffect(() => {
if (!canEdit) {
setMode("view");
}
}, [canEdit]);
return (
<div className="flex flex-col gap-4 w-full mb-4">
<div className="flex flex-col gap-2">
<Textarea
data-testid="message-editor-text"
className="overflow-y-auto bg-transparent outline-none overflow-hidden resize-none !text-base rounded-xl w-full min-h-[100px]"
value={draftText}
onChange={(e) => handleTextChange(e.target.value)}
placeholder="Edit your message..."
/>
</div>
<div className="flex flex-row gap-2 justify-end">
<Button
variant="outline"
size="sm"
className="h-fit py-2 px-3"
onClick={() => {
setMode("view");
}}
>
{t("Common.cancel")}
</Button>
<Button
data-testid="message-editor-send-button"
variant="default"
size="sm"
className="h-fit py-2 px-3"
disabled={isSubmitting}
onClick={handleSubmit}
>
{isSubmitting ? t("Common.saving") : t("Common.save")}
{isSubmitting && <Loader className="size-4 animate-spin" />}
</Button>
</div>
</div>
);
}
|