asai-vue-aichat — Ollama AI 聊天组件

包信息

| 建议 npm 名 | 入口文件 | $fn / 注入键 | 类型 | |------------|---------|-------------|------| | @estun/asai-vue-aichat | src/index.ts | AsaiVueAichat → { AsaiVueAichat } | Feature |

概述

asai-vue-aichat 是基于 Ollama API 的 AI 对话 UI，支持流式响应、Markdown 渲染、代码高亮与思考过程展示。

集成方式

// monorepo — 延迟：lib/featurePlugs.ts
import AsaiVueAichat from './plugs/asai-vue-aichat/src/index';
// npm
// import { AsaiVueAichat } from '@estun/asai-vue-aichat';

const { AsaiVueAichat } = ujt.$fn.AsaiVueAichat;

<AsaiVueAichat :ujt="ujt" :opt="{ cfg: { aiapi: '...', model: 'gemma3:1b' }, lang: {} }" />

独立性约束

• 禁止 cross-import 其它 plugs/*。
• HTTP 通过 opt.fn.api.apiGet 等注入，不硬依赖 AsaiApi 源码。

主要 API / 导出

| 导出 | 说明 | |------|------| | AsaiVueAichat | 主聊天组件（async） |

opt.cfg: logo, aiapi, model, modellist
opt.lang: nm, icon, hello, send/stop, think, copy 等

性能说明

• 延迟加载；主组件 + marked + highlight.js 在首次进入 AI 页才加载，显著减小首屏。
• 流式更新频繁触发列表重绘，长对话可考虑虚拟列表或直接 mutate 当前 AI 消息对象。
• AbortController 支持停止生成；卸载清理定时器与监听。

peerDependencies 建议

{
  "peerDependencies": {
    "vue": "^3.4.0"
  },
  "dependencies": {
    "marked": "^9.0.0",
    "highlight.js": "^11.0.0"
  }
}

功能

• Ollama /api/generate 流式 fetch + ReadableStream
• Markdown（marked）+ 语法高亮（highlight.js）+ 代码复制按钮
• 模型下拉、连接状态、思考过程折叠
• 输入框自动增高、消息区自动滚动

opt.cfg 默认值

| 参数 | 默认 | |------|------| | aiapi | http://localhost:11434/api/generate | | logo.tit | '聊天机器人' |

文件结构

asai-vue-aichat/
├── src/index.ts
└── src/components/AsaiVueAichat.vue

扩展建议

• 抽象 AI 适配器以支持 OpenAI 兼容 API
• 连接检测可增加定时轮询