Unable to create placeholder message in index.tsx - NextJs

[root-runner]

I'm not the best proompt engineer out there so I'm having a little trouble adding a placeholder message to my chatbot. I've added the following code to the deepchat tag, but I keep getting the "expression expected error" when running locally.

`<div style={{ width: "200px", backgroundColor: "#f3f3f3", borderRadius: "10px", padding: "12px", paddingBottom: "15px", display: "none", }}

Intro panel

<div style={{fontSize: "15px", lineHeight: "20px"}}> Insert a description to help your users understand how to use the component.

[OvidijusParsiunas]

Hi @root-runner. If you are attempting to insert an intro panel into the chat, it appears you are missing a closing </div> tag in your syntax. Here is the full working code:

<DeepChat demo={true}>
  <div
    style={{
      width: '200px',
      backgroundColor: '#f3f3f3',
      borderRadius: '10px',
      padding: '12px',
      paddingBottom: '15px',
      display: 'none',
    }}
  >
    <div>
      <div style={{textAlign: 'center', marginBottom: '8px', fontSize: '16px'}}>
        <b>Intro panel</b>
      </div>
      <div style={{fontSize: '15px', lineHeight: '20px'}}>
        Insert a description to help your users understand how to use the component.
      </div>
    </div>
  </div>
</DeepChat>

Let me know if you need any further assistance. Thanks!

[root-runner]

Hey mate, thanks for the speedy reply. Should also mention that this repo is an amazing creation, so well done.

Oops for overlooking the closing div tag... I fixed that according to what you wrote, but unfortunately to no avail. If I add the '>' to the DeepChat element:

then I get a runtime error:

If I leave it open:

Then everything works except for the intro panel. I get an error as follows:

Any thoughts? I don't have much experience with react or typescript. Everything has been recently updated and I a using typescript with my project.

[OvidijusParsiunas]

That is quite strange. I have tested the code on the example React project and the live React project and it seems to work fine for me.

It might be something caused by the setup in your application. It is also interesting that you are inserting your code in an index.tsx file, usually the code is inserted in the app.tsx. It should not matter, but worth trying to see if it fixes it for you.

Here is a live example of the code used in my example. You can try to replicate it as close as possible to your React application to see where the cause is.

[root-runner]

Hey @OvidijusParsiunas,

I think I managed to get it working. Firstly, unsure why the code is in the index.tsx file - I am using next.js and this is the way it was setup when I initiated the app - still learning!

The code below is what I hade previously:

               <DeepChat
                  style={{
                     borderRadius: "10px",
                     border: "1px solid #bcbcbc",
                     backgroundColor: "#292929",
                     width: "100%",
                     height: "70vh",
                     fontSize: "1rem",
                  }}
                  messageStyles={{
                     default: {
                        ai: {
                           bubble: {backgroundColor: "#545454", color: "white"},
                        },
                     },
                     loading: {
                        bubble: {backgroundColor: "#545454", color: "white"},
                     },
                     error: {
                        bubble: {
                           backgroundColor: "#f98e00",
                           color: "white",
                           fontSize: "1rem",
                        },
                     },
                  }}
                  textInput={{
                     styles: {
                        container: {
                           width: "100%",
                           margin: "0",
                           borderRadius: "0",
                           borderTop: "1px solid #bcbcbc",
                           boxShadow: "unset",
                           backgroundColor: "#666666",
                           color: "#e8e8e8",
                        },
                        text: {
                           padding: "0.8rem 0.8rem 0.8rem 1.4rem",
                        },
                     },
                     placeholder: {
                        text: "Ask a question...",
                        style: {color: "#bcbcbc"},
                     },
                  }}
                  submitButtonStyles={{
                     submit: {
                        container: {
                           default: {
                              transform: "scale(1.2)",
                              margin: "-3px 20px",
                           },
                        },
                     },
                  }}
                  directConnection={{
                     openAI: {
                        key: "hidden",
                        assistant: {
                           assistant_id: "hidden",
                        },
                     },
                  }}
                  mixedFiles={false}
               />

And I managed to fix it by adjusting such a small part of the code to get this:

               <DeepChat
                  style={{
                     borderRadius: "10px",
                     border: "1px solid #bcbcbc",
                     backgroundColor: "#292929",
                     width: "100%",
                     height: "70vh",
                     fontSize: "1rem",
                  }}
                  messageStyles={{
                     default: {
                        ai: {
                           bubble: {backgroundColor: "#545454", color: "white"},
                        },
                     },
                     loading: {
                        bubble: {backgroundColor: "#545454", color: "white"},
                     },
                     error: {
                        bubble: {
                           backgroundColor: "#f98e00",
                           color: "white",
                           fontSize: "1rem",
                        },
                     },
                  }}
                  textInput={{
                     styles: {
                        container: {
                           width: "100%",
                           margin: "0",
                           borderRadius: "0",
                           borderTop: "1px solid #bcbcbc",
                           boxShadow: "unset",
                           backgroundColor: "#666666",
                           color: "#e8e8e8",
                        },
                        text: {
                           padding: "0.8rem 0.8rem 0.8rem 1.4rem",
                        },
                     },
                     placeholder: {
                        text: "Ask a question...",
                        style: {color: "#bcbcbc"},
                     },
                  }}
                  submitButtonStyles={{
                     submit: {
                        container: {
                           default: {
                              transform: "scale(1.2)",
                              margin: "-3px 20px",
                           },
                        },
                     },
                  }}
                  directConnection={{
                     openAI: {
                        key: "hidden",
                        assistant: {
                           assistant_id: "hidden",
                        },
                     },
                  }}
                  mixedFiles={false}
               >
                  <div
                     style={{
                        width: "200px",
                        backgroundColor: "#f3f3f3",
                        borderRadius: "10px",
                        padding: "12px",
                        paddingBottom: "15px",
                        display: "none",
                     }}
                  >
                     <div>
                        <div
                           style={{
                              textAlign: "center",
                              marginBottom: "8px",
                              fontSize: "16px",
                           }}
                        >
                           <b>Intro panel</b>
                        </div>
                        <div style={{fontSize: "15px", lineHeight: "20px"}}>
                           Insert a description to help your users understand
                           how to use the component.
                        </div>
                     </div>
                  </div>
               </DeepChat>

Basically - I had included the place holder as a part of the DeepChat tag:

<DeepChat 
     {styles-code}
     {placeholder-code} 
/>

When all I needed to do was include it BETWEEN an opening and closing tag, and not with the styles code:

<DeepChat
     {styles-code}
/>
     {placeholder-code}
</DeepChat>

I've attached the full index.tsx file I used for this react project in case you're curious.

index.tsx.zip

[OvidijusParsiunas]

Glad you got the issue resolved @root-runner!

I will close this issue. If you have any further questions, please raise a new issue. Thankyou!