@alicloud/appflow-chat 0.0.4 → 0.0.5-beta.1

package/dist/types/index.d.ts

@@ -1,5 +1,73 @@
+import { A2UIViewerProps } from '@a2ui/react';
+import { ComponentRegistry } from '@a2ui/react';
 import { default as default_2 } from 'react';
+import { OnActionCallback } from '@a2ui/react';
 import { Provider } from 'react';
+import { ServerToClientMessage } from '@a2ui/react';
+
+/** A2UI 协议消息（v0.8 格式，透传给 @a2ui/react 处理） */
+export declare type A2UIMessage = ServerToClientMessage;
+
+/**
+ * A2UIStaticViewer - A2UI 静态 JSON 渲染组件
+ *
+ * 用于直接从静态的组件定义和数据渲染 UI，无需流式消息。
+ * 适用于已有完整 A2UI 组件树的场景。
+ *
+ * @example
+ * ```tsx
+ * const components = [
+ *   { id: 'root', component: { Card: { child: 'text' } } },
+ *   { id: 'text', component: { Text: { text: { path: '/message' } } } },
+ * ];
+ *
+ * <A2UIStaticViewer
+ *   root="root"
+ *   components={components}
+ *   data={{ message: 'Hello World!' }}
+ *   onAction={(action) => console.log('Action:', action)}
+ * />
+ * ```
+ */
+export declare const A2UIStaticViewer: default_2.FC<A2UIStaticViewerProps>;
+
+/** A2UIViewer 的 Props，用于静态 JSON 渲染场景 */
+export declare type A2UIStaticViewerProps = A2UIViewerProps;
+
+/**
+ * A2UISurface - A2UI 声明式 UI 渲染组件（流式消息场景）
+ *
+ * 接收 Agent 发送的 A2UI 协议消息数组，增量处理并渲染对应的 Surface。
+ * 内部封装了 A2UIProvider，可直接作为 BubbleContent 的 children 使用。
+ *
+ * @example
+ * ```tsx
+ * // 作为 BubbleContent 的 children 使用
+ * <BubbleContent content={content} status={status}>
+ *   <A2UISurface
+ *     messages={a2uiMessages}
+ *     surfaceId="main"
+ *     onAction={(msg) => console.log('用户操作:', msg)}
+ *   />
+ * </BubbleContent>
+ * ```
+ */
+export declare const A2UISurface: default_2.FC<A2UISurfaceProps>;
+
+export declare interface A2UISurfaceProps {
+    /** A2UI JSON 消息数组（来自 Agent 的响应） */
+    messages: A2UIMessage[];
+    /** 渲染的 Surface ID（默认 'main'） */
+    surfaceId?: string;
+    /** 用户在 A2UI 组件上的交互回调 */
+    onAction?: OnActionCallback;
+    /** 自定义组件注册表（可选，默认使用内置组件） */
+    registry?: ComponentRegistry;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: default_2.CSSProperties;
+}
 
 /**
  * AssociationPropertyMetadata 类型定义
@@ -320,6 +388,21 @@ export declare interface CustomParamsRendererProps extends UploadConfig {
     errors?: Record<string, string>;
 }
 
+/** 递归生成所有叶子节点的扁平路径联合类型 */
+declare type DeepKey<T, P extends string = ''> = {
+    [K in keyof T & string]: T[K] extends object ? DeepKey<T[K], `${P}${P extends '' ? '' : '.'}${K}`> : `${P}${P extends '' ? '' : '.'}${K}`;
+}[keyof T & string];
+
+/** 深度可选，用于 LocaleProvider 的 overrides 字段 */
+export declare type DeepPartial<T> = {
+    [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
+};
+
+/** 把所有叶子节点的值类型统一为 string，并去掉 readonly */
+declare type DeepStringify<T> = {
+    -readonly [K in keyof T]: T[K] extends object ? DeepStringify<T[K]> : string;
+};
+
 export declare type DocReferenceItem = SourceItem;
 
 /**
@@ -357,6 +440,8 @@ export declare interface DocReferencesProps {
 
 declare type EnumDisplayStyle = 'select' | 'checkbox' | 'radio' | 'multi-select';
 
+export declare const enUS: Locale;
+
 declare type ExtendedParamType = 'time' | 'file';
 
 declare type FileSubType = 'default' | 'jpg' | 'png' | 'svg' | 'doc' | 'ppt' | 'excel' | 'txt' | 'markdown' | 'zip';
@@ -367,6 +452,12 @@ declare type FileSubType = 'default' | 'jpg' | 'png' | 'svg' | 'doc' | 'ppt' | '
  */
 declare type FileUploader = (file: Blob, uploadUrl: string) => Promise<void>;
 
+/** 获取当前全局 locale */
+export declare function getGlobalLocale(): Locale;
+
+/** 获取当前全局 locale 名称 */
+export declare function getGlobalLocaleName(): string;
+
 /**
  * HistoryCard 历史卡片组件 (SDK 版本)
  * 用于展示历史对话中的 card 类型消息（只读模式）
@@ -448,6 +539,40 @@ export declare const loadEchartsScript: () => Promise<void>;
 
 export declare const loadMermaidScript: () => Promise<void>;
 
+/** 词条对象类型：保留 zhCN 的结构，但叶子节点统一为 string */
+export declare type Locale = DeepStringify<typeof zhCN>;
+
+export declare const LocaleContext: default_2.Context<LocaleContextValue>;
+
+export declare interface LocaleContextValue {
+    locale: Locale;
+    localeName: string;
+}
+
+/**
+ * LocaleProvider
+ *
+ * 用法示例：
+ * ```tsx
+ * import { LocaleProvider, enUS } from '@alicloud/appflow-chat';
+ *
+ * <LocaleProvider locale={enUS} localeName="en-US">
+ *   <App />
+ * </LocaleProvider>
+ * ```
+ */
+export declare const LocaleProvider: default_2.FC<LocaleProviderProps>;
+
+export declare interface LocaleProviderProps {
+    /** 完整 locale 对象，默认使用内置 zhCN */
+    locale?: Locale;
+    /** 语言标识，如 'zh-CN' / 'en-US' */
+    localeName?: string;
+    /** 部分覆盖：在选定 locale 基础上 deep merge 自定义文案 */
+    overrides?: DeepPartial<Locale>;
+    children: default_2.ReactNode;
+}
+
 /**
  * MarkdownRenderer - Markdown渲染组件
  *
@@ -530,14 +655,18 @@ export declare interface MessageBubbleProps {
     onReferenceClick?: (item: DocReferenceItem) => void;
     /** 点击网页搜索结果回调（不传则使用默认实现） */
     onWebSearchClick?: (items: DocReferenceItem[]) => void;
-    /** 事件类型（用于特殊消息如 humanVerify、historyCard） */
-    eventType?: 'humanVerify' | 'historyCard';
+    /** 事件类型（用于特殊消息如 humanVerify、historyCard、a2ui） */
+    eventType?: 'humanVerify' | 'historyCard' | 'a2ui';
     /** HumanVerify 相关数据 */
     humanVerifyData?: HumanVerifyData;
     /** HistoryCard 相关数据（历史对话中的审核卡片） */
     historyCardData?: HistoryCardData;
     /** HumanVerify 提交回调 */
     onHumanVerifySubmit?: (data: HumanVerifySubmitData) => void;
+    /** A2UI 消息数组（Agent 生成的声明式 UI 描述） */
+    a2uiMessages?: A2UIMessage[];
+    /** A2UI 用户交互回调 */
+    onA2UIAction?: (action: any) => void;
 }
 
 export declare interface ModelCapabilities {
@@ -672,6 +801,9 @@ export declare interface RichMessageBubbleProps {
     onWebSearchClick?: (items: DocReferenceItem[]) => void;
 }
 
+/** 设置全局 locale，由 LocaleProvider 在挂载/更新时调用 */
+export declare function setGlobalLocale(locale: Locale, localeName?: string): void;
+
 /**
  * ChatService - 独立的聊天服务类
  * 用于自定义UI场景，不依赖React
@@ -744,6 +876,21 @@ export declare interface SourceItem {
 
 declare type TimeSubType = 'year-month' | 'year-month-day' | 'datetime';
 
+/**
+ * 全局翻译函数（非 Hook 版本）
+ *
+ * @example
+ *   translate('common.loading') // '加载中...'
+ *   translate('humanVerify.placeholder.input', { title: '名称' }) // '请输入名称'
+ */
+export declare function translate(key: TranslationKey, params?: TranslationParams): string;
+
+/** 所有合法的扁平 key 路径，如 'common.loading' | 'humanVerify.placeholder.input' */
+export declare type TranslationKey = DeepKey<typeof zhCN>;
+
+/** 插值参数 */
+export declare type TranslationParams = Record<string, string | number>;
+
 /**
  * 上传配置
  */
@@ -787,6 +934,24 @@ export declare const useCustomParamsRenderer: (schema: CustomParamSchema) => {
 
 export declare const useRichBubbleContext: () => RichBubbleContextValue;
 
+/**
+ * 在 React 组件内消费国际化文案
+ *
+ * @example
+ *   const { t } = useTranslation();
+ *   <Input placeholder={t('humanVerify.placeholder.input', { title: '名称' })} />
+ */
+export declare function useTranslation(): UseTranslationResult;
+
+export declare interface UseTranslationResult {
+    /** 翻译函数 */
+    t: (key: TranslationKey, params?: TranslationParams) => string;
+    /** 当前 locale 对象 */
+    locale: Locale;
+    /** 当前语言标识 */
+    localeName: string;
+}
+
 /**
  * 校验 CustomParams 的值
  * @param schema Schema 定义
@@ -894,4 +1059,80 @@ export declare interface WebSearchPanelProps {
     style?: default_2.CSSProperties;
 }
 
+/**
+ * 中文词条（默认语言）
+ *
+ * 该文件作为 Locale 类型的基准结构，所有其他语言文件必须实现相同的 key 结构。
+ * 新增文案时优先在此处添加，再补齐其他语言文件。
+ */
+export declare const zhCN: {
+    readonly common: {
+        readonly loading: "加载中...";
+        readonly confirm: "确定";
+        readonly cancel: "取消";
+        readonly submit: "提交";
+        readonly retry: "重试";
+        readonly copy: "复制";
+        readonly copied: "已复制";
+        readonly placeholderSelect: "请选择";
+    };
+    readonly humanVerify: {
+        readonly requiredAll: "请填写所有必填项";
+        readonly submitted: "已提交";
+        readonly pending: "待提交";
+        readonly placeholder: {
+            readonly input: "请输入{title}";
+            readonly select: "请选择";
+        };
+        readonly file: {
+            readonly supportAll: "支持所有文件格式";
+            readonly supportFormats: "支持 {formats} 格式";
+            readonly uploadButton: "选择文件";
+            readonly uploading: "上传中";
+            readonly upload: "上传";
+            readonly defaultFileName: "文件";
+            readonly maxSizeError: "文件大小不能超过 {size}";
+            readonly uploadFailed: "文件上传失败";
+            readonly tokenFailed: "获取上传凭证失败";
+            readonly uploaderNotConfigured: "上传功能未配置";
+            readonly uploadMethodNotConfigured: "文件上传方法未配置";
+            readonly getFileIdFailed: "获取文件ID失败";
+        };
+    };
+    readonly webSearch: {
+        readonly title: "搜索结果";
+        readonly foundPages: "已搜索到{count}个网页";
+    };
+    readonly source: {
+        readonly title: "参考资料";
+        readonly answerFrom: "回答来源：";
+        readonly imageFrom: "图片来源：";
+    };
+    readonly rich: {
+        readonly stepLabel: "步骤{index}:";
+        readonly emptyContent: "暂无内容";
+    };
+    readonly markdown: {
+        readonly copyCode: "复制代码";
+        readonly copied: "已复制！";
+        readonly copy: "复制";
+        readonly copiedShort: "已复制";
+        readonly deepThinking: "深度思考";
+        readonly chartLoading: "图表加载中...";
+        readonly tableLoading: "表格加载中...";
+        readonly tableLoadFailed: "表格数据加载失败，请检查数据格式";
+        readonly chartLoadFailed: "图表数据加载失败，请检查数据格式";
+        readonly mermaidLoadFailed: "Mermaid 库加载失败";
+        readonly mermaidNotLoaded: "Mermaid 未正确加载";
+        readonly mermaidRenderFailed: "Mermaid 图表渲染失败";
+    };
+    readonly message: {
+        readonly like: "点赞";
+        readonly dislike: "点踩";
+        readonly regenerate: "重新生成";
+        readonly copy: "复制";
+        readonly copied: "已复制";
+    };
+};
+
 export { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alicloud/appflow-chat",
-  "version": "0.0.4",
+  "version": "0.0.5-beta.1",
   "description": "Appflow-Chat AI聊天机器人组件库，提供聊天服务和UI组件",
   "type": "module",
   "main": "./dist/appflow-chat.cjs.js",
@@ -58,6 +58,8 @@
     "vite-plugin-dts": "^4.3.0"
   },
   "peerDependencies": {
+    "@a2ui/react": "^0.8.0",
+    "@a2ui/web_core": "^0.8.0",
     "antd": "^5.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"

package/src/components/A2UIRenderer/A2UIRenderer.tsx

@@ -0,0 +1,181 @@
+/**
+ * A2UISurface - A2UI 声明式 UI 渲染组件
+ * 
+ * 基于 Google A2UI 协议，将 Agent 生成的声明式 JSON 消息
+ * 渲染为原生 React 组件。支持流式增量更新和自定义组件注册。
+ * 
+ */
+
+import React, { useEffect, useRef, useCallback } from 'react';
+import styled from 'styled-components';
+import {
+  A2UIProvider,
+  A2UIRenderer,
+  A2UIViewer,
+  useA2UI,
+  initializeDefaultCatalog,
+  ComponentRegistry,
+} from '@a2ui/react';
+import type {
+  ServerToClientMessage,
+  OnActionCallback,
+  A2UIViewerProps,
+} from '@a2ui/react';
+
+// 初始化默认组件目录（全局只需执行一次）
+initializeDefaultCatalog();
+
+// ==================== Types ====================
+
+/** A2UI 协议消息（v0.8 格式，透传给 @a2ui/react 处理） */
+export type A2UIMessage = ServerToClientMessage;
+
+export interface A2UISurfaceProps {
+  /** A2UI JSON 消息数组（来自 Agent 的响应） */
+  messages: A2UIMessage[];
+  /** 渲染的 Surface ID（默认 'main'） */
+  surfaceId?: string;
+  /** 用户在 A2UI 组件上的交互回调 */
+  onAction?: OnActionCallback;
+  /** 自定义组件注册表（可选，默认使用内置组件） */
+  registry?: ComponentRegistry;
+  /** 自定义类名 */
+  className?: string;
+  /** 自定义样式 */
+  style?: React.CSSProperties;
+}
+
+/** A2UIViewer 的 Props，用于静态 JSON 渲染场景 */
+export type A2UIStaticViewerProps = A2UIViewerProps;
+
+// ==================== Styled Components ====================
+
+const A2UIContainer = styled.div`
+  margin-top: 12px;
+  width: 100%;
+  max-width: 100%;
+`;
+
+// ==================== Internal Component ====================
+
+/**
+ * 内部组件：负责消息处理和 Surface 渲染
+ * 必须在 A2UIProvider 内部使用，以获取 useA2UI hook 的上下文
+ */
+const A2UISurfaceInner: React.FC<{
+  messages: A2UIMessage[];
+  surfaceId: string;
+  registry?: ComponentRegistry;
+  className?: string;
+  style?: React.CSSProperties;
+}> = ({ messages, surfaceId, registry, className, style }) => {
+  const { processMessages, getSurface } = useA2UI();
+  const processedCountRef = useRef(0);
+
+  // 增量处理新到达的消息（支持流式场景）
+  useEffect(() => {
+    if (messages.length > processedCountRef.current) {
+      const newMessages = messages.slice(processedCountRef.current);
+      processMessages(newMessages);
+      processedCountRef.current = messages.length;
+    }
+  }, [messages, processMessages]);
+
+  // 当消息被清空时重置计数器
+  useEffect(() => {
+    if (messages.length === 0) {
+      processedCountRef.current = 0;
+    }
+  }, [messages.length]);
+
+  const surface = getSurface(surfaceId);
+
+  if (!surface) {
+    return null;
+  }
+
+  return (
+    <A2UIContainer className={className} style={style}>
+      <A2UIRenderer
+        surfaceId={surfaceId}
+        registry={registry}
+      />
+    </A2UIContainer>
+  );
+};
+
+// ==================== Exported Components ====================
+
+/**
+ * A2UISurface - A2UI 声明式 UI 渲染组件（流式消息场景）
+ * 
+ * 接收 Agent 发送的 A2UI 协议消息数组，增量处理并渲染对应的 Surface。
+ * 内部封装了 A2UIProvider，可直接作为 BubbleContent 的 children 使用。
+ * 
+ * @example
+ * ```tsx
+ * // 作为 BubbleContent 的 children 使用
+ * <BubbleContent content={content} status={status}>
+ *   <A2UISurface 
+ *     messages={a2uiMessages} 
+ *     surfaceId="main"
+ *     onAction={(msg) => console.log('用户操作:', msg)} 
+ *   />
+ * </BubbleContent>
+ * ```
+ */
+export const A2UISurface: React.FC<A2UISurfaceProps> = ({
+  messages,
+  surfaceId = 'main',
+  onAction,
+  registry,
+  className,
+  style,
+}) => {
+  const handleAction: OnActionCallback = useCallback((message) => {
+    onAction?.(message);
+  }, [onAction]);
+
+  return (
+    <A2UIProvider onAction={handleAction}>
+      <A2UISurfaceInner
+        messages={messages}
+        surfaceId={surfaceId}
+        registry={registry}
+        className={className}
+        style={style}
+      />
+    </A2UIProvider>
+  );
+};
+
+/**
+ * A2UIStaticViewer - A2UI 静态 JSON 渲染组件
+ * 
+ * 用于直接从静态的组件定义和数据渲染 UI，无需流式消息。
+ * 适用于已有完整 A2UI 组件树的场景。
+ * 
+ * @example
+ * ```tsx
+ * const components = [
+ *   { id: 'root', component: { Card: { child: 'text' } } },
+ *   { id: 'text', component: { Text: { text: { path: '/message' } } } },
+ * ];
+ * 
+ * <A2UIStaticViewer
+ *   root="root"
+ *   components={components}
+ *   data={{ message: 'Hello World!' }}
+ *   onAction={(action) => console.log('Action:', action)}
+ * />
+ * ```
+ */
+export const A2UIStaticViewer: React.FC<A2UIStaticViewerProps> = (props) => {
+  return (
+    <A2UIContainer>
+      <A2UIViewer {...props} />
+    </A2UIContainer>
+  );
+};
+
+export default A2UISurface;

package/src/components/A2UIRenderer/index.ts

@@ -0,0 +1 @@
+export { A2UISurface, A2UIStaticViewer, type A2UISurfaceProps, type A2UIStaticViewerProps, type A2UIMessage } from './A2UIRenderer';

package/src/components/HumanVerify/CustomParamsRenderer/ArrayField.tsx

@@ -3,6 +3,7 @@ import { Button, Input, InputNumber, Switch, Space } from 'antd';
 import { PlusOutlined, MinusOutlined } from '@ant-design/icons';
 import { ArrayFieldProps, CustomParamSchema, FileSubType, sortPropertiesByOrder } from './types';
 import styled from 'styled-components';
+import { useTranslation } from '../../../i18n';
 
 // 图片类型列表
 const IMAGE_TYPES: FileSubType[] = ['jpg', 'png', 'svg'];
@@ -191,7 +192,8 @@ export const ArrayField: React.FC<ArrayFieldProps> = ({
 }) => {
   const { Title, Description, Items } = schema;
   const displayTitle = Title || name;
-  
+  const { t } = useTranslation();
+
   // 计算当前数组的完整路径
   const currentPath = fieldPath ? `${fieldPath}.${name}` : name;
 
@@ -370,7 +372,7 @@ export const ArrayField: React.FC<ArrayFieldProps> = ({
     return sortedProperties.map(([propertyName, propertySchema]) => {
       const isRequired = itemRequired.includes(propertyName);
       return (
-        <React.Suspense key={propertyName} fallback={<div>加载中...</div>}>
+        <React.Suspense key={propertyName} fallback={<div>{t('common.loading')}</div>}>
           <FieldRenderer
             name={propertyName}
             schema={propertySchema}
@@ -392,7 +394,7 @@ export const ArrayField: React.FC<ArrayFieldProps> = ({
   // 渲染嵌套数组类型的数组项
   const renderArrayItemContent = (item: any, index: number) => {
     return (
-      <React.Suspense fallback={<div>加载中...</div>}>
+      <React.Suspense fallback={<div>{t('common.loading')}</div>}>
         <FieldRenderer
           name={`${name}[${index}]`}
           schema={Items}
@@ -412,7 +414,7 @@ export const ArrayField: React.FC<ArrayFieldProps> = ({
   // 渲染复杂类型的数组项（file、time、带枚举的类型）
   const renderComplexItemContent = (item: any, index: number) => {
     return (
-      <React.Suspense fallback={<div>加载中...</div>}>
+      <React.Suspense fallback={<div>{t('common.loading')}</div>}>
         <FieldRenderer
           name={`[${index}]`}
           schema={Items}

package/src/components/HumanVerify/CustomParamsRenderer/EnumField.tsx

@@ -3,6 +3,7 @@ import { Select, Checkbox, Radio } from 'antd';
 import type { RadioChangeEvent } from 'antd';
 import { EnumFieldProps, EnumDisplayStyle } from './types';
 import styled from 'styled-components';
+import { useTranslation } from '../../../i18n';
 
 const { Option } = Select;
 
@@ -70,7 +71,8 @@ export const EnumField: React.FC<EnumFieldProps> = ({
   disabled = false,
 }) => {
   const { Type } = schema;
-  
+  const { t } = useTranslation();
+
   // 优先从 AssociationPropertyMetadata 中读取，兼容旧的字段
   const enumValues = useMemo(() => {
     return schema.AssociationPropertyMetadata?.EnumValues || schema.EnumValues || [];
@@ -152,7 +154,7 @@ export const EnumField: React.FC<EnumFieldProps> = ({
               onChange={handleSelectChange}
               disabled={disabled}
               mode="multiple"
-              placeholder={`请选择`}
+              placeholder={t('common.placeholderSelect')}
               style={{ width: '100%' }}
               allowClear
             >
@@ -177,7 +179,7 @@ export const EnumField: React.FC<EnumFieldProps> = ({
               onChange={handleSelectChange}
               disabled={disabled}
               mode={isMultiple ? 'multiple' : undefined}
-              placeholder={`请选择`}
+              placeholder={t('common.placeholderSelect')}
               style={{ width: '100%' }}
               allowClear
             >

package/src/components/HumanVerify/CustomParamsRenderer/FieldRenderer.tsx

@@ -7,6 +7,7 @@ import { EnumField } from './EnumField';
 import styled from 'styled-components';
 import TimeField from './TimeField';
 import FileField from './FileField';
+import { useTranslation } from '../../../i18n';
 
 
 // ==================== Styled Components ====================
@@ -130,7 +131,8 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
 }) => {
   const { Type, Title, Description } = schema;
   const displayTitle = Title || name;
-  
+  const { t } = useTranslation();
+
   // 获取 Ant Design 的 prefixCls 配置，自动继承用户项目的 ConfigProvider 设置
   // 使用 ConfigProvider.ConfigContext 获取完整配置
   const configContext = useContext(ConfigProvider.ConfigContext);
@@ -176,7 +178,7 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
               value={value}
               onChange={(e) => handleChange(e.target.value)}
               disabled={disabled}
-              placeholder={`请输入${displayTitle}`}
+              placeholder={t('humanVerify.placeholder.input', { title: displayTitle })}
             />
           </InputWrapper>
         );
@@ -189,7 +191,7 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
               onChange={handleChange}
               disabled={disabled}
               style={{ width: '100%' }}
-              placeholder={`请输入${displayTitle}`}
+              placeholder={t('humanVerify.placeholder.input', { title: displayTitle })}
             />
           </InputWrapper>
         );
@@ -307,7 +309,7 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
               value={value}
               onChange={(e) => handleChange(e.target.value)}
               disabled={disabled}
-              placeholder={`请输入${displayTitle}`}
+              placeholder={t('humanVerify.placeholder.input', { title: displayTitle })}
             />
           </InputWrapper>
         );