A
aiDialog
一个功能丰富的AI对话框组件库，支持多模型切换、Markdown渲染、图片上传、代码高亮等功能。
Statistiken
Gesamtinstallationen
365
Letzte 24 Std.
+1
Benutzerbewertung
-
Anzeige
Beschreibung
Versionen10
Bewertungen0
Berechtigungen
Wird geladen…
一个功能丰富的AI对话框组件库，支持多模型切换、Markdown渲染、图片上传、代码高亮等功能。
// 将整个库代码复制到你的项目中，或通过 script 标签引入
<script src="path/to/ai-dialog.js"></script>
库会自动初始化并在 window 上暴露 aiDialog 对象。
aiDialog.openDialog({
// 触发元素（可选）
el: document.querySelector('.trigger-btn'),
// 主题：'light' 或 'dark'
theme: 'light',
// 模型列表
models: [
{
model: 'deepseek',
modelName: 'DeepSeek-R1',
url: 'https://api.deepseek.com/v1/chat/completions',
apiKey: 'YOUR_API_KEY',
stream: true,
temperature: 0.7
},
{
model: 'qwen3',
modelName: 'Qwen3-Coder',
url: 'https://api.qwen.com/v1',
apiKey: 'YOUR_API_KEY',
stream: true,
temperature: 0.7
}
],
// 当前使用的模型
model: {
model: 'deepseek',
modelName: 'DeepSeek-R1',
url: 'https://api.deepseek.com/v1',
apiKey: 'YOUR_API_KEY',
stream: true,
temperature: 0.7
},
// 按钮配置
button: {
name: 'AI解释',
prompt: '请解释以下内容：{{selection}}',
system: '你是一个专业的AI助手',
isChat: false, // 是否为聊天模式
pin: false, // 是否默认钉住
beforeCallback: (message) => {
console.log('发送前:', message);
},
afterCallback: (content) => {
console.log('接收后:', content);
},
replaceCallback: (result, markdown) => {
console.log('替换内容:', result);
}
},
// 聊天按钮配置（可选）
chatButton: {
name: 'AI聊天',
prompt: '{{selection}}',
system: '你是一个友好的AI助手',
isChat: true
},
// 上下文内容（可选）
context: '当前页面上下文信息...',
// 位置配置
position: 'followTarget', // 或自定义位置
left: 100,
top: 100,
width: 420,
height: 468,
// z-index
zIndex: 10000,
// 库配置
config: {
libs: {
marked: 'https://fastly.jsdelivr.net/npm/marked/marked.min.js',
ImageViewer: 'https://scriptcat.org/lib/4625/1.0.0/ImageViewer.js',
Popup: 'https://scriptcat.org/lib/4657/1.0.0/Popup.js',
LLMStream: 'https://scriptcat.org/lib/4568/1.0.4/LLMStream.js',
}
},
// 模型切换回调
setModel: (newModel) => {
console.log('切换模型:', newModel);
},
// 工具函数
tools: {
getCurrentDoc: async () => {
return {
content: '当前文档内容...'
};
}
}
});
openDialog(options)打开对话框
closeDialog()关闭对话框
sendMessage(userMessage)发送单次消息（解释/翻译模式）
aiDialog.sendMessage('请解释这段代码...');
submitMessage(userMessage)提交聊天消息（聊天模式）
aiDialog.submitMessage('你好，AI！');
clearHistory()清空对话历史
resetChats(action)重置对话框状态
aiDialog.resetChats('new-dialog'); // 新建对话
aiDialog.resetChats('close-dialog'); // 关闭时重置
getHistory()获取当前会话历史
const history = aiDialog.getHistory();
console.log(history);
getGlobalHistory()获取全局历史记录（最多200条）
const globalHistory = aiDialog.getGlobalHistory();
showImage(src)显示图片查看器
aiDialog.showImage('https://example.com/image.jpg');
pin(isPin)钉住/取消钉住对话框
aiDialog.pin(true); // 钉住
aiDialog.pin(false); // 取消
show()显示对话框（不触发初始化）
用户可以通过以下方式添加图片：
右键输入框 → 关联当前文档，将当前文档内容作为上下文发送给AI
AI返回的代码块会自动高亮，鼠标悬停显示复制按钮
支持完整的Markdown语法，包括：
点击右上角模型选择器，可随时切换AI模型
每条消息支持：
AI返回的 <details> 标签会被渲染为可折叠的思考过程
// 明亮主题
aiDialog.openDialog({ theme: 'light' });
// 暗黑主题
aiDialog.openDialog({ theme: 'dark' });
所有样式都使用 .ai-dialog 前缀，可通过CSS覆盖：
/* 修改对话框背景 */
.ai-light.ai-dialog {
background-color: #f9f9f9;
}
/* 修改代码块样式 */
.ai-dialog pre {
background: #282c34;
}
消息发送前触发
button: {
beforeCallback: (message) => {
console.log('即将发送:', message);
// 可以修改 message 内容
}
}
消息接收完成后触发
button: {
afterCallback: (content) => {
console.log('接收完成:', content);
}
}
点击"替换/插入"按钮时触发
button: {
replaceCallback: (result, markdown) => {
console.log('替换内容:', result);
console.log('原始Markdown:', markdown);
}
}
// 配置AI模型
const models = [
{
model: 'deepseek',
modelName: 'DeepSeek-R1',
url: 'https://api.deepseek.com/v1',
apiKey: 'sk-xxx',
stream: true,
temperature: 0.7
}
];
// 打开对话框
aiDialog.openDialog({
el: document.querySelector('.trigger-btn'),
theme: 'light',
models: models,
model: models[0],
button: {
name: 'AI解释',
prompt: '请详细解释以下内容：{{selection}}',
system: '你是一个专业的技术专家',
isChat: false,
afterCallback: (content) => {
console.log('AI回答:', content);
}
},
chatButton: {
name: 'AI聊天',
prompt: '{{selection}}',
system: '你是一个友好的AI助手',
isChat: true
},
position: 'followTarget',
config: {
libs: {
marked: 'https://cdn.jsdelivr.net/npm/marked/marked.min.js'
}
}
});
stream: true 以获得更好的用户体验Q: 如何添加自定义工具栏按钮？
A: 可以通过修改 dialog-header-right 区域的HTML结构添加
Q: 如何持久化对话历史？
A: 使用 getHistory() 获取历史后存储到 localStorage 或数据库
Q: 支持哪些AI模型？
A: 支持所有兼容 OpenAI Chat Completions API 的模型
Q: 如何处理网络错误？
A: 库会自动捕获错误并显示在对话框中，你也可以在 afterCallback 中处理
本库为开源项目，遵循 MIT 许可证。