switch english

yinbangzhong

2024-08-28 5caca0c02d55be32ac91c4ffbb1a5c615293bd3a

 src/views/sessionManager/components/chatMenu.vue

@@ -4,239 +4,263 @@
      <div class="myAgent___djnd_ myAgentAnim myAgentlight___yK7Gk">
        <div data-testid="msh-sidebar-main" class="myAgentHome___PG6IZ"></div>
        <div class="myAgentLine___Isl6E"></div>
        <div class="myAgentTool___Y1_mC" data-testid="msh-sidebar-new" @click="()=>{
          EventBus.emit('newChat')
        }">
        <div
          class="myAgentTool___Y1_mC"
          data-testid="msh-sidebar-new"
          @click="
            () => {
              EventBus.emit('newChat');
            }
          "
        >
          <div class="myAgentToolIcon___gaAKI myAgentToolIconNew___DBZrW">
            <img
            src="@/assets/images/talk.png"
            style="width: 24px"
            alt="">
            <img src="@/assets/images/icon-new.png" style="width: 24px" alt="" />
          </div>
        </div>
        <div data-testid="msh-sidebar-history" class="myAgentTool___Y1_mC"  @click="()=>{
          EventBus.emit('history')
        }">
          <div class="myAgentToolIcon___gaAKI myAgentToolIconHistory___GTLWk" >
            <img
        <div
          data-testid="msh-sidebar-history"
          class="myAgentTool___Y1_mC"
          @click="
            () => {
              EventBus.emit('history');
            }
          "
        >
          <div class="myAgentToolIcon___gaAKI myAgentToolIconHistory___GTLWk">
             <!-- <img
              src="@/assets/images/historybg.png"
              style="width: 24px"
            alt="">
              alt=""
            /> -->
            <img
              src="@/assets/images/icon-histy.png"
              style="width: 24px"
              alt=""
            />
          </div>
        </div>
        <div data-testid="msh-sidebar-square" class="myAgentTool___Y1_mC myAgentToolSquare___dbLm1" @click="()=>{
          EventBus.emit('smartAi')
        }">
          <div class="myAgentToolIcon___gaAKI myAgentToolIconSquare___Rj1o_"><img
            src="@/assets/images/agent.png"
            style="width: 24px"
            alt=""></div>
        <div
          data-testid="msh-sidebar-square"
          class="myAgentTool___Y1_mC myAgentToolSquare___dbLm1"
          @click="
            () => {
              EventBus.emit('smartAi');
            }
          "
        >
          <div class="myAgentToolIcon___gaAKI myAgentToolIconSquare___Rj1o_">
            <!-- <img src="@/assets/images/agent.png" style="width: 24px" alt=""/> -->
             <img src="@/assets/images/icon-zhi.png" style="width: 24px" alt=""
          />
          </div>
        </div>
        <div class="myAgentLine___Isl6E" style="margin-top: 4px;"></div>
        <div class="myAgentLine___Isl6E" style="margin-top: 4px"></div>
        <div id="myAgentBox">
<!--          <div class="myAgentBox___zrCit">-->
<!--            <div class="myAgentBoxImg___Mgu9e">-->
<!--              <div class="myAgentBoxImgLayout___u69B_">-->
<!--                <div class="MuiBox-root css-5nczy5"><img-->
<!--                  src="https://kimi-img.moonshot.cn/prod-chat-kimi/avatar/kimiplus/academic.png" alt=""-->
<!--                  style="border-radius: 50%; width: 100%; height: 100%;"></div>-->
<!--                <span class="myAgentBoxImgLayoutTip___xHV4m">学术搜索</span></div>-->
<!--              <div data-testid="msh-sidebar-bot-delete" class="myAgentBoxImgDelete___qXZuq">-->
<!--                <div class="myAgentBoxImgDeleteInner____Hawc">从侧边栏移除</div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="myAgentBox___zrCit">-->
<!--            <div class="myAgentBoxImg___Mgu9e">-->
<!--              <div class="myAgentBoxImgLayout___u69B_">-->
<!--                <div class="MuiBox-root css-5nczy5"><img-->
<!--                  src="https://kimi-img.moonshot.cn/prod-chat-kimi/avatar/kimiplus/paper_rewrite.png" alt=""-->
<!--                  style="border-radius: 50%; width: 100%; height: 100%;"></div>-->
<!--                <span class="myAgentBoxImgLayoutTip___xHV4m">论文改写</span></div>-->
<!--              <div data-testid="msh-sidebar-bot-delete" class="myAgentBoxImgDelete___qXZuq">-->
<!--                <div class="myAgentBoxImgDeleteInner____Hawc">从侧边栏移除</div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="myAgentBox___zrCit">-->
<!--            <div class="myAgentBoxImg___Mgu9e">-->
<!--              <div class="myAgentBoxImgLayout___u69B_">-->
<!--                <div class="MuiBox-root css-5nczy5"><img-->
<!--                  src="https://kimi-img.moonshot.cn/prod-chat-kimi/avatar/kimiplus/prompt.png" alt=""-->
<!--                  style="border-radius: 50%; width: 100%; height: 100%;"></div>-->
<!--                <span class="myAgentBoxImgLayoutTip___xHV4m">提示词专家</span></div>-->
<!--              <div data-testid="msh-sidebar-bot-delete" class="myAgentBoxImgDelete___qXZuq">-->
<!--                <div class="myAgentBoxImgDeleteInner____Hawc">从侧边栏移除</div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="myAgentBox___zrCit">-->
<!--            <div class="myAgentBoxImg___Mgu9e">-->
<!--              <div class="myAgentBoxImgLayout___u69B_">-->
<!--                <div class="MuiBox-root css-5nczy5"><img-->
<!--                  src="https://kimi-img.moonshot.cn/prod-chat-kimi/avatar/kimiplus/taro.png" alt=""-->
<!--                  style="border-radius: 50%; width: 100%; height: 100%;"></div>-->
<!--                <span class="myAgentBoxImgLayoutTip___xHV4m">塔罗师</span></div>-->
<!--              <div data-testid="msh-sidebar-bot-delete" class="myAgentBoxImgDelete___qXZuq">-->
<!--                <div class="myAgentBoxImgDeleteInner____Hawc">从侧边栏移除</div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
          <!--          <div class="myAgentBox___zrCit">-->
          <!--            <div class="myAgentBoxImg___Mgu9e">-->
          <!--              <div class="myAgentBoxImgLayout___u69B_">-->
          <!--                <div class="MuiBox-root css-5nczy5"><img-->
          <!--                  src="https://kimi-img.moonshot.cn/prod-chat-kimi/avatar/kimiplus/academic.png" alt=""-->
          <!--                  style="border-radius: 50%; width: 100%; height: 100%;"></div>-->
          <!--                <span class="myAgentBoxImgLayoutTip___xHV4m">学术搜索</span></div>-->
          <!--              <div data-testid="msh-sidebar-bot-delete" class="myAgentBoxImgDelete___qXZuq">-->
          <!--                <div class="myAgentBoxImgDeleteInner____Hawc">从侧边栏移除</div>-->
          <!--              </div>-->
          <!--            </div>-->
          <!--          </div>-->
          <!--          <div class="myAgentBox___zrCit">-->
          <!--            <div class="myAgentBoxImg___Mgu9e">-->
          <!--              <div class="myAgentBoxImgLayout___u69B_">-->
          <!--                <div class="MuiBox-root css-5nczy5"><img-->
          <!--                  src="https://kimi-img.moonshot.cn/prod-chat-kimi/avatar/kimiplus/paper_rewrite.png" alt=""-->
          <!--                  style="border-radius: 50%; width: 100%; height: 100%;"></div>-->
          <!--                <span class="myAgentBoxImgLayoutTip___xHV4m">论文改写</span></div>-->
          <!--              <div data-testid="msh-sidebar-bot-delete" class="myAgentBoxImgDelete___qXZuq">-->
          <!--                <div class="myAgentBoxImgDeleteInner____Hawc">从侧边栏移除</div>-->
          <!--              </div>-->
          <!--            </div>-->
          <!--          </div>-->
          <!--          <div class="myAgentBox___zrCit">-->
          <!--            <div class="myAgentBoxImg___Mgu9e">-->
          <!--              <div class="myAgentBoxImgLayout___u69B_">-->
          <!--                <div class="MuiBox-root css-5nczy5"><img-->
          <!--                  src="https://kimi-img.moonshot.cn/prod-chat-kimi/avatar/kimiplus/prompt.png" alt=""-->
          <!--                  style="border-radius: 50%; width: 100%; height: 100%;"></div>-->
          <!--                <span class="myAgentBoxImgLayoutTip___xHV4m">提示词专家</span></div>-->
          <!--              <div data-testid="msh-sidebar-bot-delete" class="myAgentBoxImgDelete___qXZuq">-->
          <!--                <div class="myAgentBoxImgDeleteInner____Hawc">从侧边栏移除</div>-->
          <!--              </div>-->
          <!--            </div>-->
          <!--          </div>-->
          <!--          <div class="myAgentBox___zrCit">-->
          <!--            <div class="myAgentBoxImg___Mgu9e">-->
          <!--              <div class="myAgentBoxImgLayout___u69B_">-->
          <!--                <div class="MuiBox-root css-5nczy5"><img-->
          <!--                  src="https://kimi-img.moonshot.cn/prod-chat-kimi/avatar/kimiplus/taro.png" alt=""-->
          <!--                  style="border-radius: 50%; width: 100%; height: 100%;"></div>-->
          <!--                <span class="myAgentBoxImgLayoutTip___xHV4m">塔罗师</span></div>-->
          <!--              <div data-testid="msh-sidebar-bot-delete" class="myAgentBoxImgDelete___qXZuq">-->
          <!--                <div class="myAgentBoxImgDeleteInner____Hawc">从侧边栏移除</div>-->
          <!--              </div>-->
          <!--            </div>-->
          <!--          </div>-->
          <div class="myAgentBox___zrCit" v-for="item in sessionList">
            <div class="myAgentBoxImg___Mgu9e" @click="createNewSession(item)">
              <div class="myAgentBoxImgLayout___u69B_">
                <div class="MuiBox-root css-5nczy5">
                  <img
                    :src="item.icon ? httpUrl + item.icon:'https://kimi-img.moonshot.cn/prod-chat-kimi/avatar/kimiplus/guess.png'"
                    :src="item.icon ? httpUrl + item.icon : imgSrc"
                    alt=""
                    style="border-radius: 50%; width: 100%; height: 100%;">
                    style="border-radius: 50%; width: 100%; height: 100%"
                  />
                </div>
                <span class="myAgentBoxImgLayoutTip___xHV4m">{{item.name}}</span>
                <span class="myAgentBoxImgLayoutTip___xHV4m">{{
                  item.name
                }}</span>
              </div>
              <div data-testid="msh-sidebar-bot-delete" class="myAgentBoxImgDelete___qXZuq"  @click.stop="deleteSession(item)">
                <div class="myAgentBoxImgDeleteInner____Hawc"  >从侧边栏移除</div>
              <div
                data-testid="msh-sidebar-bot-delete"
                class="myAgentBoxImgDelete___qXZuq"
                @click.stop="deleteSession(item)"
              >
                <div class="myAgentBoxImgDeleteInner____Hawc">从侧边栏移除</div>
              </div>
            </div>
          </div>
        </div>
<!--        <div class="myAgentLine___Isl6E" style="margin-top: 4px;"></div>-->
        <!--        <div class="myAgentLine___Isl6E" style="margin-top: 4px;"></div>-->
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {
  IconClose,
  IconSearch,
  IconTiktokColor
} from "@arco-design/web-vue/es/icon";
import { useAppStore, useUserStore } from "@/store";
import { computed, nextTick, onMounted, watch, reactive, ref, onBeforeMount, onBeforeUnmount } from "vue";
import {
  addSessionApi,
  chatApi,
  getDialogListApi,
  getSessionDetailsApi,
  deleteSessionApi,
  sessionListApi
} from "@/api/session";
import { Message } from "@arco-design/web-vue";
const httpUrl = localStorage.getItem('httpUrl');
import EventBus from '@/utils/EventBus';
const emit = defineEmits(["querySessionDetail","changeAgentType","createSession"]);
import logo from "@/assets/images/model.png";
import { appUsageSessionListApi, deleteAppUsage } from "@/api/Agent";
import { getAgentSessionDetailsApi } from "@/api/agentSession";
const activeSessionId = ref("");
const fieldNames = { value: "id", label: "name" };
const dialogs = ref([]);
const dialogObj = reactive({});
const agentObj = reactive({});
const agentList = ref([]);
const searchValue = ref("");
const selectValue = ref("");
const sectionList = ref({});
const sessionList = ref([]); //用户操作会话列表
import img1 from '@/assets/images/talkbg.png'
  import {
    IconClose,
    IconSearch,
    IconTiktokColor,
  } from '@arco-design/web-vue/es/icon';
  import { useAppStore, useUserStore } from '@/store';
  import {
    computed,
    nextTick,
    onMounted,
    watch,
    reactive,
    ref,
    onBeforeMount,
    onBeforeUnmount,
  } from 'vue';
  import {
    addSessionApi,
    chatApi,
    getDialogListApi,
    getSessionDetailsApi,
    deleteSessionApi,
    sessionListApi,
  } from '@/api/session';
  import { Message } from '@arco-design/web-vue';
  const httpUrl = localStorage.getItem('httpUrl');
  import EventBus from '@/utils/EventBus';
  const emit = defineEmits([
    'querySessionDetail',
    'changeAgentType',
    'createSession',
  ]);
  import { appUsageSessionListApi, deleteAppUsage } from '@/api/Agent';
  import { getAgentSessionDetailsApi } from '@/api/agentSession';
  const activeSessionId = ref('');
  const fieldNames = { value: 'id', label: 'name' };
  const dialogs = ref([]);
  const dialogObj = reactive({});
  const agentObj = reactive({});
  const agentList = ref([]);
  const searchValue = ref('');
  const selectValue = ref('');
  const sectionList = ref({});
  const sessionList = ref([]); //用户操作会话列表
  import img1 from '@/assets/images/talkbg.png';
  import logo from '@/assets/images/model.png';
  const imgSrc = ref(logo);




// 查询历史用户习惯会话列表
const querySessionList = async (id) => {
  const { code, data } = await appUsageSessionListApi('');
  if (code === 200) {
    sessionList.value = data.map((item) => {
      return {
        ...item,
      }
    });
    // sessionList.value.splice(0, 5);
    console.log(sessionList.value,'用户习惯会话列表');
  } else {
    // Message.warning("查询失败");
  }
};


// 新增会话
const createNewSession = async (session) => {
  console.log(session, 'session');
  // 查询历史记录
  if (session.app_type == '1') {
    // 生成智能体新的对话
    emit('createSession',session.app_id);
    emit('changeAgentType','1');
  } else {
    // 生成agent新的对话
    // agent对象数据封装
    const { code, data } = await getAgentSessionDetailsApi(session.app_id);
    if (code == 0) {
      console.log(data,'会话详情');
      let sessionObj = {
        id: session.app_id,
        dsl: data.dsl,
        title: session.name,
      }
      EventBus.emit("createAgent",sessionObj);
      emit('changeAgentType','2');
    }

  }



}




//根据会话id删除会话
const deleteSession = async (session) => {
  const { code } = await deleteAppUsage({
    app_id:session.app_id
  });
  if (code === 200) {
    // Message.success('删除成功');
  // 查询历史用户习惯会话列表
  const querySessionList = async (id) => {
    const { code, data } = await appUsageSessionListApi('');
    if (code === 200) {
      sessionList.value = data;
      sessionList.value = data.map((item) => {
        return {
          ...item,
        };
      });
      // sessionList.value.splice(0, 5);
      console.log(sessionList.value,'用户习惯会话列表');
      if(sessionList.value.length == 0){
        // 生成智能体新的对话
        emit('createSession','');
        emit('changeAgentType','1');
      }
      console.log(sessionList.value, '用户习惯会话列表');
    } else {
      // Message.warning("查询失败");
    }
  }
};
  };

  // 新增会话
  const createNewSession = async (session) => {
    console.log(session, 'session');
    // 查询历史记录
    if (session.app_type == '1') {
      // 生成智能体新的对话
      emit('createSession', session.app_id, `和${session.name}的会话`);
      emit('changeAgentType', '1');
    } else {
      // 生成agent新的对话
      // agent对象数据封装
      const { code, data } = await getAgentSessionDetailsApi(session.app_id);
      if (code == 0) {
        console.log(data, '会话详情');
        let sessionObj = {
          id: session.app_id,
          dsl: data.dsl,
          title: session.name,
        };
        EventBus.emit('createAgent', sessionObj);
        emit('changeAgentType', '2');
      }
    }
  };

  //根据会话id删除会话
  const deleteSession = async (session) => {
    const { code } = await deleteAppUsage({
      app_id: session.app_id,
    });
    if (code === 200) {
      // Message.success('删除成功');
      const { code, data } = await appUsageSessionListApi('');
      if (code === 200) {
        sessionList.value = data;
        // sessionList.value.splice(0, 5);
        console.log(sessionList.value, '用户习惯会话列表');
        if (sessionList.value.length == 0) {
          // 生成智能体新的对话
          emit('createSession', '');
          emit('changeAgentType', '1');
        }
      } else {
        // Message.warning("查询失败");
      }
    }
  };




onBeforeMount(()=>{
  querySessionList('');
})

onMounted(() => {
  EventBus.on("queryAppUsageList", (data) => {
  onBeforeMount(() => {
    querySessionList('');
  })
})
onBeforeUnmount(() => {
  EventBus.off("queryAppUsageList");
});
  });



  onMounted(() => {
    EventBus.on('queryAppUsageList', (data) => {
      querySessionList('');
    });
  });
  onBeforeUnmount(() => {
    EventBus.off('queryAppUsageList');
  });
</script>
<style scoped lang="less">
  @import "@/views/sessionManager/style/layout.css";
  @import '@/views/sessionManager/style/layout.css';
  .layoutNavMoveCenter {
    display: flex;
    justify-content: center;
@@ -244,13 +268,9 @@
    height: calc(100vh - 160px); /* 或者指定高度 */
    position: relative;
  }
  #myAgentBox{
  #myAgentBox {
    //width: 100%;
    //max-height: 220px;
    //overflow: hidden;
  }




</style>