feat: agent应用智能表单(出差表单)

eslint.config.js

@@ -24,6 +24,7 @@ export default [
         AnyObject: 'readonly',
         KnowledgeContentResultItem: 'readonly',
         DBChainResultItem: 'readonly',
+        PluginDisplayFormatType: 'readonly',
         ConversationMessageItem: 'readonly',
         ConversationMessageItemInfo: 'readonly',
         MittEvents: 'readonly',

src/components/execute-plugin-render/execute-plugin-render.vue

@@ -7,7 +7,7 @@ import MarkdownRender from '@/components/markdown-render/markdown-render.vue'
 import { useLayoutConfig } from '@/composables/useLayoutConfig'
 
 interface Props {
-  displayFormat: 'json' | 'markdown' | 'none'
+  displayFormat: PluginDisplayFormatType
   name: string
   arguments: string
   content: string
@@ -59,11 +59,12 @@ const parsedMarkdownPluginContent = computed(() => {
 <template>
   <div
     class="flex w-full flex-col bg-[#f3f5f9]"
-    :class="
-      isMobile ? 'rounded-[2.66667vw] px-[3.2vw] py-[2.66667vw] text-[3.2vw]' : 'rounded-[10px] px-[12px] py-[10px]'
-    "
+    :class="isMobile ? 'rounded-[2.66667vw] py-[2.66667vw] text-[3.2vw]' : 'rounded-[10px] py-[10px]'"
+  >
+    <div
+      class="flex flex-1 items-center justify-between gap-[10px] overflow-hidden"
+      :class="isMobile ? 'px-[3.2vw]' : 'px-[12px]'"
     >
-    <div class="flex flex-1 items-center justify-between gap-[10px] overflow-hidden">
       <div class="flex flex-1 items-center gap-[6px] overflow-hidden">
         <div
           v-show="pluginLoading"
@@ -91,13 +92,14 @@ const parsedMarkdownPluginContent = computed(() => {
       />
     </div>
 
+    <n-scrollbar style="max-height: 500px" :class="{ 'mt-[10px]': !isFolding }">
       <div
         class="flex transform flex-col overflow-x-auto duration-200 ease-in-out"
-      :class="isFolding ? 'h-0 overflow-hidden' : 'h-fit'"
+        :class="[isFolding ? 'h-0 overflow-hidden' : 'h-fit', isMobile ? 'px-[3.2vw]' : 'px-[12px]']"
       >
         <!-- json格式 -->
         <div v-if="displayFormat === 'json'">
-        <div class="mt-[10px]">
+          <div>
             <span
               class="rounded-theme inline-block bg-[#E8EAFF] text-[#0072FF]"
               :class="
@@ -128,16 +130,17 @@ const parsedMarkdownPluginContent = computed(() => {
 
         <!-- markdown格式 -->
         <div v-else-if="displayFormat === 'markdown'">
-        <div class="mt-[10px]">
+          <div>
             <MarkdownRender :raw-text-content="parsedMarkdownPluginContent" :font-size="isMobile ? '3.2vw' : '14px'" />
           </div>
         </div>
 
-      <!-- 其他格式 -->
-      <div v-else>
-        <span class="mt-[10px] break-all">{{ content }}</span>
+        <!-- none格式 -->
+        <div v-else-if="displayFormat === 'none'">
+          <span class="text-font-color break-all">{{ content }}</span>
         </div>
       </div>
+    </n-scrollbar>
   </div>
 </template>
 

src/composables/useEventSource.ts

@@ -8,7 +8,12 @@ import { languageKeyTransform } from '@/utils/language-key-transform'
 interface ResponseData {
   message: string
   reasoningContent: string
-  function: { displayFormat: 'json' | 'markdown' | 'none'; name: string; result: string; arguments: string }
+  function: {
+    displayFormat: PluginDisplayFormatType
+    name: string
+    result: string
+    arguments: string
+  }
   knowledgeContentResult: KnowledgeContentResultItem[]
   dbChainResult: DBChainResultItem[]
 }

src/views/multi-model-dialogue/components/footer-operation.vue

@@ -5,12 +5,14 @@ import { nanoid } from 'nanoid'
 import { throttle } from 'lodash-es'
 import { CloseSmall } from '@icon-park/vue-next'
 import CMessage from './c-message'
-import { MessageItemInterface, MultiModelDialogueItem, QuestionMessageItem } from '../types'
+import { MessageItemInterface, MultiModelDialogueItem, QuestionMessageItem, SmartFormTypes } from '../types'
 import { fetchEventStreamSource } from '../utils/fetch-event-stream-source'
 import { UploadStatus } from '@/enums/upload-status'
 import { ChannelType } from '@/enums/channel'
 import { useDialogueFile } from '@/composables/useDialogueFile'
 import { useUserStore } from '@/store/modules/user'
+import { smartFormTypeConverter } from './smart-forms/utils/smart-forms'
+import { SmartFormDisplayFormat } from './smart-forms/types/types'
 
 const { t } = useI18n()
 
@@ -29,6 +31,7 @@ const emit = defineEmits<{
   deleteMessageItem: [messageId: string, index: number]
   messageListScrollToBottom: [autoScrollBottom?: boolean]
   clearAllMessage: []
+  smartFormsStatusFreezeCheck: [value: SmartFormTypes, index: number]
 }>()
 
 const userStore = useUserStore()
@@ -205,6 +208,35 @@ function handleQuestionSubmit() {
 
         // 插件
         if (data.function && data.function.name) {
+          // 表单插件，展示表单内容
+          if (['travelForm'].includes(data.function.displayFormat)) {
+            emit(
+              'smartFormsStatusFreezeCheck',
+              smartFormTypeConverter(data.function.displayFormat as SmartFormDisplayFormat),
+              modelIndex,
+            )
+            emit(
+              'updateMessageItem',
+              answerMessageId,
+              {
+                pluginResult: {
+                  displayFormat: data.function.displayFormat,
+                  pluginName: data.function.name,
+                  arguments: data.function.arguments,
+                  pluginContent: data.function.result,
+                },
+                smartFormInfo: {
+                  type: smartFormTypeConverter(data.function.displayFormat as SmartFormDisplayFormat),
+                  isDisabled: false,
+                  params: data.function.result,
+                },
+              },
+              modelIndex,
+            )
+            emit('messageListScrollToBottom')
+            return
+          }
+
           emit(
             'updateMessageItem',
             answerMessageId,

src/views/multi-model-dialogue/components/message-item.vue

 <script setup lang="ts">
-import { computed, readonly, ref } from 'vue'
+import { computed, provide, readonly, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { Down } from '@icon-park/vue-next'
 import type { MessageItemInterface } from '../types'
@@ -7,9 +7,11 @@ import MarkdownRender from '@/components/markdown-render/markdown-render.vue'
 import ExecuteCodeRender from '@/components/execute-code-render/execute-code-render.vue'
 import ExecutePluginRender from '@/components/execute-plugin-render/execute-plugin-render.vue'
 import MessageBubbleLoading from './message-bubble-loading.vue'
+import SmartForms from './smart-forms/index.vue'
 
 interface Props {
   messageItem: MessageItemInterface
+  messageItemId: string
 }
 
 const props = defineProps<Props>()
@@ -20,14 +22,33 @@ const emit = defineEmits<{
 
 const { t } = useI18n()
 
+provide('messageItemId', props.messageItemId)
+
 const isShowReasoningContent = ref(true)
 
 const agentAvatarUrl = readonly({ url: 'https://gsst-poe-sit.gz.bcebos.com/icon/agent-avatar.png' })
 
-const isAssistant = computed(() => {
+const displaySmartFormsList = readonly(['travelForm'])
+
+const isAgentMessage = computed(() => {
   return props.messageItem.role === 'assistant'
 })
 
+const currentBubbleTextColor = computed(() => {
+  return isAgentMessage.value ? '#192338' : '#fff'
+})
+
+const messageAuthor = computed(() => {
+  return props.messageItem.nickName
+})
+
+const isShowSmartForms = computed(() => {
+  if (props.messageItem?.pluginResult?.displayFormat) {
+    return displaySmartFormsList.includes(props.messageItem?.pluginResult?.displayFormat)
+  }
+  return false
+})
+
 const assistantAvatarUrl = computed(() => {
   return props.messageItem.avatar || agentAvatarUrl.url
 })
@@ -42,12 +63,13 @@ function handleShowReasoningContentSwitch() {
     <div class="flex">
       <img
         class="h-[36px] w-[36px] flex-shrink-0 rounded-full object-cover"
-        :src="isAssistant ? assistantAvatarUrl : props.messageItem.avatar"
+        :src="isAgentMessage ? assistantAvatarUrl : props.messageItem.avatar"
         alt="Avatar"
       />
 
-      <div class="ml-[11px] flex flex-col items-start overflow-hidden">
-        <template v-if="isAssistant && messageItem.nickName === 'DeepSeek'">
+      <div v-if="!isShowSmartForms" class="ml-[11px] flex flex-col items-start overflow-hidden">
+        <!-- DeepSeek深度思考 -->
+        <template v-if="isAgentMessage && messageItem.nickName === 'DeepSeek'">
           <div class="mb-[7px] select-none text-[14px]">
             <div class="inline-flex cursor-pointer" @click="handleShowReasoningContentSwitch">
               <span v-if="messageItem.isTextContentLoading" class="mr-[6px]">
@@ -89,19 +111,19 @@ function handleShowReasoningContentSwitch() {
           <div
             class="min-h-[21px] w-full flex-wrap rounded-[10px] border border-[#9EA3FF] px-[15px] py-[12px] text-justify"
             :class="{
-              'bg-[#777EF9]': isAssistant,
-              'text-[#fff]': isAssistant,
+              'bg-[#777EF9]': !isAgentMessage,
+              'text-[#fff]': !isAgentMessage,
               '!min-w-[80px]': messageItem.isTextContentLoading,
             }"
           >
             <img
-              v-show="!isAssistant && messageItem.imageUrl"
+              v-show="!isAgentMessage && messageItem.imageUrl"
               :src="messageItem.imageUrl"
               class="max-h-[120px]! mb-[12px] rounded-[10px] object-contain"
             />
 
             <!-- 插件返回结果 -->
-            <div v-show="isAssistant && messageItem?.pluginResult?.pluginName" class="mb-[11px] w-full">
+            <div v-show="isAgentMessage && messageItem?.pluginResult?.pluginName" class="mb-[11px] w-full">
               <ExecutePluginRender
                 :display-format="messageItem.pluginResult?.displayFormat || 'none'"
                 :name="messageItem.pluginResult?.pluginName!"
@@ -111,8 +133,8 @@ function handleShowReasoningContentSwitch() {
               />
             </div>
 
-            <div v-if="messageItem.isTextContentLoading" class="flex px-4 py-1.5">
-              <MessageBubbleLoading :active-color="isAssistant ? '#fff' : '#192338'" />
+            <div v-if="messageItem.isTextContentLoading" class="flex px-4 py-[7.5px]">
+              <MessageBubbleLoading :active-color="currentBubbleTextColor" />
             </div>
 
             <div v-else>
@@ -128,21 +150,21 @@ function handleShowReasoningContentSwitch() {
                 :raw-text-content="
                   messageItem.content ? messageItem.content : t('common_module.dialogue_module.empty_message_content')
                 "
-                :color="isAssistant ? '#fff' : '#192338'"
+                :color="currentBubbleTextColor"
               />
 
               <div
-                v-show="isAssistant && messageItem.isAnswerResponseLoading"
+                v-show="isAgentMessage && messageItem.isAnswerResponseLoading"
                 class="mt-2.5 flex h-[21px] w-[30px] items-center justify-center"
               >
-                <MessageBubbleLoading :active-color="isAssistant ? '#fff' : '#192338'" />
+                <MessageBubbleLoading :active-color="currentBubbleTextColor" />
               </div>
             </div>
           </div>
 
           <div class="flex justify-between py-[2px]">
             <div
-              v-show="isAssistant && messageItem.knowledgeContentResult.length"
+              v-show="isAgentMessage && messageItem.knowledgeContentResult.length"
               class="flex-center rounded-theme h-8 cursor-pointer gap-[5px] px-[14px] font-['Microsoft_YaHei_UI'] text-[#0B7DFF] hover:opacity-80"
               @click="emit('showKnowledgeResult')"
             >
@@ -152,6 +174,14 @@ function handleShowReasoningContentSwitch() {
           </div>
         </div>
       </div>
+
+      <SmartForms
+        v-else
+        :message-item="messageItem"
+        :message-author="messageAuthor"
+        :is-agent-message="isAgentMessage"
+        :current-bubble-text-color="currentBubbleTextColor"
+      />
     </div>
   </div>
 </template>

src/views/multi-model-dialogue/components/message-list.vue

 <script setup lang="ts">
-import { useTemplateRef } from 'vue'
+import { provide, useTemplateRef } from 'vue'
 import { ScrollbarInst } from 'naive-ui'
 import { useElementVisibility } from '@vueuse/core'
 import MessageItem from './message-item.vue'
@@ -13,6 +13,7 @@ defineProps<Props>()
 
 const emit = defineEmits<{
   showKnowledgeResult: [knowledgeContentResult: KnowledgeContentResultItem[]]
+  updateSpecifyMessageItem: [messageId: string, newMessageItem: Partial<MessageItemInterface>]
 }>()
 
 const scrollbarRef = useTemplateRef<ScrollbarInst | null>('scrollbarRef')
@@ -21,6 +22,12 @@ const backBottomBtnFlagRef = useTemplateRef<HTMLDivElement | null>('backBottomBt
 
 const isNotShowBackBottomBtn = useElementVisibility(backBottomBtnFlagRef)
 
+provide('updateSpecifyMessageItem', {
+  updateSpecifyMessageItem: (messageId: string, newMessageItem: Partial<MessageItemInterface>) => {
+    emit('updateSpecifyMessageItem', messageId, newMessageItem)
+  },
+})
+
 function scrollToBottom() {
   if (scrollbarRef.value) {
     scrollbarRef.value.scrollTo({ top: 999999999, behavior: 'smooth' })
@@ -41,6 +48,7 @@ defineExpose({
           <MessageItem
             v-for="[key, messageItem] in messageList"
             :key="key"
+            :message-item-id="key"
             :message-item="messageItem"
             @show-knowledge-result="emit('showKnowledgeResult', messageItem.knowledgeContentResult)"
           />

src/views/multi-model-dialogue/components/model-dialogue-item.vue

@@ -5,7 +5,7 @@ import { SelectOption } from 'naive-ui'
 import { useVModel } from '@vueuse/core'
 import { useElementSize } from '@vueuse/core'
 import { useSystemLanguageStore } from '@/store/modules/system-language'
-import { MultiModelDialogueItem } from '../types'
+import { MultiModelDialogueItem, MessageItemInterface } from '../types'
 import ModelSetting from './model-setting.vue'
 import MessageList from './message-list.vue'
 import HitKnowledgeContent from './hit-knowledge-content.vue'
@@ -15,6 +15,7 @@ interface Props {
   modelListOptions: SelectOption[]
   totalNum: number
   isCurrent: boolean
+  modelDialogueId: number
 }
 
 const { t } = useI18n()
@@ -26,6 +27,7 @@ const emit = defineEmits<{
   updateConfig: [modelDialogueItem: MultiModelDialogueItem]
   replaceConfig: [modelDialogueItem: MultiModelDialogueItem]
   resetConversation: []
+  updateMessageItem: [messageId: string, messageItem: Partial<MessageItemInterface>, index: number]
 }>()
 
 const systemLanguageStore = useSystemLanguageStore()
@@ -118,6 +120,10 @@ function handleShowKnowledgeResult(knowledgeContentResult: KnowledgeContentResul
   isShowKnowledgeContentResult.value = true
   currentKnowledgeContentResult.value = knowledgeContentResult
 }
+
+function handleUpdateSpecifyMessageItem(messageId: string, messageItem: Partial<MessageItemInterface>) {
+  emit('updateMessageItem', messageId, messageItem, props.modelDialogueId)
+}
 </script>
 
 <template>
@@ -205,6 +211,7 @@ function handleShowKnowledgeResult(knowledgeContentResult: KnowledgeContentResul
       ref="messageListRef"
       :message-list="modelDialogueItem.messageList"
       @show-knowledge-result="handleShowKnowledgeResult"
+      @update-specify-message-item="handleUpdateSpecifyMessageItem"
     />
 
     <HitKnowledgeContent

src/views/multi-model-dialogue/components/smart-forms/components/business-trip-reimbursement-form.vue

+<script setup lang="ts">
+import { readonly, ref } from 'vue'
+import type { MessageItemInterface } from '../../../types'
+import MarkdownRender from '@/components/markdown-render/markdown-render.vue'
+import type { FormRules } from 'naive-ui'
+import MessageBubbleLoading from '../../message-bubble-loading.vue'
+
+interface Props {
+  isAgentMessage: boolean
+  messageItem: MessageItemInterface
+  currentBubbleTextColor: string
+}
+
+defineProps<Props>()
+
+const formRules = readonly<FormRules>({
+  objective: {
+    required: true,
+    trigger: ['blur', 'input'],
+    message: '',
+  },
+  travelLocation: {
+    required: true,
+    trigger: ['blur', 'input'],
+    message: '',
+  },
+  departureTime: {
+    required: true,
+    trigger: ['blur', 'input'],
+    message: '',
+  },
+  returnTime: {
+    required: true,
+    trigger: ['blur', 'input'],
+    message: '',
+  },
+  email: {
+    required: true,
+    trigger: ['blur', 'input'],
+    message: '',
+  },
+})
+
+const formModel = ref({
+  objective: 'khbf',
+  travelLocation: '',
+  departureTime: null,
+  returnTime: null,
+  vehicle: '',
+  vehicleEstimatedCost: '',
+  residence: '',
+  residenceEstimatedCost: '',
+  estimatedAmount: '',
+  generalBudget: '',
+  email: '',
+})
+
+const objectiveOptions = readonly([
+  {
+    label: '客户拜访',
+    value: 'khbf',
+  },
+  {
+    label: '会议',
+    value: 'hy',
+  },
+  {
+    label: '培训',
+    value: 'px',
+  },
+])
+</script>
+
+<template>
+  <div class="ml-[11px] overflow-hidden">
+    <div class="mb-[7px] text-[12px] text-[#999]">作者信息</div>
+
+    <div class="min-w-[420px]">
+      <div
+        class="box-content min-h-[21px] min-w-[10px] max-w-full rounded-[10px] border border-[#9EA3FF] bg-[#777EF9] px-[15px] py-[14px] text-justify"
+        :class="{
+          '!bg-[#fff]': isAgentMessage,
+          '!min-w-[80px]': messageItem.isAnswerResponseLoading,
+        }"
+      >
+        <div
+          v-if="messageItem.isAnswerResponseLoading && !messageItem.content"
+          class="flex h-[21px] items-center justify-center"
+        >
+          <MessageBubbleLoading :active-color="currentBubbleTextColor" />
+        </div>
+        <template v-else>
+          <div class="mb-[10px]">
+            <i class="iconfont icon-tongyi font-600 text-[14px] text-[#6ccb59]"></i>
+            <span class="ml-[5px] text-[14px] text-[#999]">出差表单插件执行成功</span>
+          </div>
+
+          <MarkdownRender
+            ref="markdownRenderRef"
+            raw-text-content="好的，我将为您自动生成出差表单，表单如下"
+            :color="currentBubbleTextColor"
+          />
+
+          <!-- <div v-if="messageItem.isAnswerLoading" class="ml-[15px] pt-[12px]">
+              <MessageBubbleLoading active-color="#fff" width="5px" />
+            </div> -->
+        </template>
+      </div>
+
+      <div
+        class="mt-[10px] box-content min-h-[21px] min-w-[10px] max-w-full rounded-[10px] border border-[#9EA3FF] bg-[#777EF9] px-[15px] py-[14px] text-justify"
+        :class="{
+          '!bg-[#fff]': isAgentMessage,
+        }"
+      >
+        <h2 class="font-600 text-[15px] text-[#0B7DFF]">出差表单</h2>
+
+        <div class="mt-[12px]">
+          <n-form :model="formModel" :rules="formRules" label-width="90" label-placement="left" :show-feedback="false">
+            <n-form-item class="mb-[10px]" label="出差目的" path="objective">
+              <n-select v-model:value="formModel.objective" placeholder="Select" :options="objectiveOptions" />
+            </n-form-item>
+
+            <n-form-item class="mb-[10px]" label="出差地点" path="travelLocation">
+              <n-input v-model:value="formModel.travelLocation" placeholder="Input" />
+            </n-form-item>
+
+            <n-form-item class="mb-[10px]" label="出发时间" path="departureTime">
+              <n-date-picker v-model:value="formModel.departureTime" type="datetime" />
+            </n-form-item>
+
+            <n-form-item label="返回时间" path="returnTime">
+              <n-date-picker v-model:value="formModel.returnTime" type="datetime" />
+            </n-form-item>
+
+            <n-form-item label="">
+              <div class="h-[1px] w-full bg-[#B1B1B1] opacity-45"></div>
+            </n-form-item>
+
+            <n-form-item class="mb-[10px]" label="交通工具" path="vehicle">
+              <n-input v-model:value="formModel.vehicle" placeholder="Input" />
+            </n-form-item>
+
+            <n-form-item label="预计费用" path="vehicleEstimatedCost">
+              <n-input v-model:value="formModel.vehicleEstimatedCost" placeholder="Input" />
+            </n-form-item>
+
+            <n-form-item label="">
+              <div class="h-[1px] w-full bg-[#B1B1B1] opacity-45"></div>
+            </n-form-item>
+
+            <n-form-item class="mb-[10px]" label="住宿地点" path="residence">
+              <n-input v-model:value="formModel.residence" placeholder="Input" />
+            </n-form-item>
+
+            <n-form-item label="预计费用" path="residenceEstimatedCost">
+              <n-input v-model:value="formModel.residenceEstimatedCost" placeholder="Input" />
+            </n-form-item>
+
+            <n-form-item label="">
+              <div class="h-[1px] w-full bg-[#B1B1B1] opacity-45"></div>
+            </n-form-item>
+
+            <n-form-item class="mb-[10px]" label="预计金额" path="residence">
+              <n-input v-model:value="formModel.estimatedAmount" placeholder="Input" />
+            </n-form-item>
+
+            <n-form-item label="总预算" path="generalBudget">
+              <n-input v-model:value="formModel.generalBudget" placeholder="Input" />
+            </n-form-item>
+
+            <n-form-item label="">
+              <div class="h-[1px] w-full bg-[#B1B1B1] opacity-45"></div>
+            </n-form-item>
+
+            <n-form-item class="mb-[10px]" label="邮箱信息" path="email">
+              <n-input v-model:value="formModel.email" placeholder="Input" />
+            </n-form-item>
+
+            <div class="mt-[30px] text-end">
+              <n-button type="primary">确认提交</n-button>
+            </div>
+          </n-form>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

src/views/multi-model-dialogue/components/smart-forms/index.vue

+<script setup lang="ts">
+import type { MessageItemInterface } from '../../types'
+import BusinessTripForm from './components/business-trip-form.vue'
+// import BusinessTripReimbursementForm from './business-trip-reimbursement-form.vue'
+
+interface Props {
+  isAgentMessage: boolean
+  messageAuthor: string
+  messageItem: MessageItemInterface
+  currentBubbleTextColor: string
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <BusinessTripForm
+    :message-item="messageItem"
+    :is-agent-message="isAgentMessage"
+    :message-author="messageAuthor"
+    :current-bubble-text-color="currentBubbleTextColor"
+  />
+
+  <!-- <BusinessTripReimbursementForm
+    :is-agent-message="isAgentMessage"
+    :message-item="messageItem"
+    :current-bubble-text-color="currentBubbleTextColor"
+  /> -->
+</template>

src/views/multi-model-dialogue/components/smart-forms/types/types.d.ts

+export interface ResponseBusinessTripForm {
+  purpose: string
+  place: string
+  departureDate: string
+  returnDate: string
+  vehicle: string
+  transportationFee: string
+  accommodation: string
+  accommodationCost: string
+  advancePaymentAmount: string
+  totalBudget: string
+}
+
+export interface BusinessTripForm {
+  objective: string
+  travelLocation: string
+  departureTime: number | null
+  returnTime: number | null
+  vehicle: string
+  vehicleEstimatedCost: number | null
+  residence: string
+  residenceEstimatedCost: number | null
+  advancePaymentAmount: number | null
+  generalBudget: string
+  email: string
+}
+
+export type SmartFormDisplayFormat = 'travelForm'

src/views/multi-model-dialogue/components/smart-forms/utils/smart-forms.ts

+import { BusinessTripForm, ResponseBusinessTripForm } from '../types/types'
+import type { SmartFormTypes } from '../../../types'
+
+export function smartFormTypeConverter(type: 'travelForm'): SmartFormTypes {
+  switch (type) {
+    case 'travelForm':
+      return 'BusinessTripForm'
+  }
+}
+
+export function businessTripFormParser(resForm: Partial<ResponseBusinessTripForm>) {
+  return {
+    objective: resForm.purpose || 'CustomerVisits',
+    travelLocation: resForm.place || '',
+    departureTime: resForm.departureDate ? Date.parse(resForm.departureDate) : null,
+    returnTime: resForm.returnDate ? Date.parse(resForm.returnDate) : null,
+    vehicle: resForm.vehicle || '',
+    vehicleEstimatedCost: resForm.transportationFee ? Number.parseInt(resForm.transportationFee) : null,
+    residence: resForm.accommodation || '',
+    residenceEstimatedCost: resForm.accommodationCost ? Number.parseInt(resForm.accommodationCost) : null,
+    advancePaymentAmount: resForm.advancePaymentAmount ? Number.parseInt(resForm.advancePaymentAmount) : null,
+    generalBudget: resForm.totalBudget || '',
+    email: '',
+  }
+}
+
+export function businessTripFormReturner(form: BusinessTripForm) {
+  return {
+    purpose: form.objective,
+    place: form.travelLocation,
+    departureDate: form.departureTime ? new Date(form.departureTime).toISOString() : '',
+    returnDate: form.returnTime ? new Date(form.returnTime).toISOString() : '',
+    vehicle: form.vehicle,
+    transportationFee: form.vehicleEstimatedCost,
+    accommodation: form.residence,
+    accommodationCost: form.residenceEstimatedCost,
+    advancePaymentAmount: form.advancePaymentAmount,
+    totalBudget: form.generalBudget,
+    email: form.email,
+  }
+}

src/views/multi-model-dialogue/multi-model-dialogue.vue

@@ -9,7 +9,7 @@ import type { ValueOf } from 'type-fest'
 import PageHeader from './components/page-header.vue'
 import ModelDialogueItem from './components/model-dialogue-item.vue'
 import FooterOperation from './components/footer-operation.vue'
-import { MessageItemInterface, MultiModelDialogueItem, LargeModelItem } from './types'
+import { MessageItemInterface, MultiModelDialogueItem, LargeModelItem, SmartFormTypes } from './types'
 import {
   fetchGetDebugApplicationInfo,
   fetchGetLargeModelInfo,
@@ -254,9 +254,7 @@ function handleUpdateSpecifyMessageItem(messageId: string, newObj: Partial<Messa
 
   if (currentMessageItemInfo) {
     Object.entries<ValueOf<typeof newObj>>(newObj).forEach(([key, value]) => {
-      if (Object.prototype.hasOwnProperty.call(currentMessageItemInfo, key)) {
       ;(currentMessageItemInfo as any)[key as keyof MessageItemInterface] = value
-      }
     })
   }
 }
@@ -300,6 +298,17 @@ function handleBlockMessageResponse() {
     modelDialogueItem.messageList.clear()
   })
 }
+
+function onSmartFormsStatusFreezeCheck(smartFormType: SmartFormTypes, index: number) {
+  /* 重置智能表单项目 */
+  if (smartFormType) {
+    multiModelDialogueList.value[index].messageList.forEach((item) => {
+      if (item.smartFormInfo && item.smartFormInfo.type === smartFormType) {
+        item.smartFormInfo.isDisabled = true
+      }
+    })
+  }
+}
 </script>
 
 <template>
@@ -328,6 +337,7 @@ function handleBlockMessageResponse() {
           v-for="(modelDialogueItem, index) in multiModelDialogueList"
           :ref="(el) => (modelDialogueListRef[index] = el as InstanceType<typeof ModelDialogueItem>)"
           :key="modelDialogueItem.id"
+          :model-dialogue-id="index"
           :model-dialogue-item="modelDialogueItem"
           :is-current="modelDialogueItem.id === multiModelDialogueList[0].id"
           :model-list-options="modelListOptions"
@@ -336,6 +346,7 @@ function handleBlockMessageResponse() {
           @remove-model-dialogue-item="handleRemoveModelDialogueItem"
           @replace-config="handleReplaceAgentConfig"
           @reset-conversation="handleResetConversation"
+          @update-message-item="handleUpdateSpecifyMessageItem"
         />
       </div>
     </main>
@@ -352,6 +363,7 @@ function handleBlockMessageResponse() {
       @delete-message-item="handleDeleteMessageItem"
       @clear-all-message="handleClearAllMessage"
       @message-list-scroll-to-bottom="handleMessageListScrollToBottom"
+      @smart-forms-status-freeze-check="onSmartFormsStatusFreezeCheck"
     />
 
     <Transition name="mask" mode="out-in">

src/views/multi-model-dialogue/types.d.ts

@@ -25,6 +25,8 @@ export interface MultiModelDialogueItem {
   messageList: Map<string, MessageItemInterface>
 }
 
+export type SmartFormTypes = 'BusinessTripForm'
+
 export interface MessageItemInterface {
   role: 'user' | 'assistant'
   avatar: string
@@ -38,11 +40,16 @@ export interface MessageItemInterface {
   knowledgeContentResult: KnowledgeContentResultItem[]
   dbChainSQLContent: string
   pluginResult?: {
-    displayFormat: 'json' | 'markdown' | 'none'
+    displayFormat: PluginDisplayFormatType
     pluginName: string
     arguments: string
     pluginContent: string
   }
+  smartFormInfo?: {
+    type: SmartFormTypes
+    isDisabled: boolean
+    params: string
+  }
 }
 
 export interface LargeModelItem {

src/views/multi-model-dialogue/utils/fetch-event-stream-source.ts

@@ -8,7 +8,7 @@ import { languageKeyTransform } from '@/utils/language-key-transform'
 interface ResponseData {
   message: string
   reasoningContent: string
-  function: { displayFormat: 'json' | 'markdown' | 'none'; name: string; result: string; arguments: string }
+  function: { displayFormat: PluginDisplayFormatType; name: string; result: string; arguments: string }
   knowledgeContentResult: KnowledgeContentResultItem[]
   dbChainResult: DBChainResultItem[]
 }

src/views/personal-space/personal-app-setting/components/agent-config/agent-preview/agent-preview.vue

@@ -14,6 +14,7 @@ import { usePersonalAppConfigStore } from '@/store/modules/personal-app-config'
 import { useSystemLanguageStore } from '@/store/modules/system-language'
 import { Brain, Down } from '@icon-park/vue-next'
 import { validBrowser } from '@/utils/browser-detection'
+import { SmartFormTypes } from '../types'
 
 const { t } = useI18n()
 
@@ -78,9 +79,7 @@ function handleUpdateSpecifyMessageItem(messageId: string, newMessageItem: Parti
     }
 
     Object.entries<ValueOf<typeof newMessageItem>>(newMessageItem).forEach(([key, value]) => {
-      if (Object.prototype.hasOwnProperty.call(currentMessageItemInfo, key)) {
       ;(currentMessageItemInfo as any)[key as keyof ConversationMessageItem] = value
-      }
     })
   }
 }
@@ -235,6 +234,17 @@ function handleAudioPause(isClearMessageList = false) {
     footerInputRef.value?.blockMessageResponse()
   }
 }
+
+function onSmartFormsStatusFreezeCheck(smartFormType: SmartFormTypes) {
+  /* 重置智能表单项目 */
+  if (smartFormType) {
+    messageList.value.forEach((item) => {
+      if (item.smartFormInfo && item.smartFormInfo.type === smartFormType) {
+        item.smartFormInfo.isDisabled = true
+      }
+    })
+  }
+}
 </script>
 
 <template>
@@ -328,6 +338,7 @@ function handleAudioPause(isClearMessageList = false) {
           :create-continue-questions-exception="createContinueQuestionsException"
           @audio-play="handleAudioPlay"
           @audio-pause="handleAudioPause"
+          @update-specify-message-item="handleUpdateSpecifyMessageItem"
         />
       </div>
     </div>
@@ -348,6 +359,7 @@ function handleAudioPause(isClearMessageList = false) {
       @update-continuous-question-status="handleUpdateContinueQuestionStatus"
       @audio-play="handleAudioPlay"
       @audio-pause="handleAudioPause"
+      @smart-forms-status-freeze-check="onSmartFormsStatusFreezeCheck"
     />
 
     <MemoryPreviewModal v-model="isShowMemoryPreviewModal" :data="selectedMemoryTabName" />

src/views/personal-space/personal-app-setting/components/agent-config/agent-preview/components/footer-input.vue

@@ -13,6 +13,9 @@ import { TEXTTOSPEECH_WS_URL } from '@/config/base-url'
 import WebSocketCtr from '@/utils/web-socket-ctr'
 import { ChannelType } from '@/enums/channel'
 import { useUserStore } from '@/store/modules/user'
+import { smartFormTypeConverter } from '../components/smart-forms/utils/smart-forms'
+import { SmartFormTypes } from '../../types'
+import { SmartFormDisplayFormat } from './smart-forms/types/types'
 
 interface Props {
   messageList: Map<string, ConversationMessageItem>
@@ -35,6 +38,7 @@ const emit = defineEmits<{
   updateContinuousQuestionStatus: [value: 'default' | 'close']
   audioPlay: [messageItem: ConversationMessageItem, requestId?: string]
   audioPause: []
+  smartFormsStatusFreezeCheck: [value: SmartFormTypes]
 }>()
 
 const personalAppConfigStore = usePersonalAppConfigStore()
@@ -61,6 +65,7 @@ const assistantFullAnswerContent = ref('')
 const currentAgentTimberId = ref('')
 const sentenceSpeechException = ref(false)
 const messageAudioLoading = ref(false)
+const isSmartFormPlugins = ref(false) //  是否智能表单插件
 const currentLatestMessageItemKeyMap = ref(new Map<'assistant' | 'user', string>())
 
 let controller: AbortController | null = null
@@ -233,6 +238,7 @@ function handleMessageSend() {
   currentAgentTimberId.value = personalAppConfigStore.voiceConfig.timbreId
   sentenceSpeechException.value = false
   messageAudioLoading.value = false
+  isSmartFormPlugins.value = false
 
   const isVoiceEnabled = !!personalAppConfigStore.voiceConfig.timbreId
 
@@ -271,6 +277,31 @@ function handleMessageSend() {
 
       // 插件
       if (data.function && data.function.name) {
+        // 表单插件，展示表单内容
+        if (['travelForm'].includes(data.function.displayFormat)) {
+          emit(
+            'smartFormsStatusFreezeCheck',
+            smartFormTypeConverter(data.function.displayFormat as SmartFormDisplayFormat),
+          )
+
+          emit('updateSpecifyMessageItem', latestAssistantMessageKey, {
+            pluginResult: {
+              displayFormat: data.function.displayFormat,
+              pluginName: data.function.name,
+              arguments: data.function.arguments,
+              pluginContent: data.function.result,
+            },
+            smartFormInfo: {
+              type: smartFormTypeConverter(data.function.displayFormat as SmartFormDisplayFormat),
+              isDisabled: false,
+              params: data.function.result,
+            },
+          })
+          emit('updatePageScroll')
+          isSmartFormPlugins.value = true
+          return
+        }
+
         emit('updateSpecifyMessageItem', latestAssistantMessageKey, {
           pluginResult: {
             displayFormat: data.function.displayFormat,
@@ -313,7 +344,7 @@ function handleMessageSend() {
           '',
         )
 
-        if (!sentenceExtractCheckEnabled.value && isVoiceEnabled) {
+        if (!sentenceExtractCheckEnabled.value && isVoiceEnabled && !isSmartFormPlugins.value) {
           sentenceExtract(latestAssistantMessageKey)
           sentenceExtractCheckEnabled.value = true
           messageAudioLoading.value = true

src/views/personal-space/personal-app-setting/components/agent-config/agent-preview/components/message-item.vue

 <script setup lang="ts">
-import { computed, ref, useTemplateRef } from 'vue'
+import { computed, ref, useTemplateRef, readonly, provide } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { throttle } from 'lodash-es'
 import { Down } from '@icon-park/vue-next'
 import CustomLoading from './custom-loading.vue'
+import SmartForms from './smart-forms/index.vue'
 import { usePersonalAppConfigStore } from '@/store/modules/personal-app-config'
 import MarkdownRender from '@/components/markdown-render/markdown-render.vue'
 import ExecuteCodeRender from '@/components/execute-code-render/execute-code-render.vue'
@@ -14,7 +15,7 @@ import { downloadFile } from '@/utils/download-file'
 import { copyToClip } from '@/utils/copy'
 
 interface Props {
-  role: 'user' | 'assistant'
+  messageItemId: string
   messageItem: ConversationMessageItem
 }
 
@@ -33,8 +34,12 @@ const personalAppConfigStore = usePersonalAppConfigStore()
 
 const markdownRenderRef = useTemplateRef<InstanceType<typeof MarkdownRender>>('markdownRenderRef')
 
+provide('messageItemId', props.messageItemId)
+
 const isShowReasoningContent = ref(true)
 
+const displaySmartFormsList = readonly(['travelForm'])
+
 const useAvatar = computed(() => {
   return userStore.userInfo.avatarUrl || 'https://gsst-poe-sit.gz.bcebos.com/data/20240910/1725952917468.png'
 })
@@ -43,8 +48,27 @@ const assistantAvatar = computed(() => {
   return personalAppConfigStore.baseInfo.agentAvatar
 })
 
+const isAgentMessage = computed(() => {
+  return props.messageItem.role === 'assistant'
+})
+
+const currentBubbleTextColor = computed(() => {
+  return isAgentMessage.value ? '#192338' : '#fff'
+})
+
+const isShowSmartForms = computed(() => {
+  if (props.messageItem?.pluginResult?.displayFormat) {
+    return displaySmartFormsList.includes(props.messageItem?.pluginResult?.displayFormat)
+  }
+  return false
+})
+
+const messageAuthor = computed(() => {
+  return isAgentMessage.value ? props.messageItem.modelName || 'AI' : userStore.userInfo.nickName
+})
+
 const isShowAudioControl = computed(() => {
-  return props.role === 'assistant' && !props.messageItem.isVoiceLoading
+  return isAgentMessage.value && !props.messageItem.isVoiceLoading
 })
 
 const isPlayableAudio = computed(() => {
@@ -52,7 +76,7 @@ const isPlayableAudio = computed(() => {
 })
 
 const isShowVoiceLoading = computed(() => {
-  return props.role === 'assistant' && props.messageItem.isVoiceLoading && props.messageItem.isVoiceEnabled
+  return isAgentMessage.value && props.messageItem.isVoiceLoading && props.messageItem.isVoiceEnabled
 })
 
 const isDeepSeekR1 = computed(() => {
@@ -105,7 +129,7 @@ const handleContentCopy = throttle(
 <template>
   <div class="mb-5 flex last:mb-0">
     <NImage
-      :src="role === 'user' ? useAvatar : assistantAvatar"
+      :src="isAgentMessage ? assistantAvatar : useAvatar"
       preview-disabled
       :width="32"
       :height="32"
@@ -113,9 +137,9 @@ const handleContentCopy = throttle(
       class="mr-2 mt-1.5 h-8 w-8 flex-shrink-0 rounded-full"
     />
 
-    <div class="flex flex-col items-start overflow-x-auto">
+    <div v-if="!isShowSmartForms" class="flex flex-col items-start overflow-x-auto">
       <!-- DeepSeek大模型思考 -->
-      <template v-if="role === 'assistant' && isDeepSeekR1">
+      <template v-if="isAgentMessage && isDeepSeekR1">
         <div class="my-[7px] select-none text-[14px]">
           <div class="inline-flex cursor-pointer" @click="handleShowReasoningContentSwitch">
             <span v-if="messageItem.isTextContentLoading" class="mr-[6px]">
@@ -156,17 +180,17 @@ const handleContentCopy = throttle(
       <!-- 大模型内容 -->
       <div class="flex min-w-[80px] max-w-full flex-col items-start overflow-x-auto">
         <div
-          class="w-full flex-wrap rounded-xl border border-[#e8e9eb] px-4 py-[11px]"
-          :class="role === 'user' ? 'user-content-container bg-[#777EF9] text-white' : 'bg-white text-[#333]'"
+          class="w-full flex-wrap rounded-xl border border-[#9EA3FF] px-4 py-[11px]"
+          :class="isAgentMessage ? 'bg-white text-[#333]' : 'user-content-container bg-[#777EF9] text-white'"
         >
           <img
-            v-show="role === 'user' && messageItem.imageUrl"
+            v-show="!isAgentMessage && messageItem.imageUrl"
             :src="messageItem.imageUrl"
             class="max-h-[120px]! mb-[11px] rounded-[10px] object-contain"
           />
 
           <!-- 插件返回结果 -->
-          <div v-show="role === 'assistant' && messageItem?.pluginResult?.pluginName" class="mb-[11px] w-full">
+          <div v-show="isAgentMessage && messageItem?.pluginResult?.pluginName" class="mb-[11px] w-full">
             <ExecutePluginRender
               :display-format="messageItem.pluginResult?.displayFormat || 'none'"
               :name="messageItem.pluginResult?.pluginName!"
@@ -197,12 +221,12 @@ const handleContentCopy = throttle(
                     ? t('common_module.dialogue_module.empty_message_content')
                     : messageItem.textContent
                 "
-                :color="role === 'user' ? '#fff' : '#192338'"
+                :color="currentBubbleTextColor"
               />
             </p>
 
             <div
-              v-show="(role === 'assistant' && messageItem.isAnswerResponseLoading) || isShowVoiceLoading"
+              v-show="(isAgentMessage && messageItem.isAnswerResponseLoading) || isShowVoiceLoading"
               class="mt-4 px-4"
               :class="isShowAudioControl ? 'mb-2.5' : 'mb-[5px]'"
             >
@@ -242,7 +266,7 @@ const handleContentCopy = throttle(
         <div class="flex w-full items-center justify-between py-[5px]">
           <div>
             <div
-              v-show="role === 'assistant' && messageItem.knowledgeContentResult.length"
+              v-show="isAgentMessage && messageItem.knowledgeContentResult.length"
               class="flex-center rounded-theme h-8 cursor-pointer gap-[5px] px-[13px] font-['Microsoft_YaHei_UI'] text-[#0B7DFF] hover:opacity-80"
               @click="emit('showKnowledgeResult')"
             >
@@ -252,7 +276,7 @@ const handleContentCopy = throttle(
           </div>
 
           <div
-            v-show="role === 'assistant' && messageItem.textContent && !messageItem.isAnswerResponseLoading"
+            v-show="isAgentMessage && messageItem.textContent && !messageItem.isAnswerResponseLoading"
             class="pr-[13px] text-end"
           >
             <i
@@ -267,6 +291,14 @@ const handleContentCopy = throttle(
         </div>
       </div>
     </div>
+
+    <SmartForms
+      v-else
+      :message-author="messageAuthor"
+      :is-agent-message="isAgentMessage"
+      :message-item="messageItem"
+      :current-bubble-text-color="currentBubbleTextColor"
+    />
   </div>
 </template>
 

src/views/personal-space/personal-app-setting/components/agent-config/agent-preview/components/message-list.vue

 <script setup lang="ts">
-import { computed, nextTick, ref, useTemplateRef, watch } from 'vue'
+import { computed, nextTick, provide, ref, useTemplateRef, watch } from 'vue'
 import { useElementVisibility } from '@vueuse/core'
 import MessageItem from './message-item.vue'
 import ContinueQuestion from './continue-question.vue'
@@ -16,15 +16,22 @@ interface Props {
 
 const props = defineProps<Props>()
 
-defineEmits<{
+const emit = defineEmits<{
   audioPlay: [messageItem: ConversationMessageItem]
   audioPause: []
+  updateSpecifyMessageItem: [messageId: string, newMessageItem: Partial<ConversationMessageItem>]
 }>()
 
 const { scrollRef, scrollToBottom } = useScroll()
 const backBottomBtnFlagRef = useTemplateRef<HTMLDivElement | null>('backBottomBtnFlagRef')
 const isNotShowBackBottomBtn = useElementVisibility(backBottomBtnFlagRef)
 
+provide('updateSpecifyMessageItem', {
+  updateSpecifyMessageItem: (messageId: string, newMessageItem: Partial<ConversationMessageItem>) => {
+    emit('updateSpecifyMessageItem', messageId, newMessageItem)
+  },
+})
+
 const isShowKnowledgeContent = ref(false)
 const currentKnowledgeContentResult = ref<KnowledgeContentResultItem[]>([])
 
@@ -70,7 +77,7 @@ function handleShowKnowledgeResult(knowledgeContentResult: KnowledgeContentResul
       <MessageItem
         v-for="[key, messageItem] in messageList"
         :key="key"
-        :role="messageItem.role"
+        :message-item-id="key"
         :message-item="messageItem"
         @audio-play="() => $emit('audioPlay', messageItem)"
         @audio-pause="() => $emit('audioPause')"

src/views/personal-space/personal-app-setting/components/agent-config/agent-preview/components/smart-forms/components/business-trip-reimbursement-form.vue

+<script setup lang="ts">
+import { readonly, ref } from 'vue'
+import MarkdownRender from '@/components/markdown-render/markdown-render.vue'
+import type { FormRules } from 'naive-ui'
+import CustomLoading from '../../custom-loading.vue'
+
+interface Props {
+  isAgentMessage: boolean
+  messageItem: ConversationMessageItem
+  currentBubbleTextColor: string
+}
+
+defineProps<Props>()
+
+const formRules = readonly<FormRules>({
+  objective: {
+    required: true,
+    trigger: ['blur', 'input'],
+    message: '',
+  },
+  travelLocation: {
+    required: true,
+    trigger: ['blur', 'input'],
+    message: '',
+  },
+  departureTime: {
+    required: true,
+    trigger: ['blur', 'input'],
+    message: '',
+  },
+  returnTime: {
+    required: true,
+    trigger: ['blur', 'input'],
+    message: '',
+  },
+  email: {
+    required: true,
+    trigger: ['blur', 'input'],
+    message: '',
+  },
+})
+
+const formModel = ref({
+  objective: 'khbf',
+  travelLocation: '',
+  departureTime: null,
+  returnTime: null,
+  vehicle: '',
+  vehicleEstimatedCost: '',
+  residence: '',
+  residenceEstimatedCost: '',
+  estimatedAmount: '',
+  generalBudget: '',
+  email: '',
+})
+
+const objectiveOptions = readonly([
+  {
+    label: '客户拜访',
+    value: 'khbf',
+  },
+  {
+    label: '会议',
+    value: 'hy',
+  },
+  {
+    label: '培训',
+    value: 'px',
+  },
+])
+</script>
+
+<template>
+  <div class="ml-[11px] overflow-hidden">
+    <div class="mb-[7px] text-[12px] text-[#999]">作者信息</div>
+
+    <div class="min-w-[420px]">
+      <div
+        class="box-content min-h-[21px] min-w-[10px] max-w-full rounded-[10px] border border-[#9EA3FF] bg-[#777EF9] px-[15px] py-[14px] text-justify"
+        :class="{
+          '!bg-[#fff]': isAgentMessage,
+          '!min-w-[80px]': messageItem.isAnswerResponseLoading,
+        }"
+      >
+        <div
+          v-if="messageItem.isAnswerResponseLoading && !messageItem.textContent"
+          class="flex h-[21px] items-center justify-center"
+        >
+          <CustomLoading :active-color="currentBubbleTextColor" />
+        </div>
+        <template v-else>
+          <div class="mb-[10px]">
+            <i class="iconfont icon-tongyi font-600 text-[14px] text-[#6ccb59]"></i>
+            <span class="ml-[5px] text-[14px] text-[#999]">出差表单插件执行成功</span>
+          </div>
+
+          <MarkdownRender
+            ref="markdownRenderRef"
+            raw-text-content="好的，我将为您自动生成出差表单，表单如下"
+            :color="currentBubbleTextColor"
+          />
+
+          <!-- <div v-if="messageItem.isAnswerLoading" class="ml-[15px] pt-[12px]">
+              <CustomLoading active-color="#fff" width="5px" />
+            </div> -->
+        </template>
+      </div>
+
+      <div
+        class="mt-[10px] box-content min-h-[21px] min-w-[10px] max-w-full rounded-[10px] border border-[#9EA3FF] bg-[#777EF9] px-[15px] py-[14px] text-justify"
+        :class="{
+          '!bg-[#fff]': isAgentMessage,
+        }"
+      >
+        <h2 class="font-600 text-[15px] text-[#0B7DFF]">出差表单</h2>
+
+        <div class="mt-[12px]">
+          <n-form :model="formModel" :rules="formRules" label-width="90" label-placement="left" :show-feedback="false">
+            <n-form-item class="mb-[10px]" label="出差目的" path="objective">
+              <n-select v-model:value="formModel.objective" placeholder="Select" :options="objectiveOptions" />
+            </n-form-item>
+
+            <n-form-item class="mb-[10px]" label="出差地点" path="travelLocation">
+              <n-input v-model:value="formModel.travelLocation" placeholder="Input" />
+            </n-form-item>
+
+            <n-form-item class="mb-[10px]" label="出发时间" path="departureTime">
+              <n-date-picker v-model:value="formModel.departureTime" type="datetime" />
+            </n-form-item>
+
+            <n-form-item label="返回时间" path="returnTime">
+              <n-date-picker v-model:value="formModel.returnTime" type="datetime" />
+            </n-form-item>
+
+            <n-form-item label="">
+              <div class="h-[1px] w-full bg-[#B1B1B1] opacity-45"></div>
+            </n-form-item>
+
+            <n-form-item class="mb-[10px]" label="交通工具" path="vehicle">
+              <n-input v-model:value="formModel.vehicle" placeholder="Input" />
+            </n-form-item>
+
+            <n-form-item label="预计费用" path="vehicleEstimatedCost">
+              <n-input v-model:value="formModel.vehicleEstimatedCost" placeholder="Input" />
+            </n-form-item>
+
+            <n-form-item label="">
+              <div class="h-[1px] w-full bg-[#B1B1B1] opacity-45"></div>
+            </n-form-item>
+
+            <n-form-item class="mb-[10px]" label="住宿地点" path="residence">
+              <n-input v-model:value="formModel.residence" placeholder="Input" />
+            </n-form-item>
+
+            <n-form-item label="预计费用" path="residenceEstimatedCost">
+              <n-input v-model:value="formModel.residenceEstimatedCost" placeholder="Input" />
+            </n-form-item>
+
+            <n-form-item label="">
+              <div class="h-[1px] w-full bg-[#B1B1B1] opacity-45"></div>
+            </n-form-item>
+
+            <n-form-item class="mb-[10px]" label="预计金额" path="residence">
+              <n-input v-model:value="formModel.estimatedAmount" placeholder="Input" />
+            </n-form-item>
+
+            <n-form-item label="总预算" path="generalBudget">
+              <n-input v-model:value="formModel.generalBudget" placeholder="Input" />
+            </n-form-item>
+
+            <n-form-item label="">
+              <div class="h-[1px] w-full bg-[#B1B1B1] opacity-45"></div>
+            </n-form-item>
+
+            <n-form-item class="mb-[10px]" label="邮箱信息" path="email">
+              <n-input v-model:value="formModel.email" placeholder="Input" />
+            </n-form-item>
+
+            <div class="mt-[30px] text-end">
+              <n-button type="primary">确认提交</n-button>
+            </div>
+          </n-form>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

src/views/personal-space/personal-app-setting/components/agent-config/agent-preview/components/smart-forms/index.vue

+<script setup lang="ts">
+import BusinessTripForm from './components/business-trip-form.vue'
+// import BusinessTripReimbursementForm from './business-trip-reimbursement-form.vue'
+
+interface Props {
+  isAgentMessage: boolean
+  messageAuthor: string
+  messageItem: ConversationMessageItem
+  currentBubbleTextColor: string
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <BusinessTripForm
+    :message-item="messageItem"
+    :is-agent-message="isAgentMessage"
+    :message-author="messageAuthor"
+    :current-bubble-text-color="currentBubbleTextColor"
+  />
+
+  <!-- <BusinessTripReimbursementForm
+    :is-agent-message="isAgentMessage"
+    :message-item="messageItem"
+    :current-bubble-text-color="currentBubbleTextColor"
+  /> -->
+</template>

src/views/personal-space/personal-app-setting/components/agent-config/agent-preview/components/smart-forms/types/types.d.ts

+export interface ResponseBusinessTripForm {
+  purpose: string
+  place: string
+  departureDate: string
+  returnDate: string
+  vehicle: string
+  transportationFee: string
+  accommodation: string
+  accommodationCost: string
+  advancePaymentAmount: string
+  totalBudget: string
+}
+
+export interface BusinessTripForm {
+  objective: string
+  travelLocation: string
+  departureTime: number | null
+  returnTime: number | null
+  vehicle: string
+  vehicleEstimatedCost: number | null
+  residence: string
+  residenceEstimatedCost: number | null
+  advancePaymentAmount: number | null
+  generalBudget: string
+  email: string
+}
+
+export type SmartFormDisplayFormat = 'travelForm'

src/views/personal-space/personal-app-setting/components/agent-config/agent-preview/components/smart-forms/utils/smart-forms.ts

+import type { SmartFormTypes } from '../../../../types'
+import { BusinessTripForm, ResponseBusinessTripForm } from '../types/types'
+
+export function smartFormTypeConverter(type: 'travelForm'): SmartFormTypes {
+  switch (type) {
+    case 'travelForm':
+      return 'BusinessTripForm'
+  }
+}
+
+export function businessTripFormParser(resForm: Partial<ResponseBusinessTripForm>) {
+  return {
+    objective: resForm.purpose || 'CustomerVisits',
+    travelLocation: resForm.place || '',
+    departureTime: resForm.departureDate ? Date.parse(resForm.departureDate) : null,
+    returnTime: resForm.returnDate ? Date.parse(resForm.returnDate) : null,
+    vehicle: resForm.vehicle || '',
+    vehicleEstimatedCost: resForm.transportationFee ? Number.parseInt(resForm.transportationFee) : null,
+    residence: resForm.accommodation || '',
+    residenceEstimatedCost: resForm.accommodationCost ? Number.parseInt(resForm.accommodationCost) : null,
+    advancePaymentAmount: resForm.advancePaymentAmount ? Number.parseInt(resForm.advancePaymentAmount) : null,
+    generalBudget: resForm.totalBudget || '',
+    email: '',
+  }
+}
+
+export function businessTripFormReturner(form: BusinessTripForm) {
+  return {
+    purpose: form.objective,
+    place: form.travelLocation,
+    departureDate: form.departureTime ? new Date(form.departureTime).toISOString() : '',
+    returnDate: form.returnTime ? new Date(form.returnTime).toISOString() : '',
+    vehicle: form.vehicle,
+    transportationFee: form.vehicleEstimatedCost,
+    accommodation: form.residence,
+    accommodationCost: form.residenceEstimatedCost,
+    advancePaymentAmount: form.advancePaymentAmount,
+    totalBudget: form.generalBudget,
+    email: form.email,
+  }
+}

src/views/personal-space/personal-app-setting/components/agent-config/types.d.ts

@@ -10,3 +10,5 @@ export interface TimbreLanguageInfoItem {
   matchLang: string
   timbreInfo: TimbreInfoItem[]
 }
+
+export type SmartFormTypes = 'BusinessTripForm'

src/views/share/components/footer-input.vue

@@ -13,6 +13,9 @@ import { useLayoutConfig } from '@/composables/useLayoutConfig'
 import { TEXTTOSPEECH_WS_URL } from '@/config/base-url'
 import WebSocketCtr from '@/utils/web-socket-ctr'
 import { ChannelType } from '@/enums/channel'
+import { smartFormTypeConverter } from '@/views/personal-space/personal-app-setting/components/agent-config/agent-preview/components/smart-forms/utils/smart-forms'
+import { SmartFormTypes } from '@/views/personal-space/personal-app-setting/components/agent-config/types'
+import { SmartFormDisplayFormat } from '@/views/personal-space/personal-app-setting/components/agent-config/agent-preview/components/smart-forms/types/types'
 
 interface Props {
   agentId: string
@@ -43,6 +46,7 @@ const emit = defineEmits<{
   resetContinueQuestionList: []
   audioPlay: [messageItem: ConversationMessageItem, requestId?: string]
   audioPause: []
+  smartFormsStatusFreezeCheck: [value: SmartFormTypes]
 }>()
 
 const { isMobile } = useLayoutConfig()
@@ -63,6 +67,7 @@ const sentenceExtractCheckEnabled = ref(false)
 const assistantFullAnswerContent = ref('')
 const sentenceSpeechException = ref(false)
 const messageAudioLoading = ref(false)
+const isSmartFormPlugins = ref(false)
 const currentLatestMessageItemKeyMap = ref(new Map<'assistant' | 'user', string>())
 
 let controller: AbortController | null = null
@@ -221,6 +226,7 @@ function handleMessageSend(lastQuestionContent?: string) {
   assistantFullAnswerContent.value = ''
   sentenceSpeechException.value = false
   messageAudioLoading.value = false
+  isSmartFormPlugins.value = false
 
   controller = new AbortController()
 
@@ -246,6 +252,31 @@ function handleMessageSend(lastQuestionContent?: string) {
 
       // 插件
       if (data.function && data.function.name) {
+        // 表单插件，展示表单内容
+        if (['travelForm'].includes(data.function.displayFormat)) {
+          emit(
+            'smartFormsStatusFreezeCheck',
+            smartFormTypeConverter(data.function.displayFormat as SmartFormDisplayFormat),
+          )
+
+          emit('updateSpecifyMessageItem', latestAssistantMessageKey, {
+            pluginResult: {
+              displayFormat: data.function.displayFormat,
+              pluginName: data.function.name,
+              arguments: data.function.arguments,
+              pluginContent: data.function.result,
+            },
+            smartFormInfo: {
+              type: smartFormTypeConverter(data.function.displayFormat as SmartFormDisplayFormat),
+              isDisabled: false,
+              params: data.function.result,
+            },
+          })
+          emit('updatePageScroll')
+          isSmartFormPlugins.value = true
+          return
+        }
+
         emit('updateSpecifyMessageItem', latestAssistantMessageKey, {
           pluginResult: {
             displayFormat: data.function.displayFormat,
@@ -280,7 +311,7 @@ function handleMessageSend(lastQuestionContent?: string) {
           '',
         )
 
-        if (!sentenceExtractCheckEnabled.value && props.isEnableVoice) {
+        if (!sentenceExtractCheckEnabled.value && props.isEnableVoice && !isSmartFormPlugins.value) {
           sentenceExtract(latestAssistantMessageKey)
           sentenceExtractCheckEnabled.value = true
           messageAudioLoading.value = true

src/views/share/components/message-item.vue

 <script setup lang="ts">
-import { computed, ref, useTemplateRef } from 'vue'
+import { computed, provide, readonly, ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { throttle } from 'lodash-es'
 import { Down } from '@icon-park/vue-next'
@@ -13,9 +13,10 @@ import { PersonalAppConfigState } from '@/store/types/personal-app-config'
 import { useLayoutConfig } from '@/composables/useLayoutConfig'
 import { useUserStore } from '@/store/modules/user'
 import { copyToClip } from '@/utils/copy'
+import SmartForms from '@/views/personal-space/personal-app-setting/components/agent-config/agent-preview/components/smart-forms/index.vue'
 
 interface Props {
-  role: 'user' | 'assistant'
+  messageItemId: string
   messageItem: ConversationMessageItem
   agentApplicationConfig: PersonalAppConfigState
 }
@@ -35,10 +36,14 @@ const { isMobile } = useLayoutConfig()
 
 const markdownRenderRef = useTemplateRef<InstanceType<typeof MarkdownRender>>('markdownRenderRef')
 
+provide('messageItemId', props.messageItemId)
+
 const isShowReasoningContent = ref(true)
 const isShowEditorDrawer = ref(false)
 const editorDrawerContent = ref('')
 
+const displaySmartFormsList = readonly(['travelForm'])
+
 const useAvatar = computed(() => {
   return userStore.userInfo.avatarUrl || 'https://gsst-poe-sit.gz.bcebos.com/data/20240910/1725952917468.png'
 })
@@ -50,12 +55,31 @@ const assistantAvatar = computed(() => {
   )
 })
 
+const isAgentMessage = computed(() => {
+  return props.messageItem.role === 'assistant'
+})
+
+const currentBubbleTextColor = computed(() => {
+  return isAgentMessage.value ? '#192338' : '#fff'
+})
+
+const isShowSmartForms = computed(() => {
+  if (props.messageItem?.pluginResult?.displayFormat) {
+    return displaySmartFormsList.includes(props.messageItem?.pluginResult?.displayFormat)
+  }
+  return false
+})
+
+const messageAuthor = computed(() => {
+  return isAgentMessage.value ? props.messageItem.modelName || 'AI' : userStore.userInfo.nickName
+})
+
 const timbreEnabled = computed(() => {
   return !!props.agentApplicationConfig.voiceConfig.timbreId
 })
 
 const isShowAudioControl = computed(() => {
-  return props.role === 'assistant' && !props.messageItem.isVoiceLoading && timbreEnabled.value
+  return isAgentMessage.value && !props.messageItem.isVoiceLoading && timbreEnabled.value
 })
 
 const isPlayableAudio = computed(() => {
@@ -64,7 +88,7 @@ const isPlayableAudio = computed(() => {
 
 const isShowVoiceLoading = computed(() => {
   return (
-    props.role === 'assistant' &&
+    isAgentMessage.value &&
     (props.messageItem.isAnswerResponseLoading || (props.messageItem.isVoiceLoading && timbreEnabled.value))
   )
 })
@@ -113,14 +137,11 @@ const handleContentCopy = throttle(
 <template>
   <div
     class="mb-5 flex last:mb-0"
-    :class="[
-      isMobile ? 'flex-row-reverse' : 'flex-row',
-      role === 'assistant' && isMobile ? 'justify-end' : 'justify-start',
-    ]"
+    :class="[isMobile ? 'flex-row-reverse' : 'flex-row', isAgentMessage && isMobile ? 'justify-end' : 'justify-start']"
   >
     <NImage
       v-show="!isMobile"
-      :src="role === 'user' ? useAvatar : assistantAvatar"
+      :src="isAgentMessage ? assistantAvatar : useAvatar"
       preview-disabled
       :width="32"
       :height="32"
@@ -129,11 +150,12 @@ const handleContentCopy = throttle(
     />
 
     <div
+      v-if="!isShowSmartForms"
       class="flex flex-col overflow-x-auto"
-      :class="[isMobile && role === 'user' ? 'items-end' : 'items-start', isMobile ? 'w-full' : '']"
+      :class="[isMobile && !isAgentMessage ? 'items-end' : 'items-start', isMobile ? 'w-full' : '']"
     >
       <!-- 大模型深度思考 -->
-      <template v-if="role === 'assistant' && isDeepSeekR1">
+      <template v-if="isAgentMessage && isDeepSeekR1">
         <div class="my-[7px] select-none text-[14px]">
           <div class="inline-flex cursor-pointer" @click="handleShowReasoningContentSwitch">
             <span v-if="messageItem.isTextContentLoading" class="mr-[6px]">
@@ -174,17 +196,17 @@ const handleContentCopy = throttle(
       <!-- 模型内容 -->
       <div class="flex min-w-[80px] flex-col" :class="[isMobile ? 'max-w-[calc(100%-20px)]' : 'max-w-full']">
         <div
-          class="w-full flex-wrap rounded-xl border border-[#e8e9eb] px-4 py-[11px]"
-          :class="[role === 'user' ? 'user-content-container bg-[#777EF9] text-white' : 'bg-white text-[#333]']"
+          class="w-full flex-wrap rounded-xl border border-[#9EA3FF] px-4 py-[11px]"
+          :class="[isAgentMessage ? 'bg-white text-[#333]' : 'user-content-container bg-[#777EF9] text-white']"
         >
           <img
-            v-show="role === 'user' && messageItem.imageUrl"
+            v-show="!isAgentMessage && messageItem.imageUrl"
             :src="messageItem.imageUrl"
             class="max-h-[120px]! mb-[11px] rounded-[10px] object-contain"
           />
 
           <!-- 插件返回结果 -->
-          <div v-show="role === 'assistant' && messageItem?.pluginResult?.pluginName" class="mb-[11px] w-full">
+          <div v-show="isAgentMessage && messageItem?.pluginResult?.pluginName" class="mb-[11px] w-full">
             <ExecutePluginRender
               :display-format="messageItem.pluginResult?.displayFormat || 'none'"
               :name="messageItem.pluginResult?.pluginName!"
@@ -215,7 +237,7 @@ const handleContentCopy = throttle(
                     ? t('common_module.dialogue_module.empty_message_content')
                     : messageItem.textContent
                 "
-                :color="role === 'user' ? '#fff' : '#192338'"
+                :color="currentBubbleTextColor"
               />
             </p>
 
@@ -280,7 +302,7 @@ const handleContentCopy = throttle(
           <div></div>
 
           <div
-            v-show="role === 'assistant' && messageItem.textContent && !messageItem.isAnswerResponseLoading"
+            v-show="isAgentMessage && messageItem.textContent && !messageItem.isAnswerResponseLoading"
             class="py-[10px] pr-[14px] text-end"
           >
             <i
@@ -295,6 +317,14 @@ const handleContentCopy = throttle(
         </div>
       </div>
     </div>
+
+    <SmartForms
+      v-else
+      :message-author="messageAuthor"
+      :is-agent-message="isAgentMessage"
+      :message-item="messageItem"
+      :current-bubble-text-color="currentBubbleTextColor"
+    />
   </div>
 
   <EditorDrawer v-model:is-show-editor-drawer="isShowEditorDrawer" v-model:content-edit="editorDrawerContent" />

src/views/share/components/message-list.vue

 <script setup lang="ts">
-import { computed, nextTick, useTemplateRef, watch } from 'vue'
+import { computed, nextTick, provide, useTemplateRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useElementVisibility } from '@vueuse/core'
 import MessageItem from './message-item.vue'
@@ -20,9 +20,10 @@ interface Props {
 
 const props = defineProps<Props>()
 
-defineEmits<{
+const emit = defineEmits<{
   audioPlay: [messageItem: ConversationMessageItem]
   audioPause: []
+  updateSpecifyMessageItem: [messageId: string, newMessageItem: Partial<ConversationMessageItem>]
 }>()
 
 const { t } = useI18n()
@@ -33,6 +34,12 @@ const { scrollRef, scrollToBottom } = useScroll()
 const backBottomBtnFlagRef = useTemplateRef<HTMLDivElement | null>('backBottomBtnFlagRef')
 const isNotShowBackBottomBtn = useElementVisibility(backBottomBtnFlagRef)
 
+provide('updateSpecifyMessageItem', {
+  updateSpecifyMessageItem: (messageId: string, newMessageItem: Partial<ConversationMessageItem>) => {
+    emit('updateSpecifyMessageItem', messageId, newMessageItem)
+  },
+})
+
 const isShowContinueQuestion = computed(() => {
   return (
     props.continuousQuestionStatus === 'default' &&
@@ -71,7 +78,7 @@ function handleScrollToBottom() {
       <MessageItem
         v-for="[key, messageItem] in messageList"
         :key="key"
-        :role="messageItem.role"
+        :message-item-id="key"
         :message-item="messageItem"
         :agent-application-config="agentApplicationConfig"
         @audio-play="() => $emit('audioPlay', messageItem)"

src/views/share/share-application-web.vue

@@ -22,6 +22,7 @@ import { useLayoutConfig } from '@/composables/useLayoutConfig'
 import { fetchGetMemberInfoById } from '@/apis/user'
 import { UserInfo } from '@/store/types/user'
 import { validBrowser } from '@/utils/browser-detection'
+import { SmartFormTypes } from '../personal-space/personal-app-setting/components/agent-config/types'
 
 const { t } = useI18n()
 
@@ -177,9 +178,7 @@ function handleUpdateSpecifyMessageItem(messageId: string, newMessageItem: Parti
     }
 
     Object.entries<ValueOf<typeof newMessageItem>>(newMessageItem).forEach(([key, value]) => {
-      if (Object.prototype.hasOwnProperty.call(currentMessageItemInfo, key)) {
       ;(currentMessageItemInfo as any)[key as keyof ConversationMessageItem] = value
-      }
     })
   }
 }
@@ -313,6 +312,17 @@ function handleAudioPause(isClearMessageList = false) {
     footerInputRef.value?.blockMessageResponse()
   }
 }
+
+function onSmartFormsStatusFreezeCheck(smartFormType: SmartFormTypes) {
+  /* 重置智能表单项目 */
+  if (smartFormType) {
+    messageList.value.forEach((item) => {
+      if (item.smartFormInfo && item.smartFormInfo.type === smartFormType) {
+        item.smartFormInfo.isDisabled = true
+      }
+    })
+  }
+}
 </script>
 
 <template>
@@ -352,6 +362,7 @@ function handleAudioPause(isClearMessageList = false) {
                 :create-continue-questions-exception="createContinueQuestionsException"
                 @audio-play="handleAudioPlay"
                 @audio-pause="handleAudioPause"
+                @update-specify-message-item="handleUpdateSpecifyMessageItem"
               />
             </div>
           </div>
@@ -380,6 +391,7 @@ function handleAudioPause(isClearMessageList = false) {
               @reset-continue-question-list="handleResetContinueQuestionList"
               @audio-play="handleAudioPlay"
               @audio-pause="handleAudioPause"
+              @smart-forms-status-freeze-check="onSmartFormsStatusFreezeCheck"
             />
           </div>
         </div>

types/conversation.d.ts

@@ -12,6 +12,8 @@ declare interface DBChainResultItem {
   status: string
 }
 
+declare type PluginDisplayFormatType = 'json' | 'markdown' | 'none' | 'travelForm'
+
 declare interface ConversationMessageItem {
   timestamp: number
   role: 'user' | 'assistant'
@@ -29,9 +31,14 @@ declare interface ConversationMessageItem {
   knowledgeContentResult: KnowledgeContentResultItem[]
   dbChainSQLContent: string
   pluginResult?: {
-    displayFormat: 'json' | 'markdown' | 'none'
+    displayFormat: PluginDisplayFormatType
     pluginName: string
     arguments: string
     pluginContent: string
   }
+  smartFormInfo?: {
+    type: 'BusinessTripForm' | ''
+    isDisabled: boolean
+    params: string
+  }
 }