on-codemerge
Version:
A WYSIWYG editor for on-codemerge is a user-friendly interface that allows users to edit and view their code in real time, exactly as it will appear in the final product
209 lines (207 loc) • 6.97 kB
JavaScript
var u = Object.defineProperty;
var d = (o, t, e) => t in o ? u(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
var r = (o, t, e) => d(o, typeof t != "symbol" ? t + "" : t, e);
/* empty css */
/* empty css */
import { PopupManager as m } from "../../core/ui/PopupManager.mjs";
import { createToolbarButton as c } from "../ToolbarPlugin/utils.mjs";
import v from "../../icons/ai-assistant.svg.mjs";
import { DeepSeekDriver as g } from "./drivers/DeepSeekDriver.mjs";
import { HuggingFaceDriver as y } from "./drivers/HuggingFaceDriver.mjs";
import { OpenAIDriver as f } from "./drivers/OpenAIDriver.mjs";
import { GitHubAzureDriver as b } from "./drivers/GitHubAzureDriver.mjs";
import { LlamaDriver as P } from "./drivers/LlamaDriver.mjs";
import { MistralDriver as O } from "./drivers/MistralDriver.mjs";
import { OllamaDriver as w } from "./drivers/OllamaDriver.mjs";
const p = "aiAssistantSettings", n = "Write an article about the benefits of using artificial intelligence in web development. Include examples of JavaScript code and explain how AI can simplify the development process.", l = `The response should be formatted as HTML code that can be inserted into a text editor. Follow these rules:
1. Headings should be wrapped in <h1>, <h2>, <h3>, etc.
2. Paragraphs should be wrapped in <p>.
3. Lists should use <ul>, <ol>, and <li>.
4. Code should be wrapped in <pre><code>.
5. Use <strong> and <em> for emphasis.
6. For images, use the <img> tag with the src attribute.
7. Links should use the <a> tag.
8. Tables should use <table>, <tr>, <th>, and <td>.
9. Do not include unnecessary tags like <html>, <head>, or <body>.
10. Ensure code examples are properly formatted.`;
class z {
constructor() {
r(this, "name", "ai-assistant");
r(this, "editor", null);
r(this, "popup", null);
r(this, "apiKey", "");
r(this, "driver", null);
r(this, "driverName", "openai");
r(this, "structurePrompt", l);
r(this, "prompt", n);
r(this, "driverOptions", {});
r(this, "drivers", {});
this.loadSettings(), this.initializeDrivers();
}
initializeDrivers() {
this.drivers = {
openai: new f(this.apiKey),
deepseek: new g(this.apiKey),
huggingface: new y(this.apiKey),
github: new b(this.apiKey),
llama: new P(this.apiKey),
mistral: new O(this.apiKey),
ollama: new w(this.apiKey)
};
}
initialize(t) {
this.editor = t, this.setupPopup(), this.addToolbarButton();
}
addToolbarButton() {
const t = document.querySelector(".editor-toolbar");
if (t) {
const e = c({
icon: v,
title: "AI Assistant",
onClick: () => {
var i;
(i = this.popup) == null || i.show();
}
});
t.appendChild(e);
}
}
createPopupItems() {
const t = [
{
type: "list",
id: "driver-select",
label: "AI Driver:",
options: ["openai", "deepseek", "huggingface", "github", "llama", "mistral", "ollama"],
value: this.driverName,
onChange: (i) => {
this.driverName = i, this.saveSettings(), this.updatePopupContent();
}
},
{
type: "input",
id: "api-key-input",
label: "API Key:",
placeholder: "Enter your API key",
value: this.apiKey,
onChange: (i) => {
this.apiKey = i, this.saveSettings();
}
},
{
type: "textarea",
id: "structure-prompt-textarea",
label: "Structure Prompt:",
placeholder: "Enter your structure prompt",
value: this.structurePrompt,
onChange: (i) => {
this.structurePrompt = i, this.saveSettings();
}
},
{
type: "textarea",
id: "prompt-textarea",
label: "Prompt:",
placeholder: "Enter your prompt",
value: this.prompt,
onChange: (i) => {
this.prompt = i, this.saveSettings();
}
}
], e = this.getDriverOptionsDescription();
for (const [i, s] of Object.entries(e)) {
const a = {
type: s.type,
id: `driver-option-${i}`,
label: s.label,
options: s.type === "list" ? s.options : void 0,
value: this.driverOptions[i] || s.default,
onChange: (h) => {
this.driverOptions[i] = h, this.saveSettings();
}
};
s.min && (a.min = s.min), s.max && (a.max = s.max), t.push(a);
}
return t;
}
setupPopup() {
if (!this.editor) return;
const t = this.createPopupItems();
this.popup = new m(this.editor, {
title: "AI Assistant",
className: "ai-assistant",
closeOnClickOutside: !0,
buttons: [
{
label: "Generate",
variant: "primary",
onClick: () => this.handleGenerate()
},
{
label: "Cancel",
variant: "secondary",
onClick: () => {
var e;
return (e = this.popup) == null ? void 0 : e.hide();
}
}
],
items: t
// Передаем массив стандартных и динамических полей
});
}
updatePopupContent() {
if (!this.popup) return;
const t = this.createPopupItems();
this.popup.rerender(t);
}
getDriverOptionsDescription() {
const t = this.drivers[this.driverName];
return t ? t.getOptionsDescription() : {};
}
async handleGenerate() {
if (!(!this.editor || !this.popup)) {
if (this.popup.rerender([
{
type: "loader",
id: "loader"
}
// Другие элементы попапа
]), this.driver = this.drivers[this.driverName], !this.driver)
throw new Error("Unsupported driver");
try {
const t = `${this.structurePrompt}
${this.prompt}`, e = await this.driver.generateText(t, this.driverOptions);
this.editor.insertContent(e), this.popup.hide();
} catch (t) {
console.error("Error generating text:", t), alert("Failed to generate text. Please check your API key and try again.");
} finally {
const t = this.createPopupItems();
this.popup.rerender(t);
}
}
}
saveSettings() {
const t = {
apiKey: this.apiKey,
driverName: this.driverName,
prompt: this.prompt,
structurePrompt: this.structurePrompt,
driverOptions: this.driverOptions
};
localStorage.setItem(p, JSON.stringify(t));
}
loadSettings() {
const t = localStorage.getItem(p);
if (t) {
const e = JSON.parse(t);
this.apiKey = e.apiKey || "", this.driverName = e.driverName || "openai", this.prompt = e.prompt || n, this.structurePrompt = e.structurePrompt || l, this.driverOptions = e.driverOptions || {};
}
}
destroy() {
this.popup && (this.popup.destroy(), this.popup = null), this.editor = null;
}
}
export {
z as AIAssistantPlugin
};