lke-component-vue3

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.

Events:

• imageClick - Triggered when clicking an image

MsgThought

Renders DeepSeek thinking/reasoning content.

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 消息内容。

事件：

• imageClick - 点击图片时触发

MsgThought

渲染 DeepSeek 思考/推理内容。

基本用法

<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>