From 8ad47bf242e228535b5730d57bf6981fa0e3e499 Mon Sep 17 00:00:00 2001
From: PentaFDevs <149094373+PentaFrame-Development@users.noreply.github.com>
Date: Wed, 25 Feb 2026 06:39:02 +0100
Subject: [PATCH] feat: add 'Open in new tab' button for agents (#13044)
- Add new button in agent management dropdown to open agent in new tab
- Implement token-based authentication for shared agent access
- Add translations for 9 languages (en, zh, zh-tw, de, fr, it, ru,
pt-br, vi)
- Keep existing 'Embed into webpage' functionality intact
### What problem does this PR solve?
This allows users to open agents in a separate tab to work in background
while continuing to use other parts of the application.
### Type of change
- [x] New Feature (non-breaking change which adds functionality)
---
docs/guides/agent/embed_agent_into_webpage.md | 11 +++++++++--
web/src/components/embed-dialog/index.tsx | 15 +++++++++++++++
web/src/locales/de.ts | 1 +
web/src/locales/en.ts | 1 +
web/src/locales/fr.ts | 1 +
web/src/locales/it.ts | 1 +
web/src/locales/pt-br.ts | 1 +
web/src/locales/ru.ts | 1 +
web/src/locales/vi.ts | 1 +
web/src/locales/zh-traditional.ts | 1 +
web/src/locales/zh.ts | 1 +
web/src/pages/agent/index.tsx | 1 -
12 files changed, 33 insertions(+), 3 deletions(-)
diff --git a/docs/guides/agent/embed_agent_into_webpage.md b/docs/guides/agent/embed_agent_into_webpage.md
index 97dae8b66c..4676443e16 100644
--- a/docs/guides/agent/embed_agent_into_webpage.md
+++ b/docs/guides/agent/embed_agent_into_webpage.md
@@ -11,7 +11,14 @@ You can use iframe to embed an agent into a third-party webpage.
1. Before proceeding, you must [acquire an API key](../models/llm_api_key_setup.md); otherwise, an error message would appear.
2. On the **Agent** page, click an intended agent to access its editing page.
-3. Click **Management > Embed into webpage** on the top right corner of the canvas to show the **iframe** window:
-4. Copy the iframe and embed it into your webpage.
+3. Click **Management > Embed into webpage** on the top right corner of the canvas to show the **Embed into webpage** dialog.
+4. Configure your embed options:
+ - **Embed Type**: Choose between Fullscreen Chat (traditional iframe) or Floating Widget (Intercom-style)
+ - **Theme**: Select Light or Dark theme (for fullscreen mode)
+ - **Hide avatar**: Toggle avatar visibility
+ - **Enable Streaming Responses**: Enable streaming for widget mode
+ - **Locale**: Select the language for the embedded agent
+5. Copy the generated iframe code and embed it into your webpage.
+6. **Chat in new tab**: Click the "Chat in new tab" button to preview the agent in a separate browser tab with your configured settings. This allows you to test the agent before embedding it.
\ No newline at end of file
diff --git a/web/src/components/embed-dialog/index.tsx b/web/src/components/embed-dialog/index.tsx
index 341abd0342..27e669457a 100644
--- a/web/src/components/embed-dialog/index.tsx
+++ b/web/src/components/embed-dialog/index.tsx
@@ -1,6 +1,7 @@
import CopyToClipboard from '@/components/copy-to-clipboard';
import HighLightMarkdown from '@/components/highlight-markdown';
import { SelectWithSearch } from '@/components/originui/select-with-search';
+import { Button } from '@/components/ui/button';
import {
Dialog,
DialogContent,
@@ -28,6 +29,7 @@ import { useTranslate } from '@/hooks/common-hooks';
import { IModalProps } from '@/interfaces/common';
import { Routes } from '@/routes';
import { zodResolver } from '@hookform/resolvers/zod';
+import { ExternalLink } from 'lucide-react';
import { memo, useCallback, useMemo } from 'react';
import { useForm, useWatch } from 'react-hook-form';
import { z } from 'zod';
@@ -146,6 +148,11 @@ function EmbedDialog({
}
}, [generateIframeSrc, values]);
+ const handleOpenInNewTab = useCallback(() => {
+ const iframeSrc = generateIframeSrc();
+ window.open(iframeSrc, '_blank');
+ }, [generateIframeSrc]);
+
return (