lijianqi/uai-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加大模型对话功能

Browse Source
This commit is contained in:
wux_labs
2025-02-21 13:42:54 +08:00
parent 0ff68bea99
commit 213c796713
11 changed files with 807 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/menus/toolbar/Classic.ts
+36
View File
@@ -77,6 +77,8 @@ import { ExportPdf } from "./export/ExportPdf.ts";
import { ExportMarkdown } from "./export/ExportMarkdown.ts";
import { ExportImage } from "./export/ExportImage.ts";
import { ToggleChat } from "./ai/ToggleChat.ts";
/**
* 传统菜单栏
*/
@@ -112,6 +114,10 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
classicMenuExportScrollable!: ScrollableDiv;
classicMenuExportGroup!: HTMLElement;
// 人工智能菜单容器
classicMenuAIScrollable!: ScrollableDiv;
classicMenuAIGroup!: HTMLElement;
// 基础菜单
baseMenuUndo!: Undo;
baseMenuRedo!: Redo;
@@ -184,6 +190,9 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
exportMenuExportMarkdown!: ExportMarkdown;
exportMenuExportImage!: ExportImage;
// 人工智能菜单
aiMenuToggleChat!: ToggleChat;
constructor(defaultToolbarMenus: Record<string, any>[]) {
super();
this.defaultToolbarMenus = defaultToolbarMenus;
@@ -233,6 +242,7 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
this.classicMenuToolScrollable.style.display = "none";
this.classicMenuPageScrollable.style.display = "none";
this.classicMenuExportScrollable.style.display = "none";
this.classicMenuAIScrollable.style.display = "none";
if (menu === "base") {
this.classicMenuBaseScrollable.style.display = "flex";
}
@@ -251,6 +261,9 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
if (menu === "export") {
this.classicMenuExportScrollable.style.display = "flex";
}
if (menu === "ai") {
this.classicMenuAIScrollable.style.display = "flex";
}
})
// 创建分组菜单
this.createBaseMenu(event, options);
@@ -259,6 +272,7 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
this.createToolMenu(event, options);
this.createPageMenu(event, options);
this.createExportMenu(event, options);
this.createAIMenu(event, options);
this.classicMenuBaseScrollable.style.display = "flex";
}
@@ -450,6 +464,9 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
this.exportMenuExportImage = new ExportImage({ menuType: "button", enable: true, header: "classic", hideText: false });
this.eventComponents.push(this.exportMenuExportImage);
this.aiMenuToggleChat = new ToggleChat({ menuType: "button", enable: true, header: "classic", hideText: false });
this.eventComponents.push(this.aiMenuToggleChat);
}
/**
* 创建基础菜单
@@ -650,4 +667,23 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
this.classicMenuExportGroup.appendChild(group2);
group2.appendChild(this.exportMenuExportImage);
}
/**
* 创建人工智能菜单
* @param event
* @param options
*/
createAIMenu(event: EditorEvents["create"], options: UAIEditorOptions) {
this.classicMenuAIGroup = document.createElement("div");
this.classicMenuAIGroup.style.display = "flex";
this.classicMenuAIScrollable = new ScrollableDiv(this.classicMenuAIGroup);
this.classicMenuAIScrollable.style.display = "none";
this.classicMenu.appendChild(this.classicMenuAIScrollable);
this.classicMenuAIScrollable.onCreate(event, options);
const group1 = document.createElement("div");
group1.classList.add("uai-classic-virtual-group");
this.classicMenuAIGroup.appendChild(group1);
group1.appendChild(this.aiMenuToggleChat);
}
}
src/components/menus/toolbar/Ribbon.ts
+36
View File
@@ -79,6 +79,8 @@ import { ExportPdf } from "./export/ExportPdf.ts";
import { ExportMarkdown } from "./export/ExportMarkdown.ts";
import { ExportImage } from "./export/ExportImage.ts";
import { ToggleChat } from "./ai/ToggleChat.ts";
/**
* 经典菜单栏
*/
@@ -115,6 +117,10 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
ribbonMenuExportScrollable!: ScrollableDiv;
ribbonMenuExportGroup!: HTMLElement;
// 人工智能菜单容器
ribbonMenuAIScrollable!: ScrollableDiv;
ribbonMenuAIGroup!: HTMLElement;
// 基础菜单
baseMenuUndo!: Undo;
baseMenuRedo!: Redo;
@@ -187,6 +193,9 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
exportMenuExportMarkdown!: ExportMarkdown;
exportMenuExportImage!: ExportImage;
// 人工智能菜单
aiMenuToggleChat!: ToggleChat;
constructor(defaultToolbarMenus: Record<string, any>[]) {
super();
this.defaultToolbarMenus = defaultToolbarMenus;
@@ -229,6 +238,7 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
this.ribbonMenuToolScrollable.style.display = "none";
this.ribbonMenuPageScrollable.style.display = "none";
this.ribbonMenuExportScrollable.style.display = "none";
this.ribbonMenuAIScrollable.style.display = "none";
if (menu.value === "base") {
this.ribbonMenuBaseScrollable.style.display = "flex";
}
@@ -247,6 +257,9 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
if (menu.value === "export") {
this.ribbonMenuExportScrollable.style.display = "flex";
}
if (menu.value === "ai") {
this.ribbonMenuAIScrollable.style.display = "flex";
}
})
ribbonTabs.appendChild(tab);
});
@@ -270,6 +283,7 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
this.createToolMenu(event, options);
this.createPageMenu(event, options);
this.createExportMenu(event, options);
this.createAIMenu(event, options);
this.ribbonMenuBaseScrollable.style.display = "flex";
}
@@ -473,6 +487,9 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
this.exportMenuExportImage = new ExportImage({ menuType: "button", enable: true, huge: true, hideText: false });
this.eventComponents.push(this.exportMenuExportImage);
this.aiMenuToggleChat = new ToggleChat({ menuType: "button", enable: true, huge: true, hideText: false });
this.eventComponents.push(this.aiMenuToggleChat);
}
/**
@@ -755,4 +772,23 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
this.ribbonMenuExportGroup.appendChild(group2);
group2.appendChild(this.exportMenuExportImage);
}
/**
* 创建人工智能菜单
* @param event
* @param options
*/
createAIMenu(_event: EditorEvents["create"], _options: UAIEditorOptions) {
this.ribbonMenuAIGroup = document.createElement("div");
this.ribbonMenuAIGroup.classList.add("uai-ribbon-container");
this.ribbonMenuAIGroup.style.display = "flex";
this.ribbonMenuAIScrollable = new ScrollableDiv(this.ribbonMenuAIGroup);
this.ribbonMenuAIScrollable.style.display = "none";
this.ribbonScrollableContainer.appendChild(this.ribbonMenuAIScrollable);
const group1 = document.createElement("div");
group1.classList.add("uai-ribbon-virtual-group");
this.ribbonMenuAIGroup.appendChild(group1);
group1.appendChild(this.aiMenuToggleChat);
}
}
src/components/menus/toolbar/ai/ToggleChat.ts
+79
View File
@@ -0,0 +1,79 @@
// Copyright (c) 2024-present AI-Labs
// @ ts-nocheck
import { MenuButton, MenuButtonOptions } from "../../MenuButton.ts";
import icon from "../../../../assets/icons/chat-bot.svg";
import { t } from "i18next";
import { UAIEditorEventListener, UAIEditorOptions, InnerEditor } from "../../../../core/UAIEditor.ts";
import { EditorEvents } from "@tiptap/core";
/**
* 人工智能菜单：聊天
*/
export class ToggleChat extends HTMLElement implements UAIEditorEventListener {
// 按钮选项
menuButtonOptions: MenuButtonOptions = {
menuType: "button",
enable: true,
icon: icon,
hideText: false,
text: t('ai.chat.title'),
tooltip: t('ai.chat.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.chatContainer.style.display;
if (display != "none") {
// 如果窗口已打开，则关闭窗口
(event.editor as InnerEditor).uaiEditor.chatContainer.style.display = "none";
} else {
// 如果窗口没打开，则先关闭其他窗口，再打开聊天窗口
(event.editor as InnerEditor).uaiEditor.toggleContainers.forEach(toggle => {
toggle.style.display = "none";
});
(event.editor as InnerEditor).uaiEditor.chatContainer.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);
}
}