Think 组件

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

演示

你好！让我想想...

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

很高兴为您服务。

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

    <div class="render-area">
      <StreamContains :model-value="text">
        <DocsThink />
      </StreamContains>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { StreamContains } from 'stream-ui'
import DocsThink from './DocsThink.vue'

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

<style scoped>
.demo-card {
  padding: 1rem;
  border: 1px solid var(--vp-c-border);
  border-radius: 8px;
  background: var(--vp-c-bg-soft);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.render-area {
  padding: 12px;
  background: var(--vp-c-bg);
  border-radius: 6px;
  border-left: 3px solid var(--vp-c-brand);
}
</style>

配置

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

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

属性 (Props)

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

建议

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