From de1c6fa492693c290a506019033ccb3a645ca8ce Mon Sep 17 00:00:00 2001 From: Iisakki Rotko Date: Fri, 27 Sep 2024 10:40:43 +0200 Subject: [PATCH] feat: support styling input field of `ChatInput` Some users have been confused about why the value they give to the `style` prop of `ChatInput` does not get applied to the input field. This makes it possible to style that component. --- solara/lab/components/chat.py | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/solara/lab/components/chat.py b/solara/lab/components/chat.py index da5e0cf18..80fe9d328 100644 --- a/solara/lab/components/chat.py +++ b/solara/lab/components/chat.py @@ -46,6 +46,7 @@ def ChatInput( send_callback: Optional[Callable] = None, disabled: bool = False, style: Optional[Union[str, Dict[str, str]]] = None, + input_text_style: Optional[Union[str, Dict[str, str]]] = None, classes: List[str] = [], ): """ @@ -56,11 +57,13 @@ def ChatInput( * `send_callback`: A callback function for when the user presses enter or clicks the send button. * `disabled`: Whether the input should be disabled. Useful for disabling sending further messages while a chatbot is replying, among other things. - * `style`: CSS styles to apply to the component. Either a string or a dictionary. These styles are applied to the container component. + * `style`: CSS styles to apply to the `solara.Row` containing the input field and submit button. Either a string or a dictionary. + * `input_text_style`: CSS styles to apply to the `InputText` part of the component. Either a string or a dictionary. * `classes`: A list of CSS classes to apply to the component. Also applied to the container. """ message, set_message = solara.use_state("") # type: ignore style_flat = solara.util._flatten_style(style) + input_text_style_flat = solara.util._flatten_style(input_text_style) if "align-items" not in style_flat: style_flat += " align-items: center;" @@ -79,7 +82,7 @@ def send(*ignore_args): rounded=True, filled=True, hide_details=True, - style_="flex-grow: 1;", + style_="flex-grow: 1;" + input_text_style_flat, disabled=disabled, )