Editable Responses Kit

Let users modify AI output before accepting. Track changes with diff view and edit history.

91 words

Based on the quarterly analysis, here are the key findings: 1. Revenue grew by 23% year-over-year, exceeding our target of 18%. 2. Customer acquisition cost decreased by $12 per user. 3. The new product line contributed approximately 35% of total revenue. 4. Employee satisfaction scores improved from 7.2 to 8.1. 5. We recommend increasing marketing spend by 15% next quarter to capitalize on the momentum. Overall, the company is in a strong position heading into Q4. The main risk factor is the pending regulatory change that could impact our European operations.

Integration Code

import { EditableResponse, useDiffTracker } from 'agent-tools-kit/ui'

function ChatMessage({ message }) {
  const { edits, trackEdit, revert, accept } = useDiffTracker(message.content)

  return (
    <EditableResponse
      content={message.content}
      editable={true}
      onEdit={(newContent) => trackEdit(newContent)}
      onAccept={(finalContent) => {
        accept()
        // Continue the conversation with edited content
        agent.continueWith(finalContent)
      }}
      onRevert={revert}
      showDiff={true}       // side-by-side diff view
      showHistory={true}    // edit history timeline
      maxRevisions={10}     // limit stored revisions
    />
  )
}