修改对话页面

yangyin

2024-11-04 8efd7e32f59024e0dc9864aea7343ed018cd42fd

 src/components/chat/Chat.vue

@@ -33,7 +33,7 @@
                                    @click="toggleStepList(item)"
                                    class="cursor-pointer border border-gray-300 border-solid w-fit px-2 flex items-center space-x-2 rounded-lg mb-3 hover:bg-gray-100 active:bg-gray-200"
                                 >
                                    <span >
                                    <span>
                                       {{ toggleStepLabel(item) }}
                                    </span>
                                    <span class="ywifont" :class="{ 'ywicon-unfold': !item.stepIsShow, 'ywicon-fold': item.stepIsShow }"></span>
@@ -79,8 +79,38 @@
                                    </div>
                                 </div>
                                 <template v-else>
                                    <component :is="answerTypeMapCom[item.content.type]" :data="item.content.values" :originData="item" />

                                    <el-popover placement="bottom-start" trigger="hover" :popper-style="{ minWidth: '70px' }" :width="70">
                                       <template #default>
                                          <div class="action" v-if="item.role === RoleEnum.user">
                                             <div class="flex items-center justify-center size-[20px]">
                                                <i
                                                   class="p-2 ywifont ywicon-copy cursor-pointer hover:text-[#0284ff] font-medium !text-[15px]"
                                                   @click="copyUserClick(item)"
                                                />
                                             </div>
                                             <div class="flex items-center justify-center size-[20px]">
                                                <i
                                                   class="p-2 ywifont ywicon-cubelifangti cursor-pointer hover:text-[#0284ff] text-[#000] font-[590] !text-[15px]"
                                                   @click="setCommonQuestionClick(item)"
                                                />
                                             </div>
                                          </div>
                                       </template>
                                       <template #reference>
                                          <component
                                             :is="answerTypeMapCom[item.content.type]"
                                             v-if="item.role === RoleEnum.user"
                                             :data="item.content.values"
                                             :originData="item"
                                          />
                                       </template>
                                    </el-popover>
                                    <component
                                       :is="answerTypeMapCom[item.content.type]"
                                       v-if="item.role !== RoleEnum.user"
                                       :data="item.content.values"
                                       :originData="item"
                                    />
                                    <div
                                       v-if="item.role === RoleEnum.assistant && item.content.origin?.ext_call_list"
                                       class="flex font-bold items-center mt-6"
@@ -100,7 +130,6 @@
                                 </template>
                              </template>
                           </div>

                           <!-- 操作 -->
                           <div
                              v-if="item.role === RoleEnum.assistant && item.content?.values"
@@ -189,7 +218,6 @@
            ></PlayBar>
         </div>
      </div>

      <CustomDrawer v-model:isShow="drawerIsShow" @updateChatInput="updateChatInput" />
   </div>
</template>
@@ -197,24 +225,17 @@
<script setup lang="ts">
import _ from 'lodash';
import moment from 'moment';
import { computed, onMounted, ref, triggerRef } from 'vue';
import { v4 as uuidv4 } from 'uuid';
import { computed, onMounted, ref } from 'vue';
import FeedbackPanel from './components/FeedbackPanel.vue';
import Loding from './components/Loding.vue';
import { useAssistantContentOpt } from './hooks/useAssistantContentOpt';
import { useQueryProcess } from './hooks/useQueryProcess';
import { convertProcessItem, useScrollLoad } from './hooks/useScrollLoad';
import { useScrollLoad } from './hooks/useScrollLoad';
import { useScrollToBottom } from './hooks/useScrollToBottom';
import type { ChatContent, StepItem } from './model/types';
import {
   AnswerState,
   AnswerType,
   RoleEnum,
   answerTypeMapCom,
   roleImageMap,
   type ChatMessage,
   StepEnum,
   stepEnumMap,
} from './model/types';
import { extCallQuery, questionStreamByPost } from '/@/api/ai/chat';
import type { ChatContent } from './model/types';
import { AnswerState, AnswerType, RoleEnum, answerTypeMapCom, roleImageMap, type ChatMessage } from './model/types';
import { QuestionAi, extCallQuery, questionStreamByPost } from '/@/api/ai/chat';
import PlayBar from '/@/components/chat/components/playBar/PlayBar.vue';
import CustomDrawer from '/@/components/drawer/CustomDrawer.vue';
import router from '/@/router';
@@ -228,9 +249,7 @@
   getRoomConfig,
   roomConfig,
} from '/@/stores/chatRoom';
import { deepClone } from '/@/utils/other';
import { ErrorCode } from '/@/utils/request';

const chatWidth = '75%';
const voicePageIsShow = ref(false);
let isTalking = ref(false);
@@ -614,6 +633,12 @@
   messageContent.value.values = content;
};
//#endregion
//#region ====================== 用户询问的问题设置为常用语 ======================
//用户复制问题
const copyUserClick = () => {};
//用户问题设置为常用语
const setCommonQuestionClick = () => {};
//#endregion
</script>

<style scoped lang="scss">
@@ -658,4 +683,26 @@
:deep(.el-step__description) {
   height: 20px;
}
.action {
   left: 0;
   padding: 4px;
   gap: 4px;
   border-radius: 4px;
   display: flex;
   align-items: center;
   flex-direction: row;
   position: absolute;
   top: 0;
}
.action {
   left: 0;
   padding: 4px;
   gap: 4px;
   border-radius: 4px;
   display: flex;
   align-items: center;
   flex-direction: row;
   position: absolute;
   top: 0;
}
</style>