Integrate a chatbot in your website using OpenAI

npm i openai

import OpenAI from 'openai';

const openai = new OpenAI({
  apiKey: 'OPENAI_API_KEY',
});

'use server';

import OpenAI from 'openai';

const systemPrompt = `You are a helpful assistant called ToolefyBot. 

You will only answer questions about website toolefy.com

About Toolefy:
Toolefy.com is an online platform offering a variety of free tools designed to simplify digital tasks, 
particularly those involving images and PDFs. The site provides an array of utilities that can help 
with file compression, format conversion, and document manipulation.

Some Things to keep in mind while replying to questions:
- Keep your answers within one line.
- Give on reference to other websites.
- If you don't know the answer to the question, just say "I don't know, Please contact support!"
- Do not format the response.`;

export const chatWithWebsite = async (question: string) => {
  try {
    const openai = new OpenAI({
      apiKey: process.env.OPENAI_API_KEY,
    });

    const response = await openai.chat.completions.create({
      model: 'gpt-4o',
      messages: [
        {
          role: 'user',
          content: systemPrompt,
        },
        {
          role: 'user',
          content: question,
        },
      ],
    });

    return response.choices[0].message.content;
  } catch (error) {
    console.log(error);
    throw new Error('Failed to get response from OpenAI');
  }
};

"use client";

import { useState } from "react";
import "./style.css";
import { chatWithWebsite } from "@/lib/integration/openai";
import { Questrial } from "next/font/google";

const ChatPopup = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [isBotTyping, setIsBotTyping] = useState(false);

  const [messages, setMessages] = useState([
    { role: "system", content: "How can we help you?" },
  ]);
  const [input, setInput] = useState("");

  const toggleChat = () => {
    setIsOpen(!isOpen);
  };

  const handleSend = async () => {
    if (input.trim()) {
      const question = input;
      setMessages([...messages, { role: "user", content: input }]);
      setInput("");
      setIsBotTyping(true);

      const response = await chatWithWebsite(question);
      setMessages((prevMessages) => [
        ...prevMessages,
        { role: "system", content: response as string },
      ]);
      setIsBotTyping(false);
    }
  };

  return (
    <div className="chatPopup">
      <button className="chatButton" onClick={toggleChat}>
        Chat
      </button>
      {isOpen && (
        <div className="chatWindow">
          <div className="chatHeader">
            <h3>Chat with us!</h3>
            <button className="closeButton" onClick={toggleChat}>
              &times;
            </button>
          </div>
          <div className="chatBody">
            <div className="chatMessages">
              <div className="flex flex-col space-y-3 h-[80%]">
                {messages.map((message, index) => (
                  <p
                    key={index}
                    className={`flex flex-col ${
                      message.role === "user"
                        ? "self-end text-right bg-slate-300"
                        : "self-start bg-blue-200"
                    } p-2 rounded text-sm max-w-[70%]`}
                  >
                    {message.content}
                  </p>
                ))}
                {isBotTyping && (
                  <div className="flex flex-col self-start p-2 rounded bg-blue-200 text-sm max-w-[70%]">
                    <span className="typing">Bot is typing...</span>
                  </div>
                )}
              </div>
            </div>
            <textarea
              rows={2}
              className="chatInput pr-[80px]"
              value={input}
              onChange={(e) => setInput(e.target.value)}
            ></textarea>
            <button
              className="bg-blue-500 p-3 text-white rounded shadow-sm absolute bottom-5 right-5"
              onClick={handleSend}
            >
              Send
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

export default ChatPopup;

.chatPopup {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}

.chatButton {
  background-color: #0070f3;
  color: white;
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.chatWindow {
  position: fixed;
  bottom: 100px;
  right: 20px;
  width: 300px;
  height: 400px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.chatHeader {
  background-color: #0070f3;
  color: white;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.closeButton {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
}

.chatBody {
  padding: 10px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  color: #333;
}

.chatMessages {
  height: 250px;
  overflow: scroll;
  margin-bottom: 10px;
}

.chatInput {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  resize: none;
  color: #333 !important;
}