步骤五：创建智能助手模板对话界面

在智能助手模板应用中，创建一个标准页面，用于组装智能助手模板对话界面。

在应用设计器的左侧导航栏中，选择“界面”。

单击页面后的

，设置标准页面的基本信息，单击“添加”。

图1 新建标准页面

表1 高级页面参数说明
参数	说明	示例
标签	输入标准页面的标签名，用于在页面显示，创建后可修改。取值范围：1~64个字符。	chat
名称	输入标准页面的名称，名称是标准页面在系统中的唯一标识，创建后不可修改。命名要求如下：长度不能超过64个字符，包括前缀命名空间的长度。名称前的内容为命名空间，在华为云Astro轻应用中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。必须以英文字母开头，只能由英文字母、数字或单下划线组成，且不能以下划线结尾。	chat

在标准页面的“扩展组件”中，拖拽步骤三：上传智能助手模板自定义组件中上传的组件至页面中。

图2 拖拽组件到页面中
选中agent-ui组件，在“属性 > 数据绑定”中单击，进入选择模型页面。
单击“新建模型”，输入模型名称（如message），“来源”选择“自定义”，单击“下一步”。

图3 设置模型基本信息
直接单击“下一步”，再单击“确定”，完成模型的创建。

图4 查看已创建的message模型
按照上述方法，创建模型loading。

图5 创建模型loading
选中message模型，单击“确定”，返回标准页面。

图6 选中message模型
单击“属性值绑定”后的“+”，“属性”选择“加载状态”，单击“模型字段”中的。

图7 添加属性值绑定
选择loading模型，单击“确定”，返回标准页面。

图8 选择loading模型
在“属性 > 基本属性”中，可根据自身需要设置品牌名、logo、背景图和对话头像等内容。

图9 设置基本属性
在“事件”页签中，单击发送消息后的“+”，进入添加动作页面。

图10 添加事件

将如下代码拷贝到自定义动作中，单击“创建”。

图11 新建自定义动作
点击放大

其中，“命名空间__dss”为服务编排的名称，请配置为3中创建服务编排的名称。

// 当前组件
const _component = context.$component.current;
//创建数组存储组件内对话记录
let conversationHistory =[];
conversationHistory = _component.getMessages();
//将组件内对话记录转化成deepseek需要的参数格式
const formattedHistory = conversationHistory.length === 0 
  ? [] 
  : conversationHistory.map((message, index) => ({
      role: index % 2 === 0 ? 'user' : 'assistant',
      content: message.content
    }));
$model.ref('loading').setData(true);//这里的loading为属性值绑定中创建绑定的模型
// 初始化Flow
var _flow = context.flow("命名空间__dss");//这里为创建的编排名称
// 设置Flow版本号
_flow.version("0.0.1");
// 运行Flow编排调用deepseek
_flow.run({ messages: formattedHistory}).then(function (res) {
    //获取deepseek的回答结果
    var ans =res["result"][0]["result"]["choices"][0]["message"]["content"];//这里的result为编排中创建的出参变量
    //去除回答结果中的思考过程
   var ans1 =ans.replace(/<think>[\s\S]*?<\/think>\n*/, "");
    $model.ref('message').setData(ans1);//这里的message为数据绑定中创建绑定的模型
    $model.ref('loading').setData(false);//这里的loading为属性值绑定中创建绑定的模型
    // TODO: Your business logic
});