feat: Add mobile mode to the conversation, support ctrl/shift/cmd/opt+enter for new line (#2615)

Author: wangdan-fit2cloud

ui/src/assets/window3.png

@@ -525,23 +525,25 @@ function autoSendMessage() {
 }
 
 function sendChatHandle(event?: any) {
-  if (!event?.ctrlKey) {
-    // 如果没有按下组合键ctrl，则会阻止默认事件
+  if (!event?.ctrlKey && !event?.shiftKey && !event?.altKey && !event?.metaKey) {
+    // 如果没有按下组合键，则会阻止默认事件
     event?.preventDefault()
     if (!isDisabledChat.value && !props.loading && !event?.isComposing) {
       if (inputValue.value.trim()) {
         autoSendMessage()
       }
     }
   } else {
-    // 如果同时按下ctrl+回车键，则会换行
-    insertNewlineAtCursor()
+    // 如果同时按下ctrl/shift/cmd/opt +enter，则会换行
+    insertNewlineAtCursor(event)
   }
 }
-const insertNewlineAtCursor = () => {
+const insertNewlineAtCursor = (event?: any) => {
   const textarea = document.querySelector('.el-textarea__inner') as HTMLTextAreaElement
   const startPos = textarea.selectionStart
   const endPos = textarea.selectionEnd
+  // 阻止默认行为（避免额外的换行符）
+  event.preventDefault()
   // 在光标处插入换行符
   inputValue.value = inputValue.value.slice(0, startPos) + '\n' + inputValue.value.slice(endPos)
   nextTick(() => {

ui/src/components/ai-chat/component/chat-input-operate/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div ref="aiChatRef" class="ai-chat" :class="type">
     <div
-      v-show="(isUserInput && firsUserInput) || showUserInput"
+      v-show="showUserInputContent"
       :class="firsUserInput ? 'firstUserInput' : 'popperUserInput'"
     >
       <UserForm
@@ -15,7 +15,7 @@
         ref="userFormRef"
       ></UserForm>
     </div>
-    <template v-if="!isUserInput || !firsUserInput">
+    <template v-if="!isUserInput || !firsUserInput || type === 'log'">
       <el-scrollbar ref="scrollDiv" @scroll="handleScrollTop">
         <div ref="dialogScrollbar" class="ai-chat__content p-24">
           <PrologueContent
@@ -62,7 +62,13 @@
             <slot name="operateBefore">
               <span></span>
             </slot>
-            <el-button class="user-input-button mb-8" type="primary" text @click="toggleUserInput">
+            <el-button
+              v-if="isUserInput"
+              class="user-input-button mb-8"
+              type="primary"
+              text
+              @click="toggleUserInput"
+            >
               <AppIcon iconName="app-user-input"></AppIcon>
             </el-button>
           </div>
@@ -114,7 +120,7 @@ const props = withDefaults(
 const emit = defineEmits(['refresh', 'scroll'])
 const { application, common } = useStore()
 const isMobile = computed(() => {
-  return common.isMobile() || mode === 'embed'
+  return common.isMobile() || mode === 'embed' || mode === 'mobile'
 })
 const aiChatRef = ref()
 const scrollDiv = ref()
@@ -135,7 +141,9 @@ const isUserInput = computed(
     props.applicationDetails.work_flow?.nodes?.filter((v: any) => v.id === 'base-node')[0]
       .properties.user_input_field_list.length > 0
 )
-
+const showUserInputContent = computed(() => {
+  return ((isUserInput.value && firsUserInput.value) || showUserInput.value) && props.type !== 'log'
+})
 watch(
   () => props.chatId,
   (val) => {

ui/src/components/ai-chat/index.vue

@@ -48,7 +48,7 @@ export default {
   inputPlaceholder: {
     speaking: 'Speaking...',
     recorderLoading: 'Transcribing...',
-    default: 'Type your question, Ctrl+Enter for a new line'
+    default: 'Type your question'
   },
   uploadFile: {
     label: 'Upload File',

ui/src/locales/lang/en-US/ai-chat.ts

@@ -41,7 +41,8 @@ export default {
     EmbedDialog: {
       fullscreenModeTitle: 'Fullscreen Mode',
       copyInstructions: 'Copy the code below to embed',
-      floatingModeTitle: 'Floating Mode'
+      floatingModeTitle: 'Floating Mode',
+      mobileModeTitle: 'Mobile Mode'
     },
     LimitDialog: {
       dialogTitle: 'Access Restrictions',

ui/src/locales/lang/en-US/views/application-overview.ts

@@ -48,7 +48,7 @@ export default {
   inputPlaceholder: {
     speaking: '说话中',
     recorderLoading: '转文字中',
-    default: '请输入问题，Ctrl+Enter 换行'
+    default: '请输入问题'
   },
   uploadFile: {
     label: '上传文件',

ui/src/locales/lang/zh-CN/ai-chat.ts

@@ -40,7 +40,8 @@ export default {
     EmbedDialog: {
       fullscreenModeTitle: '全屏模式',
       copyInstructions: '复制以下代码进行嵌入',
-      floatingModeTitle: '浮窗模式'
+      floatingModeTitle: '浮窗模式',
+      mobileModeTitle: '移动端模式'
     },
     LimitDialog: {
       showSourceLabel: '显示知识来源',

ui/src/locales/lang/zh-CN/views/application-overview.ts

@@ -48,7 +48,7 @@ export default {
   inputPlaceholder: {
     speaking: '說話中',
     recorderLoading: '轉文字中',
-    default: '請輸入問題，Ctrl+Enter 換行'
+    default: '請輸入問題'
   },
   uploadFile: {
     label: '上傳文件',

ui/src/locales/lang/zh-Hant/ai-chat.ts

@@ -39,7 +39,8 @@ export default {
     EmbedDialog: {
       fullscreenModeTitle: '全螢幕模式',
       copyInstructions: '複製以下程式碼進行嵌入',
-      floatingModeTitle: '浮窗模式'
+      floatingModeTitle: '浮窗模式',
+      mobileModeTitle: '移動端模式'
     },
     LimitDialog: {
       dialogTitle: '訪問限制',

ui/src/locales/lang/zh-Hant/views/application-overview.ts

@@ -7,8 +7,9 @@
     :close-on-click-modal="false"
     :close-on-press-escape="false"
   >
+  
     <el-row :gutter="12">
-      <el-col :span="12">
+      <el-col :span="8">
         <div class="border">
           <p class="title p-16 bold">
             {{ $t('views.applicationOverview.appInfo.EmbedDialog.fullscreenModeTitle') }}
@@ -31,7 +32,30 @@
           </div>
         </div>
       </el-col>
-      <el-col :span="12">
+      <el-col :span="8">
+        <div class="border">
+          <p class="title p-16 bold">
+            {{ $t('views.applicationOverview.appInfo.EmbedDialog.mobileModeTitle') }}
+          </p>
+          <img src="@/assets/window3.png" alt="" class="ml-8" height="150" />
+          <div class="code layout-bg border-t p-8">
+            <div class="flex-between p-8">
+              <span class="bold">{{
+                $t('views.applicationOverview.appInfo.EmbedDialog.copyInstructions')
+              }}</span>
+              <el-button text @click="copyClick(source3)">
+                <AppIcon iconName="app-copy"></AppIcon>
+              </el-button>
+            </div>
+            <el-scrollbar height="150" always>
+              <div class="pre-wrap p-8 pt-0">
+                {{ source3 }}
+              </div>
+            </el-scrollbar>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="8">
         <div class="border">
           <p class="title p-16 bold">
             {{ $t('views.applicationOverview.appInfo.EmbedDialog.floatingModeTitle') }}
@@ -76,6 +100,7 @@ const dialogVisible = ref<boolean>(false)
 const source1 = ref('')
 
 const source2 = ref('')
+const source3 = ref('')
 
 const urlParams1 = computed(() => (props.apiInputParams ? '?' + props.apiInputParams : ''))
 const urlParams2 = computed(() => (props.apiInputParams ? '&' + props.apiInputParams : ''))
@@ -84,6 +109,7 @@ watch(dialogVisible, (bool) => {
   if (!bool) {
     source1.value = ''
     source2.value = ''
+    source3.value = ''
   }
 })
 
@@ -105,6 +131,14 @@ src="${window.location.origin}/api/application/embed?protocol=${window.location.
   )}&host=${window.location.host}&token=${val}${urlParams2.value}">
 <\/script>
 `
+ source3.value = `<iframe
+src="${application.location + val + urlParams1.value}&mode=mobile"
+style="width: 100%; height: 100%;"
+frameborder="0"
+allow="microphone">
+</iframe>
+`
+
   dialogVisible.value = true
 }