<template>
  <div class="chat-container">
    <div class="messages">
      <ul>
        <li
          v-for="message in messages"
          :key="message.id"
          :class="[message.user, message.user === 'user' ? 'user-message' : '']"
        >
          <!-- 添加判断，如果是机器人的消息也显示头像 -->
          <div class="message_name">
            <div
              class="avatar"
              :class="{
                'user-avatar': message.user === 'user',
                'bot-avatar': message.user === 'bot',
              }"
            ></div>
            <div class="name">
              <span class="sender-name" style="color: #666666;" v-if="message.user === 'user'">你</span>
              <span class="sender-name" v-if="message.user === 'bot'"
                >轻良AI助理</span
              >
            </div>
          </div>
          <!-- 使用 v-html 来渲染 Markdown 文本 -->
          <div class="message-content">
            <div
              class="message-text"
              v-html="renderMarkdown(message.message)"
            ></div>
          </div>
        </li>
      </ul>
    </div>
    <div class="input-container">
      <textarea
        v-model="userInput"
        rows="4"
        @keydown="handleKeydown"
        placeholder="发送消息..."
      ></textarea>
      <button @click="sendMessage" class="btn">发送</button>
    </div>
    <!-- 添加 LoginModal 组件 -->
    <LoginModal
      :visible.sync="showLoginModal"
      @close="showLoginModal = false"
      @login-success="handleLoginSuccess"
    />
  </div>
</template>
  
  <script src="./js/ChatBox.js"></script>
  <style src="./css/ChatBox.css" scoped></style>