Cloud agent workspace

import { AgentWorkspace } from '@/components/blocks/agent-01'


<AgentWorkspace />


// Fill a parent that has a height instead of the viewport
<AgentWorkspace height="100%" />


// Your own tasks, models and agent
<AgentWorkspace
  brand={{ name: 'Harbor', logo: <HarborMark /> }}
  tasks={[
    {
      id: 'fix-login',
      title: 'Fix the login redirect loop',
      repo: 'harbor-web',
      branch: 'main',
      pr: 41,
      adds: 12,
      dels: 4,
      status: 'open',
      files: [{ path: 'src/auth/redirect.ts', diff: '@@ -1,3 +1,3 @@\n-old line\n+new line' }],
      thread: [{ id: 'm1', kind: 'user', text: 'The login page loops forever after sign-in.' }],
    },
  ]}
  models={[{ id: 'fast', label: 'Harbor Fast', description: 'Quick edits' }]}
  defaultPanel="closed"
  defaultTab="preview"
  onSend={(message, { taskId, model }) => track('send', { taskId, model: model.id })}
  generateReply={async function* (message, { task, signal }) {
    const response = await fetch('/api/agent', {
      method: 'POST',
      body: JSON.stringify({ task: task.id, message }),
      signal,
    })
    const reader = response.body!.pipeThrough(new TextDecoderStream()).getReader()
    while (true) {
      const { value, done } = await reader.read()
      if (done) break
      yield value
    }
  }}
/>