观序AI 手机端开发环境

代码显示

气泡浮层组件（Jetpack Compose）

需求：
1. 解析对话Markdown文本：识别文本中 ``` 开头、``` 结尾的Markdown代码块。
2. 普通文字：正常渲染成文本。
3. 代码块：不直接完整展开代码，渲染成【可点击的触发组件】（比如“查看代码”按钮/代码预览块）。
4. 用户点击这个代码块组件 → 弹出上面定义好的非模态Overlay Popup弹窗；弹窗内部承载完整代码，支持滚动。
5. 非代码普通文字，不会渲染这个点击触发元素，不会弹出弹窗。
## 拆解原理（方便你理解）

1. **后端 / 文本解析**
收到 LLM 返回的流式 Markdown 内容，用 markdown 解析器扫描文本，匹配正则：`(?s)```(.*?)````
只要捕获到被三重反引号包裹的内容，判定 = 代码块。
2. **分支渲染（Compose 侧）**

- 普通文本 → Text 组件
- 匹配到 ``` 代码块 → 渲染成**点击控件**
点击控件触发 Popover/Popup 浮层，把捕获到的代码放进弹窗。

> 
> 重点：** 是标记符 ` 作为开关，不是AI自己“看懂这是代码”**。 只要内容包在`里面，就会变成可点击弹窗；没有这个标记，就按普通文字展示。