FullPageChat - Unable to assign type theme={{}}

[KazeroG]

is because the FullPageChat component doesn't have a theme prop defined in its API. Therefore you cannot pass it a theme object.

[hoacode96]

Got the same issue. Is there any way to customize ?

[dollypizzle]

Got the same issue. Is there any way to customize ?

Put the theme regardless, it will work

const chatTheme = {
    button: {
      backgroundColor: '#3B81F6',
      right: 20,
      bottom: 20,
      size: 'medium',
      iconColor: 'white',
      customIconSrc: 'https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg',
    },
    chatWindow: {
      showTitle: false,
      title: 'Flowise Bot',
      titleAvatarSrc: 'https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg',
      welcomeMessage: 'Hello! This is custom welcome message',
      backgroundColor: '#ffffff',
      fontSize: 16,
      poweredByTextColor: 'red',
      userMessage: {
        backgroundColor: '#3B81F6',
        textColor: '#ffffff',
        showAvatar: true,
        avatarSrc: 'https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/usericon.png',
      }
    },
  };

  return (
      <FullPageChat
        theme={chatTheme}
        chatflowid="fkfkffkkfkfk"
      />
  )

[mirensookdeo22]

You can add it and it will work but will fail to build a docker image

36.13 Type error: Type '{ chatflowid: string; apiHost: string | undefined; theme: { button: { backgroundColor: string; size: string; iconColor: string; customIconSrc: string; }; chatWindow: { welcomeMessage: string; backgroundColor: string; ... 6 more ...; textInput: { ...; }; }; }; }' is not assignable to type 'IntrinsicAttributes & BotProps & { style?: CSSProperties | undefined; className?: string | undefined; }'.
36.13 Property 'theme' does not exist on type 'IntrinsicAttributes & BotProps & { style?: CSSProperties | undefined; className?: string | undefined; }'.

Any planned updates to the react-embed component to address this issue?

[tgonzales]

I solved it by creating a typing in d.ts

declare module 'flowise-embed-react' {
interface BotProps {
chatflowid: string
apiHost: string
theme?: {
chatWindow: {
showTitle: boolean
title: string
titleAvatarSrc: string
welcomeMessage: string
errorMessage: string
backgroundColor: string
height: number
width: number
fontSize: number
poweredByTextColor: string
botMessage: {
backgroundColor: string
textColor: string
showAvatar: boolean
avatarSrc: string
}
userMessage: {
backgroundColor: string
textColor: string
showAvatar: boolean
avatarSrc: string
}
textInput: {
placeholder: string
backgroundColor: string
textColor: string
sendButtonColor: string
maxChars: number
maxCharsWarningMessage: string
autoFocus: boolean
}
feedback: {
color: string
}
footer: {
textColor: string
text: string
company: string
companyLink: string
}
}
}
}

export const FullPageChat: React.FC
}

[rapidstartup]

After adding this, I get the following error now (wasnt there before)
Type '{ chatflowid: string; apiHost: string; theme: { chatWindow: { showTitle: boolean; title: string; titleAvatarSrc: string; showAgentMessages: boolean; welcomeMessage: string; errorMessage: string; ... 9 more ...; footer: { ...; }; }; }; }' is not assignable to type 'IntrinsicAttributes'.
Property 'chatflowid' does not exist on type 'IntrinsicAttributes'.

[kaptainkangaroo]

Its working for me like this:

  

import React from 'react';

import { FullPageChat } from "flowise-embed-react"; // Import the FullPageChat component

  

// Define the props type including the theme

interface ExtendedBotProps {

chatflowid: string;

apiHost: string;

theme?: {

chatWindow: {

showTitle: boolean;

title: string;

titleAvatarSrc: string;

showAgentMessages: boolean;

welcomeMessage: string;

errorMessage: string;

backgroundColor: string;

height: number;

width: string;

fontSize: number;

poweredByTextColor: string;

botMessage: {

backgroundColor: string;

textColor: string;

showAvatar: boolean;

avatarSrc: string;

};

userMessage: {

backgroundColor: string;

textColor: string;

showAvatar: boolean;

avatarSrc: string;

};

textInput: {

placeholder: string;

backgroundColor: string;

textColor: string;

sendButtonColor: string;

maxChars: number;

maxCharsWarningMessage: string;

autoFocus: boolean;

sendMessageSound: boolean;

receiveMessageSound: boolean;

};

feedback: {

color: string;

};

footer: {

textColor: string;

text: string;

company: string;

companyLink: string;

};

};

};

}

  

const FlowisePage: React.FC = () => {

const botProps: ExtendedBotProps = {

chatflowid: "xxx",

apiHost: "xxx",

theme: {

chatWindow: {

showTitle: true,

title: 'Flowise Bot',

titleAvatarSrc: 'https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg',

showAgentMessages: false,

welcomeMessage: 'Hello! This is custom welcome message',

errorMessage: 'This is a custom error message',

backgroundColor: "#ffffff",

height: 900,

width: "80%",

fontSize: 16,

poweredByTextColor: "#303235",

botMessage: {

backgroundColor: "#f7f8ff",

textColor: "#303235",

showAvatar: true,

avatarSrc: "https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/parroticon.png",

},

userMessage: {

backgroundColor: "#3B81F6",

textColor: "#ffffff",

showAvatar: true,

avatarSrc: "https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/usericon.png",

},

textInput: {

placeholder: 'Type your question',

backgroundColor: '#ffffff',

textColor: '#303235',

sendButtonColor: '#3B81F6',

maxChars: 50,

maxCharsWarningMessage: 'You exceeded the characters limit. Please input less than 50 characters.',

autoFocus: true,

sendMessageSound: true,

receiveMessageSound: true,

},

feedback: {

color: '#303235',

},

footer: {

textColor: '#303235',

text: 'Powered by',

company: 'xxx',

companyLink: 'xxx',

}

}

}

};

  

return (

<FullPageChat {...botProps as any} />

);

};

  

export default FlowisePage; // Ensure the component is exported as default```