Nebular: I Want to Change Chat Ui component to feet my need

[TnCoders]

Hello,
As I didn't find any way to ask questions, no forum, I'am looking to change the Nebular Chat Ui component to fit My Need:I would like to use Chat Ui to create a simple Chatbot without IA.

For example:

• in the Chat ui the Sender avatar is not Displayed only reply message type that display avatar
• I would like also to put a waiting GIF when both make some APi call, for example and the sender waits for response.
• I need for example to add the possibilities to have an input button that the boat will suggest to users inside the chat message.

My question how can I Change the Chat Ui component and then install it with new features ?

[yggg]

You need to extend NbChatMessageComponent to customize chat messages.
There is ngSwitch (source) which used to determine what component to render. You can add new message types to add a bot response or anything else you need.

To enable avatars in replies remove ngIf here.

Also, you need to extend NbChatComponent to change selector used in ng-content to your custom message selector.

To sum up:

1. Add custom messages components, like bot suggestions.
2. Extend NbChatMessageComponent to add support for custom messages created above.
3. Update message selector in NbChatComponent template.
4. Create Module where you declare and export your custom components along with reexporting NbChatModule.

[vodz]

I'm looking to do something similar here. I extended NbChatComponent and NbChatMessageComponenthowever the custom child components I created lost all the original nebular theme styles. I tried to link the scss files directly from node_modulesto my component styleUrlsbut that didn't work.

How to use the original nebular theme styles in my extended CustomChatComponentand CustomChatMessageComponent?

[Miftahunajat]

@vodz @yggg
How do i create class that override the component ?
Because I need the component to be included in NbChatModule

[vodz]

I'm looking to do something similar here. I extended NbChatComponent and NbChatMessageComponenthowever the custom child components I created lost all the original nebular theme styles. I tried to link the scss files directly from node_modulesto my component styleUrlsbut that didn't work.

How to use the original nebular theme styles in my extended CustomChatComponentand CustomChatMessageComponent?

I partly solved my problem: if I copy all the styles from \node_modules\@nebular\theme\styles\core\_mixins.scss into global styles.scss the styles finally work in my extended component. However if I have them in my component stylesheet it seems the nb-theme() modifiers don't get recognized and do nothing, only a couple of "native" styles get applied.

Any idea how to fix this please?

[Miftahunajat]

Finally I'm extending my NbChatComponent and NbChatMessageComponent by copying the whole chat folder to theme/components/chat in my directory i also copied the module the whole NbChatModule therefore i still have syle from nebular.

[allanalves]

I solved the styles issue by extending the three elements:
`
app-chat {
@extend nb-chat;
}

app-chat-message {
@extend nb-chat-message;
}

app-chat-message-link-card {
@extend nb-chat-message-text;
}
`

The chat component ('nb-chat' or 'app-chat' in the case) was not recognizing the size attribute, that I've set to "medium". To solve that, I copied the native code to the 'chat.component.scss' file:

:host { display: flex; flex-direction: column; position: relative; height: 100%; }

[FilipK23]

@allanalves , Please what was the import of @extend nb-chat; ?

[allanalves]

@allanalves , Please what was the import of @extend nb-chat; ?

@FilipK23, I imported these:

@import 'themes';
@import '~@nebular/theme/styles/globals';

Remembering this code is in styles.scss in the src folder.

[gllrm-andres]

@allanalves gracias bro, me funcionó para customizar un componente con los estilos de nebular ❤

[allanalves]

@allanalves gracias bro, me funcionó para customizar un componente con los estilos de nebular ❤

Great! Happy to help.