Skip to content

Latest commit

History

History

README.md

React + ChatBI OpenAPI 示例

本示例用于渲染 ChatBI 返回的流式 Markdown。宿主把既有的两个同源 OpenAPI 代理路由适配为 LegacySandboxTransport

consttransport=useMemo(()=>createChatBILegacySandboxTransport(),[]);consthostAdapter=useMemo(()=>createLegacySandboxHostAdapter({ transport }),[transport],);consthostContext=useMemo(()=>({
sessionId,
requestId,phase: streaming ? 'live' : 'final',
cacheScopeKey,}),[sessionId,requestId,streaming,cacheScopeKey]);consthostIdentity=hostAdapter.identity(hostContext);constlegacySandbox=useMemo(()=>hostAdapter.bind(hostContext),[hostAdapter,hostIdentity],);if(!legacySandbox)thrownewError('sessionId and cacheScopeKey are required');constecharts=useMemo(()=>({ legacySandbox }),[legacySandbox]);<MarkdownChartsource={markdown}streaming={streaming}echarts={echarts}/>

Transport 与 host adapter

两者分别负责网络契约和宿主生命周期,调用链如下:

MarkdownChart → ECharts renderer → legacySandbox binding
→ shared resolver → transport → ChatBI OpenAPI
  • createChatBILegacySandboxTransport 是宿主实现的网络层。它把公共 client 的 listFiles / readFile 请求转换为 ChatBI OpenAPI 调用,处理分页、响应映射、大小 限制和错误分类;它不知道 Markdown、artifact 匹配、重试、fallback 或缓存策略。
  • createLegacySandboxHostAdapter 是公共包提供的生命周期层。它把 transport 绑定到 当前 cacheScopeKeysessionIdrequestIdphase,按认证主体隔离 client/cache,并通过 identity(context) 让 React 在上下文变化时重新取得 binding; 它不关心具体 OpenAPI 端点和响应格式。
  • adapter 返回的 legacySandbox binding 才是 renderer 使用的接口。artifact 匹配、 重试、request scope 到 session-only fallback 和成功缓存由 binding 背后的 shared client/resolver 统一完成。

transport 与 host adapter 在组件生命周期内保持稳定。 cacheScopeKey 是必填的非 secret 主体标识,推荐 ${tenantId}:${userId}。不得使用 token、cookie、session secret 的原文或 hash,也不得回退为 sessionId。登录身份变化 时新的 binding/registry 会让既有 chart controller 取消旧请求;A → B → A 也不会复用 第一次 A 的 success cache。

本示例要求宿主在渲染流式正文前提供服务端下发的非空 requestId。不要传入前端生成的 UI fallback;requestId 会直接用于当前轮次的 artifact 查询,不再由示例扫描或改写 Markdown 等待后续补齐。

临时 query / sandbox-file fence 只通过 createLegacySandboxHostAdapter + legacySandbox 接入;renderer 和 React MarkdownChart 不再提供 standalone legacy callback 配置。

浏览器到后端的契约

第三方后端继续只暴露两个同源路由,端点与参数没有变化:

浏览器端点请求参数后端职责
POST /api/dataworks/list-agent-session-artifactsSessionIdRequestIdMaxResults、可选 NextToken完成鉴权/签名并调用 ListAgentSessionArtifacts,转发 JSON-RPC 响应。
POST /api/dataworks/get-agent-session-artifact-metaSessionIdArtifactPath完成鉴权/签名并调用 GetAgentSessionArtifactMeta,转发 JSON-RPC 响应。

data.ts 只遍历 List 分页、映射 descriptor、读取 raw ArtifactContent,并通过 createLegacySandboxErrorClassifier 扩展 host-owned HTTP / 网络 / envelope 错误。它不 复制 matching、retry、fallback 或 cache。AccessKey、 Caller-Context、cookie 和签名逻辑必须留在后端/宿主;代理应先鉴权并限制响应大小, 浏览器的 8 MiB 上限是第二道防线。AbortSignal 会原样传递给两个原生 fetch;不要用 waitForLegacySandboxAbortable 再包裹原生 fetch。

提供上述路由后运行:

pnpm --filter @datafe-open/markdown-chart-example-react-chatbi-openapi dev