diff --git a/README.md b/README.md
index dab9eb6c..32393672 100644
--- a/README.md
+++ b/README.md
@@ -56,6 +56,7 @@ AgentScope Studio is a powerful **local visualization toolkit** designed for dev
- **Tracing**: OpenTelemetry-based trace visualization for LLM calls, token usage, and agent invocations
- **Agent Evaluation**: Evaluation-oriented analysis from a statistical perspective
- **Built-in Copilot (Friday)**: A development assistant, playground for rapid secondary development, and integration hub for advanced features
+- **Runtime Chat (Services)**: Integrate with [AgentScope Runtime](https://github.com/agentscope-ai/agentscope-runtime) to chat with deployed agents directly in Studio
),
diff --git a/packages/client/src/components/ui/button-group.tsx b/packages/client/src/components/ui/button-group.tsx
index 1937af25..c25b945d 100644
--- a/packages/client/src/components/ui/button-group.tsx
+++ b/packages/client/src/components/ui/button-group.tsx
@@ -10,9 +10,9 @@ const buttonGroupVariants = cva(
variants: {
orientation: {
horizontal:
- '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',
+ '[&>*:not(:first-of-type)]:rounded-l-none [&>*:not(:first-of-type)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',
vertical:
- 'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
+ 'flex-col [&>*:not(:first-of-type)]:rounded-t-none [&>*:not(:first-of-type)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
},
},
defaultVariants: {
diff --git a/packages/client/src/i18n/en.json b/packages/client/src/i18n/en.json
index 533c005f..3c0b4136 100644
--- a/packages/client/src/i18n/en.json
+++ b/packages/client/src/i18n/en.json
@@ -52,6 +52,8 @@
"evaluation": "Evaluation",
"evaluation-history": "Evaluation History",
"friday": "Friday",
+ "services": "Services",
+ "runtime-chat": "Runtime Chat",
"github": "GitHub",
"hint": "Hint",
"home": "Home",
diff --git a/packages/client/src/i18n/zh.json b/packages/client/src/i18n/zh.json
index 44bb5645..4ac375f7 100644
--- a/packages/client/src/i18n/zh.json
+++ b/packages/client/src/i18n/zh.json
@@ -52,6 +52,8 @@
"evaluation": "评测",
"evaluation-history": "评测历史",
"friday": "Friday",
+ "services": "服务",
+ "runtime-chat": "Runtime WebUI",
"github": "GitHub",
"hint": "提示",
"home": "主页",
diff --git a/packages/client/src/main.tsx b/packages/client/src/main.tsx
index 636ed718..83d0caf2 100644
--- a/packages/client/src/main.tsx
+++ b/packages/client/src/main.tsx
@@ -4,6 +4,21 @@ import './index.css';
import App from './App.tsx';
import './i18n/config';
+// Suppress known harmless warnings from third-party libraries (antd-style/emotion, React/antd)
+// 1. emotion `:first-child` SSR warning — irrelevant for this client-side SPA
+// 2. React `flushSync` lifecycle warning — triggered internally by antd components
+const _origConsoleError = console.error;
+console.error = (...args: unknown[]) => {
+ const msg = typeof args[0] === 'string' ? args[0] : '';
+ if (msg.includes(':first-child') && msg.includes('potentially unsafe')) {
+ return;
+ }
+ if (msg.includes('flushSync') && msg.includes('lifecycle')) {
+ return;
+ }
+ _origConsoleError.apply(console, args);
+};
+
createRoot(document.getElementById('root')!).render(
;
+ onChange?: (values: Record) => void;
+ onClose?: () => void;
+}
+
+/** Get a nested value from an object using a dot-separated path */
+function getNestedValue(obj: Record, path: string): unknown {
+ return path.split('.').reduce((o, k) => {
+ if (o && typeof o === 'object')
+ return (o as Record)[k];
+ return undefined;
+ }, obj);
+}
+
+/** Set a nested value on a cloned object using a dot-separated path */
+function setNestedValue(
+ obj: Record,
+ path: string,
+ value: unknown,
+): Record {
+ const clone = structuredClone(obj);
+ const keys = path.split('.');
+ let current: Record = clone;
+ for (let i = 0; i < keys.length - 1; i++) {
+ if (!current[keys[i]] || typeof current[keys[i]] !== 'object') {
+ current[keys[i]] = {};
+ }
+ current = current[keys[i]] as Record;
+ }
+ current[keys[keys.length - 1]] = value;
+ return clone;
+}
+
+/** A thin wrapper around a form field */
+function FormField({
+ label,
+ children,
+}: {
+ label: string;
+ children: React.ReactNode;
+}) {
+ return (
+
+ {label}
+ {children}
+
+ );
+}
+
+const OptionsEditor: React.FC = ({
+ value,
+ onChange,
+ onClose,
+}) => {
+ const [formData, setFormData] = useState>(() =>
+ structuredClone(value ?? {}),
+ );
+
+ useEffect(() => {
+ if (value) setFormData(structuredClone(value));
+ }, [value]);
+
+ const update = useCallback((path: string, v: unknown) => {
+ setFormData((prev) => setNestedValue(prev, path, v));
+ }, []);
+
+ const handleSave = () => {
+ onChange?.(formData);
+ onClose?.();
+ };
+
+ const handleReset = () => {
+ if (value) setFormData(structuredClone(value));
+ };
+
+ // --- prompts helpers ---
+ const prompts =
+ (getNestedValue(formData, 'welcome.prompts') as
+ | { value: string }[]
+ | undefined) ?? [];
+
+ const addPrompt = () => {
+ update('welcome.prompts', [...prompts, { value: '' }]);
+ };
+
+ const removePrompt = (idx: number) => {
+ update(
+ 'welcome.prompts',
+ prompts.filter((_, i) => i !== idx),
+ );
+ };
+
+ const updatePrompt = (idx: number, v: string) => {
+ const next = [...prompts];
+ next[idx] = { value: v };
+ update('welcome.prompts', next);
+ };
+
+ return (
+
+
+
+ {/* ---- Theme ---- */}
+
+
+ Theme
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ darkMode
+
+ update('theme.darkMode', v)}
+ />
+
+
+
+
+
+
+
+
+ {/* ---- Sender ---- */}
+
+
+ Sender
+
+
+
+
+
+
+
+
+
+ {/* ---- Welcome ---- */}
+
+
+ Welcome
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {prompts.map((p, idx) => (
+
+
+ updatePrompt(idx, e.target.value)
+ }
+ />
+
addPrompt()}
+ >
+
+
removePrompt(idx)}
+ >
+
+
+ ))}
+ {prompts.length === 0 && (
+
+
+ )}
+
+
+ {/* ---- API ---- */}
+
+
+ API
+
+
+
+
+
+
+
+
+
+
+ {/* Footer */}
+
+
+ Reset
+
+
+ Save
+
+
+
;
+ onChange?: (values: Record) => void;
+}
+
+export default function OptionsPanel(props: OptionsPanelProps) {
+ const [open, setOpen] = useState(false);
+
+ return (
+
+
+
+
+
+
+
+ Settings
+
+ ) => {
+ setOpen(false);
+ props.onChange?.(v);
+ }}
+ onClose={() => setOpen(false)}
+ />
+
+
+ );
+}
diff --git a/packages/client/src/pages/ServicesPage/RuntimeChatPage/defaultConfig.ts b/packages/client/src/pages/ServicesPage/RuntimeChatPage/defaultConfig.ts
new file mode 100644
index 00000000..f68ea68c
--- /dev/null
+++ b/packages/client/src/pages/ServicesPage/RuntimeChatPage/defaultConfig.ts
@@ -0,0 +1,40 @@
+const defaultConfig = {
+ theme: {
+ colorPrimary: '#615CED',
+ darkMode: false,
+ prefix: 'as-studio-runtime-chat',
+ leftHeader: {
+ logo: 'https://img.alicdn.com/imgextra/i2/O1CN01lmoGYn1kjoXATy4PX_!!6000000004720-2-tps-200-200.png',
+ title: 'Runtime Chat',
+ },
+ },
+ sender: {
+ attachments: false,
+ maxLength: 10000,
+ disclaimer:
+ 'AI can also make mistakes, so please check carefully and use it with caution',
+ },
+ welcome: {
+ greeting: 'Hello, how can I help you today?',
+ description:
+ 'I am a helpful assistant that can help you with your questions.',
+ avatar: 'https://img.alicdn.com/imgextra/i2/O1CN01lmoGYn1kjoXATy4PX_!!6000000004720-2-tps-200-200.png',
+ prompts: [
+ {
+ value: 'Hello',
+ },
+ {
+ value: 'How are you?',
+ },
+ {
+ value: 'What can you do?',
+ },
+ ],
+ },
+ api: {
+ baseURL: '',
+ token: '',
+ },
+};
+
+export default defaultConfig;
diff --git a/packages/client/src/pages/ServicesPage/RuntimeChatPage/index.tsx b/packages/client/src/pages/ServicesPage/RuntimeChatPage/index.tsx
new file mode 100644
index 00000000..05e71b06
--- /dev/null
+++ b/packages/client/src/pages/ServicesPage/RuntimeChatPage/index.tsx
@@ -0,0 +1,107 @@
+import {
+ AgentScopeRuntimeWebUI,
+ IAgentScopeRuntimeWebUIOptions,
+} from '@agentscope-ai/chat';
+import OptionsPanel from './OptionsPanel';
+import { useMemo, useState, useEffect } from 'react';
+import sessionApi from './sessionApi';
+import defaultConfig from './defaultConfig';
+
+/** Custom left header element with controllable logo & title sizes */
+function LeftHeader({ logo, title }: { logo?: string; title?: string }) {
+ return (
+
+ {logo && (
+
+ )}
+ {title && (
+
+ {title}
+
+ )}
+
{
+ setOptionsConfig((prev: typeof optionsConfig) => ({
+ ...prev,
+ ...v,
+ }));
+ }}
+ />
+ );
+
+ // Build a custom leftHeader React element so we can control logo/title size
+ const leftHeaderConfig = (
+ optionsConfig as Record>
+ )?.theme?.leftHeader as { logo?: string; title?: string } | undefined;
+
+ const leftHeader = (
+ ) {
+ const index = this.sessionList.findIndex(
+ (item) => item.id === session.id,
+ );
+ if (index > -1) {
+ this.sessionList[index] = {
+ ...this.sessionList[index],
+ ...session,
+ };
+ localStorage.setItem(this.lsKey, JSON.stringify(this.sessionList));
+ }
+ return [...this.sessionList];
+ }
+
+ async createSession(session: Partial) {
+ session.id = Date.now().toString();
+ this.sessionList.unshift(session as IAgentScopeRuntimeWebUISession);
+ localStorage.setItem(this.lsKey, JSON.stringify(this.sessionList));
+ return [...this.sessionList];
+ }
+
+ async removeSession(session: Partial) {
+ this.sessionList = this.sessionList.filter(
+ (item) => item.id !== session.id,
+ );
+ localStorage.setItem(this.lsKey, JSON.stringify(this.sessionList));
+ return [...this.sessionList];
+ }
+}
+
+export default new SessionApi();
diff --git a/packages/client/src/pages/ServicesPage/index.tsx b/packages/client/src/pages/ServicesPage/index.tsx
new file mode 100644
index 00000000..ab2b440b
--- /dev/null
+++ b/packages/client/src/pages/ServicesPage/index.tsx
@@ -0,0 +1,21 @@
+import { memo } from 'react';
+import { Route, Routes } from 'react-router-dom';
+
+import RuntimeChatPage from '@/pages/ServicesPage/RuntimeChatPage';
+import { RouterPath } from '@/pages/RouterPath.ts';
+
+const ServicesPage = () => {
+ return (
+
+
+
+
+ );
+};
+
+export default memo(ServicesPage);