添加大模型绘图功能

src/ai/config/AIConfig.ts

@@ -24,6 +24,19 @@ export interface AIChatConfig {
     access_token?: string, // wenxin
 }
 
+/**
+ * 文生图的基本配置信息
+ */
+export interface Text2ImageConfig {
+    modelType: "openai" | "custom";
+
+    baseUrl?: string; // openai && gitee
+    apiKey?: string; // openai && gitee && spark
+    model?: string;  // openai
+
+    size?: "512x512" | "1024x1024";
+}
+
 /**
  * 快捷命令基本配置信息
  */

src/components/Footer.ts

@@ -6,6 +6,7 @@ import { UAIEditorEventListener, UAIEditorOptions } from "../core/UAIEditor.ts";
 
 import { ToggleToc } from "./menus/toolbar/page/ToggleToc";
 import { ToggleChat } from "./menus/toolbar/ai/ToggleChat.ts";
+import { ToggleImage } from "./menus/toolbar/ai/ToggleImage.ts";
 import { CharacterCount } from "./menus/statusbar/CharacterCount.ts";
 
 import { Fullscreen } from "./menus/statusbar/Fullscreen.ts";
@@ -22,6 +23,8 @@ export class Footer extends HTMLElement implements UAIEditorEventListener {
     toggleToc!: ToggleToc;
     // 模型对话
     toggleChat!: ToggleChat;
+    // 图片绘制
+    toggleImage!: ToggleImage;
 
     // 字数统计
     characterCount!: CharacterCount;
@@ -39,6 +42,7 @@ export class Footer extends HTMLElement implements UAIEditorEventListener {
         // 创建状态栏菜单
         this.toggleToc = new ToggleToc({ menuType: "button", enable: true });
         this.toggleChat = new ToggleChat({ menuType: "button", enable: true });
+        this.toggleImage = new ToggleImage({ menuType: "button", enable: true });
         this.characterCount = new CharacterCount();
 
         this.fullscreen = new Fullscreen({ menuType: "button", enable: true });
@@ -55,6 +59,7 @@ export class Footer extends HTMLElement implements UAIEditorEventListener {
         // 初始化状态栏菜单
         this.toggleToc.onCreate(event, options);
         this.toggleChat.onCreate(event, options);
+        this.toggleImage.onCreate(event, options);
         this.characterCount.onCreate(event, options);
 
         this.fullscreen.onCreate(event, options);
@@ -82,13 +87,17 @@ export class Footer extends HTMLElement implements UAIEditorEventListener {
 
         this.toggleToc.classList.add("uai-status-bar-button");
         this.toggleChat.classList.add("uai-status-bar-button");
+        this.toggleImage.classList.add("uai-status-bar-button");
 
         this.fullscreen.classList.add("uai-status-bar-button");
+        this.poweredBy.classList.add("uai-status-bar-button");
+        this.feedback.classList.add("uai-status-bar-button");
 
         // 状态栏中添加功能菜单按钮
         statusBarLeft.appendChild(this.toggleToc);
         statusBarLeft.appendChild(this.createSplit());
         statusBarLeft.appendChild(this.toggleChat);
+        statusBarLeft.appendChild(this.toggleImage);
         statusBarLeft.appendChild(this.createSplit());
         statusBarLeft.appendChild(this.characterCount);
 
@@ -116,6 +125,7 @@ export class Footer extends HTMLElement implements UAIEditorEventListener {
     onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) {
         this.toggleToc.onTransaction(event, options);
         this.toggleChat.onTransaction(event, options);
+        this.toggleImage.onTransaction(event, options);
         this.characterCount.onTransaction(event, options);
 
         this.fullscreen.onTransaction(event, options);
@@ -126,6 +136,7 @@ export class Footer extends HTMLElement implements UAIEditorEventListener {
     onEditableChange(editable: boolean) {
         this.toggleToc.onEditableChange(editable);
         this.toggleChat.onEditableChange(editable);
+        this.toggleImage.onEditableChange(editable);
         this.characterCount.onEditableChange(editable);
 
         this.fullscreen.onEditableChange(editable);

src/components/ai/AIAction.ts

@@ -220,3 +220,56 @@ export class AIChatResponseAction extends AbstractAIAction {
         this.sourceInputElement = sourceInputElement
     }
 }
+
+/**
+ * 定义画图界面中响应数据的功能菜单
+ */
+export class AIImageResponseAction extends AbstractAIAction {
+    sourceDivElement!: HTMLElement
+    sourceInputElement!: HTMLElement
+
+    // 默认的菜单项
+    defaultAIActions: AICommand[] = [
+        {
+            // 追加图片内容到编辑器的当前光标位置
+            icon: Icons.InsertAction,
+            name: `追加`,
+            action: () => {
+                const {
+                    state: { selection, tr },
+                    view: { dispatch }
+                } = this.editor
+                const content = (this.editor as InnerEditor).parseHtml(markdownToHtml(this.sourceDivElement.innerHTML));
+                dispatch(tr.replace(selection.to, selection.to, new Slice(content, 0, 0)).scrollIntoView())
+            }
+        },
+        {
+            // 替换编辑器中选中的内容
+            icon: Icons.ReplaceAction,
+            name: `替换`,
+            action: () => {
+                const {
+                    state: { tr },
+                    view: { dispatch }
+                } = this.editor!
+                const content = (this.editor as InnerEditor).parseHtml(markdownToHtml(this.sourceDivElement.innerHTML));
+                dispatch(tr.replaceSelection(new Slice(content, 0, 0)).scrollIntoView())
+            }
+        }
+    ]
+
+    constructor() {
+        super()
+        this.aiActions = this.defaultAIActions.map((menu) => {
+            return {
+                ...menu,
+                name: `${t(menu.name)}`
+            }
+        })
+    }
+
+    bindSourceElement(sourceDivElement: HTMLElement, sourceInputElement: HTMLElement) {
+        this.sourceDivElement = sourceDivElement
+        this.sourceInputElement = sourceInputElement
+    }
+}

src/components/containers/ImageContainer.ts

@@ -0,0 +1,305 @@
+// Copyright (c) 2024-present AI-Labs
+
+// @ ts-nocheck
+import closeIcon from "../../assets/icons/close.svg";
+import titleIcon from "../../assets/icons/image-bot.svg";
+import sendIcon from "../../assets/icons/send-message.svg";
+import { t } from "i18next";
+import { UAIEditorEventListener, UAIEditorOptions } from "../../core/UAIEditor.ts";
+import { EditorEvents } from "@tiptap/core";
+import { createAvatar } from "../../utils/CreateAvatar.ts";
+import { Icons } from "../Icons.ts";
+import OpenAI from "openai";
+import { AIChatConfig } from "../../ai/config/AIConfig.ts";
+import { markdownToHtml } from "../../utils/MarkdownUtil.ts";
+import { AIRequestAction, AIImageResponseAction } from "../ai/AIAction.ts";
+
+/**
+ * 定义图像处理容器
+ */
+export class ImageContainer extends HTMLElement implements UAIEditorEventListener {
+    // 图像处理容器元素
+    container!: HTMLElement;
+
+    // 图像处理标题元素
+    imageTitle!: HTMLElement;
+
+    // 图像生成内容元素
+    content!: HTMLElement;
+
+    // 输入组件元素
+    messageTextarea!: HTMLTextAreaElement;
+    imageButton!: HTMLButtonElement;
+    modelSelect!: HTMLSelectElement;
+
+    client?: OpenAI;
+    modelConfig?: AIChatConfig;
+
+    event!: EditorEvents["create"];
+    options!: UAIEditorOptions;
+
+    constructor() {
+        super();
+        // 初始化图像处理容器
+        this.container = document.createElement("div");
+        this.container.classList.add("uai-pannel-container");
+        this.appendChild(this.container);
+
+        // 初始化标题
+        this.imageTitle = document.createElement("div");
+        this.imageTitle.classList.add("uai-pannel-title");
+        this.imageTitle.innerHTML = `<img src="${titleIcon}" width="18" />&nbsp; ${t('ai.image.title')}`;
+        this.container.appendChild(this.imageTitle);
+
+        // 初始化关闭容器按钮
+        const dialogClose = document.createElement("div");
+        dialogClose.classList.add("uai-pannel-close");
+        dialogClose.innerHTML = `<img src="${closeIcon}" width="24"/>`;
+        // 点击关闭按钮关闭容器
+        dialogClose.addEventListener("click", () => {
+            this.style.display = "none";
+        })
+        this.imageTitle.appendChild(dialogClose);
+
+        // 初始化画图模型选择容器
+        const modelSelectDiv = document.createElement('div');
+        modelSelectDiv.classList.add('uai-container-app-models');
+
+        // 画图模型下拉选择
+        const modelSelectText = document.createElement('div');
+        modelSelectText.innerText = "模型：";
+        modelSelectDiv.appendChild(modelSelectText);
+
+        this.modelSelect = document.createElement('select');
+        this.modelSelect.classList.add('uai-model-select');
+        modelSelectDiv.appendChild(this.modelSelect);
+        this.container.appendChild(modelSelectDiv);
+
+        // 画图内容交互区域
+        this.content = document.createElement('div');
+        this.content.classList.add('uai-ai-content');
+        this.container.appendChild(this.content);
+
+        // 定义一个监听，当交互区域的内容发生变化时，滚动到最底部
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === 'childList' || mutation.type === 'characterData') {
+                    this.content.scrollTop = this.content.scrollHeight
+                }
+            })
+        })
+        // 配置MutationObserver
+        const config = { childList: true, characterData: true }
+
+        // 开始监听div的变化
+        observer.observe(this.content, config)
+
+        // 初始化输入组件
+        const divAppInput = document.createElement('div');
+        divAppInput.classList.add('uai-container-app-input');
+
+        const divMessageContainer = document.createElement('div');
+        divMessageContainer.classList.add('uai-message-container');
+
+        this.messageTextarea = document.createElement('textarea');
+        this.messageTextarea.classList.add('uai-message-textarea');
+        this.messageTextarea.rows = 1;
+        this.messageTextarea.placeholder = '请输入内容... Shift+Enter换行；Enter发送';
+
+        // 定义键盘事件，当按Enter键发送内容
+        this.messageTextarea.addEventListener('keydown', (event) => {
+            this.handleKeyDown(event);
+        })
+        // 定义输入事件，输入框自动根据输入内容调整大小
+        this.messageTextarea.addEventListener('input', () => {
+            this.messageTextarea.style.height = 'auto';
+            this.messageTextarea.style.height = this.messageTextarea.scrollHeight + 'px';
+        })
+        divMessageContainer.appendChild(this.messageTextarea);
+
+        // 初始化发送按钮
+        this.imageButton = document.createElement('button');
+        this.imageButton.classList.add('uai-image-button');
+        this.imageButton.innerHTML = `<img src="${sendIcon}" height="24" />`;
+        this.imageButton.addEventListener('click', () => {
+            this.sendMessage(this.messageTextarea.value);
+        })
+        divMessageContainer.appendChild(this.imageButton);
+
+        divAppInput.appendChild(divMessageContainer);
+        this.container.appendChild(divAppInput);
+    }
+
+    /**
+     * 定义创建方法
+     * @param event 
+     * @param options 
+     */
+    onCreate(event: EditorEvents["create"], options: UAIEditorOptions) {
+        this.event = event;
+        this.options = options;
+
+        // 初始化画图客户端
+        if (options.ai && options.ai.image?.models?.text2image) {
+            // 初始化所有可选画图模型
+            for (let model of Object.keys(options.ai.image?.models?.text2image)) {
+                const option = document.createElement('option');
+                option.textContent = model;
+                this.modelSelect.appendChild(option);
+            }
+            // 获取当前选中的模型
+            const model = this.modelSelect.selectedOptions[0].value;
+            // 获取选中的模型的配置信息
+            this.modelConfig = options.ai!.image!.models!.text2image![model];
+            // 根据模型配置信息初始化一个客户端
+            this.client = new OpenAI({
+                baseURL: this.modelConfig.baseUrl,
+                apiKey: this.modelConfig.apiKey,
+                dangerouslyAllowBrowser: true,
+            });
+            // 定义模型选择的改变事件，当重新选择了对话模型，则需要重新创建一个客户端
+            this.modelSelect.addEventListener("change", () => {
+                // 获取当前选中的模型
+                const model = this.modelSelect.selectedOptions[0].value;
+                // 获取选中的模型的配置信息
+                this.modelConfig = options.ai!.image!.models!.text2image![model];
+                // 根据模型配置信息初始化一个客户端
+                this.client = new OpenAI({
+                    baseURL: this.modelConfig.baseUrl,
+                    apiKey: this.modelConfig.apiKey,
+                    dangerouslyAllowBrowser: true,
+                });
+            })
+        }
+    }
+
+    onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) {
+    }
+
+    onEditableChange(editable: boolean) {
+    }
+
+    handleKeyDown(event: KeyboardEvent) {
+        // 检查是否按下了 Shift 和 Enter 键
+        if (event.shiftKey && event.key === 'Enter') {
+            // 如果是 Shift + Enter，允许默认行为（通常是换行）
+            return;
+        }
+        // 检查是否按下了 Enter 键
+        if (event.key === 'Enter') {
+            // 阻止默认的换行行为
+            event.preventDefault();
+            // 处理发送消息的逻辑
+            this.sendMessage(this.messageTextarea.value);
+        }
+    }
+
+    /**
+     * 定义发送消息的方法
+     * @param message 
+     */
+    sendMessage(message: string) {
+        if (message.trim() !== '') {
+            // 创建用户消息容器
+            const userMessageDiv = document.createElement('div');
+            userMessageDiv.classList.add('message');
+            userMessageDiv.classList.add('message-sent');
+
+            // 创建用户发送消息容器
+            const userBubbleDiv = document.createElement('div');
+            userBubbleDiv.classList.add('markdown-body');
+            userBubbleDiv.classList.add('bubble');
+            userBubbleDiv.classList.add('bubble-sent');
+            userBubbleDiv.innerHTML = markdownToHtml(message);
+            userBubbleDiv.setAttribute("InnerContent", message);
+
+            // 创建用户输入的功能按钮
+            const userActionDown = document.createElement(
+                'uai-editor-ai-action-request-action'
+            ) as AIRequestAction;
+            userActionDown.classList.add('hidden-content');
+            userActionDown.onCreate(this.event, this.options);
+            userActionDown.bindSourceElement(userBubbleDiv, this.messageTextarea);
+
+            // 创建用户头像容器
+            const userAvatarDiv = createAvatar(Icons.UserAvatar);
+            userAvatarDiv.classList.add('user-avatar');
+
+            // 用户消息容器中，添加功能按钮
+            userMessageDiv.appendChild(userActionDown);
+            // 用户消息容器中，添加用户发送内容
+            userMessageDiv.appendChild(userBubbleDiv);
+            // 用户消息容器中，添加用户头像
+            userMessageDiv.appendChild(userAvatarDiv);
+
+            // 展示用户发送的消息
+            this.content.appendChild(userMessageDiv);
+
+            // 清空消息输入框
+            this.messageTextarea.value = '';
+            this.messageTextarea.style.height = 'auto';
+            this.messageTextarea.style.height = this.messageTextarea.scrollHeight + 'px';
+            this.messageTextarea.focus();
+
+            // 发送消息并等待响应
+            this.receiveResponse(message);
+        }
+    }
+
+    /**
+     * 定义接收模型响应的方法
+     * @param message 
+     */
+    receiveResponse(message: string) {
+        // 创建模型响应消息容器
+        const botResponseDiv = document.createElement('div');
+        botResponseDiv.classList.add('message');
+        botResponseDiv.classList.add('message-received');
+
+        // 定义模型头像容器
+        const botAvatarDiv = createAvatar(Icons.BotAvatar);
+        botAvatarDiv.classList.add('bot-avatar');
+
+        // 定义模型输出内容容器
+        const botBubbleDiv = document.createElement('div');
+        botBubbleDiv.classList.add('markdown-body');
+        botBubbleDiv.classList.add('bubble');
+        botBubbleDiv.classList.add('bubble-received');
+        botBubbleDiv.innerHTML = Icons.Loading;
+
+        // 定义模型输出的功能按钮
+        const botActionDown = document.createElement(
+            'uai-editor-ai-action-image-response-action'
+        ) as AIImageResponseAction;
+        botActionDown.classList.add('hidden-content');
+        botActionDown.onCreate(this.event, this.options);
+        botActionDown.bindSourceElement(botBubbleDiv, this.messageTextarea);
+
+        // 在模型响应消息容器中，添加头像
+        botResponseDiv.appendChild(botAvatarDiv);
+        // 在模型响应消息容器中，添加模型响应图片内容
+        botResponseDiv.appendChild(botBubbleDiv);
+        // 在模型响应消息容器中，添加功能按钮
+        botResponseDiv.appendChild(botActionDown);
+
+        this.content.appendChild(botResponseDiv);
+
+        // 发起画图请求，并接收模型响应图像
+        if (this.client && this.modelConfig) {
+            // 通过客户端发起请求
+            this.client.images.generate({
+                "model": this.modelConfig.model ?? "dall-e-3",
+                "prompt": message,
+                "size": "1024x1024",
+            }).then(response => {
+                // 接收模型响应图像，并进行图像展示
+                if (response.data) {
+                    botBubbleDiv.innerHTML = `<img src=${response.data[0].url ?? response.data[0].b64_json ?? response.data[0]} />`;
+                } else if (response.images) {
+                    botBubbleDiv.innerHTML = `<img src=${response.images[0].url ?? response.images[0].b64_json ?? response.images[0]} />`;
+                }
+                this.content.scrollTop = this.content.scrollHeight;
+            });
+        }
+    }
+}

src/components/index.ts

@@ -6,6 +6,7 @@ import { Editor } from "../components/Editor.ts";
 import { Footer } from "../components/Footer.ts";
 
 import { ChatContainer } from "../components/containers/ChatContainer.ts";
+import { ImageContainer } from "../components/containers/ImageContainer.ts";
 import { TocContainer } from "../components/containers/TocContainer.ts";
 
 import { Ribbon } from "./menus/toolbar/Ribbon.ts";
@@ -88,6 +89,7 @@ import { ExportMarkdown } from "./menus/toolbar/export/ExportMarkdown.ts";
 import { ExportImage } from "./menus/toolbar/export/ExportImage.ts";
 
 import { ToggleChat } from "./menus/toolbar/ai/ToggleChat.ts";
+import { ToggleImage } from "./menus/toolbar/ai/ToggleImage.ts";
 
 import { TextSelectionBubbleMenu } from "./menus/bubble/TextSelectionBubbleMenu.ts";
 
@@ -105,7 +107,7 @@ import { Fullscreen } from "./menus/statusbar/Fullscreen.ts";
 import { Feedback } from "./menus/statusbar/Feedback.ts";
 import { PoweredBy } from "./menus/statusbar/PoweredBy.ts";
 
-import { AIRequestAction, AIChatResponseAction } from "./ai/AIAction.ts";
+import { AIRequestAction, AIChatResponseAction, AIImageResponseAction } from "./ai/AIAction.ts";
 
 // 注册组件
 defineCustomElement('uai-editor-header', Header);
@@ -113,6 +115,7 @@ defineCustomElement('uai-editor-editor', Editor);
 defineCustomElement('uai-editor-footer', Footer);
 
 defineCustomElement('uai-editor-chat-container', ChatContainer);
+defineCustomElement('uai-editor-image-container', ImageContainer);
 defineCustomElement('uai-editor-toc-container', TocContainer);
 
 defineCustomElement('uai-editor-ribbon-menu', Ribbon);
@@ -195,6 +198,7 @@ defineCustomElement('uai-editor-export-menu-markdown', ExportMarkdown);
 defineCustomElement('uai-editor-export-menu-image', ExportImage);
 
 defineCustomElement('uai-editor-ai-menu-toggle-chat', ToggleChat);
+defineCustomElement('uai-editor-ai-menu-toggle-image', ToggleImage);
 
 defineCustomElement('uai-editor-statusbar-menu-character-count', CharacterCount);
 
@@ -214,3 +218,4 @@ defineCustomElement('uai-editor-bubble-menu-audio', AudioBubbleMenu);
 
 defineCustomElement('uai-editor-ai-action-request-action', AIRequestAction);
 defineCustomElement('uai-editor-ai-action-chat-response-action', AIChatResponseAction);
+defineCustomElement('uai-editor-ai-action-image-response-action', AIImageResponseAction);

src/components/menus/toolbar/Classic.ts

@@ -78,6 +78,7 @@ import { ExportMarkdown } from "./export/ExportMarkdown.ts";
 import { ExportImage } from "./export/ExportImage.ts";
 
 import { ToggleChat } from "./ai/ToggleChat.ts";
+import { ToggleImage } from "./ai/ToggleImage.ts";
 
 /**
  * 传统菜单栏
@@ -192,6 +193,7 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
 
     // 人工智能菜单
     aiMenuToggleChat!: ToggleChat;
+    aiMenuToggleImage!: ToggleImage;
 
     constructor(defaultToolbarMenus: Record<string, any>[]) {
         super();
@@ -467,6 +469,9 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
 
         this.aiMenuToggleChat = new ToggleChat({ menuType: "button", enable: true, header: "classic", hideText: false });
         this.eventComponents.push(this.aiMenuToggleChat);
+
+        this.aiMenuToggleImage = new ToggleImage({ menuType: "button", enable: true, header: "classic", hideText: false });
+        this.eventComponents.push(this.aiMenuToggleImage);
     }
     /**
      * 创建基础菜单
@@ -685,5 +690,6 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
         group1.classList.add("uai-classic-virtual-group");
         this.classicMenuAIGroup.appendChild(group1);
         group1.appendChild(this.aiMenuToggleChat);
+        group1.appendChild(this.aiMenuToggleImage);
     }
 }

src/components/menus/toolbar/Ribbon.ts

@@ -80,6 +80,7 @@ import { ExportMarkdown } from "./export/ExportMarkdown.ts";
 import { ExportImage } from "./export/ExportImage.ts";
 
 import { ToggleChat } from "./ai/ToggleChat.ts";
+import { ToggleImage } from "./ai/ToggleImage.ts";
 
 /**
  * 经典菜单栏
@@ -195,6 +196,7 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
 
     // 人工智能菜单
     aiMenuToggleChat!: ToggleChat;
+    aiMenuToggleImage!: ToggleImage;
 
     constructor(defaultToolbarMenus: Record<string, any>[]) {
         super();
@@ -490,6 +492,9 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
 
         this.aiMenuToggleChat = new ToggleChat({ menuType: "button", enable: true, huge: true, hideText: false });
         this.eventComponents.push(this.aiMenuToggleChat);
+
+        this.aiMenuToggleImage = new ToggleImage({ menuType: "button", enable: true, huge: true, hideText: false });
+        this.eventComponents.push(this.aiMenuToggleImage);
     }
 
     /**
@@ -790,5 +795,6 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
         group1.classList.add("uai-ribbon-virtual-group");
         this.ribbonMenuAIGroup.appendChild(group1);
         group1.appendChild(this.aiMenuToggleChat);
+        group1.appendChild(this.aiMenuToggleImage);
     }
 }

src/components/menus/toolbar/ai/ToggleImage.ts

@@ -0,0 +1,79 @@
+// Copyright (c) 2024-present AI-Labs
+
+// @ ts-nocheck
+import { MenuButton, MenuButtonOptions } from "../../MenuButton.ts";
+import icon from "../../../../assets/icons/image-bot.svg";
+import { t } from "i18next";
+import { UAIEditorEventListener, UAIEditorOptions, InnerEditor } from "../../../../core/UAIEditor.ts";
+import { EditorEvents } from "@tiptap/core";
+
+/**
+ * 人工智能菜单：画图
+ */
+export class ToggleImage extends HTMLElement implements UAIEditorEventListener {
+    // 按钮选项
+    menuButtonOptions: MenuButtonOptions = {
+        menuType: "button",
+        enable: true,
+        icon: icon,
+        hideText: false,
+        text: t('ai.image.title'),
+        tooltip: t('ai.image.title'),
+    }
+
+    // 功能按钮
+    menuButton: MenuButton;
+
+    constructor(options: MenuButtonOptions) {
+        super();
+
+        // 初始化功能按钮选项
+        this.menuButtonOptions = { ...this.menuButtonOptions, ...options };
+
+        // 创建功能按钮
+        this.menuButton = new MenuButton(this.menuButtonOptions);
+    }
+
+    /**
+     * 定义创建方法
+     * @param event 
+     * @param options 
+     */
+    onCreate(event: EditorEvents["create"], options: UAIEditorOptions) {
+        this.menuButton.onCreate(event, options);
+        this.appendChild(this.menuButton);
+
+        // 定义按钮点击事件，打开人工智能画图窗口
+        this.addEventListener("click", () => {
+            if (this.menuButtonOptions.enable) {
+                // 判断画图窗口是否已打开
+                const display = (event.editor as InnerEditor).uaiEditor.imageContainer.style.display;
+                if (display != "none") {
+                    // 如果窗口已打开，则关闭窗口
+                    (event.editor as InnerEditor).uaiEditor.imageContainer.style.display = "none";
+                } else {
+                    // 如果窗口没打开，则先关闭其他窗口，再打开画图窗口
+                    (event.editor as InnerEditor).uaiEditor.toggleContainers.forEach(toggle => {
+                        toggle.style.display = "none";
+                    });
+                    (event.editor as InnerEditor).uaiEditor.imageContainer.style.display = "block";
+                }
+            }
+        })
+    }
+
+    /**
+     * 定义Transaction监听方法
+     * @param event 
+     * @param options 
+     */
+    onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) {
+        this.menuButton.onTransaction(event, options);
+    }
+
+    onEditableChange(editable: boolean) {
+        this.menuButtonOptions.enable = editable;
+        this.menuButton.onEditableChange(editable);
+    }
+}
+

src/core/UAIEditor.ts

@@ -13,6 +13,7 @@ import { TableOfContentData } from "@tiptap-pro/extension-table-of-contents";
 import "../components"
 import { Header } from "../components/Header.ts";
 import { ChatContainer } from "../components/containers/ChatContainer.ts";
+import { ImageContainer } from "../components/containers/ImageContainer.ts";
 import { TocContainer } from "../components/containers/TocContainer.ts";
 import { Editor } from "../components/Editor.ts";
 import { Footer } from "../components/Footer.ts";
@@ -25,7 +26,7 @@ import i18next from "i18next";
 import { zh } from "../i18n/zh.ts";
 import { Resource } from "i18next";
 import { allExtensions } from "./UAIExtensions.ts";
-import { AIChatConfig } from "../ai/config/AIConfig.ts";
+import { AIChatConfig, Text2ImageConfig } from "../ai/config/AIConfig.ts";
 import { markdownToHtml } from "../utils/MarkdownUtil.ts";
 import { Uploader } from "../utils/FileUploader.ts";
 
@@ -110,6 +111,11 @@ export type UAIEditorOptions = {
     ai?: {
         chat?: {
             models?: Record<string, AIChatConfig>,
+        },
+        image?: {
+            models?: {
+                text2image?: Record<string, Text2ImageConfig>,
+            },
         }
     }
 }
@@ -150,6 +156,7 @@ export class UAIEditor {
 
     header!: Header;
     chatContainer!: ChatContainer;
+    imageContainer!: ImageContainer;
     tocContainer!: TocContainer;
     editor!: Editor;
     footer!: Footer;
@@ -252,6 +259,11 @@ export class UAIEditor {
                 chat: {
                     models: customOptions.ai?.chat?.models,
                 },
+                image: {
+                    models: {
+                        text2image: customOptions.ai?.image?.models?.text2image,
+                    },
+                }
             }
         };
         const i18nConfig = this.options.i18n || {};
@@ -295,6 +307,11 @@ export class UAIEditor {
         this.center.appendChild(this.chatContainer);
         this.toggleContainers.push(this.chatContainer);
 
+        this.imageContainer = new ImageContainer();
+        this.imageContainer.style.display = "none";
+        this.center.appendChild(this.imageContainer);
+        this.toggleContainers.push(this.imageContainer);
+
         this.editor = new Editor();
         this.editor.classList.add("uai-main");
         this.center.appendChild(this.editor);
@@ -358,6 +375,7 @@ export class UAIEditor {
         this.header.onCreate(event, this.options);
         this.tocContainer.onCreate(event, this.options);
         this.chatContainer.onCreate(event, this.options);
+        this.imageContainer.onCreate(event, this.options);
         this.editor.onCreate(event, this.options);
         this.footer.onCreate(event, this.options);
         this.eventComponents.forEach(component => {
@@ -369,6 +387,7 @@ export class UAIEditor {
         this.header.onTransaction(event, this.options);
         this.tocContainer.onTransaction(event, this.options);
         this.chatContainer.onTransaction(event, this.options);
+        this.imageContainer.onTransaction(event, this.options);
         this.editor.onTransaction(event, this.options);
         this.footer.onTransaction(event, this.options);
         this.eventComponents.forEach(component => {