frontend/src/components/ChatInterface.vue

<template>

<div id="chat-interface"> <!-- 给根元素添加一个唯一ID -->
    <!-- 页面内容 -->
    <div v-if="loading" class="loading-popup">Generating...</div>
    <!-- 其余页面内容 -->
    <div class="chat-container">
    <header class="header">
      <button class="menu-btn" @click="goToDecisionList">
        <img
          loading="lazy"
          src="https://cdn.builder.io/api/v1/image/assets/TEMP/91eadb055de4658009ff495b7d3d28943f962d04f4c2f04b6234085498a9fdae?apiKey=27a3cbc05333484ba783c786c92a1338&"
          alt="Navigation menu"
          class="menu-icon"
        />
      </button>
      <h1 class="header-title">New Project</h1>
      <button class="generate-button" @click="handleGenerate">
        <img
          loading="lazy"
          src="https://cdn.builder.io/api/v1/image/assets/TEMP/455e4dfbb678e02c3414ec1d1e17cc6ec99f1c8579a6232f69f60078f6780750?apiKey=27a3cbc05333484ba783c786c92a1338&"
          alt="Generate new project"
          class="generate-icon"
        />
        <span>Generate</span>
      </button>
    </header>

    <main class="chat-content">
      <!-- Displaying AI assistant's initial message -->
      <div v-for="(message, index) in messages" :key="index" :class="['message-container', message.sender]">
        <img
          v-if="message.sender === 'assistant'"
          loading="lazy"
          src="https://cdn.builder.io/api/v1/image/assets/TEMP/71cd10158e03c2dd193a89b87b9d4fbc4ee62eb60e57692bacf8a038df1f8bfe?apiKey=27a3cbc05333484ba783c786c92a1338&"
          alt="AI Assistant avatar"
          class="avatar"
        />
        <img
          v-if="message.sender === 'user'"
          loading="lazy"
          src="https://cdn.builder.io/api/v1/image/assets/TEMP/05f7922f2b1c187beb89f24d171c6fbc6ba9230ec5b5aa86d29a816aad2cce17?apiKey=27a3cbc05333484ba783c786c92a1338&"
          alt="User avatar"
          class="avatar"
        />
        <p class="message">{{ message.text }}</p>
      </div>

      <!-- User input form -->
      <form class="input-form" @submit.prevent="handleSubmit">
        <label for="userInput" class="visually-hidden">Type your message</label>
        <input
          type="text"
          id="userInput"
          class="message-input"
          v-model="userInput"
        />
        <button type="submit" class="send-button" aria-label="Send message">
          <img
            loading="lazy"
            src="https://cdn.builder.io/api/v1/image/assets/TEMP/9faeb997ab01c69b2ecc19005ad6e9efa83b95810045fd99a2a93fe1348be8b0?apiKey=27a3cbc05333484ba783c786c92a1338&"
            alt="Send icon"
            class="send-icon"
          />
        </button>
      </form>
    </main>
  </div>
  </div>


  <!-- Conditional Loading Popup -->
  <div v-if="loading" class="loading-popup">
    <span>Generating...</span>
  </div>


  
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'ChatInterface',
  setup() { 
    onMounted(() => { 
    const container = document.getElementById('chat-interface'); // 获取特定页面容器 
    if (container) { 
    container.style.zoom = "0.8"; // 页面缩小到 80% 
    } 
    }); 
    const loading = ref(false); 
    const userInput = ref('') // 用户输入 
    const messages = ref([ // 初始的Assistant消息 
    { sender: 'assistant', text: 
    'Hello! I am your AI assistant. Let\'s get started.Please enter your decision topic and specific content.' 
    } 
    ]) 
    const step = ref(0) // 用来追踪对话阶段 
    const router = useRouter() 
    // 在组件挂载时，从 localStorage 中恢复对话内容 
    onMounted(() => { 
    const savedMessages = localStorage.getItem('NewwwwchatMessages') 
    if (savedMessages) { 
    messages.value = JSON.parse(savedMessages) 
    } 
    }) 
    // 提交函数：用户输入后更新消息 
    const handleSubmit = () => { 
    if (!userInput.value.trim()) return 
    // 记录用户输入 
    messages.value.push({ sender: 'user', text: userInput.value }) 
    setTimeout(() => { 
    // 根据当前对话阶段的step值回复不同内容 
    if (step.value === 0) { 
    // 第一阶段：询问关于offer的基本信息 
    messages.value.push({ 
    sender: 'assistant', 
    text: 'Great! When considering an offer, you can look at several aspects like salary, location, company culture, and career growth. Could you please provide me with more details on these points? For example: "The offer is for a Software Engineer role with a salary of $X in Location Y."' 
    }) 
    step.value++ // 进入下一阶段 
    } else if (step.value === 1) { 
    // 第二阶段：询问用户的个人偏好 
    messages.value.push({ 
    sender: 'assistant', 
    text: 'Thanks! Now, could you tell me about your preferences and rate the importance of each aspect in your mind? For example: "salary:2, location:3, company culture:4, career growth:5."' 
    }) 
    step.value++ // 进入下一阶段 
    } else if (step.value === 2) { 
    // 第三阶段：询问用户的个人信息 
    messages.value.push({ 
    sender: 'assistant', 
    text: 'Got it! Is there any personal detail you want to share with me that are relevant to this decision? For example: "I have a family and the school district is important to me."' 
    }) 
    step.value++ // 进入下一阶段 
    } else if (step.value === 3) { 
    // 用户已完成输入，等待用户确认 
    messages.value.push({ 
    sender: 'assistant', 
    text: 'Thanks for providing all the details. Please type "Finished" when you are done.' 
    }) 
    } else if (step.value === 4 && userInput.value.trim().toLowerCase() === 'finished') { 
    // 用户输入 "finished"，生成决策报告 
    messages.value.push({ 
    sender: 'assistant', 
    text: 'OK, I will now generate your decision report.' 
    }) 
    handleGenerate() // 跳转到结果页面 
    } 
    // 更新 localStorage 
    localStorage.setItem('NewwwwchatMessages', JSON.stringify(messages.value)) 
    }, 10000) 
    // 清空输入框 
    userInput.value = '' 
    }

    // 用户输入 "Finished" 后生成报告
    const handleGenerate = () => {
      loading.value = true;  // 设置 loading 为 true，显示弹窗
      console.log("Loading started", loading.value);  
      setTimeout(() => {
        loading.value = false;  // 10秒后隐藏弹窗
        router.push('/result');  // 跳转到结果页面
      }, 20000);  // 延迟10秒
    };

    return {
      userInput,
      messages,
      handleSubmit,
      handleGenerate
    }
  }
})
</script>

  
  <style scoped>
  .loading-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* 居中显示 */
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 20px;
    border-radius: 5px;
    font-size: 18px;
    text-align: center;
    z-index: 9999;  /* 确保它在最上面 */
  }

  .chat-container {
    background-color: #f1f3ff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: Inter, sans-serif;
  }
  
  .header {
    background-color: #51d4e0;
    box-shadow: 9px 0 16px rgba(0, 0, 0, 0.02);
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 24px 36px;
  }
  
  .menu-icon {
    width: 13px;
    aspect-ratio: 0.57;
    object-fit: contain;
  }
  
  .header-title {
    color: #fff;
    font-size: 32px;
    font-weight: 600;
  }
  
  .generate-button {
    border-radius: 30px;
    background-color: #fff;
    display: flex;
    gap: 7px;
    align-items: center;
    font-size: 20px;
    color: #51d4e0;
    font-weight: 700;
    padding: 10px 17px;
    border: 2px solid #51d4e0;
    cursor: pointer;
    margin-right: 80px;
  }
  
  .generate-icon {
    width: 24px;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: 30px;
  }
  
  .chat-content {
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 0 19px rgba(0, 0, 0, 0.05);
    margin-top: 26px;
    padding: 57px 62px;
  }
  
  .message-container {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
  }
  
  .message-container.user {
    flex-direction: row-reverse;
  }
  
  .avatar {
    width: 70px;
    aspect-ratio: 1;
    object-fit: contain;
  }
  
  .message {
    border-radius: 35px;
    padding: 20px 56px;
    font-size: 24px;
  }
  
  .message-container.assistant .message {
    background-color: #f3f3f3;
  }
  
  .message-container.user .message {
    background-color: #51d4e0;
    color: #fff;
  }
  
  .list-item {
    font-weight: 700;
    line-height: 36px;
  }
  
  .input-form {
    position: fixed;
    bottom: 40px;
    left: 20px;
    right:100px;
    width: 95%;
    background-color: #f3f3f3;
    display: flex;
    align-items: center;
    padding: 10px 30px;
    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
    }
  
  .message-input {
    background: none;
    border: none;
    color: #b4b4b4;
    font-size: 24px;
    width: 100%;
    margin-right: 20px;
  }
  
  .message-input:focus {
    outline: none;
  }
  
  .send-icon {
    width: 53px;
    aspect-ratio: 1;
    object-fit: contain;
  }
  
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }


  @media (max-width: 991px) {
    .header {
      padding: 0 20px;
    }
  
    .chat-content {
      padding: 0 20px;
    }
  
    .message {
      padding: 20px;
    }
  
    .input-form {
      margin-top: 40px;
      padding: 16px 20px;
    }
  
    .generate-button {
      white-space: normal;
    }
  }
  </style>