展示第一个广告

import { AdsProvider } from '@kontextso/sdk-react'

function App() {
  return (
    <AdsProvider
      publisherToken="<your-publisher-token>"
      userId="user-1234"
      conversationId="conv-5678"
      character={{
        id: 'character-1234',
        name: 'John Doe',
        avatarUrl: 'https://example.com/avatar.png',
        greeting: 'Hello, how can I help you today?',
      }}
      onEvent={({ name, code, payload }) => {
        // 处理事件
      }}
    >
      <TheRestOfYourApplication />
    </AdsProvider>
  )
}

import { useAds } from '@kontextso/sdk-react'

const { addMessage } = useAds()

// 对话中每条用户消息和助手消息都调用一次。
addMessage({
  id: '<unique-message-id>',
  role: '<user | assistant>',
  content: '<content of the message>',
  createdAt: new Date(),
})

import { InlineAd } from '@kontextso/sdk-react'

function MessageList({ messages }: { messages: Message[] }) {
  return (
    <div>
      {messages.map((m) => (
        <div key={m.id}>
          <Message message={m} />
          {m.role === 'assistant' && <InlineAd messageId={m.id} />}
        </div>
      ))}
    </div>
  )
}

<AdsProvider
  // ...
  onEvent={(event) => {
    switch (event.name) {
      case 'ad.filled':
        console.log('filled:', event.payload.id, 'revenue=', event.payload.revenue)
        break
      case 'ad.clicked':
        console.log('clicked:', event.payload.url)
        break
      case 'ad.no-fill':
        console.log('no fill, skipCode=', event.payload.skipCode)
        break
    }
  }}
>