deep-chat icon indicating copy to clipboard operation
deep-chat copied to clipboard

Using DeepChat React component in an ExpressJS project

Open shash1403 opened this issue 9 months ago • 1 comments

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!

shash1403 avatar May 03 '24 12:05 shash1403

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/[email protected]/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>

buzhou9 avatar May 16 '24 03:05 buzhou9