消息使用特定組件解析

gerson

2024-06-30 839461b04197f781ff8627d75824dacbbb76230f

 src/views/project/ch/home/component/waterRight/top.vue

@@ -4,13 +4,17 @@
      <p class="set-waterTitle"><strong>WI 水务智能专家</strong>智慧水务助手</p>
   </div>
   <div class="flex items-center pc-roleList">
      <div v-for="(item, index) in state.roleList" :key="index" class="flex items-center pl-6" @click="handleClick(item)">
         <el-tooltip :content="item.Content" placement="top" effect="light" popper-class="my-pop">
            <div class="modelItem cursor-pointer flex items-center" :class="{ modelItemActive: item.ID === state.activeRole }">
      <div v-for="(item, index) in llmList" :key="item.logicId" class="flex items-center pl-6" @click="handleClick(item)">
         <div class="modelItem cursor-pointer flex items-center" :class="{ modelItemActive: item.logicId === activeLLMId }">
            <img :src="item.icon" alt="icon" class="set-icon box-border" />
            <span>{{ item.logicTitle }}</span>
         </div>
         <!-- <el-tooltip :content="item.Content" placement="top" effect="light" popper-class="my-pop">
            <div class="modelItem cursor-pointer flex items-center " :class="{ modelItemActive: item.ID === state.activeRole }">
               <img :src="item.Icon" alt="icon" class="set-icon box-border" />
               <span>{{ item.Title }}</span>
            </div>
         </el-tooltip>
         </el-tooltip> -->
      </div>
      <div class="flex items-center cursor-pointer pl-5">
         <div class="modelItem cursor-pointer flex items-center">
@@ -23,7 +27,8 @@
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { onMounted, reactive, ref } from 'vue';
import { GetLLMList, SetLLM } from '/@/api/ai/chat';
import PlayBar from '/@/components/chat/components/playBar/PlayBar.vue';
import router from '/@/router';
import { activeChatRoom } from '/@/stores/chatRoom';
@@ -61,11 +66,47 @@
      },
   ],
   activeRole: 0,
   inputAnswer: '',
});
const handleClick = (item) => {
   state.activeRole = item.id;

const activeLLMId = ref();
const llmList = ref([]);
const iconList = ['/static/images/wave/Glm.jpg', '/static/images/wave/Glm.jpg', '/static/images/wave/Glm.jpg'];
const getLLMList = async () => {
   const res = await GetLLMList();

   const resData = (res?.llm_list || []) as any[];
   llmList.value = resData.map((item, index) => ({
      get logicId() {
         return this.logicModel.id;
      },
      get logicTitle() {
         return this.logicModel.title;
      },
      icon: iconList[index],
      logicModel: {
         ...item,
      },
   }));
   const first = llmList.value?.[0];
   first && setLLm(first.logicId);
};

const setLLm = async (llmId: string) => {
	
   const res = await SetLLM({
      llm: llmId,
   });
   activeLLMId.value = llmId;

   return true;
};
const handleClick = (item) => {
   setLLm(item.logicId);
};

onMounted(() => {
   getLLMList();
});
</script>
<style scoped lang="scss">
.set-waterTitle {