@lzy6755/ai-chat-opencode

ai-chat-opencode

Vue 2 单文件组件：OpenCode 对话面板（源码包，由宿主 webpack 编译）。

安装

npm install @lzy6755/ai-chat-opencode --save

使用

方案1 直接导入组件

用户直接导入AiChatPanel组件，并传入配置参数即可使用。

参数列表

示例

<template>
  <AiChatPanel
    :visible.sync="show"
    title="智能助手"
    subtitle="随时提问，一键生成建议"
    placeholder="请输入你想让 AI 帮你处理的问题..."
    :initial-messages="initialMessages"
    :opencode-url="opencodeUrl"
    opencode-directory="/work/crm-agent"
    :opencode-system="opencodeSystem"
    opencode-agent="build"
    opencode-model-i-d="GLM-5"
    opencode-provider-i-d="jdprovider"
    :toast="customToast"
    :confirm="customConfirm"
    source="crm"
    :user-id="userId"
    :max-session-count="10"
  />
</template>

<script>
import { AiChatPanel } from '@lzy6755/ai-chat-opencode'

export default {
  components: { AiChatPanel },
  data () {
    return {
      show: false,
      userId: 'u_10001',
      opencodeUrl: 'https://opencodedev.pyamc.com',
      opencodeSystem: `{
        "PY-CRM-TOKEN":"LOGIN_TOKEN_e71ef7c7-b982-40e5-85e1-8d34039256c1",
        "PY-CRM-DEVICE":"string"
      }`,
      initialMessages: [
        { role: 'assistant', content: '你好，我可以帮你生成跟进话术和工单建议。' }
      ]
    }
  },
  methods: {
    customToast ({ message, position = 'bottom' }) {
      // 可接你们自己的 UI 提示组件
      console.log('[toast]', position, message)
    },
    customConfirm ({ message, title }) {
      // 需要返回 Promise<boolean>
      return Promise.resolve(window.confirm(`${title ? `${title}\n` : ''}${message}`))
    }
  }
}
</script>

方案2 Headless 模式（v2）：自建 UI

包内提供 **createAiChatController**：由本包维护会话列表、消息、流式状态与 OpenCode SSE；宿主只负责用自有组件渲染 ctrl 上的响应式数据并调用方法。

环境要求

• Vue 2.5+。

引入

import { createAiChatController } from '@lzy6755/ai-chat-opencode'

最小示例

export default {
  data () {
    return {
      input: '',
      chat: createAiChatController({
        opencodeUrl: 'https://opencodedev.pyamc.com',
        opencodeDirectory: '/work/crm-agent',
        opencodeSystem: '',
        source: 'crm',
        userId: 'u_10001',
        confirm: async ({ message, title }) =>
          window.confirm(`${title ? title + '\n' : ''}${message}`)
      })
    }
  },
  async mounted () {
    await this.chat.init()
  },
  beforeDestroy () {
    this.chat.dispose()
  },
  methods: {
    async onSend () {
      const text = this.input.trim()
      if (!text) return
      try {
        await this.chat.sendMessage(text)
        this.input = ''
      } catch (e) {
        // 空消息、正在生成、建会话失败、prompt 请求失败等
      }
    }
  }
}

模板中把 chat 当作根状态对象绑定即可，例如：

<ul>
  <li v-for="s in chat.sessionList" :key="s.id" @click="chat.selectSession(s.id)">
    {{ chat.getSessionTitle(s) }}
    <span v-if="chat.isSessionGenerating(s.id)">生成中</span>
  </li>
</ul>
<div v-for="(m, i) in chat.messages" :key="i">
  <template v-if="m.role === 'assistant'">
    <div v-if="m.reasoning" v-html="chat.renderMarkdownHtml(m.reasoning)" />
    <div v-html="chat.renderMarkdownHtml(m.content)" />
  </template>
  <template v-else>{{ m.content }}</template>
</div>
<button type="button" :disabled="chat.isCurrentSessionLoading" @click="onSend">发送</button>
<button type="button" @click="chat.abort">停止</button>
<button type="button" @click="chat.startNewDraft">新草稿</button>

renderMarkdownHtml(text) 使用与本包面板一致的 Markdown 规则生成 HTML；若使用 v-html，请自行评估 XSS 风险（与自带组件相同策略：markdown-it，html: false）。

生命周期

工厂选项 createAiChatController(options)

与组件 props 对齐的字段如下（不传则用默认值）。

对外状态（建议在模板中绑定，只读）

切换会话、删除会话等请使用下方对外方法， 不要通过改写上述字段或 messages 代替流程。

内部流式中间状态： 同一 ctrl 对象上还有 streamPartIdTypes、assistantPartTextMap 等，由 SSE 驱动；不要在业务里手动赋值，否则易与流式不同步。

对外方法