think step by step, fix and review: <!-- LifestyleCoach.vue -->
<template>
  <div class="chat-container">
    <!-- Chat Messages -->
    <div class="messages-container" ref="messagesContainer">
      <div v-for="(message, index) in messages" 
           :key="index" 
           :class="['message', message.role === 'assistant' ? 'assistant' : 'user']">
        <!-- Structured Options -->
        <div v-if="message.role === 'assistant' && message.options" 
             class="options-container">
          <button 
            v-for="option in message.options" 
            :key="option.value"
            @click="handleOptionSelect(option)"
            class="option-button"
            :disabled="isProcessing">
            {{ option.label }}
          </button>
        </div>
        <!-- Text Message -->
        <div v-else>{{ message.content }}</div>
      </div>
    </div>

    <!-- Domain Selection -->
    <div v-if="showDomainSelection" class="domain-selection">
      <button 
        v-for="domain in domains" 
        :key="domain.value"
        @click="selectDomain(domain)"
        :disabled="isProcessing"
        class="domain-button">
        {{ domain.label }}
      </button>
    </div>

    <!-- User Input -->
    <div class="input-container" v-if="!showDomainSelection">
      <input 
        v-model.trim="userInput"
        @keyup.enter="sendMessage"
        placeholder="Type your message..."
        :disabled="isProcessing || waitingForOptionSelection"
      />
      <button 
        @click="sendMessage" 
        :disabled="isProcessing || waitingForOptionSelection || !userInput.length">
        {{ isProcessing ? "Processing..." : "Send" }}
      </button>
    </div>
  </div>
</template>

<script>
// Constants
const PHASES = {
  INITIAL: "initial",
  DEEPENING: "deepening",
  RECOMMENDATION: "recommendation"
};

const ROUTINE_TYPES = {
  STRUCTURED: "structured",
  FLEXIBLE: "flexible",
  IRREGULAR: "irregular"
};

const TIME_AVAILABILITY = {
  MINIMAL: "minimal",
  MODERATE: "moderate",
  SUBSTANTIAL: "substantial"
};

export default {
  name: "LifestyleCoach",
  
  data() {
    return {
      // UI State
      messages: [],
      userInput: "",
      isProcessing: false,
      waitingForOptionSelection: false,
      showDomainSelection: false,
      
      // Current Session State
      currentDomain: null,
      
      // Domains Configuration
      domains: [
        {
          value: "nutrition",
          label: "Nutrition",
          initialQuestions: {
            habits: "How many meals do you typically eat per day?",
            constraints: "Do you have any dietary restrictions or preferences?",
            goals: "What's your main nutrition goal? (e.g., weight management, energy, health)"
          }
        },
        {
          value: "sport",
          label: "Sport",
          initialQuestions: {
            frequency: "How often do you currently exercise?",
            preferences: "What types of physical activities do you enjoy?",
            limitations: "Do you have any physical limitations or injuries?"
          }
        }
        // Additional domains can be added here
      ],
      
      // User Profile State
      userProfile: {
        lifestyle: {
          routineType: null,
          timeAvailability: null,
          stressLevel: null
        },
        domainSpecific: {},
        constraints: [],
        preferences: [],
        goals: []
      },
      
      // Analysis State
      analysisState: {
        currentPhase: PHASES.INITIAL,
        keyInsights: [],
        missingInfo: []
      },
      
      // Dashboard Configuration
      dataConfig: {
        objectives: {},
        keyMetrics: {},
        achievements: [],
        insights: [],
        insightTypeColors: {
          habit: "#4CAF50",
          challenge: "#FFC107",
          opportunity: "#2196F3"
        }
      }
    };
  },

  mounted() {
    this.initializeChat();
  },

  methods: {
    // Initialization Methods
    async initializeChat() {
      const welcomeMessage = {
        role: "assistant",
        content: "Hi! I'm your personal wellness coach. Before we dive into specific areas, could you tell me what best describes your daily routine?",
        options: [
          { label: "Structured/Regular", value: ROUTINE_TYPES.STRUCTURED },
          { label: "Flexible but Consistent", value: ROUTINE_TYPES.FLEXIBLE },
          { label: "Variable/Irregular", value: ROUTINE_TYPES.IRREGULAR }
        ]
      };
      
      this.addMessage(welcomeMessage);
      this.waitingForOptionSelection = true;
    },

    // Message Handling Methods
    addMessage(message) {
      this.messages.push(message);
      this.$nextTick(() => {
        if (this.$refs.messagesContainer) {
          this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
        }
      });
    },

    async sendMessage() {
      if (!this.canSendMessage()) return;

      const userMessage = this.userInput.trim();
      this.addMessage({
        role: "user",
        content: userMessage
      });
      
      this.userInput = "";
      this.isProcessing = true;

      try {
        await this.processUserMessage(userMessage);
      } catch (error) {
        console.error("Error processing message:", error);
        this.handleError("message processing");
      } finally {
        this.isProcessing = false;
      }
    },

    // Option Selection Handling
    async handleOptionSelect(option) {
      if (this.isProcessing) return;
      
      this.isProcessing = true;
      this.waitingForOptionSelection = false;

      try {
        this.addMessage({
          role: "user",
          content: `Selected: ${option.label}`
        });

        if (!this.userProfile.lifestyle.routineType) {
          this.userProfile.lifestyle.routineType = option.value;
          await this.assessTimeAvailability();
        } else if (!this.userProfile.lifestyle.timeAvailability) {
          this.userProfile.lifestyle.timeAvailability = option.value;
          await this.showDomainOptions();
        } else {
          await this.processLifestyleImplications(option);
        }
      } catch (error) {
        console.error("Error handling option selection:", error);
        this.handleError("option selection");
      } finally {
        this.isProcessing = false;
      }
    },

    // Domain Selection Handling
    async selectDomain(domain) {
      if (this.isProcessing) return;
      
      this.isProcessing = true;
      this.showDomainSelection = false;
      this.currentDomain = domain;

      try {
        this.addMessage({
          role: "user",
          content: `I'd like to focus on ${domain.label}`
        });

        await this.initializeDomainAssessment(domain);
      } catch (error) {
        console.error("Error selecting domain:", error);
        this.handleError("domain selection");
      } finally {
        this.isProcessing = false;
      }
    },

    // Assessment Methods
    async assessTimeAvailability() {
      const timeQuestion = {
        role: "assistant",
        content: "How much time can you typically dedicate to wellness activities per day?",
        options: [
          { label: "Less than 30 minutes", value: TIME_AVAILABILITY.MINIMAL },
          { label: "30-60 minutes", value: TIME_AVAILABILITY.MODERATE },
          { label: "More than 60 minutes", value: TIME_AVAILABILITY.SUBSTANTIAL }
        ]
      };
      
      this.addMessage(timeQuestion);
      this.waitingForOptionSelection = true;
    },

    async processLifestyleImplications(option) {
      const analysisPrompt = this.generateAnalysisPrompt();
      
      try {
        const response = await this.fetchLLMResponse(analysisPrompt);
        await this.processAnalysisResponse(response);
      } catch (error) {
        console.error("Error in lifestyle analysis:", error);
        this.handleError("lifestyle analysis");
      }
    },

    // API Interaction Methods
    async fetchLLMResponse(prompt) {
      const response = await fetch("http://localhost:8080/v1/chat/completions", {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          temperature: 0.7,
          messages: [
            {
              role: "system",
              content: prompt
            }
          ]
        })
      });

      if (!response.ok) {
        throw new Error(`API request failed: ${response.status}`);
      }

      return await response.json();
    },

    // Utility Methods
    canSendMessage() {
      return this.userInput.trim().length > 0 && 
             !this.isProcessing && 
             !this.waitingForOptionSelection;
    },

    generateAnalysisPrompt() {
      return `
        Analyze user profile:
        - Routine: ${this.userProfile.lifestyle.routineType}
        - Time: ${this.userProfile.lifestyle.timeAvailability}
        - Domain: ${this.currentDomain?.value}
        - Previous responses: ${JSON.stringify(this.userProfile.domainSpecific)}
        
        Generate focused question to understand:
        1. Key barriers or challenges
        2. Current habits and preferences
        3. Immediate improvement opportunities
        
        Provide question that will yield most insight based on missing information.
      `;
    },

    handleError(context) {
      this.addMessage({
        role: "assistant",
        content: `I apologize, but I encountered an error during ${context}. Would you like to try again?`
      });
    }
  }
};
</script>

<style scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 1rem;
  gap: 1rem;
}

.messages-container {
  flex-grow: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  min-height: 300px;
  max-height: 600px;
}

.message {
  padding: 0.75rem;
  border-radius: 0.5rem;
  max-width: 80%;
  word-wrap: break-word;
}

.assistant {
  background-color: #e2e8f0;
  align-self: flex-start;
}

.user {
  background-color: #3b82f6;
  color: white;
  align-self: flex-end;
}

.input-container {
  display: flex;
  gap: 0.5rem;
}

input {
  flex-grow: 1;
  padding: 0.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.25rem;
}

button {
  padding: 0.5rem 1rem;
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

button:disabled {
  background-color: #94a3b8;
  cursor: not-allowed;
}

.options-container,
.domain-selection {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.option-button,
.domain-button {
  background-color: #e2e8f0;
  color: #1e293b;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.option-button:hover,
.domain-button:hover {
  background-color: #94a3b8;
}
</style>