From faee446b5a636fae7a405e09d5bb1c6f3a6f6059 Mon Sep 17 00:00:00 2001
From: shengchanzhe <179998674@qq.com>
Date: Fri, 13 Oct 2023 16:26:35 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/chat/index.vue | 342 +++++++++++++++++++--------------------
 1 file changed, 170 insertions(+), 172 deletions(-)

diff --git a/src/views/chat/index.vue b/src/views/chat/index.vue
index b16b4d4..4177521 100644
--- a/src/views/chat/index.vue
+++ b/src/views/chat/index.vue
@@ -1,6 +1,6 @@
 <script setup lang='ts'>
 import type { Ref } from 'vue'
-import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { storeToRefs } from 'pinia'
 import {
@@ -21,15 +21,11 @@ import { useBasicLayout } from '@/hooks/useBasicLayout'
 import { useChatStore, usePromptStore } from '@/store'
 import { fetchChatAPIProcess } from '@/api'
 import { t } from '@/locales'
-import indexBG from "@/components/animation/indexBG.vue"
-import recording from "@/components/animation/recording.vue"
-import inputing from "@/components/animation/inputing.vue"
-import loding from "@/components/animation/loding.vue"
-import lodingCir from "@/components/animation/lodingCir.vue"
-import lodingSpin from "@/components/animation/lodingSpin.vue"
+import indexBG from '@/components/animation/indexBG.vue'
+import recording from '@/components/animation/recording.vue'
+import inputing from '@/components/animation/inputing.vue'
+import lodingSpin from '@/components/animation/lodingSpin.vue'
 
-import IatRecorder from '@/utils/test.js'
-import { start } from 'repl'
 // import IatRecorder from '@/utils/larRcorder.js'
 
 // import socket from "@/websocket/socket";
@@ -60,26 +56,26 @@ user_channel.on('message', (data: any) => {
   if (recordFalg.value == 0) {
     RecordXunfei()
     recordFalg.value = 1
-		nowStatus.value = 'record'
+    nowStatus.value = 'record'
   }
   else {
     RecordXunfei()
     recordFalg.value = 0
-		nowStatus.value = 'loding'
-		handleSubmit()
+    nowStatus.value = 'loding'
+    handleSubmit()
   }
 })
 
-const changeRecord = ()=>{
-	if (recordFalg.value == 0) {
+const changeRecord = () => {
+  if (recordFalg.value == 0) {
     RecordXunfei()
     recordFalg.value = 1
-		nowStatus.value = 'record'
+    nowStatus.value = 'record'
   }
   else {
     RecordXunfei()
     recordFalg.value = 0
-		nowStatus.value = 'input'
+    nowStatus.value = 'input'
   }
 }
 
@@ -100,6 +96,7 @@ const { scrollRef, scrollToBottom, scrollToBottomIfAtBottom } = useScroll()
 const { usingContext, toggleUsingContext } = useUsingContext()
 
 const { uuid } = route.params as { uuid: string }
+chatStore.getChatByUuid(+uuid).length = 0
 
 const dataSources = computed(() => chatStore.getChatByUuid(+uuid))
 const conversationList = computed(() =>
@@ -151,11 +148,11 @@ async function onConversation() {
   // 监听WebSocket关闭事件
   socket.onclose = (event: any) => {
     console.log('连接已关闭: ', event)
-		nowStatus.value = 'input'
+    nowStatus.value = 'input'
   }
-	socket.onerror = (event: any) => {
+  socket.onerror = (event: any) => {
     console.log('连接出错: ', event)
-		nowStatus.value = 'input'
+    nowStatus.value = 'input'
   }
 
   if (loading.value)
@@ -212,39 +209,40 @@ async function onConversation() {
           },
         ],
       }))
-			nowStatus.value = 'loding'
+      nowStatus.value = 'loding'
 
       // 监听WebSocket接收消息事件
       socket.onmessage = (event: any) => {
         try {
-				const msg = JSON.parse(event.data)
-        // console.log(`收到消息: `, msg.payload.choices.text[0].content);
-        // console.log(`当前消息: `, dataSources.value[dataSources.value.length - 1].text);
-        lastText += msg.payload.choices.text[0].content
-        const loading = true
-				nowStart.value = false
-        updateChat(
-          +uuid,
-          dataSources.value.length - 1,
-          {
-            dateTime: new Date().toLocaleString(),
-            text: lastText,
-            inversion: false,
-            error: false,
-            loading,
-            conversationOptions: { conversationId: msg.header.sid, parentMessageId: msg.header.sid },
-            requestOptions: { prompt: message, options: { ...options } },
-          },
-        )
-				// 关闭连接
-				if(msg.header.code!=0||(event.data&&msg.header.status==2)){
-					nowStatus.value = 'input'
-					socket.close()
-				}
-				} catch (error) {
-					nowStatus.value = 'input'
-					socket.close()
-				}
+          const msg = JSON.parse(event.data)
+          // console.log(`收到消息: `, msg.payload.choices.text[0].content);
+          // console.log(`当前消息: `, dataSources.value[dataSources.value.length - 1].text);
+          lastText += msg.payload.choices.text[0].content
+          const loading = true
+          nowStart.value = false
+          updateChat(
+            +uuid,
+            dataSources.value.length - 1,
+            {
+              dateTime: new Date().toLocaleString(),
+              text: lastText,
+              inversion: false,
+              error: false,
+              loading,
+              conversationOptions: { conversationId: msg.header.sid, parentMessageId: msg.header.sid },
+              requestOptions: { prompt: message, options: { ...options } },
+            },
+          )
+          // 关闭连接
+          if (msg.header.code != 0 || (event.data && msg.header.status == 2)) {
+            nowStatus.value = 'input'
+            socket.close()
+          }
+        }
+        catch (error) {
+          nowStatus.value = 'input'
+          socket.close()
+        }
       }
 
       // await fetchChatAPIProcess<Chat.ConversationResponse>({
@@ -601,7 +599,6 @@ onUnmounted(() => {
     controller.abort()
 })
 
-
 window.winText = ''
 
 window.addEventListener('test', (e) => {
@@ -612,42 +609,41 @@ window.addEventListener('test', (e) => {
 // setTimeout(()=>{
 // 	nowStart.value = false;
 // }, 800)
-
 </script>
 
 <template>
-	<div class="flex w-full h-full my-layout">
-		<indexBG v-if="!isMobile">
-			<transition mode="out-in" name="fade">
-				<inputing v-if="nowStatus=='input'" key="input"></inputing>
-				<recording v-else-if="nowStatus=='record'" key="record"></recording>
-				<!-- <loding v-else-if="nowStatus=='loding'" key="loding"></loding> -->
-				<lodingSpin v-else-if="nowStatus=='loding'" key="loding"></lodingSpin>
-				<!-- <lodingCir v-else-if="nowStatus=='loding'" key="loding"></lodingCir> -->
-			</transition>
-		</indexBG>
-		<transition name="slide-right-to-left">
-			<div v-if="!nowStart" class="flex flex-col w-full h-full" :style="{'max-width': maxWeight + 'px'}">
-				<HeaderComponent
-					v-if="isMobile"
-					:using-context="usingContext"
-					@export="handleExport"
-					@handle-clear="handleClear"
-				/>
-				<main class="flex-1 overflow-hidden">
-					<div
-						id="scrollRef"
-						ref="scrollRef"
-						class="h-full overflow-hidden overflow-y-auto"
-					>
-						<div
-							id="image-wrapper"
-							class="w-full max-w-screen-xl m-auto dark:bg-[#101014]"
-							:class="[isMobile ? 'p-2' : 'p-4']"
-							:style="{'max-width': maxWeight + 'px'}"
-						>
-							<!-- <div @click="click">录音开始</div> -->
-							<!-- <div>
+  <div class="flex w-full h-full my-layout">
+    <indexBG v-if="!isMobile">
+      <transition mode="out-in" name="fade">
+        <inputing v-if="nowStatus == 'input'" key="input" />
+        <recording v-else-if="nowStatus == 'record'" key="record" />
+        <!-- <loding v-else-if="nowStatus=='loding'" key="loding"></loding> -->
+        <lodingSpin v-else-if="nowStatus == 'loding'" key="loding" />
+        <!-- <lodingCir v-else-if="nowStatus=='loding'" key="loding"></lodingCir> -->
+      </transition>
+    </indexBG>
+    <transition name="slide-right-to-left">
+      <div v-if="!nowStart" class="flex flex-col w-full h-full" :style="{ 'max-width': `${maxWeight}px` }">
+        <HeaderComponent
+          v-if="isMobile"
+          :using-context="usingContext"
+          @export="handleExport"
+          @handle-clear="handleClear"
+        />
+        <main class="flex-1 overflow-hidden">
+          <div
+            id="scrollRef"
+            ref="scrollRef"
+            class="h-full overflow-hidden overflow-y-auto"
+          >
+            <div
+              id="image-wrapper"
+              class="w-full max-w-screen-xl m-auto dark:bg-[#101014]"
+              :class="[isMobile ? 'p-2' : 'p-4']"
+              :style="{ 'max-width': `${maxWeight}px` }"
+            >
+              <!-- <div @click="click">录音开始</div> -->
+              <!-- <div>
 								浏览器录音听写：<button id="btn_control" @click="click">
 									开始录音
 								</button>
@@ -655,65 +651,67 @@ window.addEventListener('test', (e) => {
 							<br>
 							<div id="result" ref="resultRef" /> -->
 
-							<template v-if="!dataSources.length">
-								<div
-									class="flex items-center justify-center mt-4 text-center text-neutral-300"
-								>
-									<SvgIcon icon="ri:bubble-chart-fill" class="mr-2 text-3xl" />
-									<span>欢迎来到里海AI~</span>
-								</div>
-							</template>
-							<template v-else>
-								<div>
-									<Message
-										v-for="(item, index) of dataSources"
-										:key="index"
-										:date-time="item.dateTime"
-										:text="item.text"
-										:inversion="item.inversion"
-										:error="item.error"
-										:loading="item.loading"
-										@regenerate="onRegenerate(index)"
-										@delete="handleDelete(index)"
-									/>
-									<div class="sticky bottom-0 left-0 flex justify-center">
-										<NButton v-if="loading" type="warning" @click="handleStop">
-											<template #icon>
-												<SvgIcon icon="ri:stop-circle-line" />
-											</template>
-											{{ t("common.stopResponding") }}
-										</NButton>
-									</div>
-								</div>
-							</template>
-						</div>
-					</div>
-				</main>
-				<footer :class="footerClass">
-					<div class="w-full max-w-screen-xl m-auto"
-							:style="{'max-width': maxWeight + 'px'}">
-						<div class="flex items-center justify-between space-x-2">
-							<HoverButton v-if="recordFalg==0" @click="changeRecord">
-								<span class="text-xl text-[#4f555e] dark:text-white">
-									录音
-								</span>
-							</HoverButton>
-							<HoverButton v-else-if="recordFalg==1" @click="changeRecord">
-								<span class="text-xl text-[#4f555e] dark:text-white">
-									完成
-								</span>
-							</HoverButton>
-							<HoverButton v-if="!isMobile" @click="handleClear">
-								<span class="text-xl text-[#4f555e] dark:text-white">
-									<SvgIcon icon="ri:delete-bin-line" />
-								</span>
-							</HoverButton>
-							<!-- <HoverButton v-if="!isMobile" @click="handleExport">
+              <template v-if="!dataSources.length">
+                <div
+                  class="flex items-center justify-center mt-4 text-center text-neutral-300"
+                >
+                  <SvgIcon icon="ri:bubble-chart-fill" class="mr-2 text-3xl" />
+                  <span>欢迎来到里海AI~</span>
+                </div>
+              </template>
+              <template v-else>
+                <div>
+                  <Message
+                    v-for="(item, index) of dataSources"
+                    :key="index"
+                    :date-time="item.dateTime"
+                    :text="item.text"
+                    :inversion="item.inversion"
+                    :error="item.error"
+                    :loading="item.loading"
+                    @regenerate="onRegenerate(index)"
+                    @delete="handleDelete(index)"
+                  />
+                  <div class="sticky bottom-0 left-0 flex justify-center">
+                    <NButton v-if="loading" type="warning" @click="handleStop">
+                      <template #icon>
+                        <SvgIcon icon="ri:stop-circle-line" />
+                      </template>
+                      {{ t("common.stopResponding") }}
+                    </NButton>
+                  </div>
+                </div>
+              </template>
+            </div>
+          </div>
+        </main>
+        <footer :class="footerClass">
+          <div
+            class="w-full max-w-screen-xl m-auto"
+            :style="{ 'max-width': `${maxWeight}px` }"
+          >
+            <div class="flex items-center justify-between space-x-2">
+              <HoverButton v-if="recordFalg == 0" @click="changeRecord">
+                <span class="text-xl text-[#4f555e] dark:text-white">
+                  录音
+                </span>
+              </HoverButton>
+              <HoverButton v-else-if="recordFalg == 1" @click="changeRecord">
+                <span class="text-xl text-[#4f555e] dark:text-white">
+                  完成
+                </span>
+              </HoverButton>
+              <HoverButton v-if="!isMobile" @click="handleClear">
+                <span class="text-xl text-[#4f555e] dark:text-white">
+                  <SvgIcon icon="ri:delete-bin-line" />
+                </span>
+              </HoverButton>
+              <!-- <HoverButton v-if="!isMobile" @click="handleExport">
 								<span class="text-xl text-[#4f555e] dark:text-white">
 									<SvgIcon icon="ri:download-2-line" />
 								</span>
 							</HoverButton> -->
-							<!-- <HoverButton @click="toggleUsingContext">
+              <!-- <HoverButton @click="toggleUsingContext">
 								<span
 									class="text-xl"
 									:class="{
@@ -724,41 +722,41 @@ window.addEventListener('test', (e) => {
 									<SvgIcon icon="ri:chat-history-line" />
 								</span>
 							</HoverButton> -->
-							<NAutoComplete
-								v-model:value="prompt"
-								:options="searchOptions"
-								:render-label="renderOption"
-							>
-								<template #default="{ handleInput, handleBlur, handleFocus }">
-									<NInput
-										v-model:value="prompt"
-										type="textarea"
-										:placeholder="placeholder"
-										:autosize="{ minRows: 1, maxRows: isMobile ? 4 : 8 }"
-										@input="handleInput"
-										@focus="handleFocus"
-										@blur="handleBlur"
-										@keypress="handleEnter"
-									/>
-								</template>
-							</NAutoComplete>
-							<NButton
-								type="primary"
-								:disabled="buttonDisabled"
-								@click="handleSubmit"
-							>
-								<template #icon>
-									<span class="dark:text-black">
-										<SvgIcon icon="ri:send-plane-fill" />
-									</span>
-								</template>
-							</NButton>
-						</div>
-					</div>
-				</footer>
-			</div>
-		</transition>
-	</div>
+              <NAutoComplete
+                v-model:value="prompt"
+                :options="searchOptions"
+                :render-label="renderOption"
+              >
+                <template #default="{ handleInput, handleBlur, handleFocus }">
+                  <NInput
+                    v-model:value="prompt"
+                    type="textarea"
+                    :placeholder="placeholder"
+                    :autosize="{ minRows: 1, maxRows: isMobile ? 4 : 8 }"
+                    @input="handleInput"
+                    @focus="handleFocus"
+                    @blur="handleBlur"
+                    @keypress="handleEnter"
+                  />
+                </template>
+              </NAutoComplete>
+              <NButton
+                type="primary"
+                :disabled="buttonDisabled"
+                @click="handleSubmit"
+              >
+                <template #icon>
+                  <span class="dark:text-black">
+                    <SvgIcon icon="ri:send-plane-fill" />
+                  </span>
+                </template>
+              </NButton>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </transition>
+  </div>
 </template>
 
 <style scoped>