newszu-tencent-ai-chat

v0.1.3

Published

8 months ago

腾讯 AI 聊天组件 - 支持写作助手和翻译功能

0High
0Medium
0Low

ttt2

vue ai chat tencent translation assistant

Newszu Tencent AI Chat

🤖 基于 Vue 2.x 和 Element UI 的智能 AI 对话组件，支持写作助手和智能翻译两大核心功能

✨ 核心特性

🎯 双模式支持
- 写作助手模式：AI 辅助内容创作、续写、改写
- 翻译助手模式：支持 12 种语言互译
🔄 流式响应 - 基于 SSE (Server-Sent Events) 技术，实时显示 AI 生成内容
📝 富文本支持 - 自动渲染 Markdown 格式（标题、加粗等）
💾 历史记录 - 自动保存和加载对话历史，支持分组管理
🎨 完整 UI - 开箱即用的抽屉式聊天界面，支持展开/折叠
🔌 易集成 - 基于 props 和 events 的简洁 API，轻松集成到现有项目

📦 安装

npm install newszu-tencent-ai-chat

前置依赖：

npm install vue@^2.6.0 element-ui@^2.15.0

🚀 快速开始

1. 全局注册（推荐）

// main.js
import Vue from "vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

import TencentAiChat from "newszu-tencent-ai-chat";
import "newszu-tencent-ai-chat/dist/newszu-tencent-ai-chat.css";

Vue.use(ElementUI);
Vue.use(TencentAiChat);

2. 组件内使用

<template>
  <div>
    <el-button @click="showAI = true">打开 AI 助手</el-button>

    <tencent-ai-chat
      :drawer.sync="showAI"
      mode="general"
      :api-config="apiConfig"
      @addAIContent="handleAIContent"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      showAI: false,
      apiConfig: {
        baseUrl: "https://aiapix.newszu.com",
        userId: "123",
        userName: "User",
        siteId: "1",
        channelCode: "tx_newszu_aiAssistant",
        platform: "newszu",
        titleText: "AI 助手",
      },
    };
  },
  methods: {
    handleAIContent(content) {
      console.log("AI 返回内容：", content);
    },
  },
};
</script>

📖 完整 API 文档

Props

| 参数 | 说明 | 类型 | 默认值 | 必填 | | ------------------------ | ---------------------------- | ------- | ----------- | ---- | | drawer | 抽屉显示状态（支持 .sync） | Boolean | false | 是 | | mode | 工作模式 | String | 'general' | 是 | | api-config | API 配置对象 | Object | - | 是 | | paremtTranslateGroupId | 翻译分组 ID（支持 .sync） | String | '' | 否 | | translateLoading | 翻译加载状态 | Boolean | false | 否 | | languageOptions | 支持的翻译语言列表 | Array | 见下方说明 | 否 |

mode 可选值

| 值 | 说明 | 对应 channelCode | | ----------- | ------------ | ----------------------- | | general | 写作助手模式 | tx_newszu_aiAssistant | | translate | 翻译模式 | tx_newszu_translation |

apiConfig 配置详解

{
  baseUrl: String,      // 必填 - API 基础地址
  userId: String,       // 必填 - 用户 ID
  userName: String,     // 必填 - 用户名称
  siteId: String,       // 必填 - 站点 ID（无站点传 '1'）
  channelCode: String,  // 必填 - 渠道代码（区分模式）
  platform: String,     // 必填 - 平台标识（融媒体为 'newszu'）
  titleText: String     // 可选 - 抽屉标题
}

环境配置示例：

// 生产环境
const apiConfig = {
  baseUrl: "https://aiapix.newszu.com",
  // ...其他配置
};

// 测试环境
const apiConfig = {
  baseUrl: "https://testaiapi.newszu.com",
  // ...其他配置
};

languageOptions 默认值

[
  "中文",
  "英语",
  "法语",
  "德语",
  "日语",
  "西班牙语",
  "葡萄牙语",
  "意大利语",
  "俄语",
  "阿拉伯语",
  "马来语",
  "韩语",
];

Events

| 事件名 | 说明 | 回调参数 | | --------------------- | ---------------------- | ------------------------------------- | | addAIContent | AI 返回内容时触发 | (content: String) - HTML 格式的内容 | | setTranslateLoading | 设置翻译加载状态时触发 | (loading: Boolean) | | closeAIChat | 抽屉关闭时触发 | - |

🎨 使用场景

场景一：写作助手模式

适用于新闻稿件、文章创作、内容优化等场景。

<template>
  <div>
    <el-button @click="openWritingAssistant">打开写作助手</el-button>

    <tencent-ai-chat
      :drawer.sync="showChat"
      mode="general"
      :api-config="{
        baseUrl: $store.state.aiurl,
        userId: $store.state.userInfo.user.userId,
        userName: $store.state.userInfo.user.userName,
        siteId: $store.state.userInfo.user.siteId,
        channelCode: 'tx_newszu_aiAssistant',
        platform: 'newszu',
        titleText: '写作助手',
      }"
      @addAIContent="insertToEditor"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      showChat: false,
    };
  },
  methods: {
    openWritingAssistant() {
      this.showChat = true;
    },
    insertToEditor(content) {
      // 将 AI 生成的内容插入到编辑器
      this.editorContent = content;
      this.$message.success("内容已插入编辑器");
    },
  },
};
</script>

功能特点：

✍️ AI 智能续写和改写
📊 内容总结和提取
🔄 支持刷新重新生成
📋 一键复制和插入正文

场景二：翻译助手模式

适用于多语言内容翻译场景，支持三阶段翻译流程。

<template>
  <div>
    <el-button @click="openTranslator">翻译文本</el-button>

    <tencent-ai-chat
      :drawer.sync="showTranslate"
      mode="translate"
      :paremtTranslateGroupId.sync="translateGroupId"
      :translateLoading="translateLoading"
      :api-config="{
        baseUrl: 'https://aiapix.newszu.com',
        userId: currentUserId,
        userName: currentUserName,
        siteId: currentSiteId || '1',
        channelCode: 'tx_newszu_translation',
        platform: 'newszu',
        titleText: '智能翻译',
      }"
      :languageOptions="['中文', '英语', '日语', '韩语', '法语']"
      @addAIContent="handleTranslateResult"
      @setTranslateLoading="setTranslateLoading"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      showTranslate: false,
      translateGroupId: "",
      translateLoading: false,
      currentUserId: "",
      currentUserName: "",
      currentSiteId: "",
    };
  },
  methods: {
    openTranslator() {
      // 生成唯一的翻译分组 ID（用于关联发稿页面和翻译结果）
      this.translateGroupId = `translate_${Date.now()}`;
      this.showTranslate = true;
    },
    handleTranslateResult(content) {
      // 处理翻译结果
      console.log("翻译完成：", content);
      this.articleContent = content;
    },
    setTranslateLoading(loading) {
      this.translateLoading = loading;
    },
  },
};
</script>

翻译流程：

组件会显示三个阶段的进度状态：

⏳ 原文翻译 - 进行初步翻译
⏳ 翻译润色 - 优化翻译质量
⏳ 翻译审核 - 最终审核校对

每个阶段完成后会显示 ✅ 标记。

场景三：结合 Vuex 使用

<template>
  <tencent-ai-chat
    :drawer.sync="showAI"
    :mode="currentMode"
    :api-config="aiApiConfig"
    @addAIContent="handleAIContent"
  />
</template>

<script>
import { mapState, mapGetters } from "vuex";

export default {
  data() {
    return {
      showAI: false,
      currentMode: "general",
    };
  },
  computed: {
    ...mapState(["aiurl", "userInfo"]),
    aiApiConfig() {
      return {
        baseUrl: this.aiurl,
        userId: this.userInfo.user.userId,
        userName: this.userInfo.user.userName,
        siteId: this.userInfo.user.siteId,
        channelCode:
          this.currentMode === "translate"
            ? "tx_newszu_translation"
            : "tx_newszu_aiAssistant",
        platform: "newszu",
        titleText: this.currentMode === "translate" ? "翻译助手" : "AI 助手",
      };
    },
  },
  methods: {
    handleAIContent(content) {
      // 处理 AI 返回的内容
      this.$store.dispatch("saveAIContent", content);
    },
  },
};
</script>

场景四：动态切换模式

<template>
  <div>
    <el-radio-group v-model="aiMode" @change="openAI">
      <el-radio-button label="general">写作助手</el-radio-button>
      <el-radio-button label="translate">智能翻译</el-radio-button>
    </el-radio-group>

    <tencent-ai-chat
      :drawer.sync="showAI"
      :mode="aiMode"
      :paremtTranslateGroupId.sync="translateGroupId"
      :translateLoading="translateLoading"
      :api-config="getApiConfig()"
      @addAIContent="handleContent"
      @setTranslateLoading="setLoading"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      showAI: false,
      aiMode: "general",
      translateGroupId: "",
      translateLoading: false,
    };
  },
  methods: {
    openAI() {
      if (this.aiMode === "translate") {
        this.translateGroupId = `translate_${Date.now()}`;
      }
      this.showAI = true;
    },
    getApiConfig() {
      return {
        baseUrl: "https://aiapix.newszu.com",
        userId: this.$store.state.userInfo.user.userId,
        userName: this.$store.state.userInfo.user.userName,
        siteId: this.$store.state.userInfo.user.siteId,
        channelCode:
          this.aiMode === "translate"
            ? "tx_newszu_translation"
            : "tx_newszu_aiAssistant",
        platform: "newszu",
        titleText: this.aiMode === "translate" ? "智能翻译" : "写作助手",
      };
    },
    handleContent(content) {
      console.log("AI 内容：", content);
    },
    setLoading(loading) {
      this.translateLoading = loading;
    },
  },
};
</script>

🔧 高级功能

1. 历史记录加载

组件会自动根据 groupId 加载历史对话记录。

工作原理：

写作助手模式：自动维护 generalGroupId
翻译模式：通过 paremtTranslateGroupId 关联翻译分组

2. 内容格式处理

组件自动处理 Markdown 格式：

// 输入
"# 标题\n**加粗文本**\n正常文本";

// 输出（通过 addAIContent 事件）
"<h1 class='title-h1'>标题</h1><strong class='bold-text'>加粗文本</strong><br>正常文本";

3. 消息操作

每条 AI 消息支持三种操作：

🔄 刷新：重新发送上一条用户消息（仅最后一条 AI 消息显示）
📋 复制：复制纯文本内容到剪贴板
➕ 插入正文：将内容转换为 HTML 并通过 addAIContent 事件传递

4. 流式响应处理

组件内部处理 SSE 事件流：

// 事件类型
-workflow_started - // 工作流开始
  node_started - // 节点开始
  message - // 流式内容（实时追加）
  node_finished - // 节点完成（翻译阶段完成）
  workflow_finished - // 工作流结束
  error; // 错误

💡 重要说明

paremtTranslateGroupId 的作用

这个参数主要用于翻译模式，用于关联发稿页面和翻译结果。

使用场景：

// 在发稿页面打开翻译时
openTranslate() {
  // 生成唯一 ID，包含文章信息
  this.translateGroupId = `article_${this.articleId}_${Date.now()}`
  this.showTranslate = true
}

// 翻译完成后
handleTranslateResult(content) {
  // 根据 translateGroupId 将翻译结果保存到对应文章
  this.saveToArticle(this.translateGroupId, content)
}

channelCode 配置说明

channelCode 决定后端使用的 AI 模型：

| channelCode | 模型 | 适用场景 | | ----------------------- | ------------ | -------------------- | | tx_newszu_aiAssistant | 写作助手模型 | 内容创作、续写、改写 | | tx_newszu_translation | 翻译模型 | 多语言翻译 |

样式自定义

组件使用 Element UI 的抽屉组件，可以通过深度选择器自定义样式：

<style>
/* 修改抽屉宽度 */
::v-deep .el-drawer__wrapper {
  width: 30% !important;
}

/* 修改抽屉高度 */
::v-deep .tencentAiChat {
  height: 90% !important;
}

/* 自定义消息样式 */
::v-deep .message-ai .message-content {
  background: #f0f9ff !important;
}
</style>

🙋 常见问题

Q1: 为什么安装后提示找不到 Vue 或 Element UI？

A: Vue 和 Element UI 是 peer dependencies，需要在项目中单独安装：

npm install vue@^2.6.0 element-ui@^2.15.0

Q2: 如何配置不同的环境？

A: 通过 apiConfig.baseUrl 配置：

const apiConfig = {
  baseUrl:
    process.env.NODE_ENV === "production"
      ? "https://aiapix.newszu.com" // 生产环境
      : "https://testaiapi.newszu.com", // 测试环境
  // ...其他配置
};

Q3: 翻译模式和写作模式有什么区别？

翻译模式 (mode="translate")：

提供语言选择下拉框（源语言 → 目标语言）
显示三阶段翻译进度
使用 tx_newszu_translation 模型
支持 paremtTranslateGroupId 关联

写作模式 (mode="general")：

纯文本输入框
无翻译进度显示
使用 tx_newszu_aiAssistant 模型

Q4: 如何处理 AI 返回的内容？

A: 监听 addAIContent 事件：

methods: {
  addAIContent(content) {
    // content 是 HTML 格式的内容

    // 方式1：直接插入到富文本编辑器
    this.$refs.editor.setContent(content)

    // 方式2：追加到现有内容
    this.articleContent += content

    // 方式3：转换为纯文本
    const div = document.createElement('div')
    div.innerHTML = content
    const plainText = div.textContent
  }
}

Q5: 如何在本地开发和调试？

A: 使用 npm link：

# 1. 在组件项目目录
cd newszu-tencent-ai-chat
npm install
npm run build
npm link

# 2. 在你的项目目录
cd your-project
npm link newszu-tencent-ai-chat

# 3. 修改组件代码后重新构建
cd newszu-tencent-ai-chat
npm run build

# 4. 调试完成后解除链接
cd your-project
npm unlink newszu-tencent-ai-chat

Q6: PostCSS 配置错误怎么办？

A: 如果遇到 No PostCSS Config found 错误，在项目根目录创建 postcss.config.js：

module.exports = {
  plugins: {
    autoprefixer: {},
  },
};

Q7: 如何自定义支持的翻译语言？

A: 通过 languageOptions prop 自定义：

<tencent-ai-chat
  mode="translate"
  :languageOptions="['中文', '英语', '日语']"
  :api-config="apiConfig"
/>

Q8: 组件支持 Vue 3 吗？

A: 当前版本仅支持 Vue 2.6+，Vue 3 版本正在开发中。

📦 构建产物

安装后包含以下文件：

dist/
├── newszu-tencent-ai-chat.common.js     # CommonJS 格式
├── newszu-tencent-ai-chat.esm.js        # ES Module 格式
├── newszu-tencent-ai-chat.umd.js        # UMD 格式
├── newszu-tencent-ai-chat.umd.min.js    # UMD 压缩版
└── newszu-tencent-ai-chat.css           # 样式文件

CDN 引入

<!-- 引入 Vue 和 Element UI -->
<link
  rel="stylesheet"
  href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
/>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<!-- 引入组件 -->
<link
  rel="stylesheet"
  href="https://unpkg.com/newszu-tencent-ai-chat/dist/newszu-tencent-ai-chat.css"
/>
<script src="https://unpkg.com/newszu-tencent-ai-chat/dist/newszu-tencent-ai-chat.umd.min.js"></script>

<script>
  new Vue({
    el: "#app",
    data: {
      showAI: false,
      apiConfig: {
        /* ... */
      },
    },
  });
</script>

🚀 开发和发布

本地开发

# 克隆项目
git clone https://github.com/yourusername/newszu-tencent-ai-chat.git
cd newszu-tencent-ai-chat

# 安装依赖
npm install

# 构建
npm run build

发布到 npm

# 登录 npm
npm login

# 更新版本号
npm version patch  # 或 minor / major

# 发布（自动执行构建）
npm publish --access public

# 查看发布的包
npm view newszu-tencent-ai-chat

🤝 兼容性

Vue 2.6.0+
Element UI 2.15.0+
现代浏览器（Chrome 60+、Firefox 60+、Safari 12+、Edge 79+）
支持 SSE (Server-Sent Events) 的浏览器

📝 更新日志

v0.1.1 (2024-10-28)

✅ 完善 README 文档，增加详细使用示例
✅ 添加 PostCSS 配置文件
✅ 优化 API 文档说明
✅ 增加常见问题解答

v0.1.0 (2024-10-23)

🎉 初始版本发布
✅ 支持写作助手模式
✅ 支持翻译助手模式（12 种语言）
✅ 流式响应支持（SSE）
✅ 历史记录加载
✅ Markdown 格式渲染
✅ 纯 CSS 实现，无 SCSS 依赖

👨‍💻 贡献指南

欢迎提交 Issue 和 Pull Request！

在提交 PR 之前，请确保：

代码风格符合项目规范
添加必要的注释
更新相关文档

📄 许可证

MIT

项目地址: https://github.com/yourusername/newszu-tencent-ai-chat

问题反馈: https://github.com/yourusername/newszu-tencent-ai-chat/issues

最后更新: 2024-10-28