Tạo Chatbot AI Nhanh Chóng Với Supabase Và OpenAI

CREATE TABLE conversations (
  id SERIAL PRIMARY KEY,
  user_id UUID REFERENCES auth.users NOT NULL,
  message TEXT NOT NULL,
  response TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

CREATE OR REPLACE FUNCTION get_chatbot_response(message TEXT)
RETURNS TEXT AS $$
DECLARE
  response TEXT;
BEGIN
  -- Gọi API OpenAI để lấy phản hồi
  SELECT * FROM http(
    'POST',
    'https://api.openai.com/v1/chat/completions',
    '{ "model": "gpt-3.5-turbo", "messages": [ { "role": "user", "content": "' || message || '" } ] }',
    'application/json',
    'Bearer ' || current_setting('services.openai.api_key')
  ) INTO response;

RETURN response;
END;
$$ LANGUAGE plpgsql;

Hàm này sẽ nhận vào một tin nhắn và trả về phản hồi từ OpenAI. Lưu ý rằng bạn cần thay thế services.openai.api_key bằng tên biến môi trường bạn đã thiết lập.

Bước 3: Xây dựng giao diện người dùng

Với cơ sở dữ liệu và API đã sẵn sàng, bước tiếp theo là xây dựng giao diện cho chatbot. Bạn có thể sử dụng bất kỳ framework frontend nào như React, Vue.js, hoặc thậm chí là HTML/CSS thuần túy. Trong ví dụ này, chúng ta sẽ sử dụng React.

Đầu tiên, hãy tạo một component để hiển thị cuộc hội thoại và nhập tin nhắn từ người dùng. Sử dụng Supabase JavaScript client để tương tác với cơ sở dữ liệu:

import { createClient } from '@supabase/supabase-js';

const supabase = createClient('your-supabase-url', 'your-supabase-anon-key');

function Chatbot() {
  const [conversations, setConversations] = useState([]);
  const [message, setMessage] = useState('');

useEffect(() => {
    fetchConversations();
  }, []);

const fetchConversations = async () => {
    const { data } = await supabase
      .from('conversations')
      .select('*')
      .order('created_at', { ascending: false });
    setConversations(data);
  };

const sendMessage = async () => {
    if (!message.trim()) return;

// Lưu tin nhắn vào cơ sở dữ liệu
    await supabase.from('conversations').insert({
      user_id: 'your-user-id',
      message: message
    });

// Lấy phản hồi từ chatbot
    const response = await supabase.rpc('get_chatbot_response', { message });
    await supabase.from('conversations').insert({
      user_id: 'your-user-id',
      message: message,
      response: response
    });

setMessage('');
    fetchConversations();
  };

return (
    <div>
      <div>
        {conversations.map((conv) => (
          <div key={conv.id}>
            <p>{conv.message}</p>
            <p>{conv.response}</p>
          </div>
        ))}
      </div>
      <input value={message} onChange={(e) => setMessage(e.target.value)} />
      <button onClick={sendMessage}>Send</button>
    </div>
  );
}