@skopon-cool/form-sdk 0.1.3 → 0.1.4

package/src/catalog/resumeSearchContext.tsx

@@ -0,0 +1,48 @@
+import { createContext, useContext, type ReactNode } from 'react'
+import type { FormResumeFilter } from '../types/index'
+
+export interface ResumeSearchItem {
+  resumeUniqueId: string
+  resumeId?: number
+  agentId?: number
+  name: string
+  avatarUrl?: string | null
+  description?: string
+  satisfaction?: number
+  published?: number
+  worksCount?: number
+}
+
+export interface ResumeSearchParams {
+  filter: FormResumeFilter
+  page: number
+}
+
+export interface ResumeSearchResult {
+  list: ResumeSearchItem[]
+  total: number
+  page: number
+  pageSize: number
+}
+
+export type ResumeSearchFn = (params: ResumeSearchParams) => Promise<ResumeSearchResult>
+
+const ResumeSearchContext = createContext<ResumeSearchFn | null>(null)
+
+export function ResumeSearchProvider({
+  resumeSearch,
+  children,
+}: {
+  resumeSearch: ResumeSearchFn | null | undefined
+  children: ReactNode
+}) {
+  return (
+    <ResumeSearchContext.Provider value={resumeSearch ?? null}>
+      {children}
+    </ResumeSearchContext.Provider>
+  )
+}
+
+export function useResumeSearch(): ResumeSearchFn | null {
+  return useContext(ResumeSearchContext)
+}

package/src/catalog/skoponCaseSelect.tsx

@@ -0,0 +1,215 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { Button, Spin, Typography } from 'antd'
+import { FileTextOutlined, ReloadOutlined } from '@ant-design/icons'
+import type { ComponentContext } from '@a2ui/web_core/v0_9'
+import { createBinderlessComponentImplementation } from '@a2ui/react/v0_9'
+import { z } from 'zod'
+import type { FormCaseFilter } from '../types/index'
+import { useA2uiPreviewMode } from './a2uiPreviewContext'
+import { asOptionalString, useSkoponBoundField } from './useSkoponBoundField'
+import { type CaseSearchItem, useCaseSearch } from './caseSearchContext'
+
+function readString(value: unknown): string {
+  return typeof value === 'string' ? value : ''
+}
+
+function readCaseFilter(raw: unknown): FormCaseFilter {
+  if (!raw || typeof raw !== 'object') {
+    return { pageSize: 20 }
+  }
+  const rec = raw as Record<string, unknown>
+  const flowIdRaw = typeof rec.flowId === 'number' ? rec.flowId : Number(rec.flowId)
+  const flowId =
+    Number.isFinite(flowIdRaw) && flowIdRaw > 0 ? Math.floor(flowIdRaw) : undefined
+  const pageSizeRaw = typeof rec.pageSize === 'number' ? rec.pageSize : Number(rec.pageSize)
+  const pageSize =
+    Number.isFinite(pageSizeRaw) && pageSizeRaw >= 1 && pageSizeRaw <= 100
+      ? Math.floor(pageSizeRaw)
+      : 20
+  return { flowId, pageSize }
+}
+
+function filterKey(filter: FormCaseFilter): string {
+  return JSON.stringify(filter)
+}
+
+const SkoponCaseSelectApi = {
+  name: 'SkoponCaseSelect',
+  schema: z
+    .object({
+      label: z.any().optional(),
+      placeholder: z.any().optional(),
+      help: z.any().optional(),
+      enableRefresh: z.any().optional(),
+      caseFilter: z.any().optional(),
+      value: z.any().optional(),
+    })
+    .passthrough(),
+}
+
+function CaseCard({
+  item,
+  selected,
+  disabled,
+  onToggle,
+}: {
+  item: CaseSearchItem
+  selected: boolean
+  disabled: boolean
+  onToggle: () => void
+}) {
+  return (
+    <button
+      type="button"
+      className={`skopon-resume-select-card${selected ? ' skopon-resume-select-card--selected' : ''}`}
+      disabled={disabled}
+      onClick={onToggle}
+    >
+      <div className="skopon-resume-select-card-avatar">
+        <FileTextOutlined style={{ fontSize: 24, color: 'var(--color-primary, #1677ff)' }} />
+      </div>
+      <div className="skopon-resume-select-card-body">
+        <div className="skopon-resume-select-card-name">{item.name}</div>
+        {item.description ? (
+          <div className="skopon-resume-select-card-desc">{item.description}</div>
+        ) : null}
+        <div className="skopon-resume-select-card-meta">
+          {item.caseUniqueId}
+          {item.platform ? ` · ${item.platform}` : ''}
+          {item.link ? ` · ${item.link}` : ''}
+        </div>
+      </div>
+    </button>
+  )
+}
+
+function SkoponCaseSelectPreview({ context }: { context: ComponentContext }) {
+  const { interactive } = useA2uiPreviewMode()
+  const caseSearch = useCaseSearch()
+  const { value, setValue } = useSkoponBoundField(context)
+  const props = context.componentModel.properties as Record<string, unknown>
+
+  const label = readString(props.label)
+  const placeholder = readString(props.placeholder)
+  const help = readString(props.help)
+  const enableRefresh = props.enableRefresh !== false
+  const caseFilter = useMemo(() => readCaseFilter(props.caseFilter), [props.caseFilter])
+  const filterSig = filterKey(caseFilter)
+
+  const [page, setPage] = useState(1)
+  const [loading, setLoading] = useState(false)
+  const [fetchError, setFetchError] = useState('')
+  const [items, setItems] = useState<CaseSearchItem[]>([])
+  const [total, setTotal] = useState(0)
+  const [pageSize, setPageSize] = useState(caseFilter.pageSize ?? 20)
+  const requestSeqRef = useRef(0)
+
+  const selectedId = asOptionalString(value) ?? ''
+
+  const emptyHint = useMemo(() => {
+    if (!caseSearch) return '未配置案例搜索服务'
+    if (!caseFilter.flowId) return '未配置 Flow 筛选条件'
+    if (fetchError) return fetchError
+    return placeholder || '暂无匹配的案例'
+  }, [caseSearch, caseFilter.flowId, fetchError, placeholder])
+
+  const fetchPage = useCallback(
+    async (targetPage: number) => {
+      const filter = readCaseFilter(JSON.parse(filterSig) as FormCaseFilter)
+      const seq = ++requestSeqRef.current
+      if (!caseSearch || !filter.flowId) {
+        setItems([])
+        setTotal(0)
+        setFetchError('')
+        return
+      }
+      setLoading(true)
+      setFetchError('')
+      try {
+        const result = await caseSearch({ filter, page: targetPage })
+        if (seq !== requestSeqRef.current) return
+        setItems(result.list)
+        setTotal(result.total)
+        setPage(result.page)
+        setPageSize(result.pageSize)
+      } catch (err) {
+        if (seq !== requestSeqRef.current) return
+        setItems([])
+        setTotal(0)
+        setFetchError(err instanceof Error ? err.message : '加载案例列表失败')
+      } finally {
+        if (seq === requestSeqRef.current) setLoading(false)
+      }
+    },
+    [caseSearch, filterSig],
+  )
+
+  useEffect(() => {
+    setPage(1)
+    void fetchPage(1)
+  }, [filterSig, fetchPage])
+
+  const toggleSelect = (caseUniqueId: string) => {
+    if (!interactive) return
+    setValue(selectedId === caseUniqueId ? '' : caseUniqueId)
+  }
+
+  const handleRefresh = () => {
+    const filter = readCaseFilter(JSON.parse(filterSig) as FormCaseFilter)
+    const effectivePageSize = pageSize || filter.pageSize || 20
+    const totalPages = Math.max(1, Math.ceil(total / effectivePageSize))
+    const nextPage = page >= totalPages ? 1 : page + 1
+    void fetchPage(nextPage)
+  }
+
+  return (
+    <div className="form-block-preview skopon-resume-select">
+      {label ? <div className="form-block-preview-label">{label}</div> : null}
+      {loading && items.length === 0 ? (
+        <div className="skopon-resume-select-status">
+          <Spin size="small" /> 加载案例…
+        </div>
+      ) : null}
+      {!loading && items.length === 0 ? (
+        <div className="skopon-resume-select-empty">{emptyHint}</div>
+      ) : null}
+      {items.length > 0 ? (
+        <div className="skopon-resume-select-list">
+          {items.map((item) => (
+            <CaseCard
+              key={item.caseUniqueId}
+              item={item}
+              selected={selectedId === item.caseUniqueId}
+              disabled={!interactive}
+              onToggle={() => toggleSelect(item.caseUniqueId)}
+            />
+          ))}
+        </div>
+      ) : null}
+      {enableRefresh && caseSearch && caseFilter.flowId ? (
+        <div className="skopon-resume-select-actions">
+          <Button
+            type="default"
+            size="small"
+            icon={<ReloadOutlined />}
+            loading={loading}
+            disabled={!interactive}
+            onClick={handleRefresh}
+          >
+            换一批
+          </Button>
+        </div>
+      ) : null}
+      {help ? (
+        <Typography.Text type="secondary" className="form-block-preview-help">
+          {help}
+        </Typography.Text>
+      ) : null}
+    </div>
+  )
+}
+
+export const SkoponCaseSelectImpl = createBinderlessComponentImplementation(
+  SkoponCaseSelectApi,
+  SkoponCaseSelectPreview,
+)

package/src/catalog/skoponResumeSelect.tsx

@@ -0,0 +1,227 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { Avatar, Button, Spin, Typography } from 'antd'
+import { ReloadOutlined, UserOutlined } from '@ant-design/icons'
+import type { ComponentContext } from '@a2ui/web_core/v0_9'
+import { createBinderlessComponentImplementation } from '@a2ui/react/v0_9'
+import { z } from 'zod'
+import type { FormResumeFilter } from '../types/index'
+import { useA2uiPreviewMode } from './a2uiPreviewContext'
+import { asStringArray, useSkoponBoundField } from './useSkoponBoundField'
+import {
+  type ResumeSearchItem,
+  useResumeSearch,
+} from './resumeSearchContext'
+
+function readString(value: unknown): string {
+  return typeof value === 'string' ? value : ''
+}
+
+function readResumeFilter(raw: unknown): FormResumeFilter {
+  if (!raw || typeof raw !== 'object') {
+    return { names: [], agentUniqueIds: [], resumeUniqueIds: [], pageSize: 20 }
+  }
+  const rec = raw as Record<string, unknown>
+  const names = Array.isArray(rec.names) ? rec.names.map(String).filter(Boolean) : []
+  const agentUniqueIds = Array.isArray(rec.agentUniqueIds)
+    ? rec.agentUniqueIds.map(String).filter(Boolean)
+    : []
+  const resumeUniqueIds = Array.isArray(rec.resumeUniqueIds)
+    ? rec.resumeUniqueIds.map(String).filter(Boolean)
+    : []
+  const pageSizeRaw = typeof rec.pageSize === 'number' ? rec.pageSize : Number(rec.pageSize)
+  const pageSize =
+    Number.isFinite(pageSizeRaw) && pageSizeRaw >= 1 && pageSizeRaw <= 100
+      ? Math.floor(pageSizeRaw)
+      : 20
+  return { names, agentUniqueIds, resumeUniqueIds, pageSize }
+}
+
+function filterKey(filter: FormResumeFilter): string {
+  return JSON.stringify(filter)
+}
+
+const SkoponResumeSelectApi = {
+  name: 'SkoponResumeSelect',
+  schema: z
+    .object({
+      label: z.any().optional(),
+      placeholder: z.any().optional(),
+      help: z.any().optional(),
+      enableRefresh: z.any().optional(),
+      resumeFilter: z.any().optional(),
+      value: z.any().optional(),
+    })
+    .passthrough(),
+}
+
+function ResumeCard({
+  item,
+  selected,
+  disabled,
+  onToggle,
+}: {
+  item: ResumeSearchItem
+  selected: boolean
+  disabled: boolean
+  onToggle: () => void
+}) {
+  return (
+    <button
+      type="button"
+      className={`skopon-resume-select-card${selected ? ' skopon-resume-select-card--selected' : ''}`}
+      disabled={disabled}
+      onClick={onToggle}
+    >
+      <Avatar
+        size={48}
+        src={item.avatarUrl || undefined}
+        icon={!item.avatarUrl ? <UserOutlined /> : undefined}
+        className="skopon-resume-select-card-avatar"
+      />
+      <div className="skopon-resume-select-card-body">
+        <div className="skopon-resume-select-card-name">{item.name}</div>
+        {item.description ? (
+          <div className="skopon-resume-select-card-desc">{item.description}</div>
+        ) : null}
+        <div className="skopon-resume-select-card-meta">
+          {item.resumeUniqueId}
+          {typeof item.satisfaction === 'number' ? ` · 满意度 ${item.satisfaction}%` : ''}
+        </div>
+      </div>
+    </button>
+  )
+}
+
+function SkoponResumeSelectPreview({ context }: { context: ComponentContext }) {
+  const { interactive } = useA2uiPreviewMode()
+  const resumeSearch = useResumeSearch()
+  const { value, setValue } = useSkoponBoundField(context)
+  const props = context.componentModel.properties as Record<string, unknown>
+
+  const label = readString(props.label)
+  const placeholder = readString(props.placeholder)
+  const help = readString(props.help)
+  const enableRefresh = props.enableRefresh !== false
+  const resumeFilter = useMemo(() => readResumeFilter(props.resumeFilter), [props.resumeFilter])
+  const filterSig = filterKey(resumeFilter)
+
+  const [page, setPage] = useState(1)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+  const [items, setItems] = useState<ResumeSearchItem[]>([])
+  const [total, setTotal] = useState(0)
+  const [pageSize, setPageSize] = useState(resumeFilter.pageSize ?? 20)
+  const requestSeqRef = useRef(0)
+
+  const selectedIds = asStringArray(value)
+
+  const fetchPage = useCallback(
+    async (targetPage: number) => {
+      const filter = readResumeFilter(JSON.parse(filterSig) as FormResumeFilter)
+      const seq = ++requestSeqRef.current
+      if (!resumeSearch) {
+        setItems([])
+        setTotal(0)
+        setError('未配置简历搜索服务')
+        return
+      }
+      setLoading(true)
+      setError('')
+      try {
+        const result = await resumeSearch({ filter, page: targetPage })
+        if (seq !== requestSeqRef.current) return
+        setItems(result.list)
+        setTotal(result.total)
+        setPage(result.page)
+        setPageSize(result.pageSize)
+      } catch (err) {
+        if (seq !== requestSeqRef.current) return
+        setItems([])
+        setTotal(0)
+        setError(err instanceof Error ? err.message : '加载简历列表失败')
+      } finally {
+        if (seq === requestSeqRef.current) setLoading(false)
+      }
+    },
+    [resumeSearch, filterSig],
+  )
+
+  useEffect(() => {
+    setPage(1)
+    void fetchPage(1)
+  }, [filterSig, fetchPage])
+
+  const toggleSelect = (resumeUniqueId: string) => {
+    if (!interactive) return
+    const next = selectedIds.includes(resumeUniqueId)
+      ? selectedIds.filter((id) => id !== resumeUniqueId)
+      : [...selectedIds, resumeUniqueId]
+    setValue(next)
+  }
+
+  const handleRefresh = () => {
+    const filter = readResumeFilter(JSON.parse(filterSig) as FormResumeFilter)
+    const effectivePageSize = pageSize || filter.pageSize || 20
+    const totalPages = Math.max(1, Math.ceil(total / effectivePageSize))
+    const nextPage = page >= totalPages ? 1 : page + 1
+    void fetchPage(nextPage)
+  }
+
+  const emptyLabel = placeholder || '暂无匹配的简历'
+
+  return (
+    <div className="form-block-preview skopon-resume-select">
+      {label ? <div className="form-block-preview-label">{label}</div> : null}
+      {loading && items.length === 0 ? (
+        <div className="skopon-resume-select-status">
+          <Spin size="small" /> 加载简历…
+        </div>
+      ) : null}
+      {!loading && error ? (
+        <Typography.Text type="danger" className="skopon-resume-select-status">
+          {error}
+        </Typography.Text>
+      ) : null}
+      {!loading && !error && items.length === 0 ? (
+        <div className="skopon-resume-select-empty">{emptyLabel}</div>
+      ) : null}
+      {items.length > 0 ? (
+        <div className="skopon-resume-select-list">
+          {items.map((item) => (
+            <ResumeCard
+              key={item.resumeUniqueId}
+              item={item}
+              selected={selectedIds.includes(item.resumeUniqueId)}
+              disabled={!interactive}
+              onToggle={() => toggleSelect(item.resumeUniqueId)}
+            />
+          ))}
+        </div>
+      ) : null}
+      {enableRefresh && resumeSearch ? (
+        <div className="skopon-resume-select-actions">
+          <Button
+            type="default"
+            size="small"
+            icon={<ReloadOutlined />}
+            loading={loading}
+            disabled={!interactive}
+            onClick={handleRefresh}
+          >
+            换一批
+          </Button>
+        </div>
+      ) : null}
+      {help ? (
+        <Typography.Text type="secondary" className="form-block-preview-help">
+          {help}
+        </Typography.Text>
+      ) : null}
+    </div>
+  )
+}
+
+export const SkoponResumeSelectImpl = createBinderlessComponentImplementation(
+  SkoponResumeSelectApi,
+  SkoponResumeSelectPreview,
+)

package/src/components/AskUserFormCard.tsx

@@ -12,6 +12,8 @@ import {
   payloadHasInputBlocks,
 } from '../submit/intersectPayloadBlocksWithForm'
 import { copyTextToClipboard, submitFormJson } from '../submit/submitFormJson'
+import type { CaseSearchFn } from '../catalog/caseSearchContext'
+import type { ResumeSearchFn } from '../catalog/resumeSearchContext'
 import SkoponFormRenderer, { type SkoponFormRendererRef } from './SkoponFormRenderer'
 import CurlSubmitBlock from './CurlSubmitBlock'
 
@@ -37,6 +39,10 @@ export interface AskUserFormCardProps {
   /** 需 useCallback 稳定引用，避免重复拉取 */
   fetchFormDetail: (ref: { formUniqueId: string }) => Promise<FormDetailResult>
   onNotify?: (type: 'success' | 'error', message: string) => void
+  /** 简历多选组件：注入搜索函数 */
+  resumeSearch?: ResumeSearchFn | null
+  /** 案例单选组件：注入搜索函数 */
+  caseSearch?: CaseSearchFn | null
 }
 
 export default function AskUserFormCard({
@@ -46,6 +52,8 @@ export default function AskUserFormCard({
   submitMode = 'curl',
   fetchFormDetail,
   onNotify,
+  resumeSearch = null,
+  caseSearch = null,
 }: AskUserFormCardProps) {
   const [formDef, setFormDef] = useState<FormSchema | null>(null)
   const [formDisabled, setFormDisabled] = useState(false)
@@ -213,6 +221,8 @@ export default function AskUserFormCard({
         surfaceId={surfaceId}
         fieldNames={fieldNames}
         interactive
+        resumeSearch={resumeSearch}
+        caseSearch={caseSearch}
       />
 
       <div className="ask-user-form-actions">

package/src/components/SkoponA2uiStreamRenderer.test.ts

@@ -11,12 +11,12 @@ function createProcessor(): MessageProcessor<ReactComponentImplementation> {
   return new MessageProcessor([buildSkoponCatalog()])
 }
 
-function buildStreamMessages(surfaceId: string): A2uiMessage[] {
+function buildStreamMessages(surfaceId: string, label = '姓名'): A2uiMessage[] {
   const doc = blocksToA2ui(
     {
       title: '',
       description: '',
-      blocks: [{ id: 'b-name', type: 'text', name: 'name', label: '姓名' }],
+      blocks: [{ id: 'b-name', type: 'text', name: 'name', label }],
     },
     { includeHeader: false },
   )
@@ -59,4 +59,20 @@ describe('SkoponA2uiStreamRenderer stream lifecycle', () => {
     rebuilt.processMessages(messages.slice(0, 1))
     expect(rebuilt.model.surfacesMap.size).toBeLessThanOrEqual(countAfterFull)
   })
+
+  it('rebuilds processor when message count is unchanged but content replaced', () => {
+    const surfaceId = 'stream-same-len'
+    const messagesA = buildStreamMessages(surfaceId, '姓名')
+    const messagesB = buildStreamMessages(surfaceId, '昵称')
+    expect(messagesA.length).toBe(messagesB.length)
+
+    const processor = createProcessor()
+    processor.processMessages(messagesA)
+    expect(processor.model.surfacesMap.size).toBeGreaterThan(0)
+
+    const rebuilt = createProcessor()
+    rebuilt.processMessages(messagesB)
+    expect(rebuilt.model.surfacesMap.size).toBeGreaterThan(0)
+    expect(JSON.stringify(messagesA)).not.toBe(JSON.stringify(messagesB))
+  })
 })

package/src/components/SkoponA2uiStreamRenderer.test.tsx

@@ -18,12 +18,12 @@ import { blocksToA2ui, surfaceDocToMessages } from '../adapter/a2uiAdapter'
 import { SKOPON_CATALOG_ID } from '../catalog/a2uiCustomCatalog'
 import SkoponA2uiStreamRenderer from './SkoponA2uiStreamRenderer'
 
-function buildStreamMessages(surfaceId: string): A2uiMessage[] {
+function buildStreamMessages(surfaceId: string, label = '姓名'): A2uiMessage[] {
   const doc = blocksToA2ui(
     {
       title: '',
       description: '',
-      blocks: [{ id: 'b-name', type: 'text', name: 'name', label: '姓名' }],
+      blocks: [{ id: 'b-name', type: 'text', name: 'name', label }],
     },
     { includeHeader: false },
   )
@@ -76,4 +76,28 @@ describe('SkoponA2uiStreamRenderer component', () => {
     expect(getByText('姓名')).toBeTruthy()
     expect(queryByText('stream-empty')).toBeNull()
   })
+
+  it('reprocesses messages when stream content is replaced at same length', () => {
+    const surfaceId = 'stream-replace'
+    const messagesA = buildStreamMessages(surfaceId, '姓名')
+    const messagesB = buildStreamMessages(surfaceId, '昵称')
+    expect(messagesA.length).toBe(messagesB.length)
+
+    const { rerender, getByText, queryByText } = render(
+      createElement(SkoponA2uiStreamRenderer, {
+        messages: messagesA,
+        surfaceId,
+      }),
+    )
+    expect(getByText('姓名')).toBeTruthy()
+
+    rerender(
+      createElement(SkoponA2uiStreamRenderer, {
+        messages: messagesB,
+        surfaceId,
+      }),
+    )
+    expect(getByText('昵称')).toBeTruthy()
+    expect(queryByText('姓名')).toBeNull()
+  })
 })