logo

ScriptCat

aiDialog

wilsons
•
创建于 19 天前
•
更新于 17 天前
一个功能丰富的AI对话框组件库，支持多模型切换、Markdown渲染、图片上传、代码高亮等功能。
总安装量
159
今日新增
+3
用户评分
- / 5.0 (0)
当前版本
1.0.5.1
// @require https://scriptcat.org/lib/4686/1.0.5.1/aiDialog.js?sha384-8EMAThP6kikHZG8R3oVR4tAQWnatJ64d6shcqU0+DYAUb6JiOtwTQzO/q8cBvDdz
库详情
这是一个用户脚本使用的库，你可以在你的脚本中直接引用它。

AI Dialog 使用说明

一个功能丰富的AI对话框组件库，支持多模型切换、Markdown渲染、图片上传、代码高亮等功能。

chat.png

快速开始

1. 引入库

// 将整个库代码复制到你的项目中，或通过 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: '当前文档内容...'
            };
        }
    }
});

API 方法

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()

显示对话框（不触发初始化）

高级功能

1. 图片上传

用户可以通过以下方式添加图片：

  • 右键输入框 → 上传图片
  • 粘贴图片到输入框

2. 关联当前文档

右键输入框 → 关联当前文档，将当前文档内容作为上下文发送给AI

3. 代码高亮与复制

AI返回的代码块会自动高亮，鼠标悬停显示复制按钮

4. Markdown渲染

支持完整的Markdown语法，包括：

  • 标题、列表、引用
  • 代码块
  • 图片、链接
  • 表格

5. 多模型切换

点击右上角模型选择器，可随时切换AI模型

6. 消息操作

每条消息支持：

  • 编辑：修改消息内容
  • 复制：普通点击复制消息，Shift+点击复制全部对话
  • 重新生成：重新请求AI回答
  • 删除：删除消息
  • 替换/插入：将内容插入到光标位置

7. 深度思考模式

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;
}

事件回调

beforeCallback

消息发送前触发

button: {
    beforeCallback: (message) => {
        console.log('即将发送:', message);
        // 可以修改 message 内容
    }
}

afterCallback

消息接收完成后触发

button: {
    afterCallback: (content) => {
        console.log('接收完成:', content);
    }
}

replaceCallback

点击"替换/插入"按钮时触发

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'
        }
    }
});

注意事项

  1. API密钥安全：不要在前端暴露真实的API密钥，建议通过后端代理
  2. 依赖库：库会自动加载 marked.js、ImageViewer.js、Popup.js，确保网络可访问
  3. 浏览器兼容性：需要支持ES6+和现代浏览器API
  4. 流式输出：建议启用 stream: true 以获得更好的用户体验

常见问题

Q: 如何添加自定义工具栏按钮？
A: 可以通过修改 dialog-header-right 区域的HTML结构添加
Q: 如何持久化对话历史？
A: 使用 getHistory() 获取历史后存储到 localStorage 或数据库
Q: 支持哪些AI模型？
A: 支持所有兼容 OpenAI Chat Completions API 的模型
Q: 如何处理网络错误？
A: 库会自动捕获错误并显示在对话框中，你也可以在 afterCallback 中处理

许可

本库为开源项目，遵循 MIT 许可证。