第十三章：Web Client 架构

// 来自 packages/client/ui-renderer/src/client/registry.ts
class SlotRegistry {
  /** 注册 Slot */
  register<K extends string>(key: K, component: ComponentType): Disposable {
    this.slots.set(key, component)
    
    // 通知更新
    this.notifyUpdate(key)
    
    return () => {
      this.slots.delete(key)
      this.notifyUpdate(key)
    }
  }
  
  /** 获取 Slot */
  get<K extends string>(key: K): ComponentType | undefined {
    return this.slots.get(key)
  }
  
  /** 渲染 Slot */
  render<K extends string>(key: K, props: Record<string, unknown>): ReactNode {
    const component = this.get(key)
    if (!component) return null
    
    return React.createElement(component, props)
  }
}

// 在组件中使用 Slot
function ChatView() {
  const slotRegistry = useSlotRegistry()
  
  return (
    <div className="chat-view">
      {slotRegistry.render('chat-slot', {
        messages: messages,
        onSend: handleSend
      })}
    </div>
  )
}

// 注册自定义 Slot
function registerCustomChat Slot(ctx: Context) {
  ctx.clientSlots.register('chat-slot', CustomChatCard)
}

// 来自 packages/client/ui-chat/src/client
function ChatCard({ messages, onSend }: ChatCardProps) {
  return (
    <div className="chat-card">
      <MessageList messages={messages} />
      <InputBox onSend={onSend} />
    </div>
  )
}

// 来自 packages/client/ui-approval/src/client
function ApprovalCard({ request, onApprove, onDeny }: ApprovalCardProps) {
  return (
    <div className="approval-card">
      <h3>审批请求</h3>
      <p>{request.description}</p>
      <div className="actions">
        <button onClick={() => onApprove('once')}>批准一次</button>
        <button onClick={() => onApprove('always')}>始终批准</button>
        <button onClick={() => onDeny()}>拒绝</button>
      </div>
    </div>
  )
}

// 来自 packages/client/ui-settings/src/client
function SettingsCard({ settings, onUpdate }: SettingsCardProps) {
  return (
    <div className="settings-card">
      <h3>设置</h3>
      <SettingsForm
        settings={settings}
        onChange={onUpdate}
      />
    </div>
  )
}

// 来自 packages/client/connection/src/client
function useProjection<K extends string>(key: K): ProjectionState<K> {
  const [state, setState] = useState<ProjectionState<K>>()
  
  useEffect(() => {
    // 订阅投影更新
    const unsubscribe = connection.onProjectionUpdate(key, (newState) => {
      setState(newState)
    })
    
    // 获取初始状态
    connection.getProjection(key).then(setState)
    
    return unsubscribe
  }, [key])
  
  return state
}

function ConversationView() {
  const turnBoundary = useProjection('turnBoundary')
  const toolUsage = useProjection('toolUsage')
  
  return (
    <div className="conversation">
      <TurnIndicator turn={turnBoundary?.lastTurn} />
      <ToolUsagePanel usage={toolUsage} />
      <MessageList />
    </div>
  )
}

// 来自 packages/client/connection/src/client
class WebSocketConnection {
  private ws: WebSocket
  
  constructor(private url: string) {
    this.ws = new WebSocket(url)
    this.setupEventHandlers()
  }
  
  /** 设置事件处理 */
  private setupEventHandlers(): void {
    this.ws.onopen = () => {
      console.log('WebSocket connected')
    }
    
    this.ws.onmessage = (event) => {
      const message = JSON.parse(event.data)
      this.handleMessage(message)
    }
    
    this.ws.onclose = () => {
      console.log('WebSocket disconnected')
      this.reconnect()
    }
  }
  
  /** 发送 JSON-RPC 请求 */
  async request(method: string, params: unknown): Promise<unknown> {
    return new Promise((resolve, reject) => {
      const id = generateRequestId()
      
      this.ws.send(JSON.stringify({
        jsonrpc: '2.0',
        id,
        method,
        params
      }))
      
      this.pendingRequests.set(id, { resolve, reject })
    })
  }
}

// 概念性描述
class EventStream {
  /** 订阅会话事件 */
  subscribe(sessionId: string, callback: (event: SessionEvent) => void): Disposable {
    // 发送订阅请求
    this.connection.request('event.subscribe', { sessionId })
    
    // 监听事件
    const handler = (message: StreamMessage) => {
      if (message.sessionId === sessionId) {
        callback(message.event)
      }
    }
    
    this.connection.on('event', handler)
    
    return () => {
      this.connection.off('event', handler)
      this.connection.request('event.unsubscribe', { sessionId })
    }
  }
}

interface ConversationNodeDefinition {
  /** 节点类型 */
  type: string
  /** 渲染器 */
  renderer: ComponentType<ConversationNodeProps>
  /** 匹配函数 */
  match: (event: SessionEvent) => boolean
}

// 注册自定义节点类型
ctx.clientConversation.registerNode({
  type: 'code-block',
  match: (event) => event.type === 'assistant/message' && event.data.content.includes('```'),
  renderer: CodeBlockNode
})

# cordis.patch.yml
- id: client
  config:
    # WebSocket 端点
    wsEndpoint: 'ws://localhost:3000'
    
    # 主题
    theme: 'dark'  # 'light' | 'dark' | 'auto'
    
    # 启用的插件
    plugins:
      - 'ui-chat'
      - 'ui-approval'
      - 'ui-settings'