fix(tarko): replace hardcoded texts with configurable title (#1174)

Author: ulivz

multimodal/omni-tars/core/README.md

@@ -83,7 +83,7 @@ const toolCallEngine = createComposableToolCallEngineFactory({
 });
 
 const agent = new ComposableAgent({
-  name: 'Omni TARS Agent',
+  name: 'Omni-TARS Agent',
   plugins: [mcpPlugin, guiPlugin, codePlugin],
   toolCallEngine,
 });

multimodal/omni-tars/omni-agent/tarko.config.ts

@@ -29,7 +29,7 @@ export default defineConfig({
   logLevel: LogLevel.DEBUG,
   webui: {
     logo: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/zyha-aulnh/ljhwZthlaukjlkulzlp/appicon.png',
-    title: 'Omni TARS Agent',
+    title: 'Omni-TARS Agent',
     subtitle: 'Offering seamless integration with a wide range of real-world tools.',
     welcomTitle: 'An multimodal AI agent',
     welcomePrompts: [

multimodal/tarko/agent-web-ui/src/common/constants/index.ts

@@ -80,3 +80,8 @@ export const CONNECTION_SETTINGS = {
   RECONNECTION_DELAY: 1000,
   RECONNECTION_DELAY_MAX: 5000,
 };
+
+/**
+ * Agent configuration
+ */
+export { getAgentTitle, getWebUIConfig, isContextualSelectorEnabled, getLogoUrl } from './shared';

multimodal/tarko/agent-web-ui/src/common/constants/shared.ts

@@ -0,0 +1,35 @@
+/**
+ * Shared configuration utilities for accessing dynamic web UI config
+ */
+
+/**
+ * Get web UI configuration from global window object
+ * This config is injected by the server at runtime
+ */
+export function getWebUIConfig() {
+  return window.AGENT_WEB_UI_CONFIG || {};
+}
+
+/**
+ * Get agent title from web UI config with fallback
+ */
+export function getAgentTitle(): string {
+  return getWebUIConfig().title || 'Agent';
+}
+
+/**
+ * Check if contextual selector is enabled
+ */
+export function isContextualSelectorEnabled(): boolean {
+  return getWebUIConfig().enableContextualSelector ?? false;
+}
+
+/**
+ * Get logo URL from web UI config with fallback
+ */
+export function getLogoUrl(): string {
+  return (
+    getWebUIConfig().logo ||
+    'https://lf3-static.bytednsdoc.com/obj/eden-cn/zyha-aulnh/ljhwZthlaukjlkulzlp/appicon.png'
+  );
+}

multimodal/tarko/agent-web-ui/src/entry.tsx

@@ -2,10 +2,10 @@ import './entry.css';
 
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { AgentTARSWebUI } from './standalone/app';
+import { AgentWebUI } from './standalone/app';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <AgentTARSWebUI />
+    <AgentWebUI />
   </React.StrictMode>,
 );

multimodal/tarko/agent-web-ui/src/standalone/app/index.tsx

@@ -6,12 +6,12 @@ import { useThemeInitialization } from '@/common/hooks/useThemeInitialization';
 import { HashRouter, BrowserRouter } from 'react-router-dom';
 
 /**
- * Agent TARS Web UI v2 - Entry Component
+ * Agent Web UI v2 - Entry Component
  *
  * Provides the Jotai atom provider and initializes theme based on user preference.
  * Uses the enhanced ReplayModeProvider that now handles both context provision and initialization.
  */
-export const AgentTARSWebUI: React.FC = () => {
+export const AgentWebUI: React.FC = () => {
   // Initialize theme based on user preference, defaulting to dark mode
   useThemeInitialization();
 

multimodal/tarko/agent-web-ui/src/standalone/chat/ChatPanel.tsx

@@ -10,6 +10,7 @@ import { groupedMessagesAtom, messagesAtom } from '@/common/state/atoms/message'
 import { replayStateAtom } from '@/common/state/atoms/replay';
 import { useReplayMode } from '@/common/hooks/useReplayMode';
 import { useReplay } from '@/common/hooks/useReplay';
+import { getAgentTitle } from '@/common/constants';
 
 import './ChatPanel.css';
 import { ResearchReportEntry } from './ResearchReportEntry';
@@ -196,7 +197,7 @@ export const ChatPanel: React.FC = () => {
               variants={itemVariants}
               className="text-xl font-display font-bold mb-3 text-gray-800 dark:text-gray-200"
             >
-              Welcome to Agent TARS
+              Welcome to {getAgentTitle()}
             </motion.h2>
             <motion.p
               variants={itemVariants}
@@ -211,7 +212,8 @@ export const ChatPanel: React.FC = () => {
             >
               <FiInfo className="mr-3 text-gray-400 flex-shrink-0" />
               <span>
-                TARS can help with tasks involving web search, browsing, and file operations.
+                {getAgentTitle()} can help with tasks involving web search, browsing, and file
+                operations.
               </span>
             </motion.div>
           </div>
@@ -298,7 +300,7 @@ export const ChatPanel: React.FC = () => {
                       <p className="text-gray-600 dark:text-gray-400 text-sm">
                         {isReplayMode && replayState.currentEventIndex === -1
                           ? 'Press play to start the replay or use the timeline to navigate'
-                          : 'Ask Agent TARS a question or provide a command to begin.'}
+                          : `Ask ${getAgentTitle()} a question or submit a task.`}
                       </p>
                     </>
                   )}

multimodal/tarko/agent-web-ui/src/standalone/chat/Message/components/MessageGroup.tsx

@@ -10,6 +10,7 @@ import { SkeletonLoader } from './SkeletonLoader';
 import { useAtomValue } from 'jotai';
 import { agentStatusAtom } from '@/common/state/atoms/ui';
 import { AgentProcessingPhase } from '@tarko/interface';
+import { getAgentTitle } from '@/common/constants';
 
 interface MessageGroupProps {
   messages: MessageType[];
@@ -96,7 +97,7 @@ export const MessageGroup: React.FC<MessageGroupProps> = ({ messages, isThinking
       {isThinking && (
         <div className="mt-4 space-y-4">
           <ThinkingAnimation
-            text={agentStatus.message || 'Agent TARS is running'}
+            text={agentStatus.message || `${getAgentTitle()} is running`}
             phase={agentStatus.phase}
             estimatedTime={agentStatus.estimatedTime}
             showProgress={

multimodal/tarko/agent-web-ui/src/standalone/chat/Message/components/ThinkingAnimation.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { motion } from 'framer-motion';
 import { FiCpu, FiZap, FiLoader, FiPlay } from 'react-icons/fi';
 import { AgentProcessingPhase } from '@tarko/interface';
+import { getAgentTitle } from '@/common/constants';
 
 interface ThinkingAnimationProps {
   size?: 'small' | 'medium' | 'large';
@@ -110,7 +111,7 @@ const getGradientClasses = (phase?: string) => {
 
 export const ThinkingAnimation: React.FC<ThinkingAnimationProps> = ({
   size = 'medium',
-  text = 'Agent TARS is running',
+  text = `${getAgentTitle()} is running`,
   className = '',
   phase,
   estimatedTime,

multimodal/tarko/agent-web-ui/src/standalone/chat/MessageInput/MessageAttachments.tsx

@@ -6,6 +6,7 @@ import { ImagePreview } from '../ImagePreview';
 import { ContextualTags } from '../ContextualTags';
 import { ContextualItem } from '../ContextualSelector';
 import { removeContextualItemAction } from '@/common/state/atoms/contextualSelector';
+import { isContextualSelectorEnabled } from '@/common/constants';
 
 interface MessageAttachmentsProps {
   images: ChatCompletionContentPart[];
@@ -26,10 +27,9 @@ export const MessageAttachments: React.FC<MessageAttachmentsProps> = ({
   const removeContextualItem = useSetAtom(removeContextualItemAction);
 
   // Check if contextual selector is enabled
-  const isContextualSelectorEnabled = window.AGENT_WEB_UI_CONFIG?.enableContextualSelector ?? false;
+  const contextualSelectorEnabled = isContextualSelectorEnabled();
 
-  const hasAttachments =
-    images.length > 0 || (isContextualSelectorEnabled && contextualItems.length > 0);
+  const hasAttachments = images.length > 0 || (contextualSelectorEnabled && contextualItems.length > 0);
 
   if (!hasAttachments) {
     return null;
@@ -38,7 +38,7 @@ export const MessageAttachments: React.FC<MessageAttachmentsProps> = ({
   return (
     <>
       {/* Contextual tags */}
-      {isContextualSelectorEnabled && contextualItems.length > 0 && (
+      {contextualSelectorEnabled && contextualItems.length > 0 && (
         <ContextualTags items={contextualItems} onRemove={removeContextualItem} />
       )}