lke-component-vue3

English | 中文

English

Message rendering component for LKE (Large Knowledge Engine) conversations, designed for Vue3 projects.

For other environments:

• React and Vue2 projects: Link
• Mini Programs: Link

Installation

npm install lke-component-vue3

Components

Two components are provided: MsgContent and MsgThought

MsgContent

Renders Markdown message content.

| Prop | Type | Default | Description | |------|------|---------|-------------| | content | String | '' | Message content (supports Markdown) | | isFinal | Boolean | false | Whether the message output is complete | | loadingMessage | Boolean | false | Whether in loading state | | styleObj | Object | - | Custom styles for message body | | clazzTable | String | - | CSS class for tables | | clazzMd | String | 'answer-md' | CSS class for message container | | anchorAttributes | Object | {target: '_blank'} | Custom attributes for links | | linkify | Boolean | false | Enable auto-linking for URLs |

Events:

• imageClick - Triggered when clicking an image

MsgThought

Renders DeepSeek thinking/reasoning content.

| Prop | Type | Default | Description | |------|------|---------|-------------| | content | String | - | Thinking content | | title | String | - | Title text, e.g., "Thinking Complete" | | titleIcon | String | - | Icon URL (16x16px recommended) | | nodeName | String | - | Optional model name, e.g., "deepseek" | | status | String | - | Status: 'success' | 'failed' | 'processing' | 'stop' | | elapsed | Number | 0 | Time spent thinking in milliseconds |

Usage

<script setup>
import { ref } from 'vue'
import { MsgContent, MsgThought } from 'lke-component-vue3'
import 'lke-component-vue3/style.css'

const msgList = ref([
  {
    content: "Nice weather today!",
    isFinal: true,
    thoughts: [
      {
        title: "Thinking Complete",
        status: "success",
        elapsed: 17485,
        titleIcon: 'https://lke-realtime-1251316161.cos.ap-guangzhou.myqcloud.com/icon/thinking.png',
        content: "Okay, I need to process the user's question...",
      }
    ]
  }
])
</script>

<template>
  <div v-for="(item, index) in msgList" :key="index">
    <!-- Thinking content -->
    <MsgThought
      v-for="(thought, tIndex) in item.thoughts"
      :key="tIndex"
      :content="thought.content"
      :title="thought.title"
      :titleIcon="thought.titleIcon"
      :nodeName="thought.nodeName"
      :status="thought.status"
      :elapsed="thought.elapsed"
    />
    <!-- Message content -->
    <MsgContent
      :content="item.content"
      :is-final="item.isFinal"
    />
  </div>
</template>

中文

知识引擎大模型对话消息渲染组件，适用于 Vue3 项目。

其它项目环境参考：

• React 和 Vue2 项目：链接
• 小程序：链接

安装

npm install lke-component-vue3

组件介绍

提供两个组件：MsgContent、MsgThought

MsgContent

渲染 Markdown 消息内容。

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | content | String | '' | 消息内容（支持 Markdown） | | isFinal | Boolean | false | 消息是否输出完成 | | loadingMessage | Boolean | false | 是否处于加载状态 | | styleObj | Object | - | 消息体自定义样式 | | clazzTable | String | - | 表格 CSS 类名 | | clazzMd | String | 'answer-md' | 消息容器 CSS 类名 | | anchorAttributes | Object | {target: '_blank'} | 链接自定义属性 | | linkify | Boolean | false | 是否自动识别 URL 并转为链接 |

事件：

• imageClick - 点击图片时触发

MsgThought

渲染 DeepSeek 思考/推理内容。

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | content | String | - | 思考内容 | | title | String | - | 标题文本，如"思考完成" | | titleIcon | String | - | 图标 URL（建议 16x16px） | | nodeName | String | - | 可选，模型名称，如"deepseek" | | status | String | - | 状态：'success' | 'failed' | 'processing' | 'stop' | | elapsed | Number | 0 | 思考耗时（毫秒） |

基本用法

<script setup>
import { ref } from 'vue'
import { MsgContent, MsgThought } from 'lke-component-vue3'
import 'lke-component-vue3/style.css'

const msgList = ref([
  {
    content: "天气不错！",
    isFinal: true,
    thoughts: [
      {
        title: "思考完成",
        status: "success",
        elapsed: 17485,
        titleIcon: 'https://lke-realtime-1251316161.cos.ap-guangzhou.myqcloud.com/icon/thinking.png',
        content: "好的，我现在需要处理用户的问题...",
      }
    ]
  }
])
</script>

<template>
  <div v-for="(item, index) in msgList" :key="index">
    <!-- 思考内容 -->
    <MsgThought
      v-for="(thought, tIndex) in item.thoughts"
      :key="tIndex"
      :content="thought.content"
      :title="thought.title"
      :titleIcon="thought.titleIcon"
      :nodeName="thought.nodeName"
      :status="thought.status"
      :elapsed="thought.elapsed"
    />
    <!-- 消息内容 -->
    <MsgContent
      :content="item.content"
      :is-final="item.isFinal"
    />
  </div>
</template>