feat(ai-agents/flow-builder): Add target attribute in buttons coming from AI Agent (#3188)

asastre · web-flow · commit 397016581f73 · 2026-03-23T12:07:23.000+01:00
## Description
Add a new target attribute in the textWithButtons output schema in the
AI Agent plugin and make them reach the render of the FlowButton in Flow
Builder plugin so an URL button can open the link within the same window
if stated in the AI Agent prompt.

## Context
Through the AI Agent prompt there was no way to make a URL button to
open the website within the same window as the webchat.

## Testing

The pull request has unit tests.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/botonic-core/CHANGELOG.md b/packages/botonic-core/CHANGELOG.md
@@ -25,6 +25,7 @@ All notable changes to Botonic will be documented in this file.
 ### Added
 
 - [PR-3186](https://github.com/hubtype/botonic/pull/3186) Make some AI Agents types generic to allow adding new output message types.
+- [PR-3188](https://github.com/hubtype/botonic/pull/3188) Add `target` attribute in `Button` interface.
 
 ## [0.46.0] - 2026-03-17
 
diff --git a/packages/botonic-core/package.json b/packages/botonic-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@botonic/core",
-  "version": "0.46.0",
+  "version": "0.46.1",
   "license": "MIT",
   "description": "Build Chatbots using React",
   "main": "./lib/cjs/index.js",
diff --git a/packages/botonic-core/src/models/ai-agents.ts b/packages/botonic-core/src/models/ai-agents.ts
@@ -14,6 +14,7 @@ export interface Button {
   text: string
   payload?: string
   url?: string
+  target?: string
 }
 export interface ButtonWithPayload {
   text: string
diff --git a/packages/botonic-plugin-ai-agents/CHANGELOG.md b/packages/botonic-plugin-ai-agents/CHANGELOG.md
@@ -24,7 +24,8 @@ All notable changes to Botonic will be documented in this file.
 
 ### Added
 
-- [PR-3186](https://github.com/hubtype/botonic/pull/3186) Make output schemas extendable
+- [PR-3186](https://github.com/hubtype/botonic/pull/3186) Make output schemas extendable.
+- [PR-3188](https://github.com/hubtype/botonic/pull/3188) Add `target` attribute in buttons of `TextWithButtonsSchema`.
 
 ## [0.46.0] - 2026-03-17
 
diff --git a/packages/botonic-plugin-ai-agents/package.json b/packages/botonic-plugin-ai-agents/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@botonic/plugin-ai-agents",
-  "version": "0.46.0",
+  "version": "0.46.1",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
   "description": "Use AI Agents to generate your contents",
@@ -14,7 +14,7 @@
     "format": "biome format --write src/ tests/"
   },
   "dependencies": {
-    "@botonic/core": "^0.46.0",
+    "@botonic/core": "^0.46.1",
     "@openai/agents": "^0.3.9",
     "axios": "^1.13.6",
     "openai": "^6.0.0",
diff --git a/packages/botonic-plugin-ai-agents/src/structured-output/text-with-buttons.ts b/packages/botonic-plugin-ai-agents/src/structured-output/text-with-buttons.ts
@@ -12,6 +12,14 @@ export const TextWithButtonsSchema = z
         z.object({
           text: z.string(),
           url: z.string().nullable().optional(),
+          target: z
+            .enum(['_blank', '_self'])
+            .default('_blank')
+            .nullable()
+            .optional()
+            .describe(
+              'The target of the button when it has an url. If not provided, it will default to _blank.'
+            ),
         })
       ),
     }),
diff --git a/packages/botonic-plugin-flow-builder/CHANGELOG.md b/packages/botonic-plugin-flow-builder/CHANGELOG.md
@@ -25,6 +25,7 @@ All notable changes to Botonic will be documented in this file.
 ### Added
 
 - [PR-3186](https://github.com/hubtype/botonic/pull/3186) Allow AI Agent to return Flow Builder contents directly.
+- [PR-3188](https://github.com/hubtype/botonic/pull/3188) Allow `target` attribute in buttons coming from AI Agent responses.
 
 ## [0.46.1] - 2026-03-18
 
diff --git a/packages/botonic-plugin-flow-builder/package.json b/packages/botonic-plugin-flow-builder/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@botonic/plugin-flow-builder",
-  "version": "0.46.1",
+  "version": "0.46.2",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
   "description": "Use Flow Builder to show your contents",
diff --git a/packages/botonic-plugin-flow-builder/src/content-fields/flow-button.tsx b/packages/botonic-plugin-flow-builder/src/content-fields/flow-button.tsx
@@ -92,11 +92,13 @@ export class FlowButton extends ContentFieldsBase {
     text: string
     payload?: string
     url?: string
+    target?: string
   }): FlowButton {
     const newButton = new FlowButton(button.id)
     newButton.text = button.text
     if (button.url) {
       newButton.url = button.url
+      newButton.target = button.target
     } else {
       newButton.payload = button.payload
     }
diff --git a/packages/botonic-plugin-flow-builder/src/content-fields/flow-text.tsx b/packages/botonic-plugin-flow-builder/src/content-fields/flow-text.tsx
@@ -57,6 +57,7 @@ export class FlowText extends ContentFieldsBase {
             id: `${id}-button-${buttonIndex}`,
             text: button.text,
             url: button.url,
+            target: button.target,
             payload:
               button.payload ||
               `${EMPTY_PAYLOAD}${SOURCE_INFO_SEPARATOR}${buttonIndex}`,
diff --git a/packages/botonic-plugin-flow-builder/tests/messages/flow-text.test.ts b/packages/botonic-plugin-flow-builder/tests/messages/flow-text.test.ts
@@ -1,7 +1,7 @@
-import { INPUT } from '@botonic/core'
+import { INPUT, type TextWithButtonsMessage } from '@botonic/core'
 import { describe, test } from '@jest/globals'
 
-import type { FlowText } from '../../src/content-fields/index'
+import { FlowText } from '../../src/content-fields/flow-text'
 import { ProcessEnvNodeEnvs } from '../../src/types'
 import { basicFlow } from '../helpers/flows/basic'
 import { webviewFlow } from '../helpers/flows/webview'
@@ -72,3 +72,39 @@ describe('Check the contents and logic of a text node', () => {
     })
   })
 })
+
+describe('FlowText.fromAIAgent renders buttons with target attribute', () => {
+  test('URL buttons rendered from AI agent responses include the target prop', () => {
+    const textWithButtons: TextWithButtonsMessage = {
+      type: 'textWithButtons',
+      content: {
+        text: 'Here are some links:',
+        buttons: [
+          {
+            text: 'Open in same tab',
+            url: 'https://www.hubtype.com',
+            target: '_self',
+          },
+          {
+            text: 'Open in new tab',
+            url: 'https://www.google.com',
+            target: '_blank',
+          },
+          { text: 'Payload button' },
+        ],
+      },
+    }
+
+    const rendered = FlowText.fromAIAgent('test-id', textWithButtons)
+    const buttons = rendered.props.children[1]
+
+    expect(buttons[0].props.target).toBe('_self')
+    expect(buttons[0].props.url).toBe('https://www.hubtype.com')
+
+    expect(buttons[1].props.target).toBe('_blank')
+    expect(buttons[1].props.url).toBe('https://www.google.com')
+
+    expect(buttons[2].props.target).toBeUndefined()
+    expect(buttons[2].props.url).toBeUndefined()
+  })
+})

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@botonic/core",`
`3`		`- "version": "0.46.0",`
	`3`	`+ "version": "0.46.1",`
`4`	`4`	`"license": "MIT",`
`5`	`5`	`"description": "Build Chatbots using React",`
`6`	`6`	`"main": "./lib/cjs/index.js",`
Original file line number	Diff line number	Diff line change
`@@ -14,6 +14,7 @@ export interface Button {`
`14`	`14`	`text: string`
`15`	`15`	`payload?: string`
`16`	`16`	`url?: string`
	`17`	`+ target?: string`
`17`	`18`	`}`
`18`	`19`	`export interface ButtonWithPayload {`
`19`	`20`	`text: string`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@botonic/plugin-flow-builder",`
`3`		`- "version": "0.46.1",`
	`3`	`+ "version": "0.46.2",`
`4`	`4`	`"main": "./lib/cjs/index.js",`
`5`	`5`	`"module": "./lib/esm/index.js",`
`6`	`6`	`"description": "Use Flow Builder to show your contents",`