Merge branch 'chatbot'

src/api/chatbot.js

@@ -0,0 +1,46 @@
+import axios from 'axios'; 
+
+const apiKey = import.meta.env.VITE_OPENAI_API_KEY;
+
+const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+
+export const sendMessageToChatGPT = async (message, retries = 3) => {
+  let attempt = 0;
+  const maxDelay = 32000; // 최대 지연 시간 (32초)
+
+  while (attempt < retries) {
+    try {
+      console.log(apiKey)
+      const response = await axios.post(
+        'https://api.openai.com/v1/chat/completions',
+        {
+          model: 'gpt-3.5-turbo', // 또는 다른 사용 가능한 모델로 변경
+          messages: [
+            { role: 'system', content: 'You are a tour guide for those who want to travel to Korea. Answer only questions related to your trip to Korea.' },
+            { role: 'user', content: message }
+          ],
+        },
+        {
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${apiKey}`,
+          },
+        }
+      );
+
+      return response.data.choices[0].message.content;
+    } catch (error) {
+      if (error.response && error.response.status === 429) {
+        attempt++;
+        const backoffTime = Math.min(1000 * 2 ** attempt, maxDelay); // 지수 백오프
+        console.warn(`Rate limit exceeded. Retrying in ${backoffTime / 1000} seconds...`);
+        await delay(backoffTime);
+      } else {
+        console.error('Error calling OpenAI API:', error);
+        throw error;
+      }
+    }
+  }
+
+  throw new Error('Exceeded maximum retry attempts');
+};

src/components/chatbot/TravelChatBot.vue

@@ -0,0 +1,103 @@
+<template>
+    <div class="chat-container">
+      <div class="messages">
+        <div v-for="(msg, index) in messages" :key="index" :class="msg.role">
+          {{ msg.content }}
+        </div>
+      </div>
+      <div class="input-container">
+        <input
+          v-model="userInput"
+          @keyup.enter="handleSend"
+          type="text"
+          placeholder="Type your travel query..."
+        />
+        <button @click="handleSend">Send</button>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import { ref } from 'vue';
+  import { sendMessageToChatGPT } from "@/api/chatbot"; 
+  
+  export default {
+    name: 'TravelChatBot',
+    setup() {
+      const messages = ref([]);
+      const userInput = ref('');
+  
+      const handleSend = async () => {
+        if (userInput.value.trim() === '') return;
+        
+        const userMessage = { role: 'user', content: userInput.value };
+        console.log(userMessage)
+        messages.value.push(userMessage);
+  
+        userInput.value = '';
+  
+        const botMessageContent = await sendMessageToChatGPT(userMessage.content);
+        const botMessage = { role: 'assistant', content: botMessageContent };
+  
+        messages.value.push(botMessage);
+      };
+  
+      return {
+        messages,
+        userInput,
+        handleSend,
+      };
+    },
+  };
+  </script>
+  
+  <style scoped>
+  .chat-container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    max-width: 600px;
+    margin: 0 auto;
+    border: 1px solid #ccc;
+    padding: 20px;
+  }
+  
+  .messages {
+    flex: 1;
+    overflow-y: auto;
+  }
+  
+  .messages .user {
+    text-align: right;
+    margin: 10px 0;
+    color: blue;
+  }
+  
+  .messages .assistant {
+    text-align: left;
+    margin: 10px 0;
+    color: green;
+  }
+  
+  .input-container {
+    display: flex;
+  }
+  
+  input[type="text"] {
+    flex: 1;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+  
+  button {
+    padding: 10px;
+    margin-left: 10px;
+    border: none;
+    border-radius: 4px;
+    background-color: #007bff;
+    color: white;
+    cursor: pointer;
+  }
+  </style>
+