fix: 换行

zhangxiao

2024-08-17 0ea2c6031b92050574c11fa0dc060af1c7fd1f0b

 src/views/sessionManager/index.vue

@@ -1,146 +1,29 @@
<template>
  <div class="container">
    <AddSession
      :modalObj="modalObj"
      @addSession="addSession"
      :dialogId="dialogId"
    ></AddSession>
    <a-card class="top-title">AI会话记录</a-card>
    <!--    <AddSession-->
    <!--      :modalObj="modalObj"-->
    <!--      @addSession="addSession"-->
    <!--      :dialogId="dialogId"-->
    <!--    ></AddSession>-->
    <!--    <a-card class="top-title">AI会话记录</a-card>-->
    <a-row :gutter="[5, 5]" style="margin-top: 3px">
      <a-col :span="6">
        <a-card class="left-select">
          <a-select
            v-model="selectValue"
            :options="dialogs"
            :field-names="fieldNames"
            @change="dialogChange"
          >
          </a-select>
        </a-card>
        <a-card style="height: 50px">
          <template #cover>
            <div style="display: flex; justify-content: space-between">
              <a-button
                type="primary"
                shape="round"
                class="card-btn-1"
                @click="modalObj.add = true"
              >
                +新建会话
              </a-button>
              <!-- <a-button type="text" shape="circle" class="card-btn-2">
                <icon-search />
              </a-button> -->
            </div>
          </template>
        </a-card>
        <a-card class="left">
          <a-scrollbar
            class="left-list"
            style="
              height: calc(100vh - 350px);
              overflow-y: auto;
              overflow-x: hidden;
            "
          >
            <div
              class="item left-list-item"
              v-for="session in sessionList"
              @click="querySessionDetail(session)"
              :class="{ isLeftActive: activeSessionId === session.id }"
            >
              <div class="text" :class="{ time: theme === 'dark' }"
                >{{ session.name }}
              </div>
              <div class="time"
                >{{
                  moment(new Date(session.create_time)).format(
                    'YYYY-MM-DD HH:mm:ss'
                  )
                }}
              </div>
            </div>
          </a-scrollbar>
        </a-card>
      <a-col :span="1">
        <chatMenu
          @createSession="createSession"
          @querySessionDetail="querySessionDetail"
          @changeAgentType="changeAgentType"
        ></chatMenu>
      </a-col>
      <a-col :span="18">
        <a-card class="center">
          <!-- <div
            v-if="sessionDetailList.length === 0"
            style="
              width: 90%;
              overflow: auto;
              height: 65vh;
              margin: 0px auto 20px;
            "
          >
            <div class="center-title">智能问答</div>
            <div class="center-content">
              我可以理解和学习人类的语言，具备多轮对话的能力，现在和我开始交流吧~
            </div>
            <div class="center-question">
              <div class="center-question-left">试一试这样问我</div>
              <div class="center-question-right">
                <a-button type="primary">换一换</a-button>
      <!--      智能体会话-->
      <a-col :span="23" v-show="agentType == '1'">
        <div class="center">
          <div class="header___lEPyH">
            <div class="chatHeader">
              <div class="chatHeaderBox">
                <span class="title">{{ agentTitle }}</span>
              </div>
            </div>
            <a-row justify="space-around" class="center-list">
              <a-col :span="7" class="item">
                <div class="item-title">
                  <IconTiktokColor></IconTiktokColor>
                  抖音带货脚本
                </div>
                <div class="item-content" :class="{ dark: theme === 'dark' }">
                  编写引人注目且具有说服力的、适用于产品的...
                </div>
              </a-col>
              <a-col :span="7" class="item">
                <div class="item-title">
                  <IconTiktokColor></IconTiktokColor>
                  抖音带货脚本
                </div>
                <div class="item-content" :class="{ dark: theme === 'dark' }">
                  编写引人注目且具有说服力的、适用于产品的...
                </div>
              </a-col>
              <a-col :span="7" class="item">
                <div class="item-title">
                  <IconTiktokColor></IconTiktokColor>
                  抖音带货脚本
                </div>
                <div class="item-content" :class="{ dark: theme === 'dark' }">
                  编写引人注目且具有说服力的、适用于产品的...
                </div>
              </a-col>
              <a-col :span="7" class="item">
                <div class="item-title">
                  <IconTiktokColor></IconTiktokColor>
                  抖音带货脚本
                </div>
                <div class="item-content" :class="{ dark: theme === 'dark' }">
                  编写引人注目且具有说服力的、适用于产品的...
                </div>
              </a-col>
              <a-col :span="7" class="item">
                <div class="item-title">
                  <IconTiktokColor></IconTiktokColor>
                  抖音带货脚本
                </div>
                <div class="item-content" :class="{ dark: theme === 'dark' }">
                  编写引人注目且具有说服力的、适用于产品的...
                </div>
              </a-col>
              <a-col :span="7" class="item">
                <div class="item-title">
                  <IconTiktokColor></IconTiktokColor>
                  抖音带货脚本
                </div>
                <div class="item-content" :class="{ dark: theme === 'dark' }">
                  编写引人注目且具有说服力的、适用于产品的...
                </div>
              </a-col>
            </a-row>
          </div> -->
          </div>
          <a-scrollbar
            ref="scrollbar"
            id="home"
@@ -148,7 +31,7 @@
            style="
              width: 90%;
              overflow: auto;
              height: calc(100vh - 380px);
              height: calc(100vh - 300px);
              margin: 0px auto 20px;
            "
          >
@@ -177,8 +60,10 @@
                </template>
                <template #content>
                  <a-card :class="{ chatItemAnswer: theme === 'light' }">
                    <div :class="{ light: theme === 'light' }"
                      >{{ sessionDetail.content }}
                    <div
                      :class="{ light: theme === 'light' }"
                      v-html="sessionDetail.content.replace(/\n/g, '<br/>')"
                    >
                    </div>
                  </a-card>
                </template>
@@ -242,73 +127,35 @@
                  style="border-radius: 24px"
                  :loading="loading"
                  size="large"
                  >发送</a-button
                >
                  >发送
                </a-button>
              </div>
            </div>
          </div>
        </a-card>
        </div>
      </a-col>
      <!-- <a-col :span="5">
        <a-card class="right">
          <div class="right-top">
            <div class="right-title">数智库</div>
            <div class="right-btn">
              <a-button type="outline" shape="circle" style="border: none">
                <icon-search />
              </a-button>
              <a-button
                type="outline"
                shape="circle"
                style="border: none; margin-left: -10px"
              >
                <icon-close />
              </a-button>
            </div>
          </div>
          <div class="right-tag">
            <a-button type="primary" size="mini" class="btn">全部 </a-button>
            <a-button type="outline" size="mini" class="btn"
              >文档创作
            </a-button>
            <a-button type="outline" size="mini" class="btn"
              >知识学习
            </a-button>
            <a-button type="outline" size="mini" class="btn"
              >效率提升
            </a-button>
          </div>
          <div class="right-list">
            <div class="right-item">
              <div class="item-title">
                <IconTiktokColor></IconTiktokColor>
                抖音带货脚本
              </div>
              <div class="item-content" :class="{ dark: theme === 'dark' }">
                编写引人注目且具有说服力的、适用于产品的...
              </div>
            </div>
            <div class="right-item">
              <div class="item-title">
                <IconTiktokColor></IconTiktokColor>
                抖音带货脚本
              </div>
              <div class="item-content" :class="{ dark: theme === 'dark' }">
                编写引人注目且具有说服力的、适用于产品的...
              </div>
            </div>
            <div class="right-item">
              <div class="item-title">
                <IconTiktokColor></IconTiktokColor>
                抖音带货脚本
              </div>
              <div class="item-content" :class="{ dark: theme === 'dark' }">
                编写引人注目且具有说服力的、适用于产品的...
              </div>
            </div>
          </div>
        </a-card>
      </a-col> -->
      <a-col :span="23" v-show="agentType == '2'">
        <div class="center">
          <agentSession :modalObj="agentObj"></agentSession>
        </div>
      </a-col>
      <a-col :span="23" v-show="agentType == '3'">
        <div class="center" style="padding: 0">
          <historySession
            @querySessionDetail="querySessionDetail"
            @changeAgentType="changeAgentType"
          ></historySession>
        </div>
      </a-col>
      <a-col :span="23" v-show="agentType == '4'">
        <div class="center" style="padding: 0">
          <smartAi
            @createSession="createSession"
            @querySessionDetail="querySessionDetail"
            @changeAgentType="changeAgentType"
          ></smartAi>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
@@ -319,19 +166,36 @@
    IconTiktokColor,
  } from '@arco-design/web-vue/es/icon';
  import { useAppStore, useUserStore } from '@/store';
  import { computed, nextTick, onMounted, watch, reactive, ref } from 'vue';
  import {
    computed,
    nextTick,
    onMounted,
    watch,
    reactive,
    ref,
    onBeforeMount,
    onBeforeUnmount,
  } from 'vue';

  import { Message } from '@arco-design/web-vue';
  import { EventSourceParserStream } from 'eventsource-parser/stream';
  import moment from 'moment';
  import chatMenu from '@/views/sessionManager/components/chatMenu.vue';
  import AddSession from '@/views/sessionManager/components/addSession.vue';
  import agentSession from '@/views/sessionManager/components/agentSession.vue';
  import historySession from '@/views/sessionManager/components/historySession.vue';
  import smartAi from '@/views/sessionManager/components/smartAi.vue';
  import EventBus from '@/utils/EventBus';
  import {
    addSessionApi,
    chatApi,
    getDialogListApi,
    getSessionDetailsApi,
    sessionListApi,
  } from '@/api/session';
  import { getAuthorization } from '@/utils/auth';
  import { queryCanvasList } from '@/api/Agent';
  import { getAgentSessionDetailsApi } from '@/api/agentSession';

  const sessionDetailList = ref([]); //根据会话id出来的会话详情
  const sessionList = ref([]); //会话列表
@@ -339,6 +203,8 @@
  const dialogId = ref('');
  const chatDis = ref(false);
  const loading = ref(false);
  const agentType = ref('1');
  const agentTitle = ref('未命名会话');

  const currIndex = ref(0);
  const displayedText = ref(''); // 正在显示的文字
@@ -348,6 +214,9 @@
  const activeSessionId = ref('');
  const fieldNames = { value: 'id', label: 'name' };
  const dialogs = ref([]);
  const dialogObj = reactive({});
  const agentObj = reactive({});
  const agentList = ref([]);
  const selectValue = ref('');
  const sectionList = ref({});
  const DialogList = async () => {
@@ -355,18 +224,86 @@
    if (code === 200) {
      if (data) {
        selectValue.value = data[0].id;
        dialogs.value = data;
        querySessionList();
        dialogs.value = data.map((item) => {
          return {
            ...item,
            type: 1, //智能体
          };
        });
        console.log(data, 'dialogs');
        queryCanvas();
      }
    }
  };

  const queryCanvas = async (params = {}) => {
    try {
      const { data } = await queryCanvasList(params);
      console.log(data, 'agent');
      agentList.value = data.map((item) => {
        return {
          ...item,
          name: item.title,
          type: 2, //agent
        };
      });
      // 合并数组
      dialogs.value = dialogs.value.concat(agentList.value);

      // 判断当前是智能体或agent
      // console.log(val, 'val');
      // if (dialogs.value.length > 0) {
      //   dialogChange(dialogs.value[0].id);
      // }
      //新建会话
      createSession(dialogs.value[0].id);
    } catch (err) {
      // you can report use errorHandler or other
    } finally {
    }
  };
  // 新建会话
  const createSession = async (id, name = '未命名会话') => {
    // 如果有会话id
    console.log(name, '新建会话名称');

    const res = await addSessionApi({
      dialog_id: id,
      conversation_desc: name,
    });
    // console.log(res, "res");
    if (res.code == 200) {
      // console.log(res.data.conversation_id);
      activeSessionId.value = res.data?.conversation_id;
      queryNewSessionDetail(res.data?.conversation_id);
    } else {
      Message.error('创建会话失败，请重试');
    }
  };

  const handleShiftEnter = (event) => {
    event.preventDefault();
    inputMsg.value += '\n';
  };
  const dialogChange = (val) => {
    // 判断当前是智能体或agent
    // console.log(val, 'val');
    dialogId.value = val;
    querySessionList();
    dialogs.value.forEach((item) => {
      if (item.id === val) {
        Object.assign(dialogObj, item);
      }
    });
    console.log(dialogObj.type, 'dialogObj');
    if (dialogObj.type == 1) {
      agentType.value = 1;
      querySessionList();
    } else {
      agentType.value = 2;
      queryAgentSessionList();
    }

    // querySessionList();
  };
  const sentClick = () => {
    sendMessage('click');
@@ -438,11 +375,13 @@
              if (done) {
                console.info('done');
                displayedText.value = '';
                querySessionDetail(sectionList.value);
                queryNewSessionDetail(activeSessionId.value);
                EventBus.emit('queryAppUsageList');
                break;
              }
            }
          }
          // querySessionList();
          chatDis.value = false;
          loading.value = false;
          inputMsg.value = '';
@@ -454,6 +393,23 @@
      }
    }
  };

  const queryNewSessionDetail = async (id) => {
    activeSessionId.value = id;
    const { code, data } = await getSessionDetailsApi(id);
    if (code === 200) {
      console.log(data, '新建会话详情');
      sessionDetailList.value = data.message;
      agentTitle.value = data.name;
      refreshScroll(); //刷新滚动条位置
    }
  };

  const changeAgentType = (val, session) => {
    agentType.value = val;
    console.log(val, 'val');
  };

  const querySessionDetail = async (session) => {
    sectionList.value = session;
    activeSessionId.value = session.id;
@@ -461,6 +417,14 @@
    if (code === 200) {
      sessionDetailList.value = data.message;
      refreshScroll(); //刷新滚动条位置
    }
  };
  const queryAgentSessionDetail = async (id) => {
    const { code, data } = await getAgentSessionDetailsApi(id);
    if (code == 0) {
      Object.assign(agentObj, data);
      // sessionDetailList.value = data.message;
      // refreshScroll(); //刷新滚动条位置
    }
  };
  const scrollbar = ref(null);
@@ -481,12 +445,35 @@
      Message.warning('查询失败');
    }
  };

  // 查询会话列表
  const queryAgentSessionList = async () => {
    // const { code, data } = await sessionListApi(selectValue.value);
    // if (code === 200) {
    //
    // } else {
    //   Message.warning('查询失败');
    // }
    queryAgentSessionDetail(selectValue.value);
  };

  //新增会话之后刷新会话列表
  const addSession = () => {
    querySessionList();
  };
  onBeforeMount(() => {
    // DialogList();
    //新建会话
    createSession('');
  });
  onMounted(() => {
    DialogList();
    EventBus.on('newChat', () => {
      agentType.value = 1;
      createSession('');
    });
  });
  onBeforeUnmount(() => {
    EventBus.off('newChat');
  });

  const appStore = useAppStore();
@@ -516,9 +503,11 @@
  .isLeftActive {
    background-color: #ededf5;
  }

  .left-list-item {
    margin-bottom: 2px;
  }

  .left-list-item:hover {
    background-color: #ededf5;
  }
@@ -533,6 +522,7 @@
      font-size: 16px;
      color: #333;
    }

    .left-select {
      :deep(.arco-select-view-single) {
        border-radius: 5px;
@@ -547,8 +537,8 @@

    .left {
      /* height: calc(100vh - 160px);
        overflow-y: auto;
        overflow-x: hidden;*/
    overflow-y: auto;
    overflow-x: hidden;*/
      border: 0px;

      .left-list {
@@ -573,6 +563,7 @@
        }
      }
    }

    .card-btn-1 {
      margin: 8px 15px;
      width: 100%;
@@ -582,22 +573,26 @@
    .card-btn-2 {
      margin: 10px 10px;
    }

    .chatItemAnswer {
      box-sizing: border-box;
      background: #f1f1f1;
      border-radius: 14px;

      .light {
        box-sizing: border-box;
        background: #f1f1f1;
        border-radius: 14px;
      }
    }

    .textItemAnswer {
      background-color: #373739;
    }

    .center {
      position: relative;
      padding-left: 50px;

      .center-title {
        line-height: 60px;
@@ -625,6 +620,7 @@
          margin-right: 20px;
        }
      }

      .center-list {
        margin-top: 10px;

@@ -634,9 +630,11 @@
          padding: 10px;
          min-height: 120px;
          background-color: #e9f3ff;

          .item-content {
            color: #666;
          }

          .item-title {
            text-align: center;
            line-height: 40px;
@@ -646,6 +644,7 @@
          }
        }
      }

      .chartStart {
        color: #4955f5;
        cursor: pointer;
@@ -653,9 +652,11 @@
        font-size: 12px;
        font-weight: 500;
      }

      .chat_bottom {
        display: flex;
        align-items: center;

        .center-bottom {
          // position: absolute;
          // width: 90%;
@@ -680,28 +681,34 @@
            bottom: 10px;
            z-index: 10;
          }

          :deep(.arco-btn-size-large) {
            height: 28px;
            width: 50px;
            width: 60px;
          }
        }

        :deep(.arco-textarea-wrapper) {
          padding-top: 5px;
        }
      }
    }

    .chat-item {
      padding: 10px 0;

      .chartUserText {
        font-weight: 600;
        font-size: 14px;
        color: #333;
        margin-top: 4px;
      }

      .icon-user-jpg {
        border: 1px solid #d9d9d9;
      }
    }

    .right {
      .right-top {
        display: flex;
@@ -718,13 +725,16 @@
          top: 0px;
        }
      }

      .right-tag {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        :deep(.arco-btn-primary) {
          margin-bottom: 10px !important;

          &:hover {
            background-color: #e9f3ff;
            color: rgb(22, 93, 255);
@@ -751,4 +761,30 @@
      }
    }
  }
  .header___lEPyH {
    width: 100%;
    height: 46px;
    position: relative;
    backdrop-filter: blur(15px);
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-backdrop-filter: blur(15px);
    .chatHeaderBox {
      width: auto;
      border-radius: 8px;
      padding: 4px 20px;
      transition: all var(--animation-duration) var(--animation-transition);
      display: flex;
      align-items: flex-end;
      overflow: hidden; /* 隐藏超出的内容 */
      text-overflow: ellipsis; /* 使用省略号来代替被隐藏的文字 */
      white-space: nowrap; /* 不换行，使内容在一行内显示 */
      max-width: 200px;
      .title {
        color: var(--color-text-1);
        font-size: 12px;
      }
    }
  }
</style>