Buttons in intro panel

[K-Jadeja]

Hey, absolutely love deep-chat, it has completely replaced streamlit for me

I'm a beginner at web developement and would appreciate any help to get this working with my typescript code. My aim is to have some suggested prompts on top of my chatbox like so

The docs are pretty confusing and I'm getting a lot of errors which leads to to believe I'm doing it all wrong

<DeepChat
        onNewMessage={(message) => {
          console.log(message);
        }}
        onComponentRender={() => {
          if (!isSet) {
            if (ref.current) {
              const component = ref.current.children[0] as DeepChatCore;
              component.initialMessages = [
                {
                  role: 'ai',
                  text: openingMsg,
                },

              ];
              isSet = true;
            }
          }
          if (ref.current) {
            const component = ref.current.children[0] as DeepChatCore;
            console.log(component.getMessages());
          }
        }}
        request={{ url: requestUrl }}
        requestInterceptor={requestInterceptor}
        responseInterceptor={responseInterceptor}
        stream={true}
      >

        <div
          style={{
            position: 'fixed', 
            width: '100%',
            bottom: '50px', 
            left: '1',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center', 
            pointerEvents: 'auto', 
            padding: '10px 0', 
          }}
        >
          <div
            style={{
              maxWidth: '100%',
              width: 'auto', 
              margin: '0 10px', 
              borderRadius: '25px',
              padding: '20px',
              boxSizing: 'border-box', 
              pointerEvents: 'auto', 
              display: 'flex', 
              flexDirection: 'column',
              gap: '10px',
            }}
          >
            <div
              style={{
                display: 'flex',
                flexDirection: 'column',
                gap: '10px',
              }}
            >
              <button
                style={{
                  backgroundColor: '#555', 
                  color: 'white',
                  padding: '10px 20px',
                  border: '1px solid #666',
                  borderRadius: '10px',
                  cursor: 'pointer',
                  fontSize: '16px',
                }}
                onClick={() => {
                  if (ref.current) {
                    const component = ref.current.children[0] as DeepChatCore;
                    component.htmlClassUtilities = {
                      ['custom-button']: {
                        events: {
                          click: (event) => {
                            if (event.target){
                              const text = event.target.children[0].innerText;
                              component.submitUserMessage(text.substring(1, text.length - 1));
                            }

                          },
                        },
                        styles: {
                          default: {
                            backgroundColor: '#f2f2f2',
                            borderRadius: '10px',
                            padding: '10px',
                            cursor: 'pointer',
                            textAlign: 'center',
                          },
                          hover: { backgroundColor: '#ebebeb' },
                          click: { backgroundColor: '#e4e4e4' },
                        },
                      },
                      ['custom-button-text']: { styles: { default: { pointerEvents: 'none' } } },
                    };
                  }
                }}
              >
                Pre prompt 1
              </button>
              <button
                style={{
                  backgroundColor: '#555',
                  color: 'white',
                  padding: '10px 20px',
                  border: '1px solid #666',
                  borderRadius: '10px',
                  cursor: 'pointer',
                  fontSize: '16px',
                }}
              >
                Pre prompt 2
              </button>
              <button
                style={{
                  backgroundColor: '#555',
                  color: 'white',
                  padding: '10px 20px',
                  border: '1px solid #666',
                  borderRadius: '10px',
                  cursor: 'pointer',
                  fontSize: '16px',
                }}
              >
                Pre prompt 3 
              </button>
            </div>
          </div>
        </div>
      </DeepChat>

I went through #106 but I still couldn't sus it out.

[OvidijusParsiunas]

Hi, having analyzed your code, the core things I can pick out are that your events should be moved to the htmlClassUtilities property and for these events to work they need to be assigned to elements with named classes. E.g. if you have a button with a class called "custom-button", in order for it to be assigned with events, you need to use the 'custom-button' property in htmlClassUtilities. This also goes for the styling.

The documentation has a couple of examples on how this is done, the first one being the official example that uses JavaScript and the other one is a React example that is used on our homepage at the bottom (blue chat). To find the code for that example - please check the following code. These examples should help you get started.

To simplify things, I have changed the code in your example to the following, you can use this to get started:

import {DeepChat as DeepChatCore} from 'deep-chat';
import {DeepChat} from 'deep-chat-react';
import React from 'react';

function App() {
  const ref = React.useRef<HTMLDivElement>(null);

  return (
    <div className="App" ref={ref}>
      <DeepChat
        demo={true}
        htmlClassUtilities={{
          'custom-button': {
            events: {
              click: (event) => {
                const component = ref.current?.children[0] as DeepChatCore;
                if (component) {
                  const text = ((event.target as HTMLElement).children[0] as HTMLElement).innerText;
                  component.submitUserMessage({text});
                }
              },
            },
            styles: {
              default: {
                cursor: 'pointer',
                textAlign: 'center',
                backgroundColor: '#555',
                color: 'white',
                padding: '10px 20px',
                border: '1px solid #666',
                borderRadius: '10px',
                fontSize: '16px',
                marginBottom: '10px',
              },
            },
          },
          'custom-button-text': {styles: {default: {pointerEvents: 'none'}}},
          'custom-container': {
            styles: {
              default: {
                width: '140px',
                marginTop: '-10px',
              },
            },
          },
        }}
      >
        <div style={{display: 'none'}}>
          <div className="custom-container">
            <button className="custom-button">
              <div className="custom-button-text">Pre prompt 1</div>
            </button>
            <button className="custom-button">
              <div className="custom-button-text">Pre prompt 2</div>
            </button>
            <button className="custom-button">
              <div className="custom-button-text">Pre prompt 3</div>
            </button>
          </div>
        </div>
      </DeepChat>
    </div>
  );
}

export default App;

[OvidijusParsiunas]

Since there has been no further communication I will be closing this issue. Feel free to still comment below and for anything else you can create a new issue. Thanks!