Feat(云灵AI):对话接口对接完成

aiChat/components/bottomSend.vue

@@ -5,15 +5,6 @@
     }"
     class="fix-page-bottom"
   >
-    <view v-if="startTaskFlag" class="music-wrap">
-      <view class="item one" />
-      <view class="item two" />
-      <view class="item three" />
-      <view class="item four" />
-      <view class="item five" />
-      <view class="item six" />
-      <view class="item seven" />
-    </view>
     <view v-if="inputModel === 'input'" class="bottom-body flex-center-between">
       <view class="history-wrap" @click="historyViewHandle">
         历史
@@ -60,15 +51,44 @@
     <view
       v-if="inputModel === 'sound'"
       class="sound-input-wrap"
-      @touchstart="startRecord"
-      @touchend="stopRecord"
     >
-      <image
-        :src="webUrl + '/icon-20.png'"
-        class="icon"
-        mode="widthFix"
-      />
-      按住说话
+      <view class="toggle-btn">
+        <image
+          :src="webUrl + '/aiChat/icon-06.png'"
+          class="input-icon"
+          mode="widthFix"
+          @click="toggleInputModel"
+        />
+      </view>
+      <view
+        class="sound-wrap"
+        @touchstart="startRecord"
+        @touchend="stopRecord"
+      >
+        <view v-if="startTaskFlag" class="music-wrap">
+          <view class="item one" />
+          <view class="item two" />
+          <view class="item three" />
+          <view class="item four" />
+          <view class="item five" />
+          <view class="item six" />
+          <view class="item seven" />
+        </view>
+        <image
+          :src="webUrl + '/aiChat/microphone-big.png'"
+          class="icon"
+          mode="widthFix"
+        />
+        <view v-if="startTaskFlag" class="music-wrap music-wrap2">
+          <view class="item one" />
+          <view class="item two" />
+          <view class="item three" />
+          <view class="item four" />
+          <view class="item five" />
+          <view class="item six" />
+          <view class="item seven" />
+        </view>
+      </view>
     </view>
   </view>
 </template>
@@ -199,10 +219,9 @@ export default {
             _this.taskId = ''
             _this.clearIntervalFn()
             uni.uploadFile({
-              url: `${VUE_APP_API_URL + settings.sysPrefix}/common/file/local/upload`,
+              url: `${VUE_APP_API_URL}/api/upload`,
               filePath: tempFilePath,
               header: {
-                'client-id': 'app',
                 Authorization: 'Bearer ' + (_this.token || '')
               },
               name: 'file',
@@ -220,8 +239,10 @@ export default {
     },
     renderTransTask(uploadRes) {
       const _this = this
+      const file = JSON.parse(uploadRes.data).link || ''
+      if (!file) return
       makeFileTransTask({
-        file: `${VUE_APP_API_URL + settings.sysPrefix}` + JSON.parse(uploadRes.data).data.fileUrl
+        file
       }).then(taskRes => {
         _this.taskId = taskRes.data
         _this.getTransResultReq()

aiChat/components/historyList.vue

@@ -16,9 +16,11 @@
         <view class="title">
           <view class="txt">30天内</view>
           <image
+            v-if="list.length > 0"
             :src="webUrl + '/aiChat/delete.png'"
             class="icon"
             mode="widthFix"
+            @click="deleteRecords(2)"
           />
         </view>
         <view class="list-cont">
@@ -26,6 +28,31 @@
             v-for="(item, index) in list"
             :key="index"
             class="item"
+            @click="historyItemClick(item)"
+          >
+            <view class="item-txt one-t">
+              {{ item.title }}
+            </view>
+          </view>
+        </view>
+      </view>
+      <view class="history-type">
+        <view class="title">
+          <view class="txt">超过30天</view>
+          <image
+            v-if="moreList.length > 0"
+            :src="webUrl + '/aiChat/delete.png'"
+            class="icon"
+            mode="widthFix"
+            @click="deleteRecords(3)"
+          />
+        </view>
+        <view class="list-cont">
+          <view
+            v-for="(item, index) in moreList"
+            :key="index"
+            class="item"
+            @click="historyItemClick(item)"
           >
             <view class="item-txt one-t">
               {{ item.title }}
@@ -39,7 +66,8 @@
 
 <script>
 import {
-  getChatList
+  getChatList,
+  deleteChatListByType
 } from '@/api/chat/index'
 export default {
   name: 'AiHistoryList',
@@ -47,6 +75,11 @@ export default {
     statusBarHeight: {
       type: Number,
       default: 0
+    },
+    // 来源模块：''-首页,'history'-历史记录
+    formModule: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -60,14 +93,38 @@ export default {
   methods: {
     showView() {
       this.showLayer = true
+      this.getChatListReq()
+    },
+    getChatListReq() {
       getChatList().then(res => {
         const { success, data } = res
         if (success) {
-          this.list = data['今天']
+          this.list = data['30天内']
           this.moreList = data['超过30天']
         }
       })
     },
+    deleteRecords(type) {
+      deleteChatListByType(type).then(res => {
+        const { success } = res
+        if (success) {
+          this.getChatListReq()
+        }
+      })
+    },
+    historyItemClick(item) {
+      const paramsStr = `?chatNumber=${item.chatNumber}&title=${item.title}`
+      if (!this.formModule) {
+        uni.navigateTo({
+          url: '/aiChat/views/history' + paramsStr
+        })
+      } else {
+        uni.redirectTo({
+          url: '/aiChat/views/history' + paramsStr
+        })
+      }
+      this.closeLayer()
+    },
     closeLayer() {
       this.showLayer = false
     }

aiChat/mixins/chatMixins.js

@@ -86,6 +86,10 @@ export const chatMixins = {
     createdCallbak() {
       console.log('页面初始话回调')
     },
+    historyViewHandle() {
+      console.log(this.$refs.historyView)
+      this.$refs.historyView.showView()
+    },
     copyContentHandle(data) {
       uni.setClipboardData({
         data,

aiChat/views/history.vue

@@ -0,0 +1,349 @@
+<template>
+  <view
+    :class="scrollTop > 0 ? 'page-scroll' : ''"
+    class="fix-tabbar-page"
+  >
+    <hx-navbar
+      :back="true"
+      :fixed="true"
+      :statusBar="true"
+      :pageScroll.sync="scrollData"
+      :title="pageTitle"
+      color="#333"
+      transparent="auto"
+      barPlaceholder="hidden"
+    />
+    <view
+      id="fixTbabarBody"
+      :style="{
+        'padding-top': (44 + statusBarHeight) + 'px'
+      }"
+      class="fix-tabbar-body"
+    >
+      <view class="chat-wrap">
+        <view v-if="chatMessageListLength > 0" class="chat-list-wrap">
+          <view
+            v-for="(item, index) in chatMessageList"
+            :key="index"
+            class="chat-message-item"
+          >
+            <view v-if="item.type === -1" class="chat-message-body">
+              <view class="item-right">
+                <view class="txt">
+                  {{ item.prompt }}
+                </view>
+              </view>
+            </view>
+            <view v-if="item.type === -2" class="chat-message-body">
+              <view class="avatar">
+                <image
+                  :src="webUrl + '/aiChat/avatar.png'"
+                  class="chat-avatar"
+                  mode="widthFix"
+                />
+              </view>
+              <view class="item-left">
+                <view class="txt">
+                  <view
+                    ref="rich-text-box"
+                    :class="{
+                      'show-cursor': item.showCursor
+                    }"
+                    class="rich-text-box"
+                  >
+                    <rich-text
+                      v-if="item.nodes && item.nodes.length"
+                      :nodes="item.nodes"
+                      space="nbsp"
+                    />
+                    <view v-if="!(item.nodes && item.nodes.length) && loading" class="loader-wrap">
+                      <div class="loader" />
+                    </view>
+                  </view>
+                  <view
+                    v-if="!item.showCursor && item.nodes && item.nodes.length && !item.isError"
+                    class="bottom-btns"
+                  >
+                    <!-- <button
+                      open-type="share"
+                      plain="true"
+                      class="item"
+                      @click="shareHandle"
+                    >
+                      <image
+                        :src="webUrl + '/icon-25.png'"
+                        class="icon"
+                        mode="widthFix"
+                      />
+                      分享
+                    </button> -->
+                    <view class="item" @click="copyContentHandle(item.content)">
+                      <image
+                        :src="webUrl + '/aiChat/icon-02.png'"
+                        class="icon"
+                        mode="widthFix"
+                      />
+                      复制
+                    </view>
+                    <view
+                      v-if="index === (chatMessageListLength - 1)"
+                      class="item"
+                      @click="regenerateHandle(item)"
+                    >
+                      <image
+                        :src="webUrl + '/aiChat/icon-04.png'"
+                        class="icon"
+                        mode="widthFix"
+                      />
+                      重新生成
+                    </view>
+                  </view>
+                </view>
+              </view>
+              <view
+                v-if="index === (chatMessageListLength - 1) && item.listQuestion.length > 0"
+                class="suggestion-wrap"
+              >
+                <view class="suggestion-list">
+                  <view
+                    v-for="(question, questionIndex) in item.listQuestion"
+                    :key="questionIndex"
+                    class="item"
+                    @click="suggestionItemClickHandle(question)"
+                  >
+                    <view class="item-cont">
+                      <view class="txt">
+                        {{ question }}
+                      </view>
+                      <image
+                        :src="webUrl + '/aiChat/icon-03.png'"
+                        class="pic"
+                        mode="widthFix"
+                      />
+                    </view>
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+        <view id="bottom_postion" class="bottom-postion" />
+      </view>
+    </view>
+    <view class="page-to-bottom">
+      <image
+        v-if="chatMessageListLength > 0 && !isScrollToBottom && !loading"
+        :src="webUrl + '/aiChat/down.png'"
+        class="icon"
+        mode="widthFix"
+        @click="scrollToBottomHandle"
+      />
+    </view>
+    <bottom-send
+      ref="bottomSend"
+      :loading="loading"
+      @send="streamReq"
+      @history="historyViewHandle"
+    />
+    <AiHistoryList
+      ref="historyView"
+      :status-bar-height="statusBarHeight"
+      form-module="history"
+    />
+  </view>
+</template>
+
+<script>
+import { chatMixins } from '../mixins/chatMixins.js'
+import AiHistoryList from '../components/historyList'
+import BottomSend from '../components/bottomSend.vue'
+import {
+  historyChatMessage
+} from '@/api/chat/index'
+import { formatAiMsgContent } from '../utils/aiChat'
+export default {
+  name: 'AiChatHistoryPage',
+  components: {
+    AiHistoryList,
+    BottomSend
+  },
+  mixins: [chatMixins],
+  data() {
+    return {
+      pageTitle: ''
+    }
+  },
+  onLoad(optisons) {
+    console.log(optisons)
+    this.chatNumber = optisons.chatNumber
+    this.pageTitle = optisons.title
+    this.init()
+  },
+  methods: {
+    init() {
+      this.loading = true
+      historyChatMessage({
+        chatNumber: this.chatNumber
+      }).then(res => {
+        const { success, data = [] } = res
+        if (success) {
+          this.loading = false
+          try {
+            data.map(item => {
+              if (item.role === 'user') {
+                this.chatMessageList.push({
+                  type: -1,
+                  prompt: item.content
+                })
+              } else {
+                if (item.contentType === 'text') {
+                  this.chatMessageList.push({
+                    ...item,
+                    nodes: formatAiMsgContent(item.content),
+                    prompt: this.getParentPrompt(data, item.parentMessageId),
+                    conversationId: item.messageId,
+                    showCursor: false,
+                    listQuestion: item.listQuestion || [],
+                    type: -2
+                  })
+                }
+              }
+            })
+          } catch (err) {
+            uni.showModal({
+              title: '错误提示',
+              content: JSON.stringify(err)
+            })
+            console.log(err)
+          }
+        }
+      }).catch(() => {
+        this.loading = false
+      })
+    },
+    getParentPrompt(list = '', parentMessageId) {
+      let prompt = ''
+      list.map(item => {
+        if (item.messageId === parentMessageId) {
+          prompt = item.content
+        }
+      })
+      return prompt
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.chat-wrap {
+	padding: 0 0 180rpx 0;
+	.chat-info-wrap {
+		padding: 24rpx;
+    .chat-list-wrap2 {
+      padding: 0;
+    }
+	}
+}
+.loading-wrap {
+	text-align: center;
+	color: #666;
+	line-height: 120rpx;
+}
+.rich-text-box {
+	max-width: 100%;
+}
+.show-cursor .cursor {
+	display: inline-block;
+	color: #3D4CF1;
+	font-weight: bold;
+	animation: blinking 1s infinite;
+}
+
+@keyframes blinking {
+	from {
+		opacity: 1.0;
+	}
+
+	to {
+		opacity: 0.0;
+	}
+}
+.focus-guide-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 60rpx 40rpx;
+  .guide-left {
+    .avatar {
+      display: block;
+      width: 267rpx;
+      height: 530rpx;
+    }
+  }
+  .guide-right {
+    padding: 30rpx;
+    margin: 0 0 0 40rpx;
+    border-radius: 20rpx;
+    font-size: 24rpx;
+    background-color: #fff;
+    box-shadow: 0rpx 12rpx 30rpx rgba(0,0,0,0.1);
+    .title {
+      font-weight: bold;
+    }
+    .content {
+      padding: 30rpx 0 0 0;
+      color: #999;
+    }
+  }
+}
+.topic-wrap {
+  width: 100%;
+  .title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .txt {
+      width: 186rpx;
+      height: 46rpx;
+      margin: 0 20rpx;
+      border-radius: 24rpx;
+      text-align: center;
+      line-height: 46rpx;
+      color: #fff;
+      font-size: 26rpx;
+      background-color: #3D4CF1;
+    }
+    .icon {
+      display: flex;
+      width: 40rpx;
+    }
+  }
+  .list-wrap {
+    width: 100%;
+    margin: 60rpx 0 0 0;
+    overflow-x: auto;
+    .list-cont {
+      display: flex;
+      flex-wrap: wrap;
+      width: 150%;
+      .list-item {
+        display: flex;
+        align-items: center;
+        height: 40rpx;
+        padding: 0 12rpx;
+        margin: 0 30rpx 30rpx 0;
+        border-radius: 20rpx;
+        font-size: 24rpx;
+        color: #666;
+        background: rgba(255,255,255,0.39);
+        box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.1);
+        .icon {
+          display: block;
+          width: 24rpx;
+          height: 24rpx;
+          margin: 0 8rpx 0 0;
+        }
+      }
+    }
+  }
+}
+</style>

aiChat/views/index.vue

@@ -209,7 +209,7 @@
       @history="historyViewHandle"
     />
     <AiHistoryList
-      ref="history"
+      ref="historyView"
       :status-bar-height="statusBarHeight"
     />
   </view>
@@ -233,9 +233,7 @@ export default {
   data() {
     return {
       settingInfo: {},
-      topicList: [],
-      historyList: [],
-      moreList: []
+      topicList: []
     }
   },
   methods: {
@@ -264,9 +262,6 @@ export default {
       this.loading = false
       this.getConfigLoading = false
       this.chatMessageList = []
-    },
-    historyViewHandle() {
-      this.$refs.history.showView()
     }
   }
 }

api/chat/index.js

@@ -15,3 +15,11 @@ export function deleteChatItemByConversationId(id) {
 export function getChatList(params) {
   return request.get('/v1/chat', params, { login: true })
 }
+
+export function historyChatMessage(params) {
+  return request.get('/v1/chat/message', params, { login: true })
+}
+
+export function deleteChatListByType(type) {
+  return request.delete('/v1/chat/type/' + type, {}, { login: true })
+}

api/voiceToText/index.js

@@ -1,11 +1,9 @@
-import {
-  postAction
-} from '@/api/http.js'
+import request from '@/utils/request'
 
 export function makeFileTransTask(data) {
-  return postAction('/app/voiceToText/makeFileTransTask', data)
+  return request.post('/app/voiceToText/makeFileTransTask', data, { login: true })
 }
 
 export function getFileTransResult(data) {
-  return postAction('/app/voiceToText/getFileTransResult', data)
+  return request.post('/app/voiceToText/getFileTransResult', data, { login: true })
 }

assets/css/aiChat.less

@@ -199,23 +199,36 @@ page {
 					height: 88rpx;
 				}
 			}
-			.sound-input-wrap {
+		}
+		.sound-input-wrap {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			flex: 1;
+			height: 100rpx;
+			padding: 0 24rpx;
+			border-radius: 50rpx;
+			color: #fff;
+			font-size: 30rpx;
+			background: #fff;
+			box-shadow: 0rpx 6rpx 20rpx rgba(19,27,65,0.16);
+			.toggle-btn {
+				.input-icon {
+					display: block;
+					width: 48rpx;
+					height: 48rpx;
+				}
+			}
+			.sound-wrap {
+				flex: 1;
 				display: flex;
 				align-items: center;
 				justify-content: center;
-				flex: 1;
-				height: 100rpx;
-				margin: 0 0 0 24rpx;
-				border-radius: 40rpx;
-				color: #fff;
-				font-size: 30rpx;
-				background: linear-gradient(360deg, #FA9108 0%, #FFA734 100%);
-				box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.16);
 				.icon {
 					display: block;
-					width: 40rpx;
-					height: 40rpx;
-					margin: 0 12rpx 0 0;
+					width: 60rpx;
+					height: 60rpx;
+					margin: 0 24rpx;
 				}
 			}
 		}
@@ -688,20 +701,14 @@ page {
 }
 
 .music-wrap {
-	position: absolute;
-	left: 0;
-	right: 0;
-	top: -148rpx;
-	z-index: 5;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	height: 100rpx;
-	padding: 24rpx;
-	background-color: #fff;
+	transform: scale(0.5) translateX(50%);
 	.item {
-		width: 8px;
-		margin: 0 24rpx;
+		width: 6px;
+		margin: 0 8rpx;
 		border-radius: 6px;
 		background-color: #3D4CF1;
 	}
@@ -734,6 +741,9 @@ page {
 		animation: radius-animation .7s infinite linear;
 	}
 }
+.music-wrap2 {
+	transform: scale(0.5) translateX(-50%);
+}
 @keyframes radius-animation {
 	100% {
 		height: 20rpx;

pages.json

@@ -852,6 +852,14 @@
             "navigationStyle": "custom",
             "navigationBarTextStyle": "white"
           }
+        },
+        {
+          "path": "views/history",
+          "style": {
+            "navigationBarTitleText": "云灵AI智能助手",
+            "navigationStyle": "custom",
+            "navigationBarTextStyle": "white"
+          }
         }
       ]
     },