@skopon-cool/form-sdk 0.1.1 → 0.1.3

package/src/components/AskUserFormCard.tsx

@@ -1,18 +1,40 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { Button, Spin, Tooltip } from 'antd'
+import { Button, Spin, Tag, Tooltip } from 'antd'
 import type { FormDetailResult, FormSchema, SubmitMode } from '../types/index'
 import { buildAskUserSurface } from '../adapter/resolveSurface'
-import { buildCurlStatement } from '../submit/buildCurlStatement'
-import { intersectPayloadWithForm } from '../submit/intersectPayloadWithForm'
+import { buildAskUserCurlStatement } from '../submit/buildCurlStatement'
+import {
+  extractExtraBlockValues,
+  getPayloadInputFieldNames,
+  getPayloadRenderableBlocks,
+  intersectPayloadBlocksWithForm,
+  parsePayloadBlocksJson,
+  payloadHasInputBlocks,
+} from '../submit/intersectPayloadBlocksWithForm'
 import { copyTextToClipboard, submitFormJson } from '../submit/submitFormJson'
 import SkoponFormRenderer, { type SkoponFormRendererRef } from './SkoponFormRenderer'
 import CurlSubmitBlock from './CurlSubmitBlock'
 
+function formatSubmitErrorMessage(status: number, body: unknown): string {
+  if (body && typeof body === 'object' && body !== null && 'message' in body) {
+    const msg = (body as { message: unknown }).message
+    if (typeof msg === 'string' && msg.trim()) {
+      return `提交失败 (${status}): ${msg.trim()}`
+    }
+  }
+  if (typeof body === 'string' && body.trim()) {
+    return `提交失败 (${status}): ${body.trim()}`
+  }
+  return `提交失败 (${status})`
+}
+
 export interface AskUserFormCardProps {
   payload: unknown
-  formUniqueId: string
+  /** 可选；无则跳过拉取 vt_forms，仅用 payload blocks fallback */
+  formUniqueId?: string | null
   callbackUrl?: string | null
   submitMode?: SubmitMode
+  /** 需 useCallback 稳定引用，避免重复拉取 */
   fetchFormDetail: (ref: { formUniqueId: string }) => Promise<FormDetailResult>
   onNotify?: (type: 'success' | 'error', message: string) => void
 }
@@ -28,22 +50,46 @@ export default function AskUserFormCard({
   const [formDef, setFormDef] = useState<FormSchema | null>(null)
   const [formDisabled, setFormDisabled] = useState(false)
   const [loading, setLoading] = useState(true)
+  const [submitting, setSubmitting] = useState(false)
   const rendererRef = useRef<SkoponFormRendererRef>(null)
+  const mountedRef = useRef(true)
+  const onNotifyRef = useRef(onNotify)
+  onNotifyRef.current = onNotify
+
+  const resolvedFormUniqueId = formUniqueId?.trim() ?? ''
+
+  useEffect(() => {
+    mountedRef.current = true
+    return () => {
+      mountedRef.current = false
+    }
+  }, [])
 
   useEffect(() => {
     let cancelled = false
+    if (!resolvedFormUniqueId) {
+      setLoading(false)
+      setFormDisabled(false)
+      setFormDef(null)
+      return () => {
+        cancelled = true
+      }
+    }
+
     setLoading(true)
     setFormDisabled(false)
-    fetchFormDetail({ formUniqueId })
+    fetchFormDetail({ formUniqueId: resolvedFormUniqueId })
       .then((detail) => {
         if (cancelled) return
         setFormDisabled(Boolean(detail.disabled))
-        setFormDef(detail.disabled ? null : detail.formDefinition ?? null)
+        setFormDef(detail.formDefinition ?? null)
       })
-      .catch(() => {
+      .catch((error) => {
         if (!cancelled) {
           setFormDisabled(false)
           setFormDef(null)
+          const detail = error instanceof Error ? error.message : '获取表单定义失败'
+          onNotifyRef.current?.('error', detail)
         }
       })
       .finally(() => {
@@ -52,25 +98,49 @@ export default function AskUserFormCard({
     return () => {
       cancelled = true
     }
-  }, [formUniqueId, fetchFormDetail])
+  }, [resolvedFormUniqueId, fetchFormDetail])
 
-  const { matchedBlocks, remainderPayload } = useMemo(
-    () => intersectPayloadWithForm(payload, formDef ?? undefined),
-    [payload, formDef],
-  )
+  const payloadDef = useMemo(() => parsePayloadBlocksJson(payload), [payload])
+
+  const intersection = useMemo(() => {
+    if (!payloadDef) return null
+    return intersectPayloadBlocksWithForm(payloadDef, formDef ?? undefined)
+  }, [payloadDef, formDef])
+
+  const matchedBlocks = intersection?.matchedBlocks ?? []
+  const usePayloadFallback =
+    Boolean(payloadDef && payloadHasInputBlocks(payloadDef) && matchedBlocks.length === 0)
 
-  const fieldNames = useMemo(
-    () =>
-      matchedBlocks
-        .map((block) => block.name?.trim())
-        .filter((name): name is string => Boolean(name)),
-    [matchedBlocks],
+  const renderBlocks = useMemo(() => {
+    if (intersection && intersection.renderBlocks.length > 0) {
+      return intersection.renderBlocks
+    }
+    if (usePayloadFallback && payloadDef) return getPayloadRenderableBlocks(payloadDef)
+    return []
+  }, [intersection, usePayloadFallback, payloadDef])
+
+  const extraValues = useMemo(
+    () => (usePayloadFallback ? {} : extractExtraBlockValues(intersection?.extraBlocks ?? [])),
+    [usePayloadFallback, intersection],
   )
 
+  const fieldNames = useMemo(() => {
+    if (usePayloadFallback && payloadDef) return getPayloadInputFieldNames(payloadDef)
+    return renderBlocks
+      .filter((block) => block.name?.trim())
+      .map((block) => block.name!.trim())
+  }, [usePayloadFallback, payloadDef, renderBlocks])
+
   const surfaceDoc = useMemo(() => {
-    if (!formDef || matchedBlocks.length === 0) return null
-    return buildAskUserSurface(formDef, matchedBlocks)
-  }, [formDef, matchedBlocks])
+    if (renderBlocks.length === 0) return null
+    const title = intersection?.title ?? payloadDef?.title ?? ''
+    const description = intersection?.description ?? payloadDef?.description ?? ''
+    return buildAskUserSurface({ title, description }, renderBlocks)
+  }, [intersection, payloadDef, renderBlocks])
+
+  const surfaceId = resolvedFormUniqueId
+    ? `ask-user-${resolvedFormUniqueId}`
+    : 'ask-user-payload'
 
   if (loading) {
     return (
@@ -80,76 +150,84 @@ export default function AskUserFormCard({
     )
   }
 
-  if (matchedBlocks.length === 0) {
+  if (!payloadDef || renderBlocks.length === 0) {
     return (
       <CurlSubmitBlock
         payload={payload}
         callbackUrl={callbackUrl}
-        unpublishedFormId={formDisabled ? formUniqueId : undefined}
+        unpublishedFormId={formDisabled && resolvedFormUniqueId ? resolvedFormUniqueId : undefined}
         onNotify={onNotify}
       />
     )
   }
 
-  const hasRemainder = Object.keys(remainderPayload).length > 0
-
   async function handleSubmit() {
-    const values = rendererRef.current?.getValues(fieldNames) ?? {}
-    if (submitMode === 'post') {
-      const url = (callbackUrl ?? '').trim()
-      if (!url) {
-        onNotify?.('error', 'callback_url 为空，无法提交')
-        return
-      }
-      try {
-        const result = await submitFormJson(url, values)
+    if (submitting) return
+    setSubmitting(true)
+    try {
+      const cardValues = rendererRef.current?.getValues(fieldNames) ?? {}
+      const submitBody = { ...cardValues, ...extraValues }
+
+      if (submitMode === 'post') {
+        const url = (callbackUrl ?? '').trim()
+        if (!url) {
+          onNotifyRef.current?.('error', 'callback_url 为空，无法提交')
+          return
+        }
+        const result = await submitFormJson(url, submitBody)
+        if (!mountedRef.current) return
         if (result.ok) {
-          onNotify?.('success', '提交成功')
+          onNotifyRef.current?.('success', '提交成功')
         } else {
-          onNotify?.('error', `提交失败 (${result.status})`)
+          onNotifyRef.current?.('error', formatSubmitErrorMessage(result.status, result.body))
         }
-      } catch (error) {
-        const detail = error instanceof Error ? error.message : '提交失败'
-        onNotify?.('error', detail)
+        return
       }
-      return
-    }
 
-    try {
-      await copyTextToClipboard(buildCurlStatement(values, callbackUrl))
-      onNotify?.('success', '已复制 curl 到剪贴板')
-    } catch {
-      onNotify?.('error', '复制失败')
+      await copyTextToClipboard(
+        buildAskUserCurlStatement({ cardValues, extraValues, callbackUrl }),
+      )
+      if (!mountedRef.current) return
+      onNotifyRef.current?.('success', '已复制 curl 到剪贴板')
+    } catch (error) {
+      if (!mountedRef.current) return
+      const detail = error instanceof Error ? error.message : '复制失败'
+      onNotifyRef.current?.('error', detail)
+    } finally {
+      if (mountedRef.current) setSubmitting(false)
     }
   }
 
   return (
     <div className="ask-user-form-card">
+      {formDisabled && resolvedFormUniqueId ? (
+        <div className="ask-user-form-card-status">
+          <Tooltip title={resolvedFormUniqueId}>
+            <Tag className="ask-user-curl-unpublished-tag">卡片 ID 未发布</Tag>
+          </Tooltip>
+        </div>
+      ) : null}
       <SkoponFormRenderer
         ref={rendererRef}
         doc={surfaceDoc}
-        surfaceId={`ask-user-${formUniqueId}`}
+        surfaceId={surfaceId}
         fieldNames={fieldNames}
         interactive
       />
 
       <div className="ask-user-form-actions">
         <Tooltip title={submitMode === 'curl' ? '点击复制 curl' : '提交 JSON 到 callback_url'}>
-          <Button type="primary" size="small" onClick={() => void handleSubmit()}>
+          <Button
+            type="primary"
+            size="small"
+            loading={submitting}
+            disabled={submitting}
+            onClick={() => void handleSubmit()}
+          >
             提交
           </Button>
         </Tooltip>
       </div>
-
-      {hasRemainder ? (
-        <CurlSubmitBlock
-          payload={remainderPayload}
-          callbackUrl={callbackUrl}
-          title="以下字段不在表单中，请使用 curl 提交"
-          incompleteFormId={formUniqueId}
-          onNotify={onNotify}
-        />
-      ) : null}
     </div>
   )
 }

package/src/components/SkoponA2uiStreamRenderer.test.ts

@@ -0,0 +1,62 @@
+/**
+ * @vitest-environment node
+ */
+import { describe, it, expect } from 'vitest'
+import { MessageProcessor, type A2uiMessage } from '@a2ui/web_core/v0_9'
+import type { ReactComponentImplementation } from '@a2ui/react/v0_9'
+import { blocksToA2ui, surfaceDocToMessages } from '../adapter/a2uiAdapter'
+import { buildSkoponCatalog, SKOPON_CATALOG_ID } from '../catalog/a2uiCustomCatalog'
+
+function createProcessor(): MessageProcessor<ReactComponentImplementation> {
+  return new MessageProcessor([buildSkoponCatalog()])
+}
+
+function buildStreamMessages(surfaceId: string): A2uiMessage[] {
+  const doc = blocksToA2ui(
+    {
+      title: '',
+      description: '',
+      blocks: [{ id: 'b-name', type: 'text', name: 'name', label: '姓名' }],
+    },
+    { includeHeader: false },
+  )
+  return surfaceDocToMessages(doc, { surfaceId, catalogId: SKOPON_CATALOG_ID }) as unknown as A2uiMessage[]
+}
+
+/** 与 SkoponA2uiStreamRenderer 在 messages 清空时的 reset 行为一致。 */
+function resetStreamProcessor(): MessageProcessor<ReactComponentImplementation> {
+  return createProcessor()
+}
+
+describe('SkoponA2uiStreamRenderer stream lifecycle', () => {
+  it('processes incremental messages into surfaces', () => {
+    const surfaceId = 'stream-test'
+    const messages = buildStreamMessages(surfaceId)
+    const processor = createProcessor()
+    processor.processMessages(messages)
+    expect(processor.model.surfacesMap.size).toBeGreaterThan(0)
+  })
+
+  it('clears surfaces when stream messages are reset to empty', () => {
+    const surfaceId = 'stream-clear'
+    const messages = buildStreamMessages(surfaceId)
+    let processor = createProcessor()
+    processor.processMessages(messages)
+    expect(processor.model.surfacesMap.size).toBeGreaterThan(0)
+
+    processor = resetStreamProcessor()
+    expect(processor.model.surfacesMap.size).toBe(0)
+  })
+
+  it('rebuilds processor when message count shrinks', () => {
+    const surfaceId = 'stream-shrink'
+    const messages = buildStreamMessages(surfaceId)
+    const processor = createProcessor()
+    processor.processMessages(messages)
+    const countAfterFull = processor.model.surfacesMap.size
+
+    const rebuilt = createProcessor()
+    rebuilt.processMessages(messages.slice(0, 1))
+    expect(rebuilt.model.surfacesMap.size).toBeLessThanOrEqual(countAfterFull)
+  })
+})

package/src/components/SkoponA2uiStreamRenderer.test.tsx

@@ -0,0 +1,79 @@
+// @vitest-environment happy-dom
+import { describe, it, expect, vi, afterEach, beforeAll } from 'vitest'
+
+vi.mock('@a2ui/web_core/v0_9/basic_catalog', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@a2ui/web_core/v0_9/basic_catalog')>()
+  return { ...actual, injectBasicCatalogStyles: vi.fn() }
+})
+
+vi.mock('@a2ui/react/styles', () => ({
+  injectStyles: vi.fn(),
+  removeStyles: vi.fn(),
+}))
+
+import { createElement } from 'react'
+import { render, cleanup } from '@testing-library/react'
+import type { A2uiMessage } from '@a2ui/web_core/v0_9'
+import { blocksToA2ui, surfaceDocToMessages } from '../adapter/a2uiAdapter'
+import { SKOPON_CATALOG_ID } from '../catalog/a2uiCustomCatalog'
+import SkoponA2uiStreamRenderer from './SkoponA2uiStreamRenderer'
+
+function buildStreamMessages(surfaceId: string): A2uiMessage[] {
+  const doc = blocksToA2ui(
+    {
+      title: '',
+      description: '',
+      blocks: [{ id: 'b-name', type: 'text', name: 'name', label: '姓名' }],
+    },
+    { includeHeader: false },
+  )
+  return surfaceDocToMessages(doc, { surfaceId, catalogId: SKOPON_CATALOG_ID }) as unknown as A2uiMessage[]
+}
+
+beforeAll(() => {
+  class ResizeObserverMock {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+  vi.stubGlobal('ResizeObserver', ResizeObserverMock)
+})
+
+describe('SkoponA2uiStreamRenderer component', () => {
+  afterEach(() => {
+    cleanup()
+  })
+
+  it('mounts with empty messages without infinite update loop', () => {
+    expect(() =>
+      render(
+        createElement(SkoponA2uiStreamRenderer, {
+          messages: [],
+          emptyHint: createElement('span', null, 'stream-empty'),
+        }),
+      ),
+    ).not.toThrow()
+  })
+
+  it('reprocesses messages when surfaceId changes', () => {
+    const surfaceA = 'stream-a'
+    const surfaceB = 'stream-b'
+    const messages = buildStreamMessages(surfaceA)
+    const { rerender, getByText, queryByText } = render(
+      createElement(SkoponA2uiStreamRenderer, {
+        messages,
+        surfaceId: surfaceA,
+      }),
+    )
+    expect(getByText('姓名')).toBeTruthy()
+
+    rerender(
+      createElement(SkoponA2uiStreamRenderer, {
+        messages,
+        surfaceId: surfaceB,
+      }),
+    )
+    expect(getByText('姓名')).toBeTruthy()
+    expect(queryByText('stream-empty')).toBeNull()
+  })
+})

package/src/components/SkoponA2uiStreamRenderer.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
+import { useEffect, useRef, useState, type ReactNode } from 'react'
 import { MessageProcessor, type A2uiMessage } from '@a2ui/web_core/v0_9'
 import { injectBasicCatalogStyles } from '@a2ui/web_core/v0_9/basic_catalog'
 import { A2uiSurface, type ReactComponentImplementation } from '@a2ui/react/v0_9'
@@ -14,6 +14,10 @@ export interface SkoponA2uiStreamRendererProps {
   interactive?: boolean
 }
 
+function createProcessor(): MessageProcessor<ReactComponentImplementation> {
+  return new MessageProcessor([buildSkoponCatalog()])
+}
+
 export default function SkoponA2uiStreamRenderer({
   messages,
   surfaceId = 'skopon-form-stream',
@@ -25,20 +29,32 @@ export default function SkoponA2uiStreamRenderer({
     injectBasicCatalogStyles()
   }, [])
 
-  const processorRef = useRef<MessageProcessor<ReactComponentImplementation> | null>(null)
+  const processorRef = useRef<MessageProcessor<ReactComponentImplementation>>(createProcessor())
   const processedCountRef = useRef(0)
+  const mountedRef = useRef(true)
+  const surfaceIdRef = useRef(surfaceId)
+
+  const [processor, setProcessor] = useState(() => processorRef.current)
+  const [surfaces, setSurfaces] = useState(() =>
+    Array.from(processorRef.current.model.surfacesMap.values()),
+  )
 
-  const processor = useMemo(() => {
-    const p = new MessageProcessor([buildSkoponCatalog()])
-    processorRef.current = p
-    processedCountRef.current = 0
-    return p
-  }, [surfaceId])
+  useEffect(() => {
+    mountedRef.current = true
+    return () => {
+      mountedRef.current = false
+    }
+  }, [])
 
-  const [surfaces, setSurfaces] = useState(() => Array.from(processor.model.surfacesMap.values()))
+  useEffect(() => {
+    processorRef.current = processor
+  }, [processor])
 
   useEffect(() => {
-    const sync = () => setSurfaces(Array.from(processor.model.surfacesMap.values()))
+    const sync = () => {
+      if (!mountedRef.current) return
+      setSurfaces(Array.from(processor.model.surfacesMap.values()))
+    }
     const createdSub = processor.onSurfaceCreated(sync)
     const deletedSub = processor.onSurfaceDeleted(sync)
     return () => {
@@ -48,13 +64,78 @@ export default function SkoponA2uiStreamRenderer({
   }, [processor])
 
   useEffect(() => {
-    if (!Array.isArray(messages) || messages.length === 0) return
+    let cancelled = false
+    const surfaceIdChanged = surfaceIdRef.current !== surfaceId
+    surfaceIdRef.current = surfaceId
+
+    if (surfaceIdChanged) {
+      const next = createProcessor()
+      processorRef.current = next
+      processedCountRef.current = 0
+      if (Array.isArray(messages) && messages.length > 0) {
+        next.processMessages(messages)
+        processedCountRef.current = messages.length
+        if (!cancelled) {
+          setProcessor(next)
+          setSurfaces(Array.from(next.model.surfacesMap.values()))
+        }
+      } else if (!cancelled) {
+        setProcessor(next)
+        setSurfaces([])
+      }
+      return () => {
+        cancelled = true
+      }
+    }
+
+    if (!Array.isArray(messages) || messages.length === 0) {
+      if (processedCountRef.current > 0) {
+        const next = createProcessor()
+        processorRef.current = next
+        processedCountRef.current = 0
+        if (!cancelled) {
+          setProcessor(next)
+          setSurfaces([])
+        }
+      }
+      return () => {
+        cancelled = true
+      }
+    }
+
+    const activeProcessor = processorRef.current
+
+    if (messages.length < processedCountRef.current) {
+      const next = createProcessor()
+      processorRef.current = next
+      processedCountRef.current = 0
+      next.processMessages(messages)
+      processedCountRef.current = messages.length
+      if (!cancelled) {
+        setProcessor(next)
+        setSurfaces(Array.from(next.model.surfacesMap.values()))
+      }
+      return () => {
+        cancelled = true
+      }
+    }
+
     const pending = messages.slice(processedCountRef.current)
-    if (pending.length === 0) return
-    processor.processMessages(pending)
+    if (pending.length === 0) {
+      return () => {
+        cancelled = true
+      }
+    }
+    activeProcessor.processMessages(pending)
     processedCountRef.current = messages.length
-    setSurfaces(Array.from(processor.model.surfacesMap.values()))
-  }, [messages, processor])
+    if (!cancelled) {
+      setSurfaces(Array.from(activeProcessor.model.surfacesMap.values()))
+    }
+
+    return () => {
+      cancelled = true
+    }
+  }, [messages, surfaceId])
 
   if (surfaces.length === 0) return <>{emptyHint}</>
 

package/src/components/SkoponFormRenderer.tsx

@@ -49,10 +49,9 @@ const SkoponFormRenderer = forwardRef<SkoponFormRendererRef, SkoponFormRendererP
     const fieldNamesRef = useRef(fieldNames)
     fieldNamesRef.current = fieldNames
 
-    const surfaces = useMemo(() => {
+    const renderResult = useMemo(() => {
       if (isA2uiSurfaceEmpty(doc)) {
-        processorRef.current = null
-        return []
+        return { surfaces: [], processor: null as MessageProcessor<ReactComponentImplementation> | null }
       }
       try {
         const processor = new MessageProcessor([buildSkoponCatalog()])
@@ -61,15 +60,19 @@ const SkoponFormRenderer = forwardRef<SkoponFormRendererRef, SkoponFormRendererP
           catalogId: SKOPON_CATALOG_ID,
         }) as unknown as A2uiMessage[]
         processor.processMessages(messages)
-        processorRef.current = processor
-        return Array.from(processor.model.surfacesMap.values())
+        return {
+          surfaces: Array.from(processor.model.surfacesMap.values()),
+          processor,
+        }
       } catch (error) {
         console.error('[SkoponFormRenderer] 渲染 A2UI surface 失败', error)
-        processorRef.current = null
-        return []
+        return { surfaces: [], processor: null as MessageProcessor<ReactComponentImplementation> | null }
       }
     }, [doc, surfaceId])
 
+    const { surfaces, processor } = renderResult
+    processorRef.current = processor
+
     useImperativeHandle(
       ref,
       () => ({

package/src/index.ts

@@ -41,8 +41,17 @@ export { normalizeFormDefinition, syncFormDefinition } from './adapter/formSchem
 
 export { extractSurfaceValues } from './adapter/extractSurfaceValues'
 
-export { buildCurlStatement } from './submit/buildCurlStatement'
-export { intersectPayloadWithForm, type PayloadFormIntersection } from './submit/intersectPayloadWithForm'
+export { buildCurlStatement, buildAskUserCurlStatement, buildAskUserCurlBodyJson } from './submit/buildCurlStatement'
+export {
+  extractExtraBlockValues,
+  getPayloadInputFieldNames,
+  getPayloadRenderableBlocks,
+  intersectPayloadBlocksWithForm,
+  parsePayloadBlocksJson,
+  payloadHasInputBlocks,
+  type PayloadBlocksDefinition,
+  type PayloadBlocksIntersection,
+} from './submit/intersectPayloadBlocksWithForm'
 export {
   copyTextToClipboard,
   submitFormJson,

package/src/styles/index.css

@@ -132,6 +132,11 @@
   min-width: 0;
 }
 
+.ask-user-form-card-status {
+  display: flex;
+  justify-content: flex-end;
+}
+
 .ask-user-form-actions {
   display: flex;
   justify-content: flex-end;