消息内容¶

Markdown、代码、数学公式、图表、思考摘要与引用。

流式 Markdown¶

随着内容生成渲染 GitHub 风格的 Markdown。

流式 Markdown


API	`MarkdownContent(markdown)`
AI Elements	`Response`
依赖模块	`ai-elements-ui`
API 文档	MarkdownContent

传入累计文本，而不是最后一个 token。streaming 会延后处理尚未完整的复杂内容。

import androidx.compose.runtime.Composable
import dev.ai.elements.ui.markdown.MarkdownContent

@Composable
fun MarkdownExample(text: String, streaming: Boolean) {
    MarkdownContent(text, streaming = streaming)
}

代码块¶

带语法高亮、语言标签与复制按钮的代码块。

代码块


API	`CodeBlock(code, language)`
AI Elements	`CodeBlock`
依赖模块	`ai-elements-ui`
API 文档	CodeBlock

language 控制高亮。组件提供复制功能，不会执行代码。

import androidx.compose.runtime.Composable
import dev.ai.elements.ui.markdown.CodeBlock

@Composable
fun CodeBlockExample() {
    CodeBlock("val answer = 42", "kotlin")
}

数学公式¶

使用离线 KaTeX 渲染公式。

$数学公式$


API	`MarkdownContent("$…$")`
依赖模块	`ai-elements-ui`
API 文档	MathBlock

MathBlock 接收不带 Markdown 围栏的 TeX。正文和公式混排时使用 MarkdownContent 与美元符号分隔；KaTeX 资源已随库打包。

import androidx.compose.runtime.Composable
import dev.ai.elements.ui.markdown.MathBlock

@Composable
fun MathExample(formula: String) {
    MathBlock(formula)
}

Mermaid 流程图¶

离线展示流程图和步骤关系。

Mermaid 流程图


API	`MermaidDiagram(source)`
依赖模块	`ai-elements-ui`
API 文档	MermaidDiagram

传入完整 Mermaid 源码。默认 WebView 渲染器支持离线；原生渲染器需要可选模块及实验性 opt-in。

import androidx.compose.runtime.Composable
import dev.ai.elements.ui.markdown.MermaidDiagram

@Composable
fun MermaidFlowchartExample() {
    MermaidDiagram("flowchart LR\n  A[Start] --> B[Done]")
}

Mermaid 时序图¶

展示参与方之间的请求与响应。

Mermaid 时序图


API	`MermaidDiagram(source)`
依赖模块	`ai-elements-ui`
API 文档	MermaidDiagram

传入完整 Mermaid 源码。默认 WebView 渲染器支持离线；原生渲染器需要可选模块及实验性 opt-in。

import androidx.compose.runtime.Composable
import dev.ai.elements.ui.chat.Agent
import dev.ai.elements.ui.markdown.MermaidDiagram

@Composable
fun MermaidSequenceExample() {
    MermaidDiagram("sequenceDiagram\n  App->>Agent: Run\n  Agent-->>App: Reply")
}

Mermaid 类图¶

展示类及其关系。

Mermaid 类图


API	`MermaidDiagram(source)`
依赖模块	`ai-elements-ui`
API 文档	MermaidDiagram

传入完整 Mermaid 源码。默认 WebView 渲染器支持离线；原生渲染器需要可选模块及实验性 opt-in。

import androidx.compose.runtime.Composable
import dev.ai.elements.core.model.Message
import dev.ai.elements.ui.markdown.MermaidDiagram

@Composable
fun MermaidClassExample() {
    MermaidDiagram("classDiagram\n  class Message")
}

Mermaid 饼图¶

展示分类占比。

Mermaid 饼图


API	`MermaidDiagram(source)`
依赖模块	`ai-elements-ui`
API 文档	MermaidDiagram

传入完整 Mermaid 源码。默认 WebView 渲染器支持离线；原生渲染器需要可选模块及实验性 opt-in。

import androidx.compose.runtime.Composable
import dev.ai.elements.ui.markdown.MermaidDiagram

@Composable
fun MermaidPieExample() {
    MermaidDiagram("pie\n  \"Done\" : 3\n  \"Pending\" : 1")
}

流式 Mermaid¶

图表尚未生成完毕时先展示源码。

流式 Mermaid


API	`MermaidDiagram(source, complete = false)`
依赖模块	`ai-elements-ui`
API 文档	MermaidDiagram

在图表闭合前保持 complete=false，避免反复解析不完整的图表。

import androidx.compose.runtime.Composable
import dev.ai.elements.ui.markdown.MermaidDiagram

@Composable
fun MermaidStreamingExample(source: String, complete: Boolean) {
    MermaidDiagram(source, complete = complete)
}

思考摘要¶

用可展开的简洁条目展示模型返回的思考内容。

思考摘要


API	`Reasoning(part)`
AI Elements	`Reasoning`
依赖模块	`ai-elements-ui`
API 文档	Reasoning

保持 part id 稳定。生成时设置 isStreaming；durationMs 的单位为毫秒。

import androidx.compose.runtime.Composable
import dev.ai.elements.core.model.ReasoningPart
import dev.ai.elements.ui.chat.Reasoning

@Composable
fun ReasoningExample() {
    Reasoning(ReasoningPart("thinking", "Compare the alternatives", durationMs = 1500))
}

信息来源¶

展示回复引用的来源与链接。

信息来源


API	`Sources(sources)`
AI Elements	`Sources`
依赖模块	`ai-elements-ui`
API 文档	Sources

来源 id 应保持稳定。链接通过 LocalUriHandler 打开，应用可替换为自己的路由。

import androidx.compose.runtime.Composable
import dev.ai.elements.core.model.SourcePart
import dev.ai.elements.ui.chat.Sources

@Composable
fun SourcesExample() {
    Sources(listOf(SourcePart("docs", "https://kotlinlang.org/docs/", "Kotlin docs")))
}

正文引用标记¶

把正文中的引用编号关联到来源。

正文引用标记


API	`MarkdownContent(text, citations), InlineCitation(sources)`
AI Elements	`InlineCitation`
依赖模块	`ai-elements-ui`
API 文档	MarkdownContent

正文与引用应使用同一份来源列表。组件负责关联来源，不会核实模型生成内容的真实性。

import androidx.compose.runtime.Composable
import dev.ai.elements.core.model.SourcePart
import dev.ai.elements.ui.markdown.MarkdownContent

@Composable
fun InlineCitationExample() {
    val sources = listOf(SourcePart("1", "https://kotlinlang.org/docs/", "Kotlin docs"))
    MarkdownContent("Read the language guide [1].", citations = sources)
}

Read this page in English