Think 组件

Think 组件是 Stream UI 内置的一个示例组件，用于展示 AI 的思考过程。它通常被配置为拦截 <think> 标签。

演示

你好！让我想想...<think>我会用最专业的态度回答这个问题。正在检索相关资料...okokokokokokokokok okokokokoko</think> 很高兴为您服务。

---

你好！让我想想...

思考完毕

我会用最专业的态度回答这个问题。正在检索相关资料...okokokokokokokokok okokokokoko

很高兴为您服务。

<template>
  <div>
    <Input v-model="text" :simulate-text="exampleText" />

    <hr>

    <div>
      <StreamContains :model-value="text">
        <Think />
      </StreamContains>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { StreamContains, Think } from 'stream-ui'
import Input from '../../.comm/Input.vue'

const exampleText = '你好！让我想想...<think>我会用最专业的态度回答这个问题。正在检索相关资料...okokokokokokokokok\nokokokokoko</think> 很高兴为您服务。'
const text = ref(exampleText)
</script>

配置

在 StreamContains 中通过子组件插槽声明拦截：

<StreamContains :model-value="text" mode="accurate">
  <Think />
</StreamContains>

属性 (Props)

参数	类型	说明
content	string	标签内部的文本内容
isClosed	boolean	当前标签是否已经闭合
block	object	当前区块的完整结构化信息
reportData	function	将交互数据回传给 StreamContains

建议

如果你需要根据流式状态显示“思考中”，优先使用 isClosed 而不是自行猜测文本是否结束。