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

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

@@ -525,8 +525,8 @@ 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()) {
@@ -534,14 +534,16 @@ function sendChatHandle(event?: any) {
       }
     }
   } 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/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/locales/lang/en-US/ai-chat.ts

@@ -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/views/application-overview.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/zh-CN/ai-chat.ts

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

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

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

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

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

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

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

ui/src/views/application-overview/component/EmbedDialog.vue

@@ -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
 }
 

ui/src/views/chat/index.vue

@@ -41,10 +41,10 @@ const {
 const is_auth = ref<boolean>(false)
 const currentTemplate = computed(() => {
   let modeName = ''
-  if (mode && mode === 'embed') {
-    modeName = 'embed'
-  } else {
+  if (!mode || mode === 'pc') {
     modeName = show_history.value || !user.isEnterprise() ? 'pc' : 'base'
+  } else {
+    modeName = mode
   }
   const name = `/src/views/chat/${modeName}/index.vue`
   return components[name].default

ui/src/views/chat/mobile/index.vue

@@ -0,0 +1,400 @@
+<template>
+  <div
+    class="chat-embed layout-bg"
+    v-loading="loading"
+    :style="{
+      '--el-color-primary': applicationDetail?.custom_theme?.theme_color,
+      '--el-color-primary-light-9': hexToRgba(applicationDetail?.custom_theme?.theme_color, 0.1)
+    }"
+  >
+    <div class="chat-embed__header" :style="customStyle">
+      <div class="flex align-center">
+        <div class="mr-12 ml-24 flex">
+          <AppAvatar
+            v-if="isAppIcon(applicationDetail?.icon)"
+            shape="square"
+            :size="32"
+            style="background: none"
+          >
+            <img :src="applicationDetail?.icon" alt="" />
+          </AppAvatar>
+          <AppAvatar
+            v-else-if="applicationDetail?.name"
+            :name="applicationDetail?.name"
+            pinyinColor
+            shape="square"
+            :size="32"
+          />
+        </div>
+
+        <h4>{{ applicationDetail?.name }}</h4>
+      </div>
+    </div>
+    <div>
+      <div class="chat-embed__main">
+        <AiChat
+          ref="AiChatRef"
+          v-model:applicationDetails="applicationDetail"
+          :available="applicationAvailable"
+          :appId="applicationDetail?.id"
+          :record="currentRecordList"
+          :chatId="currentChatId"
+          type="ai-chat"
+          @refresh="refresh"
+          @scroll="handleScroll"
+          class="AiChat-embed"
+        >
+          <template #operateBefore>
+            <div>
+              <el-button type="primary" link class="new-chat-button mb-8" @click="newChat">
+                <el-icon><Plus /></el-icon><span class="ml-4">{{ $t('chat.createChat') }}</span>
+              </el-button>
+            </div>
+          </template>
+        </AiChat>
+      </div>
+
+      <!-- 历史记录弹出层 -->
+      <div
+        v-if="applicationDetail.show_history || !user.isEnterprise()"
+        @click.prevent.stop="show = !show"
+        class="chat-popover-button cursor color-secondary"
+      >
+        <AppIcon
+          iconName="app-history-outlined"
+          :style="{
+            color: applicationDetail?.custom_theme?.header_font_color
+          }"
+        ></AppIcon>
+      </div>
+
+      <el-collapse-transition>
+        <div v-show="show" class="chat-popover w-full" v-click-outside="clickoutside">
+          <div class="border-b p-16-24">
+            <span>{{ $t('chat.history') }}</span>
+          </div>
+
+          <el-scrollbar max-height="300">
+            <div class="p-8">
+              <common-list
+                :style="{ '--el-color-primary': applicationDetail?.custom_theme?.theme_color }"
+                :data="chatLogData"
+                v-loading="left_loading"
+                :defaultActive="currentChatId"
+                @click="clickListHandle"
+                @mouseenter="mouseenter"
+                @mouseleave="mouseId = ''"
+              >
+                <template #default="{ row }">
+                  <div class="flex-between">
+                    <ReadWrite
+                      @change="editName($event, row)"
+                      :data="row.abstract"
+                      trigger="manual"
+                      :write="row.writeStatus"
+                      @close="closeWrite(row)"
+                      :maxlength="1024"
+                    />
+                    <div
+                      @click.stop
+                      v-if="mouseId === row.id && row.id !== 'new' && !row.writeStatus"
+                      class="flex"
+                    >
+                      <el-button style="padding: 0" link @click.stop="openWrite(row)">
+                        <el-icon><EditPen /></el-icon>
+                      </el-button>
+                      <el-button style="padding: 0" link @click.stop="deleteLog(row)">
+                        <el-icon><Delete /></el-icon>
+                      </el-button>
+                    </div>
+                  </div>
+                </template>
+                <template #empty>
+                  <div class="text-center mt-24">
+                    <el-text type="info">{{ $t('chat.noHistory') }}</el-text>
+                  </div>
+                </template>
+              </common-list>
+            </div>
+            <div v-if="chatLogData.length" class="gradient-divider lighter mt-8">
+              <span>{{ $t('chat.only20history') }}</span>
+            </div>
+          </el-scrollbar>
+        </div>
+      </el-collapse-transition>
+      <div class="chat-popover-mask" v-show="show"></div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, reactive, nextTick, computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { isAppIcon } from '@/utils/application'
+import { hexToRgba } from '@/utils/theme'
+import { MsgError } from '@/utils/message'
+import useStore from '@/stores'
+import { t } from '@/locales'
+const { user, log } = useStore()
+
+const AiChatRef = ref()
+const loading = ref(false)
+const left_loading = ref(false)
+const chatLogData = ref<any[]>([])
+const show = ref(false)
+const props = defineProps<{
+  application_profile: any
+  applicationAvailable: boolean
+}>()
+const applicationDetail = computed({
+  get: () => {
+    return props.application_profile
+  },
+  set: (v) => {}
+})
+const paginationConfig = reactive({
+  current_page: 1,
+  page_size: 20,
+  total: 0
+})
+
+const currentRecordList = ref<any>([])
+const currentChatId = ref('new') // 当前历史记录Id 默认为'new'
+
+const mouseId = ref('')
+
+const customStyle = computed(() => {
+  return {
+    background: applicationDetail.value?.custom_theme?.theme_color,
+    color: applicationDetail.value?.custom_theme?.header_font_color
+  }
+})
+
+function editName(val: string, item: any) {
+  if (val) {
+    const obj = {
+      abstract: val
+    }
+
+    log.asyncPutChatClientLog(applicationDetail.value.id, item.id, obj, loading).then(() => {
+      const find = chatLogData.value.find((item: any) => item.id == item.id)
+      if (find) {
+        find.abstract = val
+      }
+      item['writeStatus'] = false
+    })
+  } else {
+    MsgError(t('views.applicationWorkflow.tip.nameMessage'))
+  }
+}
+
+function openWrite(item: any) {
+  item['writeStatus'] = true
+}
+
+function closeWrite(item: any) {
+  item['writeStatus'] = false
+}
+
+function mouseenter(row: any) {
+  mouseId.value = row.id
+}
+function deleteLog(row: any) {
+  log.asyncDelChatClientLog(applicationDetail.value.id, row.id, left_loading).then(() => {
+    if (currentChatId.value === row.id) {
+      currentChatId.value = 'new'
+      paginationConfig.current_page = 1
+      paginationConfig.total = 0
+      currentRecordList.value = []
+    }
+    getChatLog(applicationDetail.value.id)
+  })
+}
+
+function handleScroll(event: any) {
+  if (
+    currentChatId.value !== 'new' &&
+    event.scrollTop === 0 &&
+    paginationConfig.total > currentRecordList.value.length
+  ) {
+    const history_height = event.dialogScrollbar.offsetHeight
+    paginationConfig.current_page += 1
+    getChatRecord().then(() => {
+      event.scrollDiv.setScrollTop(event.dialogScrollbar.offsetHeight - history_height)
+    })
+  }
+}
+
+function clickoutside() {
+  show.value = false
+}
+
+function newChat() {
+  paginationConfig.current_page = 1
+  currentRecordList.value = []
+  currentChatId.value = 'new'
+}
+
+function getChatLog(id: string) {
+  const page = {
+    current_page: 1,
+    page_size: 20
+  }
+
+  log.asyncGetChatLogClient(id, page, left_loading).then((res: any) => {
+    chatLogData.value = res.data.records
+    paginationConfig.current_page = 1
+    paginationConfig.total = 0
+    currentRecordList.value = []
+    currentChatId.value = chatLogData.value?.[0]?.id || 'new'
+    if (currentChatId.value !== 'new') {
+      getChatRecord()
+    }
+  })
+}
+
+function getChatRecord() {
+  return log
+    .asyncChatRecordLog(
+      applicationDetail.value.id,
+      currentChatId.value,
+      paginationConfig,
+      loading,
+      false
+    )
+    .then((res: any) => {
+      paginationConfig.total = res.data.total
+      const list = res.data.records
+      list.map((v: any) => {
+        v['write_ed'] = true
+        v['record_id'] = v.id
+      })
+      currentRecordList.value = [...list, ...currentRecordList.value].sort((a, b) =>
+        a.create_time.localeCompare(b.create_time)
+      )
+      if (paginationConfig.current_page === 1) {
+        nextTick(() => {
+          // 将滚动条滚动到最下面
+          AiChatRef.value.setScrollBottom()
+        })
+      }
+    })
+}
+
+const clickListHandle = (item: any) => {
+  if (item.id !== currentChatId.value) {
+    paginationConfig.current_page = 1
+    currentRecordList.value = []
+    currentChatId.value = item.id
+    if (currentChatId.value !== 'new') {
+      getChatRecord()
+    }
+    show.value = false
+  }
+}
+
+function refresh(id: string) {
+  getChatLog(applicationDetail.value.id)
+  currentChatId.value = id
+}
+/**
+ *初始化历史对话记录
+ */
+const init = () => {
+  if (applicationDetail.value.show_history || !user.isEnterprise()) {
+    getChatLog(applicationDetail.value.id)
+  }
+}
+
+onMounted(() => {
+  init()
+})
+</script>
+<style lang="scss">
+.chat-embed {
+  overflow: hidden;
+  &__header {
+    background: var(--app-header-bg-color);
+    position: fixed;
+    width: 100%;
+    left: 0;
+    top: 0;
+    z-index: 100;
+    height: var(--app-header-height);
+    line-height: var(--app-header-height);
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--el-border-color);
+  }
+  &__main {
+    padding-top: calc(var(--app-header-height) + 24px);
+    height: calc(100vh - var(--app-header-height) - 24px);
+    overflow: hidden;
+  }
+  .new-chat-button {
+    z-index: 11;
+  }
+  // 历史对话弹出层
+  .chat-popover {
+    position: absolute;
+    top: var(--app-header-height);
+    background: #ffffff;
+    padding-bottom: 24px;
+    z-index: 2009;
+  }
+  .chat-popover-button {
+    z-index: 2009;
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    font-size: 22px;
+  }
+  // &.chat-embed--popup {
+  //   .chat-popover-button {
+  //     right: 85px;
+  //   }
+  // }
+  .chat-popover-mask {
+    background-color: var(--el-overlay-color-lighter);
+    bottom: 0;
+    height: 100%;
+    left: 0;
+    overflow: auto;
+    position: fixed;
+    right: 0;
+    top: var(--app-header-height);
+    z-index: 2008;
+  }
+  .gradient-divider {
+    position: relative;
+    text-align: center;
+    color: var(--el-color-info);
+    ::before {
+      content: '';
+      width: 17%;
+      height: 1px;
+      background: linear-gradient(90deg, rgba(222, 224, 227, 0) 0%, #dee0e3 100%);
+      position: absolute;
+      left: 16px;
+      top: 50%;
+    }
+    ::after {
+      content: '';
+      width: 17%;
+      height: 1px;
+      background: linear-gradient(90deg, #dee0e3 0%, rgba(222, 224, 227, 0) 100%);
+      position: absolute;
+      right: 16px;
+      top: 50%;
+    }
+  }
+  .AiChat-embed {
+    .ai-chat__operate {
+      padding-top: 12px;
+    }
+  }
+}
+</style>
+<style lang="scss" scoped>
+:deep(.el-overlay) {
+  background-color: transparent;
+}
+</style>

ui/src/views/hit-test/index.vue

@@ -218,7 +218,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { reactive, ref, onMounted, computed } from 'vue'
+import { nextTick, ref, onMounted, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { cloneDeep } from 'lodash'
 import datasetApi from '@/api/dataset'
@@ -285,17 +285,30 @@ function editParagraph(row: any) {
 }
 
 function sendChatHandle(event: any) {
-  if (!event.ctrlKey) {
-    // 如果没有按下组合键ctrl，则会阻止默认事件
+  if (!event?.ctrlKey && !event?.shiftKey && !event?.altKey && !event?.metaKey) {
+    // 如果没有按下组合键，则会阻止默认事件
     event.preventDefault()
     if (!isDisabledChart.value && !loading.value) {
       getHitTestList()
     }
   } else {
-    // 如果同时按下ctrl+回车键，则会换行
-    inputValue.value += '\n'
+    // 如果同时按下ctrl/shift/cmd/opt +enter，则会换行
+    insertNewlineAtCursor(event)
   }
 }
+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(() => {
+    textarea.setSelectionRange(startPos + 1, startPos + 1) // 光标定位到换行后位置
+  })
+}
+
 function getHitTestList() {
   const obj = {
     query_text: inputValue.value,