可信代码库-可信开源代码库AI助手开源软件列表展示开发完成

src/views/Jyh/AI/Home/index.vue

@@ -3,17 +3,51 @@
     <div class="home-content">
       <div v-if="startChat" ref="conversationRef" class="conversation-area">
         <template v-for="(msg, idx) in messages" :key="idx">
-          <McBubble v-if="msg.from === 'user'" :content="msg.content" :align="'right'" :avatarConfig="msg.avatarConfig"></McBubble>
-          <McBubble v-else :loading="msg.loading ?? false" :avatarConfig="msg.avatarConfig">
-            <McMarkdownCard :content="msg.content" :theme="theme"></McMarkdownCard>
-            <template #bottom>
-              <div class="bubble-bottom-operations">
-                <i class="icon-copy-new"></i>
-                <i class="icon-like"></i>
-                <i class="icon-dislike"></i>
+          <McBubble v-if="msg.from === 'user'" :content="msg.content" :align="'right'" ></McBubble>
+          <McBubble v-else :loading="msg.loading ?? false" >
+            <div class="think-toggle-btn" @click="toggleThink(idx)">
+              <div class="flex align-middle">
+                <img style="height: 15px;margin-right: 8px" width="16" src="@/assets/imgs/jyh/ai/icon_skgc.png" />
+                <span class="span1">思考过程：</span>
+                <i style="margin-left: auto" :class="btnIcon"></i>
               </div>
-            </template>
+            </div>
+            <div class="flex align-middle" style="margin-top: 6px">
+              <i style="font-size: 16px;height: 15px;margin-right: 8px" class="icon icon-right"></i>
+              <span class="span1">完成回答：</span>
+            </div>
+            <!--开源软件列表-->
+            <OssList />
+            <div class="conversation-cnxw">
+              <a class="flex conversation-cnxw-item">
+                <span class="span2">猜你想问</span>
+                <img style="height: 15px;margin-right: 8px" width="16" src="@/assets/imgs/jyh/ai/icon_generate.png" />
+              </a>
+              <div class="flex conversation-cnxw-item">
+                <a class="g-header-copilot" @click="onSubmit('我想看Redis的详情')">
+                  <img style="height: 15px;" width="16" src="@/assets/imgs/jyh/ai/icon_cnxw.png" />
+                  <span class="ml-xs">我想看Redis的详情</span>
+                </a>
+              </div>
+              <div class="flex conversation-cnxw-item">
+                <a class="g-header-copilot" @click="onSubmit('Redis的可信评分是多少')">
+                  <img style="height: 15px;" width="16" src="@/assets/imgs/jyh/ai/icon_cnxw.png" />
+                  <span class="ml-xs">Redis的可信评分是多少</span>
+                </a>
+              </div>
+            </div>
           </McBubble>
+
+<!--          <McBubble v-else :loading="msg.loading ?? false" :avatarConfig="msg.avatarConfig">-->
+<!--            <McMarkdownCard :content="msg.content" :theme="theme"></McMarkdownCard>-->
+<!--            <template #bottom>-->
+<!--              <div class="bubble-bottom-operations">-->
+<!--                <i class="icon-copy-new"></i>-->
+<!--                <i class="icon-like"></i>-->
+<!--                <i class="icon-dislike"></i>-->
+<!--              </div>-->
+<!--            </template>-->
+<!--          </McBubble>-->
         </template>
       </div>
       <div v-else class="welcome-page">
@@ -31,20 +65,20 @@
         </div>
         <!--猜你想问-->
         <div style="width: 100%;margin-top: -20px">
-          <GuessYouWantToAsk />
+          <GuessYouWantToAsk  @submit="onSubmit"/>
         </div>
       </div>
       <!--操作按钮-->
       <div class="new-convo-button">
-        <McPrompt
-          v-if="startChat"
-          class="simple-prompt"
-          style="flex: 1"
-          :list="simplePrompt"
-          :direction="'horizontal'"
-          @itemClick="onItemClick($event)"
-        ></McPrompt>
-        <div v-else class="agent-knowledge">
+<!--        <McPrompt-->
+<!--          v-if="startChat"-->
+<!--          class="simple-prompt"-->
+<!--          style="flex: 1"-->
+<!--          :list="simplePrompt"-->
+<!--          :direction="'horizontal'"-->
+<!--          @itemClick="onItemClick($event)"-->
+<!--        ></McPrompt>-->
+        <div class="agent-knowledge">
           <d-dropdown :position="['top']" @toggle="(val) => (isAgentOpen = val)">
             <div class="agent-wrapper">
               <img src="@/assets/imgs/jyh/ai/aiLogo2.png" />
@@ -98,6 +132,7 @@ import { ref, defineComponent, nextTick, onMounted } from 'vue';
 import { introPrompt, simplePrompt, mockAnswer, guessQuestions } from './mock.constants';
 import SwiperComponent from './SwiperComponent.vue';
 import GuessYouWantToAsk from './GuessYouWantToAsk.vue';
+import OssList from './components/OssList.vue';
 
 const inputValue = ref('');
 const startChat = ref(false);
@@ -156,31 +191,41 @@ const onSubmit = (e, answer = undefined) => {
       behavior: 'smooth',
     });
   });
-  getAIAnswer(answer ?? e);
+  // getAIAnswer(answer ?? e);
+  getAIAnswer(mockAnswer);
 };
 
 const getAIAnswer = (content) => {
   messages.value.push({
     from: 'ai-model',
-    content: '',
+    content: content,
     avatarPosition: 'side-left',
     avatarConfig: { ...aiModelAvatar },
-    loading: true,
+    loading: false,
   });
 
-  /* 模拟流式数据返回 */
-  setTimeout(async () => {
-    messages.value.at(-1).loading = false;
-    for (let i = 0; i < content.length;) {
-      await new Promise(r => setTimeout(r, 300 * Math.random()));
-      messages.value[messages.value.length - 1].content = content.slice(0, i += Math.random() * 10);
-      nextTick(() => {
-        conversationRef.value?.scrollTo({
-          top: conversationRef.value.scrollHeight
-        });
-      });
-    }
-  }, 1000);
+
+  // messages.value.push({
+  //   from: 'ai-model',
+  //   content: '',
+  //   avatarPosition: 'side-left',
+  //   avatarConfig: { ...aiModelAvatar },
+  //   loading: true,
+  // });
+
+  // /* 模拟流式数据返回 */
+  // setTimeout(async () => {
+  //   messages.value.at(-1).loading = false;
+  //   for (let i = 0; i < content.length;) {
+  //     await new Promise(r => setTimeout(r, 300 * Math.random()));
+  //     messages.value[messages.value.length - 1].content = content.slice(0, i += Math.random() * 10);
+  //     nextTick(() => {
+  //       conversationRef.value?.scrollTo({
+  //         top: conversationRef.value.scrollHeight
+  //       });
+  //     });
+  //   }
+  // }, 1000);
 };
 
 const onNewConvo = () => {
@@ -201,6 +246,26 @@ const themeChange = () => {
   }
 }
 
+const isLoading = ref(false);
+let interval = null;
+const thinkBtnText = ref('思考过程');
+const btnIcon = ref('icon-chevron-down-2');
+
+const toggleThink = (idx) => {
+  if (isLoading.value) {
+    return
+  }
+  const targetNode = document.querySelectorAll('.mc-bubble-content-container')[idx];
+  if (targetNode) {
+    const thinkBlock = targetNode.querySelector('.mc-think-block');
+    if (thinkBlock) {
+      const currentDisplay = getComputedStyle(thinkBlock).display;
+      thinkBlock.style.display = currentDisplay === 'none' ? 'block' : 'none';
+      btnIcon.value = currentDisplay === 'none' ? 'icon-chevron-up-2' :'icon-chevron-down-2'
+    }
+  }
+}
+
 onMounted(() => {
   if(typeof window !== 'undefined'){
     themeService = window['devuiThemeService'];
@@ -215,7 +280,7 @@ onMounted(() => {
 <style scoped lang="scss">
 .home-container {
   width: 100%;
-  height: 100%;
+  height: calc(100vh - 56px);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -227,7 +292,7 @@ onMounted(() => {
     padding-top: 3%;
     padding-bottom: 1%;
     height: 100%;
-    width: 50%;
+    width: 60%;
     display: flex;
     flex-direction: column;
     justify-self: center;
@@ -284,17 +349,78 @@ onMounted(() => {
 
   .conversation-area,
   .welcome-page {
-    height: 90%;
+    //height: 90%;
     width: 100%;
     flex: 1;
     display: flex;
     flex-direction: column;
-    //overflow: auto;
+    overflow: auto;
     padding: 0 12px;
   }
 
   .conversation-area {
     gap: 8px;
+    :deep(.mc-bubble-right) {
+      .mc-bubble-content {
+        background: #DFDFDF;
+      }
+    }
+    :deep(.mc-bubble-left) {
+      .mc-bubble-content-container {
+        background: transparent;
+        width: 100%;
+        .span1{
+          color: #777777;
+          font-family: HarmonyOS Sans SC;
+          font-weight: regular;
+          font-size: 14px;
+          line-height: 22px;
+          letter-spacing: 0px;
+          text-align: left;
+        }
+        .mc-bubble-content.filled {
+          background: transparent;
+        }
+      }
+    }
+    .conversation-cnxw {
+      margin-top: 8px;
+      .conversation-cnxw-item {
+        cursor: pointer;
+        align-items: center;
+        justify-content: end;
+        margin-right: 12px;
+        margin-bottom: 8px;
+      }
+      .span2{
+        color: black;
+        font-family: HarmonyOS Sans SC;
+        font-weight: regular;
+        font-size: 14px;
+        line-height: 22px;
+        letter-spacing: 0px;
+        text-align: left;
+        margin-right: 8px;
+      }
+      .g-header-copilot {
+        background: #fff;
+        color: black;
+        //width: 120px;
+        padding: 0 12px;
+        border-radius: 48px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        justify-content: center;
+        &:hover {
+          background: rgba(41, 81, 224, 0.8);
+        }
+      }
+      .g-header-copilot:hover {
+        background: #f0f0f0;
+      }
+    }
   }
 
   .welcome-page {