{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "elements-edit-message",
  "type": "registry:component",
  "title": "Edit a sent message",
  "description": "Rewrite a turn in place, told up front how many replies the edit throws away.",
  "registryDependencies": [
    "https://r.assistant-ui.com/elements-surfaces.json"
  ],
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "type": "registry:component",
      "path": "components/assistant-ui/elements/edit-message.tsx",
      "sourcePath": "packages/ui/src/components/react/assistant-ui/elements/edit-message.tsx",
      "content": "\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { AlertTriangleIcon } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { field, inkButton, mono, paper } from \"./surfaces\";\n\nexport function EditMessage({\n  value,\n  discardedReplies,\n  editing,\n  onValueChange,\n  onSave,\n  onCancel,\n  onStartEdit,\n  className,\n  ...props\n}: Omit<\n  ComponentProps<\"div\">,\n  | \"children\"\n  | \"value\"\n  | \"discardedReplies\"\n  | \"editing\"\n  | \"onValueChange\"\n  | \"onSave\"\n  | \"onCancel\"\n  | \"onStartEdit\"\n> & {\n  value: string;\n  discardedReplies: number;\n  editing: boolean;\n  onValueChange?: (value: string) => void;\n  onSave?: () => void;\n  onCancel?: () => void;\n  onStartEdit?: () => void;\n}) {\n  if (!editing) {\n    return (\n      <div\n        data-slot=\"edit-message\"\n        className={cn(\"flex w-full max-w-sm justify-end\", className)}\n        {...props}\n      >\n        <button\n          type=\"button\"\n          onClick={onStartEdit}\n          className={cn(\n            field,\n            \"hover:bg-foreground/[0.07] max-w-[85%] rounded-2xl px-3.5 py-2.5 text-start text-[13.5px] transition-colors\",\n          )}\n        >\n          {value}\n        </button>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      data-slot=\"edit-message\"\n      className={cn(\n        paper,\n        \"flex w-full max-w-sm flex-col gap-3 rounded-[20px] p-3.5\",\n        className,\n      )}\n\n      {...props}\n    >\n      <textarea\n        value={value}\n        onChange={(event) => onValueChange?.(event.target.value)}\n        rows={2}\n        aria-label=\"Edit your message\"\n        className={cn(\n          field,\n          \"text-foreground/90 focus-visible:ring-foreground/20 resize-none rounded-xl px-3 py-2.5 text-[13.5px] leading-relaxed outline-none focus-visible:ring-1\",\n        )}\n      />\n\n      {discardedReplies > 0 && (\n        <div className=\"flex items-center gap-2 text-amber-700 dark:text-amber-400\">\n          <AlertTriangleIcon className=\"size-3.5 shrink-0\" />\n          <span className={cn(mono, \"tabular-nums\")}>\n            sending discards {discardedReplies}{\" \"}\n            {discardedReplies === 1 ? \"reply\" : \"replies\"}\n          </span>\n        </div>\n      )}\n\n      <div className=\"flex items-center justify-end gap-2\">\n        <button\n          type=\"button\"\n          onClick={onCancel}\n          className=\"text-foreground/55 hover:bg-foreground/[0.06] hover:text-foreground/90 h-8 rounded-full px-3.5 text-xs font-medium transition-[background-color,color,scale] duration-150 active:scale-[0.96]\"\n        >\n          Cancel\n        </button>\n        <button\n          type=\"button\"\n          onClick={onSave}\n          className={cn(\n            inkButton,\n            \"flex h-8 items-center rounded-full px-3.5 text-xs font-medium\",\n          )}\n        >\n          Send\n        </button>\n      </div>\n    </div>\n  );\n}\n"
    }
  ]
}