Как переопределить компоненты, присутствующие в редакторе Puck, и вставить новый из контекста ⇐ Javascript

[Anonymous]

Я использовал редактор Puck для веб -строителя и имеет некоторые компоненты, я создал компонент чатбота и файл контекста, Chatbot вернет HTML -код, и я установлю это значение в значении контекста, но я Wnatthat Code в свой редактор, как только я получу это значение, например, AI Code находится в редакторе Builder < /p>
pleientditor."use client";

import type { Data } from "@measured/puck";
import { DropZone, Puck } from "@measured/puck";
import config from "../../../puck.config";
import { useEffect, useState } from "react";
import ChatBox from "../../../components/ChatBox/ChatBox";
import { useAppContext } from "../../../contexts/HtmlContext";

export function Client({ path, data }: { path: string; data: Partial }) {
const [isOpen, setIsOpen] = useState(false);
const { html } = useAppContext();

function ToggleChatBox() {
setIsOpen((prev) => !prev);
}

const [puckData, setPuckData] = useState
>({});

useEffect(() => {
if (html) {
const newData =
typeof html === "string" ? JSON.parse(html) : html;
setPuckData(newData);

}
}, [html]);

return (

{isOpen && (



)}


{isOpen ? (

) : (

)}


{
await fetch("/puck/api", {
method: "post",
body: JSON.stringify({ data, path }),
});
}}
/>


);
}
< /code>
chatbot.tsx

import React, { useRef } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { useState } from "react";
import "./style.css";
import axios from "axios";
import { useAppContext } from "../../contexts/HtmlContext";

export default function ChatBox() {
const [chatHistory, setChatHistory] = useState<
{ role: "user" | "ai"; text: string }[]
>([]);
const userMsg = useRef(null);
const { setHtml } = useAppContext();
const [isReplied, setIsReplied] = useState(false);

async function SubmitUserMsg() {
if (!userMsg.current) {
return;
}

const msg = userMsg.current.value;
if (msg.trim().length [
...prev,
{ role: "user", text: msg },
{ role: "ai", text: "Thinking..." },
]);

setIsReplied(false);
userMsg.current.value = "";
userMsg.current.focus();

try {
const res = await axios.post(`${process.env.NEXT_PUBLIC_URL}/api/chat`, {
messages: msg,
});
if (res.data.isResponse) {

if(res.data.isHtml){
const blockData = {
content: [
{
type: "RawHTMLBlock",
props: {
html: res.data.AIreply,
},
},
],
};
setHtml(blockData);

}
setChatHistory((prev) => {
const updated = [...prev];
updated[updated.length - 1] = { role: "ai", text: res.data.AIreply };
return updated;
});

setIsReplied(true);
}
} catch (e) {

setChatHistory((prev) => {
const updated = [...prev];
updated[updated.length - 1] = {
role: "ai",
text: "Error in AI response",
};
return updated;
});
}
}

function copyToClipboard(text: string) {
navigator.clipboard
.writeText(text)
.then(() => {

})
.catch((err) => {
console.error("Failed to copy: ", err);
});
}

return (









AI Assistant





{chatHistory.map((item, ind) => {
if (item.role === "user") {
return (


{item.text}




);
} else {
return (





{item.text}

copyToClipboard(item.text)}
>




);
}
})}




onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault();
SubmitUserMsg();
}
}}
ref={userMsg}
type="text"
placeholder="Type your message..."
className="form-control rounded-pill ps-3 pe-5 border-0 bg-light"
/>










);
}
< /code>
puck.config.ts
import type { Config } from "@measured/puck";
import { DropZone } from "@measured/puck";
import Image from "next/image";
import React, { useState, useEffect } from "react";
import HTMLrender from "./components/HTMLrender";

type Props = {

RawHTMLBlock: {
html: string;
};

};

export const config: Config
= {
components: {

RawHTMLBlock: {
render: HTMLrender,
fields: {
html: {
type: "textarea",
label: "HTML",

},
},
},
}
}
< /code>
htmlrenderer.tsx
export default function HTMLrender({ html}: { html: string }) {
console.log("HTMLrender component received html:", html);
return (

)
}```

in console log
{
"content": [
{
"type": "RawHTMLBlock",
"props": {
"html": "Click Me"
}
}
]
}


Подробнее здесь: https://stackoverflow.com/questions/796 ... w-one-from