OvidijusParsiunas / deep-chat

Fully customizable AI chatbot component for your website
https://deepchat.dev
MIT License
1.26k stars 170 forks source link

Using DeepChat React component in an ExpressJS project #184

Open shash1403 opened 1 month ago

shash1403 commented 1 month ago

Hi,

I have a prebuilt Express project that is using an EJS template. It's mostly a static website so even the frontend is served by Express. Can I integrate Deep Chat with this or would I have to create a new frontend React project to be able to do this?

The website has multiple pages and I need the Deep Chat React component on just one of the pages, which is already built with the appropriate styling and scripts for the other functions on the page. Or can I do this with just deep-chat and not deep-chat-react?

Any help would be appreciated. Thanks in advance!

buzhou9 commented 1 month ago

You can use 'deep chat' like a regular HTML element like 'div', which is a use case.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://unpkg.com/deep-chat@1.4.11/dist/deepChat.bundle.js" type="module" crossorigin></script>
</head>
<body>
<deep-chat id="chat-element" demo="true" textInput='{"placeholder":{"text": "Welcome to the demo!"}}'></deep-chat>
<script type="module">
  const chatElementRef = document.getElementById('chat-element');
  // Setting value via a property (easiest way)
  chatElementRef.history = [
    {role: 'user', text: 'Hey, how are you today?'},
    {role: 'ai', text: 'I am doing very well!'},
  ];
  chatElementRef.setAttribute(
    'introMessage',
    JSON.stringify({
      text: 'You are now running deep chat locally.',
    })
  );
</script>
</body>
</html>