|
|
@@ -53,6 +53,7 @@ export const defaultAiPanelMenus = [
|
|
|
] as AIBubbleMenuItem[]
|
|
|
|
|
|
const startChat = (holder: Holder, container: HTMLDivElement, prompt: string) => {
|
|
|
+ console.log("startChat",holder)
|
|
|
if (holder.aiClient) {
|
|
|
holder.aiClient.stop();
|
|
|
} else {
|
|
|
@@ -93,44 +94,16 @@ const startChat = (holder: Holder, container: HTMLDivElement, prompt: string) =>
|
|
|
const createAiPanelElement = (holder: Holder, aiBubbleMenuItems: AIBubbleMenuItem[]) => {
|
|
|
const container = document.createElement("div");
|
|
|
container.classList.add("linwiteditor-ai-panel")
|
|
|
- // container.innerHTML = `
|
|
|
- // <div class="linwiteditor-ai-panel-body">
|
|
|
- // <div class="linwiteditor-ai-panel-body-content" style="display: none"><div class="loader">${Svgs.refresh}</div><textarea readonly></textarea></div>
|
|
|
- // <div class="linwiteditor-ai-panel-body-input"><input id="prompt" placeholder="${t('placeholder-tell-ai-what-to-do-next')}" type="text" />
|
|
|
- // <button type="button" id="go" style="width: 30px;height: 30px">${Svgs.aiPanelStart}</button></div>
|
|
|
- // <div class="linwiteditor-ai-panel-body-tips"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 17C9 17 16 18 19 21H20C20.5523 21 21 20.5523 21 20V13.937C21.8626 13.715 22.5 12.9319 22.5 12C22.5 11.0681 21.8626 10.285 21 10.063V4C21 3.44772 20.5523 3 20 3H19C16 6 9 7 9 7H5C3.89543 7 3 7.89543 3 9V15C3 16.1046 3.89543 17 5 17H6L7 22H9V17ZM11 8.6612C11.6833 8.5146 12.5275 8.31193 13.4393 8.04373C15.1175 7.55014 17.25 6.77262 19 5.57458V18.4254C17.25 17.2274 15.1175 16.4499 13.4393 15.9563C12.5275 15.6881 11.6833 15.4854 11 15.3388V8.6612ZM5 9H9V15H5V9Z" fill="currentColor"></path></svg>
|
|
|
- // ${t("tip-you-can-enter-text-above-or-select-the-operation-below")}</div>
|
|
|
- // </div>
|
|
|
- // <div class="linwiteditor-ai-panel-footer" style="display: none">
|
|
|
- // <div class="linwiteditor-ai-panel-footer-tips">${t("you-can-do-the-following")}</div>
|
|
|
- // <p id="insert"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2 18H12V20H2V18ZM2 11H22V13H2V11ZM2 4H22V6H2V4ZM18 18V15H20V18H23V20H20V23H18V20H15V18H18Z" fill="currentColor"></path></svg>
|
|
|
- // ${t("ai-append")}</p>
|
|
|
- // <p id="replace"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10.071 4.92902L11.4852 6.34323L6.82834 11.0001L16.0002 11.0002L16.0002 13.0002L6.82839 13.0001L11.4852 17.6569L10.071 19.0712L2.99994 12.0001L10.071 4.92902ZM18.0001 19V5.00003H20.0001V19H18.0001Z" fill="currentColor"></path></svg>
|
|
|
- // ${t("ai-replace")}</p>
|
|
|
- // <hr/>
|
|
|
- // <p id="hide"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 6H22V8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V8H2V6H7V3C7 2.44772 7.44772 2 8 2H16C16.5523 2 17 2.44772 17 3V6ZM18 8H6V20H18V8ZM9 4V6H15V4H9Z" fill="currentColor"></path></svg>
|
|
|
- // ${t("ai-cancel")}</p>
|
|
|
- // </div>
|
|
|
-
|
|
|
- // <!--linwiteditor-ai-panel-actions-->
|
|
|
- // <div class="linwiteditor-ai-panel-footer linwiteditor-ai-panel-actions" >
|
|
|
- // <div class="linwiteditor-ai-panel-footer-tips">${t("you-can-do-the-following")}</div>
|
|
|
- // ${aiBubbleMenuItems.map((menuItem) => {
|
|
|
- // return typeof menuItem === "string" ? menuItem :
|
|
|
- // `<p data-prompt="${menuItem.prompt}">${menuItem.icon} ${t(menuItem.title)} </p>`;
|
|
|
- // }).join('')}
|
|
|
- // </div>
|
|
|
- // `;
|
|
|
container.innerHTML = `
|
|
|
- <div class="aie-ai-panel-body">
|
|
|
- <div class="aie-ai-panel-body-content" style="display: none"><div class="loader">${Svgs.refresh}</div><textarea readonly></textarea></div>
|
|
|
- <div class="aie-ai-panel-body-input"><input id="prompt" placeholder="${t('placeholder-tell-ai-what-to-do-next')}" type="text" />
|
|
|
- <button type="button" id="go" style="width: 30px;height: 30px">${Svgs.aiPanelStart}</button></div>
|
|
|
- <div class="aie-ai-panel-body-tips"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 17C9 17 16 18 19 21H20C20.5523 21 21 20.5523 21 20V13.937C21.8626 13.715 22.5 12.9319 22.5 12C22.5 11.0681 21.8626 10.285 21 10.063V4C21 3.44772 20.5523 3 20 3H19C16 6 9 7 9 7H5C3.89543 7 3 7.89543 3 9V15C3 16.1046 3.895..." fill="currentColor"></path></svg>
|
|
|
- ${t("tip-you-can-enter-text-above-or-select-the-operation-below")}</div>
|
|
|
- </div>
|
|
|
- <div class="aie-ai-panel-footer" style="display: none">
|
|
|
- <div class="aie-ai-panel-footer-tips">${t("you-can-do-the-following")}</div>
|
|
|
+ <div class="linwiteditor-ai-panel-body">
|
|
|
+ <div class="linwiteditor-ai-panel-body-content" style="display: none"><div class="loader">${Svgs.refresh}</div><textarea readonly></textarea></div>
|
|
|
+ <div class="linwiteditor-ai-panel-body-input"><input id="prompt" placeholder="${t('placeholder-tell-ai-what-to-do-next')}" type="text" />
|
|
|
+ <button type="button" id="go" style="width: 30px;height: 30px">${Svgs.aiPanelStart}</button></div>
|
|
|
+ <div class="linwiteditor-ai-panel-body-tips"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 17C9 17 16 18 19 21H20C20.5523 21 21 20.5523 21 20V13.937C21.8626 13.715 22.5 12.9319 22.5 12C22.5 11.0681 21.8626 10.285 21 10.063V4C21 3.44772 20.5523 3 20 3H19C16 6 9 7 9 7H5C3.89543 7 3 7.89543 3 9V15C3 16.1046 3.89543 17 5 17H6L7 22H9V17ZM11 8.6612C11.6833 8.5146 12.5275 8.31193 13.4393 8.04373C15.1175 7.55014 17.25 6.77262 19 5.57458V18.4254C17.25 17.2274 15.1175 16.4499 13.4393 15.9563C12.5275 15.6881 11.6833 15.4854 11 15.3388V8.6612ZM5 9H9V15H5V9Z" fill="currentColor"></path></svg>
|
|
|
+ ${t("tip-you-can-enter-text-above-or-select-the-operation-below")}</div>
|
|
|
+ </div>
|
|
|
+ <div class="linwiteditor-ai-panel-footer" style="display: none">
|
|
|
+ <div class="linwiteditor-ai-panel-footer-tips">${t("you-can-do-the-following")}</div>
|
|
|
<p id="insert"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2 18H12V20H2V18ZM2 11H22V13H2V11ZM2 4H22V6H2V4ZM18 18V15H20V18H23V20H20V23H18V20H15V18H18Z" fill="currentColor"></path></svg>
|
|
|
${t("ai-append")}</p>
|
|
|
<p id="replace"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10.071 4.92902L11.4852 6.34323L6.82834 11.0001L16.0002 11.0002L16.0002 13.0002L6.82839 13.0001L11.4852 17.6569L10.071 19.0712L2.99994 12.0001L10.071 4.92902ZM18.0001 19V5.00003H20.0001V19H18.0001Z" fill="currentColor"></path></svg>
|
|
|
@@ -138,31 +111,59 @@ const createAiPanelElement = (holder: Holder, aiBubbleMenuItems: AIBubbleMenuIte
|
|
|
<hr/>
|
|
|
<p id="hide"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 6H22V8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V8H2V6H7V3C7 2.44772 7.44772 2 8 2H16C16.5523 2 17 2.44772 17 3V6ZM18 8H6V20H18V8ZM9 4V6H15V4H9Z" fill="currentColor"></path></svg>
|
|
|
${t("ai-cancel")}</p>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- aie-ai-panel-actions -->
|
|
|
- <div class="aie-ai-panel-footer aie-ai-panel-actions">
|
|
|
- <div class="aie-ai-panel-footer-tips">${t("you-can-do-the-following")}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!--linwiteditor-ai-panel-actions-->
|
|
|
+ <div class="linwiteditor-ai-panel-footer linwiteditor-ai-panel-actions" >
|
|
|
+ <div class="linwiteditor-ai-panel-footer-tips">${t("you-can-do-the-following")}</div>
|
|
|
${aiBubbleMenuItems.map((menuItem) => {
|
|
|
- if (menuItem.children) { // 判断是否有 children
|
|
|
- return `
|
|
|
- <div class="menu-item-with-children">
|
|
|
- <p>${menuItem.icon} ${t(menuItem.title)}</p>
|
|
|
- <div class="submenu">
|
|
|
- ${menuItem.children.map(child => `
|
|
|
- <p data-prompt="${child.prompt}">${child.icon} ${t(child.title)}</p>
|
|
|
- `).join('')}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- `;
|
|
|
- } else {
|
|
|
- return `
|
|
|
- <p data-prompt="${menuItem.prompt}">${menuItem.icon} ${t(menuItem.title)}</p>
|
|
|
- `;
|
|
|
- }
|
|
|
- }).join('')}
|
|
|
- </div>
|
|
|
-`;
|
|
|
+ return typeof menuItem === "string" ? menuItem :
|
|
|
+ `<p data-prompt="${menuItem.prompt}">${menuItem.icon} ${t(menuItem.title)} </p>`;
|
|
|
+ }).join('')}
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+// container.innerHTML = `
|
|
|
+// <div class="aie-ai-panel-body">
|
|
|
+// <div class="aie-ai-panel-body-content" style="display: none"><div class="loader">${Svgs.refresh}</div><textarea readonly></textarea></div>
|
|
|
+// <div class="aie-ai-panel-body-input"><input id="prompt" placeholder="${t('placeholder-tell-ai-what-to-do-next')}" type="text" />
|
|
|
+// <button type="button" id="go" style="width: 30px;height: 30px">${Svgs.aiPanelStart}</button></div>
|
|
|
+// <div class="aie-ai-panel-body-tips"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 17C9 17 16 18 19 21H20C20.5523 21 21 20.5523 21 20V13.937C21.8626 13.715 22.5 12.9319 22.5 12C22.5 11.0681 21.8626 10.285 21 10.063V4C21 3.44772 20.5523 3 20 3H19C16 6 9 7 9 7H5C3.89543 7 3 7.89543 3 9V15C3 16.1046 3.895..." fill="currentColor"></path></svg>
|
|
|
+// ${t("tip-you-can-enter-text-above-or-select-the-operation-below")}</div>
|
|
|
+// </div>
|
|
|
+// <div class="aie-ai-panel-footer" style="display: none">
|
|
|
+// <div class="aie-ai-panel-footer-tips">${t("you-can-do-the-following")}</div>
|
|
|
+// <p id="insert"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2 18H12V20H2V18ZM2 11H22V13H2V11ZM2 4H22V6H2V4ZM18 18V15H20V18H23V20H20V23H18V20H15V18H18Z" fill="currentColor"></path></svg>
|
|
|
+// ${t("ai-append")}</p>
|
|
|
+// <p id="replace"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10.071 4.92902L11.4852 6.34323L6.82834 11.0001L16.0002 11.0002L16.0002 13.0002L6.82839 13.0001L11.4852 17.6569L10.071 19.0712L2.99994 12.0001L10.071 4.92902ZM18.0001 19V5.00003H20.0001V19H18.0001Z" fill="currentColor"></path></svg>
|
|
|
+// ${t("ai-replace")}</p>
|
|
|
+// <hr/>
|
|
|
+// <p id="hide"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 6H22V8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V8H2V6H7V3C7 2.44772 7.44772 2 8 2H16C16.5523 2 17 2.44772 17 3V6ZM18 8H6V20H18V8ZM9 4V6H15V4H9Z" fill="currentColor"></path></svg>
|
|
|
+// ${t("ai-cancel")}</p>
|
|
|
+// </div>
|
|
|
+
|
|
|
+// <!-- aie-ai-panel-actions -->
|
|
|
+// <div class="aie-ai-panel-footer aie-ai-panel-actions">
|
|
|
+// <div class="aie-ai-panel-footer-tips">${t("you-can-do-the-following")}</div>
|
|
|
+// ${aiBubbleMenuItems.map((menuItem) => {
|
|
|
+// if (menuItem.children) { // 判断是否有 children
|
|
|
+// return `
|
|
|
+// <div class="menu-item-with-children">
|
|
|
+// <p>${menuItem.icon} ${t(menuItem.title)}</p>
|
|
|
+// <div class="submenu">
|
|
|
+// ${menuItem.children.map(child => `
|
|
|
+// <p data-prompt="${child.prompt}">${child.icon} ${t(child.title)}</p>
|
|
|
+// `).join('')}
|
|
|
+// </div>
|
|
|
+// </div>
|
|
|
+// `;
|
|
|
+// } else {
|
|
|
+// return `
|
|
|
+// <p data-prompt="${menuItem.prompt}">${menuItem.icon} ${t(menuItem.title)}</p>
|
|
|
+// `;
|
|
|
+// }
|
|
|
+// }).join('')}
|
|
|
+// </div>
|
|
|
+// `;
|
|
|
|
|
|
|
|
|
|