Rany AI 聊天组件库

这是一个 Vue3 + TypeScript 的 AI 聊天组件库，用于快速构建 AI 聊天功能。

安装

npm install @rany/component-ai

使用方法

1. 在 main.ts 中注册组件库

import { createApp } from "vue";
import App from "./App.vue";
import RanyComponentAi from "@rany/component-ai";

const app = createApp(App);
app.use(RanyComponentAi);
app.mount("#app");

2. 在组件中使用

<template>
  <div class="container">
    <AiChatHomeView />
  </div>
</template>

组件列表

• AiChatHomeView: AI 聊天主页组件

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

依赖

• Vue 3
• Pinia

许可

MIT

新增功能：患者选择

similar_patient 类型消息处理

当 AI 返回 similar_patient 类型的数据时，会展示患者选择界面：

{
  "code": 1,
  "data": {
    "type": "similar_patient",
    "role": "assistant",
    "content": [
      {
        "患者ID": "71c65a8abb094dfd824b7e9db719d899",
        "姓名": "老刘",
        "年龄": null,
        "性别": "男",
        "出生日期": null,
        "籍贯": null
      }
    ],
    "time": "2025-06-06 15:18:47"
  },
  "message": ""
}

功能特性

1. 患者列表展示：以卡片形式展示相似患者信息
2. 交互功能：点击患者卡片后：
   • 自动设置患者ID到 aiChatPatientId
   • 重新发送上一条用户消息内容，携带选定的患者ID
3. 状态管理：
   • 正确处理加载状态
   • 适配停止按钮逻辑
   • 支持重试功能

加载状态优化

改进的加载逻辑

• 点击发送：立即显示加载动画
• 收到数据：接收到第一个有效数据块后关闭加载动画
• 独立管理：每个对话消息都有独立的加载状态，互不干扰
• 动画统一：删除重复的加载动画，只保留一个统一的加载效果

加载状态触发时机

1. 开始加载：

   • 用户点击发送按钮
   • 用户点击重试按钮
   • 初始状态 loading: true

2. 停止加载：

   • 收到第一个有效的JSON数据块
   • 包含有意义的content内容
   • 特殊类型（如 similar_patient）数据处理完成

3. 状态隔离：

   • 每个消息独立维护自己的loading状态
   • 不受其他消息或全局状态影响
   • 支持并发对话场景

API 集成

• 使用 setAiChatPatientId() 设置患者ID
• 使用 selectPatient() 选择患者并重新发送上一条用户消息
• 支持患者ID参数传递到后续请求中

患者选择流程

1. 用户提问：用户发送问题（如："这个症状怎么治疗？"）
2. AI返回患者列表：AI识别需要患者信息，返回 similar_patient 类型数据
3. 用户选择患者：点击患者卡片
4. 重新请求：系统自动：
   • 设置 patientId 为选中的患者ID
   • 重新发送原始问题内容
   • AI基于特定患者信息回答同样的问题

这样确保AI能够基于具体患者的医疗信息来提供针对性的回答。